/* ---------------------------------------------------------------- */
/*        Projekt:  goemint.de                                      */
/*        File:     headerfooter.css                                */
/*        Autor:    Stephan Buchholz                                */
/*        Datum:    27.09.2020                                      */
/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
/* header - sichtbarer Kopfbereich der Webseite */

   /* (browsereigene) margin=0, sonst ragen flexible Elemente aus Eltern-Container ’body’ hinaus */
header *
{
margin: 0;
}

header
{
 /*  max-width: 60em;*/
   flex: 1 1 auto; /* flex: (flex-grow) (flex-shrink) (flex-basis) */
   order: 10;
height: auto;
   /* (browsereigene) margin=0, sonst ragen flexible Elemente aus Eltern-Container ’body’ hinaus */
   margin: 0.5em 0.5em 0.0em 0.5em;
   padding: 0.5em 0.5em 0.5em 0.5em;
   color: var(--header_text_color);
   background: var(--header_background_color);
background-image: linear-gradient(90deg, #CFCFCF 0%, #FFFFFF 4%, #FFFFFF 35%, #FFFFFF 50%, #FFFFFF 65%, #FFFFFF 96%, #CFCFCF 100%);
   /* Rahmen */
/*   border: 1px solid grey;*/
/*   border-radius: 0.3em;*/
   box-shadow: 0.1em 0.1em 0.3em white inset, 0.2em 0.2em 0.2em grey;
   /* sub-flex-container */
   display: flex;
   flex-flow: row wrap;  
  /* align-items: stretch;
   justify-content:space-around;*/
   align-content: stretch;
   align-items: stretch;
   justify-content: center;
}

header a
{
   text-decoration: none;
/*display: block;*/
}
/* ---------------------------------------------------------------- */

#header-logo
{
   flex: 1 1 35%;
   order: 10;
/*width: 20em;*/
display: block;
   margin: auto 1em;
   color: black;
   /*background: #AFFFAF;*/
   text-align: center;
   vertical-align: middle;
min-width: 10em;
}

#header-info
{
   flex: 1 1 55%; /* flex: (flex-grow) (flex-shrink) (flex-basis) */
   order: 20;
/*   background: #AFAFFF;*/
/*width: 40em;*/
   margin: auto 1em;
min-width: 10em;
}

/* ---------------------------------------------------------------- */
header img
{
   width: 100%;
   height: auto;
   margin: auto;
   color: blue;
   /*background: #AFAFFF;*/
   text-align: center;
   vertical-align: middle;
}
/* ---------------------------------------------------------------- */

#header-navlink
{
   flex: 1 1 100%;
   order: 30;
   margin: auto;
   font-size: 2.0em;
   font-weight: bold;
   color:black;
   display: block;
   text-align: center;
   vertical-align: middle;
}

#header-navlink:hover
{
   background: #AFAFFF;
   color: blue;
}

/* ---------------------------------------------------------------- */




  
/* ---------------------------------------------------------------- */
/* footer - Fussleiste */

footer
{
/*   z-index: 2;*/
   flex: 1 1 auto;
   order: 40;
   margin: 0.0em 0.5em 1.0em 0.5em;
   padding: 0.5em 0.5em 0.5em 0.5em;
   width: auto;
/*  height:300px;*/
/*  background:
  linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
  linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
  linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
  linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
  linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
  linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);*/
  background-color: var(--footer_background_color);
/*  background-size: 20px 20px;*/
background-image: linear-gradient(90deg, #CFCFCF 0%, #FFFFFF 4%, #FFFFFF 35%, #FFFFFF 50%, #FFFFFF 65%, #FFFFFF 96%, #CFCFCF 100%);
  color: var(--footer_text_color);
   /* sub-flex-container */
   display: flex;
   flex-flow: row wrap;  
/*   border: 1px solid grey;*/
/*   border-radius: 0.3em;*/
   box-shadow: 0.1em 0.1em 0.3em white inset, 0.2em 0.2em 0.2em grey;
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

#footer-kontaktinfo
{
   flex: 1 1 33%;
   order: 10;
/*   text-align: center;*/
   min-width: 12em;
}

#footer-text
{
   flex: 1 1 33%;
   order: 20;
/*   text-align: center;*/
   min-width: 12em;
}


#footer-navigation
{
   flex: 1 1 33%;
   order: 30;
   text-align: center;
min-width: 12em;
}

#footer-copyright
{
   flex: 1 1 100%;
   order: 40;
   text-align: center;
   margin-top: 0.2em;
   margin-bottom: 0.0em;
/*   color: #CFCFCF;*/
}
/* ---------------------------------------------------------------- */

footer section
{
   padding: 0.2em 0.6em 0.2em 0.6em;
   min-width: 9em;
}

footer h1
{
   text-align: center;
}

footer a
{
   display: block; /* makes the whole link area clickable */
   text-decoration: none; 
   color: var(--footer_link_color);
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

/* ---------------------------------------------------------------- */
footer ul
{
   list-style-type: none;
   text-align: center; 
   margin-right: auto;
   margin-left: auto;
   padding-top: 0.5em;
   padding-left: 1.5em;
   width: 100%;
}
 
footer li
{	
   text-align: center; 
   margin: 0.15em 0em;
   padding: 0.2em;
}

footer dl
{
   margin: 1em auto 1.2em auto;
   width: 100%;
}
 
footer dt
{	
   text-align: left; 
   margin: 0.3em 0em 0.25em 1em;
}
 
footer dd
{
   text-align: center; 
   margin: 0.15em 0em;
}
/* ---------------------------------------------------------------- */

#footer-text p
{
text-align: justify;
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}

/* ---------------------------------------------------------------- */