@charset "UTF-8";
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
@import "fonts.css";
/* 
    Created on : 09.06.2019, 13:53:21
    Author     : Dirk
*/
:root {
  --blau-rgb: 104, 144, 182;
  --tuerkies-rgb: 163, 183, 180;
  --dkblau: #0e2f59;
  --blau: #6890b6;
  --tuerkis: #a3b7b4;
  --max-width: 1760px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Noto Sans", sans-serif;
}

html,
body {
  font-family: "Noto Sans", sans-serif;
  color: #0e2f59;
  height: 100%;
  min-height: 100% !important;
  font-size: 16px;
}

body {
  min-height: 100%;
}

p,
li,
a {
  font-size: 1.25rem;
}

.startseite p, .startseite li, .startseite a {
  font-size: 2.5rem;
}

.sliderP {
  overflow: hidden;
  position: relative;
}
.sliderP .swiper-wrapper {
  max-width: 100%;
}
.sliderP .swiper-button-prev {
  height: 100% !important;
  top: 50%;
  transform: translateY(-50%);
  left: -3rem;
}
.sliderP .swiper-button-prev img {
  height: 100% !important;
  width: auto;
}
.sliderP .swiper-button-next {
  height: 100% !important;
}
.sliderP .swiper-button-next img {
  height: 100% !important;
  width: auto;
}

.sliderH {
  margin: 0 auto;
  padding: 0 5rem;
  overflow: hidden;
  position: relative;
}

#article-2 {
  margin-top: 5rem !important;
  background-color: var(--tuerkis);
  max-width: 100% !important;
  padding: 5rem 0 !important;
}

#faqG {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
#faqG .ce_accordion {
  flex: 0 0 calc(50% - 2rem);
}
#faqG .ce_accordion .toggler {
  background-color: var(--blau);
  padding: 1rem;
  color: #fff;
  font-size: 2rem;
  position: relative;
  padding-right: 5.8rem;
  min-height: 8rem;
  display: flex;
  align-items: center;
}
#faqG .ce_accordion .content-text {
  padding-top: 2rem;
}

input[type=checkbox],
label {
  display: inline-block !important;
}

.auswahlP {
  background: rgba(255, 255, 255, 0.8);
  padding: 20px 40px;
  box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.75);
  margin-bottom: 15px;
  font-weight: 100;
  font-size: 2.1rem;
  padding-left: 60px;
  cursor: pointer;
}
.auswahlP.aktiv {
  background-image: url("../hg/haken.png");
  background-repeat: no-repeat;
  background-position: center left;
  font-weight: 700;
  color: #6890b6;
}
.auswahlP.hide {
  display: none;
}

#childPages {
  max-width: 1200px;
  margin: 0 auto;
}
#childPages .inline {
  display: flex;
  gap: 1rem;
}
#childPages .inline .btnNav {
  flex: 0 0 20%;
  padding: 1rem;
  background: rgba(var(--blau-rgb), 0.75);
  text-align: center;
}
#childPages .inline .btnNav a {
  text-decoration: none;
  color: var(--dkblau);
  font-size: 1.5rem;
  font-weight: 700;
}

/*
input[type=checkbox].cb {
    position:absolute;
    z-index:-1000; 
    left:-1000px; 
    overflow: hidden; 
    clip: rect(0 0 0 0); 
    height:1px; width:1px; 
    margin:-1px; padding:0; border:0;
}

input[type=checkbox].cb + label.cb-label {
    padding-left:30px;
    height:25px; 
    display:inline-block;
    line-height:25px;
    background-repeat:no-repeat;
    background-position: 0 0;
    font-size:25px;
    vertical-align:middle;
    cursor:pointer;

}

input[type=checkbox].cb:checked + label.cb-label {
    background-position: 0 -25px;
}
label.cb-label {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
    background-image:url('../hg/cb.png');
}*/
#footer {
  background: rgba(163, 183, 180, 0.2);
}

#footerC {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  padding: 3rem 0;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto;
}
#footerC .item {
  flex: 0 0 20%;
}
#footerC .item.third-item {
  flex: 0 0 25%;
}
#footerC .item.four-item {
  flex: 0 0 5%;
}
#footerC .four-item {
  justify-self: flex-end;
  text-align: right;
}
#footerC .four-item a {
  color: #0e2f59;
  text-decoration: none;
}
#footerC .first-item img {
  max-width: 500px;
  height: auto;
}

