/*
 Template Name:    ZV Energie
 Author: Anita Bachmann
 Template:      ZV Energie - Cassiopeia Child
 Version:       1.0.0
 License:       GNU General Public License v2 or later
 License URI:   http://www.gnu.org/licenses/gpl-2.0.html
*/

/*---- TEST Schriftgrösse ---*/
.lernplattform .com-content-article__body, .lernplattform h3 {
	font-size: 1.25rem;
}
/*---- ENDE TEST Schriftgrösse ---*/

/*---- TEST Info Test-Website ---*/
/*---- Info-Meldung an Position main-bottom -----*/
/*.main-bottom.card {
	border: none;
	height: 25px;
	background-color: transparent;
	margin-top: auto;
}
.main-bottom.card .card-body {
	height: 25px;
	margin-top: -19px;
}*/
/*---- ENDE TEST Info Test-Website ---*/




/*----- fonts -----*/
:root {
	--top-menu-font: "Hind";
	--menu-font: "Hind";
  /*--headings-font: "Hind Medium";*/
	--headings-font: "Hind SemiBold",sans-serif;
	--menu-font: "Hind",sans-serif;
	--breadcrumb-font: "Hind",sans-serif;
	--footer-font: "Hind",sans-serif;
	--body-font: "Hind",sans-serif;
	--font-text-heading: var(--font-h3);
	--font-h1: normal normal normal 24px/27px var(--headings-font);
	--font-h2: normal normal normal 21px/23px var(--headings-font);
	--font-h3: normal normal normal 18px/27px var(--headings-font);
/*	--menu-font-size: 22px;*/
/*	--body-font-size: 22px;*/
	--quote-font: "Barlow", sans-serif;
	--breadcrumb-font-size: .875rem; /*22px;*/
	--sm-font-size: .875rem;
}
/* font size admin.ch */
@media (min-width: 1280px) {
	:root {
		--topbar-font-size: 1rem;
		--body-font-size: 1.125rem;
		--menu-font-size: 1.125rem;
	}
}
@media (max-width: 1279px) {
	:root {
		--topbar-font-size: 1rem;
		--body-font-size: 1rem;
		--menu-font-size: 1rem;
	}
}



/*----- colors -----*/
:root {
	--color-medium-grey: #707070;
	--color-dark-grey: #212529;
	--color-purple: #8C195F;
	--color-magenta: #D72864;
	--color-lila: #F3E9F3;	
	--color-light-grey: #F2F2F2;
	--color-dark-grey2: #2F4356; /* admin.ch */
	--body-color: var(--color-dark-grey);
	--topbar-color: #ffffff;
	--footer-color: #ffffff;
	--line-color: #E5E7EB;
/*	--bg-top-nav: #1F2937;*/
	--bg-nav-hover: #F3E9F3;
	--bg-lila: #F3E9F3;	
	--bg-light-grey: #F2F2F2;
	--bg-purple: #8C195F;	
	--bg-magenta: #D72864;
	--color-box-shadow: #00000029;
	--h1-color: #8C1F66;
	--h2-color: #8C1F66;
	--h3-color: #8C1F66;
	--menu-mobile-color: #8C1F66;
	--menu-mobile-active-color: #D94179;
	--menu-mobile-hover-color: #D94179;

	--cassiopeia-color-primary: var(--body-color);
  --cassiopeia-color-link: var(--color-purple);
  --link-color: var(--color-purple);
/*  --link-color-rgb: 34, 79, 170;*/
  --cassiopeia-color-hover: var(--color-magenta);
  --link-hover-color: var(--color-magenta);
/*  --link-hover-color-rgb: 66, 64, 119;*/	


/*--alert-heading-text)*/
	--alert-accent-color: var(--bg-magenta);
	--alert-close-button: var(--bg-magenta);


  --cassiopeia-accent: #1e1e3f;   
  --cassiopeia-bg1:   #1e1e3f;  
  --cassiopeia-bg2:   #16162c;     
  --cassiopeia-bg3:   #0d0d1a;    
  --cassiopeia-highlight: #6B6B6B;    
  --cassiopeia-text:  #000;         
}
/*----- structure -----*/
:root {
	--desktop-padding-left-right-lg: 100px;
	--desktop-padding-left-right-sm: 3vw;
	--desktop-sidebar-right-max-size: 300px;
	--mobile-margin-left-right: 35px;
	--paragraph-margin-bottom: 20px;
	--column-margin-top: 15px;
	--column-padding-left-right: 20px;
	--col-gap: 20px;
}


:root {
	--breadcrumb-divider: "|";
}

/*----- form -----*/
:root {
	--form-input-height: 48px;
}

@font-face {
    font-family: "Hind";
    font-style: normal;
    src: local('Hind'), url('../../../site/cassiopeia_zv_energie/fonts/Hind-Regular.woff') format('woff');
}
@font-face {
    font-family: "Hind Medium";
    font-style: normal;
    src: local('Hind'), url('../../../site/cassiopeia_zv_energie/fonts/Hind-Medium.woff') format('woff');
}
@font-face {
    font-family: "Hind SemiBold";
    font-style: normal;
    src: local('Hind'), url('../../../site/cassiopeia_zv_energie/fonts/Hind-SemiBold.woff') format('woff');
}


/*---------------------------------*/
/*-------- General --------*/
/*---------------------------------*/
body {
    font-family: var(--body-font);
    font-weight: normal;
    font-style: normal;
    color: var(--body-color);
	letter-spacing: 0.11px;
}

@media (width >= 992px) {
.site-grid {
      grid-template-areas:
".banner banner banner banner." 
".top-0  top-0  top-0  top-0. " 
".top-a  top-a  top-a  top-a. " 
".top-b  top-b  top-b  top-b. " 
".bread  bread  bread  bread. "  /* Breadcrumbs */
".side-l comp   comp   side-r." 
".bot-a  bot-a  bot-a  bot-a. " 
".bot-b  bot-b  bot-b  bot-b. ";
    }
	.container-footer {
		display: grid;
		grid-template-areas:
		".foot foot foot foot.";
    }
}
.site-grid {
/*	grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,25rem))[main-end]minmax(0,1fr)[full-end]; /*25 statt 19.875rem */
	overflow-x: hidden;
	grid-gap: 0 2em;
}
.container-top-b .main-menu .navbar {
	padding-top: 0;
}
/*???? Bei Abständen links und rechts des Grids sind 20px mehr, also 120px anstatt 100px. Woher kommen diese 20px?????*/
@media all and (min-width: 1650px) {
	.site-grid, .container-footer {
		grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(3,minmax(0,25rem))minmax(0,var(--desktop-sidebar-right-max-size))[main-end]minmax(0,1fr)[full-end];
	}
/* lines on window width */
	.container-top-b {
		margin-left: -900px;
		width: calc(100vw + 900px)!important;
	}
	.container-top-b .main-menu {
		padding-left: 900px;
	}
}
@media all and (min-width: 1400px) and (max-width: 1649px) {
	.site-grid, .container-footer {
		grid-template-columns: [full-start]var(--desktop-padding-left-right-lg)[main-start]repeat(3,minmax(0,25rem))minmax(0,var(--desktop-sidebar-right-max-size))[main-end]var(--desktop-padding-left-right-lg)[full-end];
	}
/* lines on window width */
	.container-top-b {
		margin-left: calc(var(--desktop-padding-left-right-lg) * -1 - 20px);
		width: calc(100vw + var(--desktop-padding-left-right-lg))!important;
	}
	.container-top-b .main-menu {
		padding-left: calc(var(--desktop-padding-left-right-lg)  + 20px);
	}
}
@media all and (min-width: 992px) and (max-width: 1399px) {
	.site-grid, .container-footer {
		grid-template-columns: [full-start]var(--desktop-padding-left-right-sm)[main-start]repeat(3,minmax(0,25rem))minmax(0,var(--desktop-sidebar-right-max-size))[main-end]var(--desktop-padding-left-right-sm)[full-end];
	}
	.container-top-b {
		margin-left: calc(var(--desktop-padding-left-right-sm) * -1 - 20px);
		width: calc(100vw + var(--desktop-padding-left-right-sm))!important;
	}
	.container-top-b .main-menu {
		padding-left: calc(var(--desktop-padding-left-right-sm) + 20px);
	}
}
@media all and (max-width: 991px) {
	.site-grid {
		display: block;
	}
	.site-grid > * {
		padding: 0 var(--desktop-padding-left-right-sm);
	}
}

