/* Ab hier spezifische Einstellungen für TSV-Schlierbach.de */
/* hover für Navigation - Menu klappt bei Mausfokus auf */
.mod-menu li:hover > ul {
  display: block !important;
}

/* Hintergrundfarbe für Header */
.header, .container-header {
  background-color: #042b8b;
  background-image: linear-gradient(135deg, rgb(4, 43, 139) 0%, rgb(4, 43, 139) 100%);
}

/* Hintergrundfarbe für Navigation im Bannerbereich */
.container-banner {
  background-color: #042b8b;
}

/* Schriftfarbe für Überschriften im Main, after-content und side-left */
/*
.com-content-article__body h1, .com-content-article__body h2, .com-content-article__body h3, .main-bottom h2, .main-bottom h3, .main-bottom h4, h4.card-header {
  color: #042b8b;
}
*/
h2.card-header, h3.card-header, h4.card-header{
  color: #042b8b;
}

/* Schriftfarbe und Buttonfarbe für Abteilungsspezifische Navigation im Banner */
#navbar121 .mod-menu .level-1 > a,
#navbar121 .mod-menu .level-1 > button,
#navbar122 .mod-menu .level-1 > a,
#navbar122 .mod-menu .level-1 > button,
#navbar123 .mod-menu .level-1 > a,
#navbar123 .mod-menu .level-1 > button,
#navbar124 .mod-menu .level-1 > a,
#navbar124 .mod-menu .level-1 > button,
#navbar137 .mod-menu .level-1 > a,
#navbar137 .mod-menu .level-1 > button,
#navbar143 .mod-menu .level-1 > a,
#navbar143 .mod-menu .level-1 > button
{
  color: #ffffff;  
}

/* Hamburger-Menu-Icon der Abteilungsspezifischen Navigation im Banner in weiß und mit Rand */
.container-banner .navbar .navbar-toggler {
  color: #fff;
  cursor: pointer;
  border: 1px solid #fff;
}
/* Hamburger-Menu-Icon der Abteilungsspezifischen Navigation im side-left in blau und mit Rand */
.card-body .navbar .navbar-toggler {
  color: #042b8b;
  cursor: pointer;
  border: 1px solid #042b8b;
}

/* Backgroundfarbe für Footer */
.footer {
  background-image: linear-gradient(135deg, rgb(247, 247, 247) 0%, rgb(247, 247, 247) 100%);
}
.footer .grid-child {
  background-color: #f7f7f7;
  color: #666666;
}

/* hover Farbe für link im Footer einstellen */
#footerContentLeft a:hover {
  color: #042b8b;
}
.footer .grid-child .mod-custom p a:hover {
  color: #042b8b;
}

/* hover Farbe für link im Footer für login einstellen */
.mod-login__userdata .mod-login__options li a:hover {
  color: #042b8b;
}
/* Farbe für button im Footer für login einstellen */
.mod-login__userdata .mod-login__submit .btn-primary {
  background-color: #042b8b;
}

/* Schriftgröße Überschriften in Blog-Darstellung verändern */
.com-content-category-blog__items .com-content-category-blog__item .item-content .page-header h1 {
  font-size: 180%;  
  color: #042b8b;
}
.com-content-category-blog__items .com-content-category-blog__item .item-content .page-header h2 {
  font-size: 150%;  
  color: #042b8b;
}

/* Schriftgröße Kategorie-Überschriften in Blog-Darstellung verändern */
.com-content-category-blog .page-header h2 {
  font-size: 150%;  
  color: #042b8b;
}
.com-content-category-blog .page-header h1 {
  font-size: 180%;  
  color: #042b8b;
}
.com-content-category-blog h2 {
  font-size: 150%;  
  color: #042b8b;
}
.com-content-category-blog h1 {
  font-size: 180%;  
  color: #042b8b;
}

/* Schriftgröße Überschriften in Hauptartikel Blog-Darstellung verändern */
.blog-items .blog-item .item-content h1 {
  font-size: 180%;
  color: #042b8b;
}
.blog-items .blog-item .item-content h2 {
  font-size: 150%;
  color: #042b8b;
}

