/* =====================================================================================
   Vorlage 42 Bloggerin und Influencerin · 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: eine Pinnwand aus Kork. Der Kork ist nur der Grund. Darauf liegen Papiere in vier kräftigen Farben:
   Tomatenrot, Sonnengelb, Petrol und Flieder, dazu Polaroids in Weiß und Zettel in Papierfarbe.
   ===================================================================================== */
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("../fonts/newsreader-var-kursiv.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Chivo";
  src: url("../fonts/chivo-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Chivo Mono";
  src: url("../fonts/chivo-mono-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Registrierte Eigenschaften: der Browser kann sie weich überblenden und rechnen.
   --fort  Fortschritt der Seite 0 bis 1 (roter Faden in der Stecknadelleiste)
   --p     Scroll-Stand im klebenden Abschnitt „Vom Briefing zum Beitrag“, 0 bis 5
   --k     Schwebe der Deko im Hintergrund (nur Stufe dynamisch) */
@property --fort { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --p { syntax: "<number>"; inherits: true; initial-value: 5; }
@property --k { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --schrift: "Newsreader", "Iowan Old Style", Georgia, serif;
  --schrift-ui: "Chivo", "Segoe UI", system-ui, sans-serif;
  --schrift-mono: "Chivo Mono", "Consolas", ui-monospace, monospace;

  /* Der Grund: Kork */
  --kork: #9c6a3c;
  --kork-dunkel: #6e4624;
  --holz: #5a3a1f;
  --holz-hell: #8a5d33;

  /* Papiere */
  --papier: #fff8e6;
  --papier-2: #f5e9cc;
  --linie: #d9c9a3;
  --weiss: #fffdf8;
  --tinte: #2a1c10;            /* auf Papier 15 : 1 */
  --tinte-weich: #5b4533;      /* auf Papier 7,4 : 1 */

  /* Die vier Farben der Zettel und Bänder */
  --tomate: #d03a1c;           /* mit Weiß 4,6 : 1 */
  --tomate-tief: #a22a12;      /* Schrift auf Papier 6,9 : 1 */
  --gelb: #ffd23a;             /* mit Tinte 11 : 1 */
  --gelb-tief: #8a6200;        /* Schrift auf Papier 4,9 : 1 */
  --petrol: #0b6a74;           /* mit Weiß 6,3 : 1 */
  --petrol-tief: #07464d;
  --flieder: #cfb8f2;          /* mit Tinte 9 : 1 */
  --flieder-tief: #5b2fa0;     /* Schrift auf Papier 7,5 : 1 */
  --gruen-ok: #1c7a3c;
  --fehler: #c02017;

  --bg: #9c6a3c;
  --surface: #fff8e6;
  --text: #2a1c10;
  --muted: #5b4533;
  --accent: #d03a1c;
  --on-accent: #ffffff;
  --border: rgba(42, 28, 16, .22);

  --radius: 6px;
  --radius-rund: 999px;

  --breite: 1280px;
  --rand: clamp(14px, 3vw, 40px);
  --kopf: 68px;                /* Höhe der Stecknadelleiste oben (am Handy 56) */
  --leiste: 0px;               /* Höhe der Leiste unten (nur am Handy) */

  --schatten-klein: 0 1px 1px rgba(30, 14, 0, .22), 0 5px 9px -4px rgba(30, 14, 0, .42);
  --schatten: 0 1px 1px rgba(30, 14, 0, .2), 0 10px 16px -8px rgba(30, 14, 0, .5), 0 22px 34px -18px rgba(30, 14, 0, .42);
  --schatten-hoch: 0 2px 2px rgba(30, 14, 0, .22), 0 18px 26px -10px rgba(30, 14, 0, .5), 0 36px 50px -22px rgba(30, 14, 0, .45);
}