/*--------------------------------*/
/*-------- Top Navigation --------*/
/*--------------------------------*/
.container-banner {
	height: 36px;
	margin: 0;
	background-color: var(--cassiopeia-color-primary);
}
.container-top-0 {
	grid-area: top-0;
	margin-top: -36px;
	display: flex;
	justify-content: flex-end;
	height: 36px;
}
.container-top-0 > ul {
	display: block;
	width: max-content;
}
.container-top-0 > ul li {
	display: flex;
	align-items: center; 
	justify-content: center; 
	height: 100%;
	margin-right: 25px;
}
.container-top-0 a, .container-top-0 button {
    font-family: var(--body-font);
	font-size: var(--topbar-font-size);
	color: var(--topbar-color);
	padding: 0;
}
.container-top-0 .mod-list li a:hover {
  text-decoration: none;
}

/* language dropdown */
.mod-languages .btn-group .btn {
	background-color: var(--cassiopeia-color-primary);
	color: #fff;
	padding: 1px 0 0;
	border: 0;
}
.mod-languages .dropdown-menu {
	margin: 0;
	background-color: var(--cassiopeia-color-primary);
	color: #fff;
	border: 0;
	border-radius: 0;
    min-width: 65px !important; /* Gewünschte Breite */
    --bs-dropdown-min-width: 65px !important; /* Überschreibt die Bootstrap-Variable */
	padding-top: .3rem !important;
}

div.mod-languages .dropdown-menu li {
	margin: 0;
}
.dropdown-toggle::after {
content: "";
  background-image: url("../images/arrow-down.svg");
  background-size: 13px 8px;
  background-repeat: no-repeat;
  background-position: 0 11px;
  width: 18px;
  height: 17px;
	border: 0;
}
div.mod-languages ul li.lang-active {
  background-color: var(--color-medium-grey);
}
@media (width >= 768px) and (width <= 992px) {  /* show mobile menu */
.collapse:not(.show) {
  display: none !important;
}
 .navbar-expand-md .navbar-toggler {
    display: block;
  }
}

/*--------------------------------*/
/*--------- Logo Header ----------*/
/*--------------------------------*/
@media all and (min-width: 992px) {
	.logo-header-mobile {
		display: none;
	}
	.logo-header .mod-custom {
		display: flex;
		flex-wrap: wrap;
		padding-top: 20px;
		padding-bottom: 45px;
	}	
	.logo-header img {
		width: 100%;
	}
	.logo-header .logo-bafu  {
		position: relative;
	}
	.logo-header .logo-bafu  img {
		position: absolute;
		bottom: 0;
	}
	.logo-header .logo-werz img  {
		padding-top: 0.2vw;
	}
}
@media all and (min-width: 1201px) {
	.logo-header .logo-bafu {
		width: 405px; /*345px;*/
		padding-right: 45px;
	}
	.logo-header .logo-ost {
		width: 208px; /*115px;*/
		padding-left: 45px;
		padding-right: 45px;
	}
	.logo-header .logo-werz {
		width: 285px;
	}
	.logo-header .logo-bafu  img {
		width: calc(100% - 45px);
	}
}
@media all and (min-width: 992px) and (max-width: 1200px) {
	.logo-header .logo-bafu {
		flex-basis: 30%;
		padding-right: 4vw;
	}
	.logo-header .logo-ost {
		flex-basis: 20%;
		padding-left: 2vw;
		padding-right: 3.5vw;
	}
	.logo-header .logo-werz {
		flex-basis: 25%;
	}
	.logo-header .logo-bafu  img {
		width: calc(100% - 4vw);
	}
}

@media all and (max-width: 991px) {
	.logo-header {
		display: none;
	}
	.logo-header-mobile {
		position: relative;
/*		height: 40px;*/
		padding: 10px 25px;
		margin-bottom: 35px;
		line-height: 40px;
		border-bottom: 5px solid #8C1F66;
/*		z-index: 12500;*/
	}
	.logo-header-mobile:after {
		content: ' ';
		clear: both;
	}
	.logo-header-mobile .custom {	
		display: flex;
		align-items: center;
	}	
	.logo-header-mobile .logo-bafu {
		width: 25%;
		padding-right: 4vw;
		font-size: 15px;
		color: #454545;
		float: left;
	}
	.logo-header-mobile .logo-bafu a {
		display: flex;
		align-items: center;
		color: #454545;
		text-decoration: none;
	}
	.logo-header-mobile .logo-bafu a:hover {
		color: #454545;
	}
	.logo-header-mobile .logo-bafu img {
		height: 30px;
		margin: 0;
		padding: 5px 10px 5px 0;
	}
	.logo-header-mobile .logo-ost {
		width: 20%;
		padding-left: 4vw;
		padding-right: 4vw;
/*		border-left: 3px solid #E5E5E5;*/
		float: left;
	}
	.logo-header-mobile .logo-ost img{
		height: 36px;
		padding: 2px 0;
	}
	.logo-header-mobile .logo-werz {
		width: 13%;
/*		float: left;*/
	}
	.logo-header-mobile .logo-werz img {
/*		height: 25px!important;
		max-height: 100%;
		width: auto;
		padding: 5px 0;*/
	}
}
@media all and (max-width: 600px) {
	.logo-header-mobile .logo-ost {
		flex-basis: 18%;
	}
}
@media all and (max-width: 500px) {
	.logo-header-mobile .logo-bafu {
		flex-basis: 28%;
		padding-right: 3vw;
		font-size: 12px;
	}
	.logo-header-mobile .logo-bafu img {
		height: 25px;
	}
	.logo-header-mobile .logo-ost {
		flex-basis: 20%;
	}
	.logo-header-mobile .logo-ost img{
		height: 30px;
		padding: 5px 0;
	}
	.logo-header-mobile .logo-werz img {
		height: 23px!important;
		max-height: 100%;
		width: auto;
		padding: 7px 0;
	}
}
@media all and (max-width: 390px) {
	.logo-header-mobile .logo-bafu {
		padding-right: 1vw;
		font-size: 10px;
	}
	.logo-header-mobile .logo-bafu a {
		margin-left: -5px;
	}
	.logo-header-mobile .logo-werz img {
		height: 28px!important;
		max-height: 28px!important;
		width: auto;
		padding: 0;
	}
}


/*---------------------------------*/
/*-------- Main Navigation --------*/
/*---------------------------------*/
.main-menu {
	position: relative;
    font-family: var(--menu-font); 
    font-weight: 300;
    font-style: normal;
	margin: 0;
}
.nav-collapse {
	position: relative;
}

