@import url('../../../../vendor/fontawesome-free/css/fontawesome.min.css');

/* Schriftart für Symbole */
@font-face {
    font-family: 'Font Awesome 5 Solid';
    font-style: normal;
    font-weight: 900;
    src: url('../../../../vendor/fontawesome-free/webfonts/fa-solid-900.woff2') format('woff2');
}

/* Schriftart für Marken */
@font-face {
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
    font-weight: 400;
    src: url('../../../../vendor/fontawesome-free/webfonts/fa-brands-400.woff2') format('woff2');
}

/* Schriftart für Texte */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v13-latin-regular.woff2') format('woff2');
}

/* Schriftart für Hauptmenü */
@font-face {
  font-display: swap;
  font-family: 'Dosis';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/dosis-v32-latin-regular.woff2') format('woff2');
}

/* Farbpalette */
:root {
  --nclub-black-rgb:       0,  0,  0; /* black          */
  --nclub-white-rgb:     255,255,255; /* white          */
  --nclub-red-rgb:       210, 39, 43; /* fire alarm red */
  --nclub-lightgray-rgb: 207,207,207; /* timberwolf     */
  --nclub-darkgray-rgb:  117,113,112; /* dim-gray       */
  --nclub-blue-rgb:      65, 89, 154; /* blue           */
  --nclub-black:         rgba(var(--nclub-black-rgb),1);    
  --nclub-white:         rgba(var(--nclub-white-rgb),1);    
  --nclub-red:           rgba(var(--nclub-red-rgb),1);   
  --nclub-lightgray:     rgba(var(--nclub-lightgray-rgb),1);     
  --nclub-darkgray:      rgba(var(--nclub-darkgray-rgb),1);   
  --nclub-blue:          rgba(var(--nclub-blue-rgb),1);
  --nclub-lightgray-50:  rgba(var(--nclub-lightgray-rgb),0.50); 
  --nclub-darkgray-35:   rgba(var(--nclub-darkgray-rgb),0.35);
  --nclub-white-35:      rgba(var(--nclub-white-rgb),0.35);
  --nclub-white-90:      rgba(var(--nclub-white-rgb),0.90);
  --nclub-white-95:      rgba(var(--nclub-white-rgb),0.95);
  --cassiopeia-color-primary: var(--nclub-lightgray);  
  --cassiopeia-color-link:    var(--nclub-white);
  --cassiopeia-color-hover:   var(--nclub-darkgray);
  --primary:          var(--nclub-lightgray);
  --secondary:        var(--nclub-darkgray);
  --info:             var(--nclub-lightgray-50);
  --warning:          var(--nclub-red);
  --danger:          var(--nclub-red);
  --link-color:       var(--nclub-black);
  --link-hover-color: var(--nclub-black);
}

/* Container-Reihenfolge für kleiner LG */
@media (max-width: 991px) {
    .site-grid {
        grid-template-areas:
            ". banner banner banner banner ."
            ". top-a  top-a  top-a  top-a  ."
            ". top-b  top-b  top-b  top-b  ."
            ". side-l side-l side-l side-l ."
            ". comp   comp   comp   comp   ."
            ". side-r side-r side-r side-r ."
            ". bot-a  bot-a  bot-a  bot-a  ."
            ". bot-b  bot-b  bot-b  bot-b  ."
    }
}

/* Textformate */
b, strong {
  font-weight: bold;
}
h2, .h2 {
  color: var(--nclub-darkgray);
  font-family: 'Dosis';
  font-size: 150%;
  font-weight: bolder;
}
h3, .h3 {
  font-family: 'Dosis';
  font-size: 130%;
  font-weight: bolder;
}
a:hover, a:focus {
  text-decoration: none;
}
.btn:hover, .btn:focus {
  background-color: var(--nclub-blue);
}
.btn:hover a, .btn:focus a {
  color: var(--nclub-white);
  text-decoration: none;
}
.btn:hover i, .btn:focus i {
  color: var(--nclub-white);
}
.table th {
  font-weight: 700;
}
summary {
  font-weight: bold;
  padding-bottom: 0.5rem;
}

/* Buttons */
.btn-primary {
  background-color: var(--nclub-blue);
}

/* Body */
body {
  font-family: 'Inter', sans-serif;
  --body-font-weight: 300;
  --body-line-height: 1.5;
}

/* Tabelle interner Kalender */
.nclub-table-calendar td {
  padding: 4px;
}

/* Header */
.container-header {
  background-image: none;
}
.container-header .grid-child{
  padding: 0;
}
@media (max-width: 991px) {
  .container-header .grid-child{
     padding: 0 0 1rem 0;
  }
}

/* Logo */
.container-header .navbar-brand {
  margin: 0 auto;
  padding-bottom: 0.75rem;
}
.brand-logo img {
  width: 600px;
  aspect-ratio: auto 600 / 149;
  border: 3px solid var(--nclub-darkgray-35);
}