#ctrl_21 {
  text-align: left;
}
#ctrl_21 legend {
  display: none;
}
#ctrl_21 input {
  display: inline-block;
  float: left;
  margin-right: 10px;
}
#ctrl_21 span {
  display: inline-block;
}
#ctrl_21 #lbl_21_0 {
  display: block !important;
  color: #fff;
  font-weight: 100;
}

#main .flex_row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
#main .flex_row h2 {
  color: var(--dkblau);
}
#main .flex_row p,
#main .flex_row li,
#main .flex_row a {
  font-size: 1.25rem;
}
#main .flex_row .flex_column {
  flex: 0 0 calc(50% - 2rem) !important;
  padding: 0rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
#main .flex_row .flex_column h2,
#main .flex_row .flex_column h3 {
  color: var(--dkblau);
}
#main .flex_row .flex_column .content-text {
  background: rgba(var(--tuerkies-rgb), 0.25);
  padding: 3rem;
  box-sizing: border-box;
}
#main .flex_row .columnE {
  flex: 0 0 calc(50% - 2rem) !important;
  box-sizing: border-box;
  padding: 3rem 1rem;
  background: rgba(var(--blau-rgb), 0.25);
}
#main .flex_row .columnE h2 {
  color: var(--dkblau);
}
#main .flex_row .columnE #summe {
  display: none;
}
#main .flex_row .columnE #gesamtP {
  font-size: 2.2rem;
  background: #fff;
  padding: 0.5rem;
  margin-right: 0;
  margin-left: 2rem;
  display: inline-flex;
  position: relative;
  right: 0;
  justify-content: flex-end;
}
#main .kmpl_preis {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#main .bubble_preis {
  background: rgba(var(--blau-rgb), 1);
  padding: 2rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  max-width: 180px;
  max-height: 180px;
  font-size: 1.5rem;
  color: #fff;
  font-weight: 700;
}
#main .preis-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}
#main .preis-row .preis-bezeichnung {
  background-color: #fff;
  flex: 0 0 80%;
  padding: 0.3rem 1rem;
  box-sizing: border-box;
}
#main .preis-row .preis-wert {
  background-color: #fff;
  flex: 0 0 18%;
  padding: 0.3rem 1rem;
  box-sizing: border-box;
  text-align: right;
}
#main #preisListe .preis-row {
  display: flex;
  justify-content: space-between;
  padding: 0rem 0;
  cursor: pointer;
  position: relative;
}
#main #summe {
  display: none;
}
#main #gesamtPB, #main #gesamtBasisP {
  background-color: var(--dkblau);
  color: #fff;
  display: inline-block;
  padding: 1rem;
  border-radius: 5px;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 3rem;
}
#main #gesamtBasisP {
  font-size: 1.2rem;
  background-color: var(--tuerkis);
}
#main .padding-top-5 {
  padding-top: 5rem !important;
}
#main #article-38 p, #main #article-38 ul {
  max-width: 80%;
  margin: 0 auto;
}
#main #article-38 ul {
  list-style: square outside;
}
#main #preisListe .preis-row.active {
  border: 1px solid #2f6900;
}
#main #preisListe .preis-row.active::after {
  position: absolute;
  content: "";
  background: url(../hg/haken.png) no-repeat center center;
  width: 50px;
  height: 50px;
  background-size: 30px;
  right: -3rem;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
  z-index: 100;
}
#main .flex_gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  background: rgba(var(--blau-rgb), 0.25);
  margin: 2rem 0;
  padding: 5rem 3rem;
  justify-content: space-around;
}
#main .flex_gallery .media {
  position: relative;
  flex: 0 0 calc(50% - 1rem) !important;
  box-sizing: border-box;
  border: 1px solid rgba(var(--blau-rgb), 0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2rem;
  cursor: pointer;
}
#main .flex_gallery .media .rte {
  display: flex;
  justify-content: space-around;
}
#main .flex_gallery .media .rte p {
  font-size: 1.3rem;
}
#main .flex_gallery .media .rte p.preis {
  background: var(--dkblau);
  padding: 0.5rem;
  border-radius: 10px;
  display: inline-block;
  font-size: 1.2rem;
  color: #fff;
}
#main .flex_gallery .media figure {
  text-align: center;
}
#main .flex_gallery .media figure img {
  margin: 0 auto;
}
#main .flex_gallery .media:hover {
  border: 1px solid #fff;
  background: rgba(var(--blau-rgb), 0.1);
}
#main .flex_gallery .media:hover::after {
  content: "Auswählen";
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  color: var(--dkblau);
  font-size: 1.5rem;
  pointer-events: none;
}
#main .flex_gallery img {
  width: 100%;
  height: auto;
  max-width: 560px;
}
#main .externe ul {
  list-style: url(../hg/list-point-round.png);
}
#main .externe ul li {
  margin-left: 1.7rem;
  padding-left: 2rem;
}
#main .flex.row {
  display: flex;
  gap: 1rem;
}
#main .flex.row .content-text, #main .flex.row .content-image {
  flex: 0 0 calc(50% - 2rem) !important;
}
#main .flex.row.gap2 {
  gap: 3rem;
}
#main .margin-top-5 {
  margin-top: 5rem;
}
#main .margin-bottom-5 {
  margin-bottom: 5rem;
}

