body
{
/* background-image: url(<?=BG_IMAGE;?>); */
/* width: <?=$pictureWidth;?>px; */
/* background-image: url('http://localhost/homepage/images/wolke2.jpg'); */
background-attachment:fixed;
margin: 15px 0
width: 880px;
}

/* Rahmen für Grafiken */

img
{
border: 0
}

/* Logo */

#logo
{
width: 880px;
height: 100px;
/* [mobile] 120px; */
background-color: 000090;
border-radius: 20px;
background-repeat: no-repeat;
text-align: center;
}

#logo h1
{
margin: 0 0 0 0px;
font-family: Verdana, Arial, Tahoma;
font-size: 30px;
/* [mobile] 45px; */
line-height: 60px;
/* [mobile] 80px; */
color: #fefefe;
letter-spacing: -2px;
}

#logo h2
{
margin: 0 0 0 0px;
font-family: Verdana, Arial, Tahoma;
font-size: 20px;
/* [mobile] 22px; */
line-height: 18px;
color: #fefefe;
letter-spacing: 1pt;

}

/* horizontale Navigation */

.menueLinks, .menueLinks a:link, menueLinks a:visited, menueLinks a:active
{
   display: inline-block;
   background: white;
   color: #FF9933;
   text-decoration: none;
   font-family: Arial, Verdana, Tahoma;
   font-size: 12px;
   line-height: 20px;
   height: 30px;
   font-weight: normal;
   align:left;
}


#nav
{
width: 880px;
font-size: 20pt;
line-height: 50px;
background-color: #ffffff;
border-radius: 10px;
background-repeat: no-repeat;
text-align: left;
letter-spacing: 1pt;
position:fixed;
left: 50%;
margin-left: -440px;

}

#nav a:link, #nav a:visited, #nav a:active
{
display: block;
/*
border-width: 1px;
border-style: solid;
border-color: black;
border-radius: 10px;
*/
background-repeat: no-repeat;
background-position: center right;
background-color: #FFFFFF;
font-family: Verdana, Arial, Tahoma;
padding: 0 20px 0 12px;
font-size: 20pt;
/* [mobile] 40pt; */
letter-spacing: 0.5px;
font-weight: bold;
line-height: 40px;
/* [mobile] 80px; */
color: #FFFFFF;
text-decoration: none;
}

#nav a:hover
{
text-decoration: none;
color: #666
}

.menu_icon {
  display: inline-block;
  cursor: pointer;
}

.menuicon_bar1, .menuicon_bar2, .menuicon_bar3 {
  width: 70px;
  /* [mobile] 100px */
  height: 10px;
  /* [mobile] 20px */
  background-color: #333;
  margin: 6px 0;
  /* [mobile] 10px */
  transition: 0.5s;
}

.change .menuicon_bar1 {
  -webkit-transform: rotate(-45deg) translate(-11px, 10px);
  transform: rotate(-45deg) translate(-11px, 10px);
  /* [mobile] 11 zu 20px und 10 zu 18px */
}

.change .menuicon_bar2 {opacity: 0;}

.change .menuicon_bar3 {
  -webkit-transform: rotate(45deg) translate(-11px, -10px);
  transform: rotate(45deg) translate(-11px, -10px);
  /* [mobile] 11 zu 20px und 10 zu 18px */
}

.menuicon_description {
   font-family: Verdana, Arial, Tahoma;
   font-size: 20pt;
   /* [mobile] 30pt */
   text-align:left;
}



#area_headline {
   width: 560px;
     /* [mobile] 500px */
   border-radius: 10px;
   line-height: 50px;
     /* [mobile] 40px */
   font-size: 22pt;
   align: right;
   text-align: center;
   vertical-align: top
   display: block;
   font-size: 20pt;
   font-family: Arial, Tahoma, Verdana;
   font-weight: bold;
   text-decoration: none;
   background-color: 000090;
   color: white;
}


#area_headline a:link, #area_headline a:visited, #area_headline a:active
{
   font-size: 20pt;
     /* [mobile] 18pt */
   font-family: Arial, Tahoma, Verdana;
   text-decoration: none;
   font-weight: bold;
   background-color: 000090;
   color: white;
   line-height: 40px;

}

#area_headline a:hover
{
text-decoration: none;
color: white;
background-color: 000090;
}


/* Außen-Rahmen für Tabelle */

#rahmen
{
width: 880px;
border-width:        1px;
border-style:        solid;
border-color:        grey;
border-radius: 10px;
border-bottom-color: black;
background-color: #FFF;
margin-top: 80px;
  /* [mobile] 120px */
}

/* Haupt-Tabelle */


#tab_rahmen
{
width: 880px;
background-repeat: repeat-x;
font-family: Arial, Verdana, Tahoma;
font-size: 20px;
  /* [mobile] 50px */
text-align: justify;
color: #666
}

/* Formatierung linke Tabellenspalte */

.inhalt
{
text-align: justify;
width: 73%;
padding: 10px 20px 10px 20px
}

.inhalt h1, .inhalt h2
{
color: #336699
text-decoration: none;
}

.inhalt h1
{
margin: 10px 0;
font-size: 30px
  /* [mobile] 60px */
}

/*
.inhalt p
{
margin: 5px 0 5px 0;
line-height: 150%
}
*/

/* allgemeine Linkformatierung für Inhalt und Infobox */

.inhalt a:link, .inhalt a:visited, .inhalt a:active, .textbox a:link, .textbox a:visited, .textbox a:active
{
text-decoration: underline;
color: #FF9933
}

