/*

	ergotherapie 2020
	
	break points: 700 1024
	dark grey font: #332F2A
	linien menu, header: #b1b1b7
	orange: #e94e1b
	gruen:  #9ac328
	blau:   #30b6c6   (tuerkis)
 
*/

body , html {
	min-height:100%;
	height:100%;
	width: 100%;
	margin:0px;
	padding:0px;
	background-color: #bfbfbf;
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-weight: 300;
	line-height: 1.4;
	color: #332F2A;
	/*
	-webkit-text-size-adjust: 100%;
	*/
	-webkit-text-size-adjust: none;
	-ms-text-size-adjust: none;
	 text-size-adjust: none;
}

html {
	/*
	font-size:112%; 
	*/                                /* Schriftgröße Fontsize */
}

.preloads {
  position:absolute;
  top:-1px;
  left:0px;
  width:1px;
  height:1px;
  overflow:hidden;
}

#console , #console2 {
  position:fixed;
  left:80px;
  top:120px;
  color:red;
  z-index: 2040;
  font-size:0.86rem;
  background-color:#FFFFFF;
}
#console2 {
  color: white;
  padding:0.6rem;
  background-color:black;
  left:280px;
  display:none;
}
#console2:after {
    content:'desktop';
}
.debug #console2 {
  display:block;
}

#page { 
    position: relative;
    width: 100%;
    max-width:1024px;                            /* MAX WIDTH */
    margin: 0px;
    margin: 0 auto;
    overflow:hidden;
    background-color:#FFFFFF;
    min-height:100%;
}

/* top area permanent */

#top_area {
	display:block;
	position:absolute;
	top:-1px;
	left:0px;
	z-index:888;
	width: 100% !important;
	width: 100%;
  background-color:#FFFFFF;
}

#topnavi_area {
	position:relative;
	display:flex;
	align-items:center;
  justify-content:space-between;
	width: calc(100% - 84px);
	margin: 0px 42px 0px 42px; 
  height:98px;
	padding: 0px;
	background-color:#FFFFFF;
}

.top-spacer-menu {
  width:100%;
  height:98px;
}

#topnavi {                                    /* L */
  display:block;
}

.topnavi .nav {
  list-style: none;
  margin:0px;
  padding:0px;
  float:left;
  display:flex;
}

.topnavi .nav a {
  margin-left:42px;
  text-decoration:none;
  font-weight:500;
  white-space: nowrap;
  color:#2d2e35;
}
.topnavi .nav a:hover, 
.topnavi .nav a.nav-selected:hover {
  color:#71737b;
}

.topnavi .nav a.nav-selected {
  color:#9ac328;
}

.header-img-desktop {
  background-size: cover;
  background-position: top center;
  padding-top:34%;
}
.header-img-mobile {
  background-size: cover;
  background-position: top center;
  padding-top:147%;
}

.wrapper-starttext-area > div {
  text-align:center;
  width:68%;
  margin-left:16%;
  background-color: rgba(255,25,45,0);
}

.wrapper-bottom-block {
	position:relative;
	display:flex;
	align-items:center;
  justify-content:space-between;
	width: calc(100% - 84px);
	margin: 0px 0px 0px 42px;
  background-color: rgba(255,25,45,0);
}

.wrapper-footer-area {
  min-height:240px;
  background-color: #393a40;
  /*
  background-image: url(../images/img-c5/hilfe-footer-d.jpg);
  background-image: url(../images/img-c5/hilfe-footer-m.jpg);
  */
  
  background-size: cover;
  background-position: center 0px;
  border-top:1px solid transparent;
}

