/* =====================================================================================
   Grünkante Gärtnerei · 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.
   Palette nach Auftrag: Erde, drei Grün, ein Blütenton. Der Blütenton ist der eine Akzent
   (Marken, aktive Legende, aktueller Monat, Blüten im Plan). Knöpfe sind Pflanzschilder aus Erde.
   Umfärben: --bluete und --bluete-text (zusammen), --erde. Die Pflanzen im Plan und in der
   Szene nehmen die drei Grüntöne von selbst.
   Eine Schrift: DM Sans (variabel, 100 bis 1000). Überschriften 640, Text 400, Marken 700.
   ===================================================================================== */
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}

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

  --bg: #f5f0e4;            /* Planpapier, warm */
  --surface: #fbf8f1;       /* Schilder, Karten */
  --surface-2: #ece4d3;     /* abgesetzte Felder */
  --text: #1e271c;          /* fast Schwarz mit Grün, 15 : 1 auf --bg */
  --muted: #55604f;         /* 6,3 : 1 auf --bg */
  --border: #d8cdb8;
  --error: #b42318;

  /* Erde */
  --erde: #5a3e2b;          /* Pflanzschilder (Knöpfe), Kontakt. Creme darauf 8,6 : 1 */
  --erde-tief: #46301f;
  --erde-hell: #8b6b4f;     /* Stecken der Schilder, Linien */
  --erde-boden: #c9a985;    /* Beete im Plan nach den Erdarbeiten */
  --erde-nass: #a98356;     /* frisch gegossen */
  --weg: rgba(90, 62, 43, .12);   /* Wegeraster im Hintergrund */

  /* drei Grün */
  --gruen-1: #2f6b3a;       /* dunkel: Links, Kronenränder, Legende. 5,7 : 1 auf --bg */
  --gruen-2: #5f9b4c;       /* mittel: Pflanzen */
  --gruen-3: #cfe0b4;       /* hell: Rasen */
  --gruen-tief: #244f2c;

  /* ein Blütenton */
  --bluete: #d9577a;        /* Blüten im Plan */
  --bluete-hell: #f3cdd9;   /* Blüten von Bäumen, Zwiebeln hell */
  --bluete-text: #b02e55;   /* Marken, aktive Legende. 5,5 : 1 auf --bg */

  /* Brücke: Akzent = dunkles Grün, Knöpfe sind Erde */
  --accent: var(--gruen-1);
  --on-accent: #ffffff;

  /* Beete als Flächen */
  --beet-a: #e9eed9;        /* Pflanzbeet, pale grün */
  --beet-b: #efe6d2;        /* Sandbeet */
  --beet-c: #e4ebe0;        /* Schattenbeet */
  --kies: #ebe6da;          /* Kiesfläche */
  --wasser: #8fb8d9;        /* Tropfschlauch, Wasser */

  --radius: 26px;
  --radius-klein: 10px;

  --breite: 1180px;
  --legende: 212px;
  --abstand: clamp(64px, 8vw, 112px);
  --kopf: 64px;
}