:root {
  /* Palette (fancy) */
  --color-primary:  #33658A; /* dark blue  rgb(51,101,138) */
  --color-secondary:#86BBD8; /* light blue rgb(134,187,216) */
  --color-success:  #758E4F; /* olive      rgb(117,142,79)  */
  --color-warning:  #F6AE2D; /* mustard    rgb(246,174,45) */
  --color-danger:   #F26419; /* orange     rgb(242,100,25) */

  /* On‑colors (text on top of the color) */
  --on-primary:     #ffffff;
  --on-secondary:   #0b2a33; /* dark text for light blue */
  --on-success:     #ffffff;
  --on-warning:     #111111;
  --on-danger:      #ffffff;

  /* Muted / neutral helpers */
  --muted-1:        #f5f7f8;
  --muted-2:        #e9eef2;
  --muted-3:        #cfdbe3;

  /* Spacing / radius */
  --btn-padding-y:  .5rem;
  --btn-padding-x:  1rem;
  --btn-radius:     .375rem;

  /* Focus ring */
  --focus-ring:     0 0 0 3px rgba(51,101,138,0.18);
}

/* Reset small helper */
.bg-transparent { background-color: transparent !important; }
.text-muted { color: var(--muted-3) !important; }

/* Background utilities */
.bg-primary      { background-color: var(--color-primary) !important; color: var(--on-primary) !important; }
.bg-secondary    { background-color: var(--color-secondary) !important; color: var(--on-secondary) !important; }
.bg-success      { background-color: var(--color-success) !important; color: var(--on-success) !important; }
.bg-warning      { background-color: var(--color-warning) !important; color: var(--on-warning) !important; }
.bg-danger       { background-color: var(--color-danger) !important; color: var(--on-danger) !important; }

/* Text utilities */
.text-primary    { color: var(--color-primary) !important; }
.text-secondary  { color: var(--color-secondary) !important; }
.text-success    { color: var(--color-success) !important; }
.text-warning    { color: var(--color-warning) !important; }
.text-danger     { color: var(--color-danger) !important; }

/* Border utilities */
.border-primary  { border-color: var(--color-primary) !important; }
.border-secondary{ border-color: var(--color-secondary) !important; }
.border-success  { border-color: var(--color-success) !important; }
.border-warning  { border-color: var(--color-warning) !important; }
.border-danger   { border-color: var(--color-danger) !important; }

/* Button base styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--btn-radius);
  border: 1px solid transparent;
  font-weight: 600;
  cursor: pointer;
  transition: transform .06s ease, filter .12s ease, box-shadow .12s ease;
  text-decoration: none;
  line-height: 1;
}

/* Primary button variants */
.btn-primary {
  background-color: var(--color-primary);
  color: var(--on-primary);
  border-color: rgba(0,0,0,0.06);
}
.btn-primary:hover,
.btn-primary:focus { filter: brightness(.92); transform: translateY(-1px); box-shadow: var(--focus-ring); }
.btn-primary:active { filter: brightness(.86); transform: translateY(0); }

/* Secondary button */
.btn-secondary {
  background-color: var(--color-secondary);
  color: var(--on-secondary);
  border-color: rgba(0,0,0,0.06);
}
.btn-secondary:hover,
.btn-secondary:focus { filter: brightness(.96); transform: translateY(-1px); box-shadow: var(--focus-ring); }

/* Success / Warning / Danger buttons */
.btn-success { background-color: var(--color-success); color: var(--on-success); }
.btn-warning { background-color: var(--color-warning); color: var(--on-warning); }
.btn-danger  { background-color: var(--color-danger);  color: var(--on-danger); }

.btn-success:hover,
.btn-warning:hover,
.btn-danger:hover,
.btn-success:focus,
.btn-warning:focus,
.btn-danger:focus { filter: brightness(.92); transform: translateY(-1px); box-shadow: var(--focus-ring); }

