/* =========================================================================
 * Frühchen-Mamas Studie — Design System
 * Core color + type tokens, drawn from the recruitment material PPTX templates
 * (poster, flyer, Insta post, Insta story).
 *
 * Typography: Albert Sans (Google Fonts). The original templates use
 * "Albert Sans" and "Albert Sans ExtraBold" — both shipped from the
 * variable font. Calibri appears only in PPTX fallbacks, ignored here.
 * ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300;400;500;600;700;800&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---- Brand colors (verbatim from PPTX `srgbClr val=...`) ------------ */
  --brand-blue-900:     #003a52;   /* deepened for hover/active on blue-700 */
  --brand-blue-700:     #005476;   /* primary deep blue — bg of hero panels */
  --brand-blue-500:     #1D6295;   /* mid blue, used as alt panel bg */
  --brand-cyan-400:     #00ACD4;   /* secondary accent / highlight */
  --brand-cyan-200:     #7ed4e8;   /* tint, derived */
  --brand-coral-500:    #F15F57;   /* warm coral — logo ring, CTA accents */
  --brand-coral-300:    #f6938d;   /* tint, derived */
  --brand-coral-600:    #d94c45;   /* shade for hover */
  --white:              #FFFFFF;
  --off-white:          #F7F4EE;   /* warm paper, harmonises with coral */
  --cream:              #FBF6EC;   /* card / page bg in light mode */
  --ink-900:            #0E2A38;   /* near-black; from logo line work */
  --ink-700:            #2A4A5A;
  --ink-500:            #5B7280;
  --ink-300:            #9AACB7;
  --ink-200:            #C9D4DB;
  --ink-100:            #E7ECEF;
  --ink-50:             #F3F6F8;

  /* ---- Semantic foreground / background ----------------------------- */
  --fg-1:               var(--ink-900);  /* primary text */
  --fg-2:               var(--ink-700);  /* secondary text */
  --fg-3:               var(--ink-500);  /* tertiary / meta */
  --fg-inverse:         var(--white);
  --fg-accent:          var(--brand-coral-500);
  --fg-link:            var(--brand-blue-700);
  --fg-link-hover:      var(--brand-coral-500);

  --bg-page:            var(--cream);
  --bg-surface:         var(--white);
  --bg-muted:           var(--ink-50);
  --bg-deep:            var(--brand-blue-700);   /* hero / inverse panels */
  --bg-mid:             var(--brand-blue-500);
  --bg-accent:          var(--brand-cyan-400);
  --bg-warm:            var(--off-white);

  --border-soft:        #E2DCCF;       /* warm paper border */
  --border-strong:      var(--ink-200);
  --border-deep:        rgba(0,84,118,0.18);

  /* ---- Type scale --------------------------------------------------- */
  --font-sans:          "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif:         "Lora", "Iowan Old Style", Georgia, serif;
  --font-mono:          ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* Display sizes (poster + insta cover) */
  --fs-display-1:       72px;   /* poster hero "Frühchen-Mama?" */
  --fs-display-2:       56px;   /* insta cover hero */
  --fs-display-3:       44px;

  /* Headings */
  --fs-h1:              40px;
  --fs-h2:              30px;
  --fs-h3:              22px;
  --fs-h4:              18px;
  --fs-eyebrow:         13px;   /* small caps section labels */

  /* Body */
  --fs-lead:            20px;
  --fs-body:            17px;
  --fs-small:           15px;
  --fs-micro:           13px;

  /* Weights — Albert Sans hits these cleanly */
  --fw-light:           300;
  --fw-regular:         400;
  --fw-medium:          500;
  --fw-semibold:        600;
  --fw-bold:            700;
  --fw-extrabold:       800;

  /* Line heights */
  --lh-tight:           1.05;
  --lh-snug:            1.2;
  --lh-normal:          1.5;
  --lh-relaxed:         1.65;

  /* Letter-spacing — slight negative on display per Albert Sans */
  --tracking-display:   -0.015em;
  --tracking-heading:   -0.005em;
  --tracking-eyebrow:   0.14em;
  --tracking-body:      0;

  /* ---- Spacing / radii / shadow ------------------------------------- */
  --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;

  --radius-xs:          4px;
  --radius-sm:          8px;
  --radius-md:          14px;
  --radius-lg:          22px;       /* card */
  --radius-xl:          32px;       /* hero panel */
  --radius-pill:        999px;
  --radius-circle:      50%;

  --shadow-xs:          0 1px 2px rgba(14, 42, 56, 0.06);
  --shadow-sm:          0 2px 6px rgba(14, 42, 56, 0.07), 0 1px 2px rgba(14, 42, 56, 0.05);
  --shadow-md:          0 8px 22px rgba(14, 42, 56, 0.08), 0 2px 4px rgba(14, 42, 56, 0.05);
  --shadow-lg:          0 22px 48px rgba(14, 42, 56, 0.12), 0 4px 10px rgba(14, 42, 56, 0.06);
  --shadow-deep:        0 30px 60px rgba(0, 58, 82, 0.28);   /* on-blue */
  --ring-focus:         0 0 0 3px rgba(0, 172, 212, 0.35);

  /* Motion */
  --ease-out:           cubic-bezier(.2,.7,.2,1);
  --ease-in-out:        cubic-bezier(.65,.05,.36,1);
  --dur-1:              120ms;
  --dur-2:              200ms;
  --dur-3:              320ms;
  --dur-4:              520ms;
}