#download-table {
  width: 100%;
  border-collapse: collapse;
  display: flex;
  flex-wrap: wrap;
  background: rgba(var(--tuerkies-rgb), 0.25);
  padding: 5rem 0;
}
#download-table .inside-tableD {
  display: flex;
  flex-wrap: wrap;
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
}
#download-table .inside-tableD .content-download {
  flex: 0 0 calc(50% - 1rem) !important;
  box-sizing: border-box;
  text-align: center;
}
#download-table .inside-tableD .content-download a {
  text-decoration: none !important;
  color: var(--dkblau) !important;
}
#download-table .inside-tableD .ext-pdf a {
  background: none;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5rem 0 !important;
}
#download-table .inside-tableD .ext-pdf a:after {
  content: "";
  background: url(../hg/download_btn.png);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
  margin-top: 1rem;
  background-position: center top !important;
  transform: rotate(0deg);
  transition: all 0.3s ease;
}
#download-table .inside-tableD .ext-pdf a:hover:after {
  content: "";
  background: url(../hg/download_btn.png);
  background-repeat: no-repeat;
  background-size: 50px 50px;
  height: 50px;
  width: 50px;
  transform: rotate(15deg);
  transition: all 0.3s ease;
}

#header .logorow {
  text-align: center;
  padding: 10px 10px 0 10px;
}
#header .logorow img {
  max-width: 500px;
  height: auto;
}
#header #naviHolder {
  text-align: center;
}
#header #naviHolder .mod_navigation {
  display: inline-block;
  width: 100%;
  position: relative;
  bottom: -70px;
  max-width: 1780px;
  padding: 16px 50px;
  margin: 0px auto;
}
#header #naviHolder .mod_navigation .level_1 {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  padding-top: 1rem;
  padding-bottom: 1rem;
}
#header #naviHolder .mod_navigation div.point, #header #naviHolder .mod_navigation div#p_4 {
  display: inline-block;
  width: 210px;
  height: 210px;
  left: 0px;
  margin: 2px;
  background: var(--tuerkis);
  vertical-align: central;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.35s ease;
  /*transform: scale(1.0);*/
}
#header #naviHolder .mod_navigation div.point a,
#header #naviHolder .mod_navigation div.point strong.active, #header #naviHolder .mod_navigation div#p_4 a,
#header #naviHolder .mod_navigation div#p_4 strong.active {
  color: #fff !important;
  text-decoration: none;
  line-height: 2.2rem;
  font-size: 2rem;
}
#header #naviHolder .mod_navigation div.point:hover, #header #naviHolder .mod_navigation div#p_4:hover {
  transform: scale(1.25);
}
#header #naviHolder .mod_navigation div#p_5.point {
  line-height: 2rem;
}
#header #naviHolder .mod_navigation div#p_5.point a,
#header #naviHolder .mod_navigation div#p_5.point strong.active {
  color: #fff;
  text-decoration: none;
  line-height: 20px;
  font-size: 1.8rem;
}
#header #naviHolder .mod_navigation div#p_5.point span,
#header #naviHolder .mod_navigation div#p_5.point strong {
  display: inline-block;
  vertical-align: middle;
}
#header #naviHolder .mod_navigation div.point.over,
#header #naviHolder .mod_navigation div .point.active,
#header #naviHolder .mod_navigation div .point.forward {
  transform: scale(1.15);
  animation-fill-mode: backwards;
  z-index: 101 !important;
  background: #0e2f59 !important;
}
#header #naviHolder .mod_navigation div.point.over a,
#header #naviHolder .mod_navigation div.point.over strong,
#header #naviHolder .mod_navigation div .point.active a,
#header #naviHolder .mod_navigation div .point.active strong,
#header #naviHolder .mod_navigation div .point.forward a,
#header #naviHolder .mod_navigation div .point.forward strong {
  color: #fff !important;
  text-decoration: none;
  line-height: 2.2rem;
  font-size: 2rem;
}
#header #naviHolder .mod_navigation div.point.active {
  z-index: 100 !important;
}
#header #naviHolder .mod_navigation div.point.out a {
  /*color:#000!important;*/
}
#header #naviHolder .mod_navigation #p_1 {
  left: 0%;
  background: #6890b6;
  z-index: 1;
}
#header #naviHolder .mod_navigation #p_1.out {
  animation: topBar_close_1 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_2 {
  left: 13.5%;
  background: #a3b7b4;
  z-index: 2;
}
#header #naviHolder .mod_navigation #p_2.out {
  animation: topBar_close_2 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_3 {
  left: 27%;
  background: #6890b6;
  z-index: 3;
}
#header #naviHolder .mod_navigation #p_3.out {
  animation: topBar_close_3 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_4 {
  left: 40.5%;
  background: #a3b7b4;
  z-index: 4;
}
#header #naviHolder .mod_navigation #p_4.out {
  animation: topBar_close_4 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_5 {
  left: 54%;
  background: #6890b6;
  z-index: 5;
}
#header #naviHolder .mod_navigation #p_5.out {
  animation: topBar_close_5 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_6 {
  left: 67.5%;
  background: #a3b7b4;
  z-index: 6;
}
#header #naviHolder .mod_navigation #p_6.out {
  animation: topBar_close_6 0.4s ease-in-out;
}
#header #naviHolder .mod_navigation #p_7 {
  left: 81%;
  background: #a3b7b4;
  z-index: 7;
}
#header #naviHolder .mod_navigation #p_7.out {
  animation: topBar_close_7 0.4s ease-in-out;
}
@keyframes topBar_open {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  /*        50% {transform: translateY(0px) rotate(0deg) scaleX(.5); z-index:101}
              75% {transform: translateY(0px) rotate(0deg) scaleX(1.55);z-index:101 }*/
  50% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 101;
  }
  75% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
    z-index: 101;
  }
  90% {
    transform: translateY(0px) rotate(0deg) scale(1.25);
    z-index: 101;
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
    z-index: 101;
  }
}
@keyframes topBar_close {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_1 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 1;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_2 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 2;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_3 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 3;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_4 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 4;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_5 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 5;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_6 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 6;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}
@keyframes topBar_close_7 {
  0% {
    transform: translateY(0px) rotate(0deg) scale(1.15);
  }
  25% {
    transform: translateY(0px) rotate(0deg) scale(0.5);
    z-index: 7;
  }
  50% {
    transform: translateY(0px) rotate(0deg) scale(1.3);
  }
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
}

