/* ######### GRUNDEINSTELLUNGEN ############## */

/* Grundeinstellungen */
/* Farben immer als Variablen definieren! */


* {
   box-sizing: border-box;
  }

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	src: url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.eot'); /* IE9 Compat Modes */
	src: local('Lato Regular'), local('Lato-Regular'),
		url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
		url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
		url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
		url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
		url('https://shared.gefaba.de/lato-v14/lato-v14-latin-regular.svg#Lato') format('svg'); /* Legacy iOS */
}

@font-face {
	font-family: 'Roboto';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Regular'), local('Roboto-Regular'), url('https://shared.gefaba.de/roboto/Roboto-Regular.ttf') format('truetype');
}

html, body {height: 100%; margin: 0px; padding: 0px;}

body {
	background:#ffffff;
	font-family: 'Roboto', sans-serif; 
	font-size: 1.0em; /* Schriftgröße zentral relativ anpassen */
	font-weight: normal;
	text-decoration: none;
	color: #666666;
}

a {color: #0052cc; text-decoration: none;}
a.link-std i {color: #C0C0C0; margin-right: 5px;}
a.link-std-orange i {color: #ff7604; margin-right: 5px;}
a:hover, a:focus {color: #ff7604; text-decoration: underline; outline: none; }


h1 {
	font-family: 'Roboto', sans-serif;
	display: block;
	font-size: 1.8em;
	line-height: 1.1em;
	margin-top: 1.5em;
	margin-bottom: 1.0em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #66a3ff;
}

h2 {
	font-family: 'Roboto', sans-serif;
	display: block;
	font-size: 1.3em;
	line-height: 1.1em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	margin-left: 0;
	margin-right: 0;
	font-weight: normal;
	color: #00204f;
}

h3 {
	font-family: 'Roboto', sans-serif;
	display: block;
	font-size: 1.1em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #00204f;
}

h4 {
	font-family: 'Roboto', sans-serif;
	display: block;
	font-size: 1.1em;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #ff7604;
}

hr {
	border: 0;
	height: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
hr.break {
	margin: 20px 0px 20px 0px;
	border: 7px solid #dfe4ec;
	background: #dfe4ec;
	border-radius: 0;
}
hr.break.orange {
	border-color: #ff7604;
	background: #ff7604;
}
hr.break.blue {
	border-color: #00204f;
	background: #00204f;
}


ul, ol {line-height: 1.2em;}
li {margin-bottom: 0.4em;}
p {margin-top: 0em; margin-bottom: 1em; margin-left: 0;	margin-right: 0;}
strong {font-weight: bold;}
em {font-style: italic;}

.align-top {margin-top: 0; padding-top: 0;}
.smallfont {font-size: 0.9em;}
.nobr {display:inline;}
.nowrap {white-space: nowrap;}
.center {text-align: center;}
.right {text-align: right;}
.left {text-align: left;}
.blocksatz {text-align: justify;}
.kursiv {font-style: italic;}
.fett {font-weight: bold;}
.col_padding {padding: 4px; 4px;} /* Randabstand standardmäßig 0, hier und da passt das nicht */

.font-red {color: #cc0000;}
.font-blue {color: #00204f;}
.font-green {color: #29a329;}
.font-orange {color: #ff7604;}
.font-darkorange {color: #662e00;}
.font-grey {color: #A9A9A9;}
.font-lightgrey {color: #C8C8C8;}
.font-white {color: #ffffff;}


/* ######### Seiteneinstellungen ############## */

.header_bigscreen {
	background: #eff2f5;
	padding: 0;
	margin: 0;
	height: 180px;
	max-height: 180px;	
	overflow: hidden;
	position: relative;
	text-align: right;
}

.header_bigscreen_text {
	position: absolute; 
	bottom: 0px;
	font-family: 'Roboto', sans-serif;
	text-align: left;	
	font-size: 38px;
	line-height: 0.9em;
	margin: 0px 0px 15px 15px;
	font-weight: normal;	
	color: #00204f;
}

.header_bigscreen img {
	margin: 0;
	padding: 0;
	margin-right: 8%;
}
	
.header_smallscreen {
	background: #eff2f5;
	padding: 0;
	margin: 0;
	height: 250px;
	max-height: 250px;		
	overflow: hidden;
	position: relative;
	text-align: right;
}

.header_smallscreen_text {
	position: absolute; 
	bottom: 0px;
	font-family: 'Roboto', sans-serif;
	text-align: left;
	font-size: 32px;
	line-height: 0.9em;
	margin: 0px 0px 10px 10px;
	font-weight: normal;	
	color: #00204f;
}

.header_smallscreen img {
	margin: 0;
	padding: 0;
}

.contentarea {
	margin-left: 8%;
	margin-right: 8%;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 0.9em;
	line-height: 1.3em;
	max-width: 1400px;
}


/* ######### Grid Aufteilungen ############## */


.row {
	display: -ms-flexbox; /* IE10 */
	display: flex;
	-ms-flex-wrap: wrap; /* IE10 */
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}

/* eine Spalte mit 75% */
.col_75 {
	-ms-flex: 75%; /* IE10 */
	flex: 75%;
	max-width: 75%;
	padding: 0px 0px;
}

/* eine Spalte mit 50% */
.col_50 {
	-ms-flex: 50%; /* IE10 */
	flex: 50%;
	max-width: 50%;
	padding: 0px 0px;
}

/* eine Spalte mit 25% */
.col_25 {
	-ms-flex: 25%; /* IE10 */
	flex: 25%;
	max-width: 25%;
	padding: 0px 0px;
}
.col_25 img {
	margin-top: 0px;
	vertical-align: middle;
}

/* der neue Randabstand 0 passt in Fieldsets nicht */
fieldset .col_25, fieldset .col_50, fieldset .col_75 {
	padding: 2px 2px;
}

/* einen Text gleichmäßig auf 2 Spalten verteilen */
.text_2spaltig {
	padding: 0px 0px 10px 0px;
	column-count: 2;
}


/* ######### Tabellen ############## */

table {
	border-collapse:collapse;
	border-spacing:0;
	padding: 0;
	width: 100%;
}
th {
	text-align:center;
	vertical-align:top;
	padding: 7px;
	background: #eff2f5;
	font-weight: bold;
	border-top: 1px solid #bfc9d9;
}

tr {	
	border-color: #bfc9d9;
    border-width: 1px 0px 1px 0px;
    border-style: solid;
}

td {
	text-align:left;
	vertical-align:top;
	padding: 7px;
}

.td-blue {
	background-color: #ecf2f9;
}

.tbl-inh-style1 {
	font-size: 1.1em;
	color: #00204f;
}

.tbl-inh-style2 {
	margin-top: 2px;
	color: #A9A9A9;
	font-style: italic;
	font-size: 0.9em;
}

.tbl-inh-style3 {
	font-size: 1.0em;
	font-style: italic;
}

.tbl-inh-style4 {
	margin-top: 7px;
	margin-bottom: 7px;
	font-size: 0.9em;
}

.tbl-inh-style4 span {
	padding: 3px;
	background-color: #d3dfdf;
	background-color: #e1eaea;
}


/* ######### Teaserbox ############## */

.teaserbox {
	margin-top: 10px;
	padding: 20px;
	border-radius: 0px;
	font-size: 1.0em;
}

.teaserbox-alt {background: #eff2f5;}
.teaserbox-linked {cursor: pointer;}
.teaserbox-head {padding-right: 10px; text-align: right;}
.teaserbox-head h2 {margin: 0 0 15px 0; font-size: 1.05em; font-weight: bold;}
.teaserbox-head i {margin-right: 7px; color: #ff7604}
.teaserbox-content {padding: 20px; border-left: 1px solid; border-color: #dfe4ec;}


/* ######### Boxen in verschiedenen Farben ############## */

.box {
	font-size: 1.0em;
	line-height: 1.3em;
	margin: 0px;
	padding: 15px;
	border: 0;
	background: #eff2f5;
	color: #00204f;			
}

.box h3 {
	text-transform: uppercase;
	display: block;
	font-size: 1.1em;
	margin-top: 0;
	margin-bottom: 1.2em;
	margin-left: 0;
	margin-right: 0;
	font-weight: bold;
	color: #00204f;
}

.box.schmal {padding: 4px;}

.box h3 i {font-size: 1.2em; margin-right: 8px; color: #00204f}
.box i {font-size: 1.1em; color: #00204f; margin-right: 5px;}
.box ul {margin-left: 25px;	line-height: 1.4em;	margin-top: 0;	margin-bottom: 0;}
.box li {margin-bottom: 0.5em;}
.box a { color: #0052cc; }
.box a:hover, .box a:focus { color: #ff7604; }
.box-button-right {text-align: right; padding-top: 10px;}

.box.box-lightblue {background: #dfe4ec; color: #00204f; }
.box.box-lightblue h3 {color: #00204f;}
.box.box-lightblue h3 i {color: #00204f;}
.box.box-lightblue i {color: #00204f;}
.box.box-lightblue a {color: #0052cc;}
.box.box-lightblue a:hover, .box.blue a:focus {color: #ff7604;}

/* Weiße Boxen: Nur wegen der Randabstände im Zusammenspiel mit anderen Boxen. Sonst alles Standard */
.box.box-white {color: #666666; background: #ffffff; }
.box.box-white h3 {text-transform: none;}

.box.box-orange {background: #ff7604; color: #ffffff;}
.box.box-orange h3 {color: #662e00;}
.box.box-orange h3 i {color: #662e00;}
.box.box-orange i {color: #662e00;}
.box.box-orange a {color: #662e00;}
.box.box-orange a:hover, .box.box-orange a:focus {color: #662e00;}
.box.box-orange hr {border-top: 1px solid #662e00; border-bottom: none;}
.box.box-orange tr {border-color: #662e00;}

.box.box-blue {background: #00204f; color: #ffffff; }
.box.box-blue h3 {color: #99c2ff;}
.box.box-blue h3 i {color: #99c2ff;}
.box.box-blue i {color: #99c2ff;}
.box.box-blue a {color: #99c2ff;}
.box.box-blue a:hover, .box.blue a:focus {color: #ff7604;}



/* Alternative Farben für Buttons in Boxen*/

.box .button, .box .button-ani, .box .button-small, .box .button-x-small {
  background-color: #eff2f5;
  color: #00204f;
  border-color: #00204f;
}
.box .button:hover, .box .button-ani:hover, .box .button-small:hover, .box .button-x-small:hover {
  background-color: #00204f;
  color: #ffffff;
  border-color: #00204f;
}

.box.box-orange .button, .box.box-orange .button-ani, .box.box-orange .button-small, .box.box-orange .button-x-small {
  background-color: #ff7604;
  color: #ffffff;
  border-color: #ffffff;
}
.box.box-orange .button:hover, .box.box-orange .button-ani:hover, .box.box-orange .button-small:hover, .box.box-orange .button-x-small:hover {
  background-color: #ffffff;
  color: #ff7604;
  border-color: #ffffff;
}
.box.box-orange .button-active {
  background-color: #ffffff;
  color: #ff7604;
  border-color: #ffffff;
  cursor: default;
}

.box.box-blue .button, .box.box-blue .button-ani, .box.box-blue .button-small, .box.box-blue .button-x-small {
  background-color: #00204f;
  color: #ffffff;
  border-color: #ffffff;
}
.box.box-blue .button:hover, .box.box-blue .button-ani:hover, .box.box-blue .button-small:hover, .box.box-blue .button-x-small:hover, .box.box-blue .button-active {
  background-color: #ffffff;
  color: #00204f;
  border-color: #ffffff;
}


/* ######### LIST GROUP ############## */

.list-group {
    margin: 0px;
    padding: 0px;
}
.list-group-item, .list-group-item.active {
    position: relative;
    display: block;
    padding: 10px 15px;
    margin-bottom: -1px;
    background: #f9fafb;
	border: 1px solid #dfe4ec;
	font-size: 1.05em;
}
.list-group-item:first-child {
    border-top-right-radius: 0px;
    border-top-left-radius: 0px;
}
.list-group-item:last-child {
    margin-bottom: 0;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
}
.list-group-item a {}
.list-group-item i {
	color: #00204f;
	font-size: 1.3em;
	margin-right: 7px;
}
.green.list-group-item i {
   color: #29a329;
}


.list-group-item.active:hover {
    background: #ffffff;
	cursor: pointer;
}
.list-group-item.active:hover i {
	color: #ff7604;
}

.list-group-item.selected {
	background: #ff7604;
	color: #662e00;
	font-weight: bold;
}
.list-group-item.selected i {
	color: #662e00;
}

.list-group-contentblock {
    padding: 20px;
	margin: 0px;
	border-left: 5px dotted #ff7604;
	border-right: 1px solid #dfe4ec;
	background: #ffffff;
	font-size: 1.0em;
}




/* ######### DIVERSES ############## */

.breadcrumb {
font-size: 0.8em;
	border-bottom: 1px solid #c7ced1;
}
.breadcrumb i {
	padding: 0px 5px;
}

.bildunterschrift {
	background:#eff2f5;
	color: #666666;
	font-size: 0.8em;
	line-height: 1.2em;
	font-style: italic;
	padding: 5px 3px 5px 3px;
	margin: 0;
}

.erfolgsmeldung {
	width: 75%;
	margin: 0px auto;
	background: #d6f5d6;
	color: #333333;
	border: 1px solid #333333;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 1px 2px 4px rgba(0,0,0,.4);
	padding: 10px 34px;
	text-align: center;
	font-size: 1.2em;
}

.erfolgsmeldung i {
	padding: 0px 0px 10px 0px;
	font-size: 2.5em;
	color: #70c270;
}

.fehlermeldung {
	width: 75%;
	margin: 0px auto;
	background: #ffe6e6;
	color: #333333;
	border: 1px solid #333333;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	box-shadow: 1px 2px 4px rgba(0,0,0,.4);
	padding: 10px 34px;
	text-align: center;
	font-size: 1.2em;
}

.fehlermeldung i {
	padding: 0px 0px 10px 0px;
	font-size: 2.5em;
	color: #cc0000;
}




/* ######### FOOTER ############## */

.bottom {
  background:#eff2f5;
  padding: 20px;
  margin: 0;
  font-size : 0.8em;
  text-align: left;
  color: #666666;
}

.bottom ul {padding-left: 5px; list-style: none; line-height: 2em;}
.bottom ul i{padding-right: 8px;}
.bottom a {color: #666666; text-decoration: none;}
.bottom a:hover, a:focus {color: #ff7604; text-decoration: none;}

.footer {
	background:#00204f;
	padding: 0px 20px 20px 20px;
	margin: 0;
	font-size : 0.8em;
	line-height: 1.3em;
	text-align: right;
	color: #ffffff; 
}

.logo-footer {
	text-align: left;
}


.footer a {color: #66a3ff; text-decoration: none;}
.footer a:hover, a:focus { color: #ff7604; text-decoration: underline;}

.back-to-top {font-size : 4.0em; text-align: right; padding-top: 15px; font-weight: bold; }
.back-to-top a{color: #66a3ff;}
.back-to-top a:hover{color: #ff7604;}


/* ######### Tooltipps ############## */

/* Tooltips via jQuery UI: Standardwerte �berschreiben */
.mu-tooltip {
	padding: 0 !important;
	max-width: 220px !important;
	border-width: 0 !important;
	background: transparent !important;
}
/* Tooltips via jQuery UI: eigene Anpassungen */
.ui-tooltip .ui-tooltip-content {
  max-width: 220px;
  background-color: #00204f;
  color: #ffffff;
  line-height: 1.2em;
  font-size: 0.8em;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
}
/* Tooltips via jQuery UI: nach unten zeigende Spitze */
.ui-tooltip .ui-tooltip-content:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #00204f transparent transparent transparent;
}


/* ######### Rödelschnecke ############## */

.roedelschnecke {
	display: none;
}
.roedelschnecke-background {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	backdrop-filter: blur(10px);
	/* Inhalt zentrieren */
	display: flex;
	align-items: center;
	justify-content: center;
}
.roedelschnecke-spinner {
	color: #808080;
}


/* ######### PSA-Sets ############## */

.navigationsleiste-onlinekatalog {
	padding: 8px;
	margin: 10px 0;
	color: #666666;
	background-color: #eff2f5;
	border-radius: 6px;
	border: 2px solid #bfc9d9;
	font-size: 1.0em;
	width: 100%;
}

.cr-ang-artikel-checkbox {
	margin-top: 6px;
	transform: scale(1.2, 1.2);
	cursor: pointer;
}

.cr-gruppeninhalt:not(.cr-zeile-deaktiviert) .cr-pos {
	background-color: #d6f5d6;
	border: 1px solid #9cc99c;
}

.cr-zeile-deaktiviert {
	opacity: 0.8;
}
.cr-zeile-deaktiviert input:not(.cr-ang-artikel-checkbox) {
	cursor: default;
}

.cr-weitere-varianten {
	margin-top: 5px;
}
.cr-weitere-varianten .cr-weitere-varianten-funktionen .cr-weitere-varianten-funktionen-toggle-button {
	margin-right: 3px;
}
.cr-weitere-varianten .cr-weitere-varianten-funktionen .cr-weitere-varianten-funktionen-toggle-text {
	user-select: none;
}
.cr-weitere-varianten-funktionen-toggle-text {
	font-size: 1.0em;
}
.cr-weitere-varianten-funktionen-toggle-text:hover {
	text-decoration: underline;
}

.cr-weitere-varianten .cr-weitere-varianten-liste {
	outline: 2px dotted #ccc;
	margin-top: 5px;
	max-height: 150px;
	overflow-y: auto;
	padding: 5px 0;
	font-size: 0.9em;
}
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante {
	display: table-row;
}
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-foto,
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-name,
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-preis,
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-aktion {
	display: table-cell;
	padding: 0 5px;
	vertical-align: middle;
}
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-foto {
	width: 35px;
	min-width: 35px;
	text-align: center;
}
.cr-weitere-varianten .cr-weitere-varianten-liste .cr-weitere-variante .cr-weitere-variante-foto img {
	max-height: 35px;
	max-width: 35px;
}


/* ######### News ############## */

.cr-news-content {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: auto 350px 50px;
}
.cr-news-text,
.cr-news-erstes-foto,
.cr-news-fotoleiste-vertikal {
}
.cr-news-fotoleiste-vertikal {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.cr-news-fotoleiste-foto {
}
.cr-news-fotoleiste-foto a {
	display: block;
	line-height: 0;
}



/* ######### Cookies ############## */

.cookie {position: fixed; bottom: 0; left: 0; right: 0; background: #d9d9d9; padding: 20px; font-size: 0.9 em;}
.cookie a.button {cursor: pointer; background: #008000; padding: 8px 20px; margin-left: 10px; border-radius: 10px; font-weight: bold; color: #fff; float: right;}
.cookie a.button:hover {background-color: #00b300; color: #fff; }
.cookie p.cookiemessage {display: block; padding: 0; margin: 0;}


/* ######### Knotenkunde ############## */

.knotenvorschau {
	width: 80px;
	height: 60px;
	margin: 7px;
	border-width: 1px;
	border-style: solid;
	border-radius: 10px;

	/* SCALE */
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	transform: scale(1);

	/* VERZÖGERUNG */
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-ms-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.knotenvorschau:hover {
	-webkit-transform: scale(1.1);
	-moz-transform: scale(1.1);
	-ms-transform: scale(1.1);
	-o-transform: scale(1.1);
	transform: scale(1.1);
}



/* ######### Formulare ############## */

fieldset {
	color: #666666;
	border-radius: 3px;
	padding: 7px;
	margin: 0px;
	border: 1px solid #bfc9d9;
	width: 100%;
	min-width: 0; /* browser default(min-width: -webkit-min-content;). musste �berschrieben werden, damit overflow-x:auto bei div auch in einem fieldset funzt*/
}
legend {
	color: #00204f;
	font-size: 0.9em;
	font-style: italic;
	margin: 5px;
	padding: 5px;
}

label {margin: 5px;	cursor: pointer;}
form p {padding-bottom: 5px;}

input[type=number], [type=date], input[type=text], input[type=tel], input[type=email], input[type=password], select, textarea {
  font-size: inherit; /* Browser übernehmen für Eingabefelder input und textarea nicht ohne weitere Angaben die Schriftfamilie */
  font-family: inherit;
  padding: 12px 20px;
  margin: 4px 0px 8px 0px;
  background: white;
  display: inline-block;
  border: 1px solid #dfe4ec;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  -webkit-transition: 1s;
  transition: 1s;
  outline: none;
}

select {padding: 6px 10px;}

input[type=number] {padding: 3px; margin: 0; width: 3em;}
input[type=radio], [type=checkbox] {margin: 5px;}
input.larger {width: 1.5em;	height: 1.5em;}
input:focus, select:focus, textarea:focus {border: 1px solid #ff7604;}

/* Placeholdertag kann verwirren. Wird ausgeblendet, wenn Feld aktiviert */
::placeholder {color: #A9A9A9; opacity:1; transition: opacity 1s;}
:focus::placeholder {opacity:0;}


/* ######### Buttons ############## */


.button, .button-ani {
  background-color: #ffffff;
  color: #00204f;
  border: 2px solid #00204f;
  border-radius: 0px;
  padding: 8px 30px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em; margin: 2px;
  font-weight: bold;
  transition: all 0.5s;
  cursor: pointer;
}
.button:hover, .button-ani:hover{
  background-color: #00204f;
  color: #ffffff;
  /*  wieder deaktiviert box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);  */
}

/* Ergänzungen für den animierten Button */
.button-ani span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.5s;
}

.button-ani span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.3s;
}

.button-ani:hover span {
  padding-right: 20px;
}

.button-ani:hover span:after {
  opacity: 1;
  right: 0;
}


/* Buttons kleinere Variante */
.button-small {
  background-color: #ffffff;
  color: #00204f;
  border: 1px solid #00204f;
  border-radius: 0px;
  padding: 3px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.0em; margin: 2px;  
  -webkit-transition-duration: 0.5s; /* Safari */
  transition-duration: 0.5s;
  cursor: pointer;
}

/* Buttons noch kleinere Variante */
.button-x-small {
  background-color: #ffffff;
  color: #00204f;
  border: 1px solid #00204f;
  border-radius: 0px;
  padding: 2px 15px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 0.9em; margin: 1px;
  -webkit-transition-duration: 0.5s; /* Safari */
  transition-duration: 0.5s;
  cursor: pointer;
}

.button-small:hover, .button-x-small:hover {
  background-color: #00204f;
  color: #ffffff;
}


/* ######### Kundenbereich ############## */

.kundenbereich-logout-link {text-align: right; margin-top: 3px;}
.kundenbereich-logout-link a {margin-left: 8px;}


/* ######### Anpassungen Responsive Layout ############## */

/* Header für Handybildschirm standardmäßig ausblenden */
  .header_smallscreen {
    display: none;
  }
  

/* Änderungen unter 950px Fensterbreite */
@media screen and (max-width: 950px)
{
	.col_25 { -ms-flex: 50%; flex: 50%; max-width: 50%;}
	.col_50 { -ms-flex: 100%; flex: 100%; max-width: 100%;}
	.col_75 { -ms-flex: 50%; flex: 50%; max-width: 50%;} 

	body {font-size: 1.0em;} 

	.contentarea {margin-left:3%; margin-right:3%;} /* Angepasster Randabstand beim Inhaltfester */	
	.text_2spaltig {column-count: 1;}	
	
	.footer {text-align: center;}
	.logo-footer {text-align: center;}
	.back-to-top {text-align: center;}
}	
	

/* Änderungen unter 750px Fensterbreite */
@media screen and (max-width: 750px)
{
	.col_25 {-ms-flex: 100%; flex: 100%; max-width: 100%;}
	.col_50 {-ms-flex: 100%; flex: 100%; max-width: 100%;}
	.col_75 {-ms-flex: 100%; flex: 100%; max-width: 100%;}

	body {font-size: 1.0em;}	
	
	.contentarea {margin-left:1%; margin-right:1%;} /* Angepasster Randabstand beim Inhaltfester */		
	.teaserbox-head {text-align: left;} /* Überschriften der Teaserbox nicht mehr rechtsbündig */
	.handy-hide {display: none;} /* ein Element ausblenden */	
	.header_bigscreen {	display: none;} /* Header groß ausblenden */	
	.header_smallscreen {display: inherit;} /* und Header klein einblenden */
}