/* ============================================================
   RADHAUS HARTMANN – Design System "Variante B"
   1:1 aus Radhaus-Hartmann-DESIGN.md (Renault-Extraktion) umgesetzt.

   Kernideen des Systems:
   · Zwei-Ton-Canvas: Weiß zum Blättern, Schwarz zum Erzählen –
     als volle Bänder, nicht als weiche Verläufe.
   · EIN Akzent: Sunlight Yellow #ffed00, sparsam. Gelb immer mit
     schwarzem Text, nie mit weißem.
   · Eine einzige Schriftfamilie, Display immer 700 / lineHeight .95.
   · Eckige Geometrie: 0px auf Kacheln, 2px auf Buttons,
     Pill ausschließlich für Sub-Nav-Chips.
   · Schattenfrei. Tiefe entsteht durch Farbblöcke und Konturen.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* --- Brand & Accent ------------------------------------ */
  --primary:        #ffed00;
  --primary-deep:   #e6d200;
  --on-primary:     #000000;

  /* --- Surface ------------------------------------------- */
  --canvas:         #ffffff;
  --surface-soft:   #f7f7f7;
  --surface-dark:   #000000;
  --surface-deep:   #111111;
  --hairline:       #f2f2f2;
  --hairline-strong:#000000;
  --divider-dark:   rgba(255, 255, 255, .16);

  /* --- Text ---------------------------------------------- */
  --ink:            #000000;
  --body:           #222222;
  --charcoal:       #333333;
  --mute:           #666666;
  --ash:            #8a8a8a;
  --stone:          #c4c4c4;
  --on-dark:        #ffffff;
  --on-dark-mute:   rgba(255, 255, 255, .72);

  /* --- Semantisch (funktional, nicht dekorativ) ---------- */
  --error:          #be6464;
  --warning:        #f0ad4e;
  --success:        #8dc572;
  --info:           #337ab7;

  /* --- Typografie ----------------------------------------
     NouvelR ist lizenzpflichtig. Substitut laut MD: Inter Tight
     (Alternativen: Manrope, HK Grotesk Semi Condensed).
     lineHeight auf Display-Größen explizit auf .95 klemmen. */
  --font: 'Inter Tight', 'Helvetica Neue', Arial, system-ui, sans-serif;

  /* Größenleiter inkl. Breakpoint-Klemmung 56 → 40 → 32 */
  --fs-display-xl: clamp(32px, 3.9vw, 56px);
  --fs-display-lg: clamp(28px, 3.0vw, 40px);
  --fs-display-md: clamp(24px, 2.4vw, 32px);
  --fs-heading-lg: 24px;
  --fs-heading-md: 20px;
  --fs-heading-sm: 18px;
  --fs-subtitle:   19.2px;
  --fs-body-lg:    18px;
  --fs-body-md:    16px;
  --fs-body-sm:    14px;
  --fs-button-lg:  16px;
  --fs-button-md:  14.4px;
  --fs-button-sm:  13px;
  --fs-caption:    12px;
  --fs-overline:   10px;

  /* Bewusste Abweichung vom Token-Set: die Kampagnen-Headline
     im Hero darf über display-xl hinauswachsen (R5-Kampagnenlogik).
     Nur hier verwenden – alle anderen Headlines bleiben im Raster. */
  --fs-hero:       clamp(40px, 7vw, 96px);

  /* --- Abstände (Basis 4px) ------------------------------ */
  --sp-xxs:   4px;
  --sp-xs:    8px;
  --sp-sm:   12px;
  --sp-md:   16px;
  --sp-lg:   20px;
  --sp-xl:   24px;
  --sp-xxl:  32px;
  --sp-xxxl: 40px;
  --sp-section: 80px;

  /* --- Radien -------------------------------------------- */
  --r-none:  0px;
  --r-xs:    2px;
  --r-sm:    3px;
  --r-md:    4px;
  --r-pill: 46px;
  --r-full: 9999px;

  /* --- Container ----------------------------------------- */
  --container: 1440px;
  --gutter:    clamp(16px, 3vw, 24px);

  /* --- Motion -------------------------------------------- */
  --ease:     cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur-fast: .16s;
  --dur:      .3s;
  --dur-slow: .8s;

  /* --- Canvas-Farben (werden von site.js gelesen) -------- */
  --canvas-accent:   #ffed00;
  --canvas-dim:      rgba(255, 237, 0, .3);
  --canvas-particle: #ffffff;
}

