/* ==========================================================================
   Basaltflow design system — shared tokens + core components
   Source of truth: design-brief/web-claude-ergebnis (2026-07-16 redesign).
   Used by index.html and the /p/ landing pages. Page-specific styles stay
   in each page's own <style> block.
   ========================================================================== */

/* ---- Theme tokens ------------------------------------------------------ */
:root[data-bf-theme="dark"] {
  --bg:#0A0A0B; --band:#141417; --surface:#101012; --panel:#0E0E10;
  --tint:rgba(255,255,255,0.03); --tint-accent:rgba(20,184,166,0.07);
  --line:rgba(255,255,255,0.08); --line-strong:rgba(255,255,255,0.16);
  --text:#ECECEA; --muted:#8B8B88; --faint:#63635F;
  --accent:#14B8A6; --accent-ink:#05231F; --accent-hover:#0FCDB4; --link:#5EEAD4;
  --island-bg:#F5F1E9; --island-line:#E1DBCD; --island-text:#24211C; --island-muted:#6E675B; --island-accent:#0F766E;
  --glow:rgba(20,184,166,0.08); --glow2:rgba(148,163,184,0.05); --dot:rgba(236,236,234,0.05);
  --frame-shadow:0 30px 90px rgba(0,0,0,0.55), 0 6px 24px rgba(0,0,0,0.4);
}
:root[data-bf-theme="light"] {
  --bg:#F5F1E9; --band:#EDE7DA; --surface:#FCFAF4; --panel:#FCFAF4;
  --tint:rgba(36,33,28,0.04); --tint-accent:rgba(15,118,110,0.07);
  --line:#E1DBCD; --line-strong:#D5CCB9;
  --text:#24211C; --muted:#6E675B; --faint:#97907F;
  --accent:#0F766E; --accent-ink:#F5F1E9; --accent-hover:#0D655E; --link:#0F766E;
  --island-bg:#101012; --island-line:rgba(255,255,255,0.09); --island-text:#ECECEA; --island-muted:#8B8B88; --island-accent:#5EEAD4;
  --glow:rgba(15,118,110,0.06); --glow2:rgba(196,181,141,0.16); --dot:rgba(36,33,28,0.07);
  --frame-shadow:0 30px 70px rgba(36,33,28,0.16), 0 6px 20px rgba(36,33,28,0.08);
}

/* ---- Base -------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }
::selection { background: rgba(20,184,166,0.3); }
input::placeholder, textarea::placeholder { color: var(--faint); }

.mono { font-family: 'IBM Plex Mono', monospace; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 32px); }

/* ---- Type scale -------------------------------------------------------- */
.kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--accent); margin: 0;
}
.h1 {
  font-size: clamp(44px, 7vw, 90px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.02;
  margin: 20px 0 0; text-wrap: balance;
}
.h2 {
  font-size: clamp(30px, 4.2vw, 46px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0 0;
}
.h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.lead { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 16px 0 0; }

/* ---- Buttons ----------------------------------------------------------- */
.btn-primary {
  display: inline-flex; align-items: center;
  background: var(--accent); color: var(--accent-ink);
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  padding: 13px 22px; border-radius: 8px; border: none; cursor: pointer;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
.btn-primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn-ghost {
  display: inline-flex; align-items: center;
  border: 1px solid var(--line-strong); color: var(--text);
  font-size: 15px; font-weight: 500;
  padding: 12px 21px; border-radius: 8px; background: none; cursor: pointer;
  font-family: 'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
}
.btn-ghost:hover { border-color: var(--muted); color: var(--text); }

/* ---- Nav --------------------------------------------------------------- */
.bf-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.bf-nav {
  max-width: 1120px; margin: 0 auto;
  padding: 13px clamp(20px, 4vw, 32px);
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px;
}
.bf-logo { display: flex; align-items: center; gap: 10px; color: var(--text); }
.bf-logo:hover { color: var(--text); }
.bf-logo .name { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
.bf-nav-links {
  display: flex; align-items: center; gap: 22px;
  margin-right: auto; margin-left: 14px; flex-wrap: wrap;
}
.bf-nav-links a { font-size: 14px; color: var(--muted); }
.bf-nav-links a:hover { color: var(--text); }
.bf-status { display: flex; align-items: center; gap: 7px; }
.bf-status .dot { width: 7px; height: 7px; border-radius: 50%; background: #4ADE80; display: inline-block; }
.bf-status .label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--muted); letter-spacing: 0.02em;
}
.bf-theme-toggle {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; min-width: 58px;
}
.bf-theme-toggle:hover { color: var(--text); border-color: var(--line-strong); }
.bf-nav-cta {
  background: var(--accent); color: var(--accent-ink);
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.005em;
  padding: 9px 15px; border-radius: 8px;
}
.bf-nav-cta:hover { background: var(--accent-hover); color: var(--accent-ink); }

/* ---- Footer ------------------------------------------------------------ */
.bf-footer { border-top: 1px solid var(--line); padding: 26px 0 34px; }
.bf-footer-inner {
  max-width: 1120px; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 32px);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px 28px; flex-wrap: wrap;
}
.bf-footer-brand { display: flex; align-items: center; gap: 9px; }
.bf-footer-brand .name { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; }
.bf-footer-brand .year { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); }
.bf-footer-links { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.bf-footer-links a { font-size: 13px; color: var(--muted); }
.bf-footer-links a:hover { color: var(--text); }
.bf-footer-note { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--faint); }

/* ---- Section helpers ---------------------------------------------------- */
.band {
  background: var(--band);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.island { background: var(--island-bg); color: var(--island-text); }
.island .kicker { color: var(--island-accent); }

/* ---- Reveal animation (JS adds .revealed; reduced-motion = always visible) */
@media (prefers-reduced-motion: no-preference) {
  .reveal-pending {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1);
  }
  .reveal-pending.revealed { opacity: 1; transform: none; }
}