:root {
  --bg-from: #1E3A8A;
  --bg-to: #60A5FA;
  --paper: #FDFBF7;
  --text: #000;
  --link: #0044cc;
  --header-text: #fff;           /* auf #000 ändern, wenn du den Header hell machst */
  --accent: #1E3A8A;             /* Akzentfarbe für Tabellenkopf, Hover, Überschriften */
}

body {
  background: linear-gradient(180deg, var(--bg-from), var(--bg-to)) fixed;
  min-height: 100vh;
}

/* Header */
.container-header {
  background-image: none;        /* Cassiopeia setzt hier selbst einen Verlauf */
  background-color: transparent;
}
.container-header a,
.container-header .navbar-brand,
.container-header .nav-link {
  color: var(--header-text);
}
.navbar-brand { display: flex; align-items: center; gap: 15px; }
.navbar-brand img { max-width: 100%; height: auto; }

/* Brotkrümelnavigation ausblenden.
   Sauberer: Modul unter Inhalt → Site-Module unveröffentlichen.
   Diese Regel nur aktivieren, wenn das Modul bleiben soll:
.container-breadcrumbs { display: none; }
*/

/* Inhaltskästen: nur EINE Ebene */
.container-component,
.container-sidebar-left,
.container-sidebar-right {
  background-color: var(--paper);
  color: var(--text);
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .15);
}

/* Überschriften im Inhalt */
.container-component h2 {
  color: var(--accent);
  margin-top: 2rem;
  margin-bottom: 1rem;
}
.container-component h2:first-child { margin-top: 0; }

/* Links im Inhalt */
.container-component a:not(.btn) {
  color: var(--link);
  font-weight: 600;
  text-decoration: underline;
  transition: color .15s ease;
}
.container-component a:not(.btn):hover { color: var(--text); }

/* Tabellen (Trainingszeiten): runde Ecken, farbiger Kopf, Hover */
.table-responsive {
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, .08);
  margin-bottom: 1.5rem;
}
.table-responsive .table {
  margin-bottom: 0;
}
.table-responsive .table thead {
  --bs-table-bg: var(--accent);
  --bs-table-color: #fff;
  --bs-table-border-color: transparent;
}
.table-responsive .table th,
.table-responsive .table td {
  padding: .7rem .9rem;
  vertical-align: middle;
}

