/*
Theme Name: SQIPS Blanktheme
Theme URI: https://www.sqips.de/
Author: Markus / SQIPS
Author URI: https://www.sqips.de/
Description: Blanktheme mit Bootstrap, jQuery und Templates fuer Veranstaltungen.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: sqips-blanktheme
*/

html {
  scroll-behavior: smooth;
}

body {
  background: #ffffff;
  color: #212529;
	font-size: 20px; 
}

img {
  max-width: 100%;
  height: auto;
}

h1{font-size: 50px}
h2{font-size: 40px; font-weight:600!important; padding-bottom:20px}
h3{font-weight: 600}

html,body{

  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;

}

#logo{width: 200px}

.container {
  max-width: 1400px;
}

.site-main {
  min-height: 60vh;
}


header.site-header {
	padding: 0px 0;
	background: #fff;
	position: relative;
	z-index: 1000;
}

.site-logo-link {
	display: inline-block;
}

#logo {
	width: 200px;
	max-width: 100%;
	height: auto;
}

.site-header-right {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.desktop-navigation {
	display: block;
}

.main-menu {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-menu li {
	float: none;
	margin: 0;
	list-style: none;
}

.main-menu li a {
	font-size: 19px;
	font-weight: 600;
	color: #0096A1;
	text-decoration: none;
	padding: 12px 0;
	display: block;
	transition: color .25s ease, opacity .25s ease, background-color .25s ease, border-color .25s ease;
}

.main-menu li a:hover {
	color: #0067B2;
	text-decoration: none;
}

.main-menu li a.spenden {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	border: 1px solid #0096A1;
	padding: 10px 20px;
	background: #fff;
	color: #0096A1;
}

.main-menu li a.spenden:hover {
	background: #0096A1;
	color: #fff;
}

.main-menu li a.buchen {
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	background: #0096A1;
	color: #fff;
	border: 1px solid #0096A1;
	padding: 10px 20px;
}

.main-menu li a.buchen:hover {
	background: #0067B2;
	border-color: #0067B2;
	color: #fff;
}


.menu-toggle {
	width: 56px;
	height: 56px;
	border: 1px solid #0096A1;
	background: #fff;
	border-radius: 16px;
	padding: 0;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.menu-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	background: #0096A1;
	border-radius: 2px;
	transition: transform .25s ease, opacity .25s ease, background-color .25s ease;
}

.menu-toggle:hover {
	background: #0096A1;
}

.menu-toggle:hover span {
	background: #fff;
}

.mobile-menu-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .35);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s ease, visibility .35s ease;
	z-index: 1098;
	backdrop-filter: blur(3px);
}

.mobile-menu-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: min(420px, 92vw);
	height: 100vh;
	background: #fff;
	padding: 26px 24px 30px;
	transform: translateX(100%);
	transition: transform .4s ease;
	z-index: 1099;
	box-shadow: -10px 0 40px rgba(0, 0, 0, .12);
	display: flex;
	flex-direction: column;
}

.mobile-menu-head {
	
display:flex;
	justify-content:space-between;
	align-items:flex-start;
	width:100%;
	margin-bottom: 30px;
}
.mobile-menu-head img {
	width: 150px;
	height: auto;
}

.mobile-menu-head img{width: 80px}

.menu-close {
	width: 48px;
	height: 48px;
	border: 1px solid #0096A1;
	background: #fff;
	border-radius: 14px;
	position: relative;
	padding: 0;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease;
}

.menu-close span {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 22px;
	height: 2px;
	background: #0096A1;
	border-radius: 2px;
}

.menu-close span:first-child {
	transform: translate(-50%, -50%) rotate(45deg);
}

