/* ==========================================================================
   BASE · Guggumüsig Fleigutätscher Visp
   Fonts, Tokens, Reset, Typografie, Pills, Reveal
   Design 1:1 aus dem Prototyp (Zeno / Schnyder Werbung)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Google Sans Flex';
  src:url('../fonts/google-sans-flex-regular.ttf') format('truetype');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Google Sans Flex';
  src:url('../fonts/google-sans-flex-700.ttf') format('truetype');
  font-weight:700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#202020;
  --ink-2:#2a2a2a;
  --paper:#FAFAFA;
  --pink:#D400AE;
  --grey:#9b9b9b;

  --wrap-l:clamp(24px, 11.5vw, 220px);
  --wrap-r:clamp(24px, 5.5vw, 106px);

  --fs-display:clamp(46px, 7.9vw, 152px);
  --fs-h2:clamp(40px, 6.6vw, 127px);
  --fs-h3:clamp(21px, 1.9vw, 36px);
  --fs-nav:clamp(40px, 4.8vw, 92px);
  --fs-body:clamp(16px, 1.44vw, 27px);
  --fs-meta:clamp(14px, .95vw, 18px);

  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-splat:cubic-bezier(.7,0,.2,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:auto}
html,body{height:100%}
body{
  font-family:'Google Sans Flex', 'Helvetica Neue', Arial, sans-serif;
  font-weight:400;
  background:var(--ink);
  color:var(--paper);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img,video,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--pink);color:var(--paper)}
:focus{outline:none}
:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:#4a4a4a;border-radius:5px}
::-webkit-scrollbar-thumb:hover{background:var(--pink)}

/* ---------- Typo ---------- */
.h-display,.h2,.h3{
  font-weight:700;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.005em;
}
.h-display{font-size:var(--fs-display)}
.h2{font-size:var(--fs-h2)}
.h3{font-size:var(--fs-h3);line-height:1.12}
.body-copy{
  font-size:var(--fs-body);
  font-weight:700;
  line-height:1.55;
  max-width:34em;
}
.meta{font-size:var(--fs-meta);font-weight:400;line-height:1.6}
.meta-b{font-size:var(--fs-meta);font-weight:700;line-height:1.6;text-transform:uppercase}

.wrap{padding-left:var(--wrap-l);padding-right:var(--wrap-r)}

/* Zeilen-Wrapper für Display-Titel */
.line{display:block;overflow:hidden;padding-top:.12em;margin-bottom:-.12em}
.line>span{display:inline-block}

/* ---------- Pills ---------- */
.pill{
  display:inline-block;
  font-size:clamp(15px,1.15vw,22px);
  font-weight:400;
  line-height:1;
  padding:.62em 1.35em .68em;
  border-radius:999px;
  border:2px solid currentColor;
  transition:background .22s var(--ease-out), color .22s var(--ease-out), transform .22s var(--ease-out);
  white-space:nowrap;
}
.pill:hover{transform:translateY(-2px)}
.pill:active{transform:translateY(0) scale(.97)}
.pill--light{color:var(--paper)}
.pill--light:hover{background:var(--paper);color:var(--ink)}
.pill--dark{color:var(--ink)}
.pill--dark:hover{background:var(--ink);color:var(--paper)}
.pill--pink:hover{background:var(--pink);border-color:var(--pink);color:var(--paper)}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(46px);transition:opacity .8s ease, transform .8s var(--ease-out)}
[data-reveal].in-view{opacity:1;transform:translateY(0)}

/* ---------- Mobile-Tokens (nur via @media, Desktop unverändert) ---------- */
@media (max-width:820px){
  :root{
    --wrap-l:22px;
    --wrap-r:22px;
    --fs-display:clamp(40px,10.5vw,64px);
    --fs-h2:clamp(34px,9vw,54px);
    --fs-nav:clamp(34px,8.6vw,48px);
    --fs-body:17px;
    --fs-meta:14px;
  }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s !important;transition-duration:.001s !important}
  .fly{display:none !important}
  html{scroll-behavior:auto}
}