/* =========================================================================
   K-M Music — Design Tokens
   Einzige Quelle für Farben, Typografie, Raster, Radius, Motion.
   Die Site ist durchgehend dunkel (Label-Ästhetik, Cover brauchen einen
   ruhigen Grund) — es gibt bewusst KEINEN Light-Mode und keinen Umschalter.
   Palette und Schriften sind aus dem abgelösten WordPress-Theme übernommen,
   damit die Marke den CMS-Wechsel überlebt.
   ========================================================================= */

/* --- Schriften: lokal ausgeliefert ---------------------------------------
   Keine Einbettung von fonts.googleapis.com. Das WordPress-Theme lud die
   Schriften bei Google — dabei geht die IP jedes Besuchers an einen
   Drittstaat, und genau dafür gab es in Deutschland bereits Abmahnungen.
   font-display:swap hält den Text sichtbar, während die Datei lädt. */

@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Bebas Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/bebas-neue-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* DM Sans ist eine Variable Font: eine Datei deckt 400–700 ab. */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 100 1000;
  font-display: swap;
  src: url('../fonts/dm-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  /* --- Flächen ---------------------------------------------------------- */
  --bg:            #0a0a0a;   /* Seitenhintergrund */
  --bg-alt:        #111111;   /* abgesetzte Sektionen */
  --bg-card:       #1a1a1a;   /* Karten */
  --bg-elevated:   #222222;   /* Hover, Panels */
  --border:        #2a2a2a;
  --border-strong: #333333;

  /* --- Text ------------------------------------------------------------- */
  --text:          #ffffff;
  --text-muted:    #a0a0a0;
  --text-subtle:   #666666;
  --text-on-accent:#0a0a0a;

  /* --- Akzent: das Gold der Marke --------------------------------------- */
  --accent:        #D4A853;
  --accent-hover:  #E5B964;
  --accent-dark:   #B8923F;
  --accent-glow:   rgba(212, 168, 83, 0.15);
  --accent-subtle: rgba(212, 168, 83, 0.08);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: 'Bebas Neue', 'Haettenschweiler', 'Impact', sans-serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.0625rem;
  --fs-lg:   1.1875rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  clamp(1.6rem, 1.2rem + 1.5vw, 2.1rem);
  --fs-3xl:  clamp(2.0rem, 1.4rem + 2.6vw, 3.0rem);
  --fs-4xl:  clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
  --fs-hero: clamp(3.2rem, 1.8rem + 7.2vw, 8.0rem);

  --lh-tight:   1.02;
  --lh-snug:    1.2;
  --lh-base:    1.65;

  --ls-wide:    0.08em;
  --ls-wider:   0.18em;
  --ls-display: 0.01em;

  /* --- Raster ----------------------------------------------------------- */
  --container:        1280px;
  --container-narrow: 760px;
  --gutter:           clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --gap:              2rem;
  --section-y:        clamp(3.5rem, 2rem + 6vw, 7rem);

  --radius:    4px;
  --radius-lg: 8px;

  /* --- Motion ----------------------------------------------------------- */
  --ease:       cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast:   140ms;
  --dur:        260ms;
  --dur-slow:   620ms;

  --shadow-card: 0 18px 40px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 0 1px var(--accent-glow), 0 20px 50px rgba(0, 0, 0, 0.6);
}

/* Wer Bewegung abbestellt hat, bekommt keine. Gilt global und überschreibt
   alle Reveal-/Hover-Animationen weiter unten. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}