/*
	When a non-auto flex-basis is specified,
	Internet Explorer 10 and 11 always uses
	a content-box box model to calculate
	the size of a flex item,
	even if box-sizing: border-box is applied to the element.

	Wegen IE nicht: flex: 1 1 50%;
	Wegen IE: flex: 1 1 auto; min-width: 50%;

	// bei max-width funktioniert das nicht, darum  (noch im test)
	Wegen fester Gre (rem, px also ungleich %) geht nicht: flex: 1 1 auto; width: 20rem;
	Wegen fester Gre: flex: 1 1 auto; max-width: 20rem; min-width: 20rem;

*/

* {
    -ms-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

    font-family: Arial,Verdana,sans-serif;
}
/*
body, div, table, input, select  {
  	font-family: Arial,Verdana,sans-serif;
}
*/
body{
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 1.7rem);
    /*
    padding-top: 0rem;
    padding-bottom: 0rem;
    margin-top: 0rem;
    margin-bottom: 0rem;
    */
}
h1, h2, h3, h4, h5, h6 {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}
h2{
    font-size: 1.2rem;
    font-weight: bold;
}
h3,h4,h5,h6{
    font-size: 1rem;
    font-weight: bold;
}
a{
    text-decoration: none;
}
a:hover , a:focus , a.aktiv{
    text-decoration: underline;
}
dfn{
    position:absolute;
    /*
    height: 0rem;
    width: 0rem;
    */
    left:-2000rem;
}
.unsichtbar , .barriere_links_unsichtbar {
    position:absolute;
    /*
    height: 0rem;
    width: 0rem;
    */
    left:-2000rem;
}

.barriere_links_unsichtbar a:focus,
.barriere_links_unsichtbar a:active{

    display:block;
    position:absolute;

    top: 0px;
    left:+2001rem;
    z-index: 1000;

    min-width:20rem;
    padding:2px 6px;

    background-color: #B7D2F0;
    color: black;
    text-decoration: underline;
}


section > article  header a,
section > article  header h1,
section > article  header h2,
section > article  header h3,
section > article  header h4,
section > article  header h5,
section > article  header h6
{
    background-color: #F1F4F6;
    color: black;
    text-decoration: none;
}
.nebeninhalt{
    position: absolute;
    /*
    height: 0rem;
    width: 0rem;
    */
    left:-2000rem;
}

form {
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 10px;
    padding-bottom: 10px;
}

select {
    /*Wichtig fr IE damit die Selectbox nicht aus dem Rahmen */
    max-width: 100%;
}


/* startseite start*/

div.startseite_rahmen > .logo_rahmen{
    display: none;
}

div.startseite_rahmen .startseite_abschnitt{
    margin-bottom: 1rem;
}

@media only screen and (min-width: 650px) {

    /* startseite */
    div.startseite_rahmen {
        display: flex;
        flex-direction: row-reverse;
        flex-wrap: wrap;
    }

    div.startseite_rahmen > .hauptinhalt_rahmen {
        flex: 1 1 auto;
        width: 50%;
        margin-top: 1rem;
    }

    div.startseite_rahmen > .logo_rahmen {
        flex: 1 1 auto;

        display: flex;

        flex-direction: row;
        /* da wegen IE div in rahmen ist, ist die horizontale Ausrichtung egal.
        * div = display: block = text-align: center;
        */
        /* justify-content: center; */
        align-items: center;

        padding-right: 1rem;
        width: 50%;
    }

    div.startseite_rahmen > .logo_rahmen > div {
        flex: 1 1 auto;
        text-align: center;
    }

    div.startseite_rahmen > .logo_rahmen img {
        width: 100%;
        height: auto;
        max-width: 562px;
        max-height: 843px;
    }

    div.startseite_rahmen > .logo_rahmen .copyright {
        text-align: center;
    }
}

/* startseite ende*/

/* fehlerbereich und infobereich */

#infobereich{
    background-color: #1E579A;
    padding: 0.5rem;
}
#infobereich .info{
    color: #fff;
    margin-top: 1rem;
    margin-left: 1rem;
}
#fehlerbereich{
    background-color: #F2DEDE;
    padding: 0.5rem;
}
#infobereich label{
    text-decoration: none;
    color: #E1F5FD;
    font-size: 1.2rem;
    background-color: inherit;
    text-align: left;
}

#fehlerbereich .fehler:not(:empty){
    background: url("bilder/fehler.png");
    background-size: 1rem 1rem;
    background-position: left;
    background-repeat: no-repeat;
    padding-left:1.5rem;
    margin: 0rem;
