/* =====================================================================
   BellaFit · base.css  —  Tokens, Reset, Typografie, Layout-Primitive
   ===================================================================== */

:root{
  /* Marken-CI ---------------------------------------------------- */
  --fl:        #E2001A;   /* FitLine-Rot (Gesundheit) */
  --fl-deep:   #B3001A;
  --fl-soft:   #FFF1F2;
  --fl-tint:   #FCE7E9;

  --pm:        #003A78;   /* PM-International-Navy (Karriere) */
  --pm-deep:   #002A5C;
  --pm-bright: #0061B0;
  --pm-soft:   #EAF1F8;

  --gold:      #C99A4E;   /* warmer Akzent / Trust */

  /* Neutrale Töne ------------------------------------------------ */
  --ink:       #16181D;
  --ink-soft:  #2A2D35;
  --muted:     #5A5F6B;
  --muted-2:   #868C99;
  --line:      rgba(22,24,29,.10);
  --line-2:    rgba(22,24,29,.06);
  --paper:     #FAF8F4;
  --paper-2:   #F2ECE4;
  --paper-3:   #ECE3D8;
  --white:     #ffffff;

  /* Typo --------------------------------------------------------- */
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-sans: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Radius / Schatten ------------------------------------------- */
  --r-xs: 8px; --r-sm: 12px; --r: 18px; --r-lg: 26px; --r-xl: 36px; --r-pill: 999px;
  --sh-sm: 0 1px 2px rgba(22,24,29,.06), 0 2px 8px rgba(22,24,29,.05);
  --sh:    0 8px 30px rgba(22,24,29,.08), 0 2px 8px rgba(22,24,29,.05);
  --sh-lg: 0 24px 60px rgba(22,24,29,.14), 0 8px 20px rgba(22,24,29,.08);
  --sh-fl: 0 16px 40px rgba(226,0,26,.22);
  --sh-pm: 0 16px 40px rgba(0,58,120,.22);

  /* Layout ------------------------------------------------------- */
  --container: 1200px;
  --content: 760px;
  --nav-h: 76px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---- Reset --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-sans);
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
ul,ol{list-style:none}
:focus-visible{outline:3px solid var(--pm-bright);outline-offset:2px;border-radius:4px}
::selection{background:var(--fl);color:#fff}

/* ---- Typografie ---------------------------------------------------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;color:var(--ink)}
.h-display{font-size:clamp(2.6rem,6.4vw,5.4rem);line-height:1.02;letter-spacing:-.035em}
h1,.h1{font-size:clamp(2.3rem,5vw,4rem)}
h2,.h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3,.h3{font-size:clamp(1.3rem,2vw,1.7rem)}
p{max-width:68ch}
strong{font-weight:600}
em{font-style:italic}

.eyebrow{
  font-family:var(--font-sans);font-weight:600;font-size:.78rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--fl);
  display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;display:inline-block}
[data-accent="pm"] .eyebrow{color:var(--pm)}
.lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.6;color:var(--ink-soft);font-weight:400}
.muted{color:var(--muted)}

/* ---- Layout-Primitive --------------------------------------------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.container--narrow{max-width:920px}
.section{padding-block:clamp(64px,9vw,128px)}
.section--tight{padding-block:clamp(48px,6vw,80px)}
.section-head{max-width:720px;margin-bottom:clamp(36px,5vw,64px)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head .eyebrow{margin-bottom:18px}
.section-head h2{margin-bottom:18px}

.grid{display:grid;gap:clamp(20px,3vw,36px)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* Hintergründe / Trenner */
.bg-paper-2{background:var(--paper-2)}
.bg-ink{background:var(--ink);color:#fff}
.bg-pm{background:var(--pm);color:#fff}
.hairline{height:1px;background:var(--line);border:0}

/* ---- Reveal-Animationen ------------------------------------------- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-delay="1"]{transition-delay:.08s}
.reveal[data-delay="2"]{transition-delay:.16s}
.reveal[data-delay="3"]{transition-delay:.24s}
.reveal[data-delay="4"]{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ---- Utilities ----------------------------------------------------- */
.text-center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:28px}.mt-l{margin-top:44px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.accent-fl{color:var(--fl)}
.accent-pm{color:var(--pm)}