/*  Formatierungen für chritian-geissendoerfer.de */


/****  Global  ****/
@font-face {
    font-family: 'quillonormal';
    src: url('quill-regular/quillo-webfont.woff2') format('woff2'),
         url('quill-regular/quillo-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
html       { box-sizing: border-box; }  
*, ::before, ::after { box-sizing: inherit; }
*       { padding:0; margin: 0; }
body {  font: 14px Verdana, Helvetica, Arial, sans-serif;
        line-height:1.3em;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 70em;
        flex-direction: column;
        color: #003366;
        margin:0 auto;
        padding: 0 0 1em 0;
        background:#9A99A9;
      } 
a       { color:#CDCC00; text-decoration:none; font-weight:bold; }
p       { margin:1em 0; }
h1      { margin:1.5em auto 1em auto; line-height:1em; text-align:center; }
h2      { margin:1em auto .5em auto; line-height:1em; }
ul      { list-style:none; }
ol      { padding-left:2em; }
ul li   { margin:.5em 0; }
.row    { display:flex; }
.column { display:flex; flex-direction:column; }
.change { margin:1em 0; display:flex; flex-direction:column; }
#schmetterlingstal {
  background:#68635d;
  color:white;
  padding:1em;
  font-family: "quillonormal", serif;
}
#schmetterling {
  font: 12px Verdana, Helvetica, Arial, sans-serif;
  padding:.4em;
  display:flex;
  justify-content:space-around;
}
#schmetterlingstal ol {
  font: 12px Verdana, Helvetica, Arial, sans-serif;
  list-style-type: upper-roman;
}
#schmetterlingstal h2 {
  font-size:1.2em;
  align-self:flex-end;
  text-align:right;
  line-height:1.3em;
}
.rot {
  color:#b00000;
}
.gruen {
  color:green;
}
.blau {
  color:#0000b0;
}
#mehroderweniger {
  margin-bottom:2em;
}
.hundertProzent {
  width:100%;
}

/****  Layout  ****/

/* Header */
header {
  max-width: inherit;
}
header img { width: 100%; }

/* Navigation */
nav {
  width:100%;
  font-size: 1.5em;
  margin: -.16em 0 0 0;
}
nav>ul      {
  display:flex;
}
nav a {
  background: #003466;
  display:block;
  padding:.6em 0;
}
nav>ul li {
  flex:1;
  text-align:center;
  margin:0;
}
nav .submenu { 
  visibility: hidden;  
  height: 0;
  z-index: 1000; 
  position:relative;
  font-size:.6em;
  white-space: nowrap;
}
nav .submenu a {
  padding:.5em;
}
nav .submenu li { 
  display: block; 
  min-width: 100%;
  position:absolute;
  margin-left:-2.3em;
}
/** Show the submenu on hover, focus ... **/
nav li:hover .submenu,
nav li:active .submenu, 
nav li:focus .submenu  {
  visibility: visible;
  height: auto;
}
nav li:focus-within .submenu  { 
  visibility: visible;
  height: auto;
}

/* Main */
main {
  min-height:40em;
  margin:1em 2em;
  display:flex;
  flex-direction:column;
}

/* Musikgruppe Windstill */


.engeZeile {
  line-height:1em;
}
.smaller {
  font-size:.7em;
  line-height:.7em;
}
.zentriert {
  display: flex;
  align-items: center;
  justify-content: center;
}
/* zweispaltiges Layout */
@media (min-width: 40em)  {
  .change {
    flex-direction:row;
    justify-content:space-around;
  }
  .row {
    flex-direction:row;
  }

  .margin1 {
    margin:0 1em;
    order:0;
    flex-basis:60%;
  }

  .schmaler {
    margin:0 1em;
    order:0;
    justify-content: center;
    flex-basis:40%;
  }

  #christian {
    order:5;
    margin:1em;
  }
}



/*   Footer   */
.foot {
  padding:0 2em;
}