@font-face {
	font-family: 'Bodoni Moda';
	src: url('../inc/fonts/bodoni-moda-normal-400.woff2') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Bodoni Moda';
	src: url('../inc/fonts/bodoni-moda-normal-700.woff2') format('woff');
	font-weight: 700;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../inc/fonts/montserrat-normal-400.woff2') format('woff');
	font-weight: 400;
	font-style: normal;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../inc/fonts/montserrat-normal-700.woff2') format('woff');
	font-weight: 700;
	font-style: normal;
}

/* font import then variables */
:root {
	--white: #fafafa;
	--light: #F4F0ED;
	--lightgrey: #E1DDDA;
	--grey: #BFBCBB;
	--gold: #D1A368;
	--brown: #615B59;
	--brown2: #98887F;
	--dark: #333;
}

/* .container { border-left: 2px dotted red; border-right: 1px dotted red; }
	.container .row { border-left: 1px dashed green; border-right: 1px dashed green; }
		.container .row > div { border-left: 1px solid rgba(255,255,255,0.2); border-right: 1px solid rgba(255,255,255,0.2); } */

body {
	font-family: 'Montserrat', sans-serif;
	color: var(--brown);
	font-size: 16px;
	line-height: 135%;
	font-weight: 400;
}

a {  transition: all 0.5s; text-decoration: none; color: var(--brown); }
p { line-height: 150%; padding: 0 0 30px; margin: 0; }
p:empty { display: none; }
b, strong { font-weight: bold; }
img { max-width: 100%; height: auto; }
h1,h2,h3,h4 { font-family: 'Bodoni Moda', serif; }
	h1 { font-size: 36px; text-align: center; padding: 20px 0; margin: 0; }
	h2 { font-size: 42px; font-weight: 700; padding: 0 0 30px; text-transform: uppercase; color: var(--gold); text-align: center; }
		h2:after { content: ''; width: 200px; height: 1px; background: var(--brown); display: block; margin: 30px auto; }
	h3 { font-size: 30px; }
	h4 { font-size: 24px; }
	h5 { font-size: 15px; }
blockquote { font-size: 18px; }
.hidden { display: none; }

.post-password-form {}
	.post-password-form p { padding: 0 0 30px; display: flex; justify-content: center; align-items: center; }
	.post-password-form label { display: flex; justify-content: center; align-items: center; gap: 30px; }
	.post-password-form input[type="submit"] { float: none; }

/* HEADER */

.flex { display: flex; flex-direction: row; justify-content: space-between; }