/* Schriftgröße Überschriften in einzelnem Artikel verändern */
.com-content-article .page-header h2 {
  font-size: 150%;
  color: #042b8b;
}
.com-content-article .page-header h1 {
  font-size: 150%;
  color: #042b8b;
}

main div.com-content-category-blog.blog div.category-desc.clearfix h1 {
  font-size: 180%;
  color: #042b8b;
}
main div.com-content-category-blog.blog div.category-desc.clearfix h2 {
  font-size: 150%;
  color: #042b8b;
}
main div.com-content-category-blog.blog div.category-desc.clearfix h3 {
  font-size: 150%;
  color: #042b8b;
}

/* Breite des Eingabfelds in der Suche verkleinern */
#mod-finder-searchword117 {
  max-width: 150px; /* Ändern Sie den Wert nach Bedarf */
}


/* Zentriere das Banner-Menü für nav-bar */
/* gleiche Breite wie Cassiopeia Container */
.container-banner .navbar {
  max-width: 1320px;
  margin: 0 auto;
  padding: .5rem .5rem;
}

.container-header .navbar {
    padding: 0rem .5rem 0rem 0rem;  
}

/* maxiMenuCK im Banner gleiche Breite wie Cassiopeia Container */
#nav-haupt, #nav-badm, #nav-fuss, #nav-voll, #nav-turn, #nav-kurs, #nav-puf {
  max-width: 1320px;
  margin: 0 auto;
  padding: .5rem .5rem;
}

/* Erforderlich, sonst erscheint Hamburgermenu ganz oben links mit padding, also eingerücht von oben und links */
.container-header .grid-child {
  /*
    padding: none !important;
  */
    padding-left: 0em !important;
    padding-top: 0em !important;
  
}

/* Notwendig, damit obersters Menu nicht hinter den Abteilungsspezifischen Menus abtaucht */
div#nav-haupt-mobile-bar, div#nav-badm-mobile-bar, div#nav-fuss-mobile-bar, div#nav-voll-mobile-bar, div#nav-turn-mobile-bar, div#nav-kurs-movile-bar {
  z-index: 8 !important;
}

#nav-tsv > ul > li.maximenuck.item2209.active.first.level1 > a > span > span {
  color: transparent;
}

/* Für In-Article Navigation bei Volleyball */
/* Flex-Container UL */
ul.volley-cat-nav {
  display: flex !important;          /* Flexbox aktivieren */
  flex-wrap: wrap !important;        /* Umbrechen bei Platzmangel */
  justify-content: center !important;
  align-items: flex-start;           /* oben ausrichten */
  gap: 1rem !important;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: row !important;    /* erzwingt Reihenlayout */
}

/* LI-Elemente */
ul.volley-cat-nav > li.nav-item {
  display: flex !important;
  justify-content: center;
  flex: 0 0 auto;                    /* keine automatische Vergrößerung */
}

/* A-Elemente als Buttons */
ul.volley-cat-nav > li.nav-item > a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;

  min-width: 120px;
  padding: 0.6rem 1.2rem;
  background-color: #042b8b;
  color: #fff !important;
  border-radius: 0.5rem;
  text-decoration: none !important;
  text-align: center;

  white-space: nowrap;
  transition: transform 0.2s, background-color 0.2s;
}

/* Hover */
ul.volley-cat-nav > li.nav-item > a:hover {
  background-color: #0652A7;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 576px) {
  ul.volley-cat-nav {
    flex-direction: row !important;  /* Reihenlayout beibehalten */
    justify-content: center;          /* mittig */
    flex-wrap: wrap;                  /* Umbruch bei Platzmangel */
  }

  ul.volley-cat-nav > li.nav-item {
    flex: 1 1 calc(50% - 0.5rem);    /* zwei Buttons pro Reihe, Abstand berücksichtigen */
    margin-bottom: 0.5rem;           /* kleiner Abstand nach unten */
  }

  ul.volley-cat-nav > li.nav-item > a {
    width: 100%;                      /* füllt das LI aus */
    max-width: 180px;                 /* verhindert zu große Buttons */
  }
}

/* Navigationsbuttons von JEvent anpassen */
/* --- Container für Buttons --- */
.new-navigation .nav-items > div#nav-month,
.new-navigation .nav-items > div#nav-week,
.new-navigation .nav-items > div#nav-today,
.new-navigation .nav-items > div#nav-jumpto {
    background-color: white !important;      /* Standard-Hintergrund */
    border: 1px solid #042b8b !important;    /* Rahmen dunkelblau */
    border-radius: 4px;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
    box-sizing: border-box;
    height: 36px;
    overflow: hidden;
    transition: background-color 0.15s ease;
}

/* Hover direkt auf dem Container */
.new-navigation .nav-items > div#nav-month:hover,
.new-navigation .nav-items > div#nav-week:hover,
.new-navigation .nav-items > div#nav-today:hover,
.new-navigation .nav-items > div#nav-jumpto:hover {
    background-color: #a3bfff !important;    /* hellblau füllt den ganzen Button */
}

/* Links im Container */
.new-navigation .nav-items > div#nav-month a,
.new-navigation .nav-items > div#nav-week a,
.new-navigation .nav-items > div#nav-today a,
.new-navigation .nav-items > div#nav-jumpto a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    text-decoration: none !important;
    color: #042b8b !important;
    background-color: transparent !important; /* Link bleibt transparent */
    font-size: 14px !important;
    font-weight: normal !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

/* Aktiver Button */
.new-navigation .nav-items > div#nav-month.active,
.new-navigation .nav-items > div#nav-week.active,
.new-navigation .nav-items > div#nav-today.active,
.new-navigation .nav-items > div#nav-jumpto.active {
    background-color: #042b8b !important;    /* dunkelblau */
    border-color: #042b8b !important;
}

.new-navigation .nav-items > div#nav-month.active a,
.new-navigation .nav-items > div#nav-week.active a,
.new-navigation .nav-items > div#nav-today.active a,
.new-navigation .nav-items > div#nav-jumpto.active a {
    color: white !important;
}

/* --- Container für Monats-Links (Oktober / Dezember) --- */
.jev_toprow div.previousmonth, .jev_toprow div.nextmonth {
    background-color: #042b8b !important;
    border: 1px solid #042b8b !important;
}

.jev_toprow div.currentmonth {
    border-top: 1px solid #042b8b !important;
    border-bottom: 1px solid #042b8b !important;
    margin-bottom: -1px;
}
/* Icons in Vormonat und Nächster Monat auf weiss geändert. Icons liegen im Override */
#jevents_body .jev_toprow.jev_monthv div.previousmonth a
 {
    background: url(../images/mini_arrowleft-white.gif) no-repeat center left !important;
}
#jevents_body .jev_toprow.jev_monthv div.nextmonth a
 {
    background: url(../images/mini_arrowright-white.gif) no-repeat center right !important;
}


/* Navigationsmenus bei Jux Mega Menu anpassen: */

/*Sub-Menus: Grauer Rahmen leicht abgerundet */
.megacss.haschild:hover .childcontent,
.megacss.haschild.active .childcontent {
  border: 3px solid #bbbbbb;
  border-radius: 5px;
  background-color: transparent;
  overflow: visible !important;
  box-sizing: border-box;
  z-index: 9999;
}
/* Schriftgröße der Hauptmenüpunkte; gilt nur für JUX Mega Mod Theme Dark blue */
.mainNav .megamenu.level0 > li > a {
    font-size: 110% !important;   /* gewünschte Größe */
    /* font-weight: 500;*/  /* optional: Schriftstärke */
}
/* Schriftgröße der Untermenüpunkte; gilt nur für JUX Mega Mod Theme Dark blue */
.megamenu.level1 > li > a > .menu-inner > .image-title,
.megamenu.level2 > li > a > .menu-inner > .image-title{
    font-size: 120% !important;   /* etwas kleiner für Dropdowns */
    /* font-weight: 500; */
}
/* --- NEU: Aktives Menüelement nur unterstreichen --- */
/* Level 0: Hauptmenü */
.mainNav .megamenu.level0 > li > a:hover,
.mainNav .megamenu.level0 > li.active > a,
.mainNav .megamenu.level0 > li.active:hover > a,
/* Level 1: erstes Untermenü */
.mainNav .megamenu.level1 > li > a:hover,
.mainNav .megamenu.level1 > li.active > a,
.mainNav .megamenu.level1 > li.active:hover > a,
/* Level 2: zweites Untermenü */
.mainNav .megamenu.level2 > li > a:hover,
.mainNav .megamenu.level2 > li.active > a,
.mainNav .megamenu.level2 > li.active:hover > a {
  background: none !important;        /* keine Hintergrundfarbe */
  color: inherit !important;          /* keine Textfarbänderung */
  text-decoration: underline !important; /* nur Unterstreichung */
  text-underline-offset: 4px;
}

