/*   
Theme Name: HNO MVZ Koeln 2024
Theme URI: http://www.jareksierpinski.de
Description: Ein Theme fuer das MVZ Koeln“ln
Author: Jarek Akara
Author URI: http://www.jareksierpinski.de
*/

:root {
	--schriftfarbe: #003766;
	--dunkelblau: #003766;
	--swiper-theme-color: #003766;
	--hellblau: #a7cce8;
	--lichtblau: #d8ebf8;
	--footerfarbe: #a7cce8;
	--kontrast: #003766;
	--weiss: #ffffff;
	--font: 'Jost', Arial, Verdana, sans-serif;
	--shadow: 0 0 5px 2px rgba(0, 0, 0, .2);
}


/* =Layout GLOBAL -------------------------------------------------------------- */

body {
	color: var(--schriftfarbe);
	font-family: var(--font);
	font-size: 100%;
	line-height: 1.4em;
	font-weight: normal;
	background-color: var(--weiss);
}

a {
	color: var(--dunkelblau);
	text-decoration: none;
	transition: all .3s ease-out;
}

.entry p a {
	border-bottom: 1px solid transparent;
	border-color: var(--dunkelblau);
}

#main .entry p a:hover {
	color: var(--hellblau)
}

#headerspace {
	transition: all .2s ease-out;
}

.wp-block-columns {
	width: 100%;
}

#main .wp-block-columns {
	align-items: baseline;
}

strong {
	font-weight: 600;
}

.button,
.wp-block-button {
	display: inline-block;
	background-color: var(--hellblau);
	color: var(--dunkelblau);
	border: none;
	font-size: 1.1em;
	padding: .6em 1.5em;
	border-radius: .4em;
	cursor: pointer;
	transition: all .3s ease-out;
	margin-bottom: .5em !important;
	font-family: var(--font);
}

.wp-block-button a:hover {
	background: transparent !important;
	color: #fff !important;
}

.button:hover,
.wp-block-button:hover {
	color: #fff;
	background-color: var(--dunkelblau);
	box-shadow: var(--shadow);
}

.wp-block-button:hover a {
	color: #fff;
}

.wp-block-buttons.is-content-justification-center {
	text-align: center;
}

/* POPUP -------------------------------------------------------------- */

.is-style-bck-white {
	background-color: #fff;
	color: var(--dunkelblau);

}

.is-style-bck-white {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-bottom: 4em;
}

/* WRAPPER -------------------------------------------------------------- */

.wrapper,
.is-style-breit {
	width: 100%;
	max-width: 1800px;
	padding-left: 3.2%;
	padding-right: 3.2%;
	box-sizing: border-box;
	margin: auto;
	text-align: left;
}

/* HEADER -------------------------------------------------------------- */

#header {
	position: fixed;
	top: 0px;
	right: 0px;
	left: 0px;
	height: auto;
	background-color: var(--weiss);
	z-index: 50000;
	transition: all .3s ease-out;
	font-size: 1.35em;
	padding-top: 1.2em;
	min-height: 60px;
	box-sizing: border-box;
}

.scrolled #header {
	box-shadow: 0px 2px 15px -3px rgba(0, 0, 0, 0.1);
}

.h-holder {
	display: flex;
	width: 100%;
}

.hd-1 {
	flex-basis: 33%;
}

.hd-2 {
	flex-basis: 67%;
	text-align: right;
}

h2#logo {
	margin-right: 10%;
	margin-top: 0.1em;
	margin-bottom: .6em;
}

h2#logo img {
	transition: all .2s ease-out;
	width: auto;
	height: 90px;
}

.entry h3 {
	padding-bottom: 1em;
	padding-top: 1em;
	font-size: 1.5em;
	line-height: 1.2em;
}

.hd-widget {
	transition: all .2s ease-out;
	max-height: 3em;
	min-height: 1em;
	overflow: hidden;
}

/* MENU NAVI -------------------------------------------------------------- */

#navi {
	border-top: 1px solid transparent;
	border-color: var(--dunkelblau);
	width: 100%;
	padding-top: .9em;
	margin-top: .55em;
	text-align: left;
	letter-spacing: .01em;
	transition: all .3s ease-out;
	font-size: 1.1em;
	font-weight: 400;
}


#navi ul {
	list-style: none;
	margin: 0;
	padding-left: 0;

}

#menu-hauptmenu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Abstand zwischen den ersten drei (7%) */
#menu-hauptmenu li:nth-child(-n+3) {
	margin-right: 6%;
}