header { aspect-ratio: 2 / 1; background-size: cover; position: relative; }
	header .container { max-width: 100%; height: 100%; }
	header .container .row { height: 100%; text-align: center; padding: 100px; display: flex; justify-content: center; align-items: flex-end; }
		header .navigation.fix { top: 30px; opacity: 1; }
		header .navigation {
			position: fixed; opacity: 0; z-index: 99999; display: table; top: -100px; left: 0; width: 100%; text-align: center; transition: all 0.5s;
		}
		header .navigation a { color: var(--white); padding: 5px 15px; font-size: 14px; text-transform: uppercase; transition: all 0.5s; }
			header .navigation a:after {
				content: ''; width: 4px; height: 4px; border-radius: 4px; transform: translate(15px, -3px); display: inline-block; background: var(--white);
			}
			header .navigation a:last-child:after { display: none; }
			header .navigation:hover a { opacity: 0.25; }
			header .navigation a:hover { opacity: 1; }

	header .navigation.sticky { background: #fff ;top: 0; box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); padding: 20px 0; opacity: 1; }
		header .navigation.sticky a { color: var(--dark); }

	header p { color: var(--white); text-transform: uppercase; letter-spacing: 10px; font-size: 18px; }
	header h4 { color: var(--white); padding: 30px 0; }
		header h4:before, header h4:after { content: ''; width: 100px; height: 1px; background: var(--white); display: inline-block; margin: 7.5px 15px; }
	header h4 + a {
		color: var(--white); padding: 12px 24px; border: 1px solid; border-radius: 5px; margin: 10px 0; display: inline-block; text-transform: uppercase;
		animation: pulse2 2s infinite;
	}
	header a b { font-size: 18px; display: block; }
	header a span { font-size: 12px; display: none; }
	header h4 + a:hover { color: var(--gold); }

	@keyframes pulse2 {
		0% { transform: scale3d(1, 1, 1); }
		60% { transform: scale3d(1, 1, 1); }
		80% { transform: scale3d(1.2, 1.2, 1.2); }
		100% { transform: scale3d(1, 1, 1); }
	}

body:not(.home) header { background-color: var(--gold); aspect-ratio: auto; }
body:not(.home) header:before {
	content: ''; background-image: url(../img/bg_marble.jpg); background-size: cover; width: 100%; height: 100%; position: absolute; mix-blend-mode: multiply;
}
body:not(.home) header .container { position: relative; }
body:not(.home) header .container .row { padding: 90px 30px 20px; }
body:not(.home) header img { height: 75px; }
body:not(.home) header p { display: none; }
body:not(.home) header h4 + a { display: none; }
body:not(.home) header h4 + a:hover { color: var(--dark); }

.main_content p a { font-weight: bold; }
.main_content p a:hover { color: var(--gold); }

.page_title { background: var(--lightgrey); margin: 0 0 30px; }
#upload-form { display: flex; justify-content: space-around; background: var(--white); border: 1px solid var(--light); margin: 10px 0; }
	#upload-form input { background: #f0f0f0; font-size: 14px; width: 25%; color: var(--dark); }
	#upload-form input::placeholder { color: var(--grey); }
	#upload-form input[type="file"] { line-height: 36px; }
.fgallery { padding: 0 0 30px; }
	.fgallery h5 { display: table; text-transform: uppercase; margin: -10px auto 0; background: #fff; padding: 0 10px; }
	.fgallery .gallery { border: 1px solid var(--grey); border-radius: 5px; margin: 10px 0; }
		.fgallery .gallery div { --fgc: 6; --fgg: 10px; padding: 30px; gap: var(--fgg); display: flex; flex-wrap: wrap; }
			.fgallery .gallery div a { width: calc(100% / var(--fgc) - (var(--fgc) - 1) * var(--fgg) / var(--fgc)); }
				.fgallery img { aspect-ratio: 1 / 1; object-fit: cover; }
	.fgallery .pending {
		border: 1px solid var(--grey); border-radius: 5px; margin: 10px 0; padding: 10px; text-align: center; font-size: 14px; color: var(--grey); background: var(--white);
	}

/* HOME */

body.home section { min-height: 90vh; overflow: hidden; }
	body.home section .container {}
		body.home section .container .row { padding: 100px 150px; }

section#ablauf-und-ortlichkeiten {}
    section#ablauf-und-ortlichkeiten .wp-block-column {
    	text-align: center; animation: fadeInUp 0.5s forwards; animation-delay: calc(sibling-index() * 0.5s); opacity: 0;
    }
	section#ablauf-und-ortlichkeiten .wp-block-column h4 {
		font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 18px; text-transform: uppercase; color: var(--gold);
	}
    section#ablauf-und-ortlichkeiten .wp-block-column p a { font-weight: 300; padding: 5px 0 0; display: block; font-size: 14px; }
    section#ablauf-und-ortlichkeiten .wp-block-columns + p { text-align: center; }
	section#ablauf-und-ortlichkeiten .agallery { gap: 50px; display: flex; flex-wrap: wrap; padding: 100px; flex-direction: row; }
	section#ablauf-und-ortlichkeiten .agallery figure { margin: 0 0 5px; width: calc(50% - 25px); }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(1) { width: 55%; transform: translateY(150px); }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(2) { width: 35%; }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(3) { width: 75%;  transform: translate(150px, 50px); }
	section#ablauf-und-ortlichkeiten figure:last-child:after {
		content: ""; display: block; background: url(../img/circle.svg); background-size: contain; background-repeat: no-repeat; mix-blend-mode: multiply;
		width: 270px; height: 270px; position: absolute; top: 70px; left: -200px; animation: rot 30s infinite; animation-timing-function: linear;
	}
	figure a { overflow: hidden; display: block; }
	figure a img { transition: all 0.5s; }
	figure a:hover img { transform: scale(1.1); }
	figcaption { width: 100%; padding: 5px; text-align: right; color: var(--gold); font-family: 'Bodoni Moda', serif; background: #fff; position: relative; }
	@keyframes rot {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

section#anmeldung--rsvp { background-size: 30vw auto; background-repeat: no-repeat;  position: relative; border: 1px solid #be9f78; margin: 0 50px 50px; }
section#anmeldung--rsvp .container .row { padding: 150px; }
section#anmeldung--rsvp:before {
	content:''; width: 100%; height: 100%; transform: rotate(180deg); display: block; z-index: 1; position: absolute; background-repeat: no-repeat;
	background-image: url(../../../uploads/2026/02/bg_corner.jpg); background-size: 30vw auto; background-position: top left;
}
section#anmeldung--rsvp h2 { text-align: left; }
section#anmeldung--rsvp h2:after { margin: 30px 0; }
section#anmeldung--rsvp hr { width: 100%; margin: 30px 0; }
section#anmeldung--rsvp .container { position: relative; z-index: 2; }

section#hinweise-fur-den-abend { text-align: center; background-size: cover; background-position: center; margin: 50px; border: 1px solid #e0d9c8; }
	section#hinweise-fur-den-abend h2 { color: var(--brown); text-align: center; }
	section#hinweise-fur-den-abend h2:before {
		content: ""; display: block; background: url(../img/logo.svg); background-size: contain; background-repeat: no-repeat; background-position: center;
		width: 240px; height: 240px; margin: 0 auto 50px;
	}
	section#hinweise-fur-den-abend li { list-style: none; }
	section#hinweise-fur-den-abend li:before { content: ' - '; }

