/* Ganzer Seitenbereich im Kastenstil (alt) */
body.site {
    background-color: #bcbcbc; /* Außen grau */
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body.site > .site-grid {
    max-width: 1100px;
    margin: 30px auto;
    background: #fff;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Header-Bereich (Logo & Menü) */
.container-header,
.container-header .mod-menu {
    background: transparent;
    margin: 0;
    padding: 0;
}

/* Footer */
footer.site-footer {
    border-top: 1px solid #aaa;
    margin-top: 2em;
    padding: 1em 0;
    text-align: center;
    font-size: 0.9em;
    color: #333;
}

/* Menü-Schrift sichtbar */
ul.mod-menu > li > a,
ul.mod-menu > li > span {
    color: #111 !important;
}

/* Aktiver Menüpunkt */
ul.mod-menu > li.current > a,
ul.mod-menu > li.current > span {
    background-color: #000 !important;
    color: #fff !important;
    border-radius: 5px;
}

/* Hover-Menü */
ul.mod-menu > li > a:hover,
ul.mod-menu > li > span:hover {
    color: #000 !important;
    text-decoration: underline;
}

body.site {
  background-color: #999999;
}

.container-header,
.site-grid,
.container-footer {
  background-color: #ffffff;
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
  padding: 0 10px;
}

.container-footer {
  padding: 10px;
}
/* Seitenhintergrund */
body {
  background-color: #bfbfbf !important;
}

/* Gesamten Inhaltsbereich in Kastenform zentrieren */
.container-header,
.container-nav,
.container-banner,
.container-component,
.container-footer,
.container-top-a,
.container-top-b,
.container-bottom-a,
.container-bottom-b {
  max-width: 1100px;
  margin: 0 auto;
  background: white;
  padding: 1rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Optional: Navigation etwas nach unten versetzen */
.container-nav {
  margin-top: 1rem;
}
/* Hintergrund außen */
body {
  background-color: #bfbfbf !important;
  margin: 0;
  padding: 0;
}

/* Gesamte Seite als ein zentrierter, einheitlicher Kasten */
body > .site-grid,
header.header,
footer.container-footer {
  max-width: 1100px;
  margin: 0 auto;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

/* Abstand zwischen Header und Inhalt */
header.header {
  margin-top: 2rem;
}

/* Optional: Footer etwas absetzen */
footer.container-footer {
  margin-bottom: 2rem;
}


.container-footer {
  background: #fff;
  padding: 2rem;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
  max-width: 1024px;
  margin: 0 auto 2rem auto;
}


/* Einheitliches, ruhigeres Schriftbild für Überschriften */
h1, h2, h3, h4, h5, h6 {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500; /* weniger fett als bold (700), aber noch deutlich */
  color: #222;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.3;
  letter-spacing: -0.3px;
}

/* Spezielle Anpassung für die großen Überschriften */
h1 {
  font-size: 2.2em;
  font-weight: 300 !important;  /* überschreibt fette Templates */
  border-bottom: 1px solid #ccc;
  padding-bottom: 0.2em;
}

h2 {
  font-size: 1.8em;
  font-weight: 300 !important;
  border-left: 4px solid #bbb;
  padding-left: 0.5em;
  margin-top: 1.2em;
}

h3 {
  font-size: 1.4em;
  font-weight: 300 !important;
  color: #333;
}

/* Noch kleinere Überschriften – dezent */
h4, h5, h6 {
  font-size: 1.2em;
  font-weight: 200 !important;
  color: #444;
}
.page-header {
  display: none !important;
}