/**
 * assets/css/shared.css
 * Gemeinsame Design-Tokens + Utility-Klassen fuer alle Maivol-Seiten.
 *
 * Enthaelt NUR das wirklich Seitenübergreifende:
 *  - globale Farb-Variablen (identisch in allen Seiten-<style>-Bloecken)
 *  - Utility-Klassen fuer wiederkehrende Inline-Style-Muster (Audit 09/2026)
 *
 * Seitenspezifisches CSS (Minigame-Layouts, Formular-Feinschliff, Typewriter
 * etc.) bleibt bewusst inline pro Seite - kein grosses CSS-Bundling/Refactor.
 */

:root{
  --paper:#D2C5AE;
  --ink:#141311;
  --muted:#55524c;
  --line:rgba(20,19,17,.16);
  --accent:#982259;   /* Primaerfarbe: Pink */
  --accent-2:#4B4A8F; /* Sekundaerfarbe: gedaempftes Violett */
  --accent-3:#00E6D6; /* Akzentfarbe: Cyan, fuer Doodle-Elemente */
}

/* Honeypot-Feld (Spam-Schutz in Formularen): visuell versteckt, aber fuer
   Screenreader/DOM vorhanden. Vorher 67x als identisches style="" dupliziert. */
.visually-hidden{
  position:absolute;
  left:-9999px;
  top:-9999px;
  opacity:0;
  height:0;
  overflow:hidden;
}

/* Section-Padding fuer die "Station"-Bloecke auf whats-that*.html
   (Spot the Detail / Bad Website Generator / Random Thought). */
.section-pad{
  padding:70px 24px 60px;
  border-top:1.5px solid var(--ink);
}

/* Grosse Ueberschrift-Groesse fuer .page-h1 in den whats-that-Stationen. */
.page-h1-size{
  font-size:clamp(1.8rem,5vw,3.2rem);
}

/* Farb-Swatches (Lab-Farbwaehler / Bad Website Generator). */
.swatch-pink{background:#982259}
.swatch-violet{background:#4B4A8F}
.swatch-green{background:#00A896}
.swatch-orange{background:#E08E1D}