/* Erstes rechtes Element nach ganz rechts schieben */
#menu-hauptmenu li:nth-child(5) {
	margin-left: auto;
}

/* Abstand zwischen den letzten beiden (1em) */
#menu-hauptmenu li:nth-child(5) {
	margin-right: .5em;
}

#navi ul li {
	display: inline-block;
	vertical-align: top;
	position: relative;
	text-decoration: none;

	transition-duration: 0.5s;
	padding-bottom: 1em;
}

#navi a {
	display: inline-block;
	vertical-align: top;
	padding-bottom: .1em;
	border-bottom: 2px solid transparent;
}

#navi .impress,
#navi .daten {
	font-size: .8em;
}

#navi .impress:after {
	content: '|';
	padding-left: .5em;
}

#navi li:hover,
#navi li:focus-within {
	cursor: pointer;
}

#navi li:hover>a {
	border-bottom: .05em solid transparent;
	border-color: var(--dunkelblau);
}


/* HEADINGS ÃœBERSCHRIFTEN -------------------------------------------------------------- */


h1.pagetitle {
	display: none;
}

#main .entry h2 {
	margin-top: 1em;
	font-size: 2.25em;
	line-height: 1.25em;
}

#main .entry .hero h2 {
	padding-bottom: .6em;
	margin-top: 0;

}

/* MAIN -------------------------------------------------------------- */

#main {
	font-size: 1.4em;
	line-height: 1.42em;
	box-sizing: border-box;
	background-color: var(--lichtblau);
	padding-top: 4em;
	overflow: hidden;
	max-width: 100%;
}

.entry {
	word-wrap: break-word;
	hyphens: auto;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	overflow-wrap: anywhere;
}

.entry p {
	padding-bottom: 1.5em;
}

.portraittext {
	background-color: #fff;
	padding: 4% 7%;
	padding-top: 4.8%;
	box-sizing: border-box;
	margin-bottom: 2em;
	margin-top: 6%;
	padding-left: 8%;
}

.standardblock .portraittext {
	margin-top: 0;
	margin-bottom: 4em;
}

#main .entry .portraittext h2 {
	margin-top: 0;
	padding-bottom: 1em;
	font-size: 2em;
}

#main .entry hr {
	border-top: 1px solid transparent;
	border-color: var(--dunkelblau);
}

/* HERO --------------------------------------------------------------------- */

.hero {
	margin-bottom: 3em;
}

.hero .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.hero .wp-block-column:first-child .wp-block-group {
	background-color: #fff;
	margin-right: -20%;
	padding: 2em;
	position: relative;
	z-index: 999;
}

.hero .wp-block-column:last-child {
	margin-bottom: 3em;
}

#main .wp-block-image {
	display: block;
}

.small {
	font-size: .7em;
}

.places {
	gap: 3em;
	margin-bottom: 3em;
}

.places .wp-block-column {
	background-color: #fff;
	padding: 2em;
}

#main .places .wp-block-button {
	display: block;
}

#main .places figure {
	aspect-ratio: 3.8;
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 1em;
}

#main .places .wp-block-column {
	display: flex;
	flex-direction: column;
}

#main .places .wp-block-column .wp-block-buttons {
	margin-top: auto;
}

/* SLIDER ALLE -------------------------------------------------------------- */

.topswiper .jslice:has(.caption) img.slideimg {
	width: 75%;
}

.topswiper .jslice:has(.fixinfo) img.slideimg {
	width: 70%;
	aspect-ratio: 2;
	object-fit: cover;
	object-position: top center;
}

/* POPUP Karte --------------------------------------------------------- */

.svg-popup {
	position: absolute;
	z-index: 9999999;
}

.svg-popup-inner {
	font-size: .8em;
	line-height: 1.3em;
}

.svg-popup-inner p {
	padding-bottom: 1em;
}

.svg-popup-inner p:last-child {
	padding-bottom: 0;
}

#main .svg-popup-inner a {
	display: inline-block;
	background-color: var(--hellblau);
	color: var(--dunkelblau);
	border: none;
	font-size: 1em;
	padding: .6em 1.5em;
	border-radius: .4em;
	cursor: pointer;
	transition: all .3s ease-out;
	margin-bottom: .5em !important;
	font-family: var(--font);
	border: none;
}

#main .svg-popup-inner a:hover {
	color: #fff !important;
	background-color: var(--dunkelblau);
	box-shadow: var(--shadow);
}

