/* =====================================================================================
   Vorlage 41 Creatorin mit Bezahl-Beiträgen · Farben, Schrift, Abstände, registrierte Eigenschaften
   Brücke zur Web-App: --bg --surface --text --muted --accent --on-accent --border --radius --schrift
   heißen wie in 00_Projektstart/starter-webapp/styles.css.
   Bild: ein Leuchttisch. Warmes Weiß als Tisch, Graphit als Rahmen und Tinte, Kodak-Orange als Hauptfarbe,
   Magenta für „Bezahlt“, Mint für „Frei“, Nachtblau für Video und Entstehung.
   ===================================================================================== */
@font-face {
  font-family: "Epilogue";
  src: url("../fonts/epilogue-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Registrierte Eigenschaften: der Browser kann sie weich überblenden.
   --e    Entwicklungsstand eines Bildes 0 bis 1 (0 = unscharf, 1 = scharf), der Wisch läuft von der Ecke aus
   --w    Stand des Wischs, der die Verschleierung im Entstehungsabschnitt wegnimmt
   --preis Preis im Studio als Zahl (für die Anzeige in Euro und Cent)
   --glut Leuchten des aktiven Rahmens im Filmstreifen */
@property --e { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --w { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --glut { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --schrift: "Epilogue", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Consolas", monospace;

  /* Leuchttisch */
  --tisch: #f8f3e9;          /* warmes Weiß */
  --tisch-2: #f0e8d6;
  --tisch-3: #e6dcc4;
  --papier: #fffdf8;
  --graphit: #25211e;        /* Tinte, Rahmen */
  --graphit-2: #342e29;
  --graphit-3: #4a423b;

  /* Hauptfarben */
  --orange: #f58a07;         /* Kodak-Orange, Fläche */
  --orange-hell: #ffb85a;    /* Schrift auf Dunkel, 9 : 1 auf Graphit */
  --orange-tief: #a84500;    /* Schrift auf Hell, 5,6 : 1 auf Tisch */
  --magenta: #c2107a;        /* Bezahlt, weiße Schrift 5,9 : 1 */
  --magenta-hell: #ff7cc0;   /* auf Dunkel */
  --mint: #2fd6a1;           /* Frei, dunkle Schrift */
  --mint-tief: #00694f;      /* Schrift auf Hell, 6,2 : 1 */
  --nacht: #0f1b3a;          /* Nachtblau */
  --nacht-2: #17285a;
  --nacht-3: #243a7a;
  --pflaume: #4d0b37;        /* Auftragsabschnitt */

  --bg: var(--tisch);
  --surface: var(--papier);
  --text: #2a2521;           /* 13 : 1 auf Tisch */
  --muted: #5b5248;          /* 6,6 : 1 auf Tisch */
  --accent: var(--orange);
  --on-accent: #1a1208;      /* auf Orange 8,6 : 1 */
  --border: rgba(42, 37, 33, .22);
  --error: #b3261e;

  --radius: 14px;
  --radius-klein: 8px;
  --radius-rund: 999px;

  --breite: 1280px;
  --rand: clamp(16px, 3.4vw, 44px);
  --kopf: 68px;               /* Höhe des Filmstreifens oben (am Handy 56) */
  --leiste: 0px;              /* Höhe der Leiste unten (nur am Handy) */
  --schatten-dia: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 16px 28px -12px rgba(52, 36, 20, .5), 0 3px 6px rgba(52, 36, 20, .22);
}