:root {
  /* === HAUPTFARBEN === */
  --color-brown: #423720;
  --color-green: #2A5928;
  --color-light-green: #54B350;
  --color-light-brown: #F2C873;
  --color-medium-brown: #B39455;
  --color-white: #fff;
  --color-black: #000;

  /* === TEXTFARBEN === */
  --color-text: #444;
  --color-text-strong: #333333;
  --color-text-muted: #999;
  --color-text-header: #bbb;
   --color-cta-text: var(--color-white); 

  /* === HINTERGRÜNDE === */
  --color-bg-light: #edf1ed;
  --color-bg-input: #f8f8f8;
  --color-bg-footer: #f0f0f0;
  --color-bg-header: #444;
  --color-bg-btn-default: #666;

  /* === BUTTONS === */
  --color-btn-hover: #737373;
  --color-btn-active: #595959;

  /* === RAHMEN & TRENNLINIEN === */
  --color-border: #e5e5e5;
  --color-border-copyright: #dddddd;
  --color-border-dropotron: #f2f2f2;

  /* === ACCENT FARBEN (für Icons) === */
  --color-accent3: #7fcdb8;
  --color-accent4: #90b0ba;

  /* === TRANSPARENTE FARBEN === */
  --color-white-transparent: rgba(255, 255, 255, 0.75);
  --color-white-hover: rgba(255, 255, 255, 0.1);
  --color-white-input-bg: rgba(255, 255, 255, 0.15);
  --color-white-focus: rgba(255, 255, 255, 0.2);
  --color-black-overlay: rgba(0, 0, 0, 0.15);
  --color-black-overlay-light: rgba(0, 0, 0, 0.065);
  --color-shadow: rgba(0, 0, 0, 0.015);
}