/* ==========================================================================
   Klee Immoconcept – Design-Tokens
   Übernommen aus dem Design-System
   (klee-immoconcept-design-system-c6884aee-9ac0-43cf-97df-91b7c5f6e38e).
   Werte hier nicht anpassen – dies ist die Marken-Ebene, nicht die Objekt-Ebene.
   ========================================================================== */

:root {
  /* --- Marke: Kernfarben ------------------------------------------------ */
  --klee-green-deep: rgb(40, 67, 61);
  --klee-green-sage: rgb(101, 169, 154);
  --klee-lime: rgb(192, 245, 144);
  --klee-ink: rgb(41, 45, 50);
  --klee-white: rgb(255, 255, 255);

  /* --- Web-Palette (gemessen auf klee-immoconcept.de) ------------------- */
  --klee-web-lime: rgb(208, 255, 166);
  --klee-page: rgb(245, 248, 248);
  --klee-card: rgb(255, 255, 255);
  --klee-page-border: rgba(40, 67, 61, 0.10);
  --klee-text-dark: rgb(40, 67, 61);
  --klee-text-muted: rgb(77, 92, 89);
  --klee-card-shadow: 0 4px 24px rgba(40, 67, 61, 0.07);

  /* --- Semantische Aliase ---------------------------------------------- */
  --surface-page: var(--klee-page);
  --surface-card-light: var(--klee-card);
  --text-body: var(--klee-text-dark);
  --text-muted: var(--klee-text-muted);

  /* --- Typografie ------------------------------------------------------- */
  --font-sans: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Radien & Schatten ------------------------------------------------ */
  --radius-card-web: 18px;
  --radius-pill-web: 999px;
  --radius-inner: 12px;
  --radius-badge: 10px;

  /* --- Motion ------------------------------------------------------------
     Kurven bewusst stärker als die CSS-Defaults (ease/ease-out), die für
     absichtsvolle Bewegung zu schwach sind.
     Präfix "--klee-" gegen Kollisionen mit WordPress-Theme-Variablen bei der
     späteren Elementor-Integration.

     Verwendung:
     - Ein-/Ausblenden           -> --klee-ease-out
     - Bewegung/Morphen          -> --klee-ease-in-out
     - Aufklappende Panels       -> --klee-ease-drawer
     "ease-in" wird nicht verwendet: es startet langsam und verzögert genau
     den Moment, den der Nutzer beobachtet. */
  --klee-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --klee-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --klee-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  --klee-duration-press: 150ms;   /* Button-Feedback */
  --klee-duration-panel: 260ms;   /* Aufklapp-Elemente (Akkordeon) */

  /* --- Layout: Seitenränder & Container --------------------------------- */
  --klee-gutter: 20px;          /* ≥390px  */
  --klee-container: 100%;

  /* --- Overlays --------------------------------------------------------- */
  --klee-hero-scrim: linear-gradient(
    180deg,
    rgba(20, 26, 25, 0.55) 0%,
    rgba(20, 26, 25, 0.85) 100%
  );
}

@media (min-width: 768px) {
  :root {
    --klee-gutter: 32px;
    --klee-container: 100%;
  }
}

@media (min-width: 1280px) {
  :root {
    --klee-gutter: 44px;
    --klee-container: 1180px;
    --klee-hero-scrim: linear-gradient(
      90deg,
      rgba(20, 26, 25, 0.9) 0%,
      rgba(20, 26, 25, 0.62) 55%,
      rgba(20, 26, 25, 0.28) 100%
    );
  }
}