.menu-close span:last-child {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.menu-close:hover {
	background: #0096A1;
}

.menu-close:hover span {
	background: #fff;
}

.mobile-navigation {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.mobile-menu-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu-list li {
	margin: 0;
	padding: 0;
	border-bottom: 1px solid rgba(0, 150, 161, .10);
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .35s ease, transform .35s ease;
}

.mobile-menu-list li:nth-child(1) {
	transition-delay: .08s;
}

.mobile-menu-list li:nth-child(2) {
	transition-delay: .14s;
}

.mobile-menu-list li:nth-child(3) {
	transition-delay: .20s;
}

.mobile-menu-list a {
	display: block;
	padding: 18px 0;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: #0096A1;
	text-decoration: none;
	transition: color .25s ease, padding-left .25s ease;
}

.mobile-menu-list a:hover {
	color: #0067B2;
	padding-left: 8px;
}

.mobile-menu-actions {
	margin-top: auto;
	padding-top: 28px;
	display: grid;
	gap: 14px;
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .35s ease .26s, transform .35s ease .26s;
}

.mobile-action {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding: 14px 20px;
	border-radius: 16px;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
}

.mobile-action:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.mobile-action-spenden {
	border: 1px solid #0096A1;
	background: #fff;
	color: #0096A1;
}

.mobile-action-spenden:hover {
	background: #0096A1;
	color: #fff;
}

.mobile-action-buchen {
	border: 1px solid #0096A1;
	background: #0096A1;
	color: #fff;
}

.mobile-action-buchen:hover {
	background: #0067B2;
	border-color: #0067B2;
	color: #fff;
}

body.menu-open {
	overflow: hidden;
}

body.menu-open .mobile-menu-overlay {
	opacity: 1;
	visibility: visible;
}

body.menu-open .mobile-menu-panel {
	transform: translateX(0);
}

body.menu-open .mobile-menu-list li,
body.menu-open .mobile-menu-actions {
	opacity: 1;
	transform: translateY(0);
}

@media (max-width: 991.98px) {
	.desktop-navigation {
		display: none;
	}

	.menu-toggle {
		display: inline-flex;
	}

	header.site-header {
		padding: 14px 0;
	}

	#logo {
		width: 150px;
	}
}

@media (min-width: 992px) {
	.mobile-menu-overlay,
	.mobile-menu-panel {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.mobile-menu-panel {
		width: 100%;
		max-width: 100%;
		padding: 20px 18px 24px;
	}

	.mobile-menu-head img {
		width: 130px;
	}

	.mobile-menu-list a {
		font-size: 21px;
	}

	.mobile-action {
		font-size: 16px;
		min-height: 52px;
	}
}

.container, .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    --bs-gutter-x: 80px;
    --bs-gutter-y: 0;
}


#hero{ padding: 5rem 0; background-color: #0096A1;   color: white}
#heroInner{  background-image:url("assets/img/hero.jpg"); min-height: 750px; background-position: center top; background-size: cover; background-repeat: no-repeat;}

.but_clear{font-size: 20px; line-height: 20px; font-weight: 600; background: none; border:1px solid white; display: inline-block; padding: 10px 20px; text-decoration: none; text-transform: uppercase; color: white;}
.but_clear_blue{font-size: 20px; line-height: 20px; font-weight: 600; border:1px solid #0096A1; display: inline-block; padding: 10px 20px; text-decoration: none; text-transform: uppercase; color: #0096A1;}
.but_clear_blue2{font-size: 20px; line-height: 20px; font-weight: 600; border:1px solid #0067B2; display: inline-block; padding: 10px 20px; text-decoration: none; text-transform: uppercase; color: #0067B2;}
.but_clear_blue3{font-size: 20px; line-height: 20px; font-weight: 600; border:1px solid #24A5DD; display: inline-block; padding: 10px 20px; text-decoration: none; text-transform: uppercase; color: #24A5DD;}
.but_clear_white{font-size: 20px; line-height: 20px; font-weight: 600; border:1px solid #fff; display: inline-block; padding: 10px 20px; background-color: #fff; text-decoration: none; text-transform: uppercase; color: #0096A1;}
input[type='text'],select,textarea{border-radius:0px!important; border: 0px!important;}
input[type='email']{border-radius:0px; border: 0px}
section{padding: 100px 0;}
.petrol{background-color:#0096A1; color: white; }
.yellow{background-color: #EEE41A; color:#0096A1;}
.hellblau{background-color: #24A5DD; color: #fff;}
.blau{background-color: #0067B2; color: #fff;}

.yellowFont{color: #EEE41A; font-size: 30px; font-weight: 600; margin-top:20px; line-height: 40px}
.blueFont{color: #0096A1; font-size: 30px; font-weight: 600; margin-top:20px}
.subTitel{color: #fff; font-size: 30px; font-weight: 600; margin-top:20px}


#unsere-raeume{color: white; text-align: center}
#unsere-raeume .container .row{justify-content: center;}
#unsere-raeume .container .row h2{display: flex; justify-content: center;}
#veranstaltungen{color: white; text-align: center}
#veranstaltungen .container .row{justify-content: center;}
#veranstaltungen .container .row h2{display: flex; justify-content: center;}

.gelbesHaus img{width:80%;}

.raumbox{background-color: white; color: #24A5DD; text-align: left;}
.raumbox > .image{min-height: 300px; background-size: cover; background-repeat: no-repeat;}
.raumbox a{padding:20px; display: block; color: #24A5DD; text-decoration: none;}

.raumText{display: flex !important;
    justify-content: flex-start;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;}

.raumBox2{background-color: white; color:#24A5DD}
.raumBox2 a{color:#24A5DD }
.raumBox2 a:hover{text-decoration: none;}
.raumBox2 div{padding:30px}
.veranstBox{background-color: white; color: #0067B2; text-align: left;}
.veranstBox > .image{min-height: 250px; background-size: cover; background-repeat: no-repeat;}
.veranstBox a{padding:20px; display: block; color: #0067B2; text-decoration: none;}
.veranstBox h3{margin-top:10px}

.veranstaltBox{background-color: white; color: #0096A1; text-align: left;}
.veranstaltBox > .image{min-height: 400px; background-size: cover; background-repeat: no-repeat;}
.veranstaltBox a{padding:20px; display: block; color: #0096A1; text-decoration: none;}

.veranstaltListe{min-height: 300px; background-color: #fff; color: #0067B2;}
.veranstaltListe > .right{padding:40px}
.raumListe{min-height: 300px; background-color: #fff; color: #24A5DD;}
.raumListe > .right{padding:40px}
.raumListe div{background-position: center; background-size: cover;}
.veranstaltListe a{color: #0067B2; text-decoration: none;}
.veranstaltListe h3{margin: 15px 0px 15px 0px;}


.veranstaltungDetail{background-color: #fff; color:#0067B2; padding:60px 100px;}
.veranstaltungDetail h1{padding:20px 0px}
.veranstaltungDetailImg{min-height: 800px}
.spenden{background-color: #fff; color:#0096A1; padding:60px 100px; font-size: 20px; font-weight: 500}


.projektDetail{background-color: #fff; color:#0067B2; padding:60px 100px;}
.projektDetail h3{padding:3rem 0px 1rem 0px; font-weight: 600} 
.projektDetail h3:first-child{padding-top:0rem}
.projektDetailImg{min-height: 800px; background-size: cover; background-repeat: no-repeat;}

.partnerBox{background-color: white; color: #24A5DD; text-align: left; width: 100%;}
.partnerBox > .image{min-height: 400px; background-size: cover; background-repeat: no-repeat;}
.partnerBox a{padding:20px; display: block; color: #24A5DD; text-decoration: none;}
.partnerBox > .text{padding:20px}


ul{ padding: 0px!important; margin: 0px!important; }
ul li{list-style-type: none; margin-bottom: 10px;}
ul li a{color: #0096A1; text-decoration: none;}
ul li a:hover{text-decoration: underline;}

.leftImgCol img{width:90%!important;}
.card-body{font-size: 16px;}

.netzwerkGalerie{margin-top:40px}


.raumListe {
	align-items: stretch;
}

.raumListe > .col-md-6 {
	display: flex;
}

.raumCarousel {
	width: 100%;
	height: 100%;
	min-height: 420px;
}

.raumCarousel .carousel-inner,
.raumCarousel .carousel-item {
	height: 100%;
	min-height: 420px;
}

.raumCarouselImage {
	width: 100%;
	height: 100%;
	min-height: 420px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}





.raumListe .right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.raumListe .right a,
.raumListe .right .but_clear_blue,
.raumListe .right .but_clear_blue3 {
	display: inline-block;
	width: auto;
	flex: 0 0 auto;
}

@media (max-width: 767.98px) {
	.raumCarousel,
	.raumCarousel .carousel-inner,
	.raumCarousel .carousel-item,
	.raumCarouselImage {
		min-height: 280px;
	}
}


.footer-initiative {

	padding: 70px 0 90px;
	
	
}

.footer-top {
	margin-bottom: 70px;
}

.footer-label {
	font-size: 16px;
	line-height: 1.3;
	margin-bottom: 18px;
	min-height: 21px;
}

.logo-box {
	min-height: 120px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}



.footer-newsletter-title {
	font-size: 26px;
	line-height: 1.15;
	font-weight: 400;
	margin: 0 0 34px;
}

.footer-newsletter-form {
	margin-bottom: 110px;
}

.newsletter-wrap {
	position: relative;
	max-width: 620px;
	margin: 0 auto;
}

.newsletter-input {
	height: 64px;
	border: 1px solid #0096A1!important;
	border-radius: 25px!important;
	background: transparent;
	padding: 0 190px 0 28px;
	font-size: 18px;
	box-shadow: none !important;
}

.newsletter-btn {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	height: 44px;
	padding: 0 28px;
	border: 0;
	background: transparent;
	color: #111;
	font-size: 18px;
	font-weight: 400;
	box-shadow: none !important;
}



footer{background-color: #fff;color: #000;}

.footer-bottom {
	row-gap: 32px;
}





.footer-address,
.footer-nav {
	font-size: 18px;
	line-height: 1.8;
}

.footer-address strong {
	font-weight: 400;
}

.footer-address a,
.footer-nav a {
	color: #111;
	text-decoration: none;
}

.footer-address a:hover,
.footer-nav a:hover {
	text-decoration: underline;
}

.footer-nav {
	display: flex;
	flex-direction: column;
}

@media (max-width: 991.98px) {
	h1{font-size: 40px}
	h2{font-size: 30px}
	.footer-initiative {
		padding: 60px 0 70px;
	}

	.footer-top {
		margin-bottom: 50px;
	}

	.footer-newsletter-title {
		font-size: 26px;
	}

	.footer-newsletter-form {
		margin-bottom: 70px;
	}
}

@media (max-width: 767.98px) {
	.netzwerkGalerie div{width:100%;}
	h1{font-size: 30px}
	
	#hero h1{margin-bottom: 25px;}
	#hero {
    	padding: 2.5rem 0;
		font-size: 16px;
		line-height: 20px;
		
	}
	#heroInner {
    	
		min-height: 600px;
	}
	
	min-height: 750px;
	section{padding:}
	.newsletter-btn {
        position: static;
        transform: none;
        display: block;
        width: 100%;
        height: 52px;
        margin-top: 12px;
        border: 1px solid #00b8d9;
        border-radius: 40px;
    }
	.netzwerkGalerie{margin-top:0px}

	.gelbesHaus{
    	display: none
	}
	
	section {
    	padding: 45px 0;
	}
	.leftImgCol img {
    	width: 100% !important;
	}
	
	.blueFont {font-size: 20px;}
	.yellowFont{font-size: 24px; line-height: 30px}
	
	.imgBlock{margin-top:30px}
	
	.spenden{padding:10px 20px}
	
	.gelbesHaus{ margin-bottom: 30px}
	.footer-house-logo{text-align: center;}
	.footer-top {
		margin-bottom: 40px;
	}

	

	.footer-newsletter-title {
		font-size: 26px;
	}

	.newsletter-wrap {
		max-width: 100%;
	}

	.newsletter-input {
		height: 58px;
		padding: 0 20px;
	}

	.newsletter-btn {
		position: static;
		transform: none;
		display: block;
		width: 100%;
		height: 52px;
		margin-top: 12px;
		
		
		color: #fff;
		background-color: #0096A1;
		border-radius: 40px;
	}

	.footer-newsletter-form {
		margin-bottom: 55px;
	}
}




.site-branding a {
  color: inherit;
  text-decoration: none;
}



.page-section {
  padding: 3rem 0;
}

.entry-thumbnail {
  margin-bottom: 1.5rem;
}

.card-link {
  color: inherit;
  text-decoration: none;
}

.event-meta {
  display: grid;
  gap: .75rem;
}

.event-meta__item {
  padding: .75rem 1rem;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: .5rem;
  background: #f8f9fa;
}

.event-meta__label {
  font-size: .875rem;
  font-weight: 700;
  margin-bottom: .15rem;
}

.main-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.main-navigation a {
  text-decoration: none;
}