#left {
  margin-left: 0;
  /*background: rgba(255,255,255,.7);*/
  background-position: left bottom;
  background: #fff;
  padding-top: 0px;
  position: absolute;
  left: 0;
  text-align: left;
  padding: 10px;
  top: 0px;
}
#left a,
#left span {
  padding: 4px 0;
  display: block;
  font-weight: 300;
  text-decoration: none;
}
#left .level_2 {
  font-size: 90%;
}
#left li {
  list-style: none;
  text-align: center;
}

#left li {
  list-style: none;
  text-align: center;
}

/*#################  MAIN ############################*/
#main {
  background-color: #fff;
}
#main .inside {
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  padding: 50px 0 0 0;
}
#main .inside > div.mod_article {
  max-width: 1780px;
  margin: 0 auto;
  padding: 0px 20px;
}
#main .inside .flexitem {
  width: 100vw;
}
#main .inside .flexitem img {
  width: 100%;
  height: auto;
}
#main .inside figure {
  margin: 0 !important;
}
#main h1 {
  color: #6890b6;
  font-size: 5rem;
  text-align: center;
}
#main h2 {
  color: #6890b6;
  font-size: 3rem;
}
#main h3 {
  color: #6890b6;
  color: #6890b6;
  font-size: 2rem;
}
#main .ui-accordion-header {
  font-size: 130%;
  cursor: pointer;
}
#main .ui-accordion-header:after {
  position: absolute;
  right: 1rem;
  content: "+";
  font-size: 3rem;
  padding: 2px 14px;
}
#main .ui-accordion-header.active:after {
  content: "-";
  padding: 2px 14px;
}
#main .ui-accordion-content div.ce_text {
  padding: 20px 10px;
}
#main .formular {
  justify-content: space-around;
}
#main .formular .row {
  display: flex;
  flex-wrap: nowrap;
}
#main .formular .row input {
  margin: 4px;
}
#main .formular .row textarea {
  font: 400 15px Arial;
  font-family: Arial;
  font-size: 100%;
  padding: 6px 10px;
}
#main .formular .det {
  background: rgba(200, 200, 200, 0.2);
  padding: 20px 10px;
  margin-bottom: 10px;
}
#main #auftrag {
  background: #6890b6;
  color: #fff;
  padding: 42px 15px;
  line-height: 3rem;
  top: -10px;
  font-size: 2.2rem;
  text-align: center;
  border-radius: 50%;
  display: inline-block;
  float: right;
  cursor: pointer;
}
#main #auftrag a {
  text-decoration: none;
  color: #fff;
}
#main ul {
  list-style: square inside;
}
#main .btn_bewertung ul {
  list-style: none;
}
#main .btn_bewertung ul li::before {
  content: "♦"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
  color: #ffb500; /* Change the color */
  font-weight: bold; /* If you want it to be bold */
  display: inline-block; /* Needed to add space between the bullet and the text */
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
#main #bewertung_items .eintrag {
  border-bottom: 1px dashed #6890b6;
  padding: 20px 0;
}
#main .ce_download a {
  text-decoration: none;
  color: #555;
}
#main .ce_download a span {
  font-size: 80%;
  color: #ccc;
}
#main .tooltip {
  position: relative;
}
#main {
  /*.tooltip span[rel=tooltip] {
      display: none;
    }

    .tooltip:hover span[rel=tooltip] {
      display: block;  
      position: absolute; 
      bottom: 2em;
      left: -6em;
      width: 15em;
      padding: 0.5em;
      z-index: 100;
      color: #000; 
      background-color: #ffebe6;
      border: solid 1px #c32e04;
      border-radius: 0.2em;
    }   */
  /*[data-tooltip]::before {
      content: "";
      position: absolute;
      display: block;	
      opacity: 0;
      transition: opacity 0.5s;
      bottom: 1.2em; 
      left: auto;
      right: 0; 
      border-width: 2em 1em 0;
      border-style: solid;
      border-color: #c32e04 transparent;
    }

    [data-tooltip]:hover::after, [data-tooltip]:hover::before{
      opacity: 1;
    } */
}
#main .tooltip {
  text-decoration: underline;
}
#main [data-tooltip] {
  position: relative;
}
#main [data-tooltip]::after {
  content: attr(data-tooltip);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
  display: block;
  position: absolute;
  bottom: 2em;
  left: -6em;
  width: 15em;
  padding: 0.5em;
  z-index: 100;
  color: #fff;
  background-color: #315a9a;
  border: solid 1px #ccc;
  border-radius: 0.5em;
}
#main [data-tooltip]:hover::after {
  opacity: 1;
}
#main #auswahl-urne #urne-auswahl, #main #auswahl-seeurne #urne-auswahl, #main #auswahl-natururne #urne-auswahl {
  justify-content: flex-start !important;
}
#main #auswahl-urne .fullwidthLine, #main #auswahl-seeurne .fullwidthLine, #main #auswahl-natururne .fullwidthLine {
  flex: 1 0 100%;
  width: 100%;
}
#main #auswahl-urne .fullwidthLine span, #main #auswahl-seeurne .fullwidthLine span, #main #auswahl-natururne .fullwidthLine span {
  font-size: 1.5rem;
  color: var(--dkblau);
}
#main #auswahl-urne .fullwidthLine .preisG, #main #auswahl-seeurne .fullwidthLine .preisG, #main #auswahl-natururne .fullwidthLine .preisG {
  background: var(--tuerkis);
  padding: 0.3rem 0.9rem;
  display: inline-block;
  border-radius: 5px;
  margin-left: 5rem;
  color: #fff;
}
#main #auswahl-urne .media, #main #auswahl-seeurne .media, #main #auswahl-natururne .media {
  position: relative;
  flex: 0 0 calc(15% - 1rem) !important;
}
#main #auswahl-urne .media .rte p.preis, #main #auswahl-seeurne .media .rte p.preis, #main #auswahl-natururne .media .rte p.preis {
  display: none;
}
#main #auswahl-seeurne #urne-auswahl {
  justify-content: space-around !important;
}
#main #auswahl-seeurne .media {
  flex: 0 0 calc(30% - 1rem) !important;
}
#main #auswahl-seeurne .media .rte p.preis {
  display: block;
}
#main #auswahl-seeurne .media .rte p.name {
  display: none;
}
#main #auswahl-natururne #urne-auswahl {
  justify-content: space-around !important;
}
#main #auswahl-natururne .media {
  flex: 0 0 calc(30% - 1rem) !important;
}
#main #auswahl-natururne .media .rte p.preis {
  display: block;
}
#main #auswahl-natururne .media .rte p.name {
  display: none;
}
#main #auswahl-natururne .media figure img {
  max-width: 250px;
  height: auto;
}