.leistungen {
	display: flex;
	flex-wrap: wrap;
	gap: 5%;
}
.leistungen .kachel {
	flex-basis: 30%;
	margin-bottom: 3em;
}
.leistungen img {
	max-width: 100%;
	height: auto !important;
	position: relative;
	aspect-ratio: 1.5;
	object-fit: cover;
	filter: grayscale(100%);
}
.leistungen .leistungen-bild {
	position: relative;
	margin-bottom: 1em;
}
.leistungen .leistungen-bild:after {
	content: '';
	mix-blend-mode: multiply;
	background-color: var(--hellblau);
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: opacity .3s ease-out;
}

/* Kacheln -------------------------------------------------------------- */

.teamgrid {
	margin-left: -1.5em;
	margin-right: -1.5em;
}

/* clear fix */
.teamgrid:after {
	content: '';
	display: block;
	clear: both;
}


.teamkachel {
	position: relative;
	float: left;
	max-width: 350px;
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 3em;
	margin-left: 1.5em;
	margin-right: 1.5em;
}

.teamkachel .a-foto {
	position: relative;
	width: 100%;
	aspect-ratio: .8;
	overflow: hidden;
	background-color: var(--hellblau);
	background-size: cover;
}

.teamkachel .a-foto img {
	display: none;
}

.teamkachel h3 {
	font-size: 1em;
	line-height: 1.3em;
	padding-top: 1.3em;
	padding-bottom: 1.3em;
	background-color: #fff;
	margin-left: 5%;
	margin-right: 5%;
	text-align: center;
}

.teamkachel .a-titel {
	width: 100%;
	background-color: #fff;
}

.teamkachel a {
	font-size: .8em;
	padding: .4em;
	display: block;
	text-align: center;
	cursor: pointer;
}

.teamkachel p {
	padding-bottom: .5em;
	font-size: .8em;
}

.teamfilter {
	margin-bottom: 3em;
	font-size: clamp(13px, .8em, 20px);
	margin-left: -.5em;
}

.teamfilter button, .op-filter button {
	margin: .5em;
	border: none;
}

.teamfilter button.active, .op-filter button.active {
	background: var(--dunkelblau);
	color: #fff;
}

.overlay-loc {
	opacity: 0;
	transition: all .3s ease-out;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: rgba(255, 255, 255, .8);
	padding: 5% 10%;
}

.a-foto:hover .overlay-loc {
	opacity: 1;
}

#main .leistungen-swiper {
	background-color: var(--hellblau);
	padding: 3em;
	padding-bottom: 4em;
	box-sizing: border-box;
	margin-left: 3em;
	margin-right: 3em;
}

.leistungen-swiper .swiper-slide {
	background-color: #fff;
	padding: 3em;
	box-sizing: border-box;
	box-shadow: .7em .7em var(--lichtblau);
}


.swipebox {
	position: relative;
}

#main .swiper-button-prev {}

#main .swiper-button-next {}

#main .swiper-pagination {
	bottom: .7em;
}

#main .swiper-pagination-bullet {
	background-color: #fff;
	opacity: 1;
	width: .7em;
	height: .7em;
}

#main .swiper-pagination-bullet-active {
	background-color: var(--dunkelblau);
}

/* TOOLS: Scrollbutton, Loginbutton, Editlink -------------------------------------------------------------- */


body .wp-block-button__link:hover {
	background-color: var(--schriftfarbe);
}

/* Go TOPPFEIL -------------------------------------------------------------- */

#toTop {
	width: 35px;
	height: 35px;
	position: fixed;
	z-index: 1000;
	bottom: 0px;
	right: 0px;
	margin: 0;
	display: none;
	cursor: pointer;
	color: var(--auszeichnung);
	border-radius: 3px;
	text-align: center;
	font-size: 35px;
}

#toTop:before {
	content: '\25B2';
	font-family: Arial, Helvetica, sans-serif;
}

#toTop:hover {
	text-decoration: none !important;
	border-radius: 3px;
}

.login a {
	position: fixed;
	bottom: 2px;
	left: 0;
	background: url("images/login.gif") no-repeat scroll 0 3px transparent;
	font-size: 1px;
	height: 12px;
	overflow: hidden;
	text-indent: -1000px;
	width: 10px;
	display: inline-block;
	filter: alpha(opacity=40);
	-ms-filter: "alpha(opacity = 40)";
	opacity: .40;
}

.login a:hover {
	filter: alpha(opacity=100);
	/* IE 6, 7, 8 */
	-ms-filter: "alpha(opacity = 100)";
	opacity: 1;
}

