﻿*, *:after, *:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  /*transition: all .7s ease-in;  Übergänge für alle transformation */
}

a { text-decoration: none; outline: none;}
.red { color: red;}
ul {list-style-position: inside;}
img { display: block; width: 100%;}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 10px 0;
  text-rendering: optimizelegibility;
  color: rgb(71, 71, 71);
}
/* Datenstrom suber für alle Kontainer mit floatet Inhalt */
header:after, .container:after, footer:after, .widget-posts-list li:after, #subscribe:after {
  content: "";
  display: table;
  clear: both;
}

body {
  font-family: 'Ubuntu', sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(125, 125, 125);
  background: rgb(245, 245, 245);
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
  border: none;
}
.container {
  /*width: 100%; */
  max-width: 1920px;    /*1170px; */
  margin: 15px auto;
  padding: 0 25px;
  display: flex;
}

/* Header und seine Inhalt*/
header {
  width: 100%;
  height: 125px;
  background: rgb(255, 255, 255);
  box-shadow: 3px 2px 4px rgba(0,0,0,.2);
  margin: 0 auto;
  padding: 26px 0 0 0;
  position: relative;
}
nav {
  /*width: 100%; position: relative;*/

  padding-left: 20px;
}

/* logo */
.logo { display: block; float: left; margin-right: 50px;}
.logo img { max-width: 270px; min-width: 270px;}

.logo p {
  margin-top: -3px;
  text-transform: uppercase;
  font-size: 0.8em;
  color: rgb(175, 175, 175);
}

/* Hauptmenü */
.headerNav ul {
  float: right;
  margin-top: 8px;
  list-style: none;
  /*display:  none;*/
}
.headerNav a {
  display: block;
  font-family: 'Archivo Narrow', sans-serif;
  text-transform: uppercase;
}

.headerNav > ul > li > a:hover, .headerNav > ul > li > a:focus, .headerNav > ul > li > a:active {
  color: rgb(251, 119, 61);
}
.sub-indicator {
  position: absolute;
  top: 20px;
  right: 50%;
}
.sub-indicator img { width: 9px;}

.right-indicator {
  float: right;
  width: 8px;
  margin: 14px 0 0 0;
}
.right-indicator img { width: 6px;}
.headerNav > ul > li {
  position: relative;
  float: left;
  margin: 0 25px 0 5px;
}
.headerNav > ul > li > a { font-weight: 600; color: rgb(71, 71, 71);}
.headerNav > ul > li >ul {
  position: absolute;
  top: 10px;
  background: rgb(251, 119, 61);
  padding: 20px 15px;
  visibility: hidden;
  width: 200px;
  height: 0;
  opacity: 0;
  z-index: 1000;
}
.headerNav > ul > li > ul > li{ line-height: 2.7em;}
.headerNav > ul > li:hover > ul, .headerNav > ul > li:focus > ul, .headerNav > ul > li:active > ul {
  display: block;
  height: auto;
  visibility: visible;
  opacity: 1;
}
.headerNav > ul > li > ul a:hover, .headerNav > ul > li > ul a:focus, .headerNav > ul > li > ul a:active  {
  color: rgb(71, 71, 71);
}
.headerNav > ul > li > ul  li {
  position: relative;
  margin: 0;
}
.headerNav > ul > li > ul > li a {
  font-size: 0.87em;
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(255, 255, 255);
}
.headerNav > ul > li > ul > li > ul {
  position: absolute;
  visibility: hidden;
  width: 200px;
  height: 0;
  left: 95%;
  top: -25px;
  padding: 20px 15px;
  background: rgb(63, 63, 63);
  opacity: 0;
  z-index: 1000;
}
.headerNav > ul > li > ul > li:hover ul, .headerNav > ul > li > ul > li:focus ul, .headerNav > ul > li > ul > li:active ul {
  display: block;
  visibility: visible;
  height: auto;
  opacity: 1;
}
.headerNav > ul > li > ul > li > ul li:hover a, .headerNav > ul > li > ul > li > ul li:focus a, .headerNav > ul > li > ul > li > ul li:active a {
  color: rgb(251, 119, 61);
}
.headerNav > ul > .oneLink {
  font-weight: 600;
  color: rgb(71, 71, 71);
  text-transform: uppercase;
  display: block;
  font-family: 'Archivo Narrow', sans-serif;
  cursor: pointer;
}
.headerNav > ul > .oneLink:hover, .headerNav > ul > .oneLink:focus, .headerNav > ul > .oneLink:active {
   color: rgb(251, 119, 61);
}