/*------ Menu Desktop -------*/
@media all and (min-width: 992px) {
	.main-menu {
		display: block;
		text-align: left;
		border-top: 1px solid var(--line-color);
		border-bottom: 1px solid var(--line-color);
		height: 70px;
		font-size: var(--menu-font-size);
		line-height: 33px;
		letter-spacing: 0.11px;
	}
	.main-menu .nav > li {
		position: relative;
		padding: 0;
	}
	.container-banner li .menu-mobile  {
		display: none;
	}
	.main-menu .nav {
		position: relative;
		height: 70px;
	}
	.main-menu .nav > li:not(.active) > a {
		color: var(--color-medium-grey);
	}
	.main-menu .nav > li.active > a {
		background: transparent;
		color: var(--color-purple);
		/*color: var(--color-medium-grey);*/
		border-bottom: 3px solid var(--color-purple);
		padding-bottom: 14px;
		margin-bottom: -17px;
	}	
	.main-menu .nav > li > a:hover {
		color: var(--color-purple);
	}
}
@media all and (min-width: 992px) {
	.main-menu .mod-menu {
		flex-direction: row;
	}
	.main-menu .nav > li {
		display: flex;		
		align-items: center;
		height: 70px;
	}
	.main-menu .nav > li:not(:first-of-type) {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.main-menu .nav > li:first-of-type {
		padding-right: 1rem;
	}
	.main-menu .nav > li:not(.current.active) > a {
		text-decoration: none;
	}
	.main-menu .nav > li:not(.current.active) > a:hover {
		color: var(--color-purple);
		border-bottom: 3px solid var(--color-purple);
		padding-bottom: 14px;
		margin-bottom: -17px;
	}	
	.main-menu .nav > li.current.active > a {
		text-decoration-line: underline;
		text-underline-offset: 17px;
		text-decoration-thickness: 2px;
		text-underline-position: under;
	}	
	.main-menu .nav > li > button {
		position: absolute;
		right: 0;
		top: 27px;
	}	
}	

/*--------- submenu ------------*/
/* Submenü bei Mouseover (Hover) anzeigen */
@media (min-width: 992px) {
  .mod-menu .parent:hover > .mod-menu__sub {
    display: block;
    border-right: 1px solid var(--color-medium-grey);
    border-left: 1px solid var(--color-medium-grey);
    border-bottom: 1px solid var(--color-medium-grey);
	box-shadow: 4px 3px 6px var(--color-box-shadow);
  }
  .main-menu .nav > li > button {
	  display: none;
  }
}
/* END Submenü bei Mouseover (Hover) anzeigen */
@media (min-width: 992px) {
	.mod-menu__sub {
		position: absolute;
		top: 65px;
		left: -30px;
		padding: 0 0 20px!important;
		width: 350px;
		background-color: #fff;
		z-index: 20;
	}
	.mod-menu__sub li {
		padding: 0.65rem 2.1rem;
		font-size: 1rem;
	}
	.mod-menu__sub li:not(:last-child) {
		border-bottom: 1px solid var(--line-color);
	}
	.mod-menu__sub li:hover {
		background-color: var(--bg-lila);
	}
	.mod-menu__sub a:hover, .mod-menu__sub a:active, .mod-list li.active > a {
		text-decoration: none!important;
	}

}
/** Variante 2: Submenü bei Klick anzeigen **/
/** Hauptmenüpunkt darf dann nicht verlinkt sein **/
/*.main-menu .nav > li > button[aria-expanded="true"] {
    position: absolute;
	right: 0;
	top: 0;
    bottom: -90px;
    z-index: 30;
    right: -160px;
  }
.main-menu .nav > li > button[aria-expanded="true"] .icon-chevron-down::before {
  content: "\f00d";
}*/


/*----------------------------------------*/
/*-------- Main Navigation Mobile --------*/
/*----------------------------------------*/
@media all and (max-width: 991px) {
	.container-top-b {
		position: absolute;
		width: 100%;
		top: 65px;
		left: 0;
		padding: 0!important;
		border: none;
/*		z-index: 12800;*/
/*		font-size: 17px;
		line-height: 24px;
		letter-spacing: 0.18px;*/	
	}
	.navbar-toggler {
		position: absolute;
		top: 0;
		right: var(--desktop-padding-left-right-sm);
	}
}

/********* MOBILE noch anpassen ***************************************************************/
/*------ Menu Mobile and Tablet hoch -------*/
@media all and (max-width: 991px) {
/*  .navbar .btn-navbar {
    display: block;
    position: absolute;
	top: -65px;
	right: 25px;
	width: 35px;
    height: 35px;
    text-decoration: none;		
	float: none;
	padding: 0!important;
	margin: 15px 0 0!important;
	background-color: transparent;
	border: none;
	box-shadow: none;
	line-height: 0;
  }*/
   .navbar-toggler[aria-expanded="false"] {
	   width: 35px;
		height: 35px;
		background-image: url("../images/sandwich.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
	}
   .navbar-toggler[aria-expanded="true"] {
		background-image: url("../images/close.svg");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 0 0;
	}
	.navbar-toggler .icon-menu::before {
		content: "";
	}
	.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:focus-visible {
		border: none;
		box-shadow: none;
	}
	
	
/* Mobile Dropdown */
	.navbar-collapse {
		margin-top: 50px;
		padding: 0 var(--desktop-padding-left-right-sm) 65px;
		background-color: #fff;
		border-bottom: 5px solid var(--line-color);
		z-index: 20;
	}
	.navbar-collapse li {
		padding: 10px 30px;
	}
	.navbar-collapse li:not(:last-child) {
		border-bottom: 1px solid var(--line-color);
	}
	.navbar-collapse li a {
		display: inline-block;
		text-decoration: none;
		color: var(--link-color);
	}
.navbar-collapse li:not(.deeper.parent) a {
		width: 100%;
}
.navbar-collapse li.deeper.parent a {
		width: calc(100% - 30px);	
}
.navbar-collapse .mod-menu__toggle-sub {
	width: 30px;
}
.navbar-collapse li.deeper.parent {
		width: 100%;
}
	
	.navbar-collapse > .nav > li:hover {
		background-color: var(--bg-lila);
	}
	.navbar-collapse > .mod-menu > li.active {
		border-left: 3px solid var(--color-purple);
	}
	.navbar-collapse li a:hover, .navbar-collapse li.active a {
		text-decoration: none;
	}
	
	.navbar-collapse .mod-menu__sub {
		margin-bottom: 0;
		font-size: var(--body-font-size);
	}
	.navbar-collapse .mod-menu__sub > li:hover {	
		background-color: #fff;
	}	
}
/************* ENDE MOBILE  **********************************************************************/



/*-----------------------------*/
/*-------- Breadcrumbs --------*/
/*-----------------------------*/
.container-breadcrumbs {
	margin-top: 15px;
}
.breadcrumb {
  --breadcrumb-divider-color: var(--color-medium-grey);
  --breadcrumb-item-active-color: var(--color-medium-grey);
  font-size: var(--breadcrumb-font-size);
  background-color: transparent;
  margin-left: 0;
  padding-left: 0!important;
}
.breadcrumb a {
  color: var(--color-medium-grey);
  text-decoration: none;
}

@media all and (max-width: 991px) {
	.breadcrumb {
		display: none;
	}
}
.breadcrumb .float-start {
	display: none;
}
.breadcrumb-item + .breadcrumb-item::before {
  content: "";
  background-image: url("../images/arrow-right.svg");
	background-size: 5px 10px;
  width: 5px;
  height: 15px;
  background-repeat: no-repeat;
  margin: 5px 10px 0 5px;  
}


/*----------------------------*/
/*--------- Content ----------*/
/*----------------------------*/
main .com-content-article__body {
	overflow: auto;
}
.container-component a {
    color: var(--link-color);
/*	text-decoration: none;*/
	text-decoration-line: underline;
	text-underline-offset: -3px;
	text-underline-position: under;
}

/*-----------------------------*/
/*-------- Footer --------*/
/*-----------------------------*/
@media all and (min-width: 992px) {
	.footer {
		margin: 100px 0 0;
	}
	.footer .grid-child .custom {
		display: flex;
		/*flex-direction: row;*/
		justify-content: space-between;
		width: 100%;
/*		padding-bottom: .75rem;
		padding-top: .75rem;*/
	}
	.footer .custom  div:nth-child(1) {
		/*padding-right: 35px;*/
	}
}
@media all and (max-width: 991px) {
	.footer {
		margin: 50px 0 0;
	}
	.footer .grid-child {
		/*align-items: left;*/
		margin-left: 20px;
	}
	.footer .grid-child .custom {
		display: flex;
		justify-content: space-between;
		width: 100%;
	}	
	.footer .custom  div:nth-child(2) {	
		margin-right: 40px;  /* Korrektur */
	}
}
.footer {
	grid-gap: 0 2em;
	background-color: var(--cassiopeia-color-primary);
	background-image: none;
	overflow-x: hidden;
}
.footer .grid-child {
	grid-column-start: main-start !important;
	grid-area: foot;
    grid-column-start: foot;
	column-gap: 1em;
	width: 100%;
	max-width: none;		
	padding: .75rem 0;
	font-size: 14px;
	color: var(--footer-color);
}

.footer a {
	text-decoration: none;
}
.footer a:not(.btn):hover {
	color: var(--color-magenta);
}

*------------------------------*/
/*--------- JEM Events ---------*/
/*------------------------------*/
.box-event br, #jemmodulebasic ul li::before {
	display: none;
}
#jemmodulebasic {
    padding: 0!important;
}
.box-event  p {
	margin: 0!important;
}
.box-event ul, .box-event li {
	margin: 0!important;
}
.box-event.box-violet li {
	color: #fff;
}
.box-event .event  {
	margin: 0 0 20px!important;
}
.box-event h3, .box-lernplattform h3  {
	margin-top: 0;
}
@media all and (min-width: 992px) {
	.box-event .mod-custom {
/*		margin-top: 50px;*/
	}
}
@media all and (min-width: 565px) and (max-width: 991px) {
	.box-event .mod-custom, .box-lernplattform  .mod-custom {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 10px;
	}
	.box-event .event-locations, .box-lernplattform .lernplattform-text {
		grid-column: 1 / 1;
		grid-row: 1 / 1;
	}
	.box-event .event-buttons, .box-lernplattform .lernplattform-buttons {
		grid-column: 2 / 2;
		grid-row: 1 / 1;
		align-self: end;
		justify-self: stretch;
		padding-bottom: 24px;
	}
	.box-event .event-buttons .button, .box-lernplattform .lernplattform-buttons .button {
		text-align: right;
	}
	.box-event .event-buttons .button a, .box-lernplattform .lernplattform-buttons .button a {
		width: 250px;
		max-width: 250px;
	}
}


/*-----------------------------*/
/*--------- To Top ------------*/
/*-----------------------------*/
.back-to-top-link, .back-to-top-link:hover, .back-to-top-link:focus {
	bottom: 3.3rem;
	border-color: var(--color-purple);
	background-color: #fff;
	transition: none;
}
.back-to-top-link.visible {
	border-radius: 0;
	background-image: url("../images/arrow-up-purple.svg");
	background-size: 25px 10px;
	background-repeat: no-repeat;
}
@media (max-width: 1023px) {
	.back-to-top-link {
		height: 2.75rem;
		width: 2.75rem;
		background-position: 8px 15px;
	}
}
@media (min-width: 1024px) {
	.back-to-top-link.visible {
		height: 3rem;
		width: 3rem;
		background-position: 10px 17px;
	}
}
.back-to-top-link .icon-arrow-up::before {
	content: "";
}

/*-----------------------------*/
/*--------- Buttons ---------*/
/*-----------------------------*/
p.button, p.button-grey {
    margin: 0;
}
#content .button:not(.bfCalendar), #content .button-grey:not(.bfCalendar) {
	margin-top: 30px;
}
.button a, .button-grey a {
	display: inline-block;
	text-align: center;
	line-height: 20px;
	padding: 13px 0;
/*	font: normal normal normal 15px/20px var(--body-font),sans-serif;*/
	letter-spacing: 0.75px;
	text-decoration: none;
}
.button a {
	width: 193px;
/*	background-color: #8C1F66;
	color: #fff;*/
	background-color: #fff;
	color: var(--color-purple);
	border: 1px solid var(--color-purple);
	text-transform: uppercase;
}
.button-grey a {
	width: 191px;
	background-color: #F0F0F0;
	border: 1px solid #8C1F66;
	color: #8C1F66;
}
.button a:hover {
	background-color: #D94179;
	color: #fff!important;
}
.button a:focus {
	color: #fff!important;
}
.button-grey a:hover {
	background-color: #8C1F66;
	color: #fff!important;
}
.button-grey a:focus {
	color: #8C1F66!important;
}
.box-grau .button a, .box-grey .button a, .box-grey .button-grey a {
	width: 100%;
	max-width: 225px;
	background-color: #F0F0F0;
	border: 1px solid #8C1F66;
	color: #8C1F66;
}
.box-grau .button a:hover, .box-grey .button a:hover, .box-grey .button-grey a:hover {
	background-color: #8C1F66;
	color: #fff!important;
}
.box-violett .button a, .box-violet .button a, .box-violet .button-grey a {
	width: 100%;
	max-width: 225px;
	background-color: #FFF;
	border: 1px solid #B8B8B8;
	color: #8C1F66!important;
}
.box-violett .button a:hover, .box-violet .button a:hover, .box-violet .button-grey a:hover {
	background-color: #8C1F66;
	border: 1px solid #B8B8B8;
	color: #fff!important;
}

/*---------------------------------*/
/*-------- Anmeldeformular --------*/
/*---------------------------------*/
.visforms.anmeldung .category-desc {
	display: none;
}
.visforms.anmeldung .vis_mandatory {
	font-weight: normal;
}
label {
	/*font: normal normal normal 16px/28px "Roboto",sans-serif;*/
	letter-spacing: 0.24px;
}
.visform input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]), .visform select, .visform textarea { 
	width: 100%;
	height: var(--form-input-height);
	margin: 0;
	padding: 5px 8px;
	border: 1px solid var(--color-medium-grey);
	border-radius: 0;
}
input[type="checkbox"], input[type="radio"] { 
	accent-color: var(--color-purple); 
}
.visform .btn { 
	border: 1px solid var(--color-medium-grey);
}
select {
	height: var(--form-input-height);
}
select:focus-visible, textarea:focus-visible, input:focus-visible {
	outline: 0;
}

/* Funktioniert nur in Edge und Chrome. Pfeil müsste zudem neu formatiert werden */
/**select, 
select::picker(select), select::picker-icon {
  appearance: base-select; /* Aktiviert den anpassbaren Modus */
/**}

select::picker-icon { **/
  /*margin-left: auto;       /* Verschiebt das Icon nach rechts */
  /* oder mit margin / transform anpassen */
/**  transform: translateX(10px);
}**/
@media all and (max-width: 1260px) {
	select option {
		font-size: 15px;
	}
}
@media all and (min-width: 1261px) {
	select option {
		font-size: 17px;
	}
}
@media all and (min-width: 576px) {
	.visforms.anmeldung .visform > fieldset {
		display: grid;
		grid-template-columns: 1fr 1fr;
		column-gap: 24px;
		row-gap: 10px;
	}
}
@media all and (max-width: 575px) {
	.visforms.anmeldung .visform > fieldset {
		display: block;
	}
}
	
/*.visCSSlabel:not(.visCheckbox) {*/
.visCSSlabel {
	width: 100%;
}
.visCSSinput, .visfield-container .input-append {
  /**margin-top: 10px;**/
}
/*.visfield-container input:not([type="radio"]):not([type="checkbox"]), .visfield-container.ausweisnr .visCustomText {*/
.visfield-container:not([data-container-field-type="checkbox"]):not([data-container-field-type="radio"]):not([data-container-field-type="textarea"]):not(.ausweisnr) {
/**	width: calc((100% - 25px) / 2)!important;**/
}
.visfield-container:not([data-container-field-type="checkbox"]):not([data-container-field-type="radio"]):not([data-container-field-type="select"]):not([data-container-field-type="textarea"]) label {
	display: none;
}
/**.visfield-container.vorname, .visfield-container.name, .visfield-container.geburtsdatum, .visfield-container.heimatort,
.visfield-container.strasse, .visfield-container.strassen-nr, .visfield-container.plz, .visfield-container.ort, .visfield-container.telefon, .visfield-container.email,
.visfield-container.vorname-bill, .visfield-container.name-bill, .visfield-container.strasse-bill, .visfield-container.strassen-nr-bill, 
.visfield-container.plz-bill, .visfield-container.ort-bill {
	float:left;
}
.visfield-container.name, .visfield-container.heimatort,
.visfield-container.strassen-nr, .visfield-container.ort, .visfield-container.email,
.visfield-container.name-bill, .visfield-container.strassen-nr-bill, 
.visfield-container.ort-bill {
margin-left: 25px;
}**/
@media all and (min-width: 576px) {
	.vis_mandatory, .visfield-container.datumpruefung, .visfield-container.chkrezertifizierung,
	.visfield-container.pruefungssprache, .visfield-container.ausweisnr,
	.visfield-container.anrede, .visfield-container.firma, .visfield-container.adresszusatz, .visfield-container.switcherrechnungsadresse,
	.visfield-container.firma-bill, .visfield-container.anrede-bill, .visfield-container.adresszusatz-bill, 
	.visfield-container.agentur, .visfield-container.sprache-korrespondenz, .visfield-container.mitteilung,
	.visfield-container.agb, .visfield-container.rechtliches {
		grid-column: span 2;
	}
	.visfield-container.datumpruefung,
	.visfield-container.anrede, .visfield-container.firma, .visfield-container.adresszusatz, .visfield-container.switcherrechnungsadresse,
	.visfield-container.firma-bill, .visfield-container.anrede-bill, .visfield-container.adresszusatz-bill {
		width: calc(50% - 12px);
	}
}
.visfield-container.datumpruefung .datumpruefung-list {
	width: 100%;
}
.switcherrechnungsadresse, .agentur {
	clear: both;
}
.visfield-container.required input::placeholder {
	color: var(--color-magenta);
}
.visfield-container.pruefungssprache {
	display: flex;
	flex-direction: column;
	margin-top: 10px;
}
.visfield-container.pruefungssprache > :nth-child(1) {
	order: 2;
	font-size: var(--sm-font-size);
}
.visfield-container.pruefungssprache > :nth-child(2) {
	order: 3;
}
.visfield-container.pruefungssprache > :nth-child(3) {
	order: 1;
}
.visfield-container.pruefungssprache > :nth-child(4) {
	order: 4;
}
.visfield-container.pruefungssprache > :nth-child(5) {
	order: 5;
}
.visfield-container.pruefungssprache > :nth-child(1) p {
	margin-bottom: 0;
}
.visfield-container.ausweisnr { /* Ausweisnummer */
	display: flex;
	flex-direction: row;
}
.visfield-container.ausweisnr .input-ausweisnr {
	height: var(--form-input-height);
	width: 100%;
	margin-right: 30px !important;
	padding-right: 0;
}
.visfield-container.ausweisnr .visCustomText {
	width: 100%;
	/*margin: 0 0 0 25px;*/
	margin: 0;
	font-size: var(--sm-font-size);
}
.visfield-container.ausweisnr .visCustomText p {
	margin: 0;
}
.visfield-container #form1anredelbl, .visfield-container #form1anrederechnunglbl {
	display: none;
}
.visfield-container.anrede .select-anrede {
	width: 100%;
	color: var(--color-magenta);
}
.visfield-container.anrede .select-anrede option:nth-of-type(2),
.visfield-container.anrede .select-anrede option:nth-of-type(3) {
	color: var(--body-color);
}
.switcherrechnungsadresse, .chkrezertifizierung {
	display: flex;
	flex-direction: row;
}
.switcherrechnungsadresse > *, .chkrezertifizierung > * {
	margin-top: 0;
}
.switcherrechnungsadresse :nth-child(1), .chkrezertifizierung :nth-child(1) {
	order: 1;
}
.switcherrechnungsadresse :nth-child(2), .chkrezertifizierung :nth-child(2) {
	order: 3;
	margin-left: 20px;
	padding-top: 3px;
}
.switcherrechnungsadresse :nth-child(3), .chkrezertifizierung :nth-child(3) {
	order: 2;
}
.switcherrechnungsadresse :nth-child(4), .chkrezertifizierung :nth-child(4) {
	order: 4;
}
.visfield-container .field-calendar .input-append {
	display: flex;
	flex-direction: row;
}
.field-calendar .viscalendar-input {
/*	width: calc(100% - 73px)!important;*/
}
.field-calendar button {
	height: var(--form-input-height);
	width: var(--form-input-height)!important;
	border-radius: 0 !important;
/*  background-color: #8C1F66;*/
	border-color: #8C1F66;
	margin-left: 7px;
}
.visform textarea {
	width: 100%;
}
.visfield-container.agb {
	display:flex;
}
.visfield-container.agb > input {
	order: 1;
	position: absolute;
}
.visfield-container.agb > label {
	display: none;
/*	order: 2;
	margin-left: 30px;
	margin-top: 5px;*/
}
.visfield-container.agb > label:after {
	display: none;
}
.visfield-container.agb > .visCustomText {
	margin-left: 30px;
	margin-top: 5px;
}
/* error messages */
.visfield-container {
	position: relative;
}
.visform:not(.bt5):not(.uikit3) .visfield-container > div[class^="fc-tbxfield"] {
	position: absolute;
	width: 100%;
	top: 45px;
}
.visform:not(.bt5):not(.uikit3) p.errorcontainer {
	margin: 0;
	padding: 0;
}
.visform:not(.bt5):not(.uikit3) p.errorcontainer {
/*  position: absolute;
  margin: 0;
  padding: 0;*/
}
.visform:not(.bt5):not(.uikit3) label.error {
	width: 95%;
	/*max-width: 95%;*/
	max-width: 350px;
	margin: 0;
	border-radius: 0;
	background-color: var(--bg-magenta);
	box-shadow: 4px 3px 6px var(--color-box-shadow);
	font-size: .9rem;
	position: absolute;
	z-index: 9;
}
.visform:not(.bt5):not(.uikit3) .ausweisnr label.error,
.visform:not(.bt5):not(.uikit3) .agentur label.error,
.visform:not(.bt5):not(.uikit3) .agb label.error {
	width: 46.2%;
}
.visform:not(.bt5):not(.uikit3) p.errorcontainer::after {
	display: none;
}
.visform:not(.bt5):not(.uikit3) p.errorcontainer::before {
	display: block;
	position: relative;
	width: 0;
	height: 0;
	margin-bottom: -1px;
	border-top: none;
	border-bottom: 12px solid var(--bg-magenta);
	border-right: 12px solid transparent;
	border-left: 12px solid transparent;
	content: "";
}
.visform [class^="captcha"] p.errorcontainer::before {
	bottom: -170px;
}
.visform [class^="captcha"] p.errorcontainer label.error {
	margin-top: 170px;
}


.visform .btn {
	float: left;
	width: 193px;
	background-color: #fff;
	color: var(--color-purple);
	border: 1px solid var(--color-purple);
	border-radius: 0;
	text-align: center;
	padding: 13px 0 13px 4px;
	font-size: var(--body-font-size);
	text-transform: uppercase;
	letter-spacing: 0.75px;
}
.visform .btn:hover {
  background-color: #D94179;
  color: #fff !important;
}
.visform .calendar-container .day-name {
  font-size: .85rem;
}
.visform .calendar-container table tbody td.day {
  font-size: 14px;
}
.visform .calendar-container a {
	text-decoration: none;
}
.visform .calendar-container .btn {
	padding: 5px 0 5px;
	font-size: 0.85rem;
}


/*---------------------------------------------*/
/*--------- Anmeldung Dankesseite ---------*/
/*---------------------------------------------*/
.view-visforms.layout-message.anmeldung .site-grid {
	overflow-y: hidden;
}
.view-visforms.layout-message.anmeldung .visforms-form-message td:empty,
.view-visforms.layout-message.anmeldung .visforms-form-message tr:empty,
.view-visforms.layout-message.anmeldung .visforms-form-message p:empty {
  display: none;
}
.view-visforms.layout-message.anmeldung .visforms-form-message p {
	margin: 0;
}
/*.view-visforms.layout-message.anmeldung .visforms-form-message .mandatory-icon {
	display: none;
}*/



/*---------------------------------------------*/
/*--------- Fehler- und Infomeldungen ---------*/
/*---------------------------------------------*/
#system-message-container joomla-alert {
	border-radius: 0;
}



/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/
/*********************************************************************************************************/
/********************* AB HIER ÜBERPRÜFEN ******************************************/
/*********************************************************************************************************/

/* Korrektur Scrollbalken */
#sectionAusweis > div {
  overflow: hidden!important;
}

/* neu 05.02.24 */
@font-face {
     font-family: 'Font Awesome 5 Free';
     src: url('../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.eot');
     src: url('../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.eot') format('embedded-opentype'), url('../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.woff') format('woff'), url('../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.ttf') format('truetype'), url('../../../media/vendor/fontawesome-free/webfonts/fa-regular-400.svg#fontawesomeregular') format('svg');
}
.fa, .fas, .far, .fal, .fad, .fab {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
}
.fa-question-circle {
	display: none;
}
.fa-question-circle::before {
	display: none;
	color: #8C1F66;
	content: "\f059";
}
.fa-calendar::before {
	content: "\f073";
}
.hasTooltip::after {
  display: block;
  content: attr(data-bs-original-title);
  font-size: 10pt;
  line-height: 16pt;
}

/*------ Submenu Mobile -------*/
@media all and (max-width: 991px) {
	.navigation .mod-menu__sub {
		display: block!important;
		position: relative!important;
		width: 100%!important;
		padding-top: 0;
		background-color: #F0F0F0;
		border: none;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		float: none;
	}
	.navigation .mod-menu__sub li {
		float: none;
	}
	.navigation .mod-menu__sub a {
		font-size: 17px;
		line-height: 25px;
	}
	.navigation .nav > li > .mod-menu__sub::after, .navigation .nav > li > .mod-menu__sub::before {
		display: none;
	}
}



