/*
Theme Name: Andrea Remers 2023
Author: Natascha Ulpts
Author URI: www.nu-webdesign.de
Version: 1.0.0
Date: August 2023
*/

* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }

@font-face { font-family: "PT Sans"; src: url("fonts/PTSans-Regular.ttf") format("truetype"); }
@font-face { font-family: "PT Sans Italic"; src: url("fonts/PTSans-Italic.ttf") format("truetype"); }
@font-face { font-family: "PT Sans Bold"; src: url("fonts/PTSans-Bold.ttf") format("truetype"); }
@font-face { font-family: "PT Sans Bold Italic"; src: url("fonts/PTSans-BoldItalic.ttf") format("truetype"); }

@font-face { font-family: "Courgette"; src: url("fonts/Courgette-Regular.ttf") format("truetype"); }
@font-face { font-family: "Raleway"; src: url("fonts/Raleway-VariableFont_wght.ttf") format("truetype"); }

@font-face { font-family: "PT Serif"; src: url("fonts/PTSerif-Regular.ttf") format("truetype"); }
@font-face { font-family: "PT Serif Italic"; src: url("fonts/PTSerif-Italic.ttf") format("truetype"); }
@font-face { font-family: "PT Serif Bold"; src: url("fonts/PTSerif-Bold.ttf") format("truetype"); }
@font-face { font-family: "PT Serif Bold Italic"; src: url("fonts/PTSerif-BoldItalic.ttf") format("truetype"); }

html{scroll-behavior:smooth}

body {
	font-family: "PT Sans";
	font-size: 1.5rem;
	line-height: 1.55;
	font-weight: normal;
	color: #333;
}
img { height: auto; max-width: 100%; border: none; }

figure { margin: 0 auto 1em auto; }

#contentbody a { text-decoration: none; transition: all 200ms ease; }
body #contentbody a { color: rgba(97,147,175,1); }
body.home #contentbody a { color: inherit; }

.sprungmarke { visibility: hidden; height: 0px !important; margin-top: -200px; position: absolute; display: block; width: 85%; }
.pixelmate-general-banner { max-width: 650px !important; }


/* ---------------------------------------------------------------------------------------------- Schrift ---------------------------------------------------------------------------------------------- */
p { margin-bottom: 1.2rem; }
b, strong { font-family: "PT Sans Bold"; font-weight: normal; }

#contentbody ol { margin: 1rem 0; padding-left: 38px; }
#contentbody ul { margin: 1rem 0; list-style: none; }
#contentbody ul li { padding: 0 0 0 40px; position: relative; }
#contentbody ul li:last-of-type { padding-bottom: 0; }
#contentbody ul li::before { content: '\f058'; font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 115%; color: rgba(97,147,175,1); position: absolute; left: 0; top: 0; }

/* Allgemein auf der Webseite */
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
h1, h2 { font-family: "PT Sans Bold"; font-size: 3rem; color: rgba(97,147,175,1); line-height: 1.2; position: relative; }
h2 { margin: 3rem 0 1rem 0; }
h2.has-text-align-center { max-width: 60%; margin-left: auto; margin-right: auto; }
h3 { font-family: "PT Sans Bold"; font-size: 2rem; color: rgba(97,147,175,1); margin-bottom: 1rem; }
h4 { font-family: "PT Sans Bold"; font-size: 1.7rem; color: rgba(97,147,175,1); }

/* Nur Startseite */
body.home h1, body.home h2 { font-family: "Courgette"; margin-top: 0; font-size: 4rem; }
body.home h2 { margin-bottom: 3rem; }
body.home h3 { font-size: 2.5rem; margin-bottom: 3rem; }
body.home h2::after { content: ''; width: 120px; height: 3px; background: rgba(97,147,175,0.2); position: absolute; bottom: -10px; left: 0; }
body.home h2.has-text-align-center::after { left: 50%; margin-left: -60px; }

.has-x-large-font-size { font-size: 400% !important; margin-bottom: 5rem; }