/*
width: 10px;
height: 20px;
content:"";
 */
}
#fehlerbereich .info:not(:empty){
    background: url("bilder/info.png");
    background-size: 1rem 1rem;
    background-position: left;
    background-repeat: no-repeat;
    padding-left:1.5rem;
    margin: 0rem;
/*
width: 10px;
height: 20px;
content:"";
 */
}

#fehlerbereich_link {
    text-decoration: none;
    color: black;
}
#infobereich_link:hover, #infobereich_link:focus,
#fehlerbereich_link:hover, #fehlerbereich_link:focus{
    text-decoration: underline;
}

#ausschreibung_liste div.ausschreibung{
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#ausschreibung_liste div.ausschreibung_teil:nth-child(1){
    padding: 0.5rem;
    min-width: 10rem;
}
#ausschreibung_liste div.ausschreibung_teil:nth-child(2){
    padding: 0.5rem;
    min-width: 10rem;
}
#ausschreibung_liste div.ausschreibung_teil:nth-child(3){
    padding: 0.5rem;
    min-width: 10rem;
}
#ausschreibung_liste div.ausschreibung_teil:nth-child(4){
    padding: 0.5rem;
    min-width: 10rem;
}
#ausschreibung_liste div.ausschreibung_teil:nth-child(5){
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    min-width: 15rem;
    height: 15rem;
    text-align: center;
}
div.ausschreibung_liste_rahmen_karte{
    width: 100%;
    height: 100%;
    /*
    min-height: 15rem;
    max-height: 15rem;
    */
}
#lernmittel_liste > div.lernmittel:nth-child(odd){
    background-color: #DFE7F1;
}
#lernmittel_liste > div.lernmittel:nth-child(even){
    background-color: white;
}

.lernmittel_main {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-bottom: 0.2rem;
}
.lernmittelkomponenten {
    display: flex;
    width: 100%
}
.lernmittelkomponente {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    border-top: 1px solid lightgrey;
}

.lernmittelkomponente p{
    flex: 1;
    text-align: left;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

@media only screen and (max-width: 700px) {

    .lernmittelkomponente {
        flex-direction: column;
    }
    .lernmittelkomponente_child1{
        display: none;
    }
    .lernmittelkomponente_child2{
        display: none;
    }
    .lernmittelkomponente_child4{
        flex: 1;
        text-align: center;
    }
    .lernmittelkomponente_child5{
        flex: 1;
        text-align: center;
    }
}

@media only screen and (min-width: 584px) {
    #lernmittel_liste > form {
        text-align: right;
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
}
@media only screen and (min-width: 30rem){
    #lernmittel_liste div.lernmittel_teil:nth-child(1){
        min-width: 20rem;
    }
    #lernmittel_liste div.lernmittel_teil:nth-child(2){
        min-width: 20rem;
    }
}

@media only screen and (min-width: 500px) {
    #lernmittel_liste div.lernmittel {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
    }

    #lernmittel_liste div.lernmittel_teil:nth-child(1){
        flex: 1 1 0rem;
    }
    #lernmittel_liste div.lernmittel_teil:nth-child(2){
        flex: 1 1 0rem;
    }
    #lernmittel_liste div.lernmittel_teil:nth-child(3){
        flex: 1 1 0rem;
    }
    #lernmittel_liste div.lernmittel_teil:nth-child(4){
        flex: 1 1 0rem;
    }
    #lernmittel_liste div.lernmittel_teil:nth-child(5){
        flex: 1 1 0rem;
    }

}



ul.suchergebnis_parameter{
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0rem;
    padding: 0rem;
}
ul.suchergebnis_parameter li{
    margin-left: 1.5rem;
}

/* fehlerbereich und infobereich  ende*/

/* klappbar */

.klappbar{
    min-height: 5rem;
}
.klappbar.hideme{
    min-height: auto;
}
/* *:not(h2) */
.klappbar  *:not(header):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.ueberschrift):not(option){
    /* overflow: hidden; */
    max-height: 10000rem;
    transition:  0.5s linear;
}
/* *:not(h2)  */
.klappbar.hideme *:not(header):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(.ueberschrift):not(option){
    overflow: hidden;
    transition:  0.5s linear;
    max-height: 0rem;
    margin: 0rem;
    padding: 0rem;
    /* wegen den Rahmen die man zusammengeschoben sieht*/
    /* z-index: -1000; */
    border: none;
}
/*
.klappbar h1,
.klappbar h2,
.klappbar h3,
.klappbar h4,
.klappbar h5,
.klappbar h6 {
	margin-top: 0rem;
	margin-bottom: 0.5rem;
}
*/
.klappbar > h1::before,
.klappbar > h2::before,
.klappbar > h3::before,
.klappbar > h4::before,
.klappbar > h5::before,
.klappbar > h6::before,
.klappbar > header h1::before,
.klappbar > header h2::before,
.klappbar > header h3::before,
.klappbar > header h4::before,
.klappbar > header h5::before,
.klappbar > header h6::before,
.klappbar > header *.ueberschrift::before,
.klappbar > *.ueberschrift::before {
    content: "\25b2 \00A0";  /* Pfeil nach oben */
    cursor: pointer;
}
.klappbar.hideme > h1::before,
.klappbar.hideme > h2::before,
.klappbar.hideme > h3::before,
.klappbar.hideme > h4::before,
.klappbar.hideme > h5::before,
.klappbar.hideme > h6::before,
.klappbar.hideme > header  h1::before,
.klappbar.hideme > header  h2::before,
.klappbar.hideme > header  h3::before,
.klappbar.hideme > header  h4::before,
.klappbar.hideme > header  h5::before,
.klappbar.hideme > header  h6::before,
.klappbar.hideme > header *.ueberschrift::before,
.klappbar.hideme > *.ueberschrift::before {
    content: " \25bc \00A0";	/* Pfeil nach unten */
    cursor: pointer;
}

/*************** tmpKlappbar************** */
.tmpKlappbar{
    display: inline;
    min-width: 100%;
}
.tmpKlappbar .tmpKlappbar_titel_link{
    display: none;
}
.tmpKlappbar .tmpKlappbar_titel{
    display: inline;
}

.tmpKlappbar  *:not(.tmpKlappbar_titel_link):not(.tmpKlappbar_titel){
    /*overflow: hidden;*/
    max-height: 10000rem;
    transition:  0.5s linear;
}
.tmpKlappbar .tmpKlappbar_titel_link,
.tmpKlappbar .tmpKlappbar_titel {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}
.tmpKlappbar .tmpKlappbar_titel_link::before {
    content: "\25b2 \00A0";  /* Pfeil nach oben */
    cursor: pointer;
}
@media only screen and (max-width: 1060px){
    .tmpKlappbar.hideme{
        min-height: auto;
    }
    .tmpKlappbar.js_aktiv .tmpKlappbar_titel_link{
        display: inline;
    }
    .tmpKlappbar.js_aktiv .tmpKlappbar_titel{
        display: none;
    }
    /*
    .tmpKlappbar.hideme:not(article) *:not(.tmpKlappbar_titel_link):not(.tmpKlappbar_titel),
    article.tmpKlappbar.hideme *:not(.tmpKlappbar_titel_link):not(.tmpKlappbar_titel):not(header):not(h1):not(h2):not(h3):not(h4):not(h5):not(h6){
    */
    .tmpKlappbar.hideme *:not(.tmpKlappbar_titel_link):not(.tmpKlappbar_titel):not(.tmpKlappbar_kopf){
        overflow: hidden;
        transition:  0.5s linear;
        max-height: 0rem;
        margin: 0rem;
        padding: 0rem;
        /* wegen den Rahmen die man zusammengeschoben sieht*/
        /* z-index: -1000; */
        border: none;
    }
    .tmpKlappbar.hideme .tmpKlappbar_titel_link, .tmpKlappbar.hideme .tmpKlappbar_titel{
        margin-bottom: 0rem;
    }
    .tmpKlappbar.hideme .tmpKlappbar_titel_link::before {
        content: " \25bc \00A0";	/* Pfeil nach unten */
        cursor: pointer;
    }

}
/*************** tmpKlappbar ende************** */

/*************** Verena allgemeine_hinweise start ************** */

section.allgemeine_hinweise header{
    margin-bottom: 1.4rem;
}
.allgemeine_hinweise article.tmpKlappbar{
    display: block;
    margin-bottom: 1.2rem;
}


/*************** Verena allgemeine_hinweise ende ************** */


/* suchmaske start  */
.suchmaske{
    display: flex;
    flex-wrap: wrap;
}
.suchmaske > article{
    flex: 1 1 auto;
    /*max-width: 96%;*/
    /* overflow: auto; */
    background-color: white;
    margin-bottom: 1rem;
}
.suchmaske > header{
    min-width: 100%;
    background-color: white;
}
.suchmaske h1,
.suchmaske h2,
.suchmaske h3,
.suchmaske h4,
.suchmaske h5,
.suchmaske h6  {
    margin: 0rem;
}
.suchmaske > article .form_element_rahmen{
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.suchmaske > article .form_element_text{
    flex: 1 1 auto;
    margin-bottom: 0.1rem;
    min-width: 100%;

}
.suchmaske > article .form_element_eingabe{
    flex: 1 1 auto;
    min-width: 100%;
}
.suchmaske > article .form_element_fehlermeldung:not(:empty){
    font-weight: bold;
    color: red;
}

@media only screen and (max-width: 800px){
    .suchmaske > article {
        max-width: 100%;
    }

    select {
        width: 100%;
    }
}

@media only screen and (min-width: 816px) {
    .suchmaske > article {
        max-width: 48%;
        margin-left: 1.5%;
    }
}

@media only screen and (min-width: 584px){

    /* suchmaske start  */

    .suchmaske > article .form_element_rahmen{
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .suchmaske > article .form_element_text{
        flex: 1 1 auto;
        text-align: right;
        margin: 0rem;
        margin-right: 0.5rem;
        min-width: calc(30% - 0.5rem);
    }
    .suchmaske > article .form_element_eingabe{
        flex: 1 1 auto;
        min-width: 70%;
    }

    /*.suchmaske > article {*/
        /*max-width: 48%;*/
    /*}*/
}

/* suchauftrag_uebersicht start  */
.suchauftrag_uebersicht{
    display: flex;
    flex-wrap: wrap;
}
.suchauftrag_uebersicht > article{
    flex: 1 1 auto;
    min-width: 100%;
    margin: 0.5rem;
    background-color: white;
}
.suchauftrag_uebersicht > header{
    min-width: 100%;
    background-color: white;
}
.suchauftrag_uebersicht h1,
.suchauftrag_uebersicht h2,
.suchauftrag_uebersicht h3,
.suchauftrag_uebersicht h4,
.suchauftrag_uebersicht h5,
.suchauftrag_uebersicht h6  {
    margin: 0rem;
}
.suchauftrag_uebersicht > article .form_element_rahmen{
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.suchauftrag_uebersicht > article .form_element_text{
    flex: 1 1 auto;
    margin-bottom: 0.1rem;
    min-width: 100%;
}
.suchauftrag_uebersicht > article .form_element_eingabe{
    flex: 1 1 auto;
    min-width: 100%;
}
.suchauftrag_uebersicht > article .form_element_fehlermeldung:not(:empty){
    font-weight: bold;
    color: red;
}

@media only screen and (min-width: 584px){

    .suchauftrag_uebersicht > article .form_element_rahmen{
        display: flex;
        /* flex-wrap: wrap; */
        flex-direction: row;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .suchauftrag_uebersicht > article .form_element_text{
        flex: 1 1 auto;
        text-align: right;
        margin: 0rem;
        margin-right: 0.5rem;
        min-width: calc(50% - 0.5rem);
    }
    .suchauftrag_uebersicht > article .form_element_eingabe{
        flex: 1 1 auto;
        min-width: 50%;
    }

}
#suchauftrag_liste div.profil_eintrag{
    display: flex;
    flex-wrap: wrap;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
#suchauftrag_liste div.profil_eintrag_teil{
    padding: 0.5rem;
}
#suchauftrag_liste div.profil_eintrag_teil:nth-child(1){
    flex: 1 1 0rem;
    min-width: 10rem;
}
#suchauftrag_liste div.profil_eintrag_teil:nth-child(2){
    flex: 2 1 0rem;
    min-width: 10rem;
}
#suchauftrag_liste div.profil_eintrag_teil:nth-child(3){
    flex: 1 1 0rem;
    min-width: 10rem;
}
#suchauftrag_liste div.profil_eintrag_teil:nth-child(4){
    flex: 1 1 0rem;
    min-width: 10rem;
}
#suchauftrag_liste div.profil_eintrag_teil:nth-child(5){
    flex: 2 1 0rem;
    min-width: 10rem;
}
#suchauftrag_liste > div.profil_eintrag:nth-child(even){
    background-color: #DFE7F1;
}
#suchauftrag_liste > div.profil_eintrag:nth-child(odd){
    background-color: white;
}

