/* AIT Group, Grundlagen: Schriften, Farben, Abstaende, Buttons und Links.
   Gilt fuer die ganze neue Website, die Sektionen bauen darauf auf. */

/* ---------- Schriften (selbst gehostet, keine Anfrage an Google) ---------- */
@font-face{font-family:"Inter Display";src:url(../fonts/inter-display-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-500.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}

/* ---------- Farben und Masse ---------- */
:root{
  --ink:#0D1015;
  --ink-2:#111318;
  --ink-3:#171A20;
  --ink-4:#1E2229;
  --ink-5:#232830;
  --paper:#FFFFFF;
  --paper-2:#F5F5F2;
  --paper-3:#EFEFEF;
  --violet:#9146E8;
  --violet-light:#B386F0;

  --on-dark:#FFFFFF;
  --on-dark-2:rgba(255,255,255,.76);
  --on-dark-3:rgba(255,255,255,.56);
  --line-dark:rgba(255,255,255,.18);

  /* Die ganze Seite steht auf Weiss */
  --page:#FFFFFF;
  --on-light:#0D1015;
  --on-light-2:rgba(13,16,21,.74);
  --on-light-3:rgba(13,16,21,.6);
  --line-light:rgba(13,16,21,.14);

  --font-display:"Inter Display","Inter","Helvetica Neue",Arial,sans-serif;
  --font-text:"Inter","Helvetica Neue",Arial,sans-serif;
  --font-mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Mono",Menlo,Consolas,monospace;

  --gx:clamp(20px,4.4vw,80px);
  --hd-h:clamp(72px,9vh,92px);
  --ease:cubic-bezier(.22,.8,.24,1);
  --radius:3px;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--on-dark);font-family:var(--font-text);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
  font-feature-settings:"cv05","ss03"}
h1,h2,h3,p,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
img,svg,video{display:block;max-width:100%}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--violet-light);outline-offset:4px;border-radius:2px}

/* ---------- Button ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;
  height:48px;padding:0 22px;border-radius:var(--radius);
  background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:15px;font-weight:500;line-height:1;white-space:nowrap;
  transition:background-color 300ms var(--ease),color 300ms var(--ease)}
.btn svg{width:18px;height:18px;flex:none;transition:transform 350ms var(--ease)}
.btn:hover{background:var(--violet);color:var(--paper)}
.btn:hover svg{transform:translateX(3px)}
.btn--sm{height:40px;padding:0 16px;font-size:14px}
.btn--lg{height:clamp(52px,6.6vh,60px);padding:0 clamp(22px,1.8vw,28px);font-size:clamp(15px,1.1vw,16.5px);gap:18px}
.btn--block{display:flex;width:100%;justify-content:space-between;height:56px}
/* schwarz auf Weiss, beim Hover Violett */
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:var(--violet);color:var(--paper)}

/* ---------- Kleine Beschriftung in Monospace ---------- */
.mono{font-family:var(--font-mono);font-size:11.5px;font-weight:400;line-height:1.4;letter-spacing:.06em;text-transform:uppercase}

/* ---------- Textlink mit Unterstrich ---------- */
.link{position:relative;display:inline-flex;align-items:center;gap:14px;padding:8px 0 10px;
  font-size:clamp(15px,1.1vw,16.5px);font-weight:500;line-height:1.2;color:var(--on-dark);white-space:nowrap}
.link::before,.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.link::before{background:var(--line-dark)}
.link::after{background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}
.link svg{width:18px;height:18px;flex:none;transition:transform 350ms var(--ease)}
.link:hover::after{transform:scaleX(1)}
.link:hover svg{transform:translateX(3px)}
.link--sm{font-size:14px;gap:12px}
.link--ink{color:var(--on-light)}
.link--ink::before{background:var(--line-light)}
.link--ink:hover{color:var(--violet)}
.link--sm svg{width:16px;height:16px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}
}