@charset "utf-8";

html,body,form,table,tr,th,td,select,input,textarea,img {
   margin:0px;
   padding:0px;
}
html, body { box-sizing: border-box; }
* { box-sizing: inherit; }
img { display: inline-block; }
body {
    background-color:#e8e8e8;
    font-family: "Trebuchet MS",Helvetica,Jamrul,sans-serif;
}
a { text-decoration: none; }

#google1, #google2, #google3 { }
#google1 { margin-bottom: 0.5em; }
#google2 { margin: 0.5em 0 0.5em 0; }
#google3 { margin-top: 0.5em; }
.googlesearch { margin-bottom: 0.5em; }
.googlesearch input { font-size: 1.5em; }


/* header ------------------------------------------------------------------- */
header {
   background: #00b3d9;
   vertical-align: top;
   background-image: url('headerbg.png');
   padding: 0.3em;
}
header a { opacity: 0.5; border: 0px; }
header a:hover { opacity: 1; }
header a:first-child { opacity: 1; }
header a:first-child img { width: 100px; float:left; margin-right: 0.5em;
   border: 0.2em solid #00b3d9; border-radius: 0.8em 0 0 0; }
header h1 { display: block; margin: 0; padding:0; font-family: Arial;
   text-transform: uppercase; font-size: 1.8em; vertical-align:top;
   letter-spacing: normal; color: #444; }
header h1 span { color: white; }  /* #ff4141 #03e799 */
header h1 span:first-child { color: white; }
header div { display: inline-block; float: left; }
header .nohandy { display: none; }
header .nooldhandy { display: none; }
header .menu { float: right; margin-right: 1em; }

/* navigation --------------------------------------------------------------- */
nav { background: #00b3d9; font-family: Arial,Verdana; font-size: 1.5em; }
nav ul, nav li { padding: 0; margin: 0; list-style-type: none; }
nav a { display: block; color: #333; border: 0 solid #e8e8e8;
   border-bottom-width: 0.1em; font-weight: bold; }
nav a:hover { background: #e8e8e8; }
nav ul a { padding: 0.8em 0 0.7em 0.8em; }
nav ul ul a { padding: 0.8em 0 0.7em 0.8em; }
nav ul ul ul a { padding: 0.8em 0 0.7em 1.6em; }
nav ul ul ul ul a { font-weight: normal; padding: 0.4em 0 0.3em 1.6em; }
nav .aktiv { background-color: #e8e8e8; }
nav .nopub { color: #a00; }

    #handyMenu {
      display: none;
      background-color: rgba(0,0,0,0.5);
      box-sizing: border-box;
    }
    #handyMenuSchalter {
      font-size: 2em;
      text-align: center;
      color: #fff;
      padding: 3%;
      cursor: pointer;
      box-sizing: border-box;
    }
    #handym {
      display: block;
      box-sizing: border-box;
    }
    #handym ul {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    #handym li > ul { display: none; }
    #handym li {
      list-style: none;
      background: rgba(0,0,0,0.1);
      box-sizing: border-box;
      width: 100%;
      position: relative;
    }
    #handym li li a { padding-left: 1.2em; }
    #handym li li li a { padding-left: 2.4em; }
    #handym li li li li a { padding-left: 3.6em; }
    #handym li li li li li a { padding-left: 4.8em; }
    #handym a {
      display: block;
      margin: 1px;
      padding: 0.5em;
      text-decoration: none;
      color: white;
      font-weight: bold;
      font-size: 1.6em;
    }
    #handym a:hover {
      background: orange;
    }
    #handym div {
      margin:0; padding:0 0.3em 0 0.3em;
      position: absolute; right: 0; height: 100%;
      //display: table-cell; vertical-align: middle;
      font-size: 2em;
      font-weight: bold;
      border: 0px solid rgba(255,255,255,0.4);
      border-left-width: 2px;
      cursor: pointer;
      color: rgba(255,255,255,0.4);
    }
    #handym a.aktiv {
      background-color: orange;
    }
    #handym ul.open {
      display: block;
    }


/* login -------------------------------------------------------------------- */
.publicLoginDiv { width: 98%; margin:auto; margin-top: 1em; }
.publicLoginDiv input { width: 100%; border: 0px; margin-bottom: 0.2em;
   font-size: 1em; padding: 0.3em; }
.publicLoginDiv a { border: 0px; display: inline-block; font-size: 0.8em;
   padding: 0.2em; }


