/* =====================================================================================
   Vorlage 30 Pension am See · 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: Postkarten auf einem Tisch aus Sand. --bg ist der Tisch, --surface die Karte.
   ===================================================================================== */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --schrift: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --bg: #e8dfcb;            /* Sand, der Tisch unter den Karten */
  --bg-tief: #d9cdb3;       /* Sand im Schatten, Legende, Linien */
  --surface: #fffdf8;       /* die Postkarte */
  --surface-2: #f4efe4;     /* abgesetzte Felder auf der Karte */
  --text: #16303c;          /* 13,8 : 1 auf der Karte */
  --muted: #4b5f68;         /* 6,4 : 1 auf der Karte, 4,9 : 1 auf Sand */
  --accent: #1d6a8c;        /* Seeblau: Knöpfe, Links, Marken. Weiß darauf 6,0 : 1 */
  --on-accent: #ffffff;
  --accent-tief: #15556f;
  --accent-hell: #d9ecf3;   /* Bildplatzhalter, Felder */
  --border: #d9cfbb;
  --error: #b42318;

  --tinte: #2a3c46;         /* Poststempel, Schreiblinien */
  --nacht: #0c1a2a;         /* Fuß */
  --nacht-text: #e6eef2;
  --nacht-leise: #a3b3bd;

  --radius: 6px;            /* Postkarten haben kaum Rundung */
  --radius-klein: 4px;
  --radius-rund: 999px;

  --breite: 1180px;
  --kopf: 68px;
  --karte-luft: 20px;                                   /* Abstand der liegenden Karte zum Fensterrand */
  --karte-h: calc(100vh - var(--kopf) - 2 * var(--karte-luft));
  --karte-top: calc(var(--kopf) + var(--karte-luft));
}