/* Fundus · Rezept „Hausverwaltung: geordnet und erreichbar“ · tokens.css · Stand 02.11.2026
   Quelle: https://cecodesign.de/lab/fundus/rezepte/hausverwaltung-weg/ · 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: 'Source Serif 4'; src: url('../../../../assets/fonts/source-serif-4-latin-opsz-normal.woff') format('woff'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url('../../../../assets/fonts/source-serif-4-latin-opsz-italic.woff') format('woff'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Geist'; src: url('../../../../assets/fonts/geist-latin-wght-normal.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Schrift */
  --schrift-headline: 'Source Serif 4', Georgia, serif;
  --schrift-text: 'Geist', system-ui, sans-serif;
  /* Größen laut Rezept: h1 Source Serif 4 clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem), opsz 60, wght 600, Laufweite -0.015em, Zeilenhöhe 1.05; Kapitel-H2 clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem), opsz 36. H3, Klingelschilder und Gebrauchsüberschriften Geist 600, 1.25rem. Fließtext Geist 1.0625rem (17 px), wght 400, Zeilenhöhe 1.6, höchstens 66ch. Telefonnummern, Objektnummern, Fristen und Preise Geist 500 mit Tabellenziffern. Knöpfe Geist 600, 1rem. */
  --mass: 66ch;
  --zeilenhoehe-text: 1.6;

  /* Farbe (Prinzip: Wie ein gepflegtes Treppenhaus: Putz als Grund, Messing hell als Fläche für Klingelschilder, Zuständigkeiten und Fristen, Schiefer für Kapitel und Fuß. Ziegelrot nur für „Schaden melden“ und Notfallnummern. Keine Hausdach-Icons, kein Schlüssel-Logo, kein Immobilienblau.) */
  --farbe-grund: #F2F0EB; /* Grund Putz */
  --farbe-text: #1D2024; /* Text (14,4 : 1 auf Grund) */
  --farbe-flaeche: #E8DFC9; /* Fläche Messing hell: Klingelschilder, Zuständigkeiten, Fristen (Text 12,3 : 1) */
  --farbe-dunkel: #2B3138; /* Dunkel Schiefer: Kapitel, Footer (Weiß darauf 13,1 : 1) */
  --farbe-signal: #9E3B22; /* Signal Ziegel: Schaden melden, Notfallnummern (Weiß darauf 6,8 : 1; als Schrift auf Grund 5,9 : 1) */
  --farbe-leise: #5A5D61; /* Leise: Objektnummern, Stand-Daten (5,8 : 1 auf Grund, 5,0 : 1 auf Messing) */
  --farbe-linie: #D0CFCB; /* abgeleitet: Haarlinien (nur Dekoration) */
  --farbe-fehler: #B3261E; /* abgeleitet: Fehlermeldungen, 5.7 : 1 auf Grund */

  /* Dauer-Rahmen des Rezepts (gilt vor der Stil-Skala darunter): 150 (Hover, Farbe), 300 (Reiter, Akkordeon, Dialog öffnen), 200 (schließen), 220 (Klingelschild macht Platz, Nachbarn treten zurück; 150 zurück), 450 (Seitenwechsel, Klingelschild wird Kopfzeile) */
  --dauer-rezept-1: 150ms;
  --dauer-rezept-2: 200ms;
  --dauer-rezept-3: 220ms;
  --dauer-rezept-4: 300ms;
  --dauer-rezept-5: 450ms;
  /* Bewegung: token-toggle-asymmetrisch */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-ein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-aus: cubic-bezier(0.7, 0, 0.84, 0);
  --dauer-xs: 150ms;
  --dauer-s: 220ms;
  --dauer-m: 300ms;
  --dauer-l: 450ms;
  --stagger: 40ms;
  --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: 300ms; /* 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: 150ms; /* = --dauer-rezept-1 */
  --dauer-mittel: 300ms; /* = --dauer-rezept-4 */
  --dauer-gross: 300ms; /* = --dauer-rezept-4 */
  --dauer-seitenwechsel: 500ms;
  --dauer-schliessen: 200ms; /* = --dauer-rezept-2 */
  --dauer-hover-ein: 220ms;
  --dauer-hover-aus: 150ms;
  --ease-ausnahme: cubic-bezier(0.45, 0, 0.2, 1); /* nur: nur Seitenwechsel: weich hinein und hinaus, ohne Überschwingen (ruhig heißt weich, nicht kurz) */
  --ease-seite: var(--ease-ausnahme); /* Name, den die Partitur beim Laden nennt */
  /* Laden 1: Moment: Klingelknöpfe */
  --dauer-laden-1-ab: 120ms;
  --dauer-laden-1: 300ms;
  --dauer-laden-1-versatz: 80ms;

  /* Raum (mittel): Geordnet: Klingelbrett mit 12 px Fugen, Zuständigkeiten und Fristen dicht, 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: 88px;
  --raum-10: 120px;
  --raum-sektion: clamp(56px, 7vw, 120px);
  /* Raster: Hero 7/5: Hausfoto über 7 Spalten, Klingelbrett über 5 als 2 × 2-Raster (mobil vier Zeilen). Formulare über 7 Spalten, Hinweise rechts. */
  --raster-spalten: 12;
  --raster-rand: clamp(16px, 4vw, 56px);
  --raster-spalt: clamp(14px, 2vw, 28px);
  --raster-max: 1200px;
  /* Form: Gerade wie ein Briefkasten: kleine Radien, Messing-Schilder mit Rand, keine Karten-Schatten. */
  --radius-klein: 4px;
  --radius-gross: 10px;
  --radius-button: var(--radius-klein, 0);
  --linie-staerke: 1px; /* 1px #1D202424 in Listen; Klingelschild mit 1px Rand in Leise; Felder 1px in Leise (3:1) */
  /* Schatten: keiner; Klingelknopf als flacher Kreis mit Innenlinie */

  /* Buttons: button-zustaende, 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: Klingelschilder wechseln nur die Farbe, keine Breitenänderung; Akkordeon ohne Weg; Seitenwechsel als Überblendung 150 ms ohne Morph. */
  /* Reduziert laut Stil: opacity 150 ms */
}

