:root{
  /* keine eigenen Farben hier – alles kommt aus styles.css */
}

/* Basis aus Tokens */
html{scroll-behavior:smooth}
body{margin:0; font-family:var(--font-sans, "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial); color:var(--text); background:var(--bg)}

/* Header in Weinrot statt Grün */
.header, header.site-header{
  background: linear-gradient(180deg, var(--wine-900), var(--wine-700));
  color: #fff;
  padding: 18px 0;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.06));
}
.wrap{ max-width:1120px; margin:0 auto; padding:0 16px }

/* Karten etc. folgen weiterhin, aber Farben bitte auf Tokens umstellen: */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 18px;
  box-shadow: var(--shadow, 0 8px 20px rgba(0,0,0,.06));
  margin-bottom: 16px;
}
h1{ font-size:28px; margin:0 0 10px }
.muted{ color: var(--muted) }

/* Buttons */
button,.btn{
  display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:14px; border:1px solid transparent;
  background: var(--wine-600); color:#fff; font-weight:600; cursor:pointer;
}
.btn--secondary{ background:#fff; color:var(--wine-800); border-color:var(--border) }

/* Tabellen/Badges */
.table{ width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--border); border-radius:14px; overflow:hidden }
.table th,.table td{ padding:10px 12px; border-bottom:1px solid var(--border); text-align:left }
.table thead th{ background:#faf7f2; color:var(--wine-900) }
.badge{ display:inline-block; padding:3px 8px; border-radius:999px; font-size:12px;
  border:1px solid color-mix(in srgb, var(--gold-400) 55%, #fff 45%);
  background: color-mix(in srgb, var(--gold-400) 35%, #fff 65%);
  color:#3a3a3a;
}
.footer{ color:#6B5F57; background: var(--wine-900); text-align:center; padding:16px 0; margin-top:24px }