body {
  background-color:transparent;font-weight:300;
  }
main {
  padding:0px 0px;margin:0px 0px!important;
}
.com-content-article {
  padding:20px 20px;
}
.footer {
  background-color:rgba(30,30,30,1);background-image:none;
}
@media (width<=991px){
header {
  margin-bottom:10px;
}
  }
@supports (display:grid) {
  .site-grid {
    grid-gap: 0 1em;
    grid-template-columns: [full-start]minmax(0,1fr)[main-start]repeat(4,minmax(0,19.875rem))[main-end]minmax(0,1fr)[full-end];
    grid-template-areas:
".banner banner banner banner." 
".top-a  top-a  top-a  top-a. "
".banner2 banner2 banner2 banner2." 
".top-b  top-b  top-b  top-b. "
".banner3 banner3 banner3 banner3."
".top-c  top-c  top-c  top-c. "
".banner4 banner4 banner4 banner4."
".top-d  top-d  top-d  top-d. "
".banner5 banner5 banner5 banner5."
".banner-b banner-b banner-c banner-c."
".banner6 banner6 banner6 banner6."
".comp   comp   comp   comp.  " 
".side-r side-r side-r side-r." 
".side-l side-l side-l side-l." 
".bot-a  bot-a  bot-a  bot-a. " 
".bot-b  bot-b  bot-b  bot-b. ";
    display: block;float:left;
  }
}
@supports (display:grid) {
  @media (width >= 992px) {
    .site-grid {
      grid-template-areas:
".banner banner banner banner." 
".top-a  top-a  top-a  top-a. "
".banner2 banner2 banner2 banner2." 
".top-b  top-b  top-b  top-b. "
".banner3 banner3 banner3 banner3."
".top-c  top-c  top-c  top-c. "
".banner4 banner4 banner4 banner4."
".top-d  top-d  top-d  top-d. " 
".banner5 banner5 banner5 banner5."
".banner-b banner-b banner-c banner-c."
".banner6 banner36 banner6 banner6."
".side-l comp   comp   side-r." 
".bot-a  bot-a  bot-a  bot-a. " 
".bot-b  bot-b  bot-b  bot-b. ";
    }
  }
}
.container-header {
  z-index: 10;
  background-color: rgba(208,211,222,1)!important;
background-image: none;
  position: relative;
  box-shadow: inset 0 5px 5px #00000008;border-bottom: solid 4px white;
}
.container-header .navbar-toggler {
  color: #777777!important;
  cursor: pointer;
  border: 1px solid #777;
}
.brand-logo {
  max-width:700px;display:block;text-align:center;justify-content: center;
  color:darkred!important; /*font-weight:400; font-size:1.5em;letter-spacing:0.05em;*/
  padding: 20px 0px;
}
.container-header .navbar-brand {
  color: #fff;
  margin: 0px auto;
  padding-top: .3125rem;
  padding-bottom: .3125rem;
  font-size: 2rem;
  display: block;text-align:center;justify-content: center;
  position: relative;
}

@media (width<=991px){
  .brand-logo {
 margin-bottom:20px;
}
  .container-header {
  /*background-image: url(https://www.mutschler-fuer-haare.de/cms-26/images/banners/web-haar-braun-2000.jpg?1778865059635);*/
}
  }

/*================= Navigation ================ */
.container-header .container-nav {
  flex-wrap: wrap;
  justify-content: center;
  padding-bottom: 1em;text-align:center;margin:0px auto;
}

/*================= Struktur/Grid ================ */
.container-banner {
    margin-bottom: 0rem;
    display: block;
}
.flex-container {
  display:flex;align-items: center;justify-content: center;height: 60vh;
}
.blog-item {
  border-bottom:0px solid rgba(26,122,138,0.6);
}
.card {
  border-top: 0px solid rgba(26,122,138,0.6);
  border-bottom: 0px solid rgba(26,122,138,0.6);
}
.container-bottom-a {
 background-color:rgba(26,122,138,0.1)
}
@media (width<=991px){
.container-banner {
  margin: 0 0 0rem;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0rem;
    margin-left: 0px;
  display: block;
}
  .flex-container {
  display:flex;align-items: center;justify-content: center;height: 50vh;
}
  }