/* Outline variants */
.btn-outline {
  background: transparent;
  border-width: 1px;
  background-clip: padding-box;
}
.btn-outline-primary   { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-secondary { color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-outline-success   { color: var(--color-success); border-color: var(--color-success); }
.btn-outline-warning   { color: var(--color-warning); border-color: var(--color-warning); }
.btn-outline-danger    { color: var(--color-danger);  border-color: var(--color-danger); }

.btn-outline:hover,
.btn-outline:focus { background-color: rgba(0,0,0,0.03); filter: none; }

/* Small helper for badges and labels */
.badge {
  display: inline-block;
  padding: .25rem .5rem;
  border-radius: .375rem;
  font-size: .85em;
  font-weight: 600;
  line-height: 1;
}
.badge-primary    { background: var(--color-primary); color: var(--on-primary); }
.badge-secondary  { background: var(--color-secondary); color: var(--on-secondary); }
.badge-success    { background: var(--color-success); color: var(--on-success); }
.badge-warning    { background: var(--color-warning); color: var(--on-warning); }
.badge-danger     { background: var(--color-danger);  color: var(--on-danger); }

/* Card header accent helper */
.card-accent-top {
  border-top: 4px solid var(--color-primary);
}
.card-accent-top.secondary { border-top-color: var(--color-secondary); }
.card-accent-top.success   { border-top-color: var(--color-success); }
.card-accent-top.warning   { border-top-color: var(--color-warning); }
.card-accent-top.danger    { border-top-color: var(--color-danger); }

/* Focus accessibility for interactive elements */
:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Small responsive tweak example */
@media (max-width: 576px) {
  .btn { width: 100%; justify-content: center; }
}



/* ===== 1) Visuelle Herauslösung aus Grid (keine Template-Änderung!) ===== */
/* Ziel: vorhandenes mod_menu beibehalten, aber über die volle Breite darstellen */
#site-menu-outside, /* falls du diese ID schon hast */ 
.mod-menu, /* generischer Fallback für mod_menu Container */ 
nav[role="navigation"].mod-menu, 
nav.mod-menu {
  /* Stelle sicher, dass wir das vorhandene Modul ansprechen.
     Wenn dein Menü andere Klassen hat, ersetze/ergänze sie. */
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 50 !important; /* über anderen Grid-Children */
  /* Wenn das Grid das Element per grid-area einsperrt, überschreiben: */
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  align-self: start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Falls dein Menü in einem .site-grid > .grid-child sitzt, zwinge es optisch über die ganze Zeile */
.site-grid .mod-menu,
.site-grid nav.mod-menu {
  /* Entferne float/positioning-Effekte */
  float: none !important;
  display: block !important;
}

/* ===== 2) Basis-Layout für die Menü-UL (Standard mod_menu Markup) ===== */
#site-menu-outside .nav,
.mod-menu .nav,
nav.mod-menu .nav {
  display: flex !important;
  gap: 0 !important;
  flex-wrap: wrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Link-Basis */
#site-menu-outside .nav > li > a,
.mod-menu .nav > li > a,
nav.mod-menu .nav > li > a {
  display: block;
  padding: .9rem 1.25rem;
  text-decoration: none;
  font-weight: 600;
  transition: transform .12s ease, filter .12s ease;
  color: #fff; /* default, kann per Klasse überschrieben werden */
}

/* Hover / Focus */
#site-menu-outside .nav > li > a:hover,
.mod-menu .nav > li > a:hover,
nav.mod-menu .nav > li > a:hover,
#site-menu-outside .nav > li > a:focus,
.mod-menu .nav > li > a:focus {
  filter: brightness(.94);
  transform: translateY(-2px);
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}

/* Active state */
#site-menu-outside .nav > li.active > a,
.mod-menu .nav > li.active > a,
nav.mod-menu .nav > li.active > a,
#site-menu-outside .nav > li.current > a,
.mod-menu .nav > li.current > a {
  box-shadow: inset 0 -4px rgba(0,0,0,0.12);
}

/* ===== 3) Farbklassen (verwende diese Klassen im Backend: Link CSS Class) ===== */
.menu-color-1 > a { background:#F6AE2D; color:#111 !important; } /* mustard */
.menu-color-2 > a { background:#33658A; color:#fff !important; } /* dark blue */
.menu-color-3 > a { background:#F26419; color:#fff !important; } /* orange */
.menu-color-4 > a { background:#86BBD8; color:#0b2a33 !important; } /* light blue */
.menu-color-5 > a { background:#758E4F; color:#fff !important; } /* olive */

/* ===== 4) nth-child Fallback (wenn du keine Link CSS Class setzen willst) ===== */
.mod-menu .nav > li:nth-child(1) > a { background:#F6AE2D; color:#111 !important; }
.mod-menu .nav > li:nth-child(2) > a { background:#33658A; color:#fff !important; }
.mod-menu .nav > li:nth-child(3) > a { background:#F26419; color:#fff !important; }
.mod-menu .nav > li:nth-child(4) > a { background:#86BBD8; color:#0b2a33 !important; }
.mod-menu .nav > li:nth-child(5) > a { background:#758E4F; color:#fff !important; }

/* ===== 5) Responsive: auf kleinen Bildschirmen stacked ===== */
@media (max-width: 767.98px) {
  .mod-menu .nav { flex-direction: column !important; }
  .mod-menu .nav > li > a { padding: .75rem 1rem !important; }
}

/* ===== 6) Optional: wenn du keine Außen-Gaps willst (bündig) ===== */
.mod-menu { margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }