@charset "UTF-8";
/* CSS Document */
@import 'fonts.css';

/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { border:0; font-size:100%; margin:0; padding:0; }
a { outline:none; }
table { border-collapse:collapse; border-spacing:0; }
fieldset,img { border:0; }
del,ins { text-decoration:none; }
caption,th { text-align:left; }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; }
q:before,q:after { content:''; }
abbr,acronym { border:0; font-variant:normal; }
sup,sub { vertical-align:baseline; }
legend { color:#000; }
input,button,textarea,select,optgroup,option { font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit; }
input,button,textarea,select { font-size:100%; }

/* Clearfix */
.clearfix:before, .clearfix:after {content: " "; display: table;}
.clearfix:after {clear: both;}

*, *:before, *:after {padding: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}
figure, figure:before, figure:after {padding: 0; margin: 0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box;}

html {-webkit-text-size-adjust: 100%;
--black: rgba(0,0,0,1);
--white: rgba(255,255,255,1);
--grey: rgba(121,121,121,1);
--grey-l: rgba(217,218,218,1);
--orange: rgba(227,75,32,1);

--normal: 300;
--bold: 400;
}

@media (prefers-contrast: more) {
  html{
    --grey: rgba(61,61,61,1);
    --orange: rgba(197,45,12,1);
    --normal: 400;
    --bold: 700;
  }
}


body {margin:0; padding:0; background: url(../images/layout/background02.jpg) center center repeat-y; background-size: 100% auto; font-size: 1em; font-family: 'Foro W03', Courier, monospace; line-height: 1.375; color: var(--grey); font-weight: 300; font-weight: var(--normal);}

body.fixed {height: 100%; overflow: hidden;}

/***************************** FORMAT *****************************/

h1, h2, .h1 {font-size: 1.625em; text-transform: uppercase; color: var(--orange);}
h3, h4, h2.small {font-size: 1.125em;}
h5 {font-size: 1.25em; color: var(--orange);}
h3.small {font-size: 1em;}
.entry h2.small {text-transform: none;}
h3, h4, h5, h6 {color: var(--black);}
h1, h2, h3, h4, h5, h6 {text-wrap: balance;}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {color: inherit; border: 0 !important;}
h1, h2, h3, h4, h5, h6, .h1 {font-weight: 400; line-height: 1.25;}
@media (prefers-contrast: more) {
h2.small, h3, h4, h5, h6 {font-weight: var(--bold);}
}

p + h1, p + h2, ul + h1, ul + h2, ol + h1, ol + h2 {margin-top: 1.5em;}

p + h3, p + h4, p + h5, p + h6,
ul + h3, ul + h4, ul + h5, ul + h6,
ol + h3, ol + h4, ol + h5, ol + h6,
p + p, ul + p, ol + p, ul + ol, ol + ul {margin-top: 1em;}

h1 + p, h2 + p, h1 + ul, h2 + ul, h1 + ol, h2 + ol,
.h1 + p, .h1 + ul, .h1 + ol, * + .margin {margin-top: 0.75em;}

h3 + p, h4 + p, h5 + p,
h3 + ul, h4 + ul, h5 + ul,
h3 + ol, h4 + ol, h5 + ol,
p + ul, p + ol, ul + ul,
h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {margin-top: 0.5em;}

h6 + p, h6 + ul, h6 + ol, h3.small + p, h3.small + ul, h3.small + ol {margin-top: 0.25em;}

.news-head {margin-bottom: 0.5em;}

p, label, .text ul, .text ol {font-size: 0.875em;}
.no-marg {margin-bottom: 0;}
* + .no-marg {margin-top: 0;}
* + .extra-marg {margin-top: 2em;}
* + .margin-s {margin-top: 0.25em;}


strong, .bold, .text ul.bold, .btn, b {font-weight: 400; font-weight: var(--bold); font-variant: normal;}
/*em {font-style: normal; text-decoration: underline;}*/

blockquote p {font-size: 1.125em; color: var(--black);}

.big, a.pdf-button {font-size: 1.25em;}
.row-head .big {font-size: 1em;}

sub, sup, .sub, .sup {font-size: 0.75em;}
sub, .sub {vertical-align: sub;}
sup, .sup {vertical-align: top;}

footer p, footer a.phone, footer a.phone:hover, .dark {color: var(--black);}

.subline {font-size: 1em;/*margin-bottom: 0; color: rgba(0,0,0,1);*/}

.orange, button:hover {color: var(--orange);}
.uppercase {text-transform: uppercase;}

.text ul {list-style-type: none;}
.text ul li {padding-left: 0.5em; position: relative;}
.text ul li::before {content: '\2022'; position: absolute; left: 0;}/* \2022 \22C5*/

.text ol { padding-left: 1.25rem;}
.text li + li {margin-top: 0.5em;}
.text li + .marg-top {margin-top: 1.25rem;}

.text li p {font-size: 1em;}

.head-only h1 {margin-bottom: 0;}

hr {background: var(--grey); margin: 1rem 0; border: none; height: 1px; width: 100%; display: block;}

.pagination ul li::before, .text .no-bull li::before {content: ''; display: none;}
.text .no-bull li {padding-left: 0;}

.sr-only {position: absolute; text-indent: -9999em; color: var(--white); width: 1px; height: 1px; overflow: hidden;}

/***************************** LINKS *****************************/
a, button, input {text-decoration: none; transition: color .3s, background .3s, border .3s; color: var(--black);}
a {color: #000;}
a:hover, .caption a:hover {color: var(--grey);}

a:focus-visible, button:focus-visible {outline-style: auto;}

.skip-link {display: block; padding: 0.5rem 1rem; background: var(--white); position: absolute; top: 0; left: 50%; transform: translate(-50%,-100%); transition: all .3s; border: 0.125rem solid var(--orange);}
.skip-link:focus, .skip-link:focus-visible {transform: translate(-50%,0); z-index: 2;}

.caption a, .white, .white a, .white * {color: var(--white);}

a.phone {color: var(--grey); cursor: default;}
a.phone:hover {color: var(--grey); cursor: default;}

.pdf-button, .btn {color: var(--white); background: var(--orange); display: inline-block; vertical-align: -25%; /*padding: 0.5rem 0.75rem;*/ width: auto; /*margin: 0 0 1rem 0;*/ text-transform: uppercase;}
.pdf-button {padding: 0.75rem 0.75rem 0.75rem 2rem; position: relative;}
.btn {padding: 0.5rem 0.75rem;}
.pdf-button:hover, .btn:hover {color: var(--white); background: var(--grey);}
.pdf-button:before {width: 1rem; height: 1.5rem; position: absolute; left: 0.5rem; top: 0.625em; content: url(../images/layout/pdf-icon.svg); display: inline-block; margin-right: 0.5rem;}
.small.pdf-button {font-size: 1em; padding: 0.5rem 0.75rem 0.5rem 1.75rem;}
.small.pdf-button:before {width: 0.75rem; height: 1.25rem; top: 0.5em;}

.pfeil:before {content: '\003e\00a0';}
.newsline-more:before {content: '\00a0\002f\00a0\003e\00a0';}

button, input, select {color: var(--grey); -webkit-appearance: none; -moz-appearance: none; appearance: none; background: none; border: none; border-radius: none;}
button:hover, input[type='submit']:hover {cursor: pointer;}
.acc-head {font-size: 1.125em;}

/* card links */
.card {width: 100%; position: relative;}
.card-link:before {content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.card-link:focus-visible {outline-style: none;}
.card-link:focus-visible:before {outline-style: auto; outline-offset: 0.125rem;}
.card .teaser, .card .video {position: relative; z-index: 1;}

.card figure + *, .project-imgs + * {margin-top: 0.5rem;}

@supports (content: 'x' / 'y') {
.pdf-button::before {content: url(../images/layout/pdf-icon.svg) / '';}
.text ul li::before {content: '\2022' / '';}
.pfeil:before {content: '\003e\00a0' / '';}
.newsline-more:before {content: '\00a0\002f\00a0\003e\00a0' / '';}
}

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {height:auto; margin: 0 auto; width: 100%; max-width: 32rem; position: relative;}
#content {padding-top: 0.625rem;}

/* HEADER */
header {width: 100%; height: auto;}
footer {width: 100%; padding: 0.25rem 0.625rem 1.5rem 0.625rem;}

#logo {height: auto; width: 100%; position: relative; padding: 0.75rem 0.5rem 0.75rem 0; background: var(--grey-l); display: flex; justify-content: flex-end;}
#logo a, #logo img {display: block; /*float: right; width: 27.5%;*/}
#logo a {width: 27.5%; weight: auto; transition: width .3s;}

.header-bg {height: 100%; width: 100%; padding: 0 0 0.25rem 0; position: relative; background: var(--white);}
#header-line {width: 72.5%; height: 0.1875rem; background: url(../images/layout/strich.svg) top right 0.5rem no-repeat; background-size: cover; transition: width .3s;}

header.fixed {width: 100%; position: fixed; top: 0; z-index: 10;}
header.fixed .header-bg {box-shadow: 0 1rem 1.5rem -1.5rem rgba(0,0,0,0.25);}

/* NAVI */
#main-nav ul {display: none; list-style-type: none; margin: 0; height: 100%; background: var(--grey-l);}
#main-nav li {font-size: 1em; text-transform: uppercase; margin: 0; padding: 1rem; border-bottom: 1px solid var(--white); position: relative;}
#main-nav li:before {content: '';}
#main-nav li a {font-weight: 400; color: var(--orange);}
#main-nav li a.active {color: var(--black);}
#main-nav li a:hover, #main-nav li a.active:hover {color: var(--grey);}

/* main-nav pull */
#pull {width: 3rem; height: 2.75rem; display: block; padding: 0.75rem 0 0 0; position: absolute; z-index: 101; top: 0;}

.burger-wrap {position: relative; width: 100%; height: 100%;}

.burger, .burger::before, .burger::after {width: 1.25rem; height: 0.1875rem; display: block; position: absolute;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.burger {background: rgba(10,10,10,1); left: 1rem;}
.burger::before {top: 0.325rem; border-bottom: 0.1875rem solid rgba(10,10,10,1); content: '';}
.burger::after {top: 0.65rem; border-bottom: 0.1875rem solid rgba(10,10,10,1); content: '';}

.open .burger {background: none;}
.open .burger::before {top: 0.325rem; width: 1rem;
-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.open .burger::after {top: 0.325rem; width: 1rem;
-webkit-transform: rotate(-45deg); transform: rotate(-45deg);}



/* IMAGES / SLIDER / MEDIA */
img, svg {width: 100%; display: block;}

figure.icon, .text figure.icon {width: 4rem; margin-bottom: 0.5rem; float: none;}
/*figure.icon img, figure.icon svg {width: auto;}*/

.video {padding-bottom: 56.25%; position: relative;}
.video iframe, .video video {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
* + .video, .video + *, * + .block-img, .block-img + * {margin-top: 1em;}
.block-img img {width: auto; height: auto; max-width: 100%;}

.no-mob, .hidden, .toggle-off {display: none;}

.stretch-w img {width: 100%; height: auto;}
.stretch-h img {width: auto; height: 100%;}

.img-wrap {position: relative; width: 100%;}
.img-low .img-wrap, .img-low-mid .img-wrap {padding-bottom: 56.25%;}

.headimg {padding: 0.625rem; background: var(--white); margin-top: 0.625rem; overflow: hidden;}
.slide {position: relative;}
.headimg .img-wrap {padding-bottom: 66.66%;}

.caption {position: absolute; bottom: 5%; width: 100%; text-align: center;}
.caption p {font-weight: 400; color: var(--white); text-transform: uppercase;}
.caption p, .caption h1 {font-size: 1.25em;}

.img-wrap img {position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.video {padding-bottom: 56.25%; position: relative;}
.video iframe, .video video {display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}

@supports (object-fit: cover){
.stretch-w img, .stretch-h img, .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
}
@supports (aspect-ratio: 1/ 1) {
.img-wrap, .video {padding-bottom: 0 !important;}
.img-wrap img {position: relative; top: auto; left: auto; -ms-transform: translate(0,0); -webkit-transform: translate(0,0); transform: translate(0,0);}

.video iframe, .video video {position: relative; top: auto; left: auto; object-fit: cover;}

.headimg .img-wrap {aspect-ratio: 3 / 2;}
.img-low .img-wrap, .img-low-mid .img-wrap, .video {aspect-ratio: 16 / 9;}
}

.play-icon {position: relative; width: 2rem; height: 2rem; display: block; background: var(--black); border-radius: 50%; border: 0.0625rem solid var(--white); opacity: .66; transition: opacity .3s, border .3s; margin: 0 !important;}
.play-icon:after {content: ''; display: block; position: absolute; top: 50%; left: 50%; transition: border .3s;}
.play:after {width: 30%; height: 50%; border-left: 0.125rem solid var(--white); border-right: 0.125rem solid var(--white); transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);}
.pause:after {width: 0; height: 0; border-style: solid; border-width: 0.5rem 0 0.5rem 0.75rem; border-color: transparent transparent transparent var(--white); transform: translate(-33.33%,-50%); -webkit-transform: translate(-33.33%,-50%);}

.play-btn {padding: 1rem; position: absolute; bottom: 0; right: 1rem;}
.play-btn:focus-visible {outline: none;}
.play-btn:focus-visible .play-icon {outline: auto;}
.play-btn:hover .play-icon, .play-btn:focus-visible .play-icon {opacity: 1 !important; border-color: var(--color);}

.slick-controls .play-btn {right: auto; bottom: auto; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 1; pointer-events: auto;}
.slick-controls .play-icon {opacity: 0;}
.slick-controls:hover .play-btn .play-icon {opacity: 0.66;}
.slick-controls .play-btn:hover .play-icon {opacity: 1;}

@media (prefers-reduced-motion: reduce) {
.slick-arrows .play-icon {opacity: 0.75;}
}

/* CLS Fix - Slider */
.headslider, .slider {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row nowrap; -ms-flex-wrap: nowrap; overflow: auto; width: 100%;}
.slide {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative; float: left; padding: 0; width: 100%; min-width: 100%;}
.slick-initialized .slide {min-width: initial;}

/* CONTENT */
section {padding: 0;}

/*.newsentry figure, .newsentry video {margin: 0.625rem 0;}*/

.third, .half, .twothird, .full, aside {float: none; height: auto; padding: 0; position: relative; width: 100%;}

.container {width: 100%;}
.text {padding: 0.625rem; background: var(--white);}
.text + .image, .image + .text, .text + .text, .image + .image, .third + .twothird, .twothird + .third, .twothird + .sidebar,
.entry .third + .third, .side-img + .twothird, .image + * {margin-top: 0.625rem;}
/*.third img, .half img {width: 100%; margin-bottom: 0.5rem; display: block;}*/
.entry + .entry {margin-top: 0.75rem;}

.pad-bottom {padding-bottom: 0.75rem;}

.mob-cols {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -ms-flex-wrap: wrap;}
.mob-cols .col, .field {position: relative; -webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial;}
.col-m-s, .col-m-l {width: 50%; max-width: 50%;}

.flex {justify-content: space-between; gap: 1rem; flex-wrap: nowrap;}
.flex .col, .flex .field {width: auto; flex-grow: 1;}
.flex .f-l {flex-grow: 2;}

.middle {align-self: center;}

/* STARTSEITE */
.news {margin-bottom: 0.625rem;}
.news .third {padding-top: 1rem; margin-bottom: 1rem; border-top: 1px solid var(--orange);}
.news .third:first-of-type {padding-top: 0; border-top: none;}

.newsline {border-top: 1px solid var(--orange); padding: 0.5rem 0;}
.newsline:last-of-type {border-top: 1px solid var(--orange); padding: 0.5rem 0 0 0;}

.news video {background: var(--grey-l); object-fit: cover;}

h1 + .news-block, h2 + .news-block {padding-top: 1rem;}


/* PROJECTS */
.project {margin-top: 0.5rem; border-top: 1px solid var(--orange);}
.project:first-of-type {margin-top: 0; border-top: none;}

.project-imgs {padding-top: 0.75rem;}
.project:first-of-type .project-imgs {padding-top: 0;}

.lb-open {display: block; position: relative; width: 100%; height: 100%; background: var(--black); cursor: zoom-in;}
.lb-open img {transition: opacity .3s;}
.lb-open:hover img {opacity: .9;}

/* accordion */
.acc-wrap {padding: 0.75rem 0;}
.acc-entry + .acc-entry {padding-top: 1rem; margin-top: 1rem; border-top: 0.125rem solid rgba(121,121,121,0.75);}
.acc-cont {padding: 1rem 0;}

.acc-pull {display: block; width: 100%; padding-right: 2rem; position: relative; text-align: left;}
.acc-pull .arr {width: 1.5rem; height: 100%; position: absolute; top: 0; right: 0;}
.acc-pull .arr:before, .acc-pull .arr:after {content: ''; display: block; position: absolute; width: 62%; height: 0.125rem; background: var(--grey); top: 50%; transition: all .3s;}
.acc-pull:hover .arr:before, .acc-pull:hover .arr:after {background: var(--orange);}
.acc-pull .arr:before {left: 0; transform: translateY(-50%) rotate(45deg);}
.acc-pull .arr:after {right: 0; transform: translateY(-50%) rotate(-45deg);}

.open .acc-pull .arr:before, .open .acc-pull .arr:after {width: 75%;}
.open .acc-pull .arr:before {left: 50%; transform: translate(-50%,-50%) rotate(45deg);}
.open .acc-pull .arr:after {right: 50%; transform: translate(50%,-50%) rotate(-45deg);}

/* FOOTER */
footer div {padding: 0.75rem 0; border-bottom: 1px solid var(--orange);}
footer div:last-of-type {border-bottom: none;}

#footer-nav article {width: 100%; float: none; padding: 0.25rem 0;}
#footer-nav article:first-of-type {padding: 0 0 0.25rem 0;}

#footer-nav ul {font-size: 0.875em; list-style-type: none; display: none; padding: 0.25rem 0;}
#footer-nav li + li {margin-top: 0.25rem;}
@media (prefers-contrast: more) {
#footer-nav li + li {margin-top: 0.5rem;}
}

.footer-nav-head {padding: 0 0 0 1.125rem; position: relative;}
.footer-nav-head:before {width: 0; height: 0; display: block; position: absolute; left: 0; top: 0.25rem; border-style: solid; border-width: 0.375rem 0 0.375rem 0.75rem; border-color: transparent transparent transparent var(--orange); content: '';
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s;}
.active .footer-nav-head:before {-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg);}

/* pagination */
.pagination {width: 100%;}

.pagination ul {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row nowrap; -ms-flex-wrap: nowrap; margin: 0;}
.pagination ul li {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative; float: left; padding: 0; margin: 0;}
.pagination ul li + li {margin-left: 0.125rem;}

.pagination ul li a, .pagination ul li span {min-width: 2.125rem; text-align: center; display: block; height: 100%; padding: 0.375rem 0.75rem 0.5rem 0.75rem;}
.pagination ul li a {background: var(--orange);}
.pagination ul li span {background: rgba(227,75,32,0.6);}
.pagination a:hover, .pagination a.active {background: var(--grey-l);}


/* back top*/
.arrow-top:before, .arrow-top:after {width: 0.125rem; height: 1rem; content: ''; position: absolute; display: block; background: rgba(255,255,255,1); top: 0;}

.arrow-top:before {transform: rotate(45deg); -webkit-transform: rotate(45deg); left: 0.625rem;}
.arrow-top:after {transform: rotate(-45deg); -webkit-transform: rotate(-45deg); right: 0.625rem;}

#back-top {width: 2.5rem; height: 2.5rem; position: fixed; right: 1rem; bottom: 1rem; display: none; z-index: 3;}
#back-top button, #back-top button:active {width: 2.5rem; height: 2.5rem; display: block; padding: 0.625rem 0.25rem; background: rgba(0,0,0,0.3); border-radius: 50%; -webkit-border-radius: 50%; transition: background 0.3s; -webkit-transition: background 0.3s;}
#back-top button:hover {background: rgba(0,0,0,1);}
#back-top .arrow-top {width: 2rem; height: 1.25rem; position: relative;}

#back-top button:hover .arrow-top {animation: pulse 0.5s 1;}

/* SIDE PANEL */
.side-gal {width: 100%; height: 100%; position: fixed; top: 0; right: 0; overflow: auto; z-index: 100; -webkit-overflow-scrolling: touch;}
.side-gal-cont {background: rgba(255,255,255,0.95);}
.gal-ol {display: none; left: 0;}

.side-gal {overflow-y: scroll; overflow-x: hidden; transition: transform .3s;}
.side-gal-cont {width: 100%; min-height: 101%; padding: 3rem 1rem 2.25rem 1rem; position: absolute; right: 0; left: auto; -webkit-overflow-scrolling: touch; -ms-transform: translateX(100%) -webkit-transform: translateX(100%); transform: translateX(100%); transition: transform .3s;}
.slidein .side-gal-cont {-ms-transform: translateX(0); -webkit-transform: translateX(0); transform: translateX(0);}
.side-inner {padding-bottom: 1.5rem; -webkit-overflow-scrolling: touch; transition: translate .3s;}
.with-nav .side-inner {padding-bottom: 0;}
.side-gal .close-small {display: block; width: 2rem; height: 2rem; margin: 0 auto;}

#loader {width: 100%; height: 100%; max-height: 101vh; position: absolute; top: 0; left: 0; background: var(--white); z-index: 100; transition: all .3s;}
#loader-icon-wrap {width: 4rem; height: 4rem; display: none; position: absolute; top: 50%; left: 50%; -ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); transition: all .3s;}

#loader-icon {width: 100%; height: 100%; background: url(../images/layout/pict-bau.svg) center center/ 100% 100% no-repeat; -ms-animation: pulse 0.75s infinite; -webkit-animation: pulse 0.75s infinite; animation: pulse 0.75s infinite; transition: all .3s;}

.close-btn {width: 2.5rem; height: 2.5rem; position: absolute; z-index: 1; top: 2rem; right: 1rem; padding: 0.25rem 0 0.5rem 0.75rem;}

/* small close */
.cross {display: block; position: relative; transition: all .3s;}
.btn-rd {width: 2rem; height: 2rem; border-radius: 50%; border: 0.125rem solid var(--orange);}

.cross:before, .cross:after {display: block; content: ''; width: 75%; height: 0.125rem; position: absolute; top: 50%; left: 50%; background: var(--orange); transition: all .3s;}
.cross:before {-ms-transform: translate(-50%,-50%) rotate(90deg); -webkit-transform: translate(-50%,-50%) rotate(90deg); transform: translate(-50%,-50%) rotate(90deg);}
.cross:after {-ms-transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

button:hover .btn-rd {border-color: var(--grey);}
button:hover .cross:before, button:hover .cross:after {background: var(--grey);}
button:hover .btn .cross:before, button:hover .btn .cross:after {background: var(--white);}

.close .cross {-ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg);}

/* contact form */
.form-wrap {max-width: 40rem; position: relative;}
.side-inner .form-wrap {margin: 0 auto;}
.contact-form {width: 100%; position: relative;}
.form-wrap input:not([type='submit'], [type='checkbox'], [type='radio'], [type='file']), .form-wrap textarea, select {width: 100%; display: block; border: 1px solid rgba(200,200,200,1); text-align: left; padding: 0.25rem;}
input[type='submit'] {width: auto; border: none; border-radius: none; -webkit-appearance: none; transition: background .3s, border .3s, color .3s;}
input[type='submit']:hover {cursor: pointer;}
input::-webkit-date-and-time-value {min-height: 1.25em;}

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
input[type=number] {-moz-appearance: textfield;}

.row + .row, .row .field + .field, .form-group + .row {margin-top: 1rem;}
.flex .field + .field {margin-top: 0;}
.form-group + .form-group {margin-top: 1.5rem;}

.row-head {width: 100%; padding: 0.5rem 0;}
.field {width: 100%;}
.field .datewrap {width: 100%; display: block;}
.form-header {padding: 0 0 1rem 0;}
.footnotes {padding: 1.5rem 0 0 0;}

.form-group {padding-bottom: 2rem; border-bottom: 0.0625rem solid rgba(121,121,121,0.5);}

.disabled {pointer-events: none; opacity: .5;}
.honey {position: absolute; visibility: hidden;}

.message {padding: 1rem;}
.alert {padding: 0.25rem 1rem;}
.form-ol {width: 100%; height: 100%; left: 0; top: 0; padding: 2rem 1rem; display: none; background: rgba(255,255,255,0.9);}
.success {position: absolute; border: 0.25rem solid var(--orange);}
.form-approval {border: 0.25rem solid rgba(121,121,121,0.5); position: relative;}
.errors, .alert {width: 100%; margin-top: 0.75rem; border: 0.125rem solid rgba(185,0,0,1);}
.js-hint {display: none;}
.no-js .js-hint {display: block; padding: 1rem 0;}
.form-results {margin-bottom: 1.25rem;}

.form-incheck {overflow: hidden;}
.form-incheck .form-inner {position: absolute; z-index: 0;}

label {display: block; position: relative; text-align: left;}
.field-group label {white-space: nowrap;}
.cb, .radio {width: 1px; height: 1px; position: absolute; position: absolute; background: transparent; border: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none;}

.cb:checked + label:before,
.cb:not(:checked) + label:before,
.radio:checked + label:before,
.radio:not(:checked) + label:before
{content:''; display: inline-block; width: 1.25rem; height:1.25rem; position: absolute; border: 1px solid rgba(110,110,110,1); background: var(--white);}

.cb:not(:checked):hover + label:before,
.radio:not(:checked):hover + label:before
{background: var(--orange); box-shadow: inset 0 0 0 0.25rem var(--white);}

.cb:checked + label:after, .check:after {content:''; width: 1rem; height:0.5rem; position: absolute; vertical-align: middle; top:0.25rem; border-left: 0.25rem solid var(--orange); border-bottom: 0.25rem solid var(--orange); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

.radio:checked + label:before
{background: var(--orange); box-shadow: inset 0 0 0 0.125rem var(--white);}

.cb, .cb:checked + label:before, .cb:not(:checked) + label:before,
.radio, .radio:checked + label:before, .radio:not(:checked) + label:before
{left: 0; top: 0;}

.cb:focus + label:before,
.radio:focus + label:before {border-color: var(--orange);}

.cb:focus-visible + label:before, .radio:focus-visible + label:before {outline-style: auto;}

.cb:checked + label:after {left: 0.125rem;}
.cb + label, .radio + label {padding-left: 1.75rem; margin-bottom: 0;}
.cb + label:hover, .radio + label:hover {cursor: pointer;}

.select-wrap {position: relative;}
.select-wrap:before, .select-wrap:after {pointer-events: none;}
.select-wrap:before {display: block; content: ''; width: 1.5rem; height: 100%; position: absolute; right: 0; top: 0; background: var(--orange);}
.select-wrap:after {display: block; content: ''; width: 0; height: 0; position: absolute; right: 0.375rem; top: 50%; -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); border-style: solid; border-width: 0.75rem 0.375rem 0 0.375rem; border-color: var(--white) transparent transparent transparent;}

.form-hint {padding-top: 1.5rem;}
.hint-cont {padding-top: 0.5rem; display: none;}


/* MAPS */
#map-wrap {width: 100%; height: 18em;}
.map .map-canvas {height: 100%; width: 100%;}

aside iframe {width: 100%; height: 20rem; margin-bottom: 1rem;}

.map {width: 100%; position: relative;}
aside .map, section .map {padding-bottom: 75%;}

.map .osm-map {height: 100%; width: 100%; position: absolute; z-index: 0;}
* + .map-wrap, .map-wrap + * {margin-top: 1em;}
section .map-wrap + .map-wrap {padding-top: 1rem; border-top: 1px solid var(--grey);}

.popup-cont, .popup-cont .no-address, .leaflet-popup-pane .no-pop {display: none;}
.leaflet-popup-pane {max-width: 75%;}

.show-address .popup-cont {display: block;}


/* responsiveness
--------------------------------------------- */
/* medium */
@media screen and (min-width:32em) {
.col-l-s {width: 50%; max-width: 50%;}
.col-l-s:nth-of-type(2n+1) {padding: 0 0.6rem 0 0;}
.col-l-s:nth-of-type(2n+2) {padding: 0 0 0 0.6rem;}

/* PROJECTS */
.project:nth-of-type(2) {margin-top: 0; border-top: none;}
.project:nth-of-type(2) .project-imgs {padding-top: 0;}
}

/* medium */
@media screen and (min-width:48em) {
body {padding: 0 0.625rem;}
/***************************** FORMAT *****************************/

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {max-width: 46rem;}

/* HEADER */
#logo {padding: 1.25rem 1.125rem 1.25rem 0;}
#logo a {width: 20%;}
#logo img {/*width: 20%;*/
-webkit-transition: all 0.25s ease; -moz-transition: all 0.25s ease; -o-transition: all 0.25s ease;-ms-transition: all 0.25s ease;transition: all 0.25s ease;}

.header-bg {padding: 0.625rem 0.625rem 0.5rem 0.625rem;}
#header-line {width: 80%; height: 0.375rem; background-position: top right 1.125rem;  background-size: 100% auto;}

header.fixed {left: 0; padding: 0 0.625rem;}
header.fixed #logo {padding: 0.875rem 1.125rem 0.875rem 0;}
header.fixed #logo a {width: 10%;}

header.fixed #header-line {width: 90%;}

#pull {top: 1.25rem;}
header.fixed #pull {top: 0.5rem;}

/* IMAGES / SLIDER / MEDIA */
.headimg .img-wrap {padding-bottom: 50%;}
@supports (aspect-ratio: 1/ 1) {
.headimg .img-wrap {aspect-ratio: 2 / 1;}
.img-low-mid .img-wrap {aspect-ratio: 3 / 2;}
}

/* CONTENT */
.third, .half, .twothird, .full, aside, .side-img {float: left;}

.third + .twothird, .twothird + .third, .twothird + .sidebar, .entry .third + .third, .side-img + .twothird {margin-top: 0;}

.third, aside, .side-img {width: 33.33%; margin-top: 0;}
.third:nth-of-type(3n+1) {padding: 0 0.8rem 0 0;}
.third:nth-of-type(3n+2) {padding: 0 0.4rem 0 0.4rem;}
.third:nth-of-type(3n+3) {padding: 0 0 0 0.8rem;}
.twothird {width: 66.66%; margin-top: 0;}

.half {width: 50%; margin-top: 0;}
.half:nth-child(2n+1), .single .third {padding: 0 0.75rem 0 0;}
.half:nth-child(2n+2), .single .twothird {padding: 0 0 0 0.75rem;}

section.twothird {padding: 0 0.4rem 0 0;}
aside {padding: 0 0 0 0.8rem;}

.text .small-img {width: 33.33%; float: left; margin: 0 1.25rem 0.625rem 0;}
/*.text .image {width: 33.33%; float: left; margin: 0 1.25rem 0.625rem 0;}
.text figure.full {width: 100%;}*/

.entry + .entry {margin-top: 1rem;}
.side-img + .twothird {padding-left: 0.8rem;}

/* STARTSEITE */
.news {margin-bottom: 1rem;}
.news .third {padding-top: 0; margin-bottom: 0; border-top: none;}

/* SLIDER */
/*.slider {height: 19.75rem;}*/
.caption {bottom: 10%;}
.caption p, .caption h1 {font-size: 1.5em;}

/* PROJECTS */
.project {margin-top: 1rem;}
.project-imgs {padding-top: 1rem;}
.project:nth-of-type(3) {margin-top: 0; border-top: none;}
.project:nth-of-type(3) .project-imgs {padding-top: 0;}

.projects hr {float: left; width: 100%; height: 1px; background: var(--orange); margin: 0.5rem 0 1rem 0; display: block;}
.projects hr:first-of-type {display: none;}

/* FOOTER */
footer {padding: 1.5rem 0.625rem;}
#footer-nav article {width: 25%; float: left; padding: 0;}

#footer-nav ul {display: block; padding: 0.25rem 0 0 0;}

.footer-nav-head:before {border: none;}

/*SIDE PANEL */
.side-gal {background: rgba(0,0,0,0.25);}
.side-gal-cont {width: 85%; background: var(--white);}

/* contact form */
.row .field + .field {margin-top: 0;}
.f-m {width: 50%; max-width: 50%;}
.f-m:nth-of-type(2n+1) {padding: 0 0.75rem 0 0;}
.f-m:nth-of-type(2n+2) {padding: 0 0 0 0.75rem;}

.f-s, .col-s, .col-m-s {width: 33.33%; max-width: 33.33%;}
.f-l, .col-l, .col-m-l {width: 66.66%; max-width: 66.66%;}

.f-s + .f-l {padding-left: 1.5rem;}

/* MAPS */
section .map {padding-bottom: 75%;}
.show-address .map, .show-address .popup-cont {width: 50%;}
section .show-address .map {padding-bottom: 37.5%;}
.show-address .popup-cont {padding-left: 1rem;}

.cols {display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; flex-flow: row wrap; -ms-flex-wrap: wrap;}
.col, .show-address .map, .show-address .popup-cont {-webkit-box-flex: initial; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: initial; position: relative; float: left;}


/* MAPS */
aside .map {padding-bottom: 100%;}

}

/* large */
@media screen and (min-width:64em) {
.newsentry hr {width: 80%;}

/***************************** LAYOUT *****************************/
/* BASIC */
.wrapper {max-width: 60rem;}

.no-mob {display: inline;}

/* HEADER */
.header-bg {padding-bottom: 0;}

/* NAVI */
#main-nav ul {display: block; padding: 0.5rem 0; background: var(--white);}
#main-nav li {font-size: 0.75em; display: inline; padding: 0 0.125rem 0 0.375rem; border-bottom: none;}
#main-nav li:before {content: '/'; color: var(--orange); position: absolute; top: 0; left: 0;}
#main-nav li:first-of-type {padding: 0 0.25rem 0 0;}
#main-nav li:first-of-type:before {content: '';}

/*header.fixed {position: relative;}*/

#pull {display: none;}

/* IMAGES / SLIDER / MEDIA */
.headimg .img-wrap {padding-bottom: 40%;}
@supports (aspect-ratio: 1/ 1) {
.headimg .img-wrap {aspect-ratio: 5 / 2;}
}

.caption p, .caption h1 {font-size: 1.75em;}

/* CONTENT */
.side-img + .twothird {padding-left: 1.25rem;}

/* MAPS */
section .show-address .map {padding-bottom: 30%;}

/*SIDE PANEL */
.side-gal-cont {width: 66.66%;}

/***************************** NAVI *****************************/
#main-nav li {font-size: 1em; padding: 0 0.25rem 0 0.625rem;}
}

@media screen and (min-width:74em) {
/***************************** FORMAT *****************************/
h3, h4, h2.small {font-size: 1.25em;}
h3.small {font-size: 1.125em;}
p, label, .text ul, .text ol {font-size: 1em;}

body {padding: 0;}

/***************************** LAYOUT *****************************/
.wrapper {max-width: 70rem;}
#content {padding-top: 0.75rem;}

/* HEADER */
.header-bg {padding: 0.75rem 0.75rem 0 0.75rem;}

/* CONTENT */
.text {padding: 0.75rem;}
.text + .image, .image + .text, .text + .text, .image + .image, .entry + .entry {margin-top: 0.75rem;}
.entry + .entry {margin-top: 1.25rem;}

.text-col-l, .entry-img .stretch-w {width: 80%;}

/* FOOTER */
footer {padding: 1.5rem 0.75rem;}
}

@media screen and (min-width:120em) {
body {font-size: 1.2em}
.wrapper {max-width: 80rem;}
.form-wrap {max-width: 54rem;}
}
/* end responsiveness
--------------------------------------------- */

@-webkit-keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}
@-moz-keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}
@keyframes pulse {
0%, 100% {transform: scale(1);}
50% {transform: scale(1.1);}
}