/* templates/cassiopeia/css/user.css */

:root{
  --clever-bg: #f6f6f6;
  --clever-text: #222;
  --clever-link: #2a72c5;
  --clever-border: #e3e3e3;
}

body{
  background: var(--clever-bg);
  color: var(--clever-text);
}

.site{
  background: #fff;
  border: 1px solid var(--clever-border);
  border-radius: 0;
}


.header{
  background: #fff;
  border-bottom: 1px solid var(--clever-border);
}


a{ color: var(--clever-link); }
a:hover{ text-decoration: underline; }


.navbar, .container-header{
  background: #fff;
}
.navbar .nav-link{
  color: #333;
  font-weight: 400;
}
.navbar .nav-link:hover{
  color: #000;
}

.moduletable > h3,
.card-header{
  font-size: 1.05rem;
  font-weight: 600;
  border-bottom: 1px solid var(--clever-border);
  padding-bottom: .4rem;
  margin-bottom: .8rem;
}
.card{
  border: 0;
  border-bottom: 1px solid var(--clever-border);
  border-radius: 0;
}

/* --- TOP MENU: force horizontal for metismenu output --- */
.container-nav > .mod-menu,
.container-nav ul.mod-menu {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 1.25rem !important;
  padding-left: 0 !important;
  margin: 0 !important;
  list-style: none !important;
  align-items: center !important;
}

.container-nav ul.mod-menu > li {
  margin: 0 !important;
}

.container-nav ul.mod-menu > li > a {
  display: inline-block !important;
  padding: .5rem .25rem !important;
  text-decoration: none !important;
}

/* dropdown submenu should stay vertical */
.container-nav ul.mod-menu ul {
  display: block !important;
}

/* --- TOPBAR: align title row nicely --- */
.container-topbar .brand-row{
  display:flex;
  align-items:center;
  gap:1rem;
  padding: .5rem 0;
}

.container-topbar .brand-title{
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.1;
  margin: 0;
}

/* Top navigation bar styling */
.container-nav {
  background: #6b0f0f;         /* dark red bar */
}

/* Menu links */
.container-nav ul.mod-menu > li > a {
  color: #fff !important;
  font-weight: 600;
  padding: .4rem .8rem !important;
  text-decoration: none !important;
}

/* Hover/active */
.container-nav ul.mod-menu > li > a:hover,
.container-nav ul.mod-menu > li.active > a {
  background: rgba(255,255,255,0.12);
  border-radius: 3px;
}

/* Dropdown menu */
.container-nav ul.mod-menu ul {
  background: #fff;
  border: 1px solid #ddd;
  padding: .5rem 0;
}
.container-nav ul.mod-menu ul a {
  color: #333 !important;
  padding: .4rem 1rem !important;
  display: block;
}
.container-nav ul.mod-menu ul a:hover {
  background: #f3f3f3;
}

.container-topbar {
  background: #e7d1b4;
  padding: .5rem 1rem;
}
/* --- Fix für: dropdown should NOT be always open --- */
.container-nav ul.mod-menu ul.mm-collapse {
  display: none !important;
}

.container-nav ul.mod-menu ul.mm-collapse.mm-show {
  display: block !important;
}
/* --- Title color --- */
.container-topbar .brand-title {
  color: #6b0f0f !important;
}
/* --- EMCCS custom slider --- */
#emccsSlider.emccs-slider{
  position: relative;
  max-width: 980px;
  margin: 0 auto 1rem auto;
  overflow: hidden;
  background: #fff;
}

#emccsSlider .emccs-slides{
  position: relative;
  width: 100%;
  min-height: 1px;
}

#emccsSlider .emccs-slide{
  display: none !important;
  width: 100%;
  text-align: center;
}

#emccsSlider .emccs-slide.active{
  display: block !important;
}

#emccsSlider .emccs-slide img{
  display: block;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 0 auto;
}

/* Pfeile */
#emccsSlider .emccs-prev,
#emccsSlider .emccs-next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  width: 42px;
  height: 42px;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  z-index: 10;
}

#emccsSlider .emccs-prev{ left: 10px; }
#emccsSlider .emccs-next{ right: 10px; }

#emccsSlider .emccs-prev:hover,
#emccsSlider .emccs-next:hover{
  background: rgba(0,0,0,0.55);
}

/* Punkte */
#emccsSlider .emccs-dots{
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10;
}

#emccsSlider .emccs-dots button{
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.65);
  cursor: pointer;
  padding: 0;
}

#emccsSlider .emccs-dots button.active{
  background: #6b0f0f;
}