/* ==========================================================
   spyke — zentrale Design-Tokens & Basis-Styles
   Eine Änderung hier wirkt auf alle Seiten.
   Einbinden auf jeder Seite: <link rel="stylesheet" href="/spyke.css">
   ========================================================== */

:root {
  /* --- Markenfarben --- */
  --gelb: #f2fe13;
  --schwarz: #0b0b0b;
  --offwhite: #f7f7f2;
  --blau: #3d5af1;          /* nur interaktiv: Links, aktive Zustände */

  /* --- Neutrale Treppe (warmes Grau, perzeptuell gleichmäßig) --- */
  --n-0:   #f7f7f2;
  --n-100: oklch(0.93 0.006 106);
  --n-200: oklch(0.86 0.006 106);
  --n-300: oklch(0.78 0.005 106);
  --n-400: oklch(0.70 0.005 106);
  --n-500: oklch(0.62 0.004 106);
  --n-600: oklch(0.53 0.004 106);
  --n-700: oklch(0.44 0.003 106);
  --n-800: oklch(0.35 0.003 106);
  --n-900: oklch(0.26 0.002 106);
  --n-950: #0b0b0b;

  /* --- Typografie --- */
  --font: 'Poppins', sans-serif;
  --fs-display: clamp(56px, 42px + 3.6vw, 124px);
  --fs-h1: clamp(44px, 36.6px + 1.9vw, 80px);
  --fs-h2: clamp(34px, 29.9px + 1.06vw, 54px);
  --fs-h3: clamp(26px, 23.9px + 0.53vw, 36px);
  --fs-h4: clamp(20px, 18.8px + 0.32vw, 26px);
  --fs-body-l: clamp(16px, 15.4px + 0.16vw, 19px);
  --fs-body: clamp(14px, 13.6px + 0.11vw, 16px);
  --fs-label: clamp(11px, 10.6px + 0.11vw, 13px);

  /* --- Motion: „spyke-ease" — langsam rein, sanft abbremsen --- */
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
  --dauer: 0.55s;

  /* --- Radien --- */
  --r-pill: 999px;   /* Buttons, Toggles, Tabs */
  --r-card: 18px;    /* Karten */
  --r-block: 20px;   /* Sektions-Container */
  --r-tile: 14px;    /* kleine Kacheln */

  /* Abstand zwischen Schrift und dem einblendenden Unterstrich.
     Ohne ihn sitzt die Linie auf den Unterlaengen von g, p, y und ss. */
  --unterstrich-abstand: 6px;

  /* --- Schatten --- */
  --schatten-card: 0 12px 40px rgba(11, 11, 11, 0.07);
  --schatten-hover: 0 14px 32px rgba(11, 11, 11, 0.10);
  --schatten-float: 0 30px 70px rgba(11, 11, 11, 0.14);

  /* --- Abstände --- */
  --abstand-sektion: clamp(64px, 8vw, 140px);
  --abstand-karte: 28px;
  --seitenbreite: 1480px;
}

/* --- Basis --- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.6;
  color: var(--schwarz);
  background: var(--offwhite);
}

h1, h2, h3, h4 { font-weight: 500; margin: 0; text-wrap: pretty; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: 1.05; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; line-height: 1.1; }
h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; line-height: 1.2; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.display { font-size: var(--fs-display); font-weight: 500; letter-spacing: -0.035em; line-height: 1.0; }

/* --- Label (kleine Uppercase-Auszeichnung) --- */
.label {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* --- Links: färben von links + Unterstrich blendet ein --- */
a {
  color: var(--schwarz);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 2px;
  /* Das Polster schiebt den Unterstrich unter die Unterlaengen. Bei einem
     Inline-Element wirkt es nicht auf die Zeilenhoehe, das Layout bleibt. */
  padding-bottom: var(--unterstrich-abstand);
  transition: background-size var(--dauer) var(--ease);
}
a:hover { background-size: 100% 2px; }

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;      /* Abweichung von design/spyke.css: entspricht dem Komponenten-Kit (45px Höhe) */
  padding: 12px 24px;
  border-radius: var(--r-pill);
  cursor: pointer;
  border: none;
  background-repeat: no-repeat;
  transition: background-position var(--dauer) var(--ease),
              color var(--dauer) var(--ease),
              box-shadow var(--dauer) var(--ease);
}
/* Primär: Slash-Wipe gelb über schwarz */
.btn-primaer {
  color: var(--offwhite);
  background-image: linear-gradient(115deg, var(--gelb) 50%, var(--schwarz) 50%);
  background-size: 260% 100%;
  background-position: 100% 0;
}
.btn-primaer:hover { background-position: 0% 0; color: var(--schwarz); }
/* Sekundär: Outline, gelber Wipe */
.btn-sekundaer {
  color: var(--schwarz);
  /* Kontur als innenliegender Schatten statt als Rahmen. Ein Rahmen wuerde
     den Knopf 2px hoeher machen als den primaeren daneben; die im
     Komponenten-Kit dokumentierten 45px gelten fuer den primaeren. */
  box-shadow: inset 0 0 0 1px var(--n-300);
  background-image: linear-gradient(115deg, var(--gelb) 50%, rgba(0,0,0,0) 50%);
  background-size: 260% 100%;
  background-position: 100% 0;
}
.btn-sekundaer:hover { background-position: 0% 0; box-shadow: inset 0 0 0 1px var(--gelb); }
/* Sekundär auf dunklem Grund */
.btn-sekundaer-dunkel {
  color: var(--offwhite);
  box-shadow: inset 0 0 0 1px rgba(247, 247, 242, 0.3);
  background-image: linear-gradient(115deg, var(--gelb) 50%, rgba(0,0,0,0) 50%);
  background-size: 260% 100%;
  background-position: 100% 0;
}
.btn-sekundaer-dunkel:hover { background-position: 0% 0; color: var(--schwarz); box-shadow: inset 0 0 0 1px var(--gelb); }

/* --- Karten --- */
.karte {
  background: #ffffff;
  border: 1px solid var(--n-100);
  border-radius: var(--r-card);
  padding: var(--abstand-karte);
  transition: transform var(--dauer) var(--ease), box-shadow var(--dauer) var(--ease);
}
.karte:hover { transform: translateY(-3px); box-shadow: var(--schatten-hover); }
.karte-dunkel { background: var(--n-950); color: var(--offwhite); border: none; }

/* --- Gelber Akzentpunkt --- */
.punkt {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gelb);
}

/* --- Layout-Helfer --- */
.container { max-width: var(--seitenbreite); margin: 0 auto; padding: 0 24px; }
.sektion { padding: var(--abstand-sektion) 0; }