section#wunschzettel { background-size: 20vw auto; background-repeat: no-repeat; text-align: center; border: 1px solid #dfd7c1; margin: 50px; }

section#ansprechpersonen {}
	section#ansprechpersonen h3 { font-size: 24px; font-weight: bold; margin: 0 0 30px; }
	section#ansprechpersonen h4 { color: var(--gold); }
	section#ansprechpersonen a[href^="mailto:"] { font-weight: 400; font-size: 14px; }
	section#ansprechpersonen .row { padding: 50px 100px; }
	
	section#ansprechpersonen .row figure:nth-of-type(3):before {
		content: ""; display: block; background: url(../img/circle.svg); background-size: contain; background-repeat: no-repeat; width: 240px; height: 240px;
		position: absolute; bottom: -120px; left: -120px; animation: rot 30s infinite; animation-timing-function: linear; mix-blend-mode: multiply;
	}
	section#ansprechpersonen {	--cols: 3; --gap: 30px; }
		section#ansprechpersonen .agallery { gap: var(--gap); display: flex; flex-wrap: wrap; }
		section#ansprechpersonen .agallery figure { width: calc(100% / var(--cols) - (var(--cols) - 1) * var(--gap) / var(--cols)); margin: 0; position: relative; }
	section#ansprechpersonen .wp-block-column figure { width: 100%; text-align: center; }
		section#ansprechpersonen .wp-block-column figure.wp-block-image img { width: 240px; }

/* PAGE */

.result { float: left; padding: 10px 25px; font-size: 15px; }

/* FORM */

form { padding: 30px 0; }
	form p { padding: 0; display: table; }
		form p br:last-child { display: none; }