/* ---------------------------------------------------------------------------------------------- Navigation ---------------------------------------------------------------------------------------------- */
#navigation { 
	width: 100%; 
	display: flex; 
	display: -webkit-flex; 
	align-items: flex-start; 
	position: fixed; 
	top: 0; left: 0; right: 0; 
	padding: 0; 
	transition: all 200ms ease; 
	z-index: 999; 
	background: url("images/bg-nav.png") no-repeat top center; 
	background-size: contain;
	height: 250px;
}
#navigation.sticky { background: url("images/bg-nav-scrolled.png") no-repeat top center; background-size: 100%; height: 200px; }
#navigation ul { 
	font-family: "Raleway"; 
	font-weight: 600; 
	font-size: 1.1rem; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
	list-style: none; 
	display: flex; 
	display: -webkit-flex; 
	align-items: center; 
	opacity: 0; 
	transition: all 500ms ease; 
	padding: 3rem 0;
}
#navigation ul li::marker { content: ''!important; display: none; }
#navigation.sticky ul { opacity: 1; padding: 1.4% 0; }
#navigation ul li a { text-decoration: none; color: #333; display: block; position: relative; }
#navigation ul li a::after { content: ''; opacity: 0; height: 2px; background: rgba(97,147,175,1); width: 50px; text-align: center; position: absolute; bottom: -10px; left: 50%; margin-left: -25px; transition: all 200ms ease; }
#navigation ul li.active a::after { opacity: 1; bottom: -5px; }

#navigation ul#menu-hauptnavigation-left { justify-content: flex-end; }
#navigation ul#menu-hauptnavigation-right { justify-content: flex-start; }
#navigation ul#menu-hauptnavigation-left li { margin: 0 0 0 70px; }
#navigation ul#menu-hauptnavigation-right li { margin: 0 70px 0 0; }

#navigation ul { width: 44%; z-index: 999; }

#logocontainer { width: 18%; position: relative; margin: 0 -20px; }
#logocontainer a.normal { position: absolute; display: block; width: 100%; top: 0; left: 0; opacity: 1; }
#logocontainer a.scrolled { position: absolute; display: block; width: 100%; top: 0; left: 0; opacity: 0; }

#logocontainer.sticky a.normal { opacity: 0; }
#logocontainer.sticky a.scrolled { opacity: 1; }

#logocontainer a.normal img, #logocontainer a.scrolled img { transition: all 300ms ease; transform: scale(1); }
#logocontainer.sticky a.normal img, #logocontainer.sticky a.scrolled img { transform: scale(0.9); }

button#menubtn {
	height: 80px;
	width: 80px;
	border: none;
	z-index: 9999;
	cursor: pointer;
	background: #fff;
	color: #333;
	transition: all 300ms ease;
	display: none;
	font-size: 30px;
	position: fixed;
	top: 0; left: 0;
}