@media (max-width: 767px) {
  :root { --sp-section: 40px; }
}

/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Navbar 60px + Sub-Nav-Rail 61px */
  scroll-padding-top: 133px;
  -webkit-text-size-adjust: 100%;
  /* Bewusst kein overflow-x-Guard: macht das Dokument sonst zum
     Scroll-Container und bricht position:sticky. */
}

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body-md);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--primary); color: var(--on-primary); }

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.band--dark :focus-visible,
.band--dark a:focus-visible { outline-color: var(--primary); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 300;
  padding: 12px 20px;
  background: var(--primary); color: var(--on-primary);
  font-size: var(--fs-button-md); font-weight: 700;
  border-radius: var(--r-xs);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ------------------------------------------------------------
   3. TYPOGRAFIE
   Display immer 700 / lineHeight .95 – die Enge ist das System.
   ------------------------------------------------------------ */
.display-xl, .display-lg, .display-md,
h1, h2, h3, h4 {
  font-weight: 700;
  line-height: .95;
  letter-spacing: 0;
  text-wrap: balance;
}

.display-xl { font-size: var(--fs-display-xl); }
.display-lg { font-size: var(--fs-display-lg); }
.display-md { font-size: var(--fs-display-md); }
.heading-lg { font-size: var(--fs-heading-lg); font-weight: 700; line-height: .95; }
.heading-md { font-size: var(--fs-heading-md); font-weight: 700; line-height: .95; }
.heading-sm { font-size: var(--fs-heading-sm); font-weight: 700; line-height: 1; }

/* Kampagnen-Headline (siehe --fs-hero) */
.display-hero {
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

.subtitle {
  font-size: var(--fs-subtitle);
  font-weight: 600;
  line-height: 1.3;
  max-width: 46ch;
}

.body-lg { font-size: var(--fs-body-lg); font-weight: 400; line-height: 1.5; max-width: 62ch; }
.body-md { font-size: var(--fs-body-md); font-weight: 400; line-height: 1.4; max-width: 62ch; }
.body-sm { font-size: var(--fs-body-sm); font-weight: 400; line-height: 1.57; }
.caption { font-size: var(--fs-caption); font-weight: 400; line-height: 1.4; }

.overline {
  display: block;
  font-size: var(--fs-overline);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Textfarben-Stufen (nie Ash/Stone für Fließtext) */
.t-body     { color: var(--body); }
.t-charcoal { color: var(--charcoal); }
.t-mute     { color: var(--mute); }

/* ------------------------------------------------------------
   4. BÄNDER & LAYOUT
   Sektionswechsel passiert über Farbblöcke, nicht über Padding.
   ------------------------------------------------------------ */
.band {
  position: relative;
  padding-block: var(--sp-section);
}
.band--flush { padding-block: 0; }

.band--light  { background: var(--canvas);      color: var(--ink); }
.band--soft   { background: var(--surface-soft); color: var(--ink); }
.band--dark   { background: var(--surface-dark); color: var(--on-dark); }
.band--yellow { background: var(--primary);      color: var(--on-primary); }

.band--dark .t-body,
.band--dark .t-charcoal,
.band--dark .t-mute { color: var(--on-dark-mute); }

.shell {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.band-head { margin-bottom: var(--sp-xxxl); }
.band-head .overline { margin-bottom: var(--sp-sm); }
.band-head .display-lg { margin-bottom: var(--sp-md); }

/* Kopf mit Beschreibung rechts */
.band-head--split { display: grid; gap: var(--sp-lg) var(--sp-xxxl); }
@media (min-width: 1024px) {
  .band-head--split { grid-template-columns: 1fr 1fr; align-items: end; }
}

.grid { display: grid; gap: var(--sp-xl); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

/* Hairline-Trenner */
.rule        { height: 1px; border: 0; background: var(--hairline); }
.rule--ink   { background: var(--hairline-strong); }
.band--dark .rule { background: var(--divider-dark); }

/* ------------------------------------------------------------
   5. BUTTONS
   Alle Standard-Buttons: 2px Radius, Label 700.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--r-xs);
  border: 1px solid transparent;
  font-size: var(--fs-button-md);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .144px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; }

/* Gelbe Primäraktion – höchstens eine pro Band */
.btn--primary { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.btn--primary:hover { background: var(--primary-deep); border-color: var(--primary-deep); }

/* Schwarze Sekundäraktion */
.btn--dark { background: var(--surface-dark); color: var(--on-dark); border-color: var(--surface-dark); }
.btn--dark:hover { background: var(--body); border-color: var(--body); }

/* Kontur auf Hell */
.btn--outline { background: var(--canvas); color: var(--ink); border-color: var(--hairline-strong); }
.btn--outline:hover { background: var(--ink); color: var(--on-dark); }

/* Kontur auf Dunkel */
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.btn--outline-light:hover { background: var(--on-dark); color: var(--ink); }

.btn--lg { font-size: var(--fs-button-lg); padding: 16px 28px; min-height: 54px; }

/* Pill – ausschließlich Sub-Nav und kleine Filterreihen */
.pill {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 18px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  background: var(--canvas);
  color: var(--ink);
  font-size: var(--fs-button-sm);
  font-weight: 600;
  letter-spacing: .13px;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.pill:hover { background: var(--ink); color: var(--on-dark); }
.pill.is-active { background: var(--ink); color: var(--on-dark); }
@media (max-width: 767px) { .pill { height: 40px; } }

/* Quadratischer Icon-Button */
.icon-btn {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: var(--canvas);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-xs);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--ink); color: var(--on-dark); }
.band--dark .icon-btn { background: transparent; border-color: var(--on-dark); color: var(--on-dark); }
.band--dark .icon-btn:hover { background: var(--on-dark); color: var(--ink); }

/* Badge "NEU" */
.badge {
  display: inline-block;
  padding: 6px 14px;
  background: var(--primary);
  color: var(--on-primary);
  border-radius: var(--r-full);
  font-size: var(--fs-button-md);
  font-weight: 700;
  line-height: 1;
}

/* ------------------------------------------------------------
   6. 3D-PRIMITIVE
   Bewegung ja – Schatten nein. Tiefe bleibt strukturell.
   ------------------------------------------------------------ */
.stage { perspective: 1400px; }

.tilt {
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(var(--tz, 0px));
  transition: transform var(--dur-slow) var(--ease-out);
  will-change: transform;
}
.tilt.is-live { transition: transform .12s linear; }
.tilt__layer { transform: translateZ(var(--depth, 30px)); transform-style: preserve-3d; }

/* ------------------------------------------------------------
   7. SCROLL-REVEAL
   ------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
  transition: opacity .7s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"]  { transform: translate3d(-28px, 0, 0); }
[data-reveal="right"] { transform: translate3d(28px, 0, 0); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* padding-top schafft Platz für Umlautpunkte, die overflow:hidden sonst kappt */
.reveal-line { display: block; overflow: hidden; padding-top: .18em; margin-top: -.18em; }
.reveal-line > span {
  display: block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
  transition-delay: var(--line-delay, 0ms);
}
.is-in .reveal-line > span,
.reveal-line.is-in > span { transform: translateY(0); }

/* ------------------------------------------------------------
   8. MOTION-PRÄFERENZEN
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .reveal-line > span { transform: none; }
  .tilt { transform: none !important; }
}