/*-----------------------------*/
/*-------- Content --------*/
/*-----------------------------*/

/*--- TEST EINRUECKEN ---*/
.home .com-content-article__body, .com_visforms.anmeldung .container-component main {
	display: grid;
	grid-template-columns: repeat(12,minmax(0,1fr));
}
.home .com-content-article__body > *, .com_visforms.anmeldung .container-component main > * {
	grid-column: span 12/span 12;
}
@media (min-width: 768px) {
	.home .com-content-article__body > p:not([class^="columns"]):not(.header-image):not([class^="bg-fullwidth"]),
	.home .com-content-article__body > h1, 
	.home .com-content-article__body > h2, 
	.home .com-content-article__body > h3, 
	.home .com-content-article__body > ul:not([class^="bg-fullwidth"]) {
		grid-column-start: 2;
		grid-column-end: 11;
	}
	:lang(de-de) .home h1, :lang(de-de) .home .com-content-article__body > h1 + p {
		grid-column: span 12/span 12!important;
		font-size: 110%;
	}
	:lang(fr-fr) .home h1, :lang(fr-fr) .home .com-content-article__body > h1 + p {
		grid-column: span 12/span 12!important;
	}
	:lang(fr-fr) .home .com-content-article__body > h1 + p {
		column-count: 2;
		column-gap: 20px;
		/*column-rule: 1px solid #ccc;*/
	}
	:lang(it-it) .home .com-content-article__body h2, :lang(it-it) .home .com-content-article__body h2 ~ p {
		grid-column: span 12/span 12!important;
	}
}
@media (min-width: 1525px) {
	.com_visforms.anmeldung .container-component main > * {
		grid-column-start: 2;
		grid-column-end: 11;
	}
}
/*--- ENDE TEST EINRUECKEN ---*/


/*#content:after {
	clear: both;
}*/
/*@media all and (min-width: 992px) {
	.row-fluid {
		margin: 0 25px;
		width: calc(100% - 50px);
		max-width: 100%;
	}
	.row-fluid #aside { 
		position: relative;
	}
	.row-fluid .span9 {
		margin-left: 0;
	}
}*/
/*@media all and (min-width: 768px) and (max-width: 991px) {
.row-fluid .span3 {
    width: 26.404255317%;
}
.row-fluid .span9 {
    width: 71.468085099%;
}
}
@media all and (max-width: 767px) {
	.row-fluid #aside {  
		margin-top: 25px;
	}
}*/
/*.page-header {
    margin: 0;
    padding-bottom: 0;
    border-bottom: none;
}*/
p:not(.button):not(.button-grey) {
    margin: 0 0 var(--paragraph-margin-bottom);
}
p.button, p.button-grey {
    margin: 0;
}


/*-----------------------------*/
/*-------- Spalten (deutsche Version, nachher löschen) --------*/
/*-----------------------------*/
/*.spalten-3, .spalten-2, .spalten-3 img, .spalten-2 img {*/
.spalten-3, [class*="spalten-2"], .spalten-3 img, [class*="spalten-2"] img {
	width: 100%;
	position: relative;
}
.spalten-3:after, [class*="spalten-2"]:after {
	content: '';
	clear: both;
}
/*.spalten-3 .spalte, .spalten-2 .spalte {*/
.spalten-3 .spalte, [class*="spalten-2"] .spalte {
	float: left;
	position: relative;
	min-width: 180px;
	margin-top: 15px;
	margin-left: 0;
/*	margin-bottom: 15px;*/
}

/*.spalten-2 .spalte:nth-child(2n+1), .spalten-3 .spalte:nth-child(3n+1), .spalten-3 .spalte:nth-child(3n+2) {*/
[class*="spalten-2"] .spalte:nth-child(2n+1), .spalten-3 .spalte:nth-child(3n+1), .spalten-3 .spalte:nth-child(3n+2) {
 /*   margin: 5px 20px 15px 0;*/
/*	margin-top: 5px;*/
/*	margin-bottom: 0;*/
	margin-right: 20px;
}
/*.spalten-2 .spalte:nth-child(2n+2), .spalten-3 .spalte:nth-of-type(3n+3) {  /* last element of line */
[class*="spalten-2"] .spalte:nth-child(2n+2), .spalten-3 .spalte:nth-of-type(3n+3) {  /* last element of line */
	margin-right: 0;
/*	padding: 5px 0 15px 0;*/
}
/*.spalte:last-child  {
    padding: 5px 0 15px 0;
}*/
/*.spalten-2 .spalte {*/
[class*="spalten-2"] .spalte {
    /*max-width: calc(50% - 10px);*/
	width: calc(50% - 20px);
}
.spalten-2-33-67 .spalte:nth-child(2n+1) {
 	width: calc(33% - 20px);
}
.spalten-2-33-67 .spalte:nth-child(2n+2) {
 	width: calc(67% - 20px);
}
.spalten-3 .spalte  {
    /*max-width: calc(100% / 3 - 14px);*/
	width: calc(100% / 3 - 14px);
}
.spalte h2:first-child, .spalte h3:first-child {
    margin-top: 0;
}
/*.spalten-2, .spalten-3 {*/
[class*="spalten-2"], .spalten-3 {
	margin-top: 15px;
}
/*hr + .spalten-2, hr + .spalten-3 {*/
hr + [class*="spalten-2"], hr + .spalten-3 {
	margin-top: 0;
}
.item-page > div:nth-of-type(1) > .spalten-2-33-67:nth-of-type(1), .item-page > div:nth-of-type(1) > .spalten-2-33-67:nth-of-type(1) .spalte {
	margin-top: 0!important;
}


/*-----------------------------*/
/*-------- Columns --------*/
/*-----------------------------*/
.columns-3, .columns-2, .columns-5, .columns-2-33-67 {
   display: -webkit-flex;
   display: -ms-flex;
   display: flex;
   -webkit-flex-wrap: wrap;
   -ms-flex-wrap: wrap;
   flex-wrap: wrap;
}
/*.spalten-3, .spalten-2, .spalten-3 img, .spalten-2 img {*/
.columns-3, [class*="columns-2"], .columns-5, .columns-3 img, [class*="columns-2"] img, .columns-5 img {
	width: 100%;
	max-width: 100%;
	position: relative;
}
.columns-3:after, [class*="columns-2"]:after, .columns-2-33-67:after, .columns-5:after {
	content: '';
	clear: both;
}
.columns-3 .column, [class*="columns-2"] .column, .columns-5 .column {
	position: relative;
	margin-left: 0;
}
.columns-3 .column, [class*="columns-2"] .column {
	min-width: 180px;
}
.columns-5 .column {
/*	min-width: 180px;*/
}
.columns-3 .column, .columns-2 .column, .columns-5 .column {
	margin-top: var(--column-margin-top)!important;
}
.columns-2-33-67 img {
	margin-top: 3px!important;  /* Korrektur Zeilen-Überhöhe des Textes */
}
@media all and (min-width: 768px) {
	.columns-2-33-67 img {
		margin-top: 5px!important;
	}
}
@media all and (max-width: 767px) {
	.columns-2-33-67 img {
		height: 400px;
		width: 100% !important;
		object-fit: cover;
		object-position: center center;	
		margin-top: 0px;
		margin-bottom: 10px;		
	}
}

/*.spalten-2 .spalte:nth-child(2n+1), .spalten-3 .spalte:nth-child(3n+1), .spalten-3 .spalte:nth-child(3n+2) {*/
/*[class*="columns-2"] .column:nth-child(2n+1), .columns-3 .column:nth-child(3n+1), .columns-3 .column:nth-child(3n+2), .columns-3 .column:nth-of-type(3n+3) {*/
[class*="columns-2"] .column:nth-child(2n+1), .columns-3 .column:not(:last-of-type) {
	margin-right: 20px;
}
@media all and (min-width: 1024px) {
	.columns-5 .column {
		margin-right: 10px;
	}
}
@media all and (min-width: 451px) and (max-width: 1023px) {
	.columns-5 .column {
		margin-right: 0.7vw;
	}
}
@media all and (max-width: 450px) {
	.columns-5 .column {
		margin-right: 0.9vw;
	}
}
.columns-3 {
	width: calc(100% + 20px);
	overflow: hidden;
}
.columns-5 .column {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	-ms-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
 }
