/* ######### 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: 0px; padding-right: 0px;}
a.link-std-orange i {color: #ff7604; margin-right: 0px; padding-right: 0px;}
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.7em;
	margin-left: 0;
	margin-right: 0;
	font-weight: normal;
	color: #00204f;
}

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

h3.first {	
	margin-top: 0em;
}

h4 {
	font-family: 'Roboto', sans-serif;
	display: block;
	font-size: 1.15em;
	margin-top: 1.5em;
	margin-bottom: 0.7em;
	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;
}

/* Randabstände je nach Positionierung */
.col_75.col_75_links {
	padding-right: 4%;
}
.col_75.col_75_rechts {
	padding-left: 4%;
}

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

/* Randabstände je nach Positionierung */
.col_50.col_50_links {
	padding-right: 2%;
}
.col_50.col_50_rechts {
	padding-left: 2%;
}

/* 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;}


/* ######### E-Learning ############## */

.e-learning-box {
	padding: 15px; 
	background: #eff2f5;
	border-radius: 5px;
	font-size: 1.0em;
}

.e-learning-img {
	width: 100%; 	
	display: block;
	border-style: solid;
	border-width: 1px 1px 0px 1px;
	border-color:#dfe4ec;
}

.e-learning-bildunterschrift {
	border-style: solid;
	border-width: 0px 1px 1px 1px;
	border-color:#dfe4ec;
	background: #eff2f5;
	color: #666666;
	font-size: 0.8em;
	line-height: 1.2em;
	font-style: italic;
	padding: 5px 3px 5px 3px;
	margin: 0;
}

.e-learning-box h2, .e-learning-box h3 {margin-top: 0;}
.e-learning-box ul {margin-left: 25px;}

.fist-icon-scale, .fist-icon-noscale {
    display: inline-block;
    font-size: 1.4em;
    transition: transform 0.1s ease-in-out;
	color: #ff7604;
	width: 1.1em; /* Abstand zwischen den Icons */
}

.fist-icon-scale:hover {
    transform: translateX(2px) scale(1.1); /* nach rechts versetzten und vergrößern */
}


/* ######### 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 ############## */
/* Aktives Item bekommt Hover, Mauspointer, andere Farben (nicht ausgegraut)...,  */
/* Selected wird für list-group-item gesetzt, wenn ein Contentblock geöffnet wird, of per JS */

.list-group {
    margin: 0px;
    padding: 0px;
}
.list-group-item, .list-group-item.aktives-element
{    
    position: relative;
    display: block;
    padding: 13px;
    margin-bottom: -1px;
    background: #f9fafb;
	border: 1px solid #dfe4ec;
	font-size: 1.1em;
}

.list-group-item{
	background: #F5F5F5; /* ausgegraut, solange nicht als aktives-element gesetzt */
}

.list-group-item.aktives-element{
	color: #00204f;
}

/* accordion-table stabilisiert die Darstellung der Icons, Umbrüche etc. */
.list-group-item .accordion-table {
      width: 100%;
	  border-collapse: collapse; /* entfernt Zwischenräume */
	  border-spacing: 0;         /* zusätzlicher Abstand = 0 */
	  border: none;
	  padding: 0;
    }
.list-group-item .accordion-table td, .list-group-item .accordion-table tr {
  padding: 0;
  margin: 0;
  border: none;
}	
.list-group-item .accordion-icon-cell {
      width: 40px;
      text-align: right;
      vertical-align: top;
    }
.list-group-item .accordion-icon-cell i {
      font-size: 1.0em;
      transition: transform 0.3s ease;
      display: inline-block;
	  color: #00204f;
    }

.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 a:focus {color: #00204f; text-decoration: none;}
.list-group-item a:hover {color: #ff7604; text-decoration: none; outline: none; }

.list-group-item i {
	margin-right: 5px;
}
.list-group-item ul {margin: 3px 3px 3px 25px;}
.list-group-item li {margin: 0;}

.green.list-group-item i {
   color: #29a329;
}

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

.list-group-item.selected {
	background: #ff7604;
	color: #ffffff;
	transition: background-color 0.5s ease;
}
.list-group-item.selected i {
	color: #ffffff;
	transition: color 1.0s ease;
}

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


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

.breadcrumb {
font-size: 0.8em;
	border-bottom: 1px solid #c7ced1;
}
.breadcrumb i {
	margin: 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;
}


/* ######### FAQ ############## */

.cr-faq-antwort {
	display: none; /* zunächst alle Antworten zugeklappt lassen */
}


/* ######### 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%;}
	
	/* Randabstände je nach Positionierung */
	.col_75.col_75_links {padding-right: 2%;}
	.col_75.col_75_rechts {padding-left: 2%;}
	.col_50.col_50_links {padding-right: 0%;}
	.col_50.col_50_rechts {padding-left: 0%;}

	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;}
	
	.list-group-contentblock {
		padding: 15px 15px 5px 15px;
		margin: 0px;
		border-left: 3px dotted #ff7604;
		border-right: 3px dotted #ff7604;
	}
}


/* Ä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%;}
	
	/* Randabstände je nach Positionierung */
	.col_75.col_75_links {padding-right: 0;}
	.col_75.col_75_rechts {padding-left: 0;}
	.col_50.col_50_links {padding-right: 0;}
	.col_50.col_50_rechts {padding-left: 0;}

	body {font-size: 1.0em;}

	.contentarea {margin-left:2%; margin-right:2%;} /* 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 */
	
}