/* 3-Balken-Menü */
.container-header .navbar-toggler {
    color: var(--nclub-black);
    cursor: pointer;
    border: 1px solid var(--nclub-black);
}

/* Hauptmenü */
.container-nav .navbar {
	margin: 0 auto;
	.metismenu.mod-menu {
	  color: var(--nclub-darkgray);
	  font-family: 'Dosis', sans-serif;
	  border-top: 1px solid var(--nclub-white-35);
	}
	.metismenu.mod-menu .metismenu-item {
	  padding: 0 .85em 0 .85em;
	}
	.metismenu.mod-menu .metismenu-item a {
	  padding: .6em .12em .6em .3em;
	}
	.metismenu.mod-menu .metismenu-item a:hover:after,
	.metismenu.mod-menu .metismenu-item button:hover:before,
	.metismenu.mod-menu .metismenu-item.current a:after,
	.metismenu.mod-menu .metismenu-item.current button:before {
	  background: none;
	}
	.metismenu.mod-menu .metismenu-item a:hover,
	.metismenu.mod-menu .metismenu-item button:hover,
	.metismenu.mod-menu .metismenu-item.current a,
	.metismenu.mod-menu .metismenu-item.current button {
	  color: var(--nclub-white);
	}
	.metismenu.mod-menu .mm-collapse {
	  background: var(--nclub-white-90);
	  border-radius: 5px;
	}
	.metismenu.mod-menu .mm-collapse:hover {
	  background: var(--nclub-white-95);
	}
	.metismenu.mod-menu .mm-collapse .metismenu-item {
	  font-size: 85%;
	}
	.metismenu.mod-menu .mm-collapse .metismenu-item a {
	  display: block;
	  padding: 9px;
	  width: 100%;
	  color: var(--nclub-darkgray);
	  border-bottom: 1px dotted var(--nclub-darkgray);
	}
	.metismenu.mod-menu .mm-collapse .metismenu-item:last-child a {
	  border-bottom: none;
	}
	.metismenu.mod-menu .mm-collapse .metismenu-item a:hover,
	.metismenu.mod-menu .mm-collapse .metismenu-item.current a{
	  color: var(--nclub-red);
	  text-decoration: none;
	}
	.navbar-toggler {
		border: none;
		color: var(--nclub-black);
	}
}
@media (max-width: 991px) {
	.container-nav .navbar {
		margin: 0 2.2em;
		.metismenu.mod-menu {
			.metismenu-item {
				padding: 0 1em 0 1em;
				color: var(--nclub-black);
				background-color: var(--nclub-lightgray);
				a {
					padding: 0;
					text-decoration: none;
					color: var(--nclub-black);
				}
			}
			.mm-collapse {
				.metismenu-item {
					background: var(--nclub-white);
				}
			}
		}
	}
}

/* Benutzermenü */
.nclub-mod-user {
	background-color: var(--nclub-white);
    border: none;
	margin: 0 auto;
	.metismenu.mod-menu {
		.metismenu-item {
			color: var(--nclub-lightgray);
			background-color: var(--nclub-red);
			a, button {
				font-size: 0.8em;
				text-decoration: none;
				color: var(--nclub-lightgray);	
			}
			a:hover {
				color: var(--nclub-white);
			}	
		}
		.active {
				background-color: var(--nclub-blue);
				a, button {
					color: var(--nclub-white);
				}
		}
		.mm-collapse {
			.metismenu-item {
				color: var(--nclub-black);
				background: var(--nclub-white);
				a {
					color: var(--nclub-black);
				}
				a:hover {
					color: var(--nclub-red);
				}	
				.active {
					color: var(--nclub-red);
				}
			}
		}
	}
	.navbar-toggler {
		border: none;
		color: var(--nclub-red);
	}
}
@media (max-width: 991px) {
	.nclub-mod-user {
		margin: 0;
	}
}

/* Aktionen */
.nclub-mod-actions {
    border: none;
	margin: 0;
	.metismenu.mod-menu {
		padding: 1em 0 0 0;
		.metismenu-item {
			padding: .25em;
		}
	}
	a {
		font-size: 0.6em;
		padding: .3em 1em .3em .5em;
	}
}

/* Seite */
.site-grid {
  grid-template-columns: [full-start]minmax(0,1fr)[main-start]minmax(0,15rem) minmax(0,37.5rem) minmax(0,37.5rem) minmax(0,15rem)[main-end]minmax(0,1fr)[full-end];
   grid-column-gap: 1em;
}

/* Banner */
.container-banner {
  background-color: var(--cassiopeia-color-primary);
  background-image: 
	linear-gradient(
		to bottom, 
		var(--cassiopeia-color-primary) 50%, 
		white 0 50%
	);
  margin-bottom: 1em;
}

/* Banner - Karusell */
.carousel > .carousel-inner > .carousel-item > img {
  border: 3px solid var(--nclub-darkgray-35);
  height: 304.8px;
  max-width: 884.8px;
}

