* {margin: 0px; padding: 0px}

body {
background-color: #f2f1ec; 
/*font-family: sans-serif;*/ 
font-family: 'Lato', sans-serif;
font-size: 16pt;
hyphens: auto;
color:#555555;
width:100vw;
height: 100vh;
      display: grid;
      grid-template-rows: 3em 4.2em 1fr 4em;
      grid-template-columns: 1fr;
      grid-template-areas:
         "navi"
         "kopf"
         "inhalt"
         "fuss";}
.inhaltBreite {width: 80vw; margin-left:auto; margin-right:auto;}

h1 {font-size:1.2em;}
h2 {font-size:1em;}
header {grid-area: kopf; padding-top: .1em; background-color: #8ccdde; color: grey}
header h1 {float:left; padding-top:0;}
#headTitel{float:left; padding-left:2em}

main {grid-area: inhalt; padding: 1em; background-color: #f2f1ec; text-align: justify;}
main h1 {}
main p, li{padding: 0.2em 0;}
main ul {margin: 1em;}
main .inhaltBreite{ background-color: #ffffff; padding: 0.5em;}

nav {grid-area: navi; padding-top:0.2em; background-color: #269fbf;}

footer {grid-area: fuss; padding-top: 0.5em; background-color: #5d737e;}

.inhaltBreite>ul>li>ul>li {margin-left: 1em;}
td {vertical-align: top;}

.container {
    float:left;
}
.container div {width:auto; height:auto; padding-top:0.2em}

#cepic img{ width: auto; height: 10em; max-height:10em; margin-right:2em}

/*Abstand zwischen Symbolen und Text bei pers. Angaben*/
main table td:nth-child(2){padding-left:1em; text-align: left;}

.ueber {list-style: none;}

ul>li>i {width:1em;}
.lebenslauf{padding-top: 1em; border-bottom: 1px solid black; text-align: right; font-variant:small-caps;}

main a {
color: grey;
text-decoration-style: underline;
text-decoration-color: #8ccdde;
font-weight: 00;
}

footer a {
  color: #ffffff;
text-decoration-style: underline;
text-decoration-color: #8ccdde;
}

.lebenDatum{margin-top:0.2em}
.lebenInhalt{margin-bottom:0.5em}

input[type="password"] {
   font-size: 1.2em; padding: 5px 12px;
   border: 1px solid silver;}
   
input[type="submit"] {
   font-size: 1.2em; padding: 5px 12px; 
   font-family:'Lato', sans-serif;
   border: 1px solid silver;
   background-image: linear-gradient(to top, lightgrey 0%, white 90%);}

nav .inhaltBreite{display:flex; justify-content: space-around;}

  .svgMenue {color: white; width:4em; height:2.8em; opacity: 1; transition-duration: 0.4s}
  .svgMenue:hover {fill: lightgrey; color: lightgrey;}



  .svgMenue span {display:none}
  .button {
  width: 6em; height:3em;
  border: none;
  color: inherit;
  padding: 0em; 
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-family:sans-serif;
  font-size:0.4em;
  cursor: pointer;
  }

.buttonOut{ color: #inherit;}




@media screen and (min-width: 620px) {
.inhaltBreite {width: 600px; margin-left:auto; margin-right:auto}
.svgMenue span {display:inline}
header {padding-top:0.5em}
header h1 {font-size:2em; float:left; padding-top:0;}
.container {
    float:right;
}
}

@media screen and (min-width: 820px) {
.inhaltBreite {width: 800px; margin-left:auto; margin-right:auto}
}


@media print {
body {display: grid; orphans:3; widows:3; font-family: 'Lato', sans-serif; font-size: 16pt;color: #000; background-color: #fff;}
  nav{display:none}
  footer{display:none}

}