/* ============================================================
   CP Branding — Base (v2)
   Reset · Design-Tokens · Fonts · Typografie-Grundlagen
   Sektions-Styles kommen in styles.css (gebaut Stück für Stück)
   ============================================================ */

/* ---------- Fonts (self-hosted) ---------- */
/* Primärschrift des Redesigns: Nohemi (selbst-gehostet, alle Gewichte). */
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:100; font-display:swap; src:url("../fonts/nohemi-100.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:200; font-display:swap; src:url("../fonts/nohemi-200.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:300; font-display:swap; src:url("../fonts/nohemi-300.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/nohemi-400.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/nohemi-500.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/nohemi-600.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/nohemi-700.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:800; font-display:swap; src:url("../fonts/nohemi-800.woff2") format("woff2"); }
@font-face { font-family:"Nohemi"; font-style:normal; font-weight:900; font-display:swap; src:url("../fonts/nohemi-900.woff2") format("woff2"); }

@font-face { font-family:"Poppins"; font-style:normal; font-weight:400; font-display:swap; src:url("../fonts/poppins-400.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:500; font-display:swap; src:url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:600; font-display:swap; src:url("../fonts/poppins-600.woff2") format("woff2"); }
@font-face { font-family:"Poppins"; font-style:normal; font-weight:700; font-display:swap; src:url("../fonts/poppins-700.woff2") format("woff2"); }

/* ---------- Design-Tokens ---------- */
:root {
  /* Schrift */
  --font-sans: "Nohemi", "Poppins", system-ui, sans-serif;

  /* Farben (Redesign) */
  --ink:          #282828;   /* near-black: Headline, Menübar */
  --paper:        #dedede;   /* heller Hero-Grauton */
  --bg:           #1e1e1e;
  --bg-soft:      #262626;
  --bg-card:      #2a2a2a;
  --accent:       #f0592b;
  --accent-2:     #f3722c;
  --accent-red:   #f94144;
  --navy:         #2f648d;
  --blue:         #577590;
  --text:         #ffffff;
  --muted:        #c4c4c4;
  --muted-2:      #9a9a9a;
  --border:       rgba(255,255,255,0.10);
  --border-soft:  rgba(255,255,255,0.06);

  /* Gradient (Headline etc.) */
  --grad-warm: linear-gradient(90deg, #f94144 0%, #f3722c 50%, #f94144 100%);

  /* Layout */
  --header-h: 72px;
  --maxw:     1180px;
  --pad:      clamp(20px, 5vw, 64px);
  --radius:   18px;
  --radius-lg:28px;

  /* Motion (zentral, damit alle Animationen konsistent sind) */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);   /* easeOutQuint-ish */
  --dur-fast:  0.3s;
  --dur:       0.6s;
  --dur-slow:  1s;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4,h5 { margin: 0; line-height: 1.12; font-weight: 700; }
p { margin: 0; }
::selection { background: var(--accent); color: #fff; }

/* ---------- Helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Verhindert Flash: animierte Elemente erst sichtbar, wenn JS bereit ist.
   Bei deaktiviertem JS oder Reduced-Motion bleibt alles normal sichtbar. */
.js-ready [data-anim] { will-change: transform, opacity; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}