/* =====================================================================================
   Vorlage 36 Musikschule · Farben, Schrift, Ecken, Abstände
   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: Notenpapier. --bg ist das Papier, --surface das helle Blatt, --text die Tinte.
   Vier Instrumentenfarben tragen die Seite: Klavier Rot (mit Schwarz), Geige Bernstein, Flöte Türkis, Gitarre Grün.
   Kontraste (Text auf Fläche): Tinte auf Papier 16,7 : 1, Weiß auf Rot 5,9 : 1, Weiß auf Türkis 4,8 : 1,
   Tinte auf Bernstein 9,1 : 1, Weiß auf Grün 5,3 : 1.
   ===================================================================================== */
@font-face {
  font-family: "Epilogue";
  src: url("../fonts/epilogue-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "Epilogue", "Segoe UI", system-ui, sans-serif;

  --bg: #fbf4e4;            /* Notenpapier */
  --bg-tief: #f3e9d0;       /* Papier im Schatten, abgesetzte Felder */
  --surface: #fffdf6;       /* das helle Blatt, Karten */
  --text: #1b1315;          /* Tinte, 16,7 : 1 auf Papier */
  --muted: #4d4143;         /* 8,9 : 1 auf Papier, 4,9 : 1 auf Bernstein */
  --accent: #c4202d;        /* Klavier-Rot: Hauptknöpfe, Marken. Weiß darauf 5,9 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #9e1522;
  --border: #dccfb4;
  --error: #b42318;

  --rot: #c4202d;           /* Klavier */
  --rot-tief: #a81b27;
  --bernstein: #f2a916;     /* Geige (Orgel spielt in dieser Farbe) */
  --bernstein-tief: #d98a00;
  --tuerkis: #0a7f82;       /* Flöte */
  --tuerkis-tief: #076d6f;
  --gruen: #1f7a48;         /* Gitarre (Zupfen) */
  --gruen-tief: #176a3c;
  --nacht: #14100f;         /* Flügel, Bühne, Fuß */
  --nacht-2: #231a1b;
  --nacht-text: #f3e9d5;
  --nacht-leise: #c9bfae;

  --linie: rgba(27, 19, 21, .62);        /* Notenlinien auf Papier */
  --linie-hell: rgba(251, 244, 228, .5); /* Notenlinien auf dunklem Grund */

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

  --breite: 1180px;
  --kopf: 64px;
  --notenabstand: 14px;     /* Abstand zweier Notenlinien in den Zierbändern */
}