a.post-edit-link {
	position: fixed;
	z-index: 22000;
	bottom: 0px;
	left: 0;
	display: block;
	font-size: 1px;
	text-decoration: none;
	text-indent: -1000px;
	overflow: hidden;
	background: url("images/edit.png") no-repeat;
	width: 43px;
	height: 57px;
	border: none !important;
}


/* Print Style -------------------------------------------------------------- */

@media print {
	body {
		background: none !important;
	}
}


/* RESPONSIVE -------------------------------------------------------------- */


@media only screen and (max-width: 1600px) {
	body {
		font-size: 90%;
	}
}

@media only screen and (max-width: 1400px) {

	body {
		font-size: 1.2vw;
	}

	#main {
		font-size: 1.2em;
	}

	.teamkachel {
		max-width: 27vw;
	}

	.teamkachel h3 {
		font-size: 1.8vw;
	}

	.places figure img {
		max-height: 6vw;
	}

	.teamkachel a {
		font-size: 1em;
	}

	h2#logo img {
		height: clamp(50px, 6vw, 90px);
	}

}

@media only screen and (max-width: 1000px) {
	#main {
		padding-top: 3em;
	}

	.topswiper .jslice:has(.caption) img.slideimg {
		width: 100%;
	}

	.topswiper .jslice:has(.fixinfo) img.slideimg {
		width: 100%;
	}

	#navi {
		padding-top: .6em;
		margin-top: .4em;
	}

	h2#logo {
		margin-top: .2em;
	}

	#header {
		padding-top: .7em;
	}
}

@media only screen and (max-width: 800px) {
	body {
		font-size: 75%;
	}

	.hero {
		margin-bottom: 1em;
	}

	.hero .wp-block-column:first-child .wp-block-group {
		margin-right: 0;
	}

	h2#logo {
		margin-bottom: 5px;
		margin-top: 5px;
		margin-right: 0;
		min-width: 200px;
		width: 200px;
	}

	#header {
		padding-top: 0;
	}

	.wrapper {
		padding-left: 4%;
		padding-right: 4%;
	}

	.places {
		display: block;
	}

	#main .places figure {
		aspect-ratio: unset;
		margin-bottom: 2em;
	}

	#main .places figure img {
		max-height: unset;
		max-width: 20em;

	}

	#main .places .wp-block-column .wp-block-buttons {
		max-width: 20em;
	}

	.mobile {
		display: block;
		font-size: .7em;
		padding-bottom: 0
	}

	.teamkachel {
		max-width: 40vw;
	}

	.teamkachel h3 {
		font-size: 1.2em;
	}

.leistungen .kachel {
	flex-basis: 47%;
}

	#mobilemenu {
		position: fixed;
		z-index: 1000;
		width: 60px;
		height: 60px;
		right: 0px;
		top: 0px;
		font-size: 1px;
		color: #000;
		cursor: pointer;
		background: url(images/burger.svg) no-repeat center center transparent;
		background-size: 70%;
		border: none;
	}

	.active #mobilemenu {
		background: url(images/close.svg) no-repeat center center transparent;
		background-size: 45%;
	}

	.active #navi {
		left: 0px;
		right: 0px;
	}

	#menu-hauptmenu {
		display: block;
	}

	#navi {
		position: fixed;
		top: 60px;
		left: 100%;
		bottom: 0px;
		transition: all .5s ease-out;
		background-color: var(--dunkelblau);
		width: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		padding-left: 6%;
		padding-right: 6%;
		font-size: calc(12px + 2.4vw);
		line-height: 1.3em;
		margin-top: 0;
		padding-top: 5vh;
	}

	#menu-hauptmenu li:nth-child(-n+3),
	#menu-hauptmenu li:nth-child(4) {
		margin-right: 0;
	}

	#navi .impress:after {
		content: none;
	}

	#navi .impress {
		margin-top: 1em;
	}

	#navi ul li {
		display: block;
		text-align: center;
		;
		padding-bottom: .5em;
		margin-left: 0;
	}

	#navi li a {
		color: var(--weiss);
		display: block;
		border: none;
	}

	#navi li:hover>a {
		border: none;
		color: var(--hellblau);
	}

	#main {
		padding-top: 2em;
	}

	.home #main {
		padding-top: 1em;
	}

	.hd-widget {
		display: none;
	}

	.hero .wp-block-column:last-child {
		margin-bottom: 0;
	}
		.teamfilter button {
		padding: .5em 1em;
		margin: .25em;
	}
}