.wrapper-footer-navi {
  min-height:40px;
  background-color: #535359;
}
.footer-navi {
	position:relative;
	display:flex;
	align-items:center;
  justify-content:flex-start;
	width: calc(100% - 84px);
	margin: 0px 0px 0px 42px;
	min-height:40px;
  background-color: rgba(255,25,45,0);
}
.footer-navi .nav {
  list-style: none;
  margin:0px;
  padding:0px;
  float:left;
  display:flex;
}
.footer-navi .nav a {
  text-decoration:none;
  font-weight:400;
  white-space: nowrap;
  color:#FFFFFF;
}
.footer-navi .nav a::after {
  content:' | ';
  padding-left:1.1rem;
  padding-right:1.1rem;
}
.footer-navi .nav li:last-child a::after {
  content:'';
  padding-left:0px;
  padding-right:0px;
}
.footer-navi .nav a:hover, 
.footer-navi .nav a.nav-selected {
  color:#FFFFFF;
}

#logo_top {
  display:block;
  width:208px;
  height:73px;
  margin-top:0px;
  background-image: url(../images/logos/top-bg-white.png);
  background-size: cover; 
}

.logo-footer {
  display:block;
  width:258px;
  height:94px;
  margin-top:0px;
  background-image: url(../images/logos/top-bg-brown.png);
  background-size: cover; 
}

#outer_navitoggle {                          /* hamburger menü --- x */
  display:none;
}

#top_navi_mobile {
	display:none;
	position:relative;
	border-top:2px solid transparent;
}

.btn-to-top {
  position:absolute;
  bottom:20px;
  right: 20px;
  display:block;
  width:34px;
  height:34px;
  background-image: url(../images/button-up.jpg);
  background-size: cover;
}

