/* pfit.digital · Grundlagen: Schriften, Farben, Typografie, Bausteine */

@font-face { font-family: "Space Grotesk"; font-weight: 500; font-display: swap; src: url("/assets/fonts/sg500.woff") format("woff"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("/assets/fonts/sg700.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-display: swap; src: url("/assets/fonts/jb400.woff") format("woff"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("/assets/fonts/jb700.woff") format("woff"); }

:root {
  --bg: #FFFFFF;
  --bg2: #F7F8FA;
  --bg3: #EEF0F4;
  --line: #E5E7EB;
  --txt: #0B0F19;
  --mut: #5F6672;
  --acc: #3B5BFF;
  --acc-ink: #2A44CC;
  --acc-soft: #E8EDFF;
  --stage: #0B0F19;
  --stage2: #141A2A;
  --stage-line: #232B40;
  --stage-mut: #8B94A8;
  --live: #0FA37F;
  --live-ink: #0B7A5F;
  --live-soft: #DDF5EC;
  --work: #C77D0A;
  --work-ink: #8A5A00;
  --work-soft: #FFF1DC;
  --idea: #3B5BFF;
  --sans: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --ui: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--txt);
  font-family: var(--sans);
  font-weight: 500;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
b, strong, h1, h2, h3, h4 { font-weight: 700; }
ul { list-style: none; }

:focus-visible { outline: 3px solid var(--acc); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 600px) { .wrap { padding: 0 16px; } }

.skip {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--txt); color: #fff; padding: 10px 16px; border-radius: 6px; text-decoration: none;
}
.skip:focus { top: 12px; }

/* Kopf */
.site-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; }
.brand { display: block; text-decoration: none; }
.brand img { height: 26px; width: auto; margin-left: -7px; /* Weißraum links in der SVG ausgleichen */ }
.nav ul { display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 14px; color: var(--mut); }
.nav a { text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--txt); }
.nav nav { min-width: 0; }
@media (max-width: 600px) {
  .nav nav { flex-basis: 100%; }
  .nav ul { gap: 6px 16px; font-size: 14px; }
}

/* Typografie */
h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.06; letter-spacing: -.025em; max-width: 860px; }
h1 em { font-style: normal; color: var(--acc-ink); }
h2 { font-size: clamp(26px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -.02em; }
h3 { font-size: 18px; letter-spacing: -.01em; line-height: 1.25; }
.eyebrow { font-family: var(--mono); color: var(--acc-ink); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.eyebrow .cur { display: inline-block; width: 8px; height: 14px; background: var(--acc); vertical-align: -2px; margin-left: 4px; }
.anim-on .eyebrow .cur { animation: blink 1s steps(1) infinite; }
.lead { margin-top: 18px; font-size: clamp(17px, 2vw, 19px); color: var(--mut); max-width: 680px; }
.sub { color: var(--mut); font-size: 17px; max-width: 760px; margin-top: 8px; }
.sub b { color: var(--txt); font-weight: 700; }
.mono { font-family: var(--mono); }
.hint { font-family: var(--mono); font-size: 11px; color: var(--mut); }

@keyframes blink { 50% { opacity: 0; } }

/* Abschnitte */
.section { padding: 72px 0; border-top: 1px solid var(--line); }
.section.alt { background: var(--bg2); }
@media (max-width: 600px) { .section { padding: 52px 0; } }
.phead { display: flex; align-items: baseline; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.pnum { font-family: var(--mono); color: var(--acc-ink); font-size: 13px; }

/* Chips: Statusfarbe nie allein, immer mit Text */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--mut); background: #fff; white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.chip.live { color: var(--live-ink); }
.chip.work { color: var(--work-ink); }
.chip.idea { color: var(--acc-ink); }

/* Knöpfe */
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 6px; border: 1px solid var(--acc);
  background: var(--acc); color: #fff; font-weight: 700; font-size: 14px; text-decoration: none;
}
.btn:hover { background: var(--acc-ink); border-color: var(--acc-ink); }
.btn.g { background: transparent; border-color: var(--line); color: var(--txt); }
.btn.g:hover { border-color: var(--txt); }
.btnrow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* Kennzahlen */
.facts { display: flex; gap: 18px 28px; margin: 22px 0 32px; flex-wrap: wrap; }
.fact b { display: block; font-family: var(--mono); font-size: 26px; line-height: 1; }
.fact span { font-size: 12px; color: var(--mut); }

/* Kontakt */
.contact { display: flex; gap: 8px 18px; flex-wrap: wrap; }
.contact a { color: var(--acc-ink); }

/* Fuß */
.site-footer { border-top: 1px solid var(--line); padding: 28px 0; font-family: var(--mono); font-size: 12px; color: var(--mut); }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 24px; align-items: center; }
.foot nav { display: flex; gap: 18px; }
.foot a { color: var(--mut); }
.foot a:hover { color: var(--txt); }
.site-footer .contact a { color: var(--mut); }

/* Einblenden: versteckt nur, wenn das Skript läuft */
.js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.js [data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
}