/* ==========================================================================
   Design Tokens
   Struktursprache an Amazon-Seller angelehnt, eigenes Farbschema:
   Petrol/Teal (Vertrauen, Medizin) + Amber-Gold (CTA) + Ink (Typo/Bänder)
   ========================================================================== */

:root {
  /* --- Farben: Ink / Text ------------------------------------------------ */
  --c-ink:            #10202E;
  --c-ink-2:          #1B3448;
  --c-ink-3:          #33475B;
  --c-text:           #10202E;
  --c-text-muted:     #55697C;
  --c-text-invert:    #FFFFFF;

  /* --- Farben: Marke (Petrol) -------------------------------------------- */
  --c-brand:          #14657F;
  --c-brand-dark:     #0D4759;
  --c-brand-light:    #1E88A8;
  --c-brand-tint:     #E8F2F5;
  --c-brand-tint-2:   #D3E6EC;

  /* --- Farben: CTA (Amber-Gold) ------------------------------------------ */
  --c-cta:            #FFB020;
  --c-cta-hover:      #F0A00C;
  --c-cta-active:     #DB9007;
  --c-cta-text:       #10202E;
  --c-cta-tint:       #FFF4DC;

  /* --- Farben: Status ----------------------------------------------------- */
  --c-success:        #0F9D58;
  --c-success-tint:   #E6F5EE;
  --c-warning:        #C77700;
  --c-danger:         #C8342B;
  --c-danger-tint:    #FBEAE9;
  --c-link:           #0B6BD3;

  /* --- Farben: Flächen ---------------------------------------------------- */
  --c-surface:        #FFFFFF;
  --c-surface-soft:   #F6F4F0;
  --c-surface-soft-2: #EFEBE4;
  --c-line:           #DDE3E9;
  --c-line-strong:    #C2CCD6;

  /* --- Typografie --------------------------------------------------------- */
  --font-sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Helvetica, Arial, sans-serif;

  --fs-xs:   0.8125rem;  /* 13 */
  --fs-sm:   0.9375rem;  /* 15 */
  --fs-base: 1.0625rem;  /* 17 */
  --fs-md:   1.1875rem;  /* 19 */
  --fs-lg:   1.375rem;   /* 22 */
  --fs-xl:   1.75rem;    /* 28 */
  --fs-2xl:  2.25rem;    /* 36 */
  --fs-3xl:  3rem;       /* 48 */
  --fs-4xl:  3.75rem;    /* 60 */

  --lh-tight: 1.08;
  --lh-snug:  1.25;
  --lh-base:  1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi:   600;
  --fw-bold:   700;
  --fw-black:  800;

  /* --- Raster & Abstände --------------------------------------------------- */
  --container:      1280px;
  --container-slim: 880px;
  --gutter:         24px;

  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* --- Radien --------------------------------------------------------------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* --- Schatten ------------------------------------------------------------- */
  --sh-1: 0 1px 2px rgba(16, 32, 46, .06), 0 1px 3px rgba(16, 32, 46, .08);
  --sh-2: 0 2px 6px rgba(16, 32, 46, .07), 0 6px 16px rgba(16, 32, 46, .08);
  --sh-3: 0 8px 24px rgba(16, 32, 46, .10), 0 18px 48px rgba(16, 32, 46, .10);
  --sh-focus: 0 0 0 3px rgba(20, 101, 127, .35);

  /* --- Bewegung ------------------------------------------------------------- */
  --ease: cubic-bezier(.2, .7, .3, 1);
  --dur:  180ms;

  /* --- Header --------------------------------------------------------------- */
  --header-h:  68px;
  --topbar-h:  38px;
}

@media (max-width: 900px) {
  :root {
    --fs-3xl: 2.25rem;
    --fs-4xl: 2.625rem;
    --fs-2xl: 1.875rem;
    --gutter: 18px;
    --sp-9:   64px;
    --sp-10:  80px;
  }
}

/* Auf Handybreite gibt das längste Wort der Seite die Grenze vor:
   "Krankenversicherung" misst bei 34px rund 320px und passt damit in die
   339px, die auf einem 375px-Schirm nach Abzug der Ränder bleiben. Eine
   Nummer größer, und die Hauptüberschrift bricht mitten im Wort. */
@media (max-width: 560px) {
  :root {
    --fs-4xl: 2.125rem;   /* 34px */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 1ms; }
}