.wrapper-termin {
  background-color:#9ac328;
  min-height:181px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.wrapper-termin > span {
  background-color: rgba(129,68,45,0);
  line-height:1.16;
  font-weight: 400;
  text-align:center;
  margin-left: 18px;
  margin-right:18px;
}
.wrapper-termin > span a {
  display:block;
  color:#FFFFFF;
  margin-top:0.8rem;
  font-weight: 500;
}




.wrapper-triptychon-startpage, 
.wrapper-triptychon-cpage {
  display:flex;
  width:calc(100% - 20px);
  margin-left:10px;
  margin-bottom:44px;
}
.wrapper-triptychon-startpage > .block, 
.wrapper-triptychon-cpage > .block {
  display:block;
  float:left;
  width:calc(33.33% - 10px);
  border-left:10px solid #FFFFFF;
  border-right:10px solid #FFFFFF;
  min-height:60px;
  
}
.wrapper-triptychon-startpage .block .image, 
.wrapper-triptychon-cpage .block .image, 
.image.third  {
  display:block;
  padding-top:60%;
  background-size: 100% auto;
  background-size: cover;
}
.wrapper-triptychon-startpage .block h3 {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center; 
  min-height:82px;
  margin:0px;
  color:#FFFFFF !important;
  font-weight:500;
  line-height:1.16;
}
.finger {                             /* .wrapper-triptychon-startpage .block h2 .finger  */
  position:absolute;
  width:36px !important;
  width:36px;
  height:20px;
  bottom:-18px;
  left:calc(50% - 18px);
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: top center;
}

.bg-orange.block h3 {background-color:#e94e1b;}
.bg-blue.block   h3 {background-color:#30b6c6;}
.bg-green.block  h3 {background-color:#9ac328;}

.bg-orange .finger {background-image: url(../images/finger-orange.svg);}
.bg-blue   .finger, 
.bg-blau   .finger {background-image: url(../images/finger-blau.svg);}
.bg-green  .finger,  
.bg-gruen  .finger {background-image: url(../images/finger-gruen.svg);}

.wrapper-triptychon-startpage .block a {
  display:flex;
  align-items:center;
  text-decoration:none;
  margin-top:0.6rem;
}
.wrapper-triptychon-startpage .block a::after {
  content: '»';
  font-size:120%;
}
.wrapper-triptychon-startpage .block.bg-orange a::after {
  color:#e94e1b;
}
.wrapper-triptychon-startpage .block.bg-green a::after {
  color:#9ac328;
}
.wrapper-triptychon-startpage .block.bg-blue a::after {
  color:#30b6c6;
}

.header-angebote   > div,
.color-area-with-finger > div, 
.wrapper-triptychon-cpage-text > div, 
.wrapper-cpage-text > div, 
.wrapper-textpage > div {
  background-color: rgba(129,68,45,0);
  text-align:center;
} 
.wrapper-triptychon-cpage-text h2, 
.wrapper-triptychon-cpage-text h3 {
  color: #332F2A !important;
  margin:0px;
}
.wrapper-cpage-text, 
.wrapper-textpage {
  border-bottom:1rem solid #FFFFFF;
} 
.wrapper-cpage-text h3, 
.wrapper-cpage-text h2 {
  margin-bottom:-0.2rem;
}

.img-badge-container {
  position:relative;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top:52%;
}

.badge {
  position:absolute;
}

.color-area-with-finger {
  position:relative;
}

.topnavi > a {
  display:none;
}

.mobile-break {
  display:none;
}

.accordion-item {
  border-top:1px solid #FFFFFF;
}
.accordion-item .accordion-content {
  max-height:0px;
  overflow:hidden;
}
.accordion-item.accordion-open .accordion-content {
  max-height:unset;
  overflow:hidden;
}
.accordion-item > a {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:center;
  height:56px;
  width: 100%;
  text-align:center;
  white-space: nowrap;
}
.wrapper-layout-area .accordion-item:last-child {
  border-bottom:36px solid #FFFFFF;
}
.accordion-content-inner {
  position:relative;
  display:block;
}
.accordion-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

.accordion-btn .finger {
  z-index:1;
  visibility:hidden;
}

.accordion-item.accordion-highlight .accordion-btn .finger {
  visibility:visible;
}

.accordion-text .first-p {
  margin-top:0px;
}
.accordion-text p:last-child {
  margin-bottom:0px;
}

.color-orange .accordion-item .finger {background-image: url(../images/finger-orange_light.svg);} 
.color-blau   .accordion-item .finger {background-image: url(../images/finger-blau_light.svg);} 
.color-gruen  .accordion-item .finger {background-image: url(../images/finger-gruen_light.svg);}

.accordion-text ul {
	list-style:none;
	padding-left:0px;
	margin-top:0px;
}

.accordion-text ul li {
	display:block;
	width:calc(100% - 14px);
	float:left;
}

.accordion-text ul li:before {
	content:"»";
	display:block;
	width:14px;
	float:left;
	border:1px solid #FFFFFF;
	margin-left:-1px;
	margin-top:-1px;
}

.wrapper-gallery {
  background-color: rgba(129,68,45,0);
}

.gallery-image {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  float:left;
}





.wrapper-team-item {
  background-color: rgba(22,67,45,0.7);
  border-top:1px solid #efecea;
}

.wrapper-team-item:nth-child(odd)  { background-color:#efecea; }
.wrapper-team-item:nth-child(even) { background-color:#FFFFFF; }

.wrapper-team-item .row-under { 
  background-color:#FFFFFF;
  max-height:0px;
  overflow:hidden; 
}

.row-upper .block-L {               /*   REVERSE !!!!!!! */
  position:relative;
}
.row-upper .block-R {

}
.row-under > div > div {
  background-color: rgba(82,0,145,0);
}

.team-image {
  width:100%;
  background-color: rgba(0,0,128,0.7);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  padding-top:63%;
}
.more {
  position:absolute;
  display:flex;
  align-items:center;
  text-decoration:none;
  color: #332F2A;
  left:0px;
  bottom:0px;
  height:52px;
  width:100%;
}
.more.spacer {
  position:relative;
  left:unset;
  bottom:unset;
  margin-top:12px;
  background-image: none;
}
.more .icon {
  height:52px;
  width:52px;
  margin-right:22px;
  background-size: auto 100%;
  background-repeat: no-repeat;
  background-position: left center;
  background-image: url(../images/more.svg);
}
.team-info-open .more .icon {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}
.team-info-closed .more .icon {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
}

.year-nr {
  float:left;
  width:60px;
  background-color: rgba(82,0,145,0);
}
.year-line {
  width:calc(100% - 60px);
  padding-bottom:0.8rem;
  float:left;
}

.btn-to-content {
  display:none;
}


@media screen and (min-width: 375px) and (max-width: 425px) {

   #page {
    /*
    border-left:1px solid red;
    border-right:1px solid red;
    */
   }
}
@media screen and (min-width: 426px) and (max-width: 699px) {

}


@media screen and (max-width: 699px) {

  .top-spacer-menu {
    width:100%;
    height:86px;
  }
  #top_area {
    position:fixed;
  }
  #topnavi_area {                               /* upper centered */
    position:relative;
    display:block;
    width: 100%;
    margin: 0px 0px 0px 0px; 
    height:unset;
  }
  #topnavi {                                    /* L */
    display:block;
    margin-top:0px;
    border-top: 1px solid #b1b1b7;
    overflow:hidden;
    min-height:0px;
  }
  .navigation-start {
    max-height:0px;
	}
	.navigation-open {
    max-height:600px;
    animation-duration: 1600ms;
    animation-name: openTopNavi;
	}
	.navigation-closed {
    max-height:0px;
    animation-duration: 800ms;
    animation-name: closeTopNavi;
	}
  .topnavi .nav {
    list-style: none;
    margin:0px;
    padding:0px;
    float:none;
    display:block;
    border:0px solid lime;
  }

  .topnavi .nav li {
    margin:0px;
    padding:0px;
  }

  .topnavi .nav a, 
  .topnavi > a {
    display:block;
    margin-left:0px;
    padding-left:21px;
    padding-top:0.4rem;
    padding-bottom:0.4rem;
    text-decoration:none;
    font-weight:500;
    white-space: nowrap;
    color:#2d2e35;
    border-bottom: 1px solid #b1b1b7;
  }
  .topnavi > a {
    color:#9c9c9f;
  }
  .topnavi .nav a:hover, 
  .topnavi .nav a.nav-selected, 
  .topnavi > a:hover, 
  .topnavi > a.nav-selected {
    color:#71737b;
  }
  
  .link-orange {
    color: #e94e1b !important;
    background-image: url(../images/arrow-mp-orange.svg);
    background-position: calc(100% - 15px) center;  
    background-size: auto 24px;  
    background-repeat: no-repeat;  
  }
  .link-gruen {
    color: #9ac328 !important;
    background-image: url(../images/arrow-mp-green.svg);
    background-position: calc(100% - 15px) center;  
    background-size: auto 24px;  
    background-repeat: no-repeat;
  }
  .link-blau {
    color: #30b6c6 !important;   /*   (tuerkis) */
    background-image: url(../images/arrow-mp-blue.svg);
    background-position: calc(100% - 15px) center;  
    background-size: auto 24px;  
    background-repeat: no-repeat;
  }

  #logo_top {
    display:block;
    width:191px;
    height:68px;
    margin-left:20px; 
    margin-top:9px;
    margin-bottom:9px;
    background-image: url(../images/logos/top-bg-white.png);
    background-size: cover;
  }
  
  #outer_navitoggle {                          /* hamburger menü --- x */
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:20px;
    top:0px;
    height:68px;
  }
	#btn_navitoggle {
    display:block;
    cursor:pointer;
    width: 32px;
    height:32px;
    position: relative;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
  }
  #btn_navitoggle span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #332F2A;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  #btn_navitoggle span:nth-child(1) {
    top: 5px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #btn_navitoggle span:nth-child(2) {
    top: 15px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #btn_navitoggle span:nth-child(3) {
    top: 25px;
    -webkit-transform-origin: left center;
    -moz-transform-origin: left center;
    -o-transform-origin: left center;
    transform-origin: left center;
  }

  #btn_navitoggle.open span:nth-child(1) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 4px;
    left: 5px;
  }

  #btn_navitoggle.open span:nth-child(2) {
    width: 0%;
    opacity: 0;
  }

  #btn_navitoggle.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 26px;
    left: 5px;
  }
  
  .wrapper-starttext-area > div {
    width:calc(100% - 38px);
    margin-left:19px;
  }
  
  .wrapper-triptychon-startpage, 
  .wrapper-triptychon-cpage {
    display:block;
    width:100%;
    margin-left:0px;
    margin-bottom:0px;
  }
  .wrapper-triptychon-startpage > .block, 
  .wrapper-triptychon-cpage > .block {
    float:unset;
    width:100%;
    margin-top:10px;
    border-left:0px none;
    border-right:0px none;
  }
  .wrapper-triptychon-cpage {
    margin-top:0px;
  }
  .wrapper-triptychon-cpage > .block {
    margin-top:0px;
  }
  .wrapper-triptychon-startpage .block a {
    display:none;
  }
  
  .wrapper-bottom-block {
    display:block;
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-top: 0px;
    border-bottom: 40px solid transparent;
    background-color: rgba(40,250,45,0);
  }
  
  .bottom-block {
    display:block;
    margin-top:1.0rem;
    line-height:1.26;
    background-color: rgba(129,68,45,0);
  }
  
  .logo-footer {
    position:relative;
    left:unset;
    top:unset;
    margin-top:36px;
    margin-bottom:0px;
  }

  .footer-navi {
    display:none;
  }
  
  .desktop-only {
    display:none !important;
  }
  .mobile-only {
    display:block;
  }
  .mobile-only-inline {
    display:inline;
  }
  
  .mobile-break {
    display:block;
    width:100%;
    height:1px;
    overflow:hidden;
    background-color:red;
  }
  
  .header-angebote > div, 
  .color-area-with-finger > div, 
  .wrapper-triptychon-cpage-text > div, 
  .wrapper-cpage-text > div, 
  .wrapper-textpage > div {
    width:calc(100% - 40px);
    margin-left: 20px;
  }
  .color-area-with-finger .finger {     /*  template=angebote:  .color-area-with-finger  */
    left:calc(50% - 38px);
  }
  .header-angebote img, 
  .header-angebote .img-badge-container {
    width:calc(100% + 40px);
    height:auto;
    margin-left: -20px;
    margin-bottom:12px;
  }
  .badge {
    display:none;
  }
  .header-angebote > div p:last-child {
    border-bottom:32px solid transparent;
  }
  
  .wrapper-layout-area .accordion-item:last-child {
    border-bottom:0px none;
  }
  .accordion-subline {
    width:calc(100% - 30px);
    margin-left: 15px;
    margin-top:24px;
    margin-bottom:0px;
    text-align:center;
    background-color: rgba(40,250,45,0);
  }
  .accordion-image {
    width:100%;
    margin-left:0px;
    padding-top:75%;
    float:unset;
  }
  .accordion-text {
    width:calc(100% - 40px);
    margin-left:20px;
    text-align:center;
    float:unset;
    border-bottom:32px solid transparent;
  }
  .accordion-headline {
    margin-bottom:24px; 
  }

  .accordion-text ul {
    display:inline;
  } 
  .accordion-text ul li {
    display:inline;
    text-align:center;
    width:100%;
    background-color: rgba(40,250,45,0);
  }

  .accordion-text ul li:before {
    display:none;
  }
  .wrapper-gallery {
    width: calc(100% - 40px);
    margin-left: 20px;
    margin-top:0px;
    margin-bottom:40px;
  }
  .gallery-image {
    width:100%;
    margin-top:10px;
    margin-bottom:10px;
    padding-top:61%;
  }
  .row-upper > div, 
  .row-under > div {
    display:block;
  }
  .row-upper .block-L {               /*  1tes, mobile nicht REVERSE !!!!!!! */
    width:calc(100% - 64px);
    margin-left:32px;
    margin-top:32px;
    margin-bottom:32px;
  }
  .row-upper .block-R {         /* portrait */
    width:calc(100% - 64px);
    margin-left:32px;
    margin-top:32px;
    margin-bottom:0px;
  }
  .row-under > div > div {
    width:calc(100% - 54px);    /* rechts: 10 + */
    margin-left:32px;
  }
  .block-L h3 {
    margin-top:12px;
    margin-bottom:0px;
  }
  .btn-to-content {
    z-index:4000;
    display:block;
    position:absolute;
    left:calc(50% - 26px);
    bottom:42px;
    background-image: url(../images/arrow-down.svg);
    background-size: 100% auto;
    width: 52px;
    height:52px;
  }
}








