* { padding: 0; margin: 0; border: 0; }

body { font-family: "Roboto", sans-serif; font-size: 14px; line-height: 2; font-weight: 400; font-style: normal; 
	color: #284057; background-color: #F6F7FB; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
@media screen and (min-width: 768px) {
	font-size: 16px;
}

/*
body .video, body .iframe { position: relative; height: 0; padding-bottom: 56.25%; }
.video iframe, .iframe iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
*/

/* Video, iFrame, Object */
.embed-responsive { position: relative; display: block; height: 0; padding: 0; overflow: hidden; }
.embed-responsive-4by3 { padding-bottom:75% }
.embed-responsive-16by9 { padding-bottom: 56.25%; }
.embed-responsive .embed-responsive-item, .embed-responsive iframe, .embed-responsive embed, .embed-responsive object, .embed-responsive video { position: absolute; top: 0; left: 0; bottom: 0; height: 100%; width: 100%; border: 0; }
*::-webkit-media-controls-panel {
  display: none!important;
  -webkit-appearance: none;
}
*::--webkit-media-controls-play-button { 
  display: none!important;
  -webkit-appearance: none;
}
*::-webkit-media-controls-start-playback-button { 
  display: none!important;
  -webkit-appearance: none;
}

img, embed, object, video { max-width: 100%; height: auto; } 
img { -ms-interpolation-mode: bicubic; }

h1, h2, h3, h4, h5, h6 { margin-bottom: 0; text-rendering: optimizeLegibility; }
h1, h2, h3, h6 { font-family: "Roboto Condensed", sans-serif; }
h1, h2, h3, h4, h5 { color: #284057; }
h6 { color: rgba(40, 64, 87, 0.5); }
h1 { font-size: 68px; line-height: 74px; padding-bottom: 30px; }
h2, .contentmarginalie h1 { font-size: 32px; line-height: 36px; padding-bottom: 30px; }
h3 { font-size: 20px; line-height: 24px; letter-spacing: 0.2px; padding-bottom: 20px; }
h4 { font-size: 16px; line-height: 16px; padding-bottom: 20px; }
h5, h6 { font-size: 14px; line-height: 28px; text-transform: uppercase; padding-bottom: 20px; }
@media screen and (min-width: 992px) { 
	h1, h2, h3, h4, h5, h6 { font-style: normal; }
	h2, .contentmarginalie h1 { font-size: 28px; line-height: 32px; }
}

i, em { font-style: italic; }
dl, ol, ul, p { margin-bottom: 0; }
.Blocksatz p { text-align: justify; }
.Blocksatz p img.Bild100Prozent, .Blocksatz p.Bild100Prozent img { width: 100%; height: auto; } /* Bildbreite innerhalb eines p-Tags im Fließtext */
.Blocksatz p img.Bild50Prozent, .Blocksatz p.Bild50Prozent img { width: 50%; height: auto; } /* Bildbreite innerhalb eines p-Tags im Fließtext */
@media screen and (max-width: 576.98px) { 
	.Blocksatz p.text-lead { text-align: left; }
}
strong, b { font-weight: 800; }

a { outline: 0; line-height: inherit; cursor: pointer; color: #f59c00;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.Link-Icon-Download a, a.Link-Icon-Download, 
.Link-Icon-PDF a, a.Link-Icon-PDF,
.Link-Icon-Termin a, a.Link-Icon-Termin,
.Link-Icon-Seite a, a.Link-Icon-Seite,
a.csv {
	display: inline-block;
}
.Link-Icon-Download a, a.Link-Icon-Download, 
.Link-Icon-PDF a, a.Link-Icon-PDF,
.Link-Icon-Termin a, a.Link-Icon-Termin,
.Link-Icon-Seite a, a.Link-Icon-Seite,
a.csv, a.edit, a.delete,
.marginalie ul li a, .Blocksatz ul li a, .m_p ul li a { 
	color: #284057; 
}
a:hover { text-decoration: underline; color: #f86b00; }
.Link-Icon-Download a:hover, a.Link-Icon-Download:hover, 
.Link-Icon-PDF a:hover, a.Link-Icon-PDF:hover,
.Link-Icon-Termin a:hover, a.Link-Icon-Termin:hover,
.Link-Icon-Seite a:hover, a.Link-Icon-Seite:hover,
a.csv:hover, a.edit:hover, a.delete:hover, 
.marginalie ul li a:hover, .Blocksatz ul li a:hover, .m_p ul li a:hover { 
	color: #f86b00; 
}
a:hover, a:active, a:focus { outline: none; }
a.externer-Link { position: relative; color: #284057; }
a.externer-Link:after { content: ''; display: inline-block; margin-left: 3px; background: transparent url('/images/layout/ext-link-orange.svg') center center no-repeat; width: 13.28px; height: 13.28px; background-size: 13.28px 13.28px; }

/* abbreviations (Glossary module) */
aside abbr, blockquote abbr, button abbr,
h1 abbr, h2 abbr, h3 abbr, h4 abbr, h5 abbr, h6 abbr,
#sidebar abbr, #footer abbr,
.BtnLink-orange abbr, .Versalien abbr {
	text-decoration: none !important;
}

/* Zitat */
blockquote { border-left: 4px solid #F59C00; padding-left: 35px; margin: 0 0 10px 0; }
blockquote p { font-size: 26px; line-height: 44px; font-style: italic; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: alpha(opacity=65);
opacity: 0.65; 
}
blockquote p::before { content: '\201E'; }
blockquote p::after { content: '\201C'; }
@media screen and (min-width: 768px) { 
	blockquote p { font-size: 32px; line-height: 56px; }
}
blockquote footer, blockquote cite { font-size: 17px; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: alpha(opacity=65);
opacity: 0.65; 
}
blockquote cite { font-style: normal; }
blockquote.kompakt p, blockquote.kompakt footer, blockquote.kompakt cite { font-size: 14px; line-height: 28px; }


.posrelative { position: relative; }
.imgonly { line-height: 0; font-size: 0; }
.text-right { text-align: right; }
.text-lead { font-size: 18px; }
.text-lead a.externer-Link:after { width: 16px; height: 16px; background-size: 16px; }
.text-small { font-size: 14px; }
h3 .text-small { font-weight: normal; } /* small bei Headlines ... wird verwendet bei Webinare-Seite */
.bgcoverimg { width: 100%; height: 100%; display: block; background-position: center top; background-repeat: no-repeat; background-size: cover; }
.roundborder {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; 
}
.nobold { font-weight: normal; }
.Versalien { text-transform: uppercase; }
.Schrift-Orange { color: #F68C00 !important; }

/* weiß */
.bg0 { background-color: #ffffff; }
.Hintergrund-Weiss { background-color: #ffffff !important; }

/* orange */
.bg1, .BtnLink-orange, .BtnLink-Icon-Download, .BtnLink-Arrow { background-color: #F68C00; }
.border1, .BtnLink-orange, .BtnLink-Icon-Download { border: 1.5px solid #F68C00; }
.bg1, .bg1 h1, .bg1 h2, .bg1 h3, .bg1 h4, .bg1 h5, .bg1 h6, .bg1 blockquote p,
.BtnLink-orange, .BtnLink-Icon-Download, .BtnLink-Arrow {
	color: #ffffff;
}
.bg1 a { color: #284057; }
.bg1 a.externer-Link:after { background-image: url('/images/layout/ext-link-dunkelblau.svg'); }
.bg1 blockquote { border-left-color: #ffffff; }
.bg1 blockquote p, .bg1 blockquote footer, .bg1 blockquote cite {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1; 
}

/* hellblau */
.border2 { border: 1.5px solid #CED4D9; }

/* dunkelblau */
.bg2, .BtnLink-blue { background-color: #284057; } 
.bg2, .bg2 h1, .bg2 h2, .bg2 h3, .bg2 h4, .bg2 h5, .bg2 h6, .bg2 blockquote, .BtnLink-blue { color: #ffffff; }
.bg2 a { color: #F68C00; }
.bg2 a.externer-Link:after { background-image: url('/images/layout/ext-link-orange.svg'); }
.bg2 blockquote p, .bg2 blockquote footer, .bg2 blockquote cite {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1; 
}

/* Link im Button-Stil */
.BtnLink-orange, .BtnLink-blue, .BtnLink-Icon-Download, .BtnLink-Arrow { display: inline-block; width: auto; padding: 0 20px; text-align: center; font-size: 14px; 
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}

.BtnLink-orange { height: 36px; line-height: 36px; font-weight: bold; }
.BtnLink-Arrow { width: 100%; min-height: 45px; line-height: 45px; font-weight: bold; }
.BtnLink-Icon-Download { height: 45px; line-height: 40px; }
.BtnLink-blue { height: 45px; line-height: 45px; }

.BtnLink-orange:hover, .BtnLink-Icon-Download:hover, .BtnLink-Arrow:hover { background-color: #F86B00; border-color: #F86B00; color: #ffffff; /*background-color: #ffffff; border-color: #F1F2F3; color: #C7CACC;*/ text-decoration: none; }
.BtnLink-blue:hover { background-color: #000000; color: #ffffff; text-decoration: none; }

.btnarrow::before, #headerimg .lizenzheader .BtnLink-orange::before, .BtnLink-Icon-Download::before, .BtnLink-Arrow::before,
form button::before, .pagenavi a.next::after, a.paginate_button.next::after, .pagenavi a.prev::before, a.paginate_button.previous::before,
#newsteaser .BtnLink-orange::before, .BtnLink-blue::before {
	display: inline-block;
	-webkit-transition: transform 0.3s ease-out;
	-moz-transition: transform 0.3s ease-out;
	transition: transform 0.3s ease-out;
}
.btnarrow::before, #headerimg .lizenzheader .BtnLink-orange::before,
form button::before, .pagenavi a.next::after, a.paginate_button.next::after,
#newsteaser .BtnLink-orange::before, .BtnLink-blue::before {
	content: "\0279E"; /*  war: 1F82A -> funktioniert nicht in iOS; 0279E würde funktionieren, arrow right unicode */
/*	content: ''; 
	display: inline-block; 
	background: transparent url('/images/layout/pfeil-links.svg') center center no-repeat; 
	width: 14px; 
	height: 7px; 
	background-size: 14px 7px;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg); */
}
.pagenavi.prev::before, a.paginate_button.previous::before {
	content: "\0279E";  /* war: 1F828 -> funktioniert nicht in iOS; arrow left unicode */
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg); 
}
.btnarrow::before, #headerimg .lizenzheader .BtnLink-orange::before, .BtnLink-Icon-Download::before, .BtnLink-Arrow::before,
form button::before, a.paginate_button.previous::before, 
#newsteaser .BtnLink-orange::before, .BtnLink-blue::before {
	padding-right: 8px;
}
.pagenavi a.prev::before, 
.pagenavi a.next::after, a.paginate_button.next::after {
	padding-left: 8px;
}

/* .pagenavi a.next:hover::after,  -- bei tabellen-pagination ist pfeil bewegen nicht so gut */
.btnarrow:hover::before, #headerimg .lizenzheader .BtnLink-orange:hover::before, .BtnLink-Arrow:hover::before, 
.BtnLink-Icon-Download::before, form button:focus::before, form button:hover::before, 
#newsteaser .BtnLink-orange:hover::before, .BtnLink-blue:hover::before {
	-webkit-transform: translateX(4px);
	-moz-transform: translateX(4px);
	-o-transform: translateX(4px);
	transform: translateX(4px);
}
/* pfeil bewegen nix so gut bei der tabellen-pagination
.pagenavi a.prev:hover::before, a.paginate_button.previous::before {
	-webkit-transform: rotate(180deg) translateX(-4px);
	-moz-transform: rotate(180deg) translateX(-4px);
	-o-transform: rotate(180deg) translateX(-4px);
	transform: rotate(180deg) translateX(-4px);
}
*/

.BtnLink-Icon-Download::before {
	content: '';
	float: left;
	width: 36px;
	height: 45px;
	background: transparent url('../images/layout/icons/download-white.svg') 0 8px no-repeat padding-box;
}

/* Bild-Animation */
@media screen and (min-width: 768px) {
	.aniimg a img {
		-webkit-transition: all 0.5s ease;
		-moz-transition: all 0.5s ease;
		transition: all 0.5s ease;
	}
	.aniimg a:hover img {
		-o-transform: scale(1.1);
		-ms-transform: scale(1.1);
		-webkit-transform: perspective(1px) scale(1.1);
		transform: perspective(1px) scale(1.1);
	}
}

/* Auflistungen */
section ol, .marginalie ol { margin-left: 15px; }
section ol li, .marginalie ol li { padding-left: 9px; margin-bottom: 6px;  }
section ul, .marginalie ul { list-style: none; }
section ul li, .marginalie ul li { position: relative; line-height: 1.4; } /* "Kompakt" ist Standard */
section ul li { margin-bottom: 14px; padding-left: 24px; }
.marginalie ul li { margin-bottom: 21px; padding-left: 20px; }
section ul li::before, .marginalie ul li::before { content: ""; position: absolute; left: 0; width: 7px; height: 7px; background-color: #F68C00;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
section ul li::before { top: 4px; }
.marginalie ul li::before { top: 7px; }
section .bg1 ul li::before { background-color: #ffffff; }
section ul.UL-Bulletliste-Gross li, section ul.UL-Checkliste-Gross li { margin-bottom: 21px; padding-left: 27px; font-size: 18px; }
section ul.UL-Bulletliste-Gross li::before { top: 4px; width: 10px; height: 10px; }
section ul.UL-Checkliste li::before, section ul.UL-Checkliste-Gross li::before { left: 3px; top: 0; width: 7px; height: 10px; 
	border-style: solid; border-color: #F68C00; border-width: 0 3px 3px 0;
	background-color: transparent;
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}
section .bg1 ul.UL-Checkliste li::before, section .bg1 ul.UL-Checkliste-Gross li::before { border-color: #ffffff; }
section ul.UL-Checkliste-Gross li::before { width: 10px; height: 14px; }


/*
 *******************************
	Grundraster, Sidebar & Navigation, Footer
 *******************************
 */
#wrapper { margin-top: 80px; }
.desktopnav #wrapper { margin-top: 0; 
	display: -webkit-box;
    display: -ms-flexbox; 
	display: flex; 
}

#sidebar { display: none; }
#sidebar ul { list-style: none; }
.desktopnav #sidebar, .mobilenavactive #sidebar {
	position: fixed; top: 0; left: 0; width: 100%; /*vw*/ /*max-width: 320px;*/ height: 100vh; z-index: 999; 
	display: -webkit-box;
    display: -ms-flexbox; 
	display: flex;
	/* flex-shrink: 0; flex-basis: 320px;*/
	background-color: #ffffff; 
}
#sidebar #mainnavcontainer { width: 100%; flex-direction: column; height: 100vh; 
	display: -webkit-box;
    display: -ms-flexbox; 
	display: flex;
}
@media screen and (min-width: 577px) { /* sm */
	#sidebar { 
		max-width: 320px; 
		-webkit-transition: transform 0.15s ease-in-out;
		-moz-transition: transform 0.15s ease-in-out;
		transition: transform 0.15s ease-in-out;
		
		-webkit-transform: translateX(-320px);
		-ms-transform: translateX(-320px);
		transform: translateX(-320px);
	}
	#sidebar #mainnavcontainer { /*flex-basis: 320px;*/ min-width: 320px; max-width: 320px; 
		box-shadow: 0px 3px 35px rgba(0,0,0,0.08);
	-webkit-box-shadow: 0px 3px 35px rgba(0,0,0,0.08); 
	}
}

.desktopnav .subnavactive #sidebar { /* wenn wir eine aktive subnavigation haben... nur sichtbar bei desktop-view */
	/*flex-basis: 580px;*/ 
	max-width: 580px; 
    -webkit-transform: translateX(-580px);
    -ms-transform: translateX(-580px);
    transform: translateX(-580px);
}

.desktopnav #sidebar, .desktopnav .subnavactive #sidebar, .mobilenavactive #sidebar { 
	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}

#sidebar .header { display: none; } /* wir haben einen eigenen header bei mobil */
.desktopnav #sidebar .header { display: block; padding: 34px 0 48px 34px; } 

#sidebar .mainnav { flex-grow: 1; /*padding-left: 10px; padding-right: 10px;*/ overflow-y: auto; /*flex-shrink: 1;*/ }
/*@media screen and (min-width: 577px) {
	#sidebar .mainnav { padding-left: 15px; padding-right: 0; }
}*/
.desktopnav #sidebar .mainnav { margin-bottom: 10px; height: 100%; /* height-wert drin lassen, obwohl er an dieser Stelle keinen Sinn ergibt - wird benötigt für Scrollbar */ }
/* .mobilenav #sidebar .mainnav { margin-top: 100px; } ... deprecated; wegen search-box nicht mehr so viel Abstand nach oben */
.mobilenav #sidebar #search-box,
#app-service .mobilenav #sidebar .mainnav {
	margin-top: 80px;
}
.mobilenav #sidebar .mainnav .mainnav { margin-top: 0; } /*emulator-thematik... scrollbar-inner weil no-touch klasse drin ist... durch wrapper des scrollbars ist mainnav doppelt */
#sidebar .footer { height: 130px; padding-left: 10px; padding-right: 10px;
	/*
	display: -webkit-box;
    display: -ms-flexbox; 
	display: flex;
	*/
}

@media screen and (min-width: 577px) {
	#sidebar .footer { padding-left: 15px; padding-right: 15px; }
}
.desktopnav #sidebar .footer { padding-left: 35px; padding-right: 25px; }

.desktopnav #content { 
	width: 100%;
	padding-left: 320px;
	margin-left: -320px;
	/*width: 100%; width: calc(100% - 320px);*/
	/*position: absolute; top: 0; right: 0;*/
	/* min-height: 100vh; transition: all 0.3s;*/  
}
.desktopnav .subnavactive #content { padding-left: 580px; margin-left: -580px;}
.desktopnav #content, .desktopnav .subnavactive #content { 
	margin-left: 0;
	-webkit-transition: transform 0.15s ease-in-out;
	-moz-transition: transform 0.15s ease-in-out;
	transition: transform 0.15s ease-in-out; 
}

.desktopnav #content.content-only {
	padding-left: 0;
}

#subnavcontainer { display: none; }
.desktopnav #subnavcontainer { 
	font-size: 14px; 
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex;
	flex-direction: row; height: 100vh; width: 100%; max-width: 260px; 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
	filter: alpha(opacity=0);
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in-out;
	-moz-transition: opacity 0.2s ease-in-out;
	transition: opacity 0.2s ease-in-out;

	/*-webkit-transition: transform 0.2s ease-in-out;
	-moz-transition: transform 0.2s ease-in-out;
	transition: transform 0.2s ease-in-out;
	*/

	-webkit-transform: translateX(-580px);
	-ms-transform: translateX(-580px);
	transform: translateX(-580px);
}
.desktopnav .subnavactive #subnavcontainer {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;

	-webkit-transform: translateX(0);
	-ms-transform: translateX(0);
	transform: translateX(0);
}


/* START nur mobile */
.mobilenav .marginalie button { max-width: 100%; }
.mobilenav .marginalie #LogoutForm { max-width: 100%; }
#mobileheader { position: fixed; top: 0; left: 0; width: 100%;/* nicht vw wegen scrollbalken bei schmalen desktop-screens */ margin: 0;
	height: 80px;
    background-color: #F6F7FB; 
    z-index: 998;
} 
.desktopnav #mobileheader { display: none; }
.mobilenavactive #mobileheader { background-color: transparent; z-index: 1000; }

#mobileheader .logo { padding-left: 10px; } /* --- kann ich rausnehmen? abstand wird vererbt?? */
#mobileheader .logo .active { display: none; }
.mobilenavactive #mobileheader .logo .active { display: block; }
.mobilenavactive #mobileheader .logo .normal { display: none; }
#mobileheader .navopener { padding-right: 10px; } /* --- kann ich rausnehmen? abstand wird vererbt?? */

#openmenu { display: inline-block; position: relative; width: 36px; height: 36px; cursor: pointer; }
#openmenu span { display: block; width: 36px; height: 3px; margin-top: 7px; background-color: #284057; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px; 

	-webkit-transition: transform .4s ease 0s;
	-moz-transition: transform .4s ease 0s;
	transition: transform .4s ease 0s;
}
@media screen and (min-width: 577px) { /* sm */
	.navopener.active #openmenu { background-color: #F6F7FB; 
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	border-radius: 2px; }
}
.navopener.active #openmenu span {
	position: absolute; top: 0; left: 0; margin-top: 16px;
}
.navopener.active #openmenu span:first-child {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.navopener.active #openmenu span:nth-child(2) {
    display: none;
}
.navopener.active #openmenu span:last-child {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* ENDE nur mobile */

