/*@charset "utf-8";*/
/* CSS Document für die Styles für die KDSF-Module */
*{box-sizing: border-box;}
main ul{ padding:0; margin: 0.5em 0 0em 1em; font-size:inherit; list-style-type:square;}
main ul li{ margin-bottom:0em;}

.stepping-menu{width:100%; font-size:0.9em; border-bottom:1px dotted #333333; padding-bottom:0.5em}

/************************************* 
 Alle Boxen mit Auflistungen von Basisdaten, Modulen etc.
*************************************/
/* Startseite Listenform */
.gesamteintraegeContainer{background-color:#006d83; color:#ffffff; border-radius:0.25em; margin-bottom:0.5em; padding:2em 2em 1em 5em; width:100%}
.eintragContainer-obertitel{display:inline-block; width:100%; margin-bottom:0.5em; margin-top:0.5em; padding-top:0.25em; border-top:1px dotted #b4dbc9}
.eintragContainer{width:100%; display:flex; align-items:middle; line-height:30px}
.eintragContainerHoch{width:100%; display:flex; align-items:middle; line-height:46px; padding-left:1em}
.eintragContainer-title {float:left; width:25em; vertical-align:middle}
.eintragContainer-title::before{content:url(../../img/misc/eisquadrat.svg); padding-right:0.5em}
.eintragContainer-buttons{float:left}

.gesamteintraegeContainerX{background-color:#006d83; color:#ffffff; border-radius:0.25em; margin-bottom:0.5em; padding:2em 5em 1em 5em; width:100%}
.eintragContainerX{width:100%; display:flex; align-items:middle; line-height:1.7; margin-bottom:0.75em; border-bottom:1px dotted #b4dbc9}
.eintragContainerX-vorTitle{float:left; width:20px; height:30px; background-image:url(../../img/misc/eisquadrat.svg); background-repeat:no-repeat; background-position:0 5px}
.eintragContainerX-title {float:left; width:38em; line-height:1.5; vertical-align:middle}
.eintragContainerX-buttons{float:left; width:6em; text-align:right}
/* Legoförmige Buttons (bei Anwendungsfallbezogenen Modulen */
.legobutton{border:0; width:70px; height:38px; margin-left:0.75em; background:url(../img/icons/baustein_button_orange.png); background-repeat:no-repeat; background-size:70px 38px; color:#ffffff}
.legobutton:hover{background:url(../img/icons/baustein_button_petrol.png); background-repeat:no-repeat; background-size:70px 38px}
.legobutton-title{display:inline-block; padding-top:7px; font-size:0.9em}
.legobutton-small{border:0; width:60px; height:30px; margin-left:0.5em; background:url(../img/icons/baustein_button_orange.png); background-repeat:no-repeat; background-size:60px 30px; color:#ffffff}
.legobutton-small:hover{background:url(../img/icons/baustein_button_petrol.png); background-repeat:no-repeat; background-size:60px 30px}
.legobutton-small-title{display:inline-block; padding-top:7px}
/* Iconbuttons */
.iconhuelle{display:inline-block; width:66px; margin:0 6px; cursor:pointer}
.iconbutton {width:66px; height:39px; perspective:1500}
.iconbutton:hover .turnaround { transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */}
.iconbutton .front-baum { background: url(../img/icons/baum_button.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton .front-detail { background: url(../img/icons/details_button.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton .back { background-color:#f07d00; color:white; line-height:37px; border:1px solid #f07d00; border-radius:0.25em}
.turnaround { transition: 0.8s; transform-style: preserve-3d; position: relative; height: 100%;}
.front-baum, .front-detail, .back {backface-visibility: hidden; position: absolute; width: 100%; height: 100%;}
.front-baum, .front-detail { z-index: 2; }
.back {	transform: rotateY(180deg); z-index: 1; color:white; text-align:center}
.back-h2 {font-size:.6em}
/* Iconbuttons small*/
.iconhuelle-small{display:inline-block; width:50px; margin:0 3px; cursor:pointer}
.iconbutton-small {width:50px; height:39px; perspective:1500}
.iconbutton-small:hover .turnaround-small { transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */}
.iconbutton-small .front-baum-small { background: url(../img/icons/baum_button_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-small .front-detail-small { background: url(../img/icons/details_button_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-small .front-excel-small { background: url(../img/icons/excel_button_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-small .back-small { background-color:#f07d00; color:white; line-height:35px; font-size:0.85em; border:1px solid #f07d00; border-radius:0.25em}
.turnaround-small { transition: 0.8s; transform-style: preserve-3d; position: relative; height: 100%;}
.front-baum-small, .front-detail-small, .front-excel-small, .back-small {backface-visibility: hidden; position: absolute; width: 100%; height: 100%;}
.front-baum-small, .front-detail-small, .front-excel-small { z-index: 2; }
.back-small {transform: rotateY(180deg); z-index: 1; color:white; text-align:center}
.back-small-h2 {font-size:.6em}
/* Iconbuttons very-small*/
.iconhuelle-very-small{display:inline-block; width:56px; margin:0px 3px; cursor:pointer}
.iconbutton-very-small {width:55px; height:30px; perspective:1500}
.iconbutton-very-small:hover .turnaround-very-small { transform: rotateY(180deg); /* Beim Mouse-Over wird die Szene umgedreht */}
.iconbutton-very-small .front-baum-very-small {background: url(../img/icons/baum_button_very_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-very-small .front-detail-very-small {background: url(../img/icons/details_button_very_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-very-small .front-excel-very-small { background: url(../img/icons/excel_button_very_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-very-small .front-filter-very-small { background: url(../img/icons/filter_button_very_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-very-small .front-liste-very-small { background: url(../img/icons/liste_button_very_small.png) 0 0 no-repeat; background-color:#006d83; border:1px solid #ffffff; border-radius:0.25em}
.iconbutton-very-small .back-very-small { background-color:#f07d00; color:white; line-height:28px; font-size:0.85em; border:1px solid #f07d00; border-radius:0.25em}
.turnaround-very-small { transition: 0.8s; transform-style: preserve-3d; position: relative; height: 100%;}
.front-baum-very-small, .front-detail-very-small, .front-excel-very-small, .front-filter-very-small, .front-liste-very-small, .back-very-small {backface-visibility: hidden; position: absolute; width: 100%; height: 100%;}
.front-baum-very-small, .front-detail-very-small, .front-excel-very-small, .front-filter-very-small, .front-liste-very-small { z-index: 2; }
.back-very-small {transform: rotateY(180deg); z-index: 1; color:white; text-align:center}
.back-very-small-h2 {font-size:.6em}

/************************************************
 Basisdaten und Module in Detaildarstellung
************************************************/
.grausection{margin-bottom:1em; padding:1em; border-radius:0.15em; background-color:#f0f0f0; color:#333333; border:1px solid #f0f0f0}
.bd-section{width:100%; background-color:#006d83; margin-bottom:0.3em; padding:1em 1em 0.5em 1em; width:100%; color:#ffffff; border-radius:0.15em}
.bd-section-zentral{background-color:#f07d00}
.bd-section a{color:#ffffff}
.bd-untersection{background-color:#b4dbc9; margin:0.3em 0 0.3em 0; padding:1em 1em 0.5em 1em; color:#006d83 !important; border:1px solid #cbebf1; border-radius:0.15em}
.bd-untersection a{color:#006d83}

/* Formatierung für die Summaries in den Detaildarstellungen */
/* Oberelemente */
.element-details summary.my-element{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details summary.my-element::marker{color:transparent; font-size:0px}
.element-details summary.my-element::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details details[open] summary.my-element::after{ transform: rotate(45deg);}
/* Unterelemente (Elemente, die im Detailsbereich eines Oberelements hängen) mit verschiedenen Hierarchiestufen */
.element-details2 summary.my-element2{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details2 summary.my-element2::marker{color:transparent; font-size:0px}
.element-details2 summary.my-element2::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details2 details[open] summary.my-element2::after{ transform: rotate(45deg);}
.element-details3 summary.my-element3{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details3 summary.my-element3::marker{color:transparent; font-size:0px}
.element-details3 summary.my-element3::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details3 details[open] summary.my-element2::after{ transform: rotate(45deg);}
.element-details4 summary.my-element4{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details4 summary.my-element4::marker{color:transparent; font-size:0px}
.element-details4 summary.my-element4::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details4 details[open] summary.my-element4::after{ transform: rotate(45deg);}
.element-details5 summary.my-element5{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details5 summary.my-element5::marker{color:transparent; font-size:0px}
.element-details5 summary.my-element5::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details5 details[open] summary.my-element5::after{ transform: rotate(45deg);}
.element-details6 summary.my-element6{position: relative; cursor:pointer; font-weight:bold; vertical-align:top; margin-bottom:0}
.element-details6 summary.my-element6::marker{color:transparent; font-size:0px}
.element-details6 summary.my-element6::after{content:  "+"; position: absolute; font-weight: bold; right: 0.5em; transition: all 0.5s;} 
.element-details6 details[open] summary.my-element6::after{ transform: rotate(45deg);}
/* Innerhalb der details */
.bd-section .bd-div{width:100%; margin-top:0.5em; padding-top:0.5em; border-top:1px dotted #FFFFFF; clear:both}
.bd-untersection .bd-div{width:100%; margin-top:0.5em; padding-top:0.5em; border-top:1px dotted #006d83; clear:both}
.bd-label{float:left; width:8em; padding:0.5em 0} /* für Module und Anwendungsfälle -> ggf. noch mit bd-label-details tauschen, also ersetzen */
.bd-text-normal{ float: left; width: calc(100% - 8em); padding:0.5em 0}
.bd-text-normal a{text-decoration:underline}
.bd-label-details{float:left; width:10em; padding:0.3em 0; font-style:italic}
.bd-text-details{ float: left; width: calc(100% - 10em); padding:0.3em 0} /* für Module und Anwendungsfälle -> ggf. noch mit bd-text-details tauschen, also ersetzen */
.bd-text-details a{text-decoration:underline}
/***********************************
 Formatierungen für die Abgleiche
***********************************/ 
.sichtenauswahl_table{width:100%; border-collapse:separate; border-spacing:0.35em; font-size:14px; font-size:0.875rem; font-size:87%; }
.sichtenauswahl_farbe{width:1em; border-radius:0.25em}
.sichtenauswahl_zusatzfeld{padding:1em; text-align:center; background-color:#004d61; color:#ffffff; border-radius:0.25em; margin-bottom:0.3em}
.sichtenauswahl_text{padding:1em 2em; text-align:center; background-color:#006d83; color:#ffffff; cursor:pointer; border-radius:0.25em; margin-bottom:0.3em}
.sichtenauswahl_text:hover{background-color: #f07d00;}

.sichtenauswahl{width:100%; display:inline-block; font-size:14px; font-size:0.875rem; font-size:87%; line-height:1.7; padding:1em 2em; text-align:center; background-color:#006d83; color:#ffffff; cursor:pointer; border-radius:0.25em; margin-bottom:0.3em}
.sichtenauswahl:hover{background-color: #f07d00;}

.abgleichinfos-maindiv{width:100%; 14px; font-size:0.875rem; font-size:87.5%; line-height:2; text-align:left}
.abgleichinfos-maindiv div {padding:0.2em 0; border-top:1px dotted #333333}
.abgleichinfos-label{display:inline-block; width:16em; vertical-align:top}
.abgleichinfos-text{display:inline-block; width:90%; max-width:44.5em; vertical-align:top}
.abgleiche-details > summary{list-style-type:none; margin:0; padding:0; cursor:pointer;}
.abgleiche-details > summary:after{display:inline-block; font-family: 'Genericons'; content: '\f431'; margin:0; padding-left:3px}
.abgleiche-details[open] > summary:after {content: '\f432'}
/***********************************
 Diagrammformatierungen
***********************************/
.objekt-caption{list-style-type:none; font-weight:bold; margin:0;}
.objekt-caption::before{font-family: 'Genericons'; content: '\f431 '; vertical-align:top}
.objekt-caption > span{display:inline-block; width:90%; margin-left:0.3rem}
.daten-details[open] > .objekt-caption::before {font-family: 'Genericons'; content: '\f432 '}

.details-format > summary{list-style-type:none; margin:0; padding:0; cursor:pointer}
.details-format > summary:after{display:inline-block; font-family: 'Genericons'; content: '\f431'; margin:0; padding-left:3px}
.details-format[open] > summary:after {content: '\f432'}
.content-format{display:inline-block; width:100%; margin:0; padding:0; hyphens:auto}
.content-format a{color:#ffffff; text-decoration:underline}
/* für den Elementtext mit nachfolgendem Text mit Pfeil (bei Modulen im aufklappbaren Elementbereich) */
.element-details > summary{list-style-type:none; font-weight:bold; margin:0; cursor:pointer}
.element-details > summary:before{display:inline-block; font-family: 'Genericons'; content: '\f431 '; vertical-align:top}
.element-details[open] > summary:before {font-family: 'Genericons'; content: '\f432 '}
.summary-text{display:inline-block; font-family:Verdana, Geneva, sans-serif; font-weight:bold; padding-left:0.25rem; width:95%;}
/* für Details innerhalb der Elementdarstellungen */
.details-format-punkt > summary{list-style-type:none; margin:0; padding:0; cursor:pointer}
.details-format-punkt > summary:before{display:inline-block; content: '\2022 '; vertical-align:top}
.details-format-punkt > summary:after{display:inline-block; font-family: 'Genericons'; content: '\f431'; margin:0; padding-left:3px}
.details-format-punkt[open] > summary:after {content: '\f432'}

/***********************************
 Misc
***********************************/
.link-lupe{text-decoration:none !important; line-height:16px}
.link-lupe:after{display:inline-block; font-size:16px; font-family: 'Genericons'; content: '\f402'; margin:0; padding:0; padding-left:3px;}
.weiss{color:#ffffff !important}
.linie-dotted-weiss{border-bottom:1px dotted #ffffff}
.linie-dotted-anthrazit{border-bottom:1px dotted #666666}

.zweig-untercaption{position:absolute; z-index:105; margin-left:-4em; margin-top: -2.1em; color:#333333; border:1px solid #f07d00; padding:0.2em 0.4em; font-size:0.9em; background-color: #FFFFFF}
.zweig-label{position:absolute; z-index:105; margin-left:-4em; color:#333333; border:1px solid #f07d00; padding:0.2em 0.4em; font-size:0.9em; background-color: #FFFFFF}

.elementverlinkung{display:inline-block; width:100%}
.elementverlinkung:before{content: '\2738 '; padding-right:0.2em}
.pfeilchen, .pfeilchen-petrol{font-family:Verdana, Geneva, sans-serif; font-weight:normal}
.pfeilchen:before { display:inline-block; font-family: 'Genericons'; content: "\f429"; color:#f07d00; margin-left:0.5em; vertical-align:top !important}
.pfeilchen-petrol:before {content: "\f429 "; color:#006d83;}
.pfeilchen-hinten{font-family:Verdana, Geneva, sans-serif; font-weight:normal; display:inline-block; width:90%}
.pfeilchen-details{font-family:Verdana, Geneva, sans-serif; font-weight:normal; text-transform:none}
.pfeilchen-details:before {display:inline-block; font-family: 'Genericons'; content: "\f429"; color:#f07d00; margin-left:0.25em}
.link-shortliste-closed{cursor:pointer}
.link-shortliste-closed:after{display:inline-block; font-family: 'Genericons'; content: '\f431'; margin:0; padding-left:3px}
.link-shortliste-opened{cursor:pointer}
.link-shortliste-opened:after{display:inline-block; font-family: 'Genericons'; content: '\f432'; margin:0; padding-left:3px}

/************************************
 Einrückungen und Listen
************************************/ 
.eingerueckt0-9{padding-left:0.9em}
.eingerueckt1{padding-left:1em}
.eingerueckt1-25{padding-left:1.25em}
.eingerueckt1-5{padding-left:1.5em}
.eingerueckt2{padding-left:2em}
.eingerueckt3{padding-left:3em}
.eingerueckt4{padding-left:4em}
.eingerueckt5{padding-left:5em}
.eingerueckt6{padding-left:6em}
.eingerueckt7{padding-left:7em}
.eingerueckt8{padding-left:8em}
.eingerueckt9{padding-left:9em}
.eingerueckt10{padding-left:10em}

.hinten-77{width:77%}
.hinten-80{width:80%}
.hinten-82{width:82%}
.hinten-85{width:85%}
.hinten-90{width:90%}
.hinten-95{width:95%}
.hinten-99{width:99%}
.hinten-100{width:100%}

.listenform-vorn-vollkreis{display:inline-block; vertical-align:top;}
.listenform-vorn-vollkreis:before{content: '\2022 '}
.listenform-hinten-vollkreis{display:inline-block; font-family:Verdana, Geneva, sans-serif; font-weight:normal}
.listenform-vorn-halbkreis{display:inline-block; vertical-align:top;}
.listenform-vorn-halbkreis::before{content: '\26AC '}
.listenform-hinten-halbkreis{display:inline-block; font-family:Verdana, Geneva, sans-serif; font-weight:normal}
.listenform-hinten{display:inline-block; font-family:Verdana, Geneva, sans-serif; font-weight:normal}

.abstand-02{margin-bottom:0.2em}
.abstand-03{margin-bottom:0.3em}

/**************************************
 Kram
**************************************/
h2:before{ width: 0rem; height: 0rem; margin: 0rem; border-left:none; }
.datenhaltungs-objekt{background-color:#9fc755; color:#ffffff !important}
.datenhaltungs-text{color:#ffffff !important}
.klappenlink {text-decoration:underline; padding-left:1.5em; cursor:pointer}
.symbol:after{display:inline-block; font-family: 'Genericons'; content: ' \f431'; margin:0; padding-left:5px; font-weight:bold}
.btn-disabled{background-color:#CCCCCC !important; border:1px solid #CCCCCC !important}
.btn-disabled:hover{color:#ffffff !important}
/****************************************************
 Styles für Switchbutton, die aussehen wie Schalter
****************************************************/
#switchschalter, #switchschalter-long {
	display: flex;
	flex-wrap: wrap;
	box-sizing: border-box;
	list-style-type:none;
	padding:3px;
	border:1px solid #f07d00;
	border-radius:0.75em;
	background-color:#ffffff;
	margin:0;
}
.switches-2{width:130px;}
.switches-3{width:225px;}
.switches-4{width:300px;}
#switchschalter li {width:60px; text-align:center; padding:0px; border-radius:0.75em}
#switchschalter li a{text-decoration:none; cursor:pointer}
#switchschalter-long li {width:145px; text-align:center; padding:0px; border-radius:0.75em}
#switchschalter-long li a{text-decoration:none; cursor:pointer}

#baumschalter{background-color:#f07d00}
#baumschalter-a{color:#ffffff}

@media screen and (max-width:850px){
	.abgleichinfos-label{width:100%;}
	.abgleichinfos-text{width:99%; max-width:99% !important}
	.bd-label{width:100%}
	.bd-text{width:100%; padding-left:2.25em}
	.bd-text-normal{  float: left; width:100%}
}

@media screen and (max-width:768px){
	.eintragContainer, .eintragContainerHoch{display:inline-block !important}
	.eintragContainer-title{width:100% !important}
	.eintragContainer-buttons{width:100% !important}
	.eintragContainerX{display:inline-block !important}
	.eintragContainerX-title{width:90%;}
	.eintragContainerX-buttons{width:100%; padding-left:20px; text-align:left}
}