/* Switch palettes with data-farbe on <html>, so variants can be compared live. */
[data-farbe="tanne"] {
  --kopf: #24443a;
  --kopf-tief: #1b362e;
  --kopf-text: #fefefd;
  --kopf-leise: #c5d3cc;
  --kopf-kante: rgba(197, 211, 204, 0.2);
  --tinte: #22302b;
  --tinte-leise: #566660;
  --linie: #dce3df;
  --grund: #f6f7f4;
}

[data-farbe="blau"] {
  --kopf: #1d3447;
  --kopf-tief: #142636;
  --kopf-text: #fefefd;
  --kopf-leise: #c7d3dc;
  --kopf-kante: rgba(199, 211, 220, 0.18);
  --tinte: #1d3447;
  --tinte-leise: #4a5d6e;
  --linie: #dde3e6;
  --grund: #f6f7f4;
}

[data-farbe="hellblau"] {
  --kopf: #d6e7f3;
  --kopf-tief: #c2dbed;
  --kopf-text: #1d3447;
  --kopf-leise: #3f566a;
  --kopf-kante: rgba(29, 52, 71, 0.12);
  --tinte: #1f3242;
  --tinte-leise: #4a5d6e;
  --linie: #dde5ea;
  --grund: #f8f9f8;
}

[data-farbe="morgen"] {
  --kopf: #e8f2f9;
  --kopf-tief: #d9e9f4;
  --kopf-text: #1f3a4f;
  --kopf-leise: #45607a;
  --kopf-kante: rgba(31, 58, 79, 0.1);
  --tinte: #233646;
  --tinte-leise: #4d6072;
  --linie: #e1e8ed;
  --grund: #fbfcfc;
}

[data-farbe="salbei"] {
  --kopf: #e1ede5;
  --kopf-tief: #d1e3d7;
  --kopf-text: #233a2f;
  --kopf-leise: #4a6356;
  --kopf-kante: rgba(35, 58, 47, 0.12);
  --tinte: #25332d;
  --tinte-leise: #556660;
  --linie: #dfe6e1;
  --grund: #fafbf9;
}

:root,
[data-farbe="lavendel"] {
  --kopf: #e9e7f4;
  --kopf-tief: #dcd8ee;
  --kopf-text: #2e2a4a;
  --kopf-leise: #59547a;
  --kopf-kante: rgba(46, 42, 74, 0.12);
  --tinte: #2b2a3d;
  --tinte-leise: #5a586e;
  --linie: #e2e1ea;
  --grund: #fbfbfc;
}