/* Fundus · Rezept „Gebäudedienste: sauber, pünktlich, ansprechbar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/gebaeudedienste-sauber/ · 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: 'Strichpunkt Sans'; src: url('../../../../assets/fonts/strichpunkt-sans-latin-wght-normal.woff') format('woff'); font-weight: 400 900; font-stretch: 100% 200%; font-display: swap; }
@font-face { font-family: 'Commissioner'; src: url('../../../../assets/fonts/commissioner-latin-full-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Strichpunkt Sans', system-ui, sans-serif;
  --schrift-text: 'Commissioner', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Strichpunkt Sans clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem), wdth 140, wght 700, Laufweite -0.02em, Zeilenhöhe 1.0; h2 clamp(1.75rem, 1.3rem + 1.8vw, 2.75rem), wdth 120, wght 700. Fließtext Commissioner 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Turnus-Tabelle und Preise Commissioner 1rem mit Tabellenziffern; Tabellenköpfe 0.8125rem Versal, +0.06em, wght 600. Knöpfe Commissioner 600, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Hell und sachlich wie ein frisch gereinigter Flur: Kalkweiß als Grund, Fliesengrau als Fläche für Tabellen und Anfrage, Dunkelblau der Arbeitskleidung für Footer und Stellenband. Ein klares Blau nur für Besichtigung anfragen und Anrufen. Kein Wasser- oder Glanzverlauf, keine Seifenblasen, kein Hellblau-Türkis als Branchenklischee. Die eigene Markenfarbe der Firma ersetzt das Blau, wenn sie auf Kalkweiß 4,5 : 1 erreicht.) */
  --farbe-grund: #F5F6F4; /* Grund Kalkweiß */
  --farbe-text: #141618; /* Text (16,7 : 1 auf Grund) */
  --farbe-flaeche: #E2E7E5; /* Fläche Fliese: Turnus-Tabelle, Anfrage, Objektkarten (Text 14,5 : 1) */
  --farbe-dunkel: #1D2A33; /* Dunkel Arbeitskleidung: Footer, Stellenband (Weiß darauf 14,7 : 1) */
  --farbe-signal: #1F58B8; /* Signal Blau: Besichtigung anfragen, Anrufen (Weiß darauf 6,7 : 1; als Fläche auf Grund 6,2 : 1); auf Dunkel stattdessen Kalkweiß-Knopf mit dunkler Schrift */
  --farbe-leise: #566067; /* Leise: Meta-Angaben, Stand-Daten (5,9 : 1 auf Grund, 5,1 : 1 auf Fläche; auch für Feldränder, 3 : 1) */
  --farbe-linie: #CDD2D0; /* Linie: Haarlinien zwischen Tabellenzeilen (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 6.0 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 200 (Hover, Farbe), 350 (Akkordeon, Reiter), 230 (schließen), 500 (Bild-Maske eines Referenzfotos, einmal); Anfrage und Dialoge 300 auf, 200 zu */
  --dauer-rezept-1: 200ms;
  --dauer-rezept-2: 230ms;
  --dauer-rezept-3: 300ms;
  --dauer-rezept-4: 350ms;
  --dauer-rezept-5: 500ms;
  /* 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 */

  /* 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 */

  /* 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: 650ms;
  --dauer-schliessen: 230ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 350ms;
  --dauer-hover-aus: 230ms;
  /* Laden 1: H1 */
  --dauer-laden-1-ab: 0ms;
  --dauer-laden-1: 700ms;
  --dauer-laden-1-versatz: 80ms;
  /* Laden 2: Satz und Knöpfe */
  --dauer-laden-2-ab: 240ms;
  --dauer-laden-2: 500ms;

  /* Raum (mittel): Klar und luftig wie ein leerer Flur: Tabellen dicht (12 px Zeilenabstand), Sektionen mit viel Abstand, Objektarten als Liste mit 24 px zwischen den Punkten. */
  --raum-1: 4px;
  --raum-2: 8px;
  --raum-3: 12px;
  --raum-4: 16px;
  --raum-5: 24px;
  --raum-6: 32px;
  --raum-7: 40px;
  --raum-8: 56px;
  --raum-9: 80px;
  --raum-10: 112px;
  --raum-sektion: clamp(64px, 8vw, 112px);
  /* Raster: Hero 5/7 (Text links, Foto randabfallend rechts). Objektarten als zweispaltige Liste, Turnus-Tabelle über 12 Spalten, mobil waagerecht scrollbar mit fester erster Spalte. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(16px, 2.4vw, 32px);
  --raster-max: 1280px;
  /* Form: Kanten fast eckig wie Fliesenfugen. Flächen trennen sich über Fliesengrau, nicht über Schatten. */
  --radius-klein: 2px;
  --radius-gross: 4px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #CDD2D0 zwischen Tabellenzeilen; Formularfelder 1px in Leise #566067 (3:1) */
  /* Schatten: keiner */

  /* Buttons: fuellung-vom-eintrittspunkt (Variante basis), kontur-button-zeichnen (Variante zeichnen) */
  --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: Fotos stehen sofort, Akkordeon und Schritte wechseln ohne Weg (Rezept); Seitenwechsel als Überblendung 150 ms ohne Lippe. Kapitelkanten stehen fertig gezogen. */
  /* Reduziert laut Stil: opacity 150 ms linear, Masken sofort offen */
}