input[type=text], input[type=email], input[type=submit], input[type=password], input[type=number], select, button {
	min-width: 300px; cursor: text; resize: none; -moz-appearance: none; -webkit-appearance: none; outline: none; float: left; margin-right: 5px;
	border: none; padding: 10px; font-size: 15px; color: var(--brown); background: var(--light); transition: all .5s; border-radius: 3px;
}
textarea {
	width: 100%; cursor: text; resize: none; -moz-appearance: none; -webkit-appearance: none; outline: none; box-shadow: none;
	border: none; padding: 15px; font-size: 15px; color: var(--brown); background: var(--light); min-height: 50px; transition: all .5s;
}

input[type="submit"], button {
	background: var(--gold); font-weight: bold; color: var(--light); border: none; display: table; padding: 10px 25px;
	width: auto !important; cursor: pointer; float: left; font-size: 15px; border-radius: 3px; min-width: 0;
}
input[type="submit"]:hover, button:hover { background: var(--brown); color: var(--light); }

.wpcf7-radio { display: table; }
.wpcf7-radio input[type=radio] { position: absolute; opacity: 0; width: auto; height: 30px; z-index: 999; cursor: pointer; margin-left: -25px; }
.wpcf7-radio span {
	float: left; position: relative; display: inline-block; padding: 0 10px 5px 5px; background: none; border: none;
	text-transform: none; font-size: 14px; width: auto; transition: all 1s; line-height: 100%;
}
.wpcf7-radio input[type=radio] + span:before {
	-webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;
	content: ''; position: absolute; width: 20px; height: 20px; border-radius: 20px;
	border: 5px solid var(--light); margin: -2px 0 0 -25px; box-sizing: border-box; pointer-events: none;
}
.wpcf7-radio input[type=radio]:checked + span { color: var(--gold); }
.wpcf7-radio input[type=radio]:checked + span:before { border: 8px solid var(--gold); }

.partnerset {}
.partnerfields { padding: 30px 0 10px; }
.giftoptions { display: flex; gap: 30px; flex-wrap: wrap; font-size: 15px; }
	.giftoptions label { display: block; width: calc(50% - 25px); }
	.giftoptions label span em, .giftoptions label span a { font-style: normal; font-weight: normal; font-size: 80%; }
	.giftoptions label span em:not(.hidden)  { display: block; text-align: left; text-transform: uppercase; }
	.giftoptions label span a:not(.hidden) { display: block; text-align: left; transition: all 0.5s; }
	.giftoptions label span a:not(.hidden):hover { font-weight: bold; color: var(--dark); }

.giftoptions input[type=radio] { position: absolute; opacity: 0; height: 30px; z-index: 999; cursor: pointer; margin-left: -25px; }
.giftoptions span {
	float: left; position: relative; display: inline-block; padding: 0 0 0 30px; line-height: 100%;
	text-transform: none; font-size: 15px; width: auto; transition: all 1s;
}
.giftoptions input[type=radio] + span:before {
	-webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s;
	content: ''; position: absolute; width: 20px; height: 20px; border-radius: 20px;
	border: 3px solid var(--grey); margin: -2px 0 0 -25px; box-sizing: border-box; pointer-events: none;
}
.giftoptions input[type=radio]:checked + span { color: var(--gold); }
.giftoptions label.disabled input + span { font-weight: bold; }
.giftoptions input[type=radio]:checked + span:before { border: 8px solid var(--gold); }
.giftoptions input[type=radio]:disabled + span { opacity: 0.35; }

/* SWITCHBOX */