body.auftragsformular #preisListe {
  display: none;
}

/*#################  MAIN ENDE ############################*/
.firstflex {
  display: flex;
  flex-wrap: nowrap;
}
.firstflex .flexitem {
  width: 25%;
  min-height: 400px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.4s ease;
}
.firstflex .flexitem .lineP {
  background: #6890b6;
  padding: 6px 6px;
  text-align: right;
  color: #fff;
  position: relative;
  z-index: 80;
  display: flex;
  justify-content: center;
  align-items: center;
}
.firstflex .flexitem .lineP .numP {
  font-family: "Noto Sans", sans-serif;
  background: #0e2f59;
  color: #fff;
  /*padding:4px 4px;*/
  height: 50px;
  width: 50px;
  line-height: 50px;
  text-align: center;
  top: -10px;
  font-size: 2.2rem;
  border-radius: 50%;
  transition: all 0.4s ease;
}
.firstflex .flexitem .lineP strong, .firstflex .flexitem .lineP a {
  padding-left: 1rem;
}
.firstflex .flexitem .lineP a {
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
}
.firstflex .flexitem:hover .numP {
  transform: scale(1.3);
}
.firstflex .flexitem .sliderP {
  background: rgba(255, 255, 255, 0.6);
  width: 60%;
  height: 100%;
  position: absolute;
  top: 0px;
  right: 0px;
  padding-top: 150px;
  text-align: right;
  padding-right: 6px;
  z-index: 79;
}
.firstflex .flexitem .sliderP h2 {
  color: #6890b6;
  font-weight: 400;
  font-size: 1.9rem;
}
.firstflex .flexitem .sliderP h2 strong {
  font-weight: 700;
  font-size: 2.2rem;
}
.firstflex .flexitem .sliderP a {
  display: block;
  color: #6890b6;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.7rem;
}
.firstflex .flexitem .details {
  display: none;
}