@media (width<=768px){
  .flex-container {
  display:flex;align-items: center;justify-content: center;height: 35vh;
}
  }
/* ================ Typografie =================== */

a:not([class]) {
  text-decoration: none;
}
a:hover {
  color:rgba(150,193,31,1);
}
.darkred a:not([class]) {
  color:darkred !important;
}
.darkred a:hover {
  color:#000000 !important;
}
p {
  font-size: 1.2em;
}
h1 {
  font-size: clamp(2rem, 3vw + 1rem, 5rem);font-weight:400;letter-spacing:0.1em;/*-webkit-text-stroke: 5px rgba(50,50,50,0.5);*/
}
h2 {
  font-weight:400;text-align:center;letter-spacing:0.05em;color:rgba(208,211,222,1);
  margin-top:40px;margin-bottom:20px;padding-top:40px;padding-bottom:20px;
  border-bottom: 2px solid rgba(208,211,222,1);
}
.banner-text h2 {
  font-size: clamp(1.5rem, 3vw + 1rem, 5rem);/*font-weight: bold;*/text-align:center!important;
  color: gray; border-bottom: 2px solid darkred;
}
h3 {
  font-size:1.3em;font-weight:300;letter-spacing:0.05em;padding:20px 0px 20px 0px;
}

ul,li {
  font-size:1em;font-weight:500;
}
.spalte-versetzt-startseite,.spalte-versetzt-startseite-2,.spalte-versetzt-startseite,.spalte-versetzt-startseite-2 h2 {
  color: #000000;text-align:left;margin-top:0px;
}
.spalte-versetzt-startseite,.spalte-versetzt-startseite-2,.spalte-versetzt-startseite,.spalte-versetzt-startseite-2 p {
  color: #000000;text-align:left;margin-top:0px;
}
.gray {
  color: gray!important;
}
.blond {
  color:rgba(202,137, 89,1); line-height:2em;
}
h4 {
  font-weight:400;
}
@media (width<=2500px){
  h2{
  font-size:2.5em;margin-top:10px;margin-bottom:20px;padding-top:10px;
}
  }
@media (width<=1199px){
  h2{
  font-size:2em;margin-top:10px;margin-bottom:20px;padding-top:10px;
}
  }
@media (width<=991px){
h2{
  margin-top:10px;margin-bottom:20px;padding-top:10px;
}
}
@media (width<=768px){
h2{
  font-size: 1.5em;font-weight:700;margin-top:10px;margin-bottom:20px;padding-top:10px;
}
  h3 {
  padding:10px 0px 10px 0px;
}
  p {
    font-size:1em;
  }
}
/* ================ Banner ========================= */
/* -------------- Module ------------------- */
.half-width {
  width:50%!important;float:left!important;
}
.quarter-width {
  width:25%!important;float:left!important;
}
#mod-custom129 {
  height:70vh; display:block;
}
.banner-container-left {
  display:block;text-align:left;float:left;
}
.banner-container-left-unternehmen {
  color: rgba(29,121,137,1);display:block;text-align:left;float:left;background-color:rgba(29,121,137,0);padding-bottom:40px;
}
.banner-container-left-privat {
  color:#000000;display:block;text-align:left;float:left;background-color:rgba(224,227,237,1);
}
/* ================ Video Banner =================== */
  .video-banner {
    position: relative;margin-top:0px;margin-right:0px;margin-left:0px;
    width: 100%;
    height: 70vh; /* Oder gewünschte Höhe */
    /*overflow: hidden;*/
}
.back-video {
    position: absolute;
    left:0; right: 0; bottom: 0;
    width: 100%;height: 100%;
    z-index: -1;
    object-fit: cover;
}
.container-banner {
  display: block;float:left;
}
.container-banner .banner-overlay .overlay {
  text-align: center;
  background-color: /*#5212120.8*/rgba(255,255,255,0.1)!important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0em;
  display: block;
}
.container-banner .banner-overlay {
  color: white;
  background-position: 50% top;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 70vh;
}
#mod-custom131  {
  color: white;background-color:rgba(10,10,10,1);
  background-position: 55% -40px;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  height: 70vh;
}
.banner-overlay-start {
  z-index: 2;
  position: absolute;
  top: 0px; left: 0px; width: 100%; height: 70vh; padding-top: 0px; margin-top:0px;
  background-color: rgba(26,122,138,0.6);
  /*opacity: 0.4;*/
  color: green;
  
}
.banner-text {
  z-index: 3;
  position: absolute; 
  top: 100px; margin-right:auto; margin-left:auto;width:100%;
  text-align:center!important;
}