.wpcf7-checkbox input[type=checkbox] { opacity: 0; position: absolute; top: 0; left: 0; height: 100%; cursor: pointer; z-index: 999; }
.wpcf7-checkbox input + span { padding: 0 0 0 80px; position: relative; }
.wpcf7-checkbox input + span:after, .wpcf7-checkbox input + span:before { content: ''; position: absolute; left: 0; top: 0; }
.wpcf7-checkbox input + span:after {
	background: #4a5666; width: 100%; height: 100%; width: 60px; height: 30px; border-radius: 15px;
	-webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; z-index: 997; left: 3px; top: -6px;
}
.wpcf7-checkbox input + span:before {
	content: ''; width: 24px; height: 24px; background: #fff; border-radius: 12px; position: absolute; left: 6px; top: -3px;
	display: inline-block; -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; z-index: 998;
}
.wpcf7-checkbox input:checked + span:after { background: var(--gold); }
.wpcf7-checkbox input:checked + span:before { left: 35px; }

/* more form */

.wpcf7-form input { width: 100%;  margin: 0 0 10px; }
.wpcf7-form p b { display: block; width: 100%; padding: 50px 0 0; }
.wpcf7-not-valid-tip { display: block; width: 100%; font-size: 12px; text-align: center; display: table; padding: 10px 0; border-top: 1px solid; margin: 20px 0 0; }
.wpcf7 form.invalid .wpcf7-response-output { border: none; margin: 0;  padding: 0px 20px; font-size: 14px; text-align: center; background: var(--white); }
.wpcf7 form.sent .wpcf7-response-output { border: none; margin: 30px 0 0; padding: 15px; font-size: 14px; text-align: center; background: var(--white); }


/* FOOTER */

footer { padding: 30px; text-align: center; }
footer a { color: var(--grey); font-size: 10px; text-transform: uppercase; font-weight: bold; }
footer a:hover { color: var(--dark); letter-spacing: 5px; }

/* MOBILENAV */

.outer-nav { z-index: 99998; position: fixed; top: 0; right: -100%; width: 75vw; height: 100vh; transition: all 0.5s; overflow: hidden; }
	.outer-nav > .container { z-index: 2; position: relative; padding: 10px; height: 100%; display: flex; justify-content: flex-start; align-items: center; }
body.showmenu .outer-nav { top: 0; right: 0; background: var(--gold); box-shadow: -65vw 0px 50px rgba(0,0,0,0.5); }
	.outer-nav .navigation { padding: 30px; }
	.outer-nav .navigation a { font-family: 'Bodoni Moda', serif; color: var(--white); font-size: 24px; padding: 0 0 20px; display: block; line-height: 120%; }
	.outer-nav .navigation a:hover { color: var(--dark); }

#show-menu { width: 30px; height: 24px; cursor: pointer; z-index: 99999; position: fixed; top: 10px; right: 10px; transition: all 0.5s; }
	#show-menu .menu-icon__cheeckbox {
		display: block; width: 100%; height: 100%; position: relative; cursor: pointer; z-index: 2; -webkit-touch-callout: none; position: absolute; opacity: 0;
	}
	#show-menu div { margin: auto; position: absolute; top: 0; right: 0; left: 0; width: 30px; height: 24px; }
	#show-menu span { position: absolute; display: block; width: 100%; height: 3px; background-color: var(--white); transition: all 0.2s; right: 0; top: 8px; }
		#show-menu span:first-of-type { top: 0px; }
		#show-menu span:last-of-type { top: 16px; }
	#show-menu.dark { transform: scale(0.75); }
		#show-menu.dark span { background: var(--gold); }
	#show-menu.active div span { opacity: 0; background: var(--white) !important; }
	#show-menu.active div span:first-of-type { transform: rotate(45deg); top: 10px; opacity: 1; }
	#show-menu.active div span:last-of-type { transform: rotate(-45deg); top: 10px; opacity: 1; }
  #show-menu a, #show-menu b {
	position: absolute; color: #000; background: #b3d61e; width: 15px; height: 15px; border-radius: 15px; line-height: 15px;
	font-size: 8px; text-align: center; top: 28px; left: 5px; box-shadow: 0 0 10px rgba(0,0,0,0.5); text-decoration: none; z-index: 99999;
  }

/******************** RESPONSIVE ********************/