/* Entfernt eventuelle Effekte des Themes (z. B. Gradient oder Glow) */
.mainNav .megamenu.level0 > li > a:hover::before,
.mainNav .megamenu.level0 > li.active > a::before,
.mainNav .megamenu.level1 > li > a:hover::before,
.mainNav .megamenu.level1 > li.active > a::before,
.mainNav .megamenu.level2 > li > a:hover::before,
.mainNav .megamenu.level2 > li.active > a::before {
  background: none !important;
  box-shadow: none !important;
}

/* ===============================
   TSV Menü Design (nur für .tsv-menu)
   =============================== */
/* ===============================
   TSV-Menü (Level0–Level4)
   Vollständig anpassbar via Variablen
   Optimiert für MetisMenu / Cassiopeia
=============================== */

/* --- Variablen --- */
:root {
  /* Farben */
  --tsv-color-bg: #042b8b;             /* Hintergrundfarbe Level0+Submenus */
  --tsv-color-text: #ffffff;           /* Standard-Textfarbe */
  --tsv-color-hover-bg: transparent; /* #3655a2; */       /* Hover-Hintergrund */
  --tsv-color-hover-text: #ffffff;     /* Hover-Textfarbe */
  --tsv-color-active-bg: transparent; /*#0533a3;*/      /* Aktives Element Hintergrund */
  --tsv-color-active-text: #ffffff;    /* Aktives Element Text */
  --tsv-underline-color: #ffffff;   /* Unterstrichfarbe */
  
  /* Schrift & Padding */
  --tsv-font-family: "Open Sans", sans-serif;
  --tsv-font-size: 18px;
  --tsv-padding-y: 0.3rem;
  --tsv-padding-x: 1rem;
  --tsv-line-height: 1em;             /* Zeilenhöhe Level0 */
  --tsv-submenu-line-height: 1em;   /* Zeilenhöhe Submenu-Level1–4 */
  --tsv-transition-speed: 0.3s;
  --tsv-border-radius: 6px;

  /* Submenu Boxen */
  --tsv-submenu-border: 2px solid #cccccc;
  --tsv-submenu-gap-y: 5px;           /* vertikaler Abstand zwischen Submenus */
  --tsv-level1-left: 20px;            /* Level1 leicht rechts unter Level0 */
  --tsv-level2-left: 100%;            /* Level2+ rechts vom Parent */
  --tsv-level2-top: 30px;             /* Level2+ vertikal versetzt */
  --tsv-min-width: 200px;
}

/* ===============================
   Grundstruktur Level0
=============================== */
.tsv-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: var(--tsv-color-bg);
  /* font-family: var(--tsv-font-family); */
  font-size: var(--tsv-font-size);
  position: relative;
}

/* --- Links Level0 --- */
.tsv-menu > li > a {
  display: block;
  padding: var(--tsv-padding-y) var(--tsv-padding-x);
  color: var(--tsv-color-text);
  text-decoration: none;
  border-radius: var(--tsv-border-radius);
  line-height: var(--tsv-line-height);
  transition: all var(--tsv-transition-speed) ease;
}
/* Level0 Links */
.tsv-menu > li > a:hover,
.tsv-menu > li.active > a,
.tsv-menu > li.current > a {
  text-decoration: underline !important;
  text-decoration-color: var(--tsv-underline-color) important; /* sorgt für weiße Unterstreichung */
  color: var(--tsv-color-active-text) !important;
  background-color: var(--tsv-color-active-bg) !important;
}