@media only screen and (max-width: 499px) {
	.leistungen .kachel {
	flex-basis: 100%;
}
	#navi nav {
		float: none;
		width: 100%;
		margin-bottom: 1em;
	}

	.teamkachel {
		margin-left: 2%;
		margin-right: 2%;
		max-width: 46%;
		font-size: .7em;
	}

	.teamgrid {
		margin-left: -2%;
		margin-right: -2%;
	}

	.teamkachel a {
		padding: .1em;
	}

	.overlay-loc {
		padding: 2% 15%;
	}

	#main .footerlogo {
		max-width: 60%;
		margin: auto;
	}

	.leistungen-swiper .swiper-wrapper {
		display: block;
	}

	.leistungen-swiper .swiper-slide {
		width: 100% !important;
		margin-bottom: 20px;
	}

	#main .swiper-pagination,
	.swiper-button-prev,
	.swiper-button-next {
		display: none
	}

	#main .leistungen-swiper {
		margin: 0;
		padding: 1.5em;
		padding-left: 1em;
		width: 100vw;
		margin-left: 50%;
		transform: translateX(-50%);
	}

	.leistungen-swiper .swiper-slide {
		padding: 1.5em
	}

}
/* OPERATIONEN SELECTOR minified */
.op-filter{margin-bottom:2em}.op-filter button,.teamfilter button{margin:.5em;border:none}.op-filter button.active,.teamfilter button.active{background:var(--dunkelblau);color:#fff}.arry{position:absolute;margin-left:-1.2em;padding-top:.3em;font-family:swiper-icons;display:inline-block;width:1em;height:1.4em;margin-right:.3em;font-size:.7em;line-height:1.1em;vertical-align:middle;text-transform:lowercase}.nase .op-kachel-inner{background:url(images/ico-nase.svg) right .5em bottom .5em/auto 4em no-repeat #f2f2f2}.ohr .op-kachel-inner{background:url(images/ico-ohr.svg) right .5em bottom .5em/auto 4em no-repeat #f2f2f2}.hals .op-kachel-inner{background:url(images/ico-hals.svg) right .5em bottom .5em/auto 4em no-repeat #f2f2f2}.op-grid{font-size:clamp(16px, .9em, 22px)}.op-kachel{margin-left:0;margin-right:1%;width:32%;margin-bottom:1%}#main .op-kachel button{font-size:1em;margin-top:1em}.op-kachel a{text-decoration:none;color:inherit}.op-kachel-inner{padding:1em 4em 1em 2em;text-align:left;cursor:pointer;transition:.2s;min-height:7em;line-height:1.3em}.op-kachel-inner strong{display:inline-block;text-transform:uppercase}.op-kachel-inner strong:last-of-type{padding-bottom:.5em}.op-kachel-inner:hover{background-color:var(--hellblau);box-shadow:var(--shadow)}#main .wp-block-column:has(.op-grid),#main .wp-block-columns:has(.op-grid),#main .wp-block-group:has(.op-grid){position:static}.op-popup{display:flex;background:rgba(255,255,255,.8);z-index:-1;position:fixed;top:0;left:0;width:100vw;height:100vh;flex-direction:column;justify-content:center;align-items:center;opacity:0;transition:.3s ease-out}.op-popup.active{z-index:9999999;opacity:1}.op-popup-overlay{position:fixed;inset:0;z-index:-1}.op-popup-content{box-sizing:border-box;width:60vw;max-width:60em;max-height:80vh;min-height:40vh;background:#fff;padding:2em;box-shadow:0 10px 40px rgba(0,0,0,.3);font-size:clamp(14px, 1em, 20px);line-height:1.4em;overflow-y:auto;text-align:justify;text-align-last:left;hyphens:auto}.op-popup-content h2{font-weight:600;padding-bottom:1em;line-height:1.3em}.op-popup-content p{padding-bottom:1.4em}.op-popup-scroll{overflow-y:auto;max-height:70vh;padding-right:.5em}.op-popup-close{position:absolute;top:10px;right:15px;font-size:28px;border:none;background:0 0;cursor:pointer}body.popup-open{overflow:hidden}@media only screen and (max-width:800px){.op-kachel,.op-popup-content{width:100%}.op-grid{font-size:1.1em}.op-kachel{margin-right:0}.op-kachel-inner{min-height:3em;text-align:left;padding:1em 1em 1em 1.5em}}