/* Fundus · Rezept „Arbeitgeber: Einblick statt Floskel“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/arbeitgeber-karriere/ · 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: 'Funnel Display'; src: url('../../../../assets/fonts/funnel-display-latin-wght-normal.woff') format('woff'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Funnel Sans'; src: url('../../../../assets/fonts/funnel-sans-latin-wght-normal.woff') format('woff'); font-weight: 300 800; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Funnel Display', system-ui, sans-serif;
  --schrift-text: 'Funnel Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Funnel Display clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), wght 700, Laufweite -0.03em, Zeilenhöhe 0.96; h2 clamp(1.75rem, 1.3rem + 2vw, 3rem), wght 600, -0.02em; h3 Funnel Sans 1.25rem wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, max. 62ch. Gehaltsspanne in Stellenkarten Funnel Sans 1.25rem wght 700 Tabellenziffern („3.100–3.600 € brutto im Monat“); Uhrzeiten in der Tageszeitleiste Funnel Display 2rem wght 600 Tabellenziffern; Bildunterschriften (Name, Aufgabe, Datum) Funnel Sans 0.875rem wght 500; Zettel in der Collage Funnel Sans kursiv 1rem. Höchstens zwei Gewichte je Familie im Text (400/700). */
  --mass: 62ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Kreide als Grund, Tinte statt Schwarz, Tannengrün als Hausfarbe für die dunklen Sektionen (Ein Tag als …, Stimmen, Fußzeile), Klatschmohn nur für „Bewerben“ und den aktiven Schritt der Kurzbewerbung. Auf Tannengrün steht der Bewerben-Knopf mit 2 px Kreide-Rand (Klatschmohn auf Tannengrün hat nur 1,9 : 1). Die echten Fotos bringen die übrige Farbe; im Projekt ersetzt die Hausfarbe des Arbeitgebers das Tannengrün, der Signalton bleibt ein einziger.) */
  --farbe-grund: #F6F3EC; /* Grund Kreide */
  --farbe-text: #161616; /* Text Tinte (16,3 : 1) */
  --farbe-text-2: #5A5650; /* Sekundärtext, Bildunterschrift, Stand-Datum (6,6 : 1) */
  --farbe-flaeche: #EFE6D2; /* Zettel und Hinweisflächen (Tinte darauf 14,6 : 1) */
  --farbe-tannengruen: #1D4A3A; /* Tannengrün: dunkle Sektionen, Fußzeile (Kreide darauf 9,1 : 1) */
  --farbe-signal: #C8382A; /* Signal Klatschmohn: Bewerben, aktiver Schritt (Weiß darauf 5,2 : 1; auf Kreide 4,7 : 1; auf Tannengrün nur mit 2 px Kreide-Rand) */
  --farbe-linie: #D2D0CA; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Druck, Farbe, Schatten; Farbe linear), 400 (Knopf-Hover, Haken nach dem Absenden), 500 (Ankunft der Collage-Teile, Versatz 50 ms, Weg höchstens 48 px, Drehung auf den Endwinkel); UI: 280 öffnen, 190 schließen (Menü, Akkordeon, Schritt der Kurzbewerbung, Dialog) */
  --dauer-rezept-1: 48ms;
  --dauer-rezept-2: 50ms;
  --dauer-rezept-3: 150ms;
  --dauer-rezept-4: 190ms;
  --dauer-rezept-5: 280ms;
  --dauer-rezept-6: 400ms;
  --dauer-rezept-7: 500ms;
  /* Bewegung: token-federnd-verspielt */
  --ease: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-ein: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-aus: cubic-bezier(0.36, 0, 0.66, -0.56);
  --ease-feder: linear(0, 0.016 0.5%, 0.06 1%, 0.226 2%, 1.116 5.4%, 1.375 6.6%, 1.527 7.7%, 1.565 8.2%, 1.585 8.8%, 1.581 9.3%, 1.559 9.8%, 1.458 10.9%, 0.937 14.3%, 0.784 15.5%, 0.693 16.6%, 0.67 17.1%, 0.657 17.7%, 0.671 18.7%, 0.729 19.8%, 1.042 23.3%, 1.13 24.5%, 1.182 25.6%, 1.201 26.7%, 1.192 27.7%, 1.156 28.8%, 0.977 32.2%, 0.925 33.4%, 0.894 34.5%, 0.882 35.6%, 0.887 36.6%, 0.907 37.7%, 1.045 42.4%, 1.069 44.5%, 1.059 46.3%, 0.979 50.9%, 0.96 53.4%, 0.966 55.3%, 1.013 59.9%, 1.024 62.3%, 0.986 71.2%, 1.008 79.9%, 0.995 88.9%, 1);
  --dauer-s: 400ms;
  --dauer-m: 500ms;
  --dauer-l: 800ms;
  --stagger: 50ms;
  --aus-faktor: 0.6; /* Schließen = Öffnen × Faktor */
  /* Wege: Überschwingen nur auf kleinen Elementen (Buttons, Badges), Opazität immer linear 200 ms */

  /* 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): Mobil zuerst: Stellenkarten mit 16 px Innenabstand und Gehalt oben, Kurzbewerbung mit 20 px zwischen Feldern. Die Collage darf eng überlappen. */
  --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: 88px;
  --raum-10: 128px;
  --raum-sektion: clamp(64px, 8vw, 120px);
  /* Raster: Hero 6/6 (H1 links, Collage rechts auf verdecktem 12er-Raster). Stellen als Liste, Tageszeitleiste waagerecht (horizontal-scroll-section), mobil Wischleiste. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 48px);
  --raster-spalt: clamp(12px, 2vw, 24px);
  --raster-max: 1360px;
  /* Form: Fotos fast eckig wie Abzüge, leicht gedreht (Demo collage-scrapbook: 1,5 bis 4°); Knöpfe 6 px. Links zu Stellen als Textlink mit Pfeil (pfeil-icon-button, Variante linie). */
  --radius-klein: 6px;
  --radius-gross: 2px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #5A5650 mit 20 % Deckkraft */
  /* Schatten: nur Fotos und Zettel der Collage liegen mit kurzem, weichem Schatten wie Papier auf dem Tisch */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), pfeil-icon-button (Variante linie) */
  --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: ohne Überschwingen, opacity 150 ms */
}