@media screen and (min-width: 700px) {
  .outer_navitoggle {
    display:none;
  }
  #top_area {
    border-bottom:1px solid #b1b1b7;
  }
  .desktop-only {
    display:block;
  }
  .mobile-only {
    display:none;
  }
  .mobile-only-inline {
    display:none;
  }
  .only-mobile-1 {
    display:none !important;
  }
  .wrapper-bottom-block {
    display:flex;
    align-items:flex-start;
    margin-top: 140px;
    border-bottom: 30px solid transparent;
  }
  .bottom-block {
    display:block;
    width:29%;
    min-width:198px;
    line-height:1.3;
    background-color: rgba(40,250,45,0);
  }
  .logo-footer {
    position:absolute;
    left:-1px;
    top:-110px;
  }
  .header-angebote > div, 
  .color-area-with-finger > div, 
  .wrapper-triptychon-cpage-text > div, 
  .wrapper-cpage-text > div, 
  .accordion-subline, 
  .wrapper-textpage > div {
    width:668px;
    margin: 0 auto;
  }
  .accordion-subline {
    text-align:center;
  }
  .header-angebote img, 
  .header-angebote .img-badge-container {
    width:100%;
    margin-bottom:12px;
  }
  .badge {
    display:flex;
    justify-content:center;
    align-items:center;
    width: 200px;
    height:200px;
    border-radius:50%;
    transform: rotate(-13deg);
  }
  .header-angebote > div p:last-child {
    border-bottom:32px solid transparent;
  }
  .wrapper-triptychon-cpage {
    margin-top:44px;
    margin-bottom:24px;
  }
  
  .accordion-subline {
    margin-top:42px;
    margin-bottom:-6px;
    background-color: rgba(40,250,45,0);
  }
  .accordion-image {
    width:calc(34.66% - 40px);
    margin-left:40px;
    margin-top:42px;
    margin-bottom:42px;
    padding-top:23%;
    float:left;
  }
  .accordion-text {
    width:calc(59.8% - 19px);
    margin-left:19px;
    margin-top:37px;
    border-bottom:42px solid transparent;
    float:left;
  }
  .row-upper > div, 
  .row-under > div {
    display:flex;
    flex-direction: row-reverse;
  }
  .row-upper .block-L {               /*   REVERSE !!!!!!! */
    width:456px;
    margin-right:20px;
    margin-top:26px;
    margin-bottom:26px;
    border-left:26px solid transparent;
  }
  .row-upper .block-R {
    width:33.1%;
    margin-right:37px;
    margin-top:26px;
    margin-bottom:26px;
  }
  .row-under > div > div {
    width:calc(33.1% + 476px);    /* 456 + 20 */
    margin-right:37px;
    border-left:26px solid transparent;
  }
  .block-L h3 {
    margin-top:12px;
    margin-bottom:0px;
  }
}


