:root {
  /* === KERNFARBEN === */
  --color-primary:        #2b2b2b;
  --color-primary-dark:   #1a1a1a;
  --color-primary-light:  #3d3d3d;

  --color-accent:         #2d6a2d;
  --color-accent-hover:   #245424;
  --color-accent-light:   #3a8a3a;

  --color-bg-page:        #f2f2f0;
  --color-bg-card:        #ffffff;
  --color-bg-header:      #2b2b2b;
  --color-bg-sidebar:     #222222;

  --color-weekend-bg:     #e8e6e0;
  --color-weekend-header: #d4d0c8;

  --color-text-primary:   #1a1a1a;
  --color-text-secondary: #666666;
  --color-text-on-dark:   #ffffff;
  --color-text-muted:     #999999;

  --color-border:         #d0cfc8;
  --color-border-strong:  #aaa9a0;

  /* === TYPOGRAFIE === */
  --font-base:    'Arial', 'Helvetica Neue', sans-serif;
  --font-size-xs: 11px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 18px;
  --font-weight-normal: 400;
  --font-weight-bold:   700;

  /* === ABSTÄNDE & RADIEN === */
  --radius-sm:   3px;
  --radius-md:   5px;
  --radius-lg:   8px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.15);
  --shadow-md:   0 3px 8px rgba(0,0,0,0.20);
  --shadow-lg:   0 6px 20px rgba(0,0,0,0.25);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-base);
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
}

/* === BUTTONS === */
.btn-primary {
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.btn-primary:hover { background: var(--color-accent-hover); }

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-base);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.btn-secondary:hover { background: var(--color-bg-page); }

.btn-danger {
  background: transparent;
  color: #c0392b;
  border: 1.5px solid #c0392b;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-family: var(--font-base);
  cursor: pointer;
  font-size: var(--font-size-sm);
}
.btn-danger:hover { background: #c0392b; color: white; }

.btn-icon {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: inline-flex;
  align-items: center;
}