/* Soziale Netzwerke */
.socialmedia-links {
  /*text-align: right;*/
  margin: 0.3em 0em 0 1em;
  font-size: 110%;
  color: var(--nclub-darkgray);
}
.socialmedia-links a {
  margin: 0 0.2em;
}

/* Anmeldung */
.mod-login input {
  font-size: small;
}
.mod-login button {
  color: var(--nclub-white);
  background-color: var(--nclub-blue);
  border-color: var(--nclub-black);
}
.mod-login button:hover {
  color: var(--nclub-black);
  border-color: var(--nclub-darkgray);
}

/* Karten */
.card {
  margin-bottom: 1.5rem;
  color: var(--nclub-black);
  background-color: var(--nclub-lightgray-50);
}
.card-header {
  font-weight: bold;
}
.main-top .card a, main .card a {
  color: var(--nclub-blue);
}

/* Formulare */
.visforms h1 {
  /*display: none;*/
}
.bt5.visform input::placeholder, .bt5.visform textarea::placeholder {
  opacity: 0.5;
}
.bt5.visform .btn-info,
.bt5.visform .btn-cancel,
.bt5.visform .btn-save {
  color: var(--nclub-white);
  background-color: var(--nclub-blue);
  border: 2px solid var(--nclub-black);
}
.bt5.visform .btn-info:hover,
.bt5.visform .btn-cancel:hover
.bt5.visform .btn-save:hover {
  color: var(--nclub-black);
  border-color: var(--nclub-darkgray);
}
.bt5.visform .justify-content-center {
    justify-content: left !important;
}
.nclub-form-spacer-text {
  font-size: 130%;
  font-weight: bold;
  margin-top: 0.5em;
  border-bottom: 1px solid var(--nclub-black);
}
.nclub-form-radiobutton>.row,
.nclub-form-checkboxgroup>.row {
  margin-bottom: 0 !important;
}
.nclub-form-radiobutton>.row>label,
.nclub-form-checkboxgroup>.row>label,
.nclub-form-text {
  font-weight: bold;
}
.nclub-form-radiobutton-text,
.nclub-form-radiobutton-text {
  font-style: italic;
  font-size: 80%;
}

.nclub-field-readonly {
    pointer-events: none;
    background-position: unset;
    -moz-appearance:none; /* Firefox */
    -webkit-appearance:none; /* Safari and Chrome */
    appearance:none;
}

.nclub-form-checkbox>.form-group {
  margin: .25em !important;
}

.nclub-form-date-calc {
  background: var(--nclub-lightgray);
  pointer-events: none;
  background-position: unset;
  -moz-appearance:none; /* Firefox */
  -webkit-appearance:none; /* Safari and Chrome */
  appearance:none;
}

/* Footer */
.footer {
  background-image: none;
}
.footer .grid-child {
  padding: 1em 1em 2em 1em;
  Color: black;
  font-size: 90%;
}
.footer .metismenu.mod-menu {
  border-width: 0;
}
.footer .metismenu.mod-menu .metismenu-item a {
  font-size: 80%;
  text-decoration: none;
}

/* Komponente SIGE */
.sige .sige_cont_0 {
  height: auto !important;
  padding-bottom: 1em !important;
}

/* Tabelle Kennzeichnungen */
.nclub-table-labeling th, .nclub-table-labeling td {
  background-color: #fff9d9;
}

/* Tabelle Modulliste */
.nclub-table-clip {
  min-height:15em;
  max-height:20em;
}

/* Offcanvas-Menü Erweiterung*/
.offcanvas-body .brand-logo {
	display: none;
}
.offcanvas.show {
    background-color: var(--cassiopeia-color-primary);
    background-image: linear-gradient(135deg,var(--cassiopeia-color-primary),var(--cassiopeia-color-hover));
}
@media (min-width: 992px) {
    .offcanvas-start {
        width: 100%;
    }
}
@media (max-width: 991.98px) {
    .offcanvas .metismenu.mod-menu .metismenu-item > ul {
        position: relative;
        width: 100%;
        margin-top: 1rem;
    }
    .offcanvas .metismenu.mod-menu .mm-collapse {
        background-color: transparent;
    }
    .offcanvas .metismenu.mod-menu .metismenu-item > a {
        color: var(--nclub-white);
    }
}
.offcanvas-header > *:only-child {
    margin-left: auto;
}

.jd_top_navi {
    border-bottom: none !important;
}

.nclub-showcase .w-100 {
  display: none;
}

.nclub-showcase .row .card {
  min-height: 7em;
  background: var(--nclub-white);
}

.nclub-showcase .row dl, .nclub-showcase .row dd {
  margin-bottom: 0;
}

.visforms-form {
    justify-content: center !important;
    display: flex !important;
}

/* Bugfix visforms */
/* Bug: Leerer DIV col-1 links neben Button */
.visform .pbBtnCon .col-1 {
    display: none;
}

/* Bugfix SIGE */
/* Bug: Vertikaler Abstand zu groß */
.sige li {
  height: initial !important;
}