.banner-text-2 { 
  color:white;top: 100px; margin-right:auto; margin-left:auto;width:100%;
  text-align:center!important;display:block;float:left;
  background-color:rgba(26,122,138,0.85); padding: 2% 2% 0% 2%;
}
.banner-text-white { 
  color:#ffffff;top: 100px; margin-right:auto; margin-left:auto;width:100%;height:100%;
  text-align:center!important;
}
.lead-1 {
  color: #fff; font-size: 2rem; font-weight: 300;
}
@media (width<=2500px){
.banner-text h2 {
  font-size: 4em;margin-top:100px;
}
}
@media (width<=1200px){
.video-banner {
  margin-right: 0px;
  margin-left: 0px;
  width: 100%;
}
.banner-overlay-start {
margin-top:0px;margin-left:0px;
  background-color: rgba(26,122,138,0.6);
}
.banner-text { 
  top: 10px;
}
.banner-text h2 {
  font-size: 3em;margin-top:75px;
}

}
@media (width<=991px){
.container-header .container-search {
  display:none;
}
  .half-width {
  width:100%!important;float:left!important;
}
.quarter-width {
  width:50%!important;float:left!important;
}
.video-banner {
    position: relative;margin-top:0px;margin-right:-20px;margin-left:-20px;
    width: 100%;
    height: 60vh; /* Oder gewünschte Höhe */
    /*overflow: hidden;*/
}
  .banner-overlay-start {
  top: 0px; left: 0px; width: 100%; height: 60vh; padding-top: 0px; margin-top:0px;margin-left:0px;background-color: rgba(26,122,138,0.6);
}
  .container-banner .banner-overlay {
  color: #fff;
  background-position: top,50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  height: 70vh;
}
/* .banner-text { 
  top: 10px;height:auto;text-align:center!important;display:block,float:left;
}
   .banner-text-2 { 
  top: 10px;height:auto;text-align:center!important;display:block,float:left;
}*/
  .banner-text h2 {
  margin-top:50px;
}
}
@media (width<=768px){
  .container-header .navbar-brand {
  margin-inline-end: auto;
  padding-top: 0.6rem;padding-bottom: 0rem;margin-bottom:0px;
}
.video-banner {
    margin-right:0px;margin-left:0px;
    width: 100%;height:40vh;;
}
    .container-banner .banner-overlay {
  height: 43vh;
}
.back-video {
    left: 0px; top: 0px;
    width: 100%; height: 100%;
    object-fit: cover;
}
.banner-overlay-start {
  margin-top:0px;background-color: rgba(26,122,138,0.6);/*display:none;*/
  width: 100%;height:40vh;;
}
.banner-text h2 {
  font-size: 2em;margin-top:0px;
}
  .banner-text  .lead-1 {
  font-size: 1.5rem;
}
.banner-text .lead-2 {
  display:none;
}

}

/* ============== Banner Bilder ============ */

@media (width<=1199px) {
#mod-custom123 {
  height:700px;background-attachment: scroll;
}
#mod-custom128 {
  height:700px;background-attachment: scroll;
}
#mod-custom129 {
  height:700px;background-attachment: scroll;
}
  
  }
@media (width<=991px) {
#mod-custom123 {
  height:600px;background-attachment: scroll;
}
#mod-custom128 {
  height:600px;background-attachment: scroll;
}
#mod-custom129 {
  height:600px;background-attachment: scroll;
}
  
  }
/*=============== Spalten ================== */