/* Hover: Bootstrap färbt Zellen per inset box-shadow, daher hier direkt überschreiben */
.table-responsive .table tbody td {
  transition: box-shadow .15s ease;
}
@media (any-hover: hover) {
  .table-responsive .table.table-striped > tbody > tr:hover > td,
  .table-responsive .table > tbody > tr:hover > td {
    box-shadow: inset 0 0 0 9999px rgba(30, 58, 138, .18) !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .table-responsive .table tbody td,
  .container-component a:not(.btn) { transition: none; }
}

/* ===== Hauptmenü: Hamburger auf allen Bildschirmgrößen ===== */
/* Voraussetzung: Im Modul "Main Menu" ein einklappbares Layout wählen
   (Reiter Erweitert → Layout), sonst gibt es keinen Hamburger-Button. */
.container-nav {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.container-nav .navbar {
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0;
  margin: 0;
}
/* Hamburger-Button und Login-Symbol: exakt gleiche Größe, Rahmen und Höhe */
.container-nav .navbar-toggler,
.login-icon,
.logout-icon {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2.6rem;
  height: 2.6rem;
  margin: 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 8px;
}
.container-nav .navbar-toggler {
  color: var(--header-text);
  font-size: 1.25rem;
  line-height: 1;
}
.container-nav .navbar-toggler:focus {
  box-shadow: none;
}
/* Unter 992 px setzt Cassiopeia/Bootstrap Außenabstände und Positionen am Button:
   hier hart auf bündig mit dem Login-Symbol stellen */
.container-header .container-nav .navbar-toggler,
.container-header .container-nav .navbar-toggler-right {
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  align-self: flex-start;
}
.container-header .container-nav nav.navbar {
  align-items: flex-start;
  align-content: flex-start;
  padding: 0 !important;
  margin: 0 !important;
}
.container-nav .navbar-toggler:focus-visible {
  outline: 2px solid var(--header-text);
  outline-offset: 2px;
}

/* Auch auf großen Bildschirmen eingeklappt lassen */
@media (min-width: 992px) {
  .container-nav .navbar-expand-lg .navbar-toggler {
    display: inline-flex;
  }
  .container-nav .navbar-expand-lg .navbar-collapse {
    display: none !important;
    flex: 0 0 auto !important;
    width: max-content;
    min-width: 16rem;
  }
  .container-nav .navbar-expand-lg .navbar-collapse.show,
  .container-nav .navbar-expand-lg .navbar-collapse.collapsing {
    display: block !important;
  }
}

/* Aufgeklapptes Menü: untereinander, auf dezentem Hintergrund */
.container-nav .navbar-collapse {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, .28);
  border-radius: 12px;
}
.container-nav .navbar-collapse .mod-menu {
  flex-direction: column;
  align-items: flex-start;
}
/* Untermenüs (Dropdown): heller Kasten mit dunkler Schrift, sonst weiß auf weiß */
.container-nav .metismenu.mod-menu .metismenu-item > ul {
  background-color: var(--paper);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
  padding: 6px 0;
}
.container-header .metismenu.mod-menu .metismenu-item > ul a,
.container-header .metismenu.mod-menu .metismenu-item > ul .mm-toggler {
  color: var(--accent);
}
.container-header .metismenu.mod-menu .metismenu-item > ul a:hover {
  text-decoration: underline;
}

/* Im aufgeklappten Hamburger-Menü: Untermenüs untereinander auf dunklem Grund */
.container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul {
  position: static;
  width: 100%;
  background: transparent;
  box-shadow: none;
}
.container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul a,
.container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul .mm-toggler {
  color: var(--header-text);
}

/* Untermenüs beim Überfahren mit der Maus öffnen (alle Ebenen).
   Per Tastatur (Tab) öffnen sie sich ebenfalls, auf Touchgeräten bleibt der Klick. */
/* Die Untermenüs klappen nach RECHTS aus (Flyout), damit die Einträge darunter nicht
   verrutschen. Auf kleinen Bildschirmen bleibt es beim Klick/Antippen. */
@media (any-hover: hover) and (min-width: 992px) {
  .container-nav .navbar-collapse .mod-menu {
    align-items: stretch;
  }
  .container-nav .navbar-collapse .metismenu-item {
    position: relative;
  }
  .container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul {
    position: absolute;
    top: -6px;
    left: 100%;
    width: max-content;
    min-width: 12rem;
    z-index: 1000;
    background-color: var(--paper);
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .25);
    padding: 6px 0;
  }
  .container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul a,
  .container-nav .navbar-collapse .metismenu.mod-menu .metismenu-item > ul .mm-toggler {
    color: var(--accent);
  }
  .container-nav .metismenu.mod-menu .metismenu-item:hover > ul,
  .container-nav .metismenu.mod-menu .metismenu-item:focus-within > ul {
    display: block !important;
    height: auto !important;
    visibility: visible;
    opacity: 1;
  }
}

/* ===== Login: nur ein Symbol, führt zur Anmeldeseite ===== */
/* Größe und Rahmen kommen aus der gemeinsamen Regel beim Hamburger-Button oben */
.login-icon,
.logout-icon {
  text-decoration: none;
  transition: background-color .15s ease;
}
/* Modul-Wrapper um das Symbol: kein eigener Versatz, bündig mit dem Hamburger */
.container-nav > div,
.container-nav > .moduletable,
.container-nav .mod-custom {
  margin: 0;
  padding: 0;
  line-height: 0;
}
.login-icon::before,
.logout-icon::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Abmelden-Symbol (Pfeil aus der Tür), eigene Form */
.logout-icon::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5-5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.login-icon:hover,
.login-icon:focus-visible,
.logout-icon:hover,
.logout-icon:focus-visible {
  background-color: rgba(255, 255, 255, .18);
}

/* Kleine Bildschirme (Smartphone) */
@media (max-width: 767.98px) {
  /* Weniger Innenabstand in den Kästen */
  .container-component {
    padding: 12px;
    border-radius: 8px;
  }
  .container-sidebar-left,
  .container-sidebar-right {
    padding: 14px;
    border-radius: 8px;
  }

  /* Verschachtelte Blog-Container: kein zusätzlicher Einzug */
  .com-content-category-blog__children,
  .com-content-category-blog__child,
  .com-content-category-blog .cat-children,
  .com-content-category-blog .blog-items {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Seitenrand etwas schmaler */
  .site-grid {
    column-gap: 0;
  }
  .container-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  /* Trainingszeiten: kompaktere Zellen */
  .table-responsive .table th,
  .table-responsive .table td {
    padding: .5rem .6rem;
    font-size: .9rem;
  }

  /* Beitragstabelle (Mitgliedsbeiträge) */
  .beitragstabelle {
    font-size: 0.9rem;
  }
  .beitragstabelle th,
  .beitragstabelle td {
    padding: 6px 8px;
  }
}