/* Default body face — opt-in components use `.ds-*` for full styling, but
   everything gets the brand sans by default. */
html, body {
  font-family: var(--font-sans, "Albert Sans", system-ui, sans-serif);
  color: var(--fg-1);
  -webkit-font-smoothing: antialiased;
}

/* =========================================================================
 * Semantic element defaults — use the .ds-prose wrapper, or .ds-* utility
 * classes, to opt content into the system rather than restyling globally.
 * ========================================================================= */
.ds-prose h1, .ds-h1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
.ds-prose h2, .ds-h2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: var(--space-6) 0 var(--space-3);
  text-wrap: balance;
}
.ds-prose h3, .ds-h3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-heading);
  color: var(--fg-1);
  margin: var(--space-5) 0 var(--space-2);
}
.ds-prose h4, .ds-h4 {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
  margin: var(--space-4) 0 var(--space-2);
}
.ds-prose p, .ds-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}
.ds-lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--brand-coral-500);
}
.ds-display-1 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.ds-display-2 {
  font-family: var(--font-sans);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-display-2);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.ds-display-3 {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-display-3);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
}
.ds-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-h3);
  line-height: var(--lh-relaxed);
  color: var(--fg-1);
}
.ds-small  { font-size: var(--fs-small); }
.ds-micro  { font-size: var(--fs-micro); color: var(--fg-3); }
.ds-mono   { font-family: var(--font-mono); }

/* Convenient inverse contexts (deep-blue panel) */
.ds-on-blue       { color: var(--fg-inverse); }
.ds-on-blue .ds-eyebrow { color: var(--brand-cyan-400); }
.ds-on-blue p     { color: rgba(255,255,255,0.85); }

/* =========================================================================
 * Responsive Utilities
 * ========================================================================= */

/* page transition */
.page-fade-in {
  animation: pageFadeIn 180ms ease-out both;
}
@keyframes pageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* visibility helpers */
@media (max-width: 767px) {
  .rsp-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .rsp-show-mobile { display: none !important; }
}

/* nav hamburger button reset */
.rsp-hamburger {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-left: auto;
}
.rsp-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--brand-blue-700);
  border-radius: 2px;
  transition: all 200ms;
}

/* mobile nav overlay */
.rsp-mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(251,246,236,0.98);
  display: flex;
  flex-direction: column;
  padding: 24px 20px;
  gap: 8px;
  overflow-y: auto;
}

/* =========================================================================
 * Global overflow guard + mobile font fixes
 * ========================================================================= */
html, body {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* prevent fixed-width elements from causing horizontal scroll */
  * { max-width: 100%; box-sizing: border-box; }
  img { height: auto; }
}