.spalte-1-3 {
  width:100%; display:block; float:left;
}
.spalte-halb-links {
  width:49%; margin:0px 20px 40px 0px;float:left;padding:0px 0px 0px 20px;
}
.spalte-halb-rechts {
  width:49%; float:left;margin:0px 20px 40px 0px;
}
.spalte-halb-links-artikel {
  width:48%; margin:0px 0px;float:left;padding:0px 0px;border:1px solid #eeeeee;font-size:0.8em;
}
.spalte-halb-rechts-artikel {
  width:48%; float:left;margin:0px 0px;border:1px solid #eeeeee;font-size:0.8em;
}
.spalte-halb-links-banner {
  width:47.5%; margin-right:4%;margin-left:0px;float:left;padding: 0px 20px;float:left;
}
.spalte-halb-rechts-banner {
  width:47.5%; float:left;margin: 0px 0px;
}
.spalte-halb-links-code {
  width:49%; margin-right:2%;float:left;
}
.spalte-versetzt-startseite {
  width:100%;float:left;text-align:left!important;
  margin: 0px 0px; padding:50px 0px 20px 26%;
  background-image: url(https://mischel.de/cms/images/brunner/backgrounds/code-kl-600.png);background-repeat: no-repeat;background-position: 10% -22px;
}
.spalte-versetzt-startseite-2 {
  width:100%;float:left;text-align:left!important;
  margin: 0px 0px; padding:50px 10px 20px 26%;
  background-image: url(https://mischel.de/cms/images/brunner/backgrounds/code-kl-600.png);background-repeat: no-repeat;background-position: 70% -22px;
}
.spalte-halb-links-button {
  width: 48%; text-align:center;color:rgba(33,33,33,1);
}
/*.spalte-halb-links-button img {
  width: 50%;justify-content: center;align-items: center;
  aspect-ratio: 1 / 1;
  clip-path: xywh(0 5px 100% 95% round 15% 0);
}*/
.spalte-halb-links-button img {
  width: 45%;justify-content: center;align-items: center;
  aspect-ratio: 1 / 1;
  border-radius:50%;
  border: 15px solid rgba(26,122,138,0.4);
}
.spalte-halb-rechts-button {
  width: 48%; text-align:center;color:rgba(33,33,33,1);
}
/*.spalte-halb-rechts-button img {
  width: 50%;justify-content: center;align-items: center;
  aspect-ratio: 1 / 1;
  clip-path: xywh(0 5px 100% 95% round 15% 0);
}*/
.spalte-halb-rechts-button img {
  width: 45%;justify-content: center;align-items: center;
  aspect-ratio: 1 / 1;
  border-radius:50%;
  border: 15px solid rgba(26,122,138,0.4);
}
.text-max-400 {
  max-width:1200px;height:400px;float:left;display:block;
}
.text-max-600 {
  max-width:1200px;height:600px;float:left;display:block;
}
.text-max-700 {
  max-width:1200px;height:700px;float:left;display:block;
}

@media (width<=991px) {
  .spalte-halb-links-button img {
  width: 70%;
}
 .spalte-halb-rechts-button img {
  width: 70%;
}
  .spalte-halb-links {
  width:100%; margin:0px 0px;float:left;padding:0px 20px;
}
  .spalte-halb-rechts {
  width:100%; float:left; margin: 0px 0px;padding:0px 20px;
}
    .spalte-halb-links-banner {
  width:100%; margin:0px 0px;float:left;padding:0px 20px;
}
.spalte-halb-links-code {
  display:none;visibility:hidden;
}
  .spalte-halb-rechts-banner {
  width:100%; float:left;margin: 0px 0px;padding:0px 20px;
}
  .spalte-versetzt-startseite {
    padding:0px 20px 0px 20px; margin:-30px 0px;background-position: 10% 0px;
}
.spalte-versetzt-startseite-2 {
  padding:20px 20px 20px 5%;background-position: right top;display:block!important;
} 
.text-max-400 {
  height:auto;
}
  .text-max-700 {
  height:auto;
}
}
@media (width<=768px) {
  .spalte-halb-links-button img {
  width: 90%;
}
 .spalte-halb-rechts-button img {
  width: 90%;
}
  }
/* ===================== Bilder ================== */

.rollover-hotline:link{
    content: url('images/brunner/icons/hotline-link.png');
}
.rollover-hotline:hover {
    content: url('images/brunner/icons/hotline-hover.png');
}
.rollover-mail:hover {
    content: url('images/brunner/icons/mail-hover.png');
}