/* ============================================================
   faecherstadt.ai — Corporate Identity / Design System
   Leitmotiv: der Karlsruher Fächer = strahlende Linien =
   KI-Signal, das nach außen strahlt.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  /* Accent (Primär) — Violett. Per Tweak überschreibbar. */
  --acc-h: 285;
  --acc:        oklch(0.56 0.20 var(--acc-h));
  --acc-strong: oklch(0.48 0.21 var(--acc-h));
  --acc-soft:   oklch(0.94 0.045 var(--acc-h));
  --acc-line:   oklch(0.86 0.07 var(--acc-h));
  --acc-2:      oklch(0.62 0.16 calc(var(--acc-h) - 55)); /* zweite Strahlfarbe */

  /* Neutrale, warm getönt */
  --paper:   oklch(0.985 0.005 95);
  --paper-2: oklch(0.965 0.006 95);
  --ink:     oklch(0.21 0.025 285);
  --ink-2:   oklch(0.36 0.02 285);
  --muted:   oklch(0.52 0.015 285);
  --hair:    oklch(0.90 0.008 285);
  --hair-2:  oklch(0.83 0.01 285);

  /* Maße */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 18px;
  --radius-sm: 11px;
  --radius-lg: 28px;

  /* Type */
  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --mono: 'Space Mono', ui-monospace, monospace;

  --shadow-sm: 0 1px 2px oklch(0.21 0.025 285 / .06), 0 2px 6px oklch(0.21 0.025 285 / .05);
  --shadow:    0 4px 14px oklch(0.21 0.025 285 / .07), 0 18px 50px oklch(0.21 0.025 285 / .08);
  --shadow-lg: 0 10px 30px oklch(0.21 0.025 285 / .10), 0 40px 90px oklch(0.21 0.025 285 / .12);
}

/* Font-Tweak Varianten */
html[data-type="2"]{
  --display: 'Hanken Grotesk', system-ui, sans-serif;
}

/* ============================================================
   RESET
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:clamp(16px,1.05vw,18px);
  line-height:1.6;
  letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
input,textarea,select{ font:inherit; color:inherit; }
::selection{ background:var(--acc-soft); color:var(--ink); }

/* ============================================================
   TYPE
   ============================================================ */
h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:600;
  line-height:1.04;
  letter-spacing:-0.025em;
  margin:0;
  text-wrap:balance;
}
.h-xxl{ font-size:clamp(2.6rem,6.4vw,5.4rem); }
.h-xl{  font-size:clamp(2.1rem,4.6vw,3.7rem); }
.h-l{   font-size:clamp(1.7rem,3vw,2.5rem); }
.h-m{   font-size:clamp(1.25rem,2vw,1.6rem); }
p{ margin:0; }
.lead{ font-size:clamp(1.1rem,1.6vw,1.32rem); line-height:1.5; color:var(--ink-2); text-wrap:pretty; }

.eyebrow{
  font-family:var(--mono);
  font-size:.74rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--acc-strong);
  display:inline-flex;
  align-items:center;
  gap:.6em;
}
.eyebrow::before{
  content:"";
  width:22px; height:1px;
  background:var(--acc);
}
.eyebrow.no-tick::before{ display:none; }

.mono{ font-family:var(--mono); }
.muted{ color:var(--muted); }
.accent{ color:var(--acc-strong); }

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(64px,9vw,128px); }
.section-tight{ padding-block:clamp(44px,6vw,80px); }
.stack > * + *{ margin-top:1.1rem; }
.center{ text-align:center; }
.divider{ height:1px; background:var(--hair); border:0; margin:0; }

.grid{ display:grid; gap:clamp(18px,2.4vw,30px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:900px){
  .cols-3,.cols-4{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .cols-2,.cols-3,.cols-4{ grid-template-columns:1fr; }
}

.section-head{ max-width:62ch; }
.section-head .lead{ margin-top:1rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:.9em 1.5em;
  border-radius:999px;
  font-family:var(--display);
  font-weight:500;
  font-size:1rem;
  letter-spacing:-0.01em;
  line-height:1;
  transition:transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s, background .18s, color .18s, border-color .18s;
  white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{ background:var(--ink); color:var(--paper); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.btn-accent{ background:var(--acc); color:#fff; }
.btn-accent:hover{ transform:translateY(-2px); box-shadow:0 10px 30px oklch(0.56 0.20 var(--acc-h) / .4); }
.btn-ghost{ border:1.5px solid var(--hair-2); color:var(--ink); background:transparent; }
.btn-ghost:hover{ border-color:var(--ink); transform:translateY(-2px); }
.btn-lg{ padding:1.05em 1.8em; font-size:1.06rem; }
.btn-arrow svg{ transition:transform .2s; }
.btn:hover .btn-arrow svg{ transform:translateX(3px); }

.textlink{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--display); font-weight:500;
  color:var(--acc-strong);
  border-bottom:1.5px solid var(--acc-line);
  padding-bottom:1px;
  transition:gap .2s, border-color .2s;
}
.textlink:hover{ gap:.7em; border-color:var(--acc); }

/* ============================================================
   BADGES / PILLS
   ============================================================ */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.4em .85em;
  border-radius:999px;
  background:var(--paper);
  border:1px solid var(--hair-2);
  font-family:var(--mono);
  font-size:.72rem; letter-spacing:.04em;
  color:var(--ink-2);
}
.pill .dot{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
.tag{
  display:inline-block; padding:.28em .7em; border-radius:7px;
  background:var(--acc-soft); color:var(--acc-strong);
  font-family:var(--mono); font-size:.72rem; letter-spacing:.02em;
}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:var(--radius);
  padding:clamp(22px,2.6vw,32px);
  transition:transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, border-color .22s;
}
.card-hover:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--hair-2); }
.card-ink{ background:var(--ink); color:var(--paper); border-color:transparent; }
.card-ink .muted{ color:oklch(0.72 0.02 285); }
.card-accent{ background:var(--acc-soft); border-color:var(--acc-line); }

.icon-badge{
  width:46px; height:46px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--acc-soft); color:var(--acc-strong);
  border:1px solid var(--acc-line);
}
.icon-badge svg{ width:22px; height:22px; }
.card-ink .icon-badge{ background:oklch(0.3 0.04 285); color:#fff; border-color:oklch(0.4 0.05 285); }

/* numbered step */
.step-num{
  font-family:var(--mono); font-size:.8rem; letter-spacing:.1em;
  color:var(--acc-strong);
}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{
  position:sticky; top:0; z-index:100;
  background:oklch(0.985 0.005 95 / .82);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s, background .25s;
}
.site-header.scrolled{ border-bottom-color:var(--hair); }
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:72px;
}
.nav-links{ display:flex; align-items:center; gap:6px; }
.nav-links a{
  font-family:var(--display); font-weight:500; font-size:.96rem;
  padding:.5em .85em; border-radius:9px; color:var(--ink-2);
  transition:color .15s, background .15s;
}
.nav-links a:hover{ color:var(--ink); background:var(--paper-2); }
.nav-links a.active{ color:var(--ink); }
.nav-links a.active::after{
  content:""; display:block; height:2px; margin-top:3px;
  background:var(--acc); border-radius:2px;
}
.nav-cta{ display:flex; align-items:center; gap:12px; }
.nav-toggle{ display:none; width:42px; height:42px; border-radius:10px; align-items:center; justify-content:center; border:1px solid var(--hair-2); }
.nav-toggle svg{ width:22px; height:22px; }

