purinto-website/assets/css/tokens.css

/* ==========================================================================
   Purinto GmbH — Design-Tokens
   Einzige Quelle für Farben, Typografie, Abstände und Radien.
   Farbvorgabe: helleres Anthrazit + Salbeigrün + Flieder als Akzent.
   ========================================================================== */

:root {
  /* --- Anthrazit: trägt den Engineering-Ernst ---------------------------- */
  --anthrazit-900: #22282b;
  --anthrazit-800: #2e3538;
  --anthrazit-700: #3c4347; /* "helleres Anthrazit" – dunkle Sektionen */
  --anthrazit-600: #525b5f;
  --anthrazit-500: #626b6f; /* auf --dunst geprüft: 5,03:1 (WCAG AA) */
  --anthrazit-400: #8b9296;
  --anthrazit-300: #aeb5b7;
  --anthrazit-200: #c9cfd0;
  --anthrazit-100: #e3e7e6;

  /* --- Salbei: trägt die Nachhaltigkeit --------------------------------- */
  --salbei-800: #4a5d50;
  --salbei-700: #5e7565;
  --salbei-600: #75907c;
  --salbei-500: #8fa894;
  --salbei-400: #a9bdad;
  --salbei-300: #c2d0c4;
  --salbei-200: #d6e0d6;
  --salbei-100: #e8eee8;

  /* --- Flieder: der freundliche, unerwartete Ton. Sparsam einsetzen. ----- */
  --flieder-900: #493a6b;
  --flieder-800: #5b4880; /* CTA-Fläche, weißer Text ~6,5:1 */
  --flieder-700: #6e5a96; /* Links, Fokusring */
  --flieder-600: #8570ae;
  --flieder-500: #9b85c4;
  --flieder-400: #b09fd5;
  --flieder-300: #c6b5e3; /* heller Marker auf dunklem Grund */
  --flieder-200: #dcd2ef;
  --flieder-100: #eee9f7;

  /* --- Neutrale Flächen ------------------------------------------------- */
  --dunst: #f5f6f3;
  --papier: #ffffff;

  /* --- Semantische Zuweisungen ------------------------------------------ */
  --bg: var(--dunst);
  --bg-karte: var(--papier);
  --bg-dunkel: var(--anthrazit-700);
  --bg-dunkel-tief: var(--anthrazit-900);
  --bg-salbei: var(--salbei-100);

  --text: var(--anthrazit-900);
  --text-leise: var(--anthrazit-500);
  --text-invers: #f2f4f1;
  --text-invers-leise: #b6bfbc;
  /* Gedämpfter Text auf --bg-dunkel. Nicht --anthrazit-400 verwenden:
     das ergibt dort nur 3,19:1 und fällt unter AA. */
  --text-invers-schwach: var(--anthrazit-300);

  --linie: var(--anthrazit-200);
  --linie-zart: var(--anthrazit-100);
  --linie-invers: rgba(255, 255, 255, 0.16);

  --akzent: var(--flieder-800);
  --akzent-hover: var(--flieder-900);
  --akzent-hell: var(--flieder-300);
  --fokus: var(--flieder-700);

  /* --- Typografie -------------------------------------------------------
     Archivo in expandierter Breite gibt der weichen Salbei-Flieder-Palette
     ein hartes Rückgrat. Verdana als Fallback, weil ebenfalls breit läuft. */
  --f-display: "Archivo", "Archivo Fallback", Verdana, "DejaVu Sans", sans-serif;
  --f-text: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, "SF Mono",
    "Liberation Mono", monospace;

  /* Fließende Typo-Skala */
  /* Hergeleitet, nicht geschätzt: Die Hero-Headline hat feste Umbrüche und
     soll immer genau drei Zeilen haben. Ihre längste Zeile misst 10,26 em.
     Neben dem Logo (3,06 em breit) plus Spalten­abstand muss also gelten:
     10,26 F <= Spaltenbreite. Daraus ergeben sich Minimum, Steigung und
     Maximum unten. Wird der Headline-Text geändert, neu rechnen. */
  --t-3xl: clamp(2.1rem, 0.05rem + 6.2vw, 5rem);
  --t-2xl: clamp(1.95rem, 1.45rem + 2.2vw, 3.3rem);
  --t-xl: clamp(1.45rem, 1.28rem + 0.85vw, 2.05rem);
  --t-lg: clamp(1.15rem, 1.07rem + 0.36vw, 1.4rem);
  --t-md: 1.0625rem;
  --t-sm: 0.9375rem;
  --t-xs: 0.8125rem;
  --t-2xs: 0.6875rem;

  --lh-eng: 1.02;
  /* Fortsetzung siehe Media Query am Dateiende: Unter 500px gilt für --t-3xl
     eine eigene, größere Skala, weil dort vier Headline-Zeilen erlaubt sind. */
  --lh-kopf: 1.14;
  --lh-normal: 1.62;

  --ls-display: -0.022em;
  --ls-mono: 0.11em;

  /* --- Abstände ---------------------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  --sektion-y: clamp(3.5rem, 2rem + 6vw, 7rem);
  --breite: 1200px;
  --breite-eng: 740px;
  --rand: clamp(1.15rem, 0.6rem + 2.4vw, 2.5rem);

  /* --- Radien: zurückhaltend, technisch ---------------------------------- */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-4: 14px;

  /* --- Schatten ---------------------------------------------------------- */
  --schatten-1: 0 1px 2px rgba(34, 40, 43, 0.05),
    0 2px 8px rgba(34, 40, 43, 0.04);
  --schatten-2: 0 2px 4px rgba(34, 40, 43, 0.06),
    0 14px 30px rgba(34, 40, 43, 0.08);

  --dauer: 220ms;
  --kurve: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* --- Schichtlinien: Textur, die auf den additiven Schichtaufbau anspielt.
         Wird sehr sparsam als Hintergrund eingesetzt. -------------------- */
  --schichten: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.05) 0,
    rgba(255, 255, 255, 0.05) 1px,
    transparent 1px,
    transparent 7px
  );
}

/* Unter 500px darf die Hero-Headline vier Zeilen haben. Die festen Umbrüche
   sind dort ausgeblendet (siehe .hero__umbruch), sie bricht also frei um.
   Dadurch entfällt die enge Grenze aus der längsten Einzelzeile, und die
   Schrift kann auf dem Telefon deutlich größer stehen. */
@media (max-width: 499px) {
  :root {
    --t-3xl: clamp(1.75rem, -0.07rem + 9.1vw, 2.8rem);
  }
}

/* Schriften werden lokal ausgeliefert – keine Einbindung über die Google-CDN,
   die in AT/DE datenschutzrechtlich angreifbar ist (LG München I, 3 O 17493/20).
   Fehlen die Dateien, greifen automatisch die Fallbacks oben. */
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}

@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}