.tsv-menu > li > a::after,
.tsv-menu > li > a::before {
    content: none !important;
    border: none !important;
    box-shadow: none !important;
}
/*
.tsv-menu > li > a:hover,
.tsv-menu > li.active > a,
.tsv-menu > li.current > a {
  text-decoration: underline;
  color: var(--tsv-color-active-text);
  background-color: var(--tsv-color-active-bg);
}
*/
/* ===============================
   Submenus Level1–Level4
=============================== */

/* Alle Submenus standardmäßig unsichtbar */
.tsv-menu ul,
.tsv-menu ul.mm-collapse {
  list-style: none;
  padding: 0;
  margin: 0;
  display: none !important;        /* MetisMenu Überschreiben */
  position: absolute !important;   /* überlappend */
  background-color: var(--tsv-color-bg) !important;
  border: var(--tsv-submenu-border);
  min-width: var(--tsv-min-width);
  z-index: 1000;
}

/* Level1 direkt unter Level0 */
.tsv-menu > li > ul {
  top: 100%;
  left: var(--tsv-level1-left);
  border-radius: var(--tsv-border-radius);
}

/* Level2+ rechts vom Parent, leicht nach unten */
.tsv-menu ul ul {
  top: var(--tsv-level2-top);
  left: calc(var(--tsv-level2-left) - 10px);
  border-radius: var(--tsv-border-radius);
}

/* Submenus beim Hover sichtbar */
.tsv-menu li:hover > ul {
  display: block !important;
}

/* Links innerhalb Submenus */
.tsv-menu ul li a {
  display: block;
  padding: var(--tsv-padding-y) var(--tsv-padding-x);
  color: var(--tsv-color-text);
  text-decoration: none;
  line-height: var(--tsv-submenu-line-height);
  transition: all var(--tsv-transition-speed) ease;
}

/* Hover/Active Links in Submenus */
.tsv-menu ul li a:hover,
.tsv-menu ul li.active > a,
.tsv-menu ul li.current > a {
  background-color: var(--tsv-color-hover-bg);
  color: var(--tsv-color-hover-text);
  text-decoration: underline;
}

/* Keine Margin bei Untermenus, Items bleiben fix */
.tsv-menu ul li ul {
  margin: 0;
  padding: 0;
}

/* --- Toggler Buttons (MetisMenu) optional --- */


/* --- Responsive Anpassung --- */
/*Stört bei Verwendung von MobilMenuCK - daher auskommentiert */
/* Sonst ist Hamburgermenu ganz links oben mit padding versehen */
/*
@media (max-width: 992px) {
  .tsv-menu a {
    padding: 0.75rem 1.25rem;
  }
}
*/

/* Ab einer gewissen Auflösung in der Breite soll der Such-Container nicht mehr sichtbar sein */
@media (max-width: 600px) {
  body > header > div > div.container-search > form {
    display: none !important;
  }
}

/* Lage, Schrift und Abstand des Suchmodules anpassen */
body .mod-finder .form-control {
  height: 38px;
  line-height: 38px;
  padding: 0 8px;
  font-size: 1rem;
  margin-top: 0.2rem; /* verringern oder erhöhen, je nach gewünschtem Abstand */

}
body .mod-finder .btn {
  height: 38px;
  line-height: 38px;
  font-size: 1rem;
  padding: 0 10px;
  margin-top: 0.2rem; /* verringern oder erhöhen, je nach gewünschtem Abstand */
}
.container-header .container-nav .container-search, .container-header .container-nav nav {
    margin-top: 0.2em; 
}

/* Beschreibung im Banner für Sportarten und Hauptverein Banner die Schriftgröße anpassen */
/* Die Reihenfolge ist wichtig */
/*
@media (max-width: 1350px) {
  #carouselExampleIntervalTSV > div > div > div h3,p {
    font-size: 1.2rem;
  }
}
@media (max-width: 1000px) {
  #carouselExampleIntervalTSV > div > div > div h3,p {
    font-size: 0rem;
  }
}
@media (max-width: 800px) {
  #carouselExampleIntervalTSV > div > div > div {
    padding-bottom: 0rem !important;
    bottom: 0rem !important;
  }
  #carouselExampleIntervalTSV > div > div > div h2 {
    font-size: 1rem;
  }
  #carouselExampleIntervalTSV > div > div > div h3,p {
    font-size: 0rem;
  }
}
*/