:root {
  --bg: #ffffff;
  --text: #111111;
  --muted: rgba(17, 17, 17, 0.75);
  --card: #ffffff;
  --border: #dddddd;
  --btn: #ffffff;
  --btnText: #111111;
  --shadow: 0 8px 30px rgba(0,0,0,0.12);
  --imgBg: #f6f6f6;
}

html[data-theme="dark"] {
  --bg: #0f1115;
  --text: #e8e8ea;
  --muted: rgba(232, 232, 234, 0.75);
  --card: #151822;
  --border: #2b3140;
  --btn: #151822;
  --btnText: #e8e8ea;
  --shadow: 0 10px 35px rgba(0,0,0,0.45);
  --imgBg: #0b0d12;
}

/* Global Defaults */
body {
  background: var(--bg);
  color: var(--text);
}

a { color: inherit; }

.card, .box, .nav {
  background: var(--card) !important;
  border-color: var(--border) !important;
}

.pill, .nav a.btn, a.btn, .btn-action, button, input, select {
  background: var(--btn) !important;
  color: var(--btnText) !important;
  border-color: var(--border) !important;
}

.meta, .sub, .pill, .nav .pill { color: var(--muted) !important; }

img { background: var(--imgBg) !important; }

/* Hover preview / shadows */
.cardimg-preview {
  background: var(--card) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow) !important;
}

/* Startseite Cards (a.cardlink) */
a.cardlink {
  background: var(--card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

.box_header {
  background: var(--card)!important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px;

  text-align: center;
  font-size: 1.6rem;
  font-weight: 600;
  padding: 18px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
}

a.cardlink .desc {
  color: var(--muted) !important;
}

a.cardlink:hover {
  filter: brightness(1.05);
}
html[data-theme="light"] a.cardlink:hover {
  filter: brightness(0.98);
}

/* GLOBAL FIX: nichts darf über Container hinaus */
*, *::before, *::after { box-sizing: border-box; }

input, select, textarea, button {
  max-width: 100%;
}