/* ==========================================================================
   Jacura Design-Tokens
   --------------------------------------------------------------------------
   1:1 uebernommen aus dem Claude-Design-Projekt "Handelsvertreter I Jacura V2"
   (Design-System jacura-design-system-8bf2a0fd, Dateien tokens/*.css).
   Wer eine Farbe, einen Radius oder eine Schriftgroesse aendern will, aendert
   sie HIER — nirgends im Markup. Die Seite referenziert ausschliesslich Tokens.
   ========================================================================== */

/* --- Schrift: Sora, selbst gehostet ---------------------------------------
   Bewusst NICHT ueber fonts.googleapis.com: das laedt bei jedem Seitenaufruf
   die Besucher-IP zu Google (LG Muenchen I, 3 O 17493/20) und waere auf einer
   deutschen Pflege-Website ein vermeidbares DSGVO-Risiko. Gleiche Loesung wie
   bei goldhausen (dort figtree). Nur die fuenf tatsaechlich benutzten Schnitte
   sind eingebunden — jedes weitere Gewicht waere ungenutzter Download.        */
@font-face { font-family: 'Sora'; src: url('../assets/fonts/Sora-Regular.ttf') format('truetype');   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../assets/fonts/Sora-Medium.ttf') format('truetype');    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../assets/fonts/Sora-SemiBold.ttf') format('truetype');  font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../assets/fonts/Sora-Bold.ttf') format('truetype');      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Sora'; src: url('../assets/fonts/Sora-ExtraBold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* --- Basispalette — aus Live-Site und Bildmarke abgeleitet --------------- */
  --jac-teal-900: #005576;
  --jac-teal-800: #00405a;
  --jac-pink-500: #ed70a0;
  --jac-pink-600: #d85a8c;
  --jac-white: #ffffff;
  --jac-gray-500: #808080;
  --jac-black: #000000;
  --jac-surface-tint: #f5f9fa;
  --jac-surface-neutral: #f6f7f7;
  --jac-border: #e3e9ec;
  --jac-border-faint: #f0f3f4;
  --jac-border-hairline: rgba(0, 85, 118, .08);
  --jac-success: #10b97c;

  /* --- Semantische Aliase — diese hier im Markup benutzen ----------------- */
  --color-primary: var(--jac-teal-900);
  --color-primary-hover: var(--jac-teal-800);
  --color-accent: var(--jac-pink-500);
  --color-accent-hover: var(--jac-pink-600);
  --color-bg-page: var(--jac-white);
  --color-bg-alt: var(--jac-surface-tint);
  --color-bg-muted: var(--jac-surface-neutral);
  --color-text-primary: var(--jac-teal-900);
  --color-text-primary-soft: rgba(0, 85, 118, .74);
  --color-text-muted: var(--jac-gray-500);
  --color-text-on-accent: var(--jac-white);
  --color-text-on-dark: var(--jac-white);
  --color-text-on-dark-muted: rgba(255, 255, 255, .78);
  --color-border: var(--jac-border);
  --color-border-faint: var(--jac-border-faint);
  /* Haarlinie — spielt mit den hellen, getoenten Schatten zusammen und gibt
     einer Karte Kontur, ohne ihr Gewicht zu geben. */
  --color-border-hairline: var(--jac-border-hairline);
  --color-success: var(--jac-success);
  --color-selection: rgba(237, 112, 160, .28);

  /* --- Akzent- und Primaer-Toene: Icon-Kacheln, Fuellungen, Zustaende ------ */
  --tint-accent-08: rgba(237, 112, 160, .08);
  --tint-accent-10: rgba(237, 112, 160, .1);
  --tint-accent-12: rgba(237, 112, 160, .12);
  --tint-accent-14: rgba(237, 112, 160, .14);
  --tint-accent-18: rgba(237, 112, 160, .18);
  --tint-primary-07: rgba(0, 85, 118, .07);
  --tint-primary-10: rgba(0, 85, 118, .1);

  /* --- Typografie --------------------------------------------------------- */
  --font-display: 'Sora', 'Segoe UI', Arial, sans-serif;
  --font-legal: Helvetica, Arial, sans-serif;

  /* Hero und Ueberschriften — Gewicht 500, enge Laufweite. Die Seite setzt
     die Groessen ueber clamp(), die Werte hier sind das obere Ende.          */
  --fs-hero: 63.75px;
  --lh-hero: 76.5px;
  --fw-hero: 500;
  --ls-hero: -1.8px;
  --fs-heading-lg: 44.2px;
  --lh-heading-lg: 53px;
  --fw-heading-lg: 500;
  --ls-heading-lg: -1.1px;
  --fs-heading-md: 34px;
  --lh-heading-md: 42.5px;
  --fw-heading-md: 500;
  --ls-heading-md: -.7px;
  --fs-card-heading: 23.375px;
  --lh-card-heading: 30px;
  --fw-card-heading: 700;
  --fs-subheading: 21.25px;
  --lh-subheading: 33px;
  --fw-subheading: 500;

  /* Fliesstext — die Luftigkeit kommt aus der Zeilenhoehe, nicht aus der Groesse. */
  --fs-body-lg: 20.4px;
  --lh-body-lg: 32px;
  --fw-body-lg: 400;
  --fs-body: 17px;
  --lh-body: 27px;
  --fw-body: 400;
  --fs-body-medium: 17px;
  --lh-body-medium: 1.65;
  --fw-body-medium: 500;
  --lh-relaxed: 1.7;

  /* Labels und Bedienelemente */
  --fs-label: 13px;
  --lh-label: 20px;
  --fw-label: 600;
  --ls-label: 1.2px;
  --fs-button: 16px;
  --fw-button: 600;
  --fs-legal: 15px;
  --lh-legal: 24px;
  --fw-legal: 400;
  --ls-legal: .1px;

  /* --- Abstaende: 5px-Basis. In der Karte eng, zwischen den Abschnitten weit. */
  --space-xs: 5px;
  --space-sm: 6px;
  --space-md-sm: 10px;
  --space-md: 14px;
  --space-base: 16px;
  --space-base-plus: 17px;
  --space-md-lg: 18px;
  --space-lg: 20px;
  --space-xl: 25px;
  --space-2xl: 30px;
  --space-3xl: 34px;
  --space-4xl: 35px;
  --space-5xl: 40px;
  --space-6xl: 50px;
  --space-7xl: 60px;
  --space-8xl: 70px;
  --space-9xl: 80px;
  --space-10xl: 90px;
  --space-11xl: 100px;
  --space-section: 124px;
  --space-section-lg: 152px;

  /* --- Radien -------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-2xl: 28px;
  --radius-3xl: 36px;
  --radius-pill: 29px;
  --radius-pill-lg: 40px;

  /* --- Schatten ------------------------------------------------------------
     Getoent im Marken-Teal und geschichtet (enger Kontaktschatten + weiter,
     angehobener Umgebungsschatten) statt eines flachen schwarzen Blurs.       */
  --shadow-header: 0 1px 0 rgba(0, 85, 118, .06);
  --shadow-card-soft: 0 1px 2px rgba(0, 85, 118, .04), 0 12px 32px -8px rgba(0, 85, 118, .08);
  --shadow-card-medium: 0 2px 4px rgba(0, 85, 118, .05), 0 20px 48px -12px rgba(0, 85, 118, .13);
  --shadow-card-hover: 0 2px 6px rgba(0, 85, 118, .06), 0 28px 60px -14px rgba(0, 85, 118, .18);
  --shadow-card-prominent: 0 4px 8px rgba(0, 85, 118, .06), 0 32px 72px -16px rgba(0, 85, 118, .2);
  --shadow-float: 0 2px 6px rgba(0, 85, 118, .06), 0 16px 40px -10px rgba(0, 85, 118, .2);
  --shadow-modal: 0 4px 10px rgba(0, 85, 118, .08), 0 40px 88px -22px rgba(0, 85, 118, .34);
  --shadow-cta-pink: 0 10px 28px -8px rgba(237, 112, 160, .45);
  --shadow-cta-pink-sm: 0 6px 18px -6px rgba(237, 112, 160, .4);
  --shadow-cta-teal: 0 8px 22px -6px rgba(0, 85, 118, .28);

  /* --- Layout -------------------------------------------------------------- */
  --wrap: 1240px;
  --wrap-pad: 32px;
}