/* =========================================================
   Fahringer Solutions – shared base styles
   Tokens, reset, header/navbar, footer, ambient background,
   reveal-on-scroll. Loaded on every page.
   ========================================================= */

/* ---------- self-hosted fonts (kein Google-Fonts-Request mehr) ---------- */
@font-face{
  font-family:'Space Grotesk';
  src:url('/fonts/space-grotesk-variable.woff2') format('woff2-variations'),
      url('/fonts/space-grotesk-variable.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Sans';
  src:url('/fonts/ibm-plex-sans-variable.woff2') format('woff2-variations'),
      url('/fonts/ibm-plex-sans-variable.woff2') format('woff2');
  font-weight:100 700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-regular.woff2') format('woff2');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'IBM Plex Mono';
  src:url('/fonts/ibm-plex-mono-medium.woff2') format('woff2');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#F7F5F0;
  --bg-2:#EFEBE2;
  --text:#1B211C;
  --text-dim:#5C685F;
  --mint:#3D63DD;
  --mint-deep:#DCE4FB;
  --copper:#8B5CF6;
  --copper-deep:#EDE4FB;
  --line: rgba(27,33,28,0.10);
  --line-strong: rgba(27,33,28,0.22);
  --glass: rgba(255,255,255,0.55);
  --glass-2: rgba(255,255,255,0.75);
  --radius: 14px;
  --radius-sm: 8px;
  --maxw: 1160px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans', sans-serif; font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden;
}
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; line-height:1.08; margin:0; letter-spacing:-0.015em; color:#12160F; }
p{ margin:0; }
a{ color:inherit; }
ul{ margin:0; padding:0; list-style:none; }
.mono{ font-family:'IBM Plex Mono', monospace; letter-spacing:0.06em; text-transform:uppercase; }
.grad{
  background:linear-gradient(105deg, var(--mint) 0%, #6A6BEB 50%, var(--copper) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 32px; position:relative; z-index:1; }
section{ padding:100px 0; position:relative; }
@media (max-width:720px){ section{ padding:64px 0; } .wrap{ padding:0 20px; } }
@media (max-width:480px){ section{ padding:52px 0; } .wrap{ padding:0 16px; } }
img, svg{ max-width:100%; }
a, .val, p, li{ overflow-wrap:break-word; word-break:break-word; }

/* ---------- ambient background ---------- */
.bg-mesh{ position:fixed; inset:-10%; z-index:0; filter:blur(90px); pointer-events:none; }
.bg-mesh span{ position:absolute; border-radius:50%; }
.blob-a{ width:620px; height:620px; top:-160px; left:-140px; background:radial-gradient(circle, var(--mint) 0%, transparent 68%); opacity:.16; animation:driftA 28s ease-in-out infinite alternate; }
.blob-b{ width:560px; height:560px; bottom:-180px; right:-120px; background:radial-gradient(circle, var(--copper) 0%, transparent 68%); opacity:.16; animation:driftB 34s ease-in-out infinite alternate; }
.blob-c{ width:440px; height:440px; top:38%; right:8%; background:radial-gradient(circle, var(--mint-deep) 0%, transparent 68%); opacity:.4; animation:driftC 40s ease-in-out infinite alternate; }
@keyframes driftA{ from{ transform:translate(0,0); } to{ transform:translate(70px,90px); } }
@keyframes driftB{ from{ transform:translate(0,0); } to{ transform:translate(-80px,-60px); } }
@keyframes driftC{ from{ transform:translate(0,0) scale(1); } to{ transform:translate(-50px,50px) scale(1.12); } }
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image: radial-gradient(rgba(27,33,28,0.06) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, black, transparent 85%);
          mask-image:linear-gradient(to bottom, black, transparent 85%);
}
.grain{ position:fixed; inset:0; z-index:0; width:100%; height:100%; opacity:.035; mix-blend-mode:multiply; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .blob-a, .blob-b, .blob-c{ animation:none !important; } }

/* ---------- header / navbar ---------- */
header{ position:sticky; top:0; z-index:40; padding:16px 0; background:linear-gradient(to bottom, var(--bg) 55%, transparent); }
.navbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:rgba(255,255,255,0.78); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid var(--line); border-radius:100px; padding:9px 10px 9px 22px;
  box-shadow:0 1px 2px rgba(27,33,28,0.04), 0 12px 32px rgba(27,33,28,0.07);
}
.logo{ display:flex; align-items:center; gap:9px; font-family:'Space Grotesk', sans-serif; font-weight:600; font-size:16px; letter-spacing:-0.01em; color:#12160F; text-decoration:none; }
.logo-mark{ flex:none; transition:transform .35s cubic-bezier(.2,.7,.3,1); }
.logo:hover .logo-mark{ transform:rotate(-6deg) scale(1.04); }
.pulse-node{ animation:blip 2.6s ease-in-out infinite; transform-origin:center; }
@keyframes blip{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }
.navlinks{ display:flex; align-items:center; gap:6px; }
.navlinks a:not(.btn){
  position:relative; text-decoration:none; font-size:14px; font-weight:500; color:var(--text-dim);
  transition:color .15s ease, background .15s ease; padding:9px 16px; border-radius:100px;
}
.navlinks a:not(.btn):hover{ color:#12160F; background:rgba(27,33,28,0.05); }
.navlinks a.current{ color:#12160F; background:rgba(27,33,28,0.06); }
.btn{
  display:inline-flex; align-items:center; gap:8px;
  background:linear-gradient(120deg, var(--mint) 0%, #5F62E5 45%, var(--copper) 100%);
  color:#FBFAF6; border:none; padding:11px 20px; font-family:'IBM Plex Sans', sans-serif;
  font-weight:600; font-size:14px; border-radius:100px; cursor:pointer; text-decoration:none;
  white-space:nowrap; transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(61,99,221,0.22); filter:brightness(1.06); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--mint); outline-offset:2px;
}
.nav-cta{ margin-left:10px; }
.magnetic{ transition:transform .15s ease-out; }
.menu-toggle{ display:none; background:none; border:none; width:32px; height:22px; position:relative; cursor:pointer; flex:none; }
.menu-toggle span{ position:absolute; left:0; right:0; height:2px; background:#12160F; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
.menu-toggle span:nth-child(1){ top:0; } .menu-toggle span:nth-child(2){ top:10px; } .menu-toggle span:nth-child(3){ top:20px; }
.menu-toggle.open span:nth-child(1){ transform:translateY(10px) rotate(45deg); }
.menu-toggle.open span:nth-child(2){ opacity:0; }
.menu-toggle.open span:nth-child(3){ transform:translateY(-10px) rotate(-45deg); }
@media (max-width:840px){
  .navbar{ padding:9px 10px 9px 18px; }
  .navlinks{
    position:fixed; inset:78px 16px auto 16px; background:#FFFFFF;
    border:1px solid var(--line); border-radius:20px; box-shadow:0 20px 50px rgba(27,33,28,0.14);
    flex-direction:column; align-items:stretch; padding:14px; gap:4px;
    opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .2s ease, transform .2s ease;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .navlinks.open{ opacity:1; transform:translateY(0); pointer-events:auto; }
  .navlinks a:not(.btn){ font-size:16px; color:#12160F; padding:13px 16px; }
  .nav-cta{ margin-left:0; margin-top:6px; }
  .navlinks .btn{ width:100%; justify-content:center; padding:14px 22px; }
  .menu-toggle{ display:block; }
}
@media (max-width:360px){
  .logo{ font-size:14.5px; }
  .logo-mark{ width:26px; height:26px; }
}

/* ---------- breadcrumb (subpages) ---------- */
.crumb{ display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-dim); margin-bottom:22px; text-decoration:none; width:fit-content; }
.crumb:hover{ color:#12160F; }
.crumb svg{ width:14px; height:14px; }

/* ---------- footer ---------- */
footer{ background:var(--bg-2); border-top:1px solid var(--line); padding:44px 0 40px; }
.footer-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; color:var(--text-dim); font-size:14.5px; }
.footer-legal{ display:flex; align-items:center; gap:24px; flex-wrap:wrap; font-size:14.5px; }
.footer-legal a{ text-decoration:none; color:var(--text-dim); transition:color .15s ease; }
.footer-legal a:hover{ color:#12160F; }

/* ---------- reveal-on-scroll ---------- */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
  .pulse-node{ animation:none !important; }
}