/*   
Theme Name: Christophorus 2025
Theme URI: http://www.jareksierpinski.de
Description: Screen-Design by Nina Polumsky. Programming: Jarek Sierpinski
Author: Jarek Akara
Author URI: http://www.jareksierpinski.de
*/

:root {
	--schrift: #A83F35;
	--rot: #A83F35;
	--orange: #F5A700;
	--seitenfarbe: #ffffff;
	--weiss: #ffffff;
	--font: 'Jost', Arial, Verdana, sans-serif;
	--linkespalte: 20.5vw;
	--paddingmitte: 4.5vw;
}

* {
  box-sizing: border-box;
}

/* SCHRIFTEN FONTS -------------------------------------------------------------- */

/* jost-regular - latin */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Jost';
	font-style: normal;
	font-weight: 400;
	src: url('fonts/jost-v18-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* jost-500 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Jost';
	font-style: normal;
	font-weight: 500;
	src: url('fonts/jost-v18-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }
  /* jost-600 - latin */
  @font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Jost';
	font-style: normal;
	font-weight: 600;
	src: url('fonts/jost-v18-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
  }


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

body {
	color: var(--schrift);
	font-family: var(--font);
	font-size: 1vw;
	line-height: 1.4em;
	font-weight: 400;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position-y: 13vw;
}

/* Breiter als ein Quadrat (z. B. 16:9, 21:9, 2:1) */
@media (min-aspect-ratio: 1/1) {
  body {
	background-size: auto 72vw;
  }
}

/* Schmaler als ein Quadrat (z. B. 9:16, 3:4, 1:1) */
@media (max-aspect-ratio: 1/1) {
  body {
	background-size: auto 90vh;
  }
}

#mobilenav,
#navi-mb {
	display: none;
}

a {
	color: var(--schriftfarbe);
	text-decoration: none;
}

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

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

#footer .wp-block-columns {
	margin-bottom: 0 !important;
}

strong {
	font-weight: 600;
}

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

.wrapper,
.subfooter {
	width: 100%;
	max-width: 1980px;
	padding-left: 30px;
	padding-right: 30px;
	box-sizing: border-box;
	margin: auto;
	text-align: left;
}

#wrap {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	position: relative;
}

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

#header {
	height: 23vw;
	background: url(images/header.svg) no-repeat center bottom;
	background-size: 100% auto;
	font-size: 1.35em;
	padding-top: 3.6vw;
	box-sizing: border-box;
}

#logo {
	position: absolute;
	z-index:2;
	left: 3vw;
	width: 17.4vw;
}
.home #logo {
	background: url(images/Christophorus_Logo_Startseite.svg) no-repeat center center;
	width: 65vw;
	left: -1.5vw;
	top: -1vw;
}

.home #logo img {
	aspect-ratio: 2;
	opacity: 0;
}

#logo a {
	display: block;
	box-sizing: border-box;
	font-size: 0px;
	overflow: hidden;
}



#logo img, #claim img {
	max-width: 100%;
	width: 100% !important;;
}

#claim {
	position: absolute;
	z-index: 3;
	margin-top: -0.5vw;
	right: 2.3vw;
	width: 30.5vw
}

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

h1.pagetitle {
	display: none;
}

#main h2 {
	text-transform: uppercase;
	font-size: 1.5em;
	letter-spacing: .07em;
	padding-bottom: .9em;
	line-height: 1.2em;
	hyphens: auto;
	padding-top: 1em;
}

#main h2:first-of-type {
	padding-top: 0;
}
.home #main h2:first-of-type {
	color: var(--weiss);
	font-size: 3.2em;
	line-height: 1.2em;
	padding-top: 7.8vw;	
}
.home #main {
	flex-basis: 80vw;
	padding-right: 2vw;
	padding-left: 3.9vw
}
h4.blocktitle {
	text-transform: uppercase;
}

