/* GESUCHSFORMULAR
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.gesuchsformular{width:100%; max-width:var(--page); margin:30px auto; padding:0 15px; box-sizing:border-box}
.gesuchsformular fieldset{border:none; padding:0; margin:0}
.gesuchsformular fieldset > div{display:flex; flex-wrap:wrap; gap:30px}
.gesuchsformular fieldset > div > div{width:calc(50% - 15px)}
.gesuchsformular .text{width:100%; margin:0 0 -10px 0}
.gesuchsformular .text p{margin:0}
.gesuchsformular .text hr{display:none}
.gesuchsformular .eingabefeld{border:1px solid var(--brown); border-radius:9px; width:100%; padding:10px; box-sizing:border-box; font-size:18px}
.gesuchsformular .w100{width:100%}
.gesuchsformular .bold{font-weight:bold}
.gesuchsformular .datenschutz .form-check-input {margin:0 10px 0 0; transform: scale(150%)}
.gesuchsformular .datenschutz a{text-decoration:underline}
.gesuchsformular .datenschutz a:hover{text-decoration:none}
.gesuchsformular .senden{border:none; padding:10px 30px 13px 30px; background:var(--brown); color:#FFF; border-radius:9px}
.gesuchsformular .senden:hover{background:#000}
.gesuchsformular .clearfix{display:none}


@media (max-width: 700px) {
  .gesuchsformular fieldset > div > div{width:100%}
}

/* HERO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.hero{padding:0 50px; box-sizing:border-box;}
.hero_slider{padding:0 50px; box-sizing:border-box}
.hero_text{align-self:auto!important}
.hero a, .hero a:visited{color:#000!important; padding:10px 0 0 0; display:inline-block}
.hero a:hover{color:var(--brown)!important}
.hero div#n2-ss-2 .n2-ss-slide-limiter{max-width:100%!important; max-height:60vh}
.hero .n2-ss-slider .n2-ss-layer{left:25px}

/* Button */
.hero #n2-ss-2{height:60vh}
.hero .n2-ss-widget{background:var(--brown)!important; width:50px; height:50px; position:relative}
.hero .n2-ss-widget:hover{background:#000!important}
.hero .n2-ss-widget img{display:none!important}
.hero .n2-ss-widget:after{font-size:30px; position:absolute; top:50%; left:50%; color:#FFF}
.hero .nextend-arrow-previous:after{content:"\2794"; transform:translate(-50%) rotate(180deg)}
.hero .nextend-arrow-next:after{content:"\2794"; transform:translate(-50%)}

@media (max-width: 700px) {
  .hero .n2-ss-layer{width:100%!important}
  .hero .n2-ss-layer p{font-size:20px!important}
  .hero .n2-ss-slider .n2-ss-layer{left:0}
  }
@media (max-width: 500px) {
  .hero{min-height:auto}
  .hero_slider{padding:0;}
  .hero .n2-ss-layer{width:100%!important}
  .hero .n2-ss-layer p{font-size:16px!important}
  }

/* PROJEKTE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.projekte{width:100%; max-width:var(--page); margin:-80px auto 60px auto; padding:0 15px; box-sizing:border-box}
.projekte ul{list-style-type: none; margin:0; padding:0}
.projekte ul li{margin:0 0 60px 0}
.projekte details summary{margin:0 0 30px 0}
.projekte details summary:hover{color:var(--brown); cursor:pointer}

/* STIFTUNGSRAT
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.stiftungsrat{width:100%; max-width:var(--page); margin:0 auto; padding:0 15px; box-sizing:border-box}
.stiftungsrat > div{width:100%; display:flex; flex-wrap:wrap; gap:30px}
.stiftungsrat h2{width:100%; margin:0}
.stiftungsrat .content{width:calc(50% - 15px); padding:30px; box-sizing:border-box; background:var(--brown)}
.stiftungsrat .content p,
.stiftungsrat .content a,
.stiftungsrat .content a:visited{color:#FFF}
.stiftungsrat .content p{margin:0}
.stiftungsrat .content em{font-style:normal}
.stiftungsrat .content a{display:flex; flex-wrap:wrap; margin:10px 0 0 0}
.stiftungsrat .content a img{filter:brightness(0) invert(1); width:25px; height:auto; margin:0 7px 0 0}
.stiftungsrat .content a:hover{color:#000!important}
.stiftungsrat .content a:hover img{filter:brightness(0)}

@media (max-width: 700px) {
  .stiftungsrat{gap:15px}
  .stiftungsrat .content{width:100%;}
}
@media (max-width: 500px){
  .stiftungsrat .content p{text-align:center}
  .stiftungsrat .content a{display:inline-block}
  .stiftungsrat .content a img,
  .stiftungsrat .content em{display:none}
}

/* STIFTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.stifter{display:flex; flex-wrap:wrap}
.stifter .text{width:calc(66.666% - 15px); margin:0 15px 0 0}
.stifter .img{width:33.333%}
.stifter .img img{width:100%; height:auto}

@media (max-width: 700px) {
  .stifter .text,
  .stifter .img{width:100%; margin:0}
  }

/* ZEITSTRAHL
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.history{margin:60px auto 80px auto!important}
.history p{display:flex; flex-wrap:wrap}
.history strong{display:inline-block; width:60px;}
.history em{display:inline-block; font-style:normal; width:calc(100% - 60px)}
.history .image{align-items:flex-end; margin:40px 0}
.history .image img{width:calc(66.666% - 15px); height:auto; margin:0 15px 0 0}
.history .image em{width:33.333%; font-style:italic}

@media (max-width: 700px) {
  .history .image img,
  .history .image em{width:100%; margin:0}
}
@media (max-width: 500px) {
  .history strong,
  .history em{width:100%}
  }

/* TEASER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.teaser{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin: 80px auto;}
.teaser ul{width:100%; display:flex; flex-wrap:wrap; gap:30px; list-style-type: none; margin:0; padding:0}
.teaser ul li{width:calc(25% - (90px / 4)); height:calc((var(--page) - 120px ) / 4); position:relative}
.teaser figure{padding:0; margin:0; width:100%; height:100%}
.teaser figure img{width:100%; height:100%; object-fit:cover}
.teaser a{position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(179,101,60,0.5); display:flex; flex-direction:column-reverse; padding:20px 30px; box-sizing:border-box; text-align:right; font-family:opensans-bold; color:#FFF!important; transition:0.5s}
.teaser a:hover{background:rgba(179,101,60,0); transition:0.5s}

.teaser_content ul li{width:calc(33.333% - (60px / 3)); height:calc((var(--page) - 90px ) / 3);}

@media (max-width: 1200px) {
  .teaser ul li{height:180px;}
  .teaser_content ul li{height:180px;}
}
@media (max-width: 700px) {
  .teaser ul li,
  .teaser_content ul li{width:100%}
}
                    

/* FOOTER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
footer{background:var(--brown);}
footer p, footer a, footer a:visited{color:#FFF!important}
footer a:hover{color:#000!important}
.footer > div{width:100%; max-width: var(--page); margin:0 auto; padding:30px 15px; box-sizing:border-box; display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between}
.footer a{display:flex; align-items:center}
.footer img{filter:brightness(0) invert(1); width:25px; height:auto; margin:0 10px 0 0}
.footer a:hover img{filter:brightness(0)}

/* ARTICLE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
article figure{margin:0 0 40px 0; width:100%; height:60vh; padding:0 50px; box-sizing:border-box;}
article figure img{width:100%; height:100%; object-fit:cover}

article .com-content-article__body, 
article .in_article{width:100%; max-width:var(--page); padding:0 15px; box-sizing:border-box; margin:60px auto}

@media (max-width: 700px) {
  article figure{padding:0}
  }
@media (max-width: 500px) {
  article figure{margin:0 0 20px 0}
  article .com-content-article__body,
  article .in_article{margin:20px auto 40px auto}
  }

/* HOME-INFO
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.home_info{display:flex; flex-wrap:wrap; gap:30px; margin:60px 0 0 0}
.home_info .content{width:calc(33.333% - 20px); }
.home_info .content p{margin:0 0 10px 0}

@media (max-width: 700px) {
  .home_info .content{width:100%}
  }

/* HEADER
–––––––––––––––––––––––––––––––––––––––––––––––––– */
header{width:100%; height:180px; position:relative}
header .logo{position:absolute; top:50%; transform:translateY(-50%); left:calc(50% - ((var(--page) - 15px) / 2))}
header .logo img{height:auto; width:var(--logo); transition:0.5s}
header .logo p{margin:0}
header .logo a:hover img{filter:brightness(0); width:calc(var(--logo) - 20px); transition:0.5s}

@media (max-width: 1200px) {
   header .logo{left:50px}
}
@media (max-width: 500px) {
  header{height:120px}
  header .logo{left:15px}
}
  

/* BASIC
–––––––––––––––––––––––––––––––––––––––––––––––––– */
:root {--brown:rgb(179,101,60); --page:1200px; --logo:330px}

@media (max-width: 500px) {
  :root{--logo:220px}
}

@font-face {font-family: 'coolvetica-regular'; src: url('../fonts/Coolvetica-Regular.woff') format('woff'), url('../fonts/Coolvetica-Regular.woff2') format('woff2')}
@font-face {font-family: 'opensans-regular'; src: url('../fonts/OpenSans-Regular.woff') format('woff'), url('../fonts/OpenSans-Regular.woff2') format('woff2')}
@font-face {font-family: 'opensans-bold'; src: url('../fonts/OpenSans-Bold.woff') format('woff'), url('../fonts/OpenSans-Bold.woff2') format('woff2')}

html {font-size: 62.5%; scroll-behavior:smooth}
body {background: #FFF; font-size: 20px; line-height: 30px; font-family: opensans-regular, sans-serif; color: var(--darkgrey); overflow-x:hidden}
a, a:visited{color:#000; text-decoration: none; }
a:hover{color:var(--brown)}
strong {font-family: opensans-bold; font-weight:normal}
p {margin:0 0 20px 0}
img{-webkit-user-drag:none; user-drag:none}

h1,h2,h3{font-weight:normal; color:#000; }
h1{font-size:50px; line-height:60px; font-family: coolvetica-regular; margin: 0 0 40px 0}
h2,h3{font-family: opensans-bold}
h2{font-size:30px; line-height:40px; margin: 20px 0}
h3{font-size:26px; line-height:34px; margin: 0 0 20px 0}

.h2-abstand article h2{margin: 40px 0 20px 0}

h2 em{font-style:normal; font-family: roboto-regular}

button{border:none; padding:10px 20px; background:var(--brown); border-radius:9px; margin:0}
button:hover{background:#000}
button a,button a:visited{color:#FFF}
button strong{font-size:75%; font-family: opensans-regular;}

.link-hyphens article a{hyphens:auto}

@media (max-width: 500px) {
	h1{font-size:40px; line-height:50px; margin: 0 0 20px 0}
	h2{font-size:26px; line-height:32px}
	h3{font-size:24px; line-height:28px}
	.hyphens article{hyphens: auto;}
}

/* NAVIGATION
–––––––––––––––––––––––––––––––––––––––––––––––––– */
nav {position:absolute; z-index:33; top:70px; right:calc(50% - ((var(--page) - 15px) / 2))}/* Grundlayout Navigation */
nav ul {list-style: none; display: flex; gap: 30px; margin: 0; padding: 0;}/* Liste horizontal */
nav a {text-decoration: none; color: #000; font-size:30px; position:relative}/* Links */
nav a:after{content:""; position:absolute; bottom:-5px; left:50%; transform:translateX(-50%); width:0%; height:2px; background:var(--brown); transition: all 0.3s ease}
nav a:hover:after{width:100%; transition: all 0.3s ease}
.menu-btn {display: none;}/* Checkbox ausblenden */
.menu-icon {display: none; cursor: pointer;}/* Hamburger Icon */
.menu-icon .navicon {background: #000; display: block; height: 3px; width: 35px; position: relative; }/* Hamburger Linien */
.menu-icon .navicon::before,
.menu-icon .navicon::after {content: ""; background: #000; height: 3px; width: 35px; position: absolute; left: 0;}
.menu-icon .navicon::before {top: -11px}
.menu-icon .navicon::after {top: 11px}

@media (max-width: 1200px) {
  nav {right:15px}
  .menu-icon {display: block; position: absolute; top: 0; right: 35px; width: 48px; height: 48px; padding: 12px; box-sizing: border-box; cursor: pointer; z-index: 50; /* optional */ user-select: none; }  /* Hamburger sichtbar */ 
  .navigation {display: none;}/* Menu standardmaessig verstecken */
  nav ul {flex-direction: column; gap: 10px;}/* Vertikale Navigation */
  .menu-btn:checked ~ .navigation {display: block; background:#FFF; padding:40px 30px 30px 30px}/* Menu anzeigen, wenn Checkbox aktiv */
}

@media (max-width: 500px) {
  nav{top:45px}
  .menu-icon{right:0}
}

/* Hamburger Linien – Transition */
.menu-icon .navicon,
.menu-icon .navicon::before,
.menu-icon .navicon::after {
    transition: all 0.3s ease;
}

/* Wenn Menu aktiv */
.menu-btn:checked + .menu-icon .navicon {background: transparent;}
.menu-btn:checked + .menu-icon .navicon::before {transform: rotate(45deg); top: 0;}
.menu-btn:checked + .menu-icon .navicon::after {transform: rotate(-45deg);top: 0;}