/*.spalten-2 .spalte:nth-child(2n+2), .spalten-3 .spalte:nth-of-type(3n+3) {  /* last element of line */
/*[class*="columns-2"] .column:nth-child(2n+2), .columns-3 .column:nth-of-type(3n+3) {  /* last element of line */
[class*="columns-2"] .column:nth-child(2n+2) { /* last element of line */
	margin-right: 0;
}

@media all and (min-width: 451px) {
	/*.spalten-2 .spalte {*/
/*	[class*="columns-2"] .column {*/
	.columns-2 .column {
		width: calc((100% - 20px) / 2);
	}
}

@media all and (min-width: 1024px) {
	.columns-5 {
		width: calc(100% + 10px);
		overflow: hidden;
	}
	.columns-5 .column {
		width: calc((100% - (5 * 10px)) / 5);
	}
}
@media all and (min-width: 921px) and (max-width: 1023px) {
	.columns-5 {
		width: calc(100% + 0.7vw);
		overflow: hidden;
	}
	.columns-5 .column {
		width: calc((100% - (5 * 0.7vw)) / 5);
	}
}
@media all and (min-width: 451px) and (max-width: 920px) {
	.columns-5 {
		width: calc(100% + 0.7vw);
		overflow: hidden;
	}
	.columns-5 .column {
		width: calc((100% - (2 * 0.7vw)) / 2);
	}
}

@media all and (max-width: 450px) {
/*	[class*="columns-2"] .column {*/
	.columns-2 .column {
		width: 100%;
		margin-right: 0 !important;
	}
	.columns-5 {
		width: calc(100% + 0.9vw);
		overflow: hidden;
	}
	.columns-5 .column {
		width: calc((100% - (2 * 0.9vw)) / 2);
	}
}
.columns-3 .column  {
	width: calc((100% - 2 * var(--col-gap)) / 3);
}
@media all and (max-width: 640px) {
	.columns-3 .column  {
		width: 100%;
	}
}
@media all and (min-width: 765px) and (max-width: 870px) {
	.columns-3 .column  {
		width: calc(50% - var(--col-gap));
	}
}
@media all and (min-width: 633px) {
	.columns-2-33-67 .column:nth-child(2n+1) {
/*	, .columns-2-33-67 > p:first-of-type {*/
		width: calc(33% - (var(--col-gap) / 2));
	}
	.columns-2-33-67 .column:nth-child(2n+2) {
		width: calc(67% - (var(--col-gap) / 2));
	}
}
@media all and (max-width: 632px) {
	.columns-2-33-67 .column  {
		width: 100%;
		margin-top: 15px!important;
	}
}
.column h2:first-child, .column h3:first-child, .columns-3 + .columns-3 {
    margin-top: 0;
}
/*.spalten-2, .spalten-3 {*/
[class*="columns-2"], .columns-3, .columns-5 {
	margin-top: 15px;
}
/*hr + .spalten-2, hr + .spalten-3 {*/
hr + [class*="columns-2"], hr + .columns-3, hr + .columns-5 {
	margin-top: 0;
}
.item-page > div:nth-of-type(1) > .columns-2-33-67:nth-of-type(1), .item-page > div:nth-of-type(1) > .columns-2-33-67:nth-of-type(1) .column:not(img) {
	margin-top: 0!important;
}




/*------------------------------*/
/*--------- JEM Events ---------*/
/*------------------------------*/


#jemmodulebasic .event-title:nth-of-type(1), #jemmodulebasic .far, #jemmodulebasic br {
	display: none;
}
#jemmodulebasic ul, #jemmodulebasic ul li {
  margin-left: 0!important;
}
#jemmodulebasic ul {
	margin-top: -20px; /* Korrektur Leerzeile */
}
.jemmodulebasic.event {
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: 0.16px;
}



/*-----------------------------*/
/*--------- Login ---------*/
/*-----------------------------*/
.form-horizontal .control-label, #login-form label {
    text-align: left;
	width: 200px;
}
.form-horizontal .controls {
    margin-left: 220px;
}
input {
    border-radius: 0;
}
.login .btn, .logout .btn, .login-button, .logout-button .btn,
.com-users-reset__submit .btn, .com-users-remind__submit .btn {
	width: 171px;
	padding: 13px 0;
	font: normal normal normal 15px/22px var(--body-font),sans-serif;
	letter-spacing: 0.75px;
	color: #fff;
	text-transform: uppercase;
    text-shadow: none;
	background-color: rgb(140, 31, 102);
	border: 1px solid #707070;
	border: 1px solid #707070;
    background-image: none!important;
    border-radius: 0;
    box-shadow: none;
}
.btn.input-password-toggle {
	background-color: #FFF;
	border: 1px solid #B8B8B8;
	color: #8C1F66;
	padding: 13px;
	text-transform: none;
	float: right;
}
.input-password-toggle .icon-eye, .input-password-toggle .icon-eye-slash {
	display: none;
}
.login .list-group, #user-registration legend {
	font: normal normal normal 16px/28px var(--body-font),sans-serif; 
}
#login-form .logout-button {
	text-align: right;
}
#login-form #form-login-submit {
	margin: 20px 0;
}
#login-form #form-login-remember {
	margin-top: 20px;
}
#login-form li {
	line-height: 30px;
}
.login label, .login select, .login textarea, .login input[type="text"], .login input[type="password"], .login .uneditable-input, #user-registration input, #user-registration label,
#login-form label, #login-form select, #login-form textarea, #login-form input[type="text"], #login-form input[type="password"], #login-form .uneditable-input {
    color: #707070;
}
#login-form textarea, #login-form input[type="text"], #login-form input[type="password"] {
	width: 220px;
}
	.login .control-label, #login-form .control-label {
		margin-right: 15px;
	}
.login input[type="checkbox"], #login-form input[type="checkbox"] {
    width: 27px;
	height: 27px;
	border-radius: 0!important;
	margin-right: 10px;
}
.plg_system_webauthn_login_button {
	display: none;
}
.com-users-login__remember > div > * {
	display: inline-block;
}
/*@media all and (min-width: 768px) {
	.login input[type="checkbox"] {
		margin-top: -5px;
	}
}
@media all and (max-width: 767px) {
	.login .control-label, .login input, .login textarea, .login .uneditable-input {
		float: left;
	}
	.form-horizontal .controls {
		margin-left: 0;
	}
}
@media all and (max-width: 480px) {
	.login .control-label, .login input, .login textarea, .login .uneditable-input {
		width: calc(100% - 20px);
	}
}*/
.nav-tabs.nav-stacked > li > a {
    border: none;
	font-size: 24px;
}


/*---------------- Formate für Editor --------------------*/
/*-----------------------------*/
/*--------- Linien ---------*/
/*-----------------------------*/
.line-grey, hr {
    clear: both;
 	display: block;
    padding: 0;
	margin: 25px 0 25px;
    width: 100%;
	border: none;
	height: 2px;
	background-image: repeating-linear-gradient(88deg, var(--color-dark-grey), var(--color-dark-grey) 3px, transparent 3px, transparent 6px, var(--color-dark-grey) 6px);
	background-size: 100% 2px;
	background-position: 0 0;
	background-repeat: no-repeat;
}


/*-----------------------------*/
/*--------- Schriften ---------*/
/*-----------------------------*/
/*.item-page */
p {
/*	letter-spacing: 0.16px;
	color: #454545;
	position: relative;*/
}
/*.item-page > div > p:first-child > img {
	margin-bottom: 20px;
}*/
h1 {
	font: normal normal 500 24px/27px var(--body-font)!important;
	letter-spacing: 0.35px; /*0.48px;*/
	color: var(--h1-color);
	margin: 0 0 20px;
}
h2 {
	font: normal normal 500 21px/23px  var(--body-font)!important;
	letter-spacing: 0.15px; /*0.42px;*/
	color: var(--h2-color);
	margin-top: 20px;
}
h3 {
    font-family:  var(--body-font);
    font-weight: 500;
    font-style: normal;
	font-size: 18px;
	line-height: 27px;
	letter-spacing: 0.36px;
    color: var(--h3-color);
	margin-top: 15px;
}

