/* ============================================================
   base.css — Fonts, Variablen, Reset, Utilities
   anne&thorsten. Landingpages
   ============================================================ */

/* --- SELF-HOSTED FONTS ---
   Header: Outfit (500, 600, 700)
   Body:   Raleway (400, 500, 600)
   Pfad relativ zum CSS: /fonts/
   ------------------------------------------------------------ */
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Outfit';
  src: url('/fonts/outfit-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Raleway';
  src: url('/fonts/raleway-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --- DESIGN TOKENS --- */
:root {
  /* Farben */
  --lp-accent:    #E8652D;
  --lp-accent-h:  #F07A47;
  --lp-bg-1:      #0B1A2E;
  --lp-bg-2:      #0F2138;
  --lp-bg-3:      #132540;
  --lp-border:    rgba(232, 101, 45, .2);
  --lp-border-h:  rgba(232, 101, 45, .5);
  --lp-text-main: #BDBFC4;
  --lp-text-dim:  #8A8F99;
  --lp-white:     #FFF;
  --lp-radius:    4px;
  --lp-max:       1100px;
  --lp-narrow:    840px;

  /* Schriften */
  --font-header: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:   'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fw-header:   600;
  --lh-header:   1.2;
  --ls-header:   -0.4px;
}

/* --- RESET --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--font-body); font-weight: 400; font-size: 16px; line-height: 1.65; color: var(--lp-text-main); background: var(--lp-bg-1); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

/* --- ANIMATION --- */
@keyframes lpUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- UTILITIES --- */
.lp-orange { color: var(--lp-accent); }
.lp-section-inner { max-width: var(--lp-max); margin: 0 auto; }

/* --- BUTTON (shared) --- */
.lp-btn {
  display: inline-block;
  background: var(--lp-accent);
  color: var(--lp-white);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: var(--lp-radius);
  text-decoration: none;
  transition: background .2s, transform .2s;
  border: none;
  cursor: pointer;
}
.lp-btn:hover { background: var(--lp-accent-h); transform: translateY(-2px); }

/* --- SECTION LABEL & TITLE (shared) --- */
.lp-sl {
  font-family: var(--font-header);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--lp-accent);
  margin-bottom: 12px;
}
.lp-st {
  font-family: var(--font-header);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: var(--fw-header);
  line-height: var(--lh-header);
  letter-spacing: var(--ls-header);
  color: var(--lp-white);
  margin-bottom: 48px;
}
.lp-pr-sub {
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--lp-text-main);
  line-height: 1.6;
  margin: -32px 0 48px;
  text-align: left;
}