/* MAIN -------------------------------------------------------------- */
.contentwrapper {
	display: flex;
}
.slider-background {
                position: absolute;
                top: 13vw;
                left: 0;
                width: 100%;
                height: calc(100% - 13vw);
                z-index: -1; /* Hinter allen Inhalten */
}
#main .swiper-wrapper {
	position: absolute;
	top: 0;
	bottom: 0;
	height: auto;
}
#main {
	margin-top: -1.18vw;
	font-size: 1.25em;
	line-height: 1.4em;
	box-sizing: border-box;
	flex-basis: 46.5vw;
	padding-left: var(--paddingmitte);
	padding-right: 4.5em;
	padding-bottom: 4em;
	position: relative;
	-webkit-animation: fadein 3s; /* Safari, Chrome and Opera > 12.1 */
    -moz-animation: fadein 3s; /* Firefox < 16 */
    -ms-animation: fadein 3s; /* Internet Explorer */
    -o-animation: fadein 3s; /* Opera < 12.1 */
    animation: fadein 3s;
}
.page-kontakt #main {
	padding-bottom: 3.6em;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#main a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

.contentwrapper img {
	max-width: 100%;
	height: auto !important;
}

#main p, #main ul {
	padding-bottom: 1.3em;

}

#main ul {
	list-style:disc;
	padding-left: 1em;
}

#main .parent-page-link {
	display: block;
	position: absolute;
	right: 4vw;
	top: .3em;
	width: 1.2em;
	height: 1.2em;
	overflow: hidden;
	color: transparent;
	background: url(images/close-red.svg) no-repeat center center;
	background-size: contain;
}

.page-projekte #main .parent-page-link {
	display: none
}

#sidebar {
	flex-basis: var(--linkespalte);
	padding-top: 8vw;
	padding-bottom: 17vw;
	position: relative;
	z-index: 5;
}

#sidebar #navi {
	padding-left: 3.2vw;
}

#rightbar {
	padding-top: 5vw;
	flex-basis: 32.5vw;
}
	#rightbar.hochbild {
position: relative;
	}
#rightbar img {
	-webkit-mask-image: url(images/maske-rechts.svg);
	mask-image: url(images/maske-rechts.svg);
	mask-repeat: no-repeat;
	aspect-ratio: 1;
	object-fit: cover;
}
#rightbar.hochbild img {
	-webkit-mask-image: url(images/maske-gross.svg);
	mask-image: url(images/maske-gross.svg);
	mask-repeat: no-repeat;
	aspect-ratio: .65;
	object-fit: cover;
	position: absolute;
}

/* Blockquote right double quotes -------------------------------------------------------------- */

.blockquote .quote:after {
	content: "";
	position: absolute;
	border: 2px solid #fff;
	border-radius: 0 50px 0 0;
	width: 60px;
	height: 60px;
	bottom: -62px;
	left: 50px;
	border-bottom: none;
	border-left: none;
	z-index: 3;
}

.blockquote .quote:before {
	content: "";
	position: absolute;
	width: 80px;
	border: 6px solid var(--seitenfarbe);
	bottom: -3px;
	left: 50px;
	z-index: 2;
}


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

#navi {
	text-align: left;
	font-size: 1.95em;
	line-height: 1em;
	text-transform: uppercase;
	letter-spacing: .07em;
}

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

#navi ul li {
	display: block;
	vertical-align: top;
	position: relative;
	text-decoration: none;
	padding-bottom: .3em;
	transition-duration: 0.5s;
}

.home #navi a {
color: var(--weiss);
}

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

#navi ul li ul {
padding-left: .55em;
display: none;
padding-top: .3em;
margin-bottom: -.3em;
}
#navi ul li ul {
	
}

#navi ul li:hover>ul,
#navi ul li:focus-within>ul,
#navi ul li ul:hover,
#navi ul li ul:focus {
}

#navi ul li.current-page-item ul,
#navi ul li.current-page-ancestor ul,
#navi ul li.current-menu-ancestor ul,
#navi ul li.current-menu-item ul,
#navi ul li.current-menu-parent ul {
	display: block;
}

#navi ul li ul li:hover {

}

#navi li:hover>a,
#navi ul ul :hover>a,
#navi ul a.mPS2id-highlight {

}