/* START nur desktop */
.closebtncontainer { position: absolute; right: 2px; top: 0; /*right: 12px; top: 14px;*/ } 
.closesubmenu { position: relative; width: 16px; height: 16px; /* width: 20px; height: 20px; */ cursor: pointer; } 
.closesubmenu span,
.search-clear.clearing span { position: absolute; top: 12px; left: 0px; 
	display: block;
    line-height: 0;
    font-size: 0;
    background-color: #284057; 
    /*-webkit-transition: transform .4s ease 0s;
    -moz-transition: transform .4s ease 0s;
    transition: transform .4s ease 0s;
	*/
}
.closesubmenu span {
	height: 1.5px;/*2px*/
	width: 10.5px; /*width: 100%; */
}
.search-clear.clearing span {
	height: 1.5px;
	width: 12.5px;
}

.search-clear.clearing:hover span,
.closesubmenu:hover span { background-color: rgba(40, 64, 87, 0.8); }
.search-clear.clearing span:first-child,
.closesubmenu span:first-child {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}
.search-clear.clearing span:last-child,
.closesubmenu span:last-child {
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/* ENDE nur desktop */

/*
@media screen and (min-width: 577px) {
	.mainnav ul { max-width: 243px; }
}
*/
#search-box {
	font-size: 14px; 
	background: #F6F7FB url('../images/layout/icons/search.svg') no-repeat 36px 50%;
	box-sizing: content-box;
	border-color: #ffffff;
	border-style: solid;
	border-width: 6px 0;
	padding-left: 58px;
	margin-bottom: 20px;
	max-height: 36px;
	position: relative;
	transition-duration: .3s;
}

