/* Zimmerweise · Jetons (« der Durchschlag ») ------------------------------
   Papier, Original, zwei Durchschläge, die Tinte des Kopierstifts, zwei Stempel.
   Kontraste geprüft (WCAG 2.2, Text ≥ 4,5:1) : siehe MAQUETTES/KRITIK.md. */

@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/redhat-text-400.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/redhat-text-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/redhat-text-500.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/redhat-text-600.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Text"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/redhat-text-700.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/redhat-mono-400.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/redhat-mono-500.woff2") format("woff2"); }
@font-face { font-family: "Red Hat Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/redhat-mono-600.woff2") format("woff2"); }
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/caveat-600.woff2") format("woff2"); }

:root {
  color-scheme: light;

  /* Papier und Blätter */
  --papier: #FAF9F5;          /* Seitenhintergrund */
  --papier-tief: #F1EFE6;     /* Schreibtisch, Bühnen, Fußzeile */
  --original: #FFFFFF;        /* das Originalblatt, Karten, Felder */
  --gelb: #F7E7A6;            /* Durchschlag Einzug */
  --gelb-hell: #FBF3D2;
  --gelb-kante: #E4CF7A;
  --rosa: #F4C6CF;            /* Durchschlag Auszug */
  --rosa-hell: #FAE3E8;
  --rosa-kante: #E3A5B2;

  /* Tinten */
  --stift: #3B2F8F;           /* Kopierstift: Titel, Linien, Hauptaktion (10,0:1 auf Papier) */
  --stift-tief: #2A2170;      /* gedrückt */
  --stift-hauch: #EEECF7;     /* Fläche 8 % */
  --stift-linie: #C9C4E6;
  --tinte: #1B1D3A;           /* Fließtext (15,5:1) */
  --grau: #5E6274;            /* Nebentext (5,7:1 auf Papier, 4,9:1 auf Gelb) */
  --linie: #E3E0D5;           /* Haarlinie auf Papier */
  --linie-stark: #CBC7B8;
  --gruen: #1F7A4D;           /* Stempel « in Ordnung » (5,1:1) */
  --gruen-hauch: #E5F1EA;
  --rot: #C2362B;             /* Stempel « Mangel », Fehler (5,2:1) */
  --rot-hauch: #FBE9E6;
  --gelb-text: #6E5A10;       /* Schrift auf Gelb (5,4:1) */
  --rosa-text: #8A2E45;       /* Schrift auf Rosa (5,4:1) */

  /* Schriften */
  --f-sans: "Red Hat Text", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --f-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  /* Schriftgrade (Basis 360 px, wachsen mit clamp) */
  --t-xs: 0.75rem;
  --t-s: 0.875rem;
  --t-m: 1rem;
  --t-l: 1.125rem;
  --t-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --t-h3: clamp(1.2rem, 1.1rem + 0.4vw, 1.375rem);
  --t-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.5rem);
  --t-h1: clamp(1.95rem, 1.25rem + 3vw, 3.6rem);
  --t-held: clamp(2.05rem, 1.05rem + 4.2vw, 4.5rem);

  /* Abstände (4-px-Raster) */
  --a-1: 4px; --a-2: 8px; --a-3: 12px; --a-4: 16px; --a-5: 24px;
  --a-6: 32px; --a-7: 48px; --a-8: 64px; --a-9: 96px;
  --rand: 16px;               /* Seitenrand, wächst mit dem Bildschirm */
  --breite: 1200px;
  --breite-text: 68ch;

  /* Formen */
  --r-blatt: 4px;             /* Papier hat fast keine Rundung */
  --r-feld: 10px;             /* Felder, Knöpfe */
  --r-karte: 16px;            /* Bühnen, Fotos */
  --r-telefon: 38px;

  /* Schatten: lang, weich, in Stifttinte getönt */
  --s-blatt: 0 1px 0 rgba(27, 29, 58, 0.05), 0 6px 14px -8px rgba(27, 29, 58, 0.18), 0 26px 48px -24px rgba(59, 47, 143, 0.30);
  --s-hoch: 0 2px 0 rgba(27, 29, 58, 0.04), 0 18px 30px -16px rgba(27, 29, 58, 0.28), 0 40px 80px -40px rgba(59, 47, 143, 0.38);
  --s-knopf: inset 0 -2px 0 rgba(0, 0, 0, 0.22), 0 6px 14px -8px rgba(59, 47, 143, 0.6);

  /* Bewegung */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-aus: cubic-bezier(0.16, 1, 0.3, 1);
  --d-kurz: 140ms;
  --d-mittel: 260ms;

  /* Ebenen */
  --z-leiste: 20;
  --z-kopf: 30;
  --z-menue: 40;
  --z-banner: 50;

  /* Kreuz des Kopierstifts (Kästchen), Kamera, Pfeil */
  --kreuz: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5.5c4 3.6 9.4 9.4 14 13.6M18.6 4.6C13.8 9 9 14.2 5.4 19.2' fill='none' stroke='%233B2F8F' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --kreuz-rot: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5.5c4 3.6 9.4 9.4 14 13.6M18.6 4.6C13.8 9 9 14.2 5.4 19.2' fill='none' stroke='%23C2362B' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E");
  --pfeil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --pfeil-runter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4v14m-6-5 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --winkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --kamera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 8.5h3l1.6-2.5h6.8L17 8.5h3v10H4z' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='13.2' r='3.3' fill='none' stroke='black' stroke-width='1.8'/%3E%3C/svg%3E");
  --haken: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.2 4.2L19 7' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --papierkorn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (min-width: 640px) {
  :root { --rand: 24px; }
}
@media (min-width: 960px) {
  :root { --rand: 40px; }
}