/* ===== base.css ===== */
:root {
  --nav-height: 64px;
  --page-max: 1200px;
  --bg: #f5f5f5;
  --fg: #222;
  --card: #fff;
  --header-bg: #222;
  --nav-bg: #222;
  --radius: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
}

.page-container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 20px;
}

header.site-header, section { scroll-margin-top: calc(var(--nav-height) + 12px); }

.content-box {
  background: rgba(34, 34, 34, 0.7); /* Dunkelgrau, 70% sichtbar */
  color: #fff;                       /* Text hell für Lesbarkeit */
  padding: 20px;
  margin: 20px 0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

main .content-box, #contact .content-box { text-align: left; }

.visually-hidden {
  position: absolute !important; height: 1px; width: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

/* ==== Zusatz: X-Scroll vermeiden wegen full-bleed Hero ==== */
html, body { overflow-x: hidden; }