@media only screen and (min-width: 30rem){
    #suchauftrag_liste div.profil_eintrag_teil:nth-child(2){
        min-width: 20rem;
    }
    #suchauftrag_liste div.profil_eintrag_teil:nth-child(5){
        min-width: 20rem;
    }
}


/* suchauftrag_uebersicht ende  */


/* suchauftrag_eingabe start  */
.suchauftrag_eingabe{
    display: flex;
    flex-wrap: wrap;
}
.suchauftrag_eingabe > article{
    flex: 1 1 auto;
    max-width: 100%;
    /* overflow: auto; */
    background-color: white;
    margin: 0.5rem;
}
.suchauftrag_eingabe > header{
    min-width: 100%;
    background-color: white;
}
.suchauftrag_eingabe h1,
.suchauftrag_eingabe h2,
.suchauftrag_eingabe h3,
.suchauftrag_eingabe h4,
.suchauftrag_eingabe h5,
.suchauftrag_eingabe h6  {
    margin: 0rem;
}

/*
.suchauftrag_eingabe > article .form_element_info_text{
	text-align: left;
	min-width: 100%;

	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}
*/
.suchauftrag_eingabe > article .form_element_rahmen{
    display: flex;
    flex-direction: column;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}
.suchauftrag_eingabe > article .form_element_text{
    flex: 1 1 auto;
    margin-bottom: 0.1rem;
    min-width: 100%;

}
.suchauftrag_eingabe > article .form_element_eingabe{
    flex: 1 1 auto;
    min-width: 100%;
}
.suchauftrag_eingabe > article .form_element_fehlermeldung:not(:empty){
    font-weight: bold;
    color: red;
}

@media only screen and (min-width: 584px){

    .suchauftrag_eingabe > article .form_element_rahmen{
        display: flex;
        /* flex-wrap: wrap; */
        flex-direction: row;
        margin-top: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .suchauftrag_eingabe > article .form_element_text{
        flex: 1 1 auto;
        text-align: right;
        margin: 0rem;
        margin-right: 0.5rem;
        min-width: calc(30% - 0.5rem);
    }
    .suchauftrag_eingabe > article .form_element_eingabe{
        flex: 1 1 auto;
        min-width: 70%;
    }

    /* z.Z. keine radio oder checkbox
    .radio_check_rahmen{
        display: flex;
        flex-wrap: wrap;
        align-items: left;
    }
    .radio_check_element{

        display: flex;
        flex-direction: row-reverse;
        margin-bottom: 1rem;
    }
    .radio_check_element:not(:last-child){
        margin-right: 1.3rem;
    }
    */
}

/* suchauftrag_eingabe ende  */


.navi_knoepfe{
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
}
.navi_knoepfe > div{
    flex: 1 1 auto;
}
.navi_knoepfe > div:not(:last-child){
    text-align: right;
}

/* ### Buttons ###  */

.btn,.btn:visited {
    display: inline-block;
    padding: 3px 8px 3px 8px;
    font-weight: normal;
    color: #FFF !important;
    background-color: #004E8C;
    text-shadow: -1px 0px #000;
    border-top: 1px solid #3486D5;
    border-right: none;
    border-bottom: 1px solid #1F5A9D;
    border-left: none;
    border-radius: 5px;
    box-shadow: 0px 1px 0px #3486D5, 0px -1px 0px #1F5A9D;
    cursor: pointer;
}

.btn:hover {
    background-color: #002142;
    border-color: #002142;
    box-shadow: 0px 1px 0px #002142, 0px -1px 0px #002142;
}

.btnArrowLeft {
    padding: 3px 8px 3px 22px;
    background: url("bilder/arrow1.png")
    no-repeat

    scroll

    left

    center

    #004E8C
;


}
.btnArrowRight {
    padding: 3px 22px 3px 8px;
    background: url("bilder/arrow2.png")
    no-repeat

    scroll

    right

    center

    #004E8C
;


}

ul.rechtsgrundlagen{
    list-style-type:square;padding-top:5px;
}
ul.rechtsgrundlagen > li{
    margin: 1rem;
}

/*   wenn groe Darstellung! */
/* @media only screen and (min-width: 420px){ */
@media only screen and (min-width: 1060px){

    #seitenkopf{
        order: 1;
    }
    #hauptnavigation{
        order: 2;
    }
    #seiteninhalt{
        order: 3;
    }
    .impressum{
        order: 4;
        margin-top: auto;
    }
    .nebeninhalt{
        position: relative;
        height: auto;
        width: auto;
        left: 0rem;
    }
}