@charset "utf-8";

/**
 * Die ganze Website
 */
/********************************************************************************
	Ganze Seite: 		.page-container-2
	Logo-Bereich:		.header-banner
	Meta-Menu Bar: 		.header-bar-1-left
	Mittlere Spalte:	.content2
	Rechte Spalte:		.right-column
*********************************************************************************/

/* Diese Deklaration muss Stern, html und body definieren um Bootstrap.css zu überschreiben! */
*, html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
/*	letter-spacing: 0.02em; */
}

/**
 * Grosser Bildschirm
 */
@media all and (min-width: 768px) {
	*, html, body {
		font-family: var(--big-screen---font-family);
		font-size: unset;
/*		font-size: var(--big-screen---font-size); */
	}
}

/**
 * Kleiner Bildschirm
 */
@media all and (max-width: 767px) {
	*, html, body {
		font-family: var(--small-screen---font-family);
		font-size: unset;
/*		font-size: var(--small-screen---font-size); */
	}
}

*:before, *:after {
	width: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	content: inherit;
}

html {
	width: 100%;
	width: auto;
	height: 100%;
	min-height: 100%;
}

body {
	float: left;
	width: 100%;
	height: 100%;
	min-height: 100%;
	padding: 0;
	margin: 0 auto;
	overflow-x: hidden;
	hyphens: auto;
}

@media all and (max-width: 1100px) {
	/*
	body {
		overflow-x: scroll;
		-webkit-overflow-scrolling: touch;
	}
	*/
}

div {
/*	border: 1px solid red; */
}

.ui-dialog .ui-dialog-titlebar {
	display: grid;
	height: 50px;
	line-height: 50px;
	background-color: #eeeeee;
	background-image: none;
	border: 0;
	border-radius: 0;
}

.ui-widget-content {
	background-color: inherit;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]),
select,
.ui-widget select {
	font-weight: normal;
	border-radius: 5px;
	margin: 0;
	background-color: #f7f7f7;
	border-style: inset;
	padding-left: 3px;
	width: 100%;
/*	max-width: 500px; */
}

/**
 * Grosser Bildschirmg
 */
@media all and (min-width: 768px) {

	input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]),
	select,
	.ui-widget select {
		font-size: var(--input-field-big-screen---font-size);
		height: var(--input-field-big-screen---height);
		line-height:  var(--input-field-big-screen---height);
	}
}

/**
 * Kleiner Bildschirmg
 */
@media all and (max-width: 767px) {

	input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]),
	select,
	.ui-widget select {
		font-size: var(--input-field-small-screen---font-size);
		height: var(--input-field-small-screen---height);
		line-height:  var(--input-field-small-screen---height);
	}

}

input[type="radio"],
input[type="checkbox"] {
	height: 24px;
	display: table-cell;
	/*	margin-right: 3px; */
	margin: unset;
	line-height: inherit;
	vertical-align: middle;
}

input:required {
	box-shadow: none;
}

.inputSubmit {
	float: left;
	width: 100%;
	position: sticky;
	top: 0;
}

textarea {
	font-weight: normal;
	resize: none;
	padding: 0;
	margin: 0;
	border-radius: 5px;
	background-color: #f7f7f7;
	width: 100%;
	max-width: 500px;
}

select {
	padding: 2px 0 2px 0;
	width: auto;
}

option {
	padding: 0 0 0 3px;
	border-radius: 5px;
	line-height: initial;
	margin: 0;
	border: 0;
}

#paypal-button input {
	height: auto;
}

.mce-edit-area {
	font-size: 1em;
}

/* Keine CSS-Formatierung! */
* .raw-html {
	animation : none;
	animation-delay : 0;
	animation-direction : normal;
	animation-duration : 0;
	animation-fill-mode : none;
	animation-iteration-count : 1;
	animation-name : none;
	animation-play-state : running;
	animation-timing-function : ease;
	backface-visibility : visible;
	background : 0;
	background-attachment : scroll;
	background-clip : border-box;
	background-color : transparent;
	background-image : none;
	background-origin : padding-box;
	background-position : 0 0;
	background-position-x : 0;
	background-position-y : 0;
	background-repeat : repeat;
	background-size : auto auto;
	border : 0;
	border-style : none;
	border-width : medium;
	border-color : inherit;
	border-bottom : 0;
	border-bottom-color : inherit;
	border-bottom-left-radius : 0;
	border-bottom-right-radius : 0;
	border-bottom-style : none;
	border-bottom-width : medium;
	border-collapse : separate;
	border-image : none;
	border-left : 0;
	border-left-color : inherit;
	border-left-style : none;
	border-left-width : medium;
	border-radius : 0;
	border-right : 0;
	border-right-color : inherit;
	border-right-style : none;
	border-right-width : medium;
	border-spacing : 0;
	border-top : 0;
	border-top-color : inherit;
	border-top-left-radius : 0;
	border-top-right-radius : 0;
	border-top-style : none;
	border-top-width : medium;
	bottom : auto;
	box-shadow : none;
	box-sizing : content-box;
	caption-side : top;
	clear : none;
	clip : auto;
	color : inherit;
	columns : auto;
	column-count : auto;
	column-fill : balance;
	column-gap : normal;
	column-rule : medium none currentColor;
	column-rule-color : currentColor;
	column-rule-style : none;
	column-rule-width : none;
	column-span : 1;
	column-width : auto;
	content : normal;
	counter-increment : none;
	counter-reset : none;
	cursor : auto;
	direction : ltr;
	display : inline;
	empty-cells : show;
	float : none;
	font : normal;
	font-family : inherit;
	font-size : medium;
	font-style : normal;
	font-variant : normal;
	font-weight : normal;
	height : auto;
	hyphens : none;
	left : auto;
	letter-spacing : normal;
	line-height : normal;
	list-style : none;
	list-style-image : none;
	list-style-position : outside;
	list-style-type : disc;
	margin : 0;
	margin-bottom : 0;
	margin-left : 0;
	margin-right : 0;
	margin-top : 0;
	max-height : none;
	max-width : none;
	min-height : 0;
	min-width : 0;
	opacity : 1;
	orphans : 0;
	outline : 0;
	outline-color : invert;
	outline-style : none;
	outline-width : medium;
	overflow : visible;
	overflow-x : visible;
	overflow-y : visible;
	padding : 0;
	padding-bottom : 0;
	padding-left : 0;
	padding-right : 0;
	padding-top : 0;
	page-break-after : auto;
	page-break-before : auto;
	page-break-inside : auto;
	perspective : none;
	perspective-origin : 50% 50%;
	position : static;
	/* May need to alter quotes for different locales (e.g fr) */
	quotes : '\201C' '\201D' '\2018' '\2019';
	right : auto;
	tab-size : 8;
	table-layout : auto;
	text-align : inherit;
	text-align-last : auto;
	text-decoration : none;
	text-decoration-color : inherit;
	text-decoration-line : none;
	text-decoration-style : solid;
	text-indent : 0;
	text-shadow : none;
	text-transform : none;
	top : auto;
	transform : none;
	transform-style : flat;
	transition : none;
	transition-delay : 0s;
	transition-duration : 0s;
	transition-property : none;
	transition-timing-function : ease;
	unicode-bidi : normal;
	vertical-align : baseline;
	visibility : visible;
	white-space : normal;
	widows : 0;
	width : auto;
	word-spacing : normal;
	z-index : auto;
	/* basic modern patch */
	all: initial;
	all: unset;
}

.ui-widget .ui-widget {
	font-size: unset;
}
/* Disable fucking Twitter-Bootstrap pollutions!!! */
.radio, .checkbox {
	position: unset;
	margin: unset;
}

/* Disable fucking Twitter-Bootstrap pollutions!!! */
.radio input[type="radio"],
.radio-inline input[type="radio"],
.checkbox input[type="checkbox"],
.checkbox-inline input[type="checkbox"] {
	position: unset;
	margin: unset;
}

/* Disable fucking Twitter-Bootstrap pollutions!!! */
.hidden {
	display: unset !important;
}

.selector {
	clear: both;
	float: left;
	line-height: inherit;
	height: 100%;
/*	border: 1px solid #ccc; */
}

.selector label {
	display: table-row;
}

.selector span {
	display: table-cell;
	vertical-align: middle;
	line-height: inherit;
	height: 100%;
}

button {
/*	padding-left: 3px; */
	border-radius: 5px;
/*	height: 100%; */
}

legend {
	font-size: inherit; /* Override Bootstrap */
}

/* Macht das Tabellen auf iPhone horizontal gescrollt werden koennen */
.horizontal-scroll-wrapper {
	width: 100%;
/*	white-space: nowrap; */
	overflow-x: scroll;
/*	border: 3px solid #eeeeee; */
	-webkit-overflow-scrolling: touch;
}

.horizontal-scroll-wrapper {
/*	background: linear-gradient(to right, #80e02c 0%,#20380b 100%); */
}