/* sm - tablet (mobile first) */ @media (min-width: 640px) {}
/* md - tablet landscape or really small desktop screen */ @media (min-width: 768px) {}
/* lg - smaller desktop screen */ @media (min-width: 1024px) {}
/* xl - normal/big desktop screen */ @media (min-width: 1280px) {}
/* 2xl - huge screen or tv */ @media (min-width: 1536px) {}

/* Desktop only */
@media (min-width: 1024px) {

	.desktophide { display: none !important; }
	
}
@media (min-width: 1024px) and (max-width: 1280px) {

	.desktophide { display: none !important; }

}

/* Tablet or small screen */
@media (min-width: 641px) and (max-width: 1023px) {

	.desktophide { display: none !important; }

}

/* Mobile only */
@media (max-width: 640px) {

	.mobilehide { display: none !important; }
	body { font-size: 16px; }
	body.home section .container { padding: 0; }
	body.home section .container .row { padding: 50px 30px; }
	.container .row > div { width: 100%; }
		h2, h3 { font-size: 27px; }
	header { aspect-ratio: 3 / 5; background-position: center; }
		header .container .row { padding: 30px }
			header h4 { font-size: 21px; }
				header h4:before, header h4:after { width: 30px; }
	section#ablauf-und-ortlichkeiten .wp-block-columns .wp-block-column { text-align: center; }
	section#ablauf-und-ortlichkeiten .agallery { gap: 20px; padding: 0 30px; }
		section#ablauf-und-ortlichkeiten .agallery figure { transform: none !important; width: 100% !important; margin: 0; }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(2) { order: 0; }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(1) { order: 1; }
		section#ablauf-und-ortlichkeiten .agallery figure:nth-child(3) { order: 2; }
			figcaption { text-align: center; }
			section#ablauf-und-ortlichkeiten figure:last-child:after { display: none; }
	section#anmeldung--rsvp { margin: 0; border-left: 0; border-right: 0; }
	section#anmeldung--rsvp, section#anmeldung--rsvp:before { background-size: 60vw auto; }
		section#anmeldung--rsvp .container .row { padding: 75px 50px; text-align: center; }
		section#anmeldung--rsvp h2 { text-align: center; }
			section#anmeldung--rsvp h2:after { margin: 30px auto; }
		section#anmeldung--rsvp .partnerset { font-size: 13px; }
		section#anmeldung--rsvp .wpcf7-list-item { margin: 0 0 0 5px; }
		section#anmeldung--rsvp .wpcf7-radio { gap: 15px; display: flex; flex-direction: column; }
		section#anmeldung--rsvp .wpcf7-checkbox input + span { padding: 0 0 0 70px; }
	section#hinweise-fur-den-abend { margin: 15px; }
	section#wunschzettel { margin: 0; border-left: 0; border-right: 0; }
	section#wunschzettel { background-size: 50vw auto; }
		.giftoptions label { width: 100%; text-align: left; }
    		.giftoptions label span { line-height: 125%; }
	input[type=text], input[type=email], input[type=password], input[type=number], select { min-width: 0; width: 100%; margin: 0 0 5px; text-align: center; }
	input[type="submit"] { width: 100% !important; }
    section#ansprechpersonen .row { padding: 50px 30px; }
    	section#ansprechpersonen .agallery {}
    	section#ansprechpersonen .agallery figure { width: 45%; }
    	section#ansprechpersonen .row figure:nth-of-type(3):before { display: none; }
    .fgallery { padding: 30px; }
    .fgallery .gallery div { --fgc: 3; --fgg: 10px; padding: 10px 10px 20px; }
    .fgallery .pending { padding: 20px; line-height: 100%; }
    #upload-form { flex-direction: column; }
    	#upload-form input { width: 100%; }
    	#upload-form button { margin: 5px 0 0; }
    .post-password-form p { flex-direction: column; }
    .post-password-form label { gap: 5px; flex-direction: column; }

}