/* =============================================================================
   Konzentriert mit Julia und Damaris — Design Tokens
   Colors & typography pulled directly from Flyer 01.
   Brand voice: warm, calm, supportive, hand-drawn, professional-but-friendly.
   ========================================================================== */

/* ---------- Webfonts -------------------------------------------------------
   Mulish (variable) is used as the working substitute for the flyer's
   bespoke italic humanist sans. If you have access to the real type files,
   drop them in /fonts/ and override the @font-face block below.
   --------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* ---------- Brand color tokens ------------------------------------------ */
  --k-coral:        #FF616E;   /* Primary. Headlines, accent strokes, brain glyph. */
  --k-coral-700:    #E5424F;   /* Hover / press on coral surfaces. */
  --k-coral-100:    #FFE3E6;   /* Soft coral wash for backgrounds, chips. */
  --k-coral-50:     #FFF1F2;   /* Lightest tint — table rows, hovers. */

  --k-navy:         #1C2E4C;   /* Logo wordmark; primary text on light. */
  --k-navy-700:     #142238;   /* Pressed / extra emphasis. */
  --k-navy-300:     #6A7793;   /* Muted navy — captions, metadata. */

  --k-mint:         #AFD5D9;   /* Brand mint band, hero bg, illustration line. */
  --k-mint-700:     #7FB6BC;   /* Active state on mint surfaces. */
  --k-mint-100:     #DCEDEF;   /* Soft mint surface for cards / chips. */
  --k-mint-50:      #EEF6F7;   /* Subtle mint wash. */

  --k-sand:         #EBE8DC;   /* Cream "heart" blob, secondary surface. */
  --k-sand-100:     #F5F3EC;   /* Page panel / off-white. */

  --k-white:        #FFFFFF;
  --k-ink:          #1C2E4C;   /* Alias of navy — primary text. */
  --k-ink-2:        #4A5876;   /* Secondary body text. */
  --k-ink-3:        #8A93A8;   /* Tertiary / placeholder. */

  /* ---------- Semantic / functional --------------------------------------- */
  --color-bg:           var(--k-white);
  --color-bg-alt:       var(--k-sand-100);
  --color-bg-band:      var(--k-mint);
  --color-bg-band-soft: var(--k-mint-100);
  --color-bg-warm:      var(--k-sand);

  --color-fg:           var(--k-navy);
  --color-fg-muted:     var(--k-ink-2);
  --color-fg-subtle:    var(--k-ink-3);
  --color-fg-on-mint:   var(--k-navy);
  --color-fg-on-coral:  var(--k-white);

  --color-accent:       var(--k-coral);
  --color-accent-fg:    var(--k-white);

  --color-link:         var(--k-coral);
  --color-link-hover:   var(--k-coral-700);

  --color-border:       #E2E8EC;
  --color-border-strong:#C4D1D6;

  --color-success: #5BB58A;
  --color-warning: #E8A24D;
  --color-danger:  #E5424F;

  /* ---------- Type families ----------------------------------------------- */
  --font-sans:    "Mulish", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Mulish", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Display is set in italic — see semantic styles below. */

  /* ---------- Type scale (modular ~1.250) --------------------------------- */
  --fs-12: 0.75rem;     /* caption */
  --fs-14: 0.875rem;    /* small */
  --fs-16: 1rem;        /* body */
  --fs-18: 1.125rem;    /* lead body */
  --fs-20: 1.25rem;     /* h6 / subtitle */
  --fs-24: 1.5rem;      /* h5 */
  --fs-30: 1.875rem;    /* h4 */
  --fs-36: 2.25rem;     /* h3 */
  --fs-48: 3rem;        /* h2 */
  --fs-64: 4rem;        /* h1 display */
  --fs-80: 5rem;        /* hero display */

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;

  /* ---------- Weights ----------------------------------------------------- */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ---------- Spacing scale (4 / 8 px) ------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;

  /* ---------- Radii (the brand favours organic + pill shapes) ------------- */
  --radius-sm:    6px;
  --radius-md:    12px;
  --radius-lg:    20px;
  --radius-xl:    32px;
  --radius-pill:  999px;
  --radius-blob:  64% 36% 58% 42% / 42% 58% 42% 58%; /* organic heart-blob shape */

  /* ---------- Elevation — kept very soft; the brand reads "calm" ---------- */
  --shadow-1: 0 1px 2px rgba(28, 46, 76, 0.06);
  --shadow-2: 0 6px 18px -8px rgba(28, 46, 76, 0.18);
  --shadow-3: 0 18px 40px -20px rgba(28, 46, 76, 0.22);
  --shadow-focus: 0 0 0 3px rgba(255, 97, 110, 0.30);

  /* ---------- Motion ------------------------------------------------------ */
  --ease-out:    cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.6, .0, .3, 1);
  --dur-fast:    140ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
}

/* ============================================================================
   SEMANTIC TYPE STYLES — use these instead of raw classes where possible.
   The flyer uses an italic display voice for ALL primary headings ("Fokus
   finden.", "Das sind WIR:", "Unser Ziel"). Body copy stays upright.
   ============================================================================ */

html { color: var(--color-fg); background: var(--color-bg); }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-normal);
  color: var(--color-fg);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-48), 5.5vw, var(--fs-80));
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--k-coral);
  text-wrap: balance;
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: clamp(var(--fs-36), 3.6vw, var(--fs-48));
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--k-coral);
  text-wrap: balance;
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  font-size: var(--fs-30);
  line-height: var(--lh-snug);
  color: var(--k-coral);
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-24);
  line-height: var(--lh-snug);
  color: var(--k-coral);
  margin: 0 0 var(--space-3);
}

h5, .h5 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--fw-bold);
  font-size: var(--fs-20);
  line-height: var(--lh-snug);
  color: var(--color-fg);
  margin: 0 0 var(--space-2);
}

h6, .h6 {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: var(--fw-regular);
  font-size: var(--fs-16);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-normal);
  text-transform: none;
  color: var(--color-fg);
  margin: 0 0 var(--space-2);
}

p, .p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

.lead {
  font-size: var(--fs-18);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
}

.small, small {
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}

.eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-14);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--k-coral);
}

/* Italic display "stamp" — for short callout phrases like "Fokus finden." */
.display-stamp {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--k-coral);
  font-size: clamp(var(--fs-48), 6vw, var(--fs-80));
  line-height: 0.95;
  letter-spacing: -0.015em;
}

/* Wordmark style — "konzentriert" in navy semibold lowercase */
.wordmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-style: normal;
  color: var(--k-navy);
  text-transform: lowercase;
  letter-spacing: -0.01em;
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); }

code, pre, kbd {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
}