/* Aside Menü */
#nav-rechts { width: 270px; margin-right: 30px;}
#nav-rechts a { color: rgb(230, 90, 20); font-size: 0.87em}
#nav-rechts a:hover, #nav-rechts a:focus, #nav-rechts a:active {
  text-decoration: underline;
  color: rgb(180, 70, 20)
}
#nav-rechts ul { margin-left: 20px;}
#nav-rechts .seitenkopf { padding: 0;}
#nav-rechts .sub-indicator, #nav-rechts .right-indicator { display: none;}

/* Taste für menü anzeigen bei Fensterbreite 768px */
.nav-toggle {
  display: none;
  position: relative;
  float: left;
  width: 100%;
  height: 30px;
  line-height: 28px;
  background: rgb(108, 108, 108);
  padding: 0 0 0 7px;
  border: 1px solid rgb(221, 221, 221);
  cursor: pointer;
  color: rgb(255, 255, 255);
}

/* Klasse der wird hinzugefügt beim Mobilemenü Taste anklick */
#menu.active {
  max-height: 100%;
}
/*  Slider Kontainer definition  */
#slider {
  width: 100%;
  height: auto;
  left: 0;
  background: url(../images/slider.png);
}
#slider > div { margin: 0 auto; padding: 25px;}
.amazingslider-wrapper-1 {
  display:block;
  position:relative;
  max-width: 1170px;
}
.amazingslider-1 {
  display:block;
  position:relative;
  margin:0 auto;
}
/*  Ende Slider  */

h1 { font-size: 2.05em; text-align: center;}
h1 strong { line-height: 1.1em;}

h3 { font-size: 1.3em;}
.hidden { display: none;}

.seitenkopf {
  padding: 23px 0 0 0 !important;
  border-bottom: 1px solid rgb(195, 195, 195);
}
.seitenkopf h1 {
  text-align: left;
  margin: 0 0 33px 0;
  letter-spacing: -1px;
}

#broadcrumb {
  font-size: 1.1em;
  padding: 7px 0;
  /*border-bottom: 1px solid rgb(195, 195, 195);*/
  /*position: absolute;
  top: 64px;
  left: 400px; */
  display: flex;
  align-self: end;
  /*padding-top: 4%;
  justify-content: right;*/
}
.broadcrumblink { color: rgb(230, 90, 20); margin: 0 4px;}
.broadcrumblink:hover, .broadcrumblink:focus, .broadcrumblink:active {
  text-decoration: underline;
  color: rgb(180, 70, 20);
}
.broadcrumblink2 {
  color: rgb(180, 70, 20);
  text-transform: uppercase;
  margin: 0 5px;
}

.container p { margin-bottom: 10px;}
.container p a { color: rgb(251, 119, 61);}

.info-left { width: calc(100% - 300px); min-width: 30px; margin-top: 33px;}
.info-left h1 { text-align: left;}
.info-left2 { width: 60%; float: none; min-width: 100px;}