/*
#search-box.searching,
#search-box:hover,
#search-box:focus,
#search-box:focus-within,
#search-box:focus-visible,
#search-box:target {
	background-image: url('../images/layout/icons/search-hover.svg');
	background-color: #738291;
	border-color: #738291;
}
*/

#search-box.searching,
#search-box:hover,
#search-box.active {
	background-image: url('../images/layout/icons/search-hover.svg');
	background-color: #738291;
	border-color: #738291;
}


#search-box .search-lens {
	cursor: pointer;
	display: inline-block;
	height: 20px;
	width: 20px;
	position: absolute;
	left: 36px;
	top: 8px;
}

#search-box input {
	background-color: transparent;
	border: 0;
	color: #ffffff;
	height: 36px;
	line-height: 36px;
	max-width: 80%;
}

#search-box :-ms-input-placeholder {
	color: #284057 !important;
}
#search-box ::-ms-input-placeholder {
	color: #284057 !important;
}
#search-box ::placeholder {
	color: #284057 !important;
}

#search-box.searching :-ms-input-placeholder {
	color: #ffffff !important;
}
#search-box.searching ::-ms-input-placeholder {
	color: #ffffff !important;
}
#search-box:hover ::placeholder,
#search-box:focus ::placeholder,
#search-box:focus-within ::placeholder,
#search-box:focus-visible ::placeholder,
#search-box:target ::placeholder,
#search-box.searching ::placeholder {
	color: #ffffff !important;
}

#search-box .search-clear {
	position: absolute;
	right: 6px;
	top: 6px;
	height: 20px;
	width: 20px;
}

#search-box .clearing {
	cursor: pointer;
}

.mainnav h6 { 
	font-weight: normal; font-size: 18px; line-height: 1; letter-spacing: 0.45px; text-transform: none; 
	padding-top: 25px; border-top: 2px solid rgba(40, 64, 87, 0.12); 
	margin-left: 10px;
}
.mainnav ul:first-child h6 { padding-top: 0; border-top: none; }
.mainnav a { padding-left: 10px; }
.mainnav a:hover { text-decoration: none; }
.desktopnav .mainnav h6 { margin-left: 35px; margin-right: 25px; }
.desktopnav .mainnav a { padding-left: 35px; }
.mainnav ul { list-style: none; padding-bottom: 30px; }
.mainnav ul ul { padding-bottom: 15px; }
.mainnav ul ul.subnav { padding-left: 35px; }
.mainnav ul ul.subnav li { padding-bottom: 5px; padding-top: 5px; line-height: 28px; }
.mainnav ul li:last-child { padding-bottom: 0; }
.mainnav ul ul ul { padding-bottom: 0; }

.mainnav li { position: relative; }
.mainnav a { display: block; width: auto; height: 32px; line-height: 32px; position: relative; font-size: 14px; font-weight: 700; }
.mainnav.active::before a:hover { background-color: transparent; }

