/* ============================================================
   MARVIN.WEB GSAP-Fassungen: gemeinsame Basis (Branding vom 29.09.2026)
   Gilt fuer A Fuge, B Voreinander, C Pixel. Jede Fassung legt ihr eigenes
   Stylesheet DARUEBER und ueberschreibt nur, was sie anders macht.

   Kontraste gerechnet (WCAG 2.x, 05.10.2026), nicht geschaetzt:
     Teer auf Kreide 16,30   Signal-Text #b53507 auf Kreide 5,36   Muted auf Kreide 4,98
     Kreide auf Teer 16,30   Papier auf Teer 14,37   Signal auf Teer 4,60   Muted-dunkel auf Teer 6,02
     Teer auf Signal 4,60    Kreide auf Signal 3,54 (NUR grosse fette Schrift ab 24px)
     Signal auf Kreide 3,54  (NUR Grafik und Schrift ab 24px, nie Fliesstext, nie Knopfbeschriftung)
     Kreide auf Signal-Text 5,36 (Knopf: #b53507 mit Kreide-Schrift)

   IN PX BLEIBEN: @media-Grenzen, Rahmen bis 2px, outline, Mikro-Bewegung in transform.
   ============================================================ */

@font-face{font-family:'Archivo';src:url('fonts/archivo-var.woff2') format('woff2-variations'),url('fonts/archivo-var.woff2') format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Plex Mono';src:url('fonts/plexmono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --teer:#161412;
  --teer-2:#2a2723;      /* Kachel-Zeichen auf Teer, Flaechen, nie Schrift */
  --kreide:#f5f1e8;
  --kreide-2:#e6e0d2;    /* Kachel-Zeichen auf Kreide, Flaechen, nie Schrift */
  --papier:#ede3c8;      /* das Hell auf Teer (Zeichen, Name im Fuss) */
  --signal:#e8440a;      /* Grafik, Pixel, Linie, grosse Schrift */
  --signal-text:#b53507; /* Text und Knopfgrund auf Kreide */
  --muted:#6d675a;       /* Nebentext auf Kreide */
  --muted-d:#9a9384;     /* Nebentext auf Teer */

  --disp:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'Plex Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --wrap:144rem;
  --gutter:clamp(1.6rem,4vw,4.8rem);
}

/* Root-Font-Scaling (technik-patterns.md): 1rem = 10px bis 1440px, dann bis 13px bei 2560px */
html{font-size:clamp(0.625rem, 0.3839rem + 0.26786vw, 0.8125rem);-webkit-text-size-adjust:100%;text-size-adjust:100%}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--body);font-weight:400;font-stretch:100%;font-size:1.7rem;line-height:1.55;background:var(--kreide);color:var(--teer);-webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,video{display:block;max-width:100%}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,textarea,select{font:inherit;color:inherit}
[hidden]:not([hidden=until-found i]):not(embed){display:none !important}
::selection{background:var(--signal);color:var(--teer)}

/* Ueberschriften: ganze Woerter umbrechen, nie im Wort trennen (Marvins Regel) */
h1,h2,h3{hyphens:manual;overflow-wrap:normal;text-wrap:balance}
p{text-wrap:pretty}

/* Die Hausschrift fuer Aussagen: Archivo Black Expanded */
.disp{font-family:var(--disp);font-weight:900;font-stretch:125%;text-transform:uppercase;line-height:.9;letter-spacing:-.01em}
/* Die Hausschrift fuer Belege und Labels: Mono, gern mit // davor */
.mono{font-family:var(--mono);font-weight:500;font-size:1.3rem;letter-spacing:.04em;text-transform:uppercase;line-height:1.4}

/* Zugaenglichkeit */
.skip{position:absolute;left:-9999px;top:1rem;z-index:1000;background:var(--teer);color:var(--kreide);padding:1rem 1.6rem;font-family:var(--mono);text-decoration:none}
.skip:focus{left:1rem}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Formular-Botschutz: Honeypot unsichtbar, nicht per display:none (manche Bots pruefen das) */
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.schutz-hinweis{font-family:var(--mono);font-size:1.3rem;margin-top:1rem}

/* Wortmarke und Zeichen: Farbe ueber currentColor, Pixel ueber --wm-punkt */
.wm,.zeichen{fill:currentColor;height:auto}
.wm{--wm-punkt:var(--signal)}

/* Lenis */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Ruhefassung: alles steht, nichts laeuft von selbst */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}