/* inhalt ------------------------------------------------------------------- */
section { padding: 0.8em; color: #444; background-color: #eee; }
section h2, section h3, section h4, section h5, section h6 { margin: 0.3em 0; }
section h2, section h3 { font-size: 1.8em; }
section h4 { font-size: 1.4em; }
section h5 { font-size: 1em; text-transform: uppercase; }
section h6 { font-size: 1em; font-weight: normal; text-transform: uppercase; }
section h2:first-child { margin-top: 0; margin-bottom: 0.5em; }
section img { border: 1px solid #00b3d9; }
section img.left { width: 35%; float: left; margin-right: 1em; }
section img.right { width: 35%; float: right; margin-left: 1em; }
section img.center { width: 100%; margin: 0.5em 0; }
section a:link,section a:active,section a:visited  {
   text-decoration: none; color: #f03c3c; }
section a:hover  { text-decoration: none; color: #007a93; }

section div.redbox, section div.achtung { font-size: 0.8em;
   border:1px solid #f00; margin: 1em 0; padding:0.8em; background-color:#fdd; }
section.auswahl { border:1px solid #f58220; }
section .hinweis { font-size:0.8em; }
section div.bluebox { font-size: 0.8em; border: 1px solid #00ab99;
   background-color: #d0ebea; padding: 0.6em; margin-top: 1em; }
section div.nuruser { width: 96%; font-size: 0.6em; border: 1px solid #00ab99;
   background-color: #d0ebea; padding:5px; display:none; margin-top: 0.8em 0; }
section pre { border: 1px dotted #444; padding: 1em; }

/* footer ------------------------------------------------------------------- */
footer { background: #00b3d9; padding: 0.5em; text-align: right; }


/* RESPONSIVE --------------------------------------------------------------- */
#wrapper {
   width:98%;
   max-width: 900px;
   margin:auto;

   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;

   -webkit-flex-flow: row wrap;
   flex-flow: row wrap;

   -webkit-align-items: stretch;
   align-items: stretch;

   justify-content: space-between;
   -webkit-justify-content: space-between;
}

/* Standard ... Handy */
#google1, #google2, #google3, nav, section, footer, header {
   width: 100%;
   -webkit-box-flex: 1 100%;
   flex: 1 100%;
}
#google1 { -ms-flex-order: 1; -webkit-order: 1; order: 1;
           height: 93px; }
header   { -ms-flex-order: 2; -webkit-order: 2; order: 2; }
nav      { -ms-flex-order: 4; -webkit-order: 4; order: 4; }
section  { -ms-flex-order: 3; -webkit-order: 3; order: 3; }
#google2 { -ms-flex-order: 7; -webkit-order: 7; order: 7;
           height: 93px; }
footer   { -ms-flex-order: 5; -webkit-order: 5; order: 5; }
#google3 { -ms-flex-order: 6; -webkit-order: 6; order: 6;
           height: 93px; }

/* moderne handys */
@media all and (min-width: 360px) {
   header h1 { font-size: 2.3em; }
   header .nooldhandy { display: inline-block; }
   #handyMenu { display: block; }
}
/* Tablets */
@media all and (min-width: 700px) {
   #google1 { -ms-flex-order: 1; -webkit-order: 1; order: 1;
              height: 93px; }
   header   { -ms-flex-order: 2; -webkit-order: 2; order: 2; }
   nav      { -ms-flex-order: 3; -webkit-order: 3; order: 3;
              width: 28%; -webkit-box-flex: 2 28%; flex: 2 28%; font-size: 1em; }
   section  { -ms-flex-order: 4; -webkit-order: 4; order: 4;
              width: 68%; -webkit-box-flex: 5 68%; flex: 5 68%; }
   footer   { -ms-flex-order: 5; -webkit-order: 5; order: 5; }
   #google2 { -ms-flex-order: 7; -webkit-order: 7; order: 7; }
   #google3 { -ms-flex-order: 6; -webkit-order: 6; order: 6; 
              height: 93px; }

   .googlesearch input { font-size: 1em; }
   header .nohandy { display: inline-block; }
   header .menu { display: none; }
   header h1 { letter-spacing: 0.2em; }
   #handyMenu { display: none; }
}
/* Desktops */
@media all and (min-width: 900px) {
   #google1 { -ms-flex-order: 1; -webkit-order: 1; order: 1; 
              height: 93px; }
   header   { -ms-flex-order: 2; -webkit-order: 2; order: 2; }
   nav      { -ms-flex-order: 3; -webkit-order: 3; order: 3;
              width: 20%; -webkit-box-flex: 1 20%; flex: 1 20%;
              font-size: 0.9em; }
   section  { -ms-flex-order: 4; -webkit-order: 4; order: 4;
              width: 58%; -webkit-box-flex: 3 58%; flex: 3 58%; }
   #google2 { -ms-flex-order: 5; -webkit-order: 5; order: 5;
              width: 20%; -webkit-box-flex: 1 20%; flex: 1 20%; 
              height: 602px; }
   footer   { -ms-flex-order: 6; -webkit-order: 6; order: 6; }
   #google3 { -ms-flex-order: 7; -webkit-order: 7; order: 7; 
              height: 93px; }
   #handyMenu { display: none; }
}

@media print {
   nav, footer, #google1, #google2, #google3, .googlesearch, #handyMenu { display: none; }
   header { background: none; }
   header .menu { display: none; }
   header a:first-child img { border-radius: 0; border: 0px; }
   header h1 span { color: #f33e3e; }
   header h1 span:first-child { color: #00ab99; }
   #wrapper { width: 100%; }
   section { background: none; }
}