/* ---------------------------------------------------------------------------------------------
   Abgeleitet für den Starter Hausverwaltung Rehbein (05.11.2026). Nur Farbstufen und Größen, keine neuen Dauern
   und keine neuen Kurven: Bewegung kommt ausschließlich aus den Variablen oben (Partitur).
   --------------------------------------------------------------------------------------------- */
:root {
  --messing-hell: #F4EFE3;       /* Nachbarschild beim Zeigen (Text #1D2024 darauf 14,9 : 1) */
  --messing-tief: #B9A67A;       /* Rand der Messingplatte, nur Dekoration */
  --messing-platte: #CDBE97;     /* Tableau-Platte, Text darauf #1D2024 9,6 : 1 */
  --signal-dunkel: #84301B;      /* Ziegel eine Stufe dunkler (Hover Schaden melden), Weiß 8,7 : 1 */
  --signal-hell: #B04A2E;        /* Notfallschild als Nachbar, Weiß 5,5 : 1 */
  --dunkel-leise: #B9BEC4;       /* Leiser Text auf Schiefer, 7,6 : 1 */
  --filz: #DCD8CF;               /* Grund im Schaukasten */
  --papier: #FCFBF8;             /* Aushang-Zettel */
  --h1-gross: clamp(2.5rem, 1.2rem + 4.6vw, 5.25rem); /* nur die Leitidee auf der Startseite */
  --zahl-gross: clamp(3.5rem, 2rem + 6vw, 7.5rem);    /* Preis „ab 27 €“, Vorgangsnummer */
}