@media screen and (min-width: 700px) and (max-width: 1023px) {
  #topnavi_area {
    width: calc(100% - 4vw);
    margin-left: 2vw;
  }
  .wrapper-bottom-block, 
  .footer-navi {
    width: calc(100% - 4vw);
    margin-left: 2vw;
  }
  .topnavi .nav a {
    margin-left:calc(2vw);
  }
  #logo_top {

  }
  .btn-to-top {
    right: 2vw;
  }
  .wrapper-starttext-area > div {
    width:82%;
    margin-left:9%;
  }
  .badge {
    bottom:-5%;
    left:-8%;
  }
  .wrapper-gallery {
    width:calc(100% - 20px);
    margin-left:10px;
    margin-top:0px;
    margin-bottom:40px;
  }
  .gallery-image {
    width:calc(50% - 20px);
    margin:10px;
    padding-top:29.3%;
  }
}

@media screen and (min-width: 700px) and (max-width: 790px) {
  .badge {
    bottom:-4%;
    left:-4%;
  }
}

@media screen and (min-width: 1024px) {
  #topnavi_area {

  }
  #logo_top {

  }
  .badge {
    bottom:-5%;
    left:-8%;
  }
  .wrapper-gallery {
    width:calc(100% - 20px);
    margin-left:10px;
    margin-top:0px;
    margin-bottom:40px;
  }
  .gallery-image {
    width:calc(33.3% - 20px);
    margin:10px;
    padding-top:19.2%;
  }
}