/* Macht das Tabellen auf iPhone horizontal gescrollt werden koennen */
.table-wrapper-fixed {
	float: left;
	width: 100%;
}

.table-wrapper-fixed .hpl-table {
/*	table-layout: fixed; */
	width: 100%;
}

.hpl-table,
table {
	display: table;
	border-collapse: collapse;
}

thead,
.hpl-table-header-group {
	display: table-header-group;
}

tbody,
.hpl-table-body-group {
	display: table-row-group;	/* Tatsächlich table-row-group. Wo ist das die Kosistenz? */
}

tfoot,
.hpl-table-footer-group {
	display: table-footer-group;
}

.hpl-table .hpl-tr,
table tr {
	display: table-row;
/*	height: 100%; */
}

.hpl-table .hpl-th,
table th {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 5px;
	font-weight: bold;
/*	word-break: break-all; */
	word-wrap: break-word;
/*	height: 100%; */
}

.hpl-table .hpl-td,
table td {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	padding: 3px;
/*	word-break: unset; */
/*	word-wrap: unset; */
/*	white-space: nowrap; */
	word-wrap: break-word;
/*	height: 100%; */
}

/*
.hpl-table {
	display: table;
	border-collapse: collapse;
}

.hpl-th {
	display: table-cell;
}

.hpl-td {
	display: table-cell;
}
*/

/* Diese Definition bewirkt, dass Inhalte nach schliessenden Accordions nach oben rutschen */
form {
	float: left;
	width: 100%;
}

fieldset {
/*	clear: bo.hpl-th; */
	width: 100%;
	border: 0;
}

em {
	font-style: italic;
}

blockquote {
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 50px;
	border: 0;
}

strong {
	font-weight: bold;
}

a, a:active, a:focus {
	outline: none;
}

img, embed, object, video {
	border: 0;
	overflow: hidden;
}

p {
/*  clear: both; */
	font-family: inherit;
/*	margin: 0; */
}

p:first-child {
	margin-top: 0;
}

ul, ol {
	list-style-position: inside;
}

ul {
	margin-left: 20px;
}

li {
	margin: 10px 0 5px 10px;
	list-style-position: outside;
}

.link {
	margin-top: 10px;
}

.page-container-1 {
/*	height: 100%; /* Wenn diese Einstellung aktiviert wird, klebt der Footer am unteren Ende des Bildschirms, auch wenn gescrollt werden muss */
	width: 100%;
/*	max-width: 1100px; */
/*	max-width: 100%; */
	min-height: 100%;
	padding-bottom: 35px;
	background-color: #ffffff !important;
	margin: 0 auto;
	box-shadow: var(--box-shadow);
	position: relative;
}

.page-container-2 {
	width: 100%;
	max-width: 100%;
	height: 100%;
	min-height: 100%;
/*	overflow: hidden; */
	margin: 0 auto;
	padding-left: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
/*	background-color: #ffffff !important; */
}

.container-fluid {
	margin: 0 auto;
	width: 100%;
	height: 100%;
	min-height: 100%;
/*	max-width: 1300px; */
/*	max-width: 100%; */
	background-color: #ffffff;
	background-image: url("../../Images/SiteDesign/background_white_1024.png");
	background-repeat: repeat-y;
	position: relative;
	padding-bottom: 40px; /* Muss eingeschaltet werden, wenn Header-Banner und Header-Bar statisch sind */
	z-index: 1;
}

/**
 * Grosser Bildschirm
 */