.mainnav a.icon { padding-left: 35px; }
.mainnav a.icon::before { 
	position: absolute; left: 10px; top: 7px; color: #738291; font-size: 18px;
	font-family: 'icomoon' !important; /* use !important to prevent issues with browser extensions that change fonts */
	speak: never;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.mainnav a.icon:hover::before,
/* .mainnav li.subnavlink.active a.icon::before */
.mainnav li.active a.icon::before { 
	color: #F68C00; 
}

.mainnav .navAcademy:before { content: "\e900"; }
.mainnav .navCloud-und-Lizenzmanagement:before { content: "\e901"; }
.mainnav .navDokumentation:before { content: "\e902"; }
.mainnav .navHow-to-PP:before { content: "\e903"; }
.mainnav .navLoesungen-u-Produkte:before { content: "\e904"; }
.mainnav .navMarketing:before { content: "\e905"; }
.mainnav .navPartnerprogramm:before { content: "\e906"; }
.mainnav .navPartnervertraege:before { content: "\e907"; }
.mainnav .navPreise:before { content: "\e908"; }
.mainnav .navProjekte:before { content: "\e909"; }
.mainnav .navRechnungen:before { content: "\e90a"; }
.mainnav .navShop:before { content: "\e90b"; }
.mainnav .navSupport:before { content: "\e90c"; }
.mainnav .navUpdates-u-Downloads:before { content: "\e90d"; }
.mainnav .navVertrieb:before { content: "\e90e"; }
.mainnav .navVideo:before { content: "\e90f"; }
.mainnav .extLink:after { content: ''; position: absolute; right: 20px; top: 50%; margin-top: -8px; display: block; width: 15px; height: 15px; background-image: url('/images/layout/ext-link-grau.svg'); background-repeat: no-repeat; background-size: 100%; }

@media screen and (min-width: 992px) {
	.mainnav a:hover { background-color: #FFF9EC; }
	.mainnav ul ul { max-width: 220px; }
	.mainnav ul ul.subnav { padding-top: 5px; padding-left: 70px; }
	.mainnav ul ul.subnav li { padding-bottom: 3px; padding-top: 3px; }
}

.desktopnav .navfirstlevel.active::before { width: 20px; }
.desktopnav .mainnav a.icon { padding-left: 70px; }
.desktopnav .mainnav a.icon::before { left: 35px; }

.mainnav a { color: #284057; }
.mainnav li.active a { color: #F68C00; }
.mainnav li.active .subnav a { color: #284057; }
.mainnav li.active .subnav li.active a, .mainnav li.active .subnav li a:hover { color: #F68C00; }
.mainnav li.active .subnav li.active.hassubnav li a { color: #284057; }
.mainnav li.active .subnav li.active.hassubnav li.active a, .mainnav li.active .subnav li.active.hassubnav li a:hover { color: #F68C00; }

.mainnav .subnav a { display: inline-block; height: auto; line-height: 20px; padding-left: 0; }
.mainnav .subnav a:hover { background-color: transparent; /* color: #F68C00;*/ }
.mainnav .subnav li.active > a { color: #F68C00; position: relative; }
.mainnav li.subnavlink > a { display: block; /*width: 100%;--nicht machen! */ }
.mainnav li.subnavlink > a::after { content: ''; position: absolute; right: 20px; top: 50%; margin-top: -10px; display: block; width: 20px; height: 20px; background: transparent url('../images/layout/indicator.svg') center center no-repeat; 
	-webkit-transition: transform .4s ease 0s;
    -moz-transition: transform .4s ease 0s;
    transition: transform .4s ease 0s;
}
.mainnav li.subnavlink.active > a::after { 
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}


.subnavdiv { padding-top: 23px; padding-left: 20px; }
ul.subnav li a, ul.subnav li.hassubnav { display: inline-block; width: auto; position: relative; padding-left: 2px; font-weight: 700; color: #284057; }
/*
@media screen and (min-width: 1300px) {
	#sidebar ul li { display: block; padding-bottom: 5px; }
	#sidebar ul.subnav { padding-right: 25px; }
	.mainnav ul.subnav li a, .mainnav ul.subnav li.hassubnav { padding-left: 15px; line-height: 20px; }
	#sidebar ul ul { padding-top: 10px; }
	ul.subnav li ul li a { padding-left: 0;; }
}*/
@media screen and (min-width: 1300px) {
	.mainnav ul.subnav li a, .mainnav ul.subnav li.hassubnav { line-height: 20px; }
}
/* ul.subnav li a:hover { text-decoration: none; } */
ul.subnav li.hassubnav::before { 
		content: ''; display: inline-block; 
		margin-right: 10px; 
		margin-bottom: 1px;

		border-bottom: 4px solid transparent;
		border-left: 4px solid rgba(40,64,87,0.35);
		border-top: 4px solid transparent;

	-webkit-transition: transform .2s ease 0s;
    -moz-transition: transform .2s ease 0s;
    transition: transform .2s ease 0s;
}
ul.subnav li.hassubnav { cursor: pointer; width: 90%; }
ul.subnav li.hassubnav:hover::before, 
ul.subnav li.hassubnav.active::before {
	border-left: 4px solid #F68C00;
}
ul.subnav li.hassubnav.active::before,
ul.subnav li.hassubnav.tmpactive::before { 
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}
ul.subnav ul { padding-left: 15px; }
ul.subnav ul ul { padding-left: 0; }
ul.subnav li ul li a { font-weight: 400; }

.mainnav ul ul, /* navi 2. ebene */
ul.subnav ul /* navi 3. ebene */ { 
	display: none; 
}
.mainnav li.subnavlink.active > ul,
ul.subnav li.active > ul, ul.subnav li.tmpactive > ul { 
	display: block; 
}
/*.showsubnav .mainnav li.subnavlink.active ul {  wenn subnavigation rechts von sidebar angezeigt wird, dann links in sidebar nicht zeigen 
	display: none; 
} */


/* Meta-Navigation */
#metanavi { font-size: 14px; margin-top: 30px; text-align: right; }
#metanavi a { color: #284057; }
#metanavi a:not(:first-of-type) { margin-left: 11px; padding-left: 11px; border-left: 1px solid #C7CACC; }
#metanavi a.hpicon::before { content: '?'; display: inline-block; width: 20px; height: 20px; margin-right: 9px; background-color: rgba(40, 64, 87, 0.07);
	text-align: center; line-height: 1.6; font-size: 13px;

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
#metanavi a.hpicon:hover::before { background-color: #F68C00; color: #ffffff; text-decoration: none; }

/* Inhalte/Struktur - Abstände */
section .row p, section .row ul, section .row ol, .zitat, .highbox, section .imgonly { /* ########## weitere module hinzufuegen, wenn mit hintergrundfarbe bspw. #### */
	padding-bottom: 10px; 
}
section .row ul ul { padding-top: 10px; }

section { margin-bottom: 40px; } /* ergibt zusammen mit dem reihenabstand sowie padding-bottom von p (bzw. ul oder ol) von jeweils 10px -> 50px; */
section.mhalf { margin-bottom: 20px; } /* halber Abstand nach unten */
section.mdouble { margin-bottom: 80px; } /* doppelter Abstand nach unten */
section.mnone, section.mnone .row { margin-bottom: 0px; } /* kein Abstand nach unten */

.row { margin-left: 0; margin-right: 0; margin-bottom: 10px; } /* reihenabstand hat keinen zusätzlichen einfluss auf section */

.container, .container-fluid {
	margin-left: 0; margin-right: 0; /* content wuerde sich sonst mittig ausrichten */
	padding-left: 0; padding-right: 0; /* content hätte sonst einen Abstand nach außen auf jeder seite ... bild soll jedoch zum rand gehen */
}

@media screen and (max-width: 1199.98px) {
	.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-auto, 
	.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-auto, 
	.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-md-auto, 
	.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-auto, 
	.col-xl, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-auto {
		padding-left: 10px; padding-right: 10px;
	}
}
.nopadding { padding: 0; } /* seitliche Abstands-Korrektur bei Inhalten mit Marginalie */
.nomright { margin-right: 0; }

.contentbgimg { height: 100vh; } /* Seiten mit fullscreen Hintergrundbild */

/* Feedback - Button */
.btnfeedback a { display: block; width: 100%; height: 32px; line-height: 31px; text-align: center; font-size: 14px; border: 2px solid #F1F2F3;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px; 
}
.btnfeedback a { color: #C7CACC; }
.btnfeedback a:hover { background-color: #F86B00; border-color: #F86B00; color: #ffffff; text-decoration: none; }


/* nach oben knopf */
#btntop { position: fixed; bottom: 10px; right: 10px; cursor: pointer; width: 40px; height: 40px; display: none; z-index: 1021; }
#btntop_inner { width: 100%; height: 100%; background-color: #ffffff; 
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	align-items: center;
	justify-content: center;

	box-shadow: 0px 3px 15px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0px 3px 15px rgba(0,0,0,0.1);
}
#btntop span { display: inline-block; width: 10px; height: 10px; margin-top: 6px; border: solid rgba(40, 64, 87, 0.65); border-width: 0 2px 2px 0;
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg); 
}

/* Akkordion - "Aufklapp-Headlines" und andere Elemente */
dt { font-size: 20px; line-height: 24px; letter-spacing: 0.2px; border-top: 1px solid #C7CACC; }
dt, .unfold { padding: 10px 10px 10px 30px; cursor: pointer; position: relative; }
dl dt:first-child { border-top: none; }
dt::before, .unfold::before { content: '\25B6'; position: absolute; top: 10px; left: 10px; display: inline-block; width: auto; color: #f59c00; font-size: 10px; 
	-webkit-transition: transform 0.3s ease;
	-moz-transition: transform 0.3s ease;
	transition: transform 0.3s ease;
}
dt.active:before, .unfold.collapse::before {
	-webkit-transform: rotate(90deg); 
	-ms-transform: rotate(90deg); 
	transform: rotate(90deg); 
}
dd { margin-bottom: 0; }
dd, .m_p { display: none; padding: 10px 10px 0 30px; }

/*.float-right { float: right; font-size: 14px; font-weight: normal; letter-spacing: 0; } ... deprecated */


/* Links/Trigger mit Icons */
.Link-Icon-Download a, a.Link-Icon-Download,
.Link-Icon-PDF a, a.Link-Icon-PDF,
.Link-Icon-Termin a, a.Link-Icon-Termin,
.Link-Icon-Seite a, a.Link-Icon-Seite {
	padding-left: 30px;
}
p .Link-Icon-PDF a, p a.Link-Icon-PDF,
p .Link-Icon-Termin a, p a.Link-Icon-Termin {
	padding-left: 20px;
	margin-left: 5px;
}
a.csv, a.edit {
	padding-left: 30px;
}
.Link-Icon-Download a, a.Link-Icon-Download,
.Link-Icon-PDF a, a.Link-Icon-PDF,
.Link-Icon-Termin a, a.Link-Icon-Termin,
.Link-Icon-Seite a, a.Link-Icon-Seite,
a.csv, a.edit, a.delete {
	position: relative;
	/* white-space: nowrap; - darf nicht gemacht werden wegen Mobile-Darstellung... würde sonst eben auch bei langen Links nicht umbrechen ... */
}
a.delete { display: inline-block; width: 14.28px; height: 20px; }
.marginalie .Link-Icon-Download a, .marginalie a.Link-Icon-Download, 
.marginalie .Link-Icon-PDF a, .marginalie a.Link-Icon-PDF {
	display: inline-block;
	margin-bottom: 10px;
}
.Link-Icon-Download a::before, a.Link-Icon-Download::before, 
.Link-Icon-PDF a::before, a.Link-Icon-PDF::before,
.Link-Icon-Termin a::before, a.Link-Icon-Termin::before,
.Link-Icon-Seite a::before, a.Link-Icon-Seite::before,
a.csv::before, a.edit::before, a.delete::before { 
	content: ''; position: absolute; left: 0; display: block; background-position: center center; background-repeat: no-repeat; background-size: contain; 
}
a.delete::before {
	position: absolute; display: inline-block; width: auto;
}
.Link-Icon-Download a::before, a.Link-Icon-Download::before { top: 2px; width: 12px; height: 14px; }
.Link-Icon-PDF a::before, a.Link-Icon-PDF::before, 
.Link-Icon-Termin a::before, a.Link-Icon-Termin::before, 
.Link-Icon-Seite a::before, a.Link-Icon-Seite::before,
a.csv::before, a.edit::before { 
	top: 0; width: 20px; height: 20px; 
}
p .Link-Icon-PDF a::before, p a.Link-Icon-PDF::before {
	top: 6px; width: 15px; height: 16px; 
}

.marginalie p .Link-Icon-PDF a::before,
.marginalie p a.Link-Icon-PDF::before {
	top: 2px;
}

p .Link-Icon-Termin a::before, p a.Link-Icon-Termin::before {
	top: 5px; width: 15px; height: 15px; 
}
.Link-Icon-Download a::before, a.Link-Icon-Download::before { background-image: url('../images/layout/icons/download.svg'); }
.Link-Icon-PDF a::before, a.Link-Icon-PDF::before { background-image: url('../images/layout/icons/pdf.svg'); }
.Link-Icon-Termin a::before, a.Link-Icon-Termin::before { background-image: url('../images/layout/icons/termin.svg'); }
.Link-Icon-Seite a::before, a.Link-Icon-Seite::before { background-image: url('../images/layout/icons/seite.svg'); }
a.csv::before { background-image: url('../images/layout/icons/csv.svg'); }
a.edit::before { background-image: url('../images/layout/icons/edit.svg'); }
a.edit:hover::before { background-image: url('../images/layout/icons/edit-hover.svg'); }
a.delete::before { color: #f59c00; font-weight: bold; }
a.delete::before { content: '\2573'; top: 0; left: 0; }
a.delete:hover::before { color: inherit; }
.sf-plus::before { content: '+'; }
.sf-minus::before { content: '\0336'; }

/* Userinfo (Sprache, Avatar) */
#userinfo, #uprofile, #langnav { 
	display: -webkit-box;
	display: -ms-flexbox; 
	display: flex; 

	flex-flow: row nowrap;
	justify-content: center;
}
#userinfo { position: absolute; z-index: 2000; top: 9px; right: 15px; }

#langnav { height: 36px; overflow: hidden; font-size: 12px; line-height: 16px; 
	padding: 9px 28px 0 16px;
	position: relative; /*cursor: pointer; */
}
#langnav span { opacity: 0; }
#langnav::before { content: ''; position: absolute; right: 11px; top: 13px; width: 6px; height: 6px; 
	border: solid rgba(40, 64, 87, 0.35);
	border-width: 0 2px 2px 0;

	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);

	-webkit-transition: transform .3s ease 0s;
	-moz-transition: transform .3s ease 0s;
	transition: transform .3s ease 0s;
}
#langnav:hover { background-color: #ffffff; cursor: pointer; }
#langnav.active { height: auto; background-color: #ffffff; cursor: default; }
#langnav:hover span { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=100);
	opacity: 1;
}
#langnav.active span { 
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
	filter: alpha(opacity=35);
	opacity: 0.35;
}
#langnav.active::before { top: 15px;
	-webkit-transform: rotate(225deg);
	-ms-transform: rotate(225deg);
	transform: rotate(225deg);
}
#langnav, #langnav a { color: #284057; }
#langnav li { padding-bottom: 10px; }
#langnav a:hover { /*text-decoration: none;*/ }

#uprofile { font-size: 14px; line-height: 36px; width: auto; height: 36px; overflow: hidden; font-weight: bold; margin-left: 5px; }
#uprofile .uprofilelink { width: 0; flex-grow: 0; 
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
#uprofile .uprofilelink a { display: inline-block; width: 0; height: 0; overflow: hidden; color: #284057; padding-left: 30px;
	background: transparent url('/images/layout/zahnrad.svg') 9px center no-repeat; background-size: 15.84px 15.84px; 
}
#uprofile .uprofilelink a:hover { text-decoration: none; }
#uprofile:hover { border-radius: 5px 18px 18px 5px; background-color: #ffffff; }
#uprofile:hover .uprofilelink { width: auto; flex-grow: 1; margin-right: 9px; }
#uprofile:hover .uprofilelink a { width: auto; height: auto; }
#uprofile .uprofileimg { width: 36px; height: 36px; background-image: url('/images/layout/avatar.svg'); /*cursor: pointer; */
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%; 
}

/* Inhalt (also ohne Header und Footer) hat eine Maximalbreite */
#cwithm { max-width: 1760px; }

/* Marginalie */
.marginalie .blockinfo { margin-bottom: 30px; }
.marginalie .orangeTop { border-top: 1px solid #F68C00; padding-top: 24px; }
.marginalie h1, .marginalie h2, .marginalie h3, .marginalie h4, .marginalie h5, .marginalie h6 { padding-bottom: 15px; }
.marginalie p { line-height: 1.4; /*margin-bottom: .5rem; */ }
/*.marginalie a { color: inherit; } --- dann könnte man Links nicht als solche erkennen; achtung: wenn das hier wieder aktiviert, dann für .BtnLink-orange in der Marginalspalte ein color: #ffffff setzen */
.marginalie form { margin-bottom: 10px; }
.marginalie button { max-width: 220px; }
/*.marginalie .imgonly { padding-top: 15px; padding-bottom: 35px; }*/
.marginalie #LogoutForm { color: #ffffff; line-height: 1.4; padding: 15px 10px 10px 10px; text-align: center; font-size: 14px; 
	background-color: #F59C00;
	background: -moz-linear-gradient(270deg, #F59C00 0%, #F87000 55%, #F86B00 100%);
	background: -webkit-linear-gradient(270deg, #F59C00 0%, #F87000 55%, #F86B00 100%);
	background: linear-gradient(270deg, #F59C00 0%, #F87000 55%, #F86B00 100%);
}
.marginalie #LogoutForm form { margin-top: 16px; margin-bottom: 0; }
.marginalie #LogoutForm button { background-color: #ffffff; color: #284057; height: 36px; line-height: 36px; max-width: 100%; }
.marginalie button { text-transform: none; font-weight: 600; }

.marginalie .BtnLink-orange {
	height: 45px;
	line-height: 45px;
	margin-bottom: 10px;
	max-width: 220px;
	width: 100%;
}

/* Footer */
#footer { padding-top: 20px; }
#footer .row { margin-bottom: 0; }
#footer ul, #langnav ul { list-style: none; }
#footer li { padding-bottom: 22px; font-size: 14px; line-height: 19px; }
#footer .text-bigger { font-size: 20px; line-height: 37px; padding-bottom: 19px; padding-top: 20px; }
#footer a { color: rgba(255, 255, 255, 0.65); }
#footer a.sfhomelink { color: #F59C00; }
#footer a:hover { text-decoration: none; }
#footer a:hover, #footer li.active a, #footer li.activeflag a { color: rgba(255, 255, 255, 1); }
/*#footer .col-12 { padding-bottom: 40px; }*/
#footer .metanav { padding-bottom: 30px; }
#footer .metanav ul { padding-top: 30px; margin-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.15); }
/*#footer .metanav a:hover, #footer .metanav li.active a { color: #F59C00; }*/
@media (max-width: 767.98px) {
	#footer { padding-bottom: 60px; }
}
@media (min-width: 768px) {
	#footer .metanav ul { display: grid; grid-column-gap: 43px; grid-row-gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
	#footer .metanav li { padding-bottom: 0; }
}
@media (min-width: 1200px) {
	#footer .metanav ul { text-align: right; grid-column-gap: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
	#footer .metanav ul li:first-child { text-align: left; }
}
@media (min-width: 1400px) {
	#footer .metanav ul { text-align: center; grid-column-gap: 43px; }
	#footer .metanav ul li:first-child { text-align: center; }
}

/* Sprachnavi - Userinfo, Footer */
#footer li.flag, #langnav li.flag { background-repeat: no-repeat; }
#footer li.flag { background-position: left top; padding-left: 35px; padding-bottom: 13px; }
#langnav li.flag { background-position: right top; padding-right: 30px; padding-bottom: 11px; }
#footer li.flagde, #langnav li.flagde { background-image: url('/images/layout/flag-de.svg'); }
#footer li.flagen, #langnav li.flagen { background-image: url('/images/layout/flag-en.svg'); }
#footer li.flagfr, #langnav li.flagfr { background-image: url('/images/layout/flag-fr.svg'); }


/* maximale Inhaltsbreite -> 820px - ohne Abstand rechts und links von jeweils 15px */
.maxwidth, .contentmarginalie { max-width: 850px; }
/* deprecated... war mal ein versucherle:  .maxwidth { max-width: 980px; }  maximale Inhaltsbreite -> 980px - ohne Abstand rechts und links von jeweils 15px */
.marginalie /*aside*/ { max-width: 250px; /* 220px plus 15px padding auf jeder seite */ } 
@media screen and (min-width: 576px) {
	.container { max-width: 100%; }
}
@media screen and (min-width: 768px) {
	.container, #footer.container-fluid { /*max-width: 100%;*/ padding-left: 20px; padding-right: 20px; /* spaltenabstand ist 10px je seite, wir wollen am rand insgesamt 30px haben */ }
	#content .container:last-child { padding-bottom: 30px; }
	.marginalie aside { padding-bottom: 20px; }
	#btntop { bottom: 20px; right: 30px; }
	#btntop span { border-width: 0 3px 3px 0; width: 12px; height: 12px; }
	#userinfo { right: 30px; }
}
/*
@media screen and (min-width: 992px) {
	.container { max-width: 100%; -- war mal 960px }
} */
@media screen and (min-width: 1200px) {
	.container, #footer.container-fluid { max-width: 100%; padding-left: 50px; padding-right: 50px; /* spaltenabstand ist 15px je seite, wir wollen am rand 65px haben */ }
	.marginalie aside { padding-bottom: 40px; }
	#btntop { width: 64px; height: 64px; right: 65px; }
	#userinfo { right: 65px; }
}
/*
@media screen and (min-width: 2000px) {
	.maxwidth { max-width: 55%; }
}*/


/* wenn subnavigation ausgefahren ist, werden vierspaltige Inhalte bei bestimmten Browserbreiten zu schmal dargestellt? */
@media screen and (min-width: 1300px) and (max-width: 1550px) { /* ab 1300px browserbreite wird subnavigation rechts neben sidebar angezeigt */
	.desktopnav .subnavactive .col-xl-3 { -ms-flex: 0 0 50%; flex: 0 0 50%; max-width: 50%; }
}

/* marginalie: nur rechts neben content anzeigen, wenn dazwischen mind. 95px sind */
@media screen and (min-width: 1600px) {
	#wrapper:not(.subnavactive) .contentmarginalie { -ms-flex: 0 0 78.5%; flex: 0 0 78.5%; }
	#wrapper:not(.subnavactive) .marginalie { -ms-flex: 0 0 21.5%; flex: 0 0 21.5%; }

	#wrapper:not(.subnavactive) .marginalie aside { /* Marginalien-Inhalt Sticky neben Content */
		position: -webkit-sticky;
		position: sticky;
		top: 0; /* required */
		z-index: 1020;
	}

}
@media screen and (min-width: 1860px) {
	.subnavactive .contentmarginalie { -ms-flex: 0 0 78.5%; flex: 0 0 78.5%; }
	.subnavactive .marginalie { -ms-flex: 0 0 21.5%; flex: 0 0 21.5%; }
}
/*
@media screen and (min-width: 2000px) { 
	#wrapper:not(.subnavactive) .contentmarginalie .maxwidth { max-width: 70%; }
	.subnavactive .contentmarginalie .maxwidth { max-width: 70%; }
} */




/*
 *******************************  
	Formulare
 ******************************* 
 */
/*.form-alternate { max-width: 820px; }*/
/*form ol:has(> li.elhalf) { } --- wäre soo schön, aber wird leider noch nicht unterstützt ;-) */
form ol { list-style: none; margin-left: 0; clear: both; }
form ol li { clear: both; padding-bottom: 10px; padding-left: 0; }

/*form legend { }*/
form label { font-weight: bold; line-height: 1.4; margin-bottom: 0; /* white-space: nowrap; -- mobile muss es umbrechen können */ }
form label[for] { cursor: pointer; }
form label.lcheckbox { cursor: pointer; font-weight: normal; line-height: 18px; display: inline; white-space: normal; }
form input, form select, form textarea { background-color: #ffffff; }
form input, form select, form textarea, form button { width: 100%; border: 1px solid #C7CACC;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px; 
}
form textarea:focus, form input:focus, form button:focus { outline: none; }
form input { text-indent: 12px; line-height: 45px; height: 45px; vertical-align: middle; }
form input[type=checkbox], form input[type=radio] { display: inline-block; width: 15px; height: 15px; margin: 0 5px 0 0; vertical-align: text-top; }
form textarea { height: 100px; max-height: 200px; text-indent: 12px; /*line-height: 1.6;*/ }
form select { height: 45px; text-indent: 8px; }
/*form option { padding: 0 5px; }*/
form button.noarrow::before { display: none; }
form button { color: #ffffff; text-transform: uppercase; background-color: #F59301; height: 45px; line-height: 45px; width: 100%; max-width: 100%;
	-webkit-transition: background-color 0.3s ease-out;
	-moz-transition: background-color 0.3s ease-out;
	transition: background-color 0.3s ease-out;
}
form button[type="submit"], form button[type="button"] { border-color: #F59301; }
form button[type="submit"] { margin-bottom: 7px; }
form button:focus, form button:hover { background-color: #F86B00; }
form button[type="reset"] { color: #284057; background-color: transparent; }
form button[type="reset"]:hover { color: #284057; background-color: #ffffff; }
form button[type="reset"]::before { display: none; }
@media screen and (min-width: 768px) {
	form button { width: 320px; }
	form button[type="submit"], form button[type="button"] { margin-right: 7px; }
	form button[type="submit"] { margin-bottom: 0; }
}

:-ms-input-placeholder { color: #284057; opacity:  0.5; font-style: normal !important; }
::-ms-input-placeholder { color: #284057; opacity:  0.5; font-style: normal !important; }
::placeholder { color: #284057 !important; opacity: 0.5; font-style: normal !important; }


/* formulare mehrspaltig */
@media screen and (max-width: 767.98px) {
	section form ol li.elfourth { margin-bottom: 0; padding-bottom: 0; }
}
@media screen and (min-width: 768px) {
	form li.elhalf { width: calc(50% - 15px); }
	form li.elthird { width: calc(33% - 15px); clear: none; }
	form li.elfourth { width: calc(25% - 15px); clear: none; }
	form li.pright, form li.pleft { display: inline-block; }
	form li.pright { margin-right: 15px; float: left; }
	form li.pleft { margin-left: 15px; float: right; }
	form li.elhalf.pright { clear: left; }
	form li.elhalf.pleft { clear: right; }
	form li.chckbxmtop { margin-top: -4px; } /* siehe template #726 ... Projektverwaltung im Filterbereich die Position der Checkboxen korrigiert */
}

/* formular upload-button */
/*.sf-file { cursor: default; visibility: hidden; } -- aus altem stylesheet */
/*.sf-upload { border: 1px solid #707070; visibility: hidden; } -- aus altem stylesheet */
/* .sf-uploader { z-index: 1; position: relative; width: 400px; top: -45px; }  -- aus altem stylesheet */ 
.sf-file { display: none; }
/*.sf-filefake { width: 235px; margin-right: 5px; }*/
.sf-uploader { display: -webkit-box; display: -ms-flexbox; display: flex; }
.sf-filefake { margin-right: 7px; }
@media screen and (min-width: 1200px) {
	.sf-filefake { width: 241px; }
}
.sf-filebutton { width: auto; padding: 0 10px; }
form button.sf-filebutton { margin-right: 0; }
.sf-filebutton::before { display: none; }

/* form-spamschutz */
.scnd { margin: 0 !important; padding: 0 !important; }
.scnd div { display: none !important; }


/*
 *******************************  
	Tabellen
 ******************************* 
 */
table { font-size: 14px; }
table th { line-height: 1.4; }
table td { line-height: 1.6; }

.orange_tbl, .feature_tbl { width: 100%; }
.orange_tbl img, .feature_tbl img { padding: 10px 0; max-width: none; }
.orange_tbl select, .feature_tbl select { min-width: 120px; }

/* das funktioniert so nicht richtig/zuverlässig ...
.orange_tbl tr:nth-of-type(1) th:first-child:not(.edgy),
.feature_tbl tr:nth-of-type(1) th:first-child:not(.edgy) {
	border-top-left-radius: 6px;
} */
.orange_tbl tr th:first-child:not(.edgy),
.feature_tbl tr th:first-child:not(.edgy) {
	border-top-left-radius: 6px;
}

/* das funktioniert so nicht richtig/zuverlässig ...
.orange_tbl tr:nth-of-type(1) th:last-child:not(.edgy),
.feature_tbl tr:nth-of-type(1) th:last-child:not(.edgy) {
	border-top-right-radius: 6px;
} */
.orange_tbl tr th:last-child:not(.edgy),
.feature_tbl tr th:last-child:not(.edgy) {
	border-top-right-radius: 6px;
}

.orange_tbl td,
.orange_tbl th,
.feature_tbl td,
.feature_tbl th {
	padding: 5px 15px 5px 10px; }

.orange_tbl th,
.feature_tbl th {
	background-color: #F59C00;
	color: #fff;
	font-weight: bold;
	white-space: nowrap;
}
.tabbing .orange_tbl th {
	background-color: #F68C00;
}

.orange_tbl td,
.feature_tbl td {
	vertical-align: top;
}

/* Soll die erste Spalte, die nicht die Klasse "edgy" hat, diese Mindestbreite bekommen? Wenn ja, funktioniert so nicht... habe es im Anschluss geändert
.feature_tbl th:nth-of-type(1):not(.edgy),
.feature_tbl td:nth-of-type(1):not(.edgy),
.orange_tbl th:nth-of-type(1):not(.edgy),
.orange_tbl td:nth-of-type(1):not(.edgy) {
	min-width: 395px;
} */

/*
.feature_tbl tr td:first-child:not(.edgy),
.orange_tbl tr td:first-child:not(.edgy) {
	min-width: 395px;
}
*/

/* es braucht nicht so viele zeilen ...
.feature_tbl tr:nth-of-type(1) th:last-child:not(.edgy),
.feature_tbl tr:nth-of-type(1) td:last-child:not(.edgy),
.orange_tbl tr:nth-of-type(1) th:last-child:not(.edgy),
.orange_tbl tr:nth-of-type(1) td:last-child:not(.edgy) {
	max-width: 200px;
	min-width: 200px;
} */

/*
.feature_tbl tr th:last-child:not(.edgy),
.orange_tbl tr th:last-child:not(.edgy) {
	max-width: 200px;
	min-width: 200px;
}*/

.orange_tbl th:not(:first-child),
.feature_tbl th:not(:first-child) {
	border-left: 1px solid #FFF;
}

.orange_tbl td:not(:first-child),
.feature_tbl td:not(:first-child) {
	border-left: 1px solid rgba(40, 64, 87, 0.12);
}

.orange_tbl tr:nth-child(even),
.feature_tbl tr:nth-child(even) {
	background-color: #fff;
}
.orange_tbl tr:nth-child(odd),
.feature_tbl tr:nth-child(odd) {
	background-color: #EAEBED;
}
.feature_tbl tr:hover { 
	background-color: #FFF9EC; 
}

.orange_tbl td a,
.feature_tbl td a {
	color: #284057;
}
/*
.orange_tbl tr:hover a,
.feature_tbl tr:hover a,
.feature_tbl tr:hover td:nth-of-type(2) {
	color: #f86b00;
}
*/
.orange_tbl a:hover,
.feature_tbl a:hover {
	color: #f86b00;
}


/* Um einen Haken zu realsieren gibt der Redakteur ein "ja" in der Tabellenzelle an, markiert diesen Text und wählt als Formatierung "Tabelleninhalt-Check" aus; 
   dadurch wird der Text selbst verschoben und ein Haken statt seiner angezeigt */
.Tabelleninhalt-Check { display: inline-block; width: 15px; height: auto; line-height: 1; text-indent: -100px; overflow: hidden; position: relative; }
.Tabelleninhalt-Check::before { content: '';
	position: absolute; left: 3px; top: 2px; width: 7px; height: 10px; 
	border-style: solid; border-color: #F68C00; border-width: 0 3px 3px 0;
	background-color: transparent;

	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}


/* wird für Tabelle in iframe benutzt aus alten Styles übernommen ... */
.has-dataTable {
	/* background-color: inherit;
	border: none; - das braucht es doch nicht, oder? 
	height: 100%;
	*/
	min-height: 800px;
	overflow: auto;
	width: 100%;
	/* z-index: 30; - das braucht es doch nicht, oder? */
}


/* Einsatz bei Tabellen */
.scrollmobile { overflow-x: visible; /* -webkit-overflow-scrolling:touch; */ } 
/*.touch-device .scrollmobile { overflow-x: auto; } */
/*@media screen and (max-width: 767.98px) {
	.scrollmobile { overflow-x: auto; } 
}*/

/*
 *******************************  
	Module
 ******************************* 
 */

/* Registration Page */
#registerwrapper { overflow-y: scroll; padding-top: 75px; padding-bottom: 60px; }
#registerwrapper .maxwidth { max-width: 950px; }
#registerwrapper .register_inner { max-width: 820px; }
#registerwrapper .row { /*margin: 100px 0;*/ }
#registerwrapper .registerlogo { padding-top: 75px; padding-bottom: 75px; }
#registerwrapper h1 { color: #F59C00; }
#registerwrapper h2 { font-weight: normal; padding-bottom: 10px; }
#registerwrapper legend, #registerwrapper #data h2 { padding-top: 60px; font-size: 20px; line-height: 24px; }
#registerwrapper #data h2 { font-weight: 800; }
#registerwrapper .scroll-box {
	height: 300px;
	margin-top: 24px;
	max-height: 300px;
	overflow-y: scroll;
}

/* Login Page */
#loginwrapper { width: 100vw; /*height: 100vh; */ text-align: center; }
#loginwrapper .row { height: 100vh; margin-bottom: 0; }
#loginwrapper legend { color: #284057; text-align: center; font-size: 41px; line-height: 1; font-weight: bold; margin-bottom: 24px; }
#loginwrapper .loginlogo { margin-bottom: 58px; }
#loginwrapper .loginlogo img { width: 262px; }
#loginwrapper .loginform { padding-bottom: 16px; max-width: 460px; }
#loginwrapper .loginform input, 
#loginwrapper .loginform button { font-size: 14px; height: 60px; line-height: 60px; margin-right: 0; width: 100%; max-width: 100%; }
#loginwrapper .loginlinks { text-align: right; font-size: 12px; }
#loginwrapper .loginlinks, #loginwrapper a { color: #284057; }
#loginwrapper .confirm, #loginwrapper .error, #loginwrapper .info, #loginwrapper .warning {
	margin-bottom: 3px;
}
@media screen and (min-width: 768px) {
	#loginwrapper .loginform {
		padding: 72px 60px 58px 60px;

		background-color: rgba(255, 255, 255, .8);

		-webkit-backdrop-filter: blur(10px);
		-moz-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);

		-webkit-border-radius: 6px;
		-moz-border-radius: 6px;
		border-radius: 6px; 
	}
}

/* Headerbild */
.headerwrapper { min-height: 60px; }
.headerwrapper h1 { font-size: 40px; line-height: 40px; /*padding-top: 15px;*/ }
.headerwrapper p { font-size: 18px; line-height: 28px; }
.headerwrapper .BtnLink-orange { height: 48px; line-height: 48px; margin-top: 40px; margin-right: 10px; text-transform: uppercase; }
.homeheader, .ctaheader, .homeheader h1, .ctaheader h1 { color: #ffffff; }
#headerimg, #headerimg .row { margin-bottom: 0; }
#headerimg .bgcoverimg { background-color: #171e41; /* #284057 - änderung gemäß chantal 10.09. */ margin-bottom: 40px; 
	-webkit-transition:  margin 0.4s ease-in-out;
	-moz-transition:  margin 0.4s ease-in-out;
	transition: margin 0.4s ease-in-out;
}
#headerimg.hlm .bgcoverimg { background-color: rgb(220,234,238); } /* Lizenzmanagement */
#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent, #headerimg .lizenzheader .lizenzcontent { padding-top: 320px; padding-bottom: 38px; }
#headerimg .headerlogo { background-color: #ffffff; width: 240px; height: 120px; line-height: 120px; text-align: center; margin-left: 15px; margin-top: 15px; }
@media screen and (max-width: 767.98px) {
	#headerimg.hlm .bgcoverimg, #headerimg.hel2 .bgcoverimg, #headerimg.hhp .bgcoverimg { background-size: contain; /* alternativ: 420px ?? */ } /* nicht bei Bildheader mit Logo  */
	#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent, #headerimg .lizenzheader .lizenzcontent { margin-top: -90px; }
	#headerimg .lizenzcontent /* .lizenzheader */ { background: rgb(220,234,238);
		background: linear-gradient(0deg, rgba(220,234,238,1) 0%, rgba(220,234,238,1) 50%, rgba(220,234,238,0) 80%);
	}
	#headerimg .ctacontent /*.ctaheader*/ { background: rgb(40,64,87);
		/*background: linear-gradient(0deg, rgba(40,64,87,0.9) 0%, rgba(40,64,87,0.9) 30%, rgba(40,64,87,0) 80%);*/
		/* background: linear-gradient(0deg, rgba(40,64,87,0.9) 0%, rgba(40,64,87,1) 50%, rgba(40,64,87,0) 80%); änderung gemäß chantal 10.09. */
		background: linear-gradient(0deg, rgba(23,30,65,0.9) 0%, rgba(23,30,65,1) 50%, rgba(23,30,65,0) 80%);
	}
	#headerimg.hel1 .bgcoverimg { min-height: 420px; } /* nur bei Bildheader mit Logo */
}
/*#headerimg .lizenzheader, #headerimg .homeheader { position: relative; }*/
#headerimg .headerimgcontent { position: relative; }
#headerimg .collapsebtn { position: absolute; left: 15px; width: 20px; height: 20px; border: 1px solid rgba(164, 164, 164, 0.65); cursor: pointer; z-index: 2;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;

	align-items: center;
	justify-content: center;

	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
	border-radius: 50%;
}
#headerimg .collapsebtn span { display: inline-block; width: 6px; height: 6px; margin-top: 3px; border: solid rgba(164, 164, 164, 1); border-width: 0 2px 2px 0;
	transform: rotate(-135deg);
	-ms-transform: rotate(-135deg);
-webkit-transform: rotate(-135deg); 
}
#headerimg .collapsebtn.active span { margin-top: -1px; 
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg); 
}
/*#headerimg.collapsed {

	-webkit-transform: translateY(-100vh);
	-ms-transform: translateY(-100vh);
	transform: translateY(-100vh);

}*/
@media screen and (max-width: 767.98px) {
	#headerimg .collapsebtn { top: 15px; }
}
@media screen and (min-width: 768px) {
	.headerwrapper h1 { font-size: 46px; line-height: 46px; }
	#headerimg .headerlogo { margin-left: 35px; margin-top: 35px; }
	#headerimg .collapsebtn { left: 35px; }
	#headerimg .bgcoverimg, #headerimg .ctaheader, #headerimg .homeheader, #headerimg .lizenzheader { min-height: 460px; }
	#headerimg .ctaheader { 
		/* background: linear-gradient(90deg, rgba(40,64,87,0.9) 0%, rgba(40,64,87,0.9) 30%, rgba(40,64,87,0) 60%); änderung gemäß chantal 10.09. */
	background: linear-gradient(90deg, rgba(23,30,65,0.9) 0%, rgba(23,30,65,0.9) 30%, rgba(23,30,65,0) 60%); 
	}
	#headerimg .lizenzheader { background: linear-gradient(90deg, rgba(220,234,238,1) 0%, rgba(220,234,238,0.8) 40%, rgba(220,234,238,0) 60%); }
	#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent, #headerimg .lizenzheader .lizenzcontent { margin-left: 20px; width: 60%; max-width: 420px; }
	#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent { padding-top: 48px; }
	#headerimg .lizenzheader .lizenzcontent { padding-top: 60px; }
}
@media screen and (min-width: 768px) and (max-width: 1199.98px) {
	#headerimg .collapsebtn { top: 24px; }
}
@media screen and (min-width: 1200px) {
	.headerwrapper h1 { font-size: 68px; line-height: 74px; }
	#headerimg .headerlogo { margin-left: 65px; margin-top: 65px; }
	#headerimg .collapsebtn { bottom: 52px; left: 65px; }
	#headerimg .collapsebtn.active { bottom: 12px; }
	#headerimg .ctaheader, #headerimg .lizenzheader { min-height: 560px; }
	#headerimg .ctaheader.ctasmall { min-height: 460px; }
	#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent, #headerimg .lizenzheader .lizenzcontent { margin-left: 50px; }
	#headerimg .ctaheader .ctacontent, #headerimg .homeheader .homecontent { max-width: 580px; }
	#headerimg .lizenzheader .lizenzcontent { max-width: 820px; }
}
/* retina display ...
@media
	screen and (-webkit-min-device-pixel-ratio: 2),
	screen and (min-resolution: 192dpi),
	screen and (min-resolution: 2dppx) { 
}
*/

/* Seite Software Releases und Updates */
.relinfo { display: block; font-size: 14px; font-weight: normal; letter-spacing: 0; }
@media screen and (min-width: 768px) {
	.relinfo { display: inline; float: right; }
}


/* Trainingskalender Styling */
.dateentry { background-color: #ffffff; border: 1px solid #C7CACC; padding: 25px 10px 15px 20px; margin-bottom: 10px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.dateentry:hover { background-color: #FFF9EC; border-color: #F68C00; }
.dateentry.booked { border-color: #F68C00; }
.dateentry.unbookable { background-color: transparent; border-color: #C7CACC; 
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
	filter: alpha(opacity=65);
	opacity: 0.65;
}
.dateentry p:last-child { padding-bottom: 0; }
.dateentry_date {}
.dateentry_title { font-size: 20px; line-height: 37px; padding-top: 16px; }
.dateentry_info { font-style: italic; font-weight: normal; }
.dateentry_location { font-weight: bold; }

@media screen and (min-width: 768px) {
	#data .dates { 
		display: -webkit-box;
		display: -ms-flexbox; 
		display: flex; 
		flex-wrap: wrap;
	}
	#data .dateentry { width: calc(50% - 15px); margin-right: 30px; }
	#data .dateentry:nth-child(even) { margin-right: 0; }
}


/* Highlight Box, Textblock */
.highbox, .txtblock { margin-bottom: 0; padding: 40px 30px 30px 30px; }
@media screen and (min-width: 1200px) {
	.highbox, .txtblock { padding-left: 25px; padding-right: 25px; }
}
.highbox .row, .txtblock .row { margin-bottom: 0; }

/* Textblock */
.txtblock h3 { padding-bottom: 10px; font-weight: normal; }
.txtblock h3 b, .txtblock h3 strong { color: #F68C00; }

/** Fehler-, Warn-, Hinweismeldungen **/
.error, .warning, .info, .confirm {
	display: block;
	line-height: 18px;
	padding: 6px 10px 7px 38px !important;
	position: relative;
	text-align: left;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;

}
.error { background-color: #FDECEA; }
.warning { background-color: #FFF4E5; }
.info { background-color: #E8F4FD; }
.confirm { background-color: #EDF7ED; }
.error::before, .warning::before, .info::before, .confirm::before { 
	content: ''; display: block; position: absolute; top: 8px; left: 10px; background-repeat: no-repeat; background-position: center center; width: 14px; height: 14px; background-size: 14px 14px;
}
.error::before { background-image: url('/images/layout/icons/icon-error.svg'); }
.warning::before { background-image: url('/images/layout/icons/icon-warning.svg'); }
.info::before { background-image: url('/images/layout/icons/icon-info.svg'); }
.confirm::before { background-image: url('/images/layout/icons/icon-confirm.svg'); }

/* Bei Fehlermeldungstexte innerhalb eines Formulars zwischen den input-feldern */
form li input.error { background-color: #fff; border-color: #FDECEA; padding: 0 !important;}
form li input.error::before { display: none; }
form li .error { display: inline-block; }

#download-container {
	padding-top: 60px;
}

/** Tabs **/
/*.ui-tabs-panel { background-color: #fff; color: inherit; padding: 8px 0 1.7em 8px; } --- deprecated?? wo kommt das vor? Bitte Heidi sagen, wenn noch verwendet (14.05.) */
@media projection, screen { /* Caution! Ensure accessibility in print and other media types... */
	/* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
	.ui-tabs-hide { display: none !important; } /* --- deprecated?? wo kommt das vor? Bitte Heidi sagen, wenn noch verwendet (14.05.) */
}
.ui-tabs-nav { list-style: none; background-color: #E1E4EB; height: 32px; line-height: 32px; font-size: 14px; }
.ui-tabs-nav.mktablewidth { white-space: nowrap; } /* ich weiß nicht, ob es immer so sein soll, wenn ja, dann einfach die Einschraenkung auf "mktablewidth" entfernen, so dass es fuer alle ui-tabs-nav gilt */
section .row ol.ui-tabs-nav, section .row .ui-tabs-nav p { padding-bottom: 0; } /* default soll hier nicht greifen */
.ui-tabs-nav li { display: inline-block; }
.ui-tabs-nav p a { display: block; width: auto; padding: 0 14px; color: #284057; font-weight: bold; text-decoration: none; }
.ui-tabs-active p, .ui-tabs-selected p { background-color: #F68C00; border-top-left-radius: 6px; border-top-right-radius: 6px; }
.ui-tabs-active p a, .ui-tabs-selected p a { color: #ffffff; cursor: default; }
.ui-state-disabled a:link, .ui-state-disabled a:visited { color: #c0c0c0; }

/** Pagenavigation / Pagination **/
.pagenaviwrapper { font-size: 14px; }
.pagenaviwrapper a, .pagenowrapper a, .dataTables_paginate a { color: #284057; }
.pagenowrapper a.pageno, .dataTables_paginate span a {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
	filter: alpha(opacity=40);
	opacity: 0.4;
}
.pagenowrapper a.pageno, .pagenowrapper span.pageactive, .dataTables_paginate span a { display: inline-block; width: auto; margin: 0 2px; }
.pagenaviwrapper, .dataTables_paginate { 
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-direction: row;
}
.pagenowrapper, .pagenavi, .dataTables_paginate span { width: auto; flex-grow: 1; }
.pagenowrapper, .dataTables_paginate span { text-align: center; }
.pagenavi.nextpage { text-align: right; }

.dataTables_paginate span a.current {
	opacity: 1;
	cursor: text;
	text-decoration: none !important;
}
.dataTables_paginate .paginate_button.disabled { visibility: hidden; }

/* selbstgehostetes Video */
.videodiv { overflow: hidden; }
section .videodiv.imgonly { padding-bottom: 0; }
.videodiv .vjs-poster { background-color: #F6F7FB; }

/* YouTube Video */
.youtubediv { }
.videobtn { position: absolute; top: 0; left: 0; z-index: 2; /*width: 100%; height: 100%;*/ }
.videobtn::after { content: "\f101"; font-family: VideoJS; font-size: 2.2em; display: block; color: #ffffff; font-weight: 400; font-weight: normal; text-align: center; position: absolute; }

.nouserpermit { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; color: #fff; background-color: rgba(0,0,0,.8); z-index: 2; }
.nouserpermit p { padding: 20px; }
.nouserpermit p a { color: #fff !important; text-decoration: underline !important; }

/* Video Play-Button */
.video-js .vjs-big-play-button,
.videobtn::after { 
	top: 50%; left: 50%; width: 55px; height: 55px; line-height: 55px; margin-left: -27.5px; margin-top: -27.5px; border: none; 
	background-color: #F59C00;

	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
/*
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	transform: scale(0);
*/
	-webkit-transition: transform 0.2s ease;
	-moz-transition: transform 0.2s ease;
	transition: transform 0.2s ease;
}
/*
.videodiv:hover .video-js .vjs-big-play-button { 
	background-color: #F59C00;
	-webkit-transform: perspective(1px) scale(1);
	-moz-transform: scale(1);
	transform: perspective(1px) scale(1);
}
*/
.videodiv:hover .video-js .vjs-big-play-button { background-color: #F59C00; }
.video-js .vjs-poster::before,
.videobtn::before {
	content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.2); 

	-webkit-transition: background-color 0.2s ease;
	-moz-transition: background-color 0.2s ease;
	transition: background-color 0.2s ease;
}
.videodiv:hover .video-js .vjs-poster::before,
.videobtn:hover::before { 
	background-color: rgba(0,0,0,0.4); 
}

/* Video-Archive */
.videobu { padding-top: 15px; padding-bottom: 40px; }
.videobu h3 { padding-bottom: 0; }
.videobu .varchivedate { font-weight: 400; }
#filtervidsnextlvl { display: none; }
.filtervidbtn { margin-bottom: 10px; width: 100%; }
.filtervidbtn:last-child { margin-bottom: 0; }
.filtervidbtn.active { background-color: #F86B00; border-color: #F86B00; }
#filtervidsselform { width: 100%; margin-bottom: 20px; }
.selfilter { height: 36px; line-height: 36px; margin-bottom: 10px; }

/* Hinweis/Störer auf Homepage */
.hpvipnews dt { border-top: none; padding-top: 0; }
.hpvipnews dt::before { top: 0; }
.hpvipnews .bg1 dt::before { color: #fff; }

/*
 *******************************  
	Alte Styles ...
 ******************************* 
 */
img.bild_links, .bild_links img {display: block; margin-bottom: 15px; } /* eigentlich gehört klasse ans bild, doch falls redakteur die klasse falsch gesetzt haben sollte, hier eine variante hinzugefügt */



/*
 *******************************  
	Scrollbar
 ******************************* 
 */
.scroll-wrapper { overflow: hidden !important; padding: 0 !important; position: relative; }
.scroll-wrapper > .scroll-content { border: none !important; box-sizing: content-box !important; height: auto; left: 0; margin: 0; max-height: none; max-width: none !important; overflow: scroll !important; padding: 0; position: relative !important; top: 0; width: auto !important; }
.scroll-wrapper > .scroll-content::-webkit-scrollbar { height: 0; width: 0; }
.scroll-element { display: none; }
.scroll-element, .scroll-element div { box-sizing: content-box; }
.scroll-element.scroll-x.scroll-scrollx_visible,
.scroll-element.scroll-y.scroll-scrolly_visible {
    display: block;
}
.scroll-element .scroll-bar,
.scroll-element .scroll-arrow {
    cursor: default; 
}
.scroll-textarea { border: 1px solid #cccccc; border-top-color: #999999; }
.scroll-textarea > .scroll-content { overflow: hidden !important; }
.scroll-textarea > .scroll-content > textarea { border: none !important; box-sizing: border-box; height: 100% !important; margin: 0; max-height: none !important; max-width: none !important; overflow: scroll !important; outline: none; padding: 2px; position: relative !important; top: 0; width: 100% !important; }
.scroll-textarea > .scroll-content > textarea::-webkit-scrollbar { height: 0; width: 0; }
.scrollbar-inner > .scroll-element,
.scrollbar-inner > .scroll-element div {
    border: none; margin: 0; padding: 0; position: absolute; z-index: 10;
}
.scrollbar-inner > .scroll-element div { display: block; height: 100%; left: 0; top: 0; width: 100%; }
.scrollbar-inner > .scroll-element.scroll-x { bottom: 2px; height: 8px; left: 0; width: 100%; }
.scrollbar-inner > .scroll-element.scroll-y { height: 100%; right: 2px; top: 0; width: 8px; }

.scrollbar-inner > .scroll-element .scroll-element_outer { overflow: hidden; }
.scrollbar-inner > .scroll-element .scroll-element_outer,
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
}
.scrollbar-inner > .scroll-element .scroll-element_track,
.scrollbar-inner > .scroll-element .scroll-bar {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
    filter: alpha(opacity=40);
    opacity: 0.4;
}
.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #e0e0e0; }
.scrollbar-inner > .scroll-element .scroll-bar { background-color: #c2c2c2; }
.scrollbar-inner > .scroll-element:hover .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-draggable .scroll-bar { background-color: #919191; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_track { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_track { top: -12px; }
.scrollbar-inner > .scroll-element.scroll-x.scroll-scrolly_visible .scroll-element_size { left: -12px; }
.scrollbar-inner > .scroll-element.scroll-y.scroll-scrollx_visible .scroll-element_size { top: -12px; }

/*
 *******************************  
	News-Teaser, News-Detailseite
 ******************************* 
 */
#newsteaser { padding-left: 0; padding-right: 0; }
#newsteaser .aniimg a { display: block; overflow: hidden; }
#newsteaser h2 { padding-bottom: 16px; }
#newsteaser .BtnLink-orange { height: 24px; line-height: 22px; padding: 0 10px; }
#newsteaser .newsteaserimg, #newsteaser .newsteasertxt { padding-bottom: 20px; }
#newsteaser .newsteaserel { margin-bottom: 20px; }
#newsovlink .BtnLink-blue { width: 100%; }
@media screen and (min-width: 768px) { 
	#newsteaser .newsteaserel { margin-bottom: 55px; }
}

#newsdetail h1 a { color: #284057; }
#newsdetail h1 a::before { content: "\1F828"; display: inline-block; margin-right: 15px; font-size: 14px; line-height: 1; vertical-align: middle; }
#newsdetail h1 a:hover { color: #284057; text-decoration: none; }
#newsdetail .imgonly img { width: 100%; }


@media screen and (min-width: 577px) { /* sm */
}


@media screen and (min-width: 768px) { /* md */
}


@media screen and (min-width: 992px) { /* lg */
}

@media screen and (min-width: 1200px) { /* xl */
}

@media screen {
	.printonly { display: none; }
}

@media print {
	* { background: transparent !important; color: black !important; text-shadow: none !important; filter: none !important; -ms-filter: none !important; }
	p a { color: #000000 !important; text-decoration: underline; }
	p a:visited { color: #000000 !important; text-decoration: underline; }
	p a[href]:after { content: " (" attr(href) ")"; }
	abbr[title]:after { content: " (" attr(title) ")"; }
	.ir a:after { content: ""; }
	a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; }
	pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
	thead { display: table-header-group; }
	tr, img { page-break-inside: avoid; }
	@page { margin: 0.5cm; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; }

	.printonly { display: block; }
	.desktoponly { display: none; }

	.container, .container-fluid { padding-left: 5%; padding-right: 5%; width: 90%; padding-top: 0; padding-bottom: 0; /*padding-bottom: 20px;*/ overflow: hidden; }
	.container-fluid .container { padding: 0; margin: 0; width: 100%; }
	.row { padding: 0; margin: 0; }

	a[href]:after, abbr[title]:after { content: ""; }
	p, h2, h3 { orphans: 3; widows: 3; }
	h2, h3 { page-break-after: avoid; } 

	body { font-size: 12px; line-height: auto; }
	body, h1, h2 { line-height: auto; }

	h1 { font-size: 24px; }
	h2 { font-size: 18px; }
	h3, h4, h5, h6 { font-size: 16px; line-height: 20px; } 

	.embed-responsive { display: none; }

	img[align=left], img[align=right] { margin: 0 0 10px 0; float: none; }

	/* Tabs */
	.ui-tabs-nav { display: none; }

}