#navi ul li.current-page-item>a,
#navi ul li.current-page-ancestor>a,
#navi ul li.current-menu-ancestor>a,
#navi ul li.current-menu-item>a,
#navi ul li.current-menu-parent>a {
	text-decoration: underline;
	text-decoration-thickness: .08em;
}

* html #navi ul li.current_page_item a,
* html #navi ul li.current_page_ancestor a,
* html #navi ul li.current-menu-ancestor a,
* html #navi ul li.current-menu-item a,
* html #navi ul li.current-menu-parent a,
* html #navi ul li a:hover {

}


/* FOOTER -------------------------------------------------------------- */

#footer {
	display: flex;
	margin-top: auto;
}

#footer li {
	display: inline-block;
	font-size:1.45em;
	letter-spacing: .2em;
}
#footer li:first-child:after {
	content: '|';
	padding-left: .14em;
}

#footernavi {
	padding-left: var(--paddingmitte);
	padding-top: 9.4vw;
	box-sizing: border-box;
}

#footer,
#footer a {
	color: var(--rot);
}

#footer a:hover {
	border-bottom: 1px solid transparent;
	border-color: var(--rot);
}

#footer #leftimage {
	width: var(--linkespalte);
	position: relative;
	height: 15vw;
}

#leftimage img {
	max-width: 100%;
	height: auto;
	-webkit-mask-image: url(images/maske-links.svg);
	mask-image: url(images/maske-links.svg);
	mask-repeat: no-repeat;
	aspect-ratio: .77;
	position: absolute;
	left: 0;
	right: 0;
	object-fit: cover;
	margin-top: 5vw
}

#footer {
	background: url(images/footer.svg) no-repeat center top;
	background-size: 100% auto;
	height: 23vw;
}



/* =Global Elements -------------------------------------------------------------- */


/* LEAFLET MAP -------------------------------------------------------------- */
.leaflet-marker-icon {
	width: 0px !important;
	height: 0px !important;
	padding: 20px;
	padding-top: 30px;
	margin-top: -48px !important;
	margin-left: -20px !important;
	background: url(images/marker.svg) no-repeat center center;
	background-size: contain;
}

.map_block_leaflet {
	margin-bottom: 60px;
}

/* HR HORIZONTAL RULE -------------------------------------------------------------- */

hr,
#main .wp-block-separator {
	background-color: var(--weiss);
	border: 0;
	clear: both;
	height: 1px;
	margin-bottom: 0;
	border: none;
}

#main hr,
#main .wp-block-separator {
	margin-top: 2.5em;
	margin-bottom: 2.5em;
}

/* FORMULAR ----------------------------------------------------------------*/

#main div.wpforms-container-full .wpforms-field-label {
	color: var(--rot);
	font-weight: normal;
	float: left;
	display: block;
	width: 20%;
}
#main .wpforms-field-container input[type=text], 
#main .wpforms-field-container textarea, 
#main .wpforms-field-container input[type=email],
#main .wpforms-field-container input[type=number] {
	width: 80%;
}
:root {
	--wpforms-field-background-color: #f2e0da;
	--wpforms-field-border-radius: 0;	
	--wpforms-field-text-color: var(--rot);
	--wpforms-label-color: var(--rot);
	--wpforms-field-border-size: 0;
	--wpforms-field-size-font-size: 1em;
	--wpforms-button-background-color-alt: var(--rot);
	--wpforms-button-border-radius: 0;
}
div.wpforms-container-full input[type=checkbox], div.wpforms-container-full input[type=radio] {

}
#main .wpforms-field-container ul {
	padding-left: 0
}

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

body .wp-block-button__link {
	background-color: var(--auszeichnung);
	font-weight: 700;
	font-size: .8em;
	border-radius: 0;
	margin-top: 2em;
	padding: .5em 1.4em;
	margin-bottom: 1em;
}

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: 1200px) {
	body.home {
	background-size: auto 100%;
		background-attachment:fixed;
		background-position-y: 0;
	}
	#main {
		font-size: 16px; 
		flex-basis: 50vw;
		padding-right: 3.5em;
	}
	.home #main h2 {
		font-size:2.4rem;
	}
	#rightbar {
		flex-basis: 30vw;
		padding-top: 10vh;
	}
}

