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

/* ---------- Fonts ----------
   Google Sans Flex als variable Schrift (Gewicht 100–1000), selbst gehostet:
   kein Aufruf zu Google, ein Font für alle Schnitte bis «Black». */
@font-face{
  font-family:'Google Sans Flex';
  src:url('/assets/fonts/google-sans-flex-var-latin.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Google Sans Flex';
  src:url('/assets/fonts/google-sans-flex-var-latin-ext.woff2') format('woff2');
  font-weight:100 1000;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

  /* linker Einzug räumt das fixe Logo frei (Logo-Rechtskante ≈ 15.7vw / max 302px) */
  --wrap-l:clamp(24px, 17vw, 320px);
  --wrap-r:clamp(24px, 5.5vw, 106px);
  /* Fliesstexte starten auf allen Seiten in derselben Spalte */
  --text-einzug:18vw;

  --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);

  /* «Black» für alle Titel (Kundenwunsch), kleine Titel etwas leichter */
  --fw-titel:900;
  --fw-titel-klein:800;

  --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}
/* nach Tippen oder Klicken kein Fokusrahmen – auch nicht, wenn ein Script den
   Fokus setzt (Menü, Automat, Popup; Safari zeigt ihn sonst dauerhaft). Mit der
   Tastatur kommt er zurück (nav.js setzt data-eingabe). */
html[data-eingabe="zeiger"] :focus-visible{outline:none}

/* 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:var(--fw-titel);
  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;font-weight:var(--fw-titel-klein)}
.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 – oben .2em Luft für die Punkte von Ä Ö Ü (overflow:hidden
   maskiert die Einblend-Animation), das negative margin-bottom hält die Zeilenabstände gleich */
.line{display:block;overflow:hidden;padding-top:.2em;margin-bottom:-.2em}
.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;
    --text-einzug:0px;
    --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;animation-iteration-count:1 !important;transition-duration:.001s !important}
  .fly{display:none !important}
  html{scroll-behavior:auto}
}