@charset "UTF-8";
/* CSS Document */


@font-face{
        font-family:"Brandon Text W04 Bold";
        src:url("Fonts/5579077/f848b914-2b7b-4acb-a189-b885caa1cc97.woff2") format("woff2"),url("Fonts/5579077/0895ba78-c176-4dd6-a11d-032bae92eec4.woff") format("woff");
    }
    @font-face{
        font-family:"Brandon Text W04 Regular";
        src:url("Fonts/5580080/3c8b1b1e-132d-4f74-9273-e6ffd128d410.woff2") format("woff2"),url("Fonts/5580080/c9c5c482-d935-43c3-9a84-98306f7bad95.woff") format("woff");
    }



body {border-top: solid black 8px; border-bottom: solid black 8px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh}
.logo {width: 180px; height: 34px; position: absolute; top: 0; right: 50%; margin-right: -90px}

.diashow {width: 100%; height: 100vh; display: flex; }
.mySlides {width: 100%; height: 100%; object-fit: cover; object-position: bottom}

.navi {position: absolute; right: 0; top: 20vh; z-index: 20}
.navi ul {text-align: right}
.navi ul li {list-style: none; margin-bottom: 2px; line-height:28px}
.navi ul li a {font-family: "Brandon Text W04 BOld", Helvetica, Helvetica, Arial, Sans-serif; font-size: 1.5rem; text-decoration: none; background-color: black; color: white; text-transform: uppercase; padding: 3px 12px 4px 7px; line-height: 1; letter-spacing: 0.2rem; font-weight: normal; }
.navi ul li a:hover {color: var(--accent-color); padding-right: 20px ; transition: padding 0.2s;}

.zurueck {position: inherit; margin-top: 10vh}

.infobox {width: 174px; height: auto; position: absolute; bottom: 10vh; right: 50%; margin-right: -120px; border: 3px solid white; color: white; padding: 20px 30px; text-decoration: none; background-color: rgba(0,0,0,0.1) }
.infobox p {margin-bottom: 0; letter-spacing: 0.05rem}
.infobox h3 {margin-bottom: 1rem; letter-spacing: .2rem;}

.infobox:hover{ animation: pulse 1s infinite;
	animation-timing-function: ease-in; color: white} 

@keyframes pulse {
  0% {  }
	50% { padding: 30px 40px; margin-right: -130px; margin-bottom: -10px}
  100% {  }
  }
.start-box {position: relative; width: 80%;  background-color: var(--background-color-softer); padding: 10%}
.start-box h1 {padding-right: 1.5%; }
.banner {background-color: var(--text-color-richer); display: inline-block; color: white ; padding-left: 55px; margin-left: -55px; padding-right: 10px}

@media (min-width: 600px) {
	.start-box h1 {padding-right: 1.5%; }
	.logo {width: 240px; height: 46px;  margin-right: -120px}
	.navi {top: 67px}
	.navi {position: fixed;}
	.infobox {top: 20vh; bottom: inherit; }

@keyframes pulse {
  0% {  }
	50% { padding: 30px 40px; margin-right: -130px; margin-top: -10px}
  100% {  }
  }
	
.start-box {position: absolute; bottom: -8px; width: 80%; right: 0; padding: 4% 4% 4% 50px}
}

@media (min-width: 1000px) {
	.start-box {width: 70%;padding: 1.5% 0% 1% 50px }
	.start-box h1 {width: 740px; padding: 0}
}

.die_halle {width: 100%; background-color: var(--background-color-softer); }



@media (min-width: 1000px) {
	.eighty {padding-left: 16%; padding-right: 16%}
.fifty {padding-left: 30%; padding-right: 30%}
.thirty {padding-left: 40%; padding-right: 40%}
	
}
.icon {width: 91px; height: 50px; margin-left: calc(50% - 60px); margin-top: 10%}
.galerie {grid-gap: 3rem; gap: 3rem; }
.galerie div {}
.galerie img {width: 100%; height: 100%; object-fit: cover; display: block}

@media (min-width: 750px) and (max-width: 999px) {
.galerie div:nth-child(1){grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3 }
}