#article-32 .flexitem .content-image img {
  opacity: 0.7;
}
#article-32 .flexitem:hover .content-image img {
  opacity: 1;
}

.startseite #main {
  background-image: none;
}
.startseite #main .inside {
  margin-top: 4%;
}

.color-dk-blau {
  color: #0e2f59 !important;
}

.fs-big {
  font-size: 5rem !important;
}

#btn_backToStart {
  position: absolute;
  background: #6890b6;
  color: #fff;
  padding: 4px 4px;
  top: -10px;
  right: 10px;
  font-size: 1.2rem;
  border-radius: 50%;
  height: 100px;
  width: 100px;
  text-align: center;
  cursor: pointer;
  transition: all 0.4s ease;
}
#btn_backToStart a {
  color: #fff;
  text-decoration: none;
  line-height: 100px;
}
#btn_backToStart:hover {
  transform: scale(1.1);
}

/*##################################popup*/
.popup #main {
  background-image: none;
}
.popup #main .inside {
  margin: 0px;
}
.popup #swb {
  display: none;
}

#footer p,
#footer a {
  font-size: 1.25rem;
}
#footer #mapH {
  /*height:400px;*/
}
#footer #mapH .ce_dlh_googlemaps {
  max-height: 400px;
}
#footer #mapH .dlh_googlemap {
  max-height: 400px;
}
#footer #formularH {
  background-color: #6890b6;
  text-align: center;
  padding: 40px 20px;
}
#footer #formularH .tease {
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
  text-align: left;
  color: #fff;
}
#footer #formularH .widget {
  margin-bottom: 0px;
}
#footer #formularH .widget-submit {
  text-align: right;
}
#footer #formularH .row_flex_50 {
  display: flex;
  flex-wrap: wrap;
}
#footer #formularH .row_flex_50 .widget {
  box-sizing: border-box;
  width: 50%;
  padding: 4px;
}
#footer #formularH .row_flex_100 {
  display: flex;
  flex-wrap: wrap;
}
#footer #formularH .row_flex_100 .widget {
  box-sizing: border-box;
  width: 100%;
  padding: 4px;
}
#footer #formularH .widget.flex {
  display: flex;
  flex-wrap: nowrap;
  padding: 0px;
}
#footer #formularH #formHolderFooter {
  max-width: 980px;
  margin: 0px auto;
  display: flex;
  flex-wrap: nowrap;
}
#footer #formularH #formHolderFooter .itemF {
  box-sizing: border-box;
  padding: 10px;
}
#footer #formularH #formHolderFooter .itemF.last {
  padding-left: 20px;
}
#footer #formularH .ce_form {
  /*                display: inline-block;*/
  /*            max-width:980px;
                    margin:0px auto;*/
}
#footer #formularH .ce_form .widget > label,
#footer #formularH .ce_form labe {
  display: inline-block;
}
#footer #sitemapH {
  text-align: left;
  color: #fff;
}
#footer #sitemapH a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
}
#footer #sitemapH ul {
  list-style: none;
}
#footer #sitemapH ul.first {
  padding-right: 90px;
}
#footer #sitemapH.flex {
  display: flex;
  flex-wrap: wrap;
}
#footer .abspann {
  max-width: 980px;
  margin: 0px auto;
}
#footer .abspann .adresseF {
  text-align: right;
  color: #fff;
}