/* ---------------------------------------------------------------------------------------------- Buttons ---------------------------------------------------------------------------------------------- */
.wp-block-buttons { margin: 2rem 0; }
.wp-block-buttons .wp-block-button { position: relative; }
.wp-block-buttons .wp-block-button .wp-block-button__link { padding: 1rem 3.5rem; }
.wp-block-button.cta { }
#leistungen .wp-block-button.cta { margin: 0 auto; }
.wp-block-button.cta .wp-block-button__link::after { content: '*Zum kostenlosen Erstgespräch'; font-family: "PT Sans"; font-weight: normal; position: absolute; bottom: -30px; left: 0; right: 0; text-align: center; font-size: 1.1rem; color: #333; }

a#scrolltop { position: fixed; bottom: 200px; right: 100px; opacity: 0; border: 3px solid #fff; width: 55px; height: 55px; border-radius: 50%; transform: translateY(0px); transition: all 300ms ease; }
a#scrolltop i { color: rgba(97,147,175,1); font-size: 50px; }
a#scrolltop i::after { content: ''; background: #fff; width: 40px; height: 40px; border-radius: 50%; z-index: -1; display: block; position: absolute; top: 5px; left: 5px; }



/* ---------------------------------------------------------------------------------------------- Layout ---------------------------------------------------------------------------------------------- */
#pagewrapper { width: 100%; position: relative; }

.mobileonly-title { align-items: flex-end; justify-content: flex-end; display: none; margin-bottom: 0; width: 100%; overflow: hidden; max-width: 100%; }

.wp-block-columns { width: 100%; margin: 0 auto 10rem auto; position: relative; }
.wp-block-columns .wp-block-columns { width: 80%; max-width: 2100px; }
:where(.wp-block-columns.is-layout-flex) { gap: 5rem; }

body.home { background: url("images/coaching-fuer-frauen-hintergrund-1.webp") no-repeat top center, url("images/bg-kontakt-both.webp") no-repeat bottom 200px center; background-size: 100%;}

body.home .wp-block-columns.titlearea { margin: 300px auto 130px auto; }
body.home .wp-block-columns.titlearea .wp-block-column { background: rgba(255,255,255,0.85); padding: 3%; border-radius: 40px; box-shadow: 0 0 20px rgba(0,0,0,0.13); max-width: 55%; margin: 0 0 0 auto; }

body.page #contentbody { margin-top: 300px; }
body.home #contentbody { margin-top: 0 !important; }

#trustedpartner { justify-content: space-between; max-width: 430px; width: auto; margin: 0 auto; }
#trustedpartner:where(.wp-block-columns.is-layout-flex) { gap: 1rem; }
#trustedpartner figure { transition: all 200ms ease; margin: 0; }
#trustedpartner p { margin-bottom: 0; }

#probleme { background: url("images/coaching-fuer-frauen-problemlinie.png") no-repeat bottom center; background-size: 100%; }
#probleme, #probleme .wp-block-columns { margin: 0 auto; }
#probleme .wp-block-columns { margin: -5rem auto; }

.specialized1 { 
	background: url("images/specialized1-top.webp") no-repeat top center, url("images/specialized1-bot.webp") no-repeat bottom center;
	background-color: #A0BECF; 
	background-size: 100%;
	width: 100%; padding: 22% 0; color: #fff !important; 
	margin-bottom: 5rem;
	position: unset;
}
.specialized1 h2 { color: #fff; margin-bottom: 0; }
.specialized1 h2::after { background: rgba(97,147,175,1) !important; }

#referenzen { }
#referenzen .wp-block-columns { margin-top: 16rem; }
#referenzen .wp-block-columns .wp-block-column { border: 3px solid rgba(97,147,175,1); padding: 3%; border-radius: 40px; height: 100%; }
#referenzen .wp-block-columns .wp-block-image { border-radius: 50%; border: 3px solid rgba(97,147,175,1); overflow: hidden; width: 70%; max-width: 350px; margin: -250px auto 2rem auto; }
#referenzen .wp-block-columns .wp-block-image img { display: flex; display: -webkit-flex; align-content: center; justify-content: center; }
#referenzen .wp-block-columns h3 { font-family: "Courgette"; text-shadow: 0 3px 6px rgba(0,0,0,0.2); font-size: 3rem; margin-bottom: 1rem; }
#referenzen .wp-block-columns p { font-family: "PT Serif Italic"; font-weight: normal; font-style: normal !important; color: #333; }
#referenzen .wp-block-columns p:last-of-type { margin-bottom: 0; }

#leistungen > .wp-block-column > .wp-block-columns { margin-bottom: 3rem; }

#pakete { margin: 3rem auto; max-width: 1280px !important; }
#pakete .wp-block-column { border: 2px solid rgba(97,147,175,1); border-radius: 30px; }
#pakete .wp-block-column:nth-child(2) { box-shadow: 0 0 20px rgba(97,147,175,0.5); }
#pakete h2 { font-family: "PT Sans Bold"; font-size: 2.5rem; margin: 0; padding: 2rem; max-width: 100%; }
#pakete .wp-block-column h2:first-of-type { border-bottom: 2px solid rgba(97,147,175,1); padding: 1.5rem 2rem; }
#pakete h2::after { display: none; }
#pakete ul { margin: 3.5rem 4rem !important; }
#pakete ul li { margin-bottom: 1rem; }
#pakete ul li::before { color: green !important; }
#pakete ul li.cross::before { content: '\f00d'; color: red !important; left: 5px; }

.wp-block-separator { border: none; background: url("images/trenner.webp") no-repeat center center; background-size: contain; width: 100%; height: 360px; margin: -10rem 0 10rem 0; }

#uebermich {
	background: url("images/ueber-andrea-remers-top.webp") no-repeat top center, url("images/ueber-andrea-remers-bot.webp") no-repeat bottom center;
	background-color: #DFE9EF; 
	background-size: 100%;
	width: 100%; padding: 24% 0 10% 0; 
	margin: -10rem auto 0rem auto;
}

.specialized2 { margin-bottom: 20rem; max-width: 80%; }
.specialized2 h2.has-text-align-center { max-width: 100%; }
.specialized2 h2::after { display: none; }

#faq { margin-bottom: 50rem; }
#fragenkatalog { width: 100%; }
#fragenkatalog .wp-block-columns { margin: 0; }
#fragenkatalog > .wp-block-column > .wp-block-columns { width: 100%; border: 1px solid rgba(0,0,0,0.5); margin-bottom: 1rem; }
#faq h3.question { color: #333; position: relative; font-size: 1.7rem; background: rgba(0,0,0,0.05); margin: 0; padding: 0.5rem 3rem 0.5rem 1rem; }
#faq h3.question::after { content: '«'; color: #555; position: absolute; right: 30px; top: 6px; transition: all 200ms ease; }
#faq h3.question.active::after { transform: rotate(-90deg);}
#faq .answer { max-height: 0; transition: all 200ms ease; overflow: hidden; padding: 0 1rem; width: 100%; }
#faq .answer p {padding: 1rem 0; margin-bottom: 0; }
#faq .answer.active { max-height: 4000px; height: auto; }
#faq .wp-block-buttons { margin-bottom: 3rem; }

#kontakt { margin: 0 0 20rem 0; }
#kontakt .wp-block-columns { margin: 0 auto 0 10%; max-width: 40%; }
#kontakt h2 { margin-bottom: 1rem; }
#kontakt h2::after { display: none; }
#kontakt p { font-size: 110%; }
#kontakt .wp-block-button.cta .wp-block-button__link { color: #fff !important; background: rgba(97,147,175,1) !important; }
.mobileonly { display: none; margin-bottom: 0; max-width: none; max-height: 560px; width: 100%; align-items: center; justify-content: center; overflow: hidden; }

footer { width: 80%; margin: 0 auto 5rem auto; color: rgba(0,0,0,0.4); }
footer figure.wp-block-image { max-width: 200px; margin: 0 0 1em 0; }
body.home footer { width: 35%; margin: 0 0 5rem auto; position: absolute; bottom: 0; right: 10%; left: auto; }
footer a { color: inherit; text-decoration: none; transition: all 200ms ease; }
footer .wp-block-columns { margin: 0 0 3rem 0; }
footer .wp-block-columns h4 { margin-bottom: 1rem; }
body.home footer .wp-block-columns h4 { color: rgba(0,0,0,0.4); }
footer .wp-block-image figure { margin-bottom: 0 !important; margin-top: 0 !important; filter: grayscale(1); transition: all 200ms ease; }
body.home footer .widget_block:first-of-type > .wp-block-columns > .wp-block-column:first-of-type { display: none; }


#credits { background: #333; color: rgba(255,255,255,0.7); padding: 1rem 2rem; text-align: right; font-size: 1.1rem; display: flex; display: -webkit-flex; align-items: center; justify-content: space-between; }
#credits ul { display: flex; display: -webkit-flex; align-items: center; list-style-type: none; }
#credits ul li { margin: 0; }
#credits ul li::before { content: '|'; margin: 0 5px; }
#credits ul li:first-of-type::before { content: ''; }
#credits a { color: rgba(255,255,255,1); opacity: 0.7; text-decoration: none; transition: all 200ms ease; }




/* ---------------------------------------------------------------------------------------------- Hover Effekte ab 1200px aufwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (min-width:1200px) {
	#navigation a:hover::after { opacity: 1; bottom: -5px; }
	#contentbody a:hover, #credits a:hover { opacity: 1; }
	body.page #contentbody a:hover { text-decoration: underline; }
	body.home #contentbody a:hover { text-decoration: none !important; }
	.wp-block-buttons .wp-block-button .wp-block-button__link:hover { background: rgba(97,147,175,1) !important; color: #fff !important; }
	#kontakt .wp-block-button.cta .wp-block-button__link:hover { background: #666 !important; color: #fff !important; }
	a#scrolltop:hover { transform: translateY(-10px); }
	a#scrolltop:hover i { color: #333 !important; }
	#faq h3.question:hover { cursor: pointer; }
	footer a:hover { color: #333; }
	footer .wp-block-image figure:hover { filter: grayscale(0); cursor: pointer; }
	#trustedpartner .wp-block-image figure:hover { filter: grayscale(1); cursor: pointer; }
}




/* ----------------------------------------------------------------------------------------------------- Standard Monitor ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- Responsive ab 1920px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1920px) {

	body { font-size: 1.3rem; line-height: 1.5; }
		
	#navigation { height: 200px; }
	#navigation.sticky { height: 150px; }
	#navigation.sticky ul { padding: 1.2% 0; }
	
	body.home .wp-block-columns.titlearea { margin-top: 230px; margin-bottom: 60px; }
	
	#contentbody ul li:last-of-type { margin-bottom: 0; }
	body.home h1, h1 { font-size: 3rem; }
	body.home h2, h2 { font-size: 3rem; }
	body.home h3 { font-size: 2.5rem; }
	h3, #pakete h2 { font-size: 2rem; }
	h4, #faq h3.question { font-size: 1.4rem; }	
	
	body.home .wp-block-columns.titlearea .wp-block-column { max-width: 60%; }
	
	.wp-block-separator { margin: -15rem 0 5rem 0; }
	
	#referenzen .wp-block-columns p { font-size: 110%; }
	
	#pakete .wp-block-column h2:first-of-type { padding: 1rem 1.5rem; }
	#pakete ul { margin: 2.5rem !important; }
	
	.specialized2 { margin-bottom: 15rem; }
	
	#faq { margin-bottom: 20%; }

}



/* ---------------------------------------------------------------------------------------------- Responsive ab 1600px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1600px) {

	#navigation { height: 160px; }
	
	body.home .wp-block-columns.titlearea { width: 90%; margin-top: 200px; }
	body.home .wp-block-columns.titlearea .wp-block-column { max-width: 70%; }
	
	#kontakt { margin: 0 0 10rem 0; }
	#kontakt .wp-block-columns { max-width: 46%; margin-left: 5%; margin-bottom: 6rem; }
	#kontakt .wp-block-columns figure.wp-block-image { width: auto; }
	#kontakt h2 { font-size: 340% !important; }
	
	body.home footer { margin-bottom: 3rem; }
	
}



/* --------------------------------------------------------------------------------------------------------- Laptop ---------------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- Responsive ab 1440px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1440px) {

	body { font-size: 1.2rem; }
	body.home { background: url("images/coaching-fuer-frauen-hintergrund-1.webp") no-repeat top center; background-size: 100%; }
	body.page #contentbody { margin-top: 200px; }
	
	#navigation.sticky { height: 110px; }
	#navigation ul { font-size: 0.9rem; }
	#navigation.sticky ul { padding: 1% 0; }
	#logocontainer { margin: 0 -20px; }	
	
	body.home .wp-block-columns.titlearea { margin-top: 170px; }
	body.home #contentbody { background: url("images/bg-kontakt-both.webp") no-repeat bottom center; background-size: 100%; }
	
	body.home h1, h1 { font-size: 2.5rem; }
	body.home h2, h2 { font-size: 2.5rem; }
	.specialized2 h2.has-text-align-center { margin-bottom: 1.5rem; }
	h2.has-text-align-center.has-x-large-font-size { max-width: 80%; }	
	#kontakt h2 { font-size: 340% !important; }
	h3, #pakete h2 { font-size: 1.6rem; }
	h4, #faq h3.question { font-size: 1.2rem; }	
	#referenzen .wp-block-columns h3 { font-size: 2.5rem; }
	
	
	:where(.wp-block-columns.is-layout-flex) { gap: 3rem; }
	
	.wp-block-separator { margin: -20rem 0 0 0; }
	
	#probleme { background-position: top 230px center; }
	#probleme .wp-block-columns { margin: 0 auto; }
	.specialized1 { margin-bottom: 0; }
	
	#referenzen .wp-block-columns { margin-bottom: 0; }
	#referenzen .wp-block-columns .wp-block-image { width: 275px; margin-top: -200px; }
	
	body.home footer { position: static; width: 80%; margin:  0 auto; }
	body.home footer .widget_block:first-of-type > .wp-block-columns > .wp-block-column:first-of-type { display: block; }
	
	a#scrolltop { right: 40px; bottom: 100px; }

}



/* ---------------------------------------------------------------------------------------------- Responsive ab 1400px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1400px) {

	body.home #contentbody { background-image: none; }
	
	#faq { margin-bottom: 0; }
	
	#kontakt { background: #ffca67; text-align: center; padding: 6rem 0; margin: 0 0 3rem 0; }
	#kontakt .wp-block-columns { max-width: none; margin: 0 auto; }
	#kontakt figure { margin: 0 auto 1rem auto; }
	#kontakt .wp-block-button { margin: 0 auto; }
	.mobileonly { display: flex; display: -webkit-flex; }
	
}


/* ---------------------------------------------------------------------------------------------- Responsive ab 1280px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1280px) {

	#navigation { height: 130px; }
	body.home .wp-block-columns.titlearea { margin-top: 150px; }
	
	#navigation ul#menu-hauptnavigation-left li, #navigation ul#menu-hauptnavigation-right li { margin: 0 auto; }
	
}



/* ---------------------------------------------------------------------------------------------------- Tablet (Landscape) --------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- Responsive ab 1080px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1080px) {
	
	body.home { background-image: none; }
	body.home .wp-block-columns.titlearea { height: auto; margin-bottom: 3rem; margin-top: -300px; }
	body.home .wp-block-columns.titlearea .wp-block-column { max-width: none; padding: 2rem; }
	.mobileonly-title { display: block; }
		
	#probleme { background-position: bottom 290px center; }
	h2.has-text-align-center { max-width: 80%; }
	.has-x-large-font-size { font-size: 300% !important; }
	
	.specialized1, #uebermich { margin-bottom: 5rem; }
	
	a#scrolltop { display: none !important; }
	
}




/* ---------------------------------------------------------------------------------------------- Responsive ab 1000px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {

	figure { max-width: 500px; }
	
	.wp-block-columns { flex-wrap: wrap !important; }
	.wp-block-columns > .wp-block-column { flex-basis: 100% !important; }
	#trustedpartner .wp-block-column { flex-basis: 50px !important; }
	#trustedpartner .wp-block-column:first-of-type { flex-basis: 170px !important; }
	
	:where(.wp-block-columns.is-layout-flex) { gap: 0 !important; }
	#trustedpartner:where(.wp-block-columns.is-layout-flex) { gap: 1rem !important; }
	.wp-block-spacer { display: none; }
	
	#probleme { background: none; }
	#probleme .wp-block-columns:first-of-type .wp-block-column:first-of-type { order: 2; }
	#probleme .wp-block-columns:first-of-type .wp-block-column:nth-of-type(2) { order: 1; }
	
	#referenzen .wp-block-columns { margin-top: 12rem; }
	#referenzen .wp-block-columns .wp-block-column { max-width: 600px; margin: 3rem auto 10rem auto; padding: 2rem; }
	#referenzen .wp-block-columns .wp-block-image { margin-top: -180px; }
	
	#pakete .wp-block-column { max-width: 600px; margin: 0 auto 3rem auto; }
	
	footer .wp-block-columns, #trustedpartner { flex-wrap: nowrap !important; }
	
}




/* ---------------------------------------------------------------------------------------------------- Mobile Navigation --------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- Responsive ab 1000px abwaerts ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:1000px) {

	.mobileonly-title { margin-top: 80px; }
	
	button#menubtn { display: block; background: rgba(97,147,175,0.2); }
	#navigation, #navigation.sticky { height: 80px; background: #fff; background-image: none !important; box-shadow: 0 0 20px rgba(97,147,175,0.5); flex-direction: column; }
	#navigation ul, #navigation.sticky ul { flex-direction: column; order: 2; align-items: flex-start; padding: 0 1.7rem; width: 200px; background: #fff; opacity: 1; transition: all 300ms ease; transform: translateX(-300px); }
	#navigation ul#menu-hauptnavigation-left { padding-top: 2rem; margin-top: 80px; }
	#navigation ul#menu-hauptnavigation-right { padding-bottom: 2rem; }
	#navigation ul li { margin: 0 !important; padding-bottom: 1rem; font-size: 1.1rem; }
	#navigation ul#menu-hauptnavigation-right li:last-of-type { padding-bottom: 0; }
	
	button#menubtn.activated { background: rgba(97,147,175,1); color: #fff; }
	#navigation ul.activated, #navigation.sticky.activated ul { transform: translateX(0px); background: #dfe9ef; }
	
	#logocontainer { width: 100%; margin: 0; text-align: center; order: 1; }
	#logocontainer a.normal img, #logocontainer a.scrolled img { height: 80px; width: auto; max-width: none; }
	#logocontainer.sticky a.normal { opacity: 1; }
	#logocontainer.sticky a.scrolled { opacity: 0; }
	#logocontainer.sticky a.normal img, #logocontainer.sticky a.scrolled img { transform: scale(1); }
	
}



/* ----------------------------------------------------------------------------------------------------- Tablet (Portrait) ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- Responsive ab 900px Hochformat ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:900px) and (orientation: portrait) { 

	body.home .wp-block-columns.titlearea { margin-top: -250px; }
	
	.wp-block-columns { margin: 0 auto 5rem auto; }
	.wp-block-separator { margin: -10rem 0 0 0; }
	
	#leistungen h2.has-text-align-center { text-align: left !important; }
	body.home #leistungen h2.has-text-align-center::after { left: 0; margin: 0; }
	#uebermich { margin-top: 0; }
	
	#pakete h2.has-text-align-center { text-align: center!important; }
		
	#credits { flex-direction: column; text-align: center; justify-content: center; }
	#credits > div { border-top: 1px solid rgba(255,255,255,0.5); padding-top: 1rem; margin-top: 1rem; width: 100%; }
	
}



/* ---------------------------------------------------------------------------------------------- Responsive ab 781px  ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:781px) { 

	#trustedpartner .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0 !important; }
	
}



/* ---------------------------------------------------------------------------------------------- Responsive ab 660px  ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:660px) { 

	body { font-size: 1.1rem; }
	body.home h1, h1, #referenzen .wp-block-columns h3 { font-size: 2.2rem; }
	body.home h2, h2 { font-size: 2.2rem; }
	body.home h3, h3, #pakete h2 { font-size: 2rem; }
	h4, #faq h3.question { font-size: 1.4rem; }
	
	body.home .wp-block-columns.titlearea { margin-top: 0; }
	body.home .wp-block-columns.titlearea .wp-block-column { padding: 0; background: none; border-radius: none; box-shadow: none; margin: 0; }
	
	#trustedpartner { max-width: 80%; }
	#trustedpartner .wp-block-column:first-of-type { flex-basis: 110px !important; }
	
}



/* ---------------------------------------------------------------------------------------------- Responsive ab 550px  ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:550px) { 

	
	#logocontainer a.normal, #logocontainer a.scrolled { left: auto; right: 0; width: auto; }
	
	#trustedpartner { flex-wrap: wrap !important; }
	#trustedpartner .wp-block-column { margin: 0 auto; text-align: center; }
	#trustedpartner .wp-block-column:first-of-type { flex-basis: 100% !important; }
	
}



/* ----------------------------------------------------------------------------------------------------- Handy (Portrait) ------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------- Responsive ab 500px Hochformat  ---------------------------------------------------------------------------------------------- */
@media only screen and (max-width:500px) and (orientation: portrait) { 
	
	body.page #contentbody { margin-top: 150px; }
	
	body.home .wp-block-columns.titlearea { width: 80%; }
	
	.wp-block-buttons .wp-block-button { display: block; width: 100%; text-align: center; }
	.wp-block-buttons .wp-block-button .wp-block-button__link { padding: 1rem; width: 100%; }	
	
	#referenzen .wp-block-columns { margin-top: 100px; }
	#referenzen .wp-block-columns .wp-block-image { width: 200px; margin-top: -140px; }
	
	footer .wp-block-columns { flex-wrap: wrap !important; }
	
}