@media (max-width:860px){
  .nav-links{
    position:fixed; inset:72px 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--paper); border-bottom:1px solid var(--hair);
    padding:14px var(--gutter) 22px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .22s, opacity .22s;
    box-shadow:var(--shadow);
  }
  .nav-links.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-links a{ padding:.85em .6em; font-size:1.1rem; }
  .nav-links a.active::after{ display:none; }
  .nav-toggle{ display:inline-flex; }
  .nav-cta .btn:not(.nav-toggle){ display:none; }
}

/* ---- Logo ---- */
.logo{ display:inline-flex; align-items:center; gap:11px; }
.logo-mark{ width:34px; height:34px; flex:none; }
.logo-word{
  font-family:var(--display); font-weight:600; font-size:1.28rem;
  letter-spacing:-0.03em; color:var(--ink);
}
.logo-word .dot-ai{ color:var(--acc-strong); }
.logo-light .logo-word{ color:#fff; }
.logo-light .dot-ai{ color:oklch(0.78 0.14 var(--acc-h)); }

/* ============================================================
   FÄCHER MOTIF (radiating rays)
   ============================================================ */
.fan-rays line{ stroke:var(--acc); }
.fan-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.fan-bg svg{ position:absolute; }

/* radiating ray field (hero / footer backdrop) */
.rayfield{ position:absolute; pointer-events:none; }
.rayfield svg{ width:100%; height:100%; }
.rayfield .ray{
  transform-origin:var(--ox,50%) var(--oy,100%);
}
@media (prefers-reduced-motion:no-preference){
  .rayfield .ray{
    opacity:0;
    animation:rayIn .9s cubic-bezier(.2,.7,.3,1) forwards;
    animation-delay:var(--d,0s);
  }
}
@keyframes rayIn{ from{ opacity:0; } to{ opacity:1; } }

.logo-mark .fan-spin{ transform-origin:17px 25px; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{ background:var(--ink); color:var(--paper); position:relative; overflow:hidden; }
.site-footer a{ color:oklch(0.82 0.02 285); transition:color .15s; }
.site-footer a:hover{ color:#fff; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:34px; } }
@media (max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-col h4{ font-family:var(--mono); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; color:oklch(0.66 0.03 285); font-weight:400; margin-bottom:14px; }
.footer-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.footer-bottom{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:center; padding-top:26px; margin-top:46px; border-top:1px solid oklch(0.34 0.03 285); font-size:.86rem; color:oklch(0.66 0.03 285); }

/* ============================================================
   MISC / UTIL
   ============================================================ */
.kicker-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.stat-num{ font-family:var(--display); font-weight:600; font-size:clamp(2.2rem,4vw,3.2rem); letter-spacing:-0.03em; line-height:1; }
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; }
  html{ scroll-behavior:auto; }
}

.placeholder{
  background:
    repeating-linear-gradient(135deg, var(--paper-2) 0 11px, transparent 11px 22px),
    var(--acc-soft);
  border:1px dashed var(--acc-line);
  border-radius:var(--radius-sm);
  display:grid; place-items:center;
  color:var(--acc-strong);
  font-family:var(--mono); font-size:.78rem; letter-spacing:.04em;
  text-align:center; padding:1em;
}

/* faux browser preview */
.browser{
  border:1px solid var(--hair-2); border-radius:14px; overflow:hidden;
  background:var(--paper); box-shadow:var(--shadow);
}
.browser-bar{
  display:flex; align-items:center; gap:7px;
  padding:11px 14px; background:var(--paper-2); border-bottom:1px solid var(--hair);
}
.browser-bar .b-dot{ width:10px; height:10px; border-radius:50%; background:var(--hair-2); }
.browser-url{
  margin-left:10px; font-family:var(--mono); font-size:.7rem; color:var(--muted);
  background:var(--paper); border:1px solid var(--hair); border-radius:6px;
  padding:3px 10px; flex:1; max-width:280px;
}