/*##############################*/
.c-hamburger {
  display: block;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  width: 40px;
  height: 40px;
  font-size: 0;
  text-indent: -9999px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: none;
  border-radius: none;
  border: none;
  cursor: pointer;
  transition: background 0.3s;
}

.c-hamburger:focus {
  outline: none;
}

.c-hamburger span {
  display: block;
  position: absolute;
  top: 18px;
  left: 5px;
  right: 5px;
  height: 4px;
  background: #444;
}

.c-hamburger span::before,
.c-hamburger span::after {
  position: absolute;
  display: block;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #444;
  content: "";
}

.c-hamburger span::before {
  top: -12px;
}

.c-hamburger span::after {
  bottom: -12px;
}

.c-hamburger--htx {
  background-color: #f2f2e9;
}

.c-hamburger--htx span {
  transition: background 0s 0.3s;
}

.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.3s, 0.3s;
  transition-delay: 0.3s, 0s;
}

.c-hamburger--htx span::before {
  transition-property: top, transform;
}

.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}

/* active state, i.e. menu open */
.c-hamburger--htx.is-active {
  background-color: #fff;
}

.c-hamburger--htx.is-active span {
  background: none;
}

.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}

.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}

.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}

#swb {
  display: none;
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 333;
  background-color: #555;
  padding: 4px;
}

#left {
  display: none;
  transition: all 0.6s ease;
  left: -300px;
  position: absolute;
}