/* -----------------Spoiler eigenschaften */
.spoiler {
  position: relative;
  overflow: hidden;
  border: solid rgb(195, 195, 195);
  border-width: 1px 1px 1px 3px;
  margin: 5px auto;
}
.title {
  padding: 3px;
  cursor: pointer;
  background: rgb(230, 230, 230);
}
.title_h4 {font-weight: 600; margin: 0 -10px 0 -10px; overflow: hidden;}
.closed .contents { display:none; transition: all .0s ease;}
.closed h4 { color: rgb(85, 85, 85); padding: 1px 0;}

.contents { padding: 5px 15px; border-top: 1px solid rgb(195, 195, 195);}

.open_close {
  display: block;
  float:left;
  width: 20px;
  text-align: center;
  font-size: 1.5em;
  color: rgb(85, 85, 85);
}
/* Spoiler ende */

#kredit, #kreditK {
  max-width: 300px;
  float:left;
  margin: 5px 20px 10px 0;
}
#kreditK { max-width: 230px;}

#derivate {
  float: left;
  max-width: 100%;
  margin: 15px 20px 10px 0;
}

.listeinText li { margin-left: 15px;}
.listeinText a { color: rgb(230, 90, 20);}

/* Erstrittene Urteile */
.flex-container { display: flex; align-content: center;}
.flex-container img { margin: 7px 5px 7px 0; border: 1px solid rgb(195, 195, 195);}

/*  Video seite  */
.youtube td { width: 330px;}
.youtube iframe { border: none;}
.youtube-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 Verhältnis */
  padding-top: 30px; /* IE6 workaround*/
  height: 0;
  overflow: hidden;
}
.youtube-container iframe,
.youtube-container object,
.youtube-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
 video { padding: 20px 0px; width: 80%;}

/* Kontakt formular */
#kontakt { width: 100%; padding: 0px;}
label { margin-top: 5px;}
input { width: 98%; max-width: 340px;}
textarea:focus, input:focus { box-shadow: 0 0 3px 1px rgba(0, 0, 255, .5);}

input, textarea, .error {
  margin-bottom: 15px;
  border: 1px solid rgb(175, 175, 175);
  border-radius: 4px;
  padding: 5px 7px;
}
textarea, .error { width: 98%;}
#send { width: auto;}
.error {
  font-weight: 600;
  color: rgb(255, 0, 0);
  background: rgba(255, 0, 0, .2);
}
.meldung { color: rgb(0, 120, 0); background: none;}
.redbord { box-shadow: 0 0 3px 1px rgb(255, 0, 0);}
.sservice { display: none;}

/* Footer bereich */
footer {
  position: relative;
  width: 100%;
  min-height: 120px;
  bottom: 0px;
  padding: 20px 0;
  background: rgb(63, 63, 63);
  border-top: 7px solid rgb(85, 85, 85);
  box-shadow: 0 -2px 2px 2px rgba(0,0,0,.2);
  color: rgb(125, 125, 125);
}
.footer-col {
  width: 16.666666666%;
  /*height: 210px;
  min-width: 180px;*/
  float: left;
  border-right: 1px solid rgb(85, 85, 85);
  padding: 0 10px;
}
.footer-col h4 {
  max-width: 160px;
  margin: 0 auto;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
  font-weight: 600;
  margin-bottom: 20px;
  padding: 0 0;
}
.text-widget {
  margin: 0 auto;
  font-size: 0.87em;
  max-width: 160px;
  overflow: hidden;
}
.footer-nav ul { list-style: none;}

.footer-nav li { margin: 0 0 10px 0; float: none;}

.footer-nav a {
  color: rgb(125, 125, 125);
  font-weight: normal;
  font-size: 1em;
  text-transform: uppercase;
}
.footer-nav a:hover, .footer-nav a:focus, .footer-nav a:active {
  color: rgb(230, 90, 20);
  text-decoration: underline;
}

.footer-nav .right-indicator {float: left; margin: 7px 3px 0 0;}
.footer-nav .right-indicator img { width: 5px;}

.footer-col:last-child { padding-top: 5px; border: none;}
.footer-col:last-child .text-widget { max-width: 180px;}
.text-widget > p { text-align: center; color: rgb(255, 0, 0);}