@media (min-width: 1000px) {
	.galerie div:nth-child(1){grid-column-start:1; grid-column-end:2; grid-row-start:1; grid-row-end:3 }
.galerie div:nth-child(5){grid-column-start:3; grid-column-end:4; grid-row-start:2; grid-row-end:4 }
	
}

.wir_werker {width: 100%; display: grid; grid-template-columns: 1fr; background-color: var(--background-color-softer);}
.wir_werker .grid-container {grid-column-start: 1; grid-column-end: 2; margin-bottom: 15vh}
.team-m {cursor: pointer}
.team-m:hover a.teambutton {display: flex}
.wir_werker div.team-m {position: relative}
.wir_werker img {width: 100%; height: 100%; object-fit: cover; display: block}
.teambutton div {margin-bottom: 20px}
.wir_werker a.teambutton {position: absolute; width: 90%; height:90%; background-color: rgba(0, 0, 0, 0.3); display: none; padding: 5%; text-align: center; color: white; flex-direction: column ; align-items: center; justify-content: flex-end }
.wir_werker a span {font-family: "Brandon Text W04 Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; padding: 10px 20px; border: 1px solid white; text-transform: uppercase; text-decoration: none; letter-spacing: 0.1rem; margin-bottom: 20px}
.teaminfo {background-color: #fff; position: absolute; width: 80%; height: auto; top: 100%; justify-content: center; flex-direction: column; padding: 20% 10%; z-index: 100; display: none}
.teaminfo::before {content:""; width: 0;height: 0; border-left: 30px solid transparent; border-right: 30px solid transparent; border-bottom: 30px solid #fff; position: absolute; top: -30px; left: calc(50% - 30px)}
.teaminfo h2 {margin-bottom: 0rem}
.teaminfo p {margin-bottom: 0.5rem}



.team-extra {grid-column-start: 1; grid-column-end: 2; padding: 10% 20px ; background-color: var(--background-color-softer); display: flex; justify-content: center; flex-direction: column; height: auto }
.open {display: flex;}
a.close {position: absolute; width: 30px; height: 30px; top: 20px; right: 20px}
a.close span {border: none; padding: 0}
.close span::before, .close span::after {content: ""; height: 1px; width: 30px; position: absolute; background-color: black; margin-top: 15px; transition: transform 0.5s;}
.close span::before {transform: rotate(45deg)}
.close span::after {transform: rotate(-45deg)}
a:hover.close span::before {transform: rotate(135deg)}
a:hover.close span::after {transform: rotate(45deg)}

@media (min-width: 750px) and (max-width: 999px) {
	.wir_werker .grid-container {grid-column-start: 1; grid-column-end: 3; margin-bottom: 15vh}
	.wir_werker {grid-template-columns: repeat(2, 1fr)}
	.team-extra {grid-column-start: 1; grid-column-end: 3; }
		.team-m:nth-child(2n+0) .teaminfo {left: -100%}
.team-m:nth-child(2n+0) .teaminfo::before {left: calc(75% - 30px)}

}
@media (min-width: 750px){
.teaminfo {width: 180%; height: 100%; padding: 0 10%}
.teaminfo::before {left: calc(25% - 30px)}
.team-extra { padding: 5%; }

}

@media (min-width: 1000px) and (max-width: 1249px) {
	.wir_werker {grid-template-columns: repeat(3, 1fr)}
	.wir_werker .grid-container {grid-column-start: 1; grid-column-end: 4; margin-bottom: 15vh}
	.team-extra {grid-column-start: 2; grid-column-end: 4;   }
	
	.team-m:nth-child(3n+0) .teaminfo {left: -100%}
.team-m:nth-child(3n+0) .teaminfo::before {left: calc(75% - 30px)}

.team-m:nth-child(n+10) .teaminfo {top: -100%}
.team-m:nth-child(n+10) .teaminfo::before {border-bottom: 30px solid transparent; border-top: 30px solid #fff; top: 100%; }

}

@media (min-width: 1250px) {
	.wir_werker {grid-template-columns: repeat(4, 1fr)}
	.wir_werker .grid-container {grid-column-start: 3; grid-column-end: 5; margin-bottom: 15vh}

	.team-extra {grid-column-start: 2; grid-column-end: 4;  }
	
	.team-m:nth-child(4n+0) .teaminfo {left: -100%}
.team-m:nth-child(4n+0) .teaminfo::before {left: calc(75% - 30px)}

.team-m:nth-child(n+9) .teaminfo {top: -100%}
.team-m:nth-child(n+9) .teaminfo::before {border-bottom: 30px solid transparent; border-top: 30px solid #fff; top: 100%; }

}

.preis-work {width: 100px; height: auto; position: absolute; padding: 90px 0 0 5%; z-index: 2}

@media (min-width: 850px) {
	.preis-work {width: 200px; padding: 20px 0 0 10%; }

}
.euer_event {background-color: var(--background-color-softer)}
.banner-kultur {display: flex; justify-content: flex-start; height: 75vh; width: 100%; }
.banner-kultur img {object-fit: cover; width: 100%; height: 100%; object-position: center}
.kultur-box {width: auto; margin-top: 0; padding:  10% 20px; background-color: var(--background-color-softer); display: block; z-index: 2;}
.euer_event .thirds div:first-child {grid-column-start:1; grid-column-end:3}
.euer_event .thirds div:last-child {grid-column-start:1; grid-column-end:4}

.euer_event .thirds div:first-child {grid-column-start:1; grid-column-end:3}
.euer_event .thirds div:last-child {grid-column-start:1; grid-column-end:4}

.datum {background-color: var(--text-color-richer); display: inline-block; color: white ; padding: 2px 10px 2px 15px ; margin-left: -15px; font-family: "Brandon Text W04 Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 1.5rem;}

@media (min-width: 850px) {
.banner-kultur { margin-bottom: 15vh ; height: 80vh;}
.kultur-box {width: 50%; margin-top: -25vh; padding:  5% 5% 5% 10%;  position: absolute}
}

@media (min-width: 1000px) {
	.kultur-box {width: 42%; margin-top: -45vh; padding:  5% 5% 5% 16%;}
.euer_event .thirds div:first-child {grid-column-start:2; grid-column-end:3}
.euer_event .thirds div:last-child {grid-column-start:2; grid-column-end:4}
}

.status {position: absolute; padding: 5px; display: inline-block; color: #fff; text-transform: uppercase; background-color: #000; font-family: "Brandon Text W04 Bold", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; letter-spacing: 0.2rem; left: -40px; transform: rotate(-30deg)}
.status p {margin-bottom: 0}



.bildgalerie {grid-gap: 1rem; gap: 1rem; grid-template-columns: 1fr 1fr; padding-bottom: 3rem; display: grid; margin: 0 auto;}


.bildgalerie img {width: 100%; height: 100%; object-fit: cover; display: block}
.bildgalerie p {grid-column: 1 / 3}

@media (min-width: 750px) and (max-width: 999px) {
.bildgalerie {grid-gap: 2rem; gap: 2rem; grid-template-columns: repeat(3, 1fr)}
.bildgalerie div:nth-child(1){grid-column-start:initial; grid-column-end:initial; grid-row-start:initial; grid-row-end:initial }
}

@media (min-width: 1000px) {
.bildgalerie {grid-gap: 3rem; gap: 3rem; grid-template-columns: repeat(4, 1fr)}
.bildgalerie div:nth-child(1){grid-column-start:initial; grid-column-end:initial; grid-row-start:1; grid-row-end:initial }
.bildgalerie div:nth-child(5){grid-column-start:initial; grid-column-end:initial; grid-row-start:2; grid-row-end:initial }
	
}


.klein {font-size: 1.5rem;	}
.unser_kontakt .grid-container.twofour {grid-template-columns: 1fr;}

@media (min-width: 1250px) {
.unser_kontakt .grid-container.twofour {grid-template-columns: 2fr 4fr;}
}
.zentriert {text-align: center}
.logo-footer {width: 178px; height: 90px; align-itself: center; margin-top: 15vh; margin-bottom: 15vh}

@media (min-width: 750px) {
.formular {display: grid; grid-template-columns: 1fr 4fr }

}

/* Brevo Formular */

#sib-container input:-ms-input-placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container input::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container textarea::placeholder {
    text-align: left;
    font-family: Helvetica, sans-serif;
    color: #c0ccda;
  }

  #sib-container a {
    text-decoration: underline;
    color: #2BB2FC;
  }

.sib-form-message-panel {
    margin: 0 0 1.25rem 0;
    width: 100%;
    padding: .4375rem;
    border: 1px solid;
    display: none
}

.sib-form-message-panel--active {
    display:inline-block
}
.sib-panel__text {
    margin: 0;
    font-weight: 600;
    text-align:left
}

.sib-panel__link {
    padding: 0 5px;
    color: #3c4858;
    text-decoration: underline;
    cursor:pointer
}

.sib-panel__close-icon {
    position: absolute;
    top: 12px;
    right: 25px;
    cursor:pointer
}

.sib-form-message-panel {
    margin: 0 0 1.25rem 0;
    width: 100%;
    padding: .4375rem;
    border: 1px solid;
    /* display:none */
}

.sib-form-message-panel--active {
    display:inline-block
}

.sib-form-message-panel__text {
    display: flex;
    align-items: center;
    margin: 0;
    padding:.5rem
}

.sib-form-message-panel__text .sib-icon {
    contain: strict;
    display: inline-block;
    fill:currentColor
}

.sib-form-message-panel__text .sib-notification__icon {
    height: 1.5em;
    width: 1.5em;
    flex-shrink: 0;
    margin-right:calc(1rem - 1px)
}
.form__label-row {display: grid; grid-template-columns: 1fr 4fr}
.checkbox {font-size: 1.5rem; display: inline}

.input--hidden {
    display:none !important
}
.entry__error {background-color: rgb(255, 237, 237); padding: 5px; display: none}
.sib-hide-loader-icon {
    display: none
}
.sib-form .clickable__icon {
    height: 1.5rem;
    vertical-align: bottom;
    width:1.5rem;
		display: none
}
#unsere_news {background-color: #f0f0f0}
#unsere_news .grid-container.thirds {padding-top: 2rem; }
#neues .grid-container.thirds {padding: 0rem}
#neues .grid-container.halves {grid-template-columns: 1fr; grid-gap: 0; padding-top: 15vh }
.navi-news ul {margin-bottom: 2rem; margin-left: -10px}
.navi-news ul li {text-decoration: none; padding: 0; display: block; margin-bottom: 1rem}
.navi-news ul li a {text-decoration: none; padding: 5px 10px 4px 10px; }
.navi-news ul li a:hover, .navi-news ul li a.active {font-family: "Brandon Text W04 BOld", Helvetica, Helvetica, Arial, Sans-serif; background-color: black; color: white;}
.news {margin-bottom: 2rem; display: none}
.show {display: block}
.news div {position: relative; margin-bottom: 2rem}
.news img {vertical-align: bottom; }

p.date {font-family: "Brandon Text W04 BOld", Helvetica, Helvetica, Arial, Sans-serif; font-size: 1.5rem; text-decoration: none; background-color: black; color: white; text-transform: uppercase; padding: 8px 10px 9px 10px; line-height: 1; font-weight: normal; display: inline-block; margin: -20px -10px 0 0; z-index: 2; position: absolute; bottom: 0px; left: -10px}

.nogap {padding-top: 0}

.fullwidth {max-width: 100%; padding: 0}

.gallery {display: grid; grid-gap: 30px; grid-template-columns: 1fr; padding-top: 30px}
.gallery.halves {grid-template-columns: 1fr 1fr}
.gallery img {width: 100%; heigth: auto}
.news-text {padding-top: 3rem}

@media (min-width: 600px) {
	.navi-news ul li {display: inline-block; margin-bottom: 0rem}
	.navi-news ul {margin-bottom: 5rem}
}
@media (min-width: 1000px) {
	#neues .grid-container.halves {grid-template-columns: 1fr 1fr; grid-gap: 30px}
	.navi-news ul {text-align: right;}
}
@media (min-width: 1250px) {}