.inhalt a:hover, .textbox a:hover
{
text-decoration: none;
background-color: #4670F8;
color: #fefefe
}

.inhalt TABLE
{
width:100%;
border:none;
text-decoration: none;
}

.inhalt TD
{
border-width:        1px;
border-style:        solid;
border-color:        white;
border-radius: 10px;
// background-color: GhostWhite;
background-color: white;
text-align: center;
text-decoration: none;

}

.textbox
{
width: 160px;
color: #336699;
text-align: justify
}

.textbox p
{
text-align: left;
margin-bottom: 10px;
padding-left: 10px;
border-bottom: 1px dotted #336699;
line-height: 28px;
font-weight: bold;
letter-spacing: 2px;
color: #336699
}

/* Fusszeile */

#fuss
{
width: 860px;
line-height: 40px;
  /* [mobile] 100px */
background-color: 000090;
border-radius: 10px;
background-repeat: no-repeat;
margin-bottom: 10px;
padding-left: 10px;
}


#fuss a:link, #fuss a:visited, #fuss a:active
{
   display: inline-block;
   color: #FF9933;
   text-decoration: none;
   font-family: Arial, Verdana, Tahoma;
   font-size: 15px;
   line-height: 25px;
   font-weight: normal;
   align:left;
}

#fuss a:hover
{
text-decoration: none
}


#sidebar {
  padding: 20px 0;
  background-color: 000090;
  position: absolute;
  width: 220px;
  /* [mobile] 600px */
  visibility: hidden;
  display:none;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 200ms ease-in;
  transition: 200ms ease-in;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
          box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

#sidebar .navbar-header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 10px 20px;
}

#sidebar .navbar-header .brand-logo {
  font-size: 20pt;
  background-color: blue;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: 200ms ease-in;
  transition: 200ms ease-in;
  visibility: visible;
}

#sidebar .navbar-body .nav-item {
  padding: 0px 20px;
  cursor: pointer;
  font-family: Verdana, Arial, Tahoma;
  font-size: 10pt;
  /* [mobile] 30pt */
  background-color: #000090;
  -webkit-transition: 200ms all ease-in-out;
  transition: 200ms all ease-in-out;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

#sidebar .navbar-body .nav-item:hover {
  background-color: white;
  font-color: #000000;
}

#main-content {
  padding: 30px 20px;
}

#main-content .check-box {
  cursor: pointer;
  display: inline-block;
}

#main-content .check-box .line {
  width: 20px;
  height: 2px;
  background-color: #212121;
  margin: 4px 0;
  display: block;
}

#checkbox {
  display: none;
}

#checkbox:checked ~ #sidebar {
  width: 0;
  -webkit-animation: sidebarAnim 500ms;
          animation: sidebarAnim 500ms;
}

#checkbox:checked ~ #sidebar .nav-item {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
}

#checkbox:checked ~ #sidebar .brand-logo {
  -webkit-transform: translateX(-200px);
          transform: translateX(-200px);
  visibility: hidden;
}

#checkbox:checked ~ #sidebar .navbar-header {
  visibility: hidden;
}

#showLoading
{
visibility: hidden;
position:absolute;
top:50%;
left:50%;
margin-top:-50px;
margin-left:-45px;
border: 16px solid #f3f3f3;
border-radius: 50%;
border-top: 16px solid #3498db;
width: 120px;
height: 120px;
-webkit-animation: spin 2s linear infinite; /* Safari */
animation: spin 2s linear infinite;

}


/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#feedbackbox
{
width: 190px;
height: 190px;
align: left;
border-width:        2px;
border-style:        solid;
border-color:        grey;
border-radius: 10px;
text-decoration: none;
text-color: black;
}


#feedbackbox a {
text-decoration: none;
}


.amazonFeedback, .amazonFeedback a:link, .amazonFeedback a:visited, .amazonFeedback a:active
{
text-color: blue;
color: blue;
font-size: 11pt;
font-family: Arial, Verdana, Tahoma;
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-underline: none;

}

.amazonFeedback H2
{
background-color: yellow;
font-size: 14pt;
text-decoration: none;
}

.amazonFeedback H3
{
color: green;
font-size: 12pt;
text-decoration: none;
}

.amazonFeedback H4
{
color: #C0C000;
font-size: 12pt;
text-decoration: none;
}

.amazonFeedback H5
{
color: red;
font-size: 12pt;
text-decoration: none;
}

.googleFeedback, .googleFeedback a:link, .googleFeedback a:visited, .googleFeedback a:active
{
text-decoration: none;
text-color: blue;
color: blue;
font-size: 11pt;
font-family: Arial, Verdana, Tahoma;
display: block;
width: 100%;
height: 100%;
}

.googleFeedback H2
{
background-color: yellow;
font-size: 14pt;
text-decoration: none;

}

.googleFeedback H3
{
color: green;
font-size: 12pt;
text-decoration: none;
}

.trustpilotFeedback, .trustpilotFeedback a:link, .trustpilotFeedback a:visited, .trustpilotFeedback a:active
{
text-decoration: none;
text-color: blue;
color: blue;
font-size: 11pt;
font-family: Arial, Verdana, Tahoma;
display: block;
width: 100%;
height: 100%;
}

.trustpilotFeedback H2
{
background-color: yellow;
font-size: 14pt;
text-decoration: none;

}

.trustpilotFeedback H3
{
color: green;
font-size: 11pt;
text-decoration: none;
}

.trustpilotFeedback H4
{
color: #C0C000;
font-size: 11pt;
text-decoration: none;
}

.trustpilotFeedback H5
{
color: red;
font-size: 11pt;
text-decoration: none;
}