@media (max-width: 1010px) {
  .logo img { max-width: 50%;}
  .logo p {padding-left: 15px;}
  header { padding: 1px 0 0 0; height: 150px;}
  header .container { margin-top: 5px;}
  #menu {margin-top: 0;}
  nav > ul > li {margin-right: 15px;}
  #kredit, #kreditK, #kredit img, #kreditK img { float: none;;}
  .footer-col:last-child img { margin-top: 40px;}
}

@media (max-width: 768px) {
  .logo {
    width: 100%;
    min-width: 300px;
    margin: 0 auto;
    text-align: center;
  }
  .logo img { margin: 0 auto;}
  .nav-toggle { display: block;}
  #menu {
    position: relative;
    top: 29px;
    left: -126px;
    max-height: 0;
    background: rgb(108, 108, 108);
    float: none;
    width: 100%;
    overflow: hidden;
    padding: 0 70px 0 30px;
    margin: 0;
    z-index: 1000;
  }
  #menu li {
    display: block;
    padding: 0 0 0 15px;
    width: 100%;
    color: #FFF;
  }
  #menu a {
     color: rgb(255, 255, 255);
     font-weight: normal;
     font-size: 0.87em;
     padding-left: 10px;
  }
  #menu a:hover, #menu a:focus, #menu a:active  { background: rgb(100, 100, 255);}

  .headerNav ul {
    display: block;
    float: none;
    margin-top: 0;
    padding: 0 auto;
  }
  .headerNav > ul  li { float: none; margin: 0;}
  .sub-indicator, .headerNav .right-indicator { display: none;}

  .headerNav > ul > li > ul, .headerNav > ul > li > ul > li > ul {
    position: static;
    left: 0;
    padding: 0;
    margin: 0;
    background: none;
    visibility: visible;
    width: auto;
    height: auto;
    opacity: 1;
  }
.headerNav > ul > li > ul > li { line-height: 1.9em;}

  .nav-toggle > .fa {
    position: absolute;
    top: 1px;
    right: 1px;
    padding: 10px 2px 9px 2px;
    background: rgb(170, 170, 170);
    display: block;
  }
  .nav-toggle > .fa img {width: 10px;}

  #nav-rechts { float: none; width: 100%; clear: both; display: none;}
  .info-left { width: 100%; float: none;}

  #broadcrumb{
    display: none;
  }

  .topMenu{
    display: block;
  }

  .menuLevel1{
    color: #FFF !important;
  }

}

/*  Hochformat Handy */
@media (max-width: 470px){
  .logo{
    min-width: 200px;
  }
  .logo img {
    max-width: 210px;
    min-width: 210px;
  }
  .logo p {
    padding-left: 0px;
    margin: 0px;
  }
  .nav-toggle{
    min-width: 75px;
  }
  #menu{
    min-width: 200px;
    left: -201px;
  }

  footer{
    position: relative;
  }
  .footer-col{
    width: 100%;
    border: none;
  }
  .flexCol{
    flex-flow: column;
  }

}

/*  Querformat Handy */
@media screen and (max-height:470px){
  footer{
    position: relative;
  }
}

/* Anpassungen 2020 */
.menuLevel1{
  font-size: 14px;
  color: rgb(125, 125, 125);
}

.cursorPointer{
  cursor: pointer;
}

.displayNone { display: none !important;}

.displayFlex{
  display: flex;
}

#navLeft{
  width: 270px;
  margin: 0px 30px 0 0;
}

.pageTitle{
  background: rgb(230, 230, 230);
  border: 1px solid rgb(195,195,195);
  font-size: 1.5em;
  color: rgb(71,71,71);
  line-height: 30px;
  padding-left: 5px;
}

.topMenu{
  display: none;
}

.minHeightDiv{
  min-height: 600px;
}

.messenDiv{
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  border: none;
}