/* //////////////////////// AUSRICHTUNG, SPACER, CLEAR //////////////////////////////////////////////// */
.clear {
  clear:both;
}
.spacer-v-1, 
.spacer-v-1_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.0rem;
}
.spacer-v-1_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:1.5rem;
}
.spacer-v-2_0 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.0rem;
}
.spacer-v-2_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:2.5rem;
}
.spacer-v-0_5 {
  width:100%;
  clear:both;
  font-size:1px;
  color:transparent;
  height:0.48rem;
}
.centered {
  margin: 0 auto;
}

.hidden, 
.invisible {
  display:none !important;
  display:none;
}

.ictn {
  display:none !important;
  display:none;
}

/* ///////////////// FONTS ///////////////////////////////////  */


/*

orange-light= #fc6c3c
gruen-light = #a7d627
blau-light  = #34c5d6

*/


.color-       .bg-maincolor { background-color: #9ac328;  }
.color-blau   .bg-maincolor { background-color: #30b6c6;  }
.color-gruen  .bg-maincolor { background-color: #9ac328;  }
.color-orange .bg-maincolor { background-color: #e94e1b;  }

.color-       .font-maincolor, 
.color-       .font-maincolor a { color: #9ac328 !important;}
.color-blau   .font-maincolor, 
.color-blau   .font-maincolor a { color: #30b6c6 !important;}
.color-gruen  .font-maincolor, 
.color-gruen  .font-maincolor a { color: #9ac328 !important;}
.color-orange .font-maincolor, 
.color-orange .font-maincolor a { color: #e94e1b !important;}


.color- h1, 
.color- h2, 
.color- h3, 
.color- h4   { color: #9ac328 !important;}

.color-blau h1, 
.color-blau h2, 
.color-blau h3, 
.color-blau h4 { color: #30b6c6 !important;}

.color-gruen h1, 
.color-gruen h2, 
.color-gruen h3, 
.color-gruen h4 { color: #9ac328 !important;}

.color-orange h1, 
.color-orange h2, 
.color-orange h3,
.color-orange h4 { color: #e94e1b !important;}

/* Accordions */
.color-orange .accordion-item .accordion-btn { background-color: #e94e1b; }
.color-blau   .accordion-item .accordion-btn { background-color: #30b6c6; }
.color-gruen  .accordion-item .accordion-btn { background-color: #9ac328; }

/* Accordions : ACTIVE  */
.color-orange .accordion-item.accordion-highlight .accordion-btn { background-color: #fc6c3c; }
.color-blau   .accordion-item.accordion-highlight .accordion-btn { background-color: #34c5d6; }
.color-gruen  .accordion-item.accordion-highlight .accordion-btn { background-color: #a7d627; }

.color-orange .accordion-text ul > li:before { color: #fc6c3c; }
.color-blau   .accordion-text ul > li:before { color: #34c5d6; }
.color-gruen  .accordion-text ul > li:before { color: #a7d627; }

.font-white, 
.font-white a {
  color:#FFFFFF;
}

.color-area-with-finger h1, 
.color-area-with-finger h2, 
.color-area-with-finger h3 {
  color:#FFFFFF !important;
}

.font-normal-color {
  color: #332F2A;
}

.border-normal-color {
  border-color: #332F2A;
}

h1 {
  font-weight:500;
}

h2 {
  font-weight:500;
}

h3, .like-h3 {
  font-weight:500;
}

h4, .like-h4 {
  font-weight:500;
}

.weight-400 {
  font-weight:400;
}
.weight-500 {
  font-weight:500;
}

.noline {
  text-decoration:none !important;
}


@keyframes openTopNavi {
  0% {
      max-height:0px;
  }
  100% {
      max-height:1000px;
  }
}
@keyframes closeTopNavi {
  0% {
      max-height:1000px;
  }
  100% {
      max-height:0px;
  }
}

/* ///////////////////////////////////////////// C O O K I E accept //////// */
#coockie_notice {
  position:fixed;
  bottom:0px;
  left:0px;
  width:100%;
  z-index:901;
  display:none;
}
.wrapper-coockie-notice {
  position: relative;
  width: 100%;
  max-width:1024px;                            /* MAX WIDTH */
  margin: 0 auto;
}

.wrapper-cookie-text {
  width:calc(100% - 328px);
  margin:1.1rem 0px 1.3rem 24px;
}

.wrapper-cookie-button {
  width:280px;
  display:flex;
  justify-content:flex-end;
  margin:1.3rem 24px 1.3rem 0px;
}

.cookie-button {
  width:200px;
  padding:0.2rem 0.4rem 0.2rem 0.6rem;
  min-height:42px;
  line-height:1.0;
  border-width:2px;
  font-weight:400;
  font-size:0.9rem;
  letter-spacing:0.03rem;
}

.icon_checkmark {
  display:inline-block;
  line-height:1.0;
  height:1.34rem;
  width:2.1rem; 
  margin-bottom:-0.32rem;
  background-image: url(../images/checkmark.svg);
  background-size: auto 60%; 
  background-position: right 50%; 
  background-repeat: no-repeat;
}

#cookie_links a {
  text-transform:uppercase;
  text-decoration:none;
}

.__button {                             /* cookie notice only */
  display:flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -webkit-appearance: none;
  -webkit-focus-ring-color: none;
  outline:none;
	outline-style:none;
	box-shadow:none;
  width:14.0rem;
  min-height:58px;
  line-height:1.0;
  border-width:1px;
  border-style:solid;
  text-align:center;
  text-decoration:none;
  font-weight:400;
}
.__button * {
  margin-top:-0.17rem !important;
  margin-top:-0.17rem;
}

@media screen and (max-width: 699px) {  
  .wrapper-cookie-text {
    width:calc(100% - 40px);
    margin:0px 0px 0px 20px;
    padding:1.3rem 0px 1.3rem 0px;
  }
  .wrapper-cookie-button {
    display:block;
    margin:0px 0px 0px 20px;
    padding:0px !important;
  }
  .cookie-button {
    margin:0px !important;
    padding:0px !important;
  }
}
/* ///////////////////////////////////////////// C O O K I E accept --- END //////// */

/* ///////////////////////////////////////////// C O M P O S E R //////////////////////////////////////////// */

.selectize-control {
  margin-bottom: 2.0rem !important;
  margin-bottom: 2.0rem;
}