/* Fundus · Rezept „Personaldienstleister: direkt und fair“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/personaldienstleister-zeitarbeit/ · 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: 'Special Gothic'; src: url('../../../../assets/fonts/special-gothic-latin-standard-normal.woff2') format('woff2'); font-weight: 400 700; font-stretch: 75% 125%; font-display: swap; }
@font-face { font-family: 'TikTok Sans'; src: url('../../../../assets/fonts/tiktok-sans-latin-wdth-normal.woff2') format('woff2'); font-weight: 300 900; font-stretch: 75% 150%; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Special Gothic', system-ui, sans-serif;
  --schrift-text: 'TikTok Sans', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Special Gothic clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), wdth 85, wght 700, Laufweite -0.02em, Zeilenhöhe 0.92; Kapitel-H2 clamp(1.75rem, 1.2rem + 2.2vw, 3rem). H3, Stellentitel und Gebrauchsüberschriften TikTok Sans 650, 1.25rem. Fließtext TikTok Sans 1.0625rem (17 px), wght 400, Zeilenhöhe 1.55, höchstens 64ch. Stundenlöhne, Zuschläge, Schichten und Postleitzahlen TikTok Sans 600 mit Tabellenziffern. Filterknöpfe und Knöpfe TikTok Sans 600, 1rem. */
  --mass: 64ch;
  --zeilenhoehe-text: 1.55;

  /* Farbe (Prinzip: Klar wie eine Stellentafel: Hellgrau als Grund, Arbeitsblau hell als Fläche für Filter, Löhne und Fragen, Werkblau für die Betriebe-Seite, Kapitel und Fuß. Grün nur für „Jetzt bewerben“ und „Personal anfragen“. Keine Warnwesten-Orange-Flächen, keine Stock-Helme.) */
  --farbe-grund: #F4F4F1; /* Grund Hellgrau */
  --farbe-text: #16181C; /* Text (16,1 : 1 auf Grund) */
  --farbe-flaeche: #DCE5F0; /* Fläche Arbeitsblau: Filter, Löhne, Fragen (Text 14,0 : 1) */
  --farbe-dunkel: #13233A; /* Dunkel Werkblau: Betriebe-Seite, Kapitel, Footer (Weiß darauf 15,8 : 1, Hellgrau 14,3 : 1) */
  --farbe-signal: #1B7340; /* Signal Grün: Jetzt bewerben, Personal anfragen (Weiß darauf 5,9 : 1; als Schrift auf Grund 5,3 : 1) */
  --farbe-leise: #575B62; /* Leise: Einsatzort, Stand-Daten (6,2 : 1 auf Grund, 5,4 : 1 auf Arbeitsblau) */
  --farbe-linie: #D0D1CF; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.9 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Farbe), 350 (Filter, Reiter, Dialog öffnen), 240 (schließen), 250 (Filterknopf ändert Form, Trefferliste ordnet sich neu), 500 (H1-Zeilen einmal), 600 (Seitenwechsel, Stellentitel wird H1) */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 240ms;
  --dauer-rezept-3: 250ms;
  --dauer-rezept-4: 350ms;
  --dauer-rezept-5: 500ms;
  --dauer-rezept-6: 600ms;
  /* Bewegung: token-swiss-knackig */
  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-ein: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-aus: cubic-bezier(0.5, 0, 0.75, 0);
  --dauer-xs: 200ms;
  --dauer-s: 350ms;
  --dauer-m: 500ms;
  --dauer-l: 700ms;
  --stagger: 40ms;
  --aus-faktor: 0.7; /* Schließen = Öffnen × Faktor */
  /* Wege: nur x oder y; Text 100 % in Zeilenmaske, Pfeile 8 px; keine Rotation */

  /* Flächen, Bilder, Seitenwechsel (clip-path, Panels, Bänder): Kurve ohne Überschwingen */
  --ease-flaeche: var(--ease-ein);
  --ease-flaeche-aus: var(--ease-aus);
  --dauer-xl: 500ms; /* größte Stufe für große Flächen (= --dauer-gross der Partitur); der Seitenwechsel nimmt --dauer-seitenwechsel */

  /* Bewegungs-Partitur (rezept.bewegung, Stand 05.11.2026): Rollen statt Stufen; gleiche Werte wie oben, nur benannt */
  --dauer-klein: 200ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 350ms; /* = --dauer-rezept-4 */
  --dauer-gross: 500ms; /* = --dauer-rezept-5 */
  --dauer-seitenwechsel: 600ms; /* = --dauer-rezept-6 */
  --dauer-schliessen: 240ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 350ms;
  --dauer-hover-aus: 240ms;
  /* Laden 1: H1 (zwei Zeilen) */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 500ms;
  --dauer-laden-1-versatz: 40ms;

  /* Raum (kompakt): Dicht wie eine Stellentafel: Trefferliste mit 12 px Abstand, Filter mit 2 px Fugen, Kapitel mit klarem 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: 128px;
  --raum-sektion: clamp(56px, 7vw, 128px);
  /* Raster: Hero mit zwei gleich breiten Wegen (6/6) unter dem Foto. Trefferliste: Filter oben über 12 Spalten, Karten zweispaltig, auf dem Telefon einspaltig. Stellenseite 8/4 mit Lohn und Bewerben rechts sticky. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(14px, 2vw, 28px);
  --raster-max: 1280px;
  /* Form: Griffig: Filterknöpfe wechseln zwischen 8 px und rund, Karten 16 px, Taste mit Tiefe. */
  --radius-klein: 8px;
  --radius-gross: 16px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #16181C24 in Listen; Felder 1px in Leise (3:1) */
  /* Schatten: nur an der Taste (tiefen-taste-3d) */

  /* Buttons: tiefen-taste-3d (Variante stapel), 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; }
  :root { --dauer-klein: 150ms; --dauer-mittel: 150ms; --dauer-gross: 150ms; --dauer-seitenwechsel: 150ms; --dauer-schliessen: 100ms; --dauer-hover-ein: 150ms; --dauer-hover-aus: 100ms; } /* nur Überblenden, höchstens 150 ms; nie länger als normal */
  /* Partitur reduziert: Filter wechseln nur Farbe und Häkchen, ohne Breite; Trefferliste ohne FLIP; H1 steht; Seitenwechsel als Überblendung 150 ms ohne Titel-Morph. */
  /* Reduziert laut Stil: opacity 150 ms linear, Masken sofort offen */
}