.claim {
    font-family:  var(--body-font);
    font-style: normal;
	font-size: 21px;
	line-height: 25px;
	letter-spacing: 0.1px;
    color: #454545;
}
.text {
    font-family:  var(--body-font);
    font-weight: 400;
    font-style: normal;
	font-size: 16px;
	line-height: 21px;
	letter-spacing: 0.16px;
	color: #454545;
}

.text-pink {
    color: #D94179;
}
.text-violett, .text-violet {
    color: #8C1F66;
}
.text-blau, .text-blue {
    color: #006699;
}
.text-weiss {
	color: #fff;
}
.com-content-article ul {
  /*overflow: inherit;*/
  overflow: visible;
}
main li {
	margin-bottom: 5px;
}
li::marker {
  color: var(--color-purple);
}
.bild-legende, .image-caption {
    font-family:  var(--body-font);
    font-weight: 400;
    font-style: italic;
	color: #707070;
}
ul:not(.nav):not(.lang-block):not([class^="bg-fullwidth"]), ol {
    padding: 0;
    margin: 0 0 9px 18px;
}
#content p:not(.button):not(.button-grey) a  {
    color: #8C1F66!important;
	text-decoration: underline;
	text-underline-position: under;
}
/*#content p:not(.button) a, */
#aside > div:not(.box-violet) p:not(.button):not(.button-grey) a  {
    color: #8C1F66!important;
}


/*-----------------------------------------*/
/*--------- Boxen und Backgrounds ---------*/
/*-----------------------------------------*/
.box-grau, .box-grey {
	background-color: var(--color-light-grey);
}
.box-dunkelgrau {
	background-color: var(--color-dark-grey);
}
.box-violett, .box-violet {
 	background-color: var(--color-purple);
}
.box-pink {
 	background-color: var(--color-magenta);
 }
.box-lila {
 	background-color: var(--color-lila); /*#D0AAD0;*/
}
.box-blau, .box-blue {
	background-color: #006699;
	border: 1px solid #707070;
}
.box-schwarz, .box-black {
 	background-color: var(--body-color);
 }
.box-weiss, .box-white {
 	background-color: #fff;
}
.box-violett, .box-violett  > *, .box-pink, .box-pink  > *, .box-dunkelgrau, .box-dunkelgrau  > *,.box-blau, .box-blau  > *, .box-schwarz, .box-schwarz  > *,
.box-violet, .box-violet  > *, .box-pink, .box-pink  > *, .box-blue, .box-blue  > *, .box-black, .box-black  > *,
.box-violett .mod-custom *, .box-violet .mod-custom * {
    color: #fff!important;
}
.box-weiterlesen { 
	position: relative;
	display: flex;
	flex-direction: column;
}
.box-weiterlesen a, a.box-weiterlesen {
	text-decoration: none;
	color: inherit;
	padding-bottom: 65px;
}
.box-weiterlesen p a {
	/*display: block;  /* link space between lines */
}
.box-weiterlesen p:last-of-type {  /*last p in the box is empty */
/*	margin-top: auto!important;
	margin-bottom: 10px!important;*/
}
.box-weiterlesen p:last-of-type a {
/*	position: relative;
	width: 100%;
	height: 50px;
	z-index: 20;*/
}
.box-weiterlesen p:last-of-type::after {
	content: "";
	position: absolute;
	bottom: 20px;
	right: 20px;
	background-image: url("../images/button-arrow-right-purple.svg");
	background-size: 50px 50px;
	background-repeat: no-repeat;
	width: 50px;
	height: 50px;
}
[class*="box-"] {
	padding: 20px;
	border: 1px solid var(--color-medium-grey);
	box-shadow: 4px 3px 6px var(--color-box-shadow);
	margin-bottom: 6px;
}
[class^="bg-fullwidth"] {
  /* ??? je nach Fenstergrösse andere margins */
	width: 105vw;	
	margin-left: -8vw;
	/*padding-left: 9vw !important;*/
	margin-right: -9vw;
	padding-right: 5vw;
	padding-top: 20px;
	padding-bottom: 20px;
}
.bg-fullwidth-lila, .col-lila {
	background-color: var(--color-lila);
}
.bg-fullwidth-grey, .col-grey {
	background-color: var(--color-light-grey);
}
@media all and (min-width: 1051px) {
	[class^="bg-fullwidth"] { 
		padding-left: 9vw;
	}
}
@media all and (min-width: 821px) and (max-width: 1050px) {
	[class^="bg-fullwidth"] { 
		padding-left: 9.5vw;
	}
}
@media all and (min-width: 621px) and (max-width: 820px) {
	[class^="bg-fullwidth"] { 
		padding-left: 10vw;
	}
}
@media all and (min-width: 621px) and (max-width: 620px) {
	[class^="bg-fullwidth"] { 
		padding-left: 10.5vw;
	}
}
.col-lila {
/* 	background-color: var(--color-lila);*/
}
.col-lila .column img, .col-grey .column img {
	margin-top: calc(var(--column-margin-top) * -1);
	margin-bottom: calc(var(--paragraph-margin-bottom) * -1);
	width: calc(100% + var(--column-padding-left-right));
}
[class*="columns-2"].col-lila .column:nth-child(2n+2) img,
[class*="columns-2"].col-grey .column:nth-child(2n+2) img {
	margin-right: calc(var(--column-padding-left-right) * -1);
	display: block;
	margin-left: auto;
}
[class*="columns-2"].col-lila .column:nth-child(2n+1) img,
[class*="columns-2"].col-grey .column:nth-child(2n+1) img {
	margin-left: calc(var(--column-padding-left-right) * -1);
}
/*.col-lila .column > *:not(img), .col-grey > *:not(img) {
	padding-right: 20px;
}*/

[class*="columns-2"].col-lila .column:nth-child(2n+2), 
[class*="columns-2"].col-grey .column:nth-child(2n+2) {
	padding-right: var(--column-padding-left-right);
}
[class*="columns-2"].col-lila .column:nth-child(2n+1),
[class*="columns-2"].col-grey .column:nth-child(2n+1) {
	padding-left: var(--column-padding-left-right);
}


/* VON HIER WEG überprüfen */
#aside .box-grau .page-header, #aside .box-violett .page-header,
#aside .box-grey .page-header, #aside .box-violet .page-header,
#aside .box-grau h3, #aside .box-violett h3,
#aside .box-grey h3, #aside .box-violet h3 {
	font-size: 11px;
	line-height: 11px;
	text-transform: uppercase;
}
/* Box mit Icons */

.icon {
	width: 40px!important;
	height: 40px;
	margin: -10px 0 30px -15px;
}
.columns-5 .icon {
	position: absolute!important;
	top: 7px;
	left: 7px;
	margin: 0!important;
}
.columns-5 .box-lila  p {
	margin: 40px 0 0 0!important;
	max-width: 100%;
	text-align: center;
}
@media all and (min-width: 1024px) {
	.columns-5 .box-lila  {
		min-height: 190px;
	}
	.columns-5 .box-lila  p {
		font-size: 14px;
		line-height: 20px!important;
		letter-spacing: 0.16px;
	}
}
@media all and (min-width: 921px) and (max-width: 1023px) {
	.columns-5 .box-lila  {
		min-height: 200px;
	}
	.columns-5 .box-lila  p {
		font-size: 14px;
		line-height: 20px!important;
		letter-spacing: 0.16px;
	}
}
@media all and (min-width: 451px) and (max-width: 921px) {
	.columns-5 .box-lila  {
		min-height: 130px;
	}
	.columns-5 .box-lila  p {
		font-size: 14px;
		line-height: 20px!important;
		letter-spacing: 0.16px;
	}
}
@media all and (max-width: 450px) {
	.columns-5 .box-lila  {
		min-height: 150px;
	}
	.columns-5 .box-lila  p {
		font-size: 14px;
		line-height: 20px!important;
		letter-spacing: 0.16px;
	}
}
/* Silbentrennung für Mobile und Tablet */
@media all and (max-width: 920px) {
	.hyphen  {
		display: none;
	}
}
@media all and (min-width: 1200px) {
	.hyphen  {
		display: none;
	}
}