/* =======================================
   CONTAO LAYOUT – Basis-CSS
   Fullwidth toggle via .fullwidth Klasse
   ======================================= */

:root {
  --max-width: 1280px;
  --sidebar-width: 260px;
  --gap: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

/* --- Wrapper: Standard (zentriert, max-width) --- */
.section-wrapper {
  width: 100%;
}

.section-wrapper .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gap);
}

/* --- Fullwidth: kein max-width, volle Bildschirmbreite --- */
.section-wrapper.fullwidth .inner {
  max-width: 100%;
  padding: 0;
}

/* ===== HEADER ===== */
#header {
  background: #1a1a2e;
  color: #fff;
  padding: 16px 0;
}

/* ===== TOP ===== */
#wrapper-top {
  background: #e8f0fe;
  padding: 8px 0;
  font-size: 0.875rem;
}

/* ===== MAIN LAYOUT – CSS Grid ===== */
.layout-wrapper {
  display: grid;
  max-width: var(--max-width);
  margin: var(--gap) auto;
  padding: 0 var(--gap);
  gap: var(--gap);

  /* Standard: nur main */
  grid-template-columns: 1fr;
  grid-template-areas: "main";
}

/* Mit linker Sidebar */
.layout-wrapper:has(#left):not(:has(#right)) {
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas: "left main";
}

/* Mit rechter Sidebar */
.layout-wrapper:has(#right):not(:has(#left)) {
  grid-template-columns: 1fr var(--sidebar-width);
  grid-template-areas: "main right";
}

/* Mit beiden Sidebars */
.layout-wrapper:has(#left):has(#right) {
  grid-template-columns: var(--sidebar-width) 1fr var(--sidebar-width);
  grid-template-areas: "left main right";
}

#main   { grid-area: main; }
#left   { grid-area: left; }
#right  { grid-area: right; }

/* ===== FOOTER ===== */
#footer {
  background: #1a1a2e;
  color: #fff;
  padding: 32px 0;
  margin-top: var(--gap);
}

/* ===== BOTTOM ===== */
#wrapper-bottom {
  background: #111;
  color: #888;
  padding: 12px 0;
  font-size: 0.8rem;
  text-align: center;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .layout-wrapper,
  .layout-wrapper:has(#left):not(:has(#right)),
  .layout-wrapper:has(#right):not(:has(#left)),
  .layout-wrapper:has(#left):has(#right) {
    grid-template-columns: 1fr;
    grid-template-areas:
      "left"
      "main"
      "right";
    padding: 0 16px;
  }
}