@media all and (max-width: 767px) {
	.container-fluid {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/**
 * Kleiner Bildschirm
 */
@media all and (min-width: 768px) {
	.container-fluid {
		padding-left: 15px;
		padding-right: 15px;
	}
}

.left-column {
/*	display: table-cell; */
/*	width: 0; */
}

.right-column {
/*	display: table-cell; */
/*	width: 0; */
}


/* Muss bootstrap.css übersteuern! */
.checkbox label {
	padding-left: unset;
}

label,
.label {
	color: #000; /* Override Bootstrap! */
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	white-space: normal;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	line-height: 27px;
}

@media all and (min-width: 768px) {
	label,
	.label {
		font-size: var(--input-field-big-screen---font-size);
	}
}

@media all and (max-width: 767px) {
	label,
	.label {
		font-size: var(--input-field-small-screen---font-size);
	}
}

/**
 * Die Aufteilung der Spalten
 * Es muss gelten: page-container-2.width = right-column.width + 2*right-column.margin + 2*right-column.padding +
 *                                          content2.width + 2*content2.margin + 2*content2.padding +
 */

.content1 {
	max-width: 1000px;
	padding: 0;
	margin: 0 auto;
	height: auto;
	min-height: 100%;
	color: black;
	font-size: 1.0em;
}

.content2 {
	width: 100%;
	height: auto;
	margin: 0 auto;
	padding: 0;
	padding-top: 10px;
	color: black;
	font-size: 1.0em;

	word-wrap: break-word;
	word-break: normal;
	white-space: normal;
	-webkit-hyphens:auto;
	-moz-hyphens:auto;
	-ms-hyphens:auto;
	hyphens: auto;
}

.hyphens-auto {
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.hyphens-none {
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	-o-hyphens: none;
	hyphens: none;
}

/*** Headers ***/
h1, h2, h3, h4 {
	clear: both;
	float: left;
	width: 100%;
	margin-top: 0;		/* Override bootstrap.css */
	margin-bottom: 0;	/* Override bootstrap.css */
}

/*
 * Title
 */
.MsoTitle {
	font-family: var(--mso-title---font-family);
	font-weight: var(--mso-title---font-weight);
	font-style: var(--mso-title---font-style);
	font-size: var(--mso-title---font-size);
	line-height: var(--mso-title---font-size);
	color: var(--mso-title---color);
	text-decoration: var(--mso-title---text-decoration);
	margin-top: var(--mso-title---font-size);
	margin-bottom: var(--mso-title---font-size);
	letter-spacing: var(--header---letter-spacing);
}

.MsoTitle.csc-firstHeader { margin-top: 0; }
.MsoTitle:first-of-type { margin-top: 0; }
.MsoTitle:first-child { margin-top: 0; }

.MsoTitle + .MsoTitle {
	margin-top: 0;
}

.MsoTitle + h1 {
	margin-top: 0;
}

/*
 * Header 1
 */
h1,
h1 span {
	font-family: var(--h1---font-family);
	font-weight: var(--h1---font-weight);
	font-style: var(--h1---font-style);
	font-size: var(--h1---font-size);
	line-height: var(--h1---font-size);
	color: var(--h1---color);
	text-decoration: var(--h1---text-decoration);
	margin-top: var(--h1---font-size);
	margin-bottom: var(--h1---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h1.csc-firstHeader { margin-top: 0; }
h1:first-of-type { margin-top: 0; }
h1:first-child { margin-top: 0; }

/* Aufeinanderfolgende h1 Header */
h1 + h1 {
	margin-top: 0;
}

h1 + h2 {
	margin-top: 0;
}

/*
 * Header 2
 */
h2,
h2 span {
	font-family: var(--h2---font-family);
	font-weight: var(--h2---font-weight);
	font-style: var(--h2---font-style);
	font-size: var(--h2---font-size);
	line-height: var(--h2---font-size);
	color: var(--h2---color);
	text-decoration: var(--h2---text-decoration);
	margin-top: var(--h2---font-size);
	margin-bottom: var(--h2---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h2.csc-firstHeader { margin-top: 0; }
h2:first-of-type { margin-top: 0; }
h2:first-child { margin-top: 0; }

/* Aufeinanderfolgende h3 Header */
h2 + h2 {
	margin-top: 0;
}

h2 + h3 {
	margin-top: 0;
}

/*
 * Header 3
 */
h3,
h3 span {
	font-family: var(--h3---font-family);
	font-weight: var(--h3---font-weight);
	font-style: var(--h3---font-style);
	font-size: var(--h3---font-size);
	line-height: var(--h3---font-size);
	color: var(--h3---color);
	text-decoration: var(--h3---text-decoration);
	margin-top: var(--h3---font-size);
	margin-bottom: var(--h3---font-size);
	letter-spacing: var(--header---letter-spacing);
}

/* Obsolete: Aktuell ist h2 + h3 */
h3.csc-firstHeader { margin-top: 0; }
h3:first-of-type { margin-top: 0; }
h3:first-child { margin-top: 0; }

/* Aufeinanderfolgende h3 Header */
h3 + h3 {
	margin-top: 0;
}

h3 + h4 {
	margin-top: 0;
}

/*
 * Header 4
 */
h4,
h4 span {
	font-family: var(--h4---font-family);
	font-weight: var(--h4---font-weight);
	font-style: var(--h4---font-style);
	font-size: var(--h4---font-size);
	line-height: var(--h4---font-size);
	color: var(--h4---color);
	text-decoration: var(--h4---text-decoration);
	margin-top: var(--h4---font-size);
	margin-bottom: var(--h4---font-size);
	letter-spacing: var(--header---letter-spacing);
}

h4.csc-firstHeader { margin-top: 0; }
h4:first-of-type { margin-top: 0; }
h4:first-child { margin-top: 0; }

/* Aufeinanderfolgende h4 Header */
h4 + h4 {
	margin-top: 0;
}

h4 + h5 {
	margin-top: 0;
}

/*
 * Header 5
 */
h5,
h5 span {
	float: left;
	width: 100%;
	font-size: 100%;
	font-weight: bold;
	margin-top: 10px;
	margin-bottom: 10px;
/*	text-align: justify; */
}

/* Obsolete: Aktuell ist h4 + h5 */
h5.csc-firstHeader { margin-top: 0; }
h5:first-of-type { margin-top: 0; }
h5.csc-firstHeader { margin-top: 0; }

/* Aufeinanderfolgende h5 Header */
h5 + h5 {
	margin-top: 0;
}

@media all and (max-width: 767px) {
	.content2 h1 {
		margin-bottom: 5px;
	}
}

.content2 .csc-default {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
	margin-top: 20px;
}

.content2 .csc-default:first-child,
.content2 .csc-default:first-of-type {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

/*** Text allgemein ***/
.content2 .bodytext {
	line-height: 150%;
}

.content2 .bodytext .important {
	color: #f00;
}

.content2 .contenttable {
	width: auto;
	border-collapse: collapse;
}

.content2-pagetitle,
.content3-pagetitle,
.csc-firstHeader {
	overflow: hidden;
/*	width: auto; */
/*	margin-top: 0 !important; */
	padding: 0px 0px 2px 0px;
	border-bottom: 0;
/*	font-weight: bold; */
/*	font-size: 180%; */
}


/*** After image in text wi.hpl-th image ***/
.csc-textpic-clear {
	width: 100%;
	height: 20px;
}

DIV.csc-textpic {
	overflow: visible;
}

.ui-tooltip {
	border: 1px solid #ccc;
	background: #ffeb9b;
	box-shadow: var(--box-shadow);
	padding: 5px 10px;
}

.back-link {
	float: left;
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0 0 20px 0;
	line-height: 16px;
}

.back-link p {
	margin: 0 !important;
	padding: 0 !important;
}


/*
.hyphenate {
	word-wrap: break-word;
	word-break: break-word; / * Works in Chrome * /
	white-space: normal;
	hyphens: auto;
	.hyphenate {
	background-color: lightgreen;
}
*/

/* Hyphhenator kann zum Testen ein- und ausgeschaltet werden! */
/*
#HyphenatorToggleBox {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	width: auto !important;
	z-index: 9999 !important;
	border: 3px solid red;
}

.don.hpl-thyphenate {
	background-color: red;
}
*/

/*** This is not working on Mobile iOS Safari ***/
.modal {
	display: none;
	position: fixed;

	top: 0;
	left: 0;

	height: 100%;
	width: 100%;

	background-color: #cccccc;
	opacity: 0.8;

	z-index: 9999;

	cursor: progress !important;

	filter: blur(10px);

	/*
	background-image: url('../../../../../fileadmin/Resources/Public/Images/Icons/loading.gif');
	background-position: 50% 50%;
	background-repeat: no-repeat;
	*/
}

body.hpl-loading {
	overflow: hidden;
}

body.hpl-loading .modal {
	display: block;
}

.align-right {
	text-align: right;
}

/* Dies braucht es, wenn "Content Element CSS (otpional) (fluid_styled_content)" im Template eingebunden ist. */
.ce-textpic,
.ce-nowrap,
.ce-bodytext,
.ce-gallery,
.ce-row,
.ce-uploads li,
.ce-uploads div {
	overflow: visible;
}

.horizonalScrollbarContentWrapper {
	float: left;
	width: 100%;
}

.content-element {
	float: left;
	width: 100%;
}

/**
 * Felder die nur sichtbar sind für bestimmte Benutzer
 */
.visible-for-role {
	clear: both;
	float: left;
	width: 100%;
	border: 1px solid #ccc;
	border-radius: 5px;
	padding: 5px;
	margin: 5px 0;
/*	opacity: 0.5; */
}

.visible-for-role::before {
	font-size: 0.75em;
}

.visible-for-role-superuser {
	background-color: #eee;
}

.visible-for-role-superuser::before {
	content: "Nur sichtbar für den Superuser";
}

.visible-for-role-programmgestaltung {
	background-color: #eee;
}

.visible-for-role-programmgestaltung::before {
	content: "Nur sichtbar für den Programm-Administrator";
}