@charset "ISO-8859-1";

@media screen {
html {
	background-image:url(/daten/img/hintergrund.svg#hell);
	background-repeat: repeat-x;
	background-size: 6.5rem 6.5rem;
}

body {
	max-width: 80rem;
	min-width: 16rem;
	margin: auto;
	display: flex;
	flex-direction: row; 
	flex-wrap : wrap;
	align-items: flex-start;
	font-size: 100%;
	position: relative;
}

main {
	display: block;
}

#hauptbereich {
	display: block;
	flex-grow: 1;
	flex-shrink: 1;
	max-width: 60rem;
	min-width: 15rem;
	width: 40rem;
    order: 3;
/*     align-self: stretch; */
/*     height:max-content; */
}



#navigation {
    max-width: 20rem;
    min-width: 20rem;
}

#header {
	min-width: 100%;
	align-self: flex-start;
	margin-bottom: auto;
    order: 1;
}

#footer {
    margin-top: auto;
    width: 100%;
    align-self: flex-end;
    order: 8;
}

#sides {
	max-width: 60rem;
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
    order: 5;
    box-sizing:border-box;
    padding-left:calc(var(--extended-margin,0));
    padding-right:calc(var(--extended-margin,0) - var(--block-margin,0));
    padding-top:.5rem;
    padding-bottom:.5rem;
}

#sides > section {
	max-width: 60rem;
	width: 45%;/*calc(21rem - var(--extended-margin,0));*/
	flex-grow: 1;
	flex-shrink: 1;
	margin-left: 0;
	margin-right: var(--block-margin,0);
	margin-top:1rem;
	margin-bottom:1rem;
	box-sizing:border-box;
}

#block1 {
    min-width: 15rem;
    order: 1;
}

#block2 {
    min-width: 15rem;
    order: 2;
}

#block3 {
    min-width: 15rem;
    order: 3;
}

#navigation #navbutton, #navigation #navstate {
    display: none;
}


#hauptinhalt {
	display: flex;
	flex-direction: column;
	max-width: 60rem;
}

#hauptinhalt #breadcrumb {
	order:1;
	flex-shrink:1;
}

#hauptinhalt > section, #hauptinhalt > article, #hauptinhalt > div
{
	order:2;
	flex-shrink:1;
}


#footer > div {
	max-width: 60rem;
	display:flex;
	flex-direction:column;
	flex-wrap:nowrap;
}


#footer > div > div.infos{
    max-width: 60rem;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content: space-between;
}

#footer > div > div.infos > div.address {
    max-width: 24rem;
    text-align:center;
    flex-shrink:4;
    
}

#footer > div >  div.infos > ul.extranavig {
    max-width: 18rem;
    
}

#footer > div > div.copyright {
    max-width: 60rem;
    width:100%;
    
}


}

@media screen and ( min-width : 71rem) {
	
	main {
	  min-height:25rem;
	}
	
	#nebenbereich {
      display:flex;
      flex-direction: column;
      min-width:20rem;
      max-width:20rem;
      order:6;
      
    }
	
	#navigation {
		order: 1;
		
	}
	
	#sonstiges {
        order: 2;
        min-width:17rem;
        margin:1.5rem;
        max-width:20rem;
    }
    
    #footer > div {
      margin-right:20rem;
    }
    
    #sonstiges > div {
      margin-top:1em;
      margin-bottom:1em;
    }
    
}



@media screen and  (min-width : 1rem)  and ( max-width : 71rem) {
    
    body {
        max-width:60rem;
        display:flex;
        flex-direction:column;
        flex-shrink:1;
        flex-grow: 1;
    }
    
     #hauptbereich {
       display: block;
       flex-grow: 1;
       flex-shrink: 1;
       max-width: 60rem;
       min-width: 15rem;
       width: 100%;
       order: 3;
       align-self: stretch;
      }
    
    #nebenbereich {
      display:flex;
      flex-direction: column;
      order:6;
      max-width: 60rem;
      min-width: 15rem;
      width: 100%;
    }
    
    #sonstiges {
      width:100%;
      display:flex;
      flex-direction:row;
      flex-wrap:wrap;
      box-sizing:border-box;
      padding-left:calc(var(--extended-margin,0) );
      padding-right:calc(var(--extended-margin,0) - var(--block-margin,0));
      padding-top:.5rem;
      padding-bottom:.5rem;
    }
    
    #sonstiges>*  {
		width: 45%;/*calc(22rem - var(--extended-margin,0));*/
		max-width: 60rem;
		flex-shrink: 1;
		flex-grow: 1;
		min-width: 15rem;
		margin-left: 0;
		margin-right: var(--block-margin,0);
		margin-top:1rem;
        margin-bottom:1rem;
        box-sizing:border-box;
	}
    
    #sides section {       
        min-width: 15rem;
    }
    
    #navigation #navstate + #navbutton + #navcontent {
        display: none;
        position: absolute;
        left: auto;
        right:0;
        top: 0;
        z-index: 10;
        width:20rem; 
    }
    
    #navigation #navstate:checked + #navbutton + #navcontent {
        display:block;
    }
 
 
 
    #navigation #navbutton{
        display: inline-block;
        margin-left: auto;
        right: .5rem;
        width: 2rem;
        height: 3rem;
        position: absolute;
        left: auto;
        top: .5rem;
        z-index: 100;
    }
    
   
    #navigation #navstate + #navbutton #navoff {
     display:none;
    }    
    
    #navigation #navstate:checked + #navbutton #navon {
     display:none;
    }
    
    #navigation #navstate + #navbutton #navon {
     display:block;     
    }
         
    #navigation #navstate:checked + #navbutton #navoff {
     display:block;
    } 
    

    
}

@media screen and  (min-width : 1rem)  and ( max-width : 36rem) {

	#footer > div > div.infos{
	  flex-wrap:wrap;
	}
	
	#footer > div > div.infos > div.address {
	  order:1;
	  max-width:36rem;
	  width:100%;
	  flex-grow:4;
	  margin-bottom:1rem;
	}
	
	#footer > div > div.infos > ul.extranavig {
      order:2;
      width:45%;
      max-width:18rem;
    }
	
}

@media print {
	html {
	  max-width:17cm;
	  padding:0;
	  margin:.5cm;
	  font-size:10pt;
	
	}
	

	
	#hauptbereich {
      max-width:17cm;
      padding:0;
      margin:0 0 1cm 0;
      --extended-margin:0!important;
      
    }
     #header {
      margin:1cm 0 0 0;
    }
    #footer {
      margin:1cm 0 0 0;
    }

    #hauptinhalt {
      max-width:16cm;
      width:16cm;
      padding:0;
      margin:.0;
    }
    
    #navigation,
    #bereiche,
    #suche,
    #login,
    #footer .extranavig,
    form.bewertungsleiste,
    #breadcrumb,
    .adminlink
    {
      display:none!important;
    }
    
    html, body, #sides, #hauptbereich, #nebenbereich, #sonstiges, #footer , #footer div.copyright {
      
      background-color:white!important;
    }
    
    a.extern::after {
      background-image:none!important;
    }
    
}