@media only screen and (max-width: 1000px) {
	#navi {
		font-size: 2.5em
	}
	#footer {
		font-size: 1.3em
	}
}

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

	.mobile,
	#navi ul li.mobile {
		display: block;
	}
	#mobilenavi {
		max-height: 0px;
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		top: 50px;
		z-index: 1000;
		font-size: 20px;
		line-height: 1.3em;
		left: 0;
		right: 0;
		background-color: rgba(255,255,255,.9);
		text-transform: uppercase;
		transition: all .3s ease-out;
	}
	.home #mobilenavi {
		top: 22vw;
	}
	#mobilenavi .menu-header {
		padding: 20px 5%;
	}
	#mobilenavi a:hover {
		text-decoration: underline;
	}
	.active #mobilenavi {
	 max-height: 100%;
	}
	#mobilemenu {
		position: fixed;
		border: none;
		cursor: pointer;
		z-index: 1000;
		width: 50px;
		height: 50px;
		right: 0px;
		top: 0px;
		font-size: 1px;
		color: #000;
		cursor: pointer;
		background: url(images/burger.svg) no-repeat center center transparent;
		background-color: var(--rot);
	}
	.active #mobilemenu {
		background: url(images/close.svg) no-repeat center center transparent;
		background-color: var(--rot);
	}
	.active #navi {
		left: 0px;
		right: 0px;
	}
	#navi {
		position: fixed;
		top: 50px;
		left: 100%;
		bottom: 0px;
		transition: all .5s ease-out;
		background-color: var(--headerfarbe);
		width: 100%;
		box-sizing: border-box;
		padding-top: 5vh;
		overflow-y: auto;
		padding-left: 4%;
		padding-right: 4%;
        font-size: calc(12px + 2.4vw);
		line-height: 1.3em;
	}
	#navi ul li {
		display: block;
		text-align: left;
		padding-bottom: .5em;
		margin-left: 0;
	}
	#navi li a {
		color: var(--weiss);
		display: block;
	}
	#logo {
		left: 50vw;
		transform: translateX(-50%);
	}
	#header {
	height: 33vw;
		padding-top: 6vw;
		background-image: url(images/header-mob.svg);
		margin-bottom: 35vw;
	}
	.home #header {
		height: 78vw;
		background-image: url(images/header-home-mob.svg);
		margin-bottom: 20vw;
	}
	#claim {
		display: none;
	}
	#logo {
		width: 40vw;
	}
	#main h2 {	   
	font-size: 1.3em;
		overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
	}
	.home #logo {
		width: 101vw;
		height: 100vw;
		top: 2vw;
		transform: none;
		background: url(images/Christophorus_Logo_Startseite-mob.svg) no-repeat center center;
		left: -1.5vw;
	}
	.home #main {
		box-sizing: border-box;
		flex-basis: 100%;
		padding: 0 5%;
	}
	.home #main h2:first-of-type {
		font-size: 7.7vw;
	}

	#sidebar, #footer #leftimage, #footer #footernavi {
		display: none;
	}
	#main {
		flex-basis: 100%;
		box-sizing: border-box;
		padding: 0 5%;
		font-size: 16px;
	}
	.contentwrapper {
			flex-wrap: wrap;
	}
	#rightbar {
		flex-basis: 100%;
		padding-top: 2em;
	}
	#footer {
		background-image: url(images/footer-mob.svg);
		height: 25vw;
		display: none;
	}
	.home #footer {
		display: block;
	}
	#rightbar img, #rightbar.hochbild img {
	-webkit-mask-image: url(images/maske-rechts-mob.svg);
	mask-image: url(images/maske-rechts-mob.svg);
	mask-repeat: no-repeat;
	aspect-ratio: 1.44;
	object-fit: cover;
	background-color: var(--orange);
}

body {
	background-size: cover;
}
.slider-background {
	top: 55vw;
	height: calc(100% - 55vw);
}
}