/*###################################*/
@media (max-width: 1000px) {
  #header #naviHolder {
    text-align: center;
  }
  #header #naviHolder .mod_navigation {
    max-width: 800px;
  }
  #footer #formularH {
    padding: 40px;
  }
}
@media (max-width: 950px) {
  #footer .firstflex {
    display: flex;
    flex-wrap: wrap;
  }
  #footer .firstflex .flexitem {
    width: 50%;
  }
}
@media (max-width: 900px) {
  #swb {
    display: table;
  }
  #naviHolder {
    display: none;
  }
  #left {
    display: table;
    left: -320px;
    z-index: 1212;
  }
  #left a {
    color: #6890b6;
  }
  .aktiv #left {
    left: 0px;
    box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.45);
    width: 300px;
    padding-left: 30px;
    z-index: 1212;
  }
  #left li {
    list-style: square;
    text-align: left;
    border-bottom: 1px solid #e1e1e1;
  }
  #left ul.level_1 {
    padding-left: 20px;
  }
  #container {
    /*position:static;*/
  }
  body #main,
  body #footer {
    filter: grayscale(0%) brightness(100%);
    transition: all 0.6s ease;
  }
  body.aktiv #main,
  body.aktiv #footer {
    filter: grayscale(100%) brightness(50%);
  }
}
@media (max-width: 720px) {
  #footer .firstflex .flexitem {
    width: 50%;
    min-height: 300px;
  }
  #footer #formularH #formHolderFooter {
    display: flex;
    flex-wrap: nowrap;
    flex-flow: column;
  }
  #footer #formularH #formHolderFooter .itemF.last {
    padding-left: 10px;
  }
  #footer #bbholder {
    margin: 0 auto;
    width: auto;
  }
  #footer #bbholder .btn_bewertung {
    margin-left: 20px;
  }
}
@media (max-width: 520px) {
  #footer .firstflex .flexitem {
    width: 100%;
    min-height: 300px;
  }
  #main .inside {
    padding: 20px;
  }
}
/*################ BEWERTUNG ###################################*/
#bbholder .header {
  background-color: #d6d6d6;
  font-size: 28px;
  padding: 6px;
  background-image: url(../bewertungssystem/bewertung-hg.png);
  background-repeat: no-repeat;
  background-position: center center;
  color: #d42426;
  text-align: center;
}

#sterneContainer,
.st_cont {
  background-image: url(../bewertungssystem/gelb.png);
  background-repeat: no-repeat;
  background-position: -135px center;
  height: 50px;
  overflow: hidden;
  width: 140px;
  margin-left: auto;
  margin-right: auto;
}

#bbholder h1 {
  margin: 0px;
  padding: 0px;
  font-size: 12px;
  text-align: left;
}

#bbholder {
  border: 3px solid #888;
  max-width: 300px;
  width: 300px;
  background: #fff;
}

#bbholder .sterne {
  /*     background-image: url(../bewertungssystem/hg.png);
         background-repeat: repeat-y;
         background-position: center top;  */
}

#bbholder .verfasser {
  font-size: 8px;
  text-align: right;
  color: #123f67;
}

#bbholder .eintrag {
  border-bottom: 1px dashed #123f67;
}

.eintragsHolder {
  margin-top: 18px;
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #333;
  height: 150px;
  overflow-y: auto;
  padding: 2px;
  background-color: #fff;
}

#benotung {
  font-size: 24px;
  font-weight: 600;
  color: #6890b6;
  text-align: center;
}

#benotung span {
  font-size: 70%;
}

#ctrl_company,
#ctrl_url {
  display: none;
}

#statsP {
  display: none;
}

.btn_bewertung {
  margin-top: 20px;
  text-align: left;
  margin-left: 80px;
}
.btn_bewertung a {
  text-decoration: none;
  color: #6890b6;
  font-weight: bold;
}

/*//###################################################*/
/*################BERWERTUNGSSYSTEM ##########################*/
form.bewertung input.p,
form.bewertung textarea {
  display: block;
  margin: 10px 0;
}
form.bewertung .stern_g {
  cursor: pointer;
}
form.bewertung #note {
  font-size: 3rem;
  color: #6890b6;
}
form.bewertung #rand {
  border: 1px solid #6890b6;
  padding: 10px;
  display: inline-block;
  text-align: center;
}
form.bewertung #sternHolderIn {
  display: flex;
  flex-wrap: nowrap;
}
form.bewertung #sternHolderIn .stern_g {
  padding: 10px;
}/*# sourceMappingURL=aufbau.css.map */