/* Fundus · Rezept „Verein & Non-Profit: Wirkung zeigen“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/verein-nonprofit-wirkung/ · Bauplan: bauplan.txt · Leitfaden: https://cecodesign.de/lab/fundus/leitfaden.txt
   Alle Gestaltung der Seite nutzt nur diese Variablen. Schriftpfade beim Kopieren in ein Projekt anpassen. */

@font-face { font-family: 'Big Shoulders'; src: url('../../../../assets/fonts/big-shoulders-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('../../../../assets/fonts/archivo-latin-wdth-wght.woff2') format('woff2'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Big Shoulders', system-ui, sans-serif;
  --schrift-text: 'Archivo', system-ui, sans-serif;
  /* Größen laut Rezept: Kräftige, schmale Display-Headline wie Veneer/Gabriel Sans, ruhiger Text. h1 clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders wght 800, Versal, Laufweite +0.005em, Zeilenhöhe 0.95; Wirkungszahlen clamp(3rem, 2rem + 4vw, 5.5rem) wght 800 mit Tabellenziffern; h2 clamp(1.75rem, 1.2rem + 2vw, 3rem) wght 700; Fließtext Archivo 1.0625rem, wght 400, Zeilenhöhe 1.6, max. 65ch; Buttons Archivo 600, 1rem. Bei Klima-/Umweltvereinen ist climate-crisis als Akzent für genau eine Jahreszahl oder ein Wort möglich. */
  --mass: 65ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Ein tiefer Markenton (Navy/Petrol – Wasser, Natur) für Headlines, Header und dunkle Sektionen, helle Töne derselben Farbe als Flächen, warmes Grau für Ruhe. Ein Signalton ausschließlich für 'Spenden' – mit dunkler Schrift für ausreichenden Kontrast (Weiß auf Gelb wie bei charity: water ist zu schwach).) */
  --farbe-grund: #FFFFFF; /* Grund */
  --farbe-flaeche: #EDF5FA; /* helle Fläche (Viva con Agua) */
  --farbe-marke: #002E6D; /* Marke, Headlines, dunkle Sektion (Viva con Agua; Ocean Cleanup #003755) */
  --farbe-text: #222520; /* Fließtext (charity: water) */
  --farbe-flaeche-2: #DFDFD7; /* warme Grau-Fläche (charity: water) */
  --farbe-text-2: #FFCA0A; /* Spenden-Button, Text #222520 (charity: water) */
  --farbe-linie: #DCDCDB; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.5 : 1 auf Grund */
  --farbe-signal: var(--farbe-text-2); /* Haupthandlung, abgeleitet aus „Spenden-Button, Text #222520“: im Projekt prüfen */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150–200 (Buttons, Links, Formular), 600–1000 (Kampagnen-Slider, Bild-Übergänge, Medien-Expansion), Zahlen-Odometer 1200–1500 einmalig */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 600ms;
  --dauer-rezept-4: 1000ms;
  --dauer-rezept-5: 1200ms;
  --dauer-rezept-6: 1500ms;
  /* Bewegung: token-kinetisch-inout */
  --ease: cubic-bezier(0.83, 0, 0.17, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.76, 0, 0.24, 1);
  --dauer-m: 900ms;
  --dauer-l: 1200ms;
  --dauer-xl: 1500ms;
  --stagger: 50ms;
  --aus-faktor: 0.75; /* Schließen = Öffnen × Faktor */
  /* Wege: Rahmen ±100 %, inneres Bild gegenläufig ±30 %, Text ±101 % in Masken */

  /* Bewegung für UI (Menüs, Formulare, Buchung): token-toggle-asymmetrisch */
  --ui-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ui-ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --ui-dauer-xs: 150ms;
  --ui-dauer-s: 220ms;
  --ui-dauer-m: 300ms;
  --ui-dauer-l: 450ms;
  --ui-stagger: 40ms;
  --ui-aus-faktor: 0.65; /* Schließen = Öffnen × Faktor */
  /* Wege: Panel clip-path, Links yPercent 100 → 0; Schließen schneller und mit Anlauf-Kurve */

  /* Raum (mittel): Kräftig und klar: Wirkungszahlen mit viel Luft (höchstens 3 bis 4 in einer Reihe), Wege zum Mitmachen gleich groß mit 24 px Abstand. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 48px;
  --raum-8: 64px;
  --raum-9: 96px;
  --raum-10: 144px;
  --raum-sektion: clamp(64px, 9vw, 136px);
  /* Raster: Hero mit randlosem Foto, Mission unten links über 8 Spalten. Mitmach-Wege als 4er-Raster, Transparenz 6/6. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(16px, 2vw, 32px);
  --raster-max: 1320px;
  /* Form: Leicht gerundet und robust (button-zustaende und typo-maske-medien zeigen 4 px). Gelb #FFCA0A nur als Spenden-Fläche mit dunkler Schrift. */
  --radius-klein: 4px;
  --radius-gross: 4px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #DFDFD7 */
  /* Schatten: keiner */

  /* Buttons: button-zustaende, fuellung-vom-eintrittspunkt (Variante basis) */
  --button-hoehe: 44px; /* Trefferfläche mindestens 44 × 44 px */
  --button-farbe: var(--farbe-signal, currentColor);
  --fokus-ring: 2px solid var(--farbe-text, currentColor); /* außen um den Knopf, Abstand s. u.; auf dunklen Flächen eigene Farbe setzen */
  --fokus-abstand: 3px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --stagger: 0ms; --ui-stagger: 0ms; }
  /* Reduziert laut Stil: Kreuzblende 200 ms */
}