/* ============================================================
   Kay B. Rogalla – Landingpage · Design-System
   Extrahiert aus app/globals.css + allen Komponenten.
   Plain CSS, ergänzt Bootstrap 5 (überschreibt dessen Variablen).
   ============================================================ */

:root {
  /* ---- Farben: Marke / Akzent ---- */
  --color-primary:        #e5b738;  /* Gold – Buttons, Akzente, Sterne, Icons */
  --color-primary-dark:   #c9951d;  /* dunkleres Gold – Eyebrows/Captions, Hover */
  --color-btn-label:      #331a0a;  /* Textfarbe auf Gold-Button */
  --color-outline-text:   #613719;  /* Outline-/Link-Button Text */

  /* ---- Farben: Text ---- */
  --color-heading:        #242424;
  --color-body:           #242424;
  --color-caption:        #6d6d6d;  /* Sekundärtext / Disclaimer */
  --color-muted:          #b0b0b0;  /* Form-Labels, Placeholder */
  --color-light:          #fafafa;  /* Text auf dunklem Grund */

  /* ---- Farben: Flächen ---- */
  --color-surface:        #ffffff;
  --color-surface-dark:   #000000;  /* Footer-Hintergrund */
  --color-secondary-50:   #f9f7f6;  /* helle Karten/Sektionen */
  --color-secondary-100:  #eeeae7;  /* Tabellen-Zebra, Akkordeon, Tabs */
  --color-secondary-200:  #dcd1cb;  /* Tab-Fläche, Bild-Platzhalter */
  --color-secondary-300:  #c4b4ab;  /* Borders dunkler */
  --color-secondary-900:  #513f3d;  /* dunkles Braun – Badge-Border, After-Panel */
  --color-overlay-dark:   rgba(44, 34, 33, 0.8); /* Badge-/Formular-BG auf Bildern */
  --color-placeholder-bg: #cccccc;  /* Video-Platzhalter */
  --color-btn-secondary:  #2e2c2c;

  /* ---- Borders ---- */
  --color-border:         #d1d1d1;
  --color-border-light:   #e7e7e7;

  /* ---- Typografie ---- */
  --font-heading: "Inter", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
  --font-counter: "Teko", sans-serif;        /* nur Countdown */

  /* Schriftgrößen (px-Skala aus den Komponenten) */
  --fs-13: 0.8125rem;  --fs-14: 0.875rem;  --fs-16: 1rem;
  --fs-18: 1.125rem;   --fs-20: 1.25rem;   --fs-24: 1.5rem;
  --fs-28: 1.75rem;    --fs-32: 2rem;      --fs-36: 2.25rem;
  --fs-40: 2.5rem;     --fs-48: 3rem;      --fs-72: 4.5rem;

  /* Gewichte */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Spacing-System (4er-Raster) ---- */
  --space-1: 0.25rem;  /*  4px */
  --space-2: 0.5rem;   /*  8px */
  --space-3: 0.75rem;  /* 12px */
  --space-4: 1rem;     /* 16px */
  --space-5: 1.25rem;  /* 20px */
  --space-6: 1.5rem;   /* 24px – gap-content */
  --space-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px – gap-desktop */
  --space-14: 3.5rem;  /* 56px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px – Container-Padding desktop, py-container */

  --max-desktop: 90rem; /* 1440px – maximale Inhaltsbreite */

  /* ---- Radius ---- */
  --radius-sm: 4px;    /* Buttons, Inputs, Tabellenrahmen, Karten */
  --radius-md: 8px;    /* Bilder, Panels */
  --radius-lg: 12px;   /* Modal */
  --radius-xl: 16px;   /* Akkordeon-Karte */
  --radius-pill: 100px;/* Badges, Pills, Social-Buttons */

  /* ---- Schatten ---- */
  --shadow-sm:  0 4px 14px rgba(0, 0, 0, 0.09);  /* aktiver Tab */
  --shadow-md:  0 12px 22px rgba(0, 0, 0, 0.2);  /* Vorher/Nachher-Panel */
  --shadow-lg:  0 10px 40px rgba(0, 0, 0, 0.18); /* Modal (shadow-2xl) */
  --shadow-photo: 0 30px 60px rgba(0, 0, 0, 0.5);/* Kay-Foto drop-shadow */

  /* ---- Transitions ---- */
  --transition-fast: 150ms ease-in-out;
  --transition-base: 300ms ease;
  --ease-out-expo: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Bootstrap-5-Variablen an die Marke koppeln ---- */
:root {
  --bs-primary: var(--color-primary);
  --bs-body-color: var(--color-body);
  --bs-body-font-family: var(--font-body);
  --bs-body-bg: var(--color-surface);
  --bs-border-radius: var(--radius-sm);
}

/* ============================================================
   Breakpoint-Hinweis:
   Das Figma-Design nutzt Tailwind-Breakpoints  md=768px / lg=1024px.
   Bootstrap 5 nutzt  md=768px / lg=992px / xl=1200px.
   → Für 1:1-Treue ist der lg-Umbruch (1024px) als eigene Media-Query
     statt Bootstrap-`lg` umgesetzt. Utility-Klasse unten.
   ============================================================ */

/* ---- Basis ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--color-surface);
  color: var(--color-body);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Wiederkehrende Bausteine ---- */

/* Container (max 1440px + responsives Padding 16/32/80px) */
.kr-container {
  width: 100%;
  max-width: var(--max-desktop);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px)  { .kr-container { padding-inline: var(--space-8);  } }
@media (min-width: 1024px) { .kr-container { padding-inline: var(--space-20); } }

/* Sektions-Vertikalabstand (py-10 / lg:py-20) */
.kr-section { padding-block: var(--space-10); }
@media (min-width: 1024px) { .kr-section { padding-block: var(--space-20); } }

/* Eyebrow / Kicker (TopCaption) */
.kr-eyebrow {
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--color-primary-dark);
  margin: 0;
}

/* Section-Headline (H2-Skala 36/40/48) */
.kr-h2 {
  font-size: var(--fs-36);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  letter-spacing: -1.8px;
  color: var(--color-heading);
}
@media (min-width: 768px)  { .kr-h2 { font-size: var(--fs-40); letter-spacing: -2px;   } }
@media (min-width: 1024px) { .kr-h2 { font-size: var(--fs-48); letter-spacing: -2.4px; } }

/* Fließtext */
.kr-lead { font-size: var(--fs-20); font-weight: var(--fw-semibold); letter-spacing: -1px; line-height: 1.5; }
.kr-text { font-size: var(--fs-16); line-height: 1.5; color: var(--color-body); }
.kr-fineprint { font-size: var(--fs-14); line-height: 1.5; color: var(--color-caption); }

/* Gold-Button (Default-CTA) */
.kr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 3rem; padding-inline: var(--space-4);
  font-size: var(--fs-18); font-weight: var(--fw-semibold);
  white-space: nowrap; cursor: pointer;
  background: var(--color-primary); color: var(--color-btn-label);
  border: 2px solid var(--color-primary); border-radius: var(--radius-sm);
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
}
.kr-btn:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); color: #000; }
.kr-btn--block { width: 100%; }

/* Pill-Badge */
.kr-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  font-size: var(--fs-14); font-weight: var(--fw-medium); white-space: nowrap;
}
.kr-badge--dark  { background: var(--color-overlay-dark); border: 1px solid var(--color-secondary-900); color: var(--color-light); }
.kr-badge--light { background: var(--color-secondary-50); border: 1px solid var(--color-secondary-100); color: var(--color-body); }

/* Marquee (Logos / Auszeichnungen) */
@keyframes kr-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
.kr-marquee { display: flex; width: max-content; align-items: center; animation: kr-marquee 90s linear infinite; }
.kr-marquee:hover { animation-play-state: paused; }

/* Scroll-Zoom-Reveal (optional, per IntersectionObserver) */
.sz-item { opacity: 0; transform: scale(0.92); transition: opacity .7s ease, transform .7s var(--ease-out-expo); will-change: transform, opacity; }
.sz-item.sz-in { opacity: 1; transform: scale(1); }
@media (prefers-reduced-motion: reduce) { .sz-item { opacity: 1; transform: none; transition: none; } }

/* Hero-Foto Float */
@keyframes kr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }