/*
 * TC Wunderlich Theme – style.css
 * Farbschema:
 *   Dunkelgrau (Header/Footer/Subside): #212224
 *   Schrift auf dunkel:                 #dddddd
 *   Content-Hintergrund:                #f5fafd
 *   Schrift auf hell:                   #2c2e30
 *   Ocker (Akzent/Links/Btn):           #c4a675
 *   Btn-Schrift:                        #212224
 */

/* ---------------------------------------------------------------
   Schriftarten
--------------------------------------------------------------- */
@font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/catamaran-v7-latin-ext_latin-regular.woff2') format('woff2')
}
@font-face {
	font-family: 'Catamaran';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/catamaran-v7-latin-ext_latin-700.woff2') format('woff2')
}

/* ---------------------------------------------------------------
   Reset
--------------------------------------------------------------- */
html, body, div, span, applet, object,
iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, img, ins, kbd, q, s, samp, strike, strong, sub, sup, tt, var, b,
u, i, center, dl, dt, dd, li, fieldset,
form, label, legend, caption,
tfoot, article, aside,
canvas, details, embed, figure, figcaption,
footer, header, hgroup, menu, nav, output, ruby,
section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline
}

/* ---------------------------------------------------------------
   Basis: Body & HTML
--------------------------------------------------------------- */
html, body {
	background-color: #f5fafd;
	min-height: 100%;
	font-family: 'Catamaran', sans-serif;
	color: #2c2e30
}

.actions li {
	list-style: none
}

input::-moz-focus-inner {
	border: 0;
	padding: 0
}

/* ---------------------------------------------------------------
   Basis-Box-Model
--------------------------------------------------------------- */
html {
	box-sizing: border-box
}

*, *:before, *:after {
	box-sizing: inherit
}

/* ---------------------------------------------------------------
   Typografie
--------------------------------------------------------------- */
body, select, textarea {
	color: #2c2e30;
	font-size: 16.5pt;
	font-weight: normal;
	line-height: 1.75
}
	@media screen and (max-width: 1680px) {
		body, input, select, textarea {
			font-size: 13pt
		}
	}
	@media screen and (max-width: 1280px) {
		body, input, select, textarea {
			font-size: 12pt
		}
	}
	@media screen and (max-width: 360px) {
		body, input, select, textarea {
			font-size: 11pt
		}
	}

/* Links in Ocker */
a {
	-moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	-webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	-ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
	transition: color 0.2s ease, border-bottom-color 0.2s ease;
	border-bottom: dotted 1px rgba(196, 166, 117, 0.45);
	color: #c4a675;
	text-decoration: none
}
	a:hover {
		border-bottom: solid 1px #c4a675;
		color: #d4b885
	}

strong, b {
	color: #1a1b1d;
	font-weight: bold
}

em, i {
	font-style: italic
}

p {
	margin: 0 0 2em 0
}

h1, h2, h3, h4, h5, h6 {
	color: #1a1b1d;
	font-weight: bold;
	line-height: 1.5
}
	h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
		color: inherit;
		text-decoration: none
	}

h1 { font-size: 2.75em }
h2 { font-size: 1.75em }
h3 { font-size: 1.1em }
h4 { font-size: 1em }
h5 { font-size: 0.8em }
h6 { font-size: 0.6em }

@media screen and (max-width: 736px) {
	h1 { font-size: 3em }
	h2 { font-size: 1.75em }
	h3 { font-size: 1em }
	h4 { font-size: 0.8em }
	h5 { font-size: 0.6em }
	h6 { font-size: 0.6em }
}

code {
	background: rgba(33, 34, 36, 0.05);
	border-radius: 0.25em;
	border: solid 1px rgba(196, 166, 117, 0.35);
	font-family: "Courier New", monospace;
	font-size: 0.9em;
	margin: 0 0.25em;
	padding: 0.25em 0.65em
}

pre {
	-webkit-overflow-scrolling: touch;
	font-family: "Courier New", monospace;
	font-size: 0.9em;
	margin: 0 0 2em 0
}
	pre code {
		display: block;
		line-height: 1.75em;
		padding: 1em 1.5em;
		overflow-x: auto
	}

.text-center {
	text-align: center
}

/* ---------------------------------------------------------------
   Buttons – Ocker-Hintergrund, Dunkelgrau-Schrift
--------------------------------------------------------------- */
input[type="button"],
button,
.button {
	-moz-appearance: none;
	-webkit-appearance: none;
	-ms-appearance: none;
	appearance: none;
	-moz-transition: background-color 0.2s ease, border-color 0.2s ease;
	-webkit-transition: background-color 0.2s ease, border-color 0.2s ease;
	-ms-transition: background-color 0.2s ease, border-color 0.2s ease;
	transition: background-color 0.2s ease, border-color 0.2s ease;
	background-color: #c4a675;
	border: solid 1px !important;
	border-color: rgba(196, 166, 117, 0.6) !important;
	border-radius: 3em;
	color: #f5fafd !important;
	cursor: pointer;
	display: inline-block;
	font-size: 0.7em;
	font-weight: bold;
	letter-spacing: 0.25em;
	line-height: 4.75em;
	outline: 0;
	padding: 0 3.75em;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap
}
	input[type="button"]:after,
	button:after,
	.button:after {
		-moz-transform: scale(0.25);
		-webkit-transform: scale(0.25);
		-ms-transform: scale(0.25);
		transform: scale(0.25);
		pointer-events: none;
		-moz-transition: opacity 0.2s ease, -moz-transform 0.2s ease;
		-webkit-transition: opacity 0.2s ease, -webkit-transform 0.2s ease;
		-ms-transition: opacity 0.2s ease, -ms-transform 0.2s ease;
		transition: opacity 0.2s ease, transform 0.2s ease;
		background: #d4b885;
		border-radius: 3em;
		content: '';
		height: 100%;
		left: 0;
		opacity: 0;
		position: absolute;
		top: 0;
		width: 100%
	}
	input[type="button"]:hover,
	button:hover,
	.button:hover {
		background-color: #d4b885;
		border-color: rgba(196, 166, 117, 0.9) !important
	}
		input[type="button"]:hover:after,
		button:hover:after,
		.button:hover:after {
			opacity: 0.12;
			-moz-transform: scale(1);
			-webkit-transform: scale(1);
			-ms-transform: scale(1);
			transform: scale(1)
		}
		input[type="button"]:hover:active,
		button:hover:active,
		.button:hover:active {
			border-color: #c4a675 !important
		}
			input[type="button"]:hover:active:after,
			button:hover:active:after,
			.button:hover:active:after {
				opacity: 0.2
			}

/* Summernote / Bootstrap / AdminPanel Buttons vom Theme-Stil ausnehmen */
#adminPanel button,
#adminPanel input[type="button"],
.note-toolbar button,
.note-toolbar .btn,
.note-popover button,
.note-popover .btn,
.note-editor .btn,
.bootstrap-modal button,
.modal button,
.btn {
	appearance: none;
	-webkit-appearance: none;
	background-color: revert;
	border: revert;
	border-color: revert;
	border-radius: revert;
	color: revert;
	font-size: revert;
	font-weight: revert;
	letter-spacing: revert;
	line-height: revert;
	padding: revert;
	text-transform: revert;
	white-space: revert
}
.btn::after,
#adminPanel button::after,
.note-toolbar button::after,
.note-editor .btn::after {
	display: none
}

/* Summernote Toolbar: dunkles Theme passend zur Seite */
.note-toolbar,
.note-popover .popover-content {
	background-color: #2e3033 !important;
	border-color: rgba(196, 166, 117, 0.25) !important
}
.note-toolbar .btn,
.note-toolbar .btn-default,
.note-popover .btn,
.note-popover .btn-default {
	background-color: #3a3d42 !important;
	border-color: rgba(196, 166, 117, 0.2) !important;
	color: #dddddd !important
}
.note-toolbar .btn:hover,
.note-toolbar .btn-default:hover,
.note-toolbar .btn.active,
.note-toolbar .btn-default.active,
.note-popover .btn:hover,
.note-popover .btn.active {
	background-color: #c4a675 !important;
	border-color: #c4a675 !important;
	color: #212224 !important
}
.note-toolbar .note-icon-caret,
.note-toolbar .caret {
	border-top-color: #dddddd
}
		border-radius: 10px;
		width: 300px;
		background: #ffffff;
		color: #2c2e30
	}

/* ---------------------------------------------------------------
   Wrapper
--------------------------------------------------------------- */
.wrapper {
	position: relative
}
	.wrapper > .inner {
		width: 100%;
		padding: 5em 4em 2em 4em
	}

	#intro > .inner {
		padding-top: 2em;
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0
	}
		@media screen and (max-width: 1680px) {
			footer > .inner {
				padding: 2em 4em 2em 4em !important
			}
		}
		@media screen and (max-width: 736px) {
			.wrapper > .inner {
				padding: 2em 2em 2em 2em
			}
			footer > .inner {
				padding: 2em 2em 2em 2em !important
			}
		}

	/* Content-Bereich – helles Blau-Grau */
	.wrapper.style1 {
		background-color: #f5fafd
	}

	/* Abschnitt-Blöcke (subside / footer) – Dunkelgrau mit hellem Text */
	.wrapper.style2 {
		background-color: #212224;
		color: #dddddd
	}
		.wrapper.style2 strong,
		.wrapper.style2 b {
			color: #ffffff
		}
		.wrapper.style2 h1,
		.wrapper.style2 h2,
		.wrapper.style2 h3,
		.wrapper.style2 h4,
		.wrapper.style2 h5,
		.wrapper.style2 h6 {
			color: #eeeeee
		}
		.wrapper.style2 code {
			background: rgba(255, 255, 255, 0.07);
			border-color: rgba(196, 166, 117, 0.25)
		}

	.wrapper.fullscreen {
		min-height: calc(87vh - 2.5em)
	}
		@media screen and (max-width: 736px) {
			.wrapper.fullscreen {
				min-height: calc(40vh - 5.5em)
			}
		}

/* ---------------------------------------------------------------
   Wrapper-Layout
--------------------------------------------------------------- */
#topMenu + #wrapper {
	margin-left: 0;
	position: relative
}
	@media screen and (max-width: 736px) {
		#topMenu + #wrapper {
			padding-top: 0;
			top: 0
		}
	}

#header + #wrapper > .wrapper > .inner {
	margin: 0 auto
}

/* ---------------------------------------------------------------
   Info-Leiste (über der Navigationsleiste)
--------------------------------------------------------------- */
#infoBar {
	background-color: #212224;
	width: 100%;
	font-size: 0.72em;
	border-bottom: 1px solid rgba(196, 166, 117, 0.18)
}

#infoBar > .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0.45em 4rem;
	width: 100%;
	box-sizing: border-box
}

.info-left {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 1.8em;
	flex: 1
}

.info-right {
	display: flex;
	align-items: center;
	flex-shrink: 0
}

.info-item {
	display: flex;
	align-items: center;
	gap: 0.4em;
	color: rgba(221, 221, 221, 0.8);
	white-space: nowrap
}

.info-item svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
	color: #c4a675;
	vertical-align: middle
}

.info-item a {
	color: rgba(221, 221, 221, 0.8);
	border-bottom: none;
	transition: color 0.2s ease
}

.info-item a:hover {
	color: #c4a675;
	border-bottom: none
}

.info-social {
	display: flex;
	align-items: center;
	border: 0;
	color: rgba(221, 221, 221, 0.8);
	transition: color 0.2s ease
}

.info-social:hover {
	color: #c4a675;
	border: 0
}

.info-social svg {
	width: 1.3em;
	height: 1.3em
}

@media screen and (max-width: 736px) {
	#infoBar {
		display: none
	}
}

/* ---------------------------------------------------------------
   Navigationsleiste (Header) – Dunkelgrau #212224
--------------------------------------------------------------- */
#topMenu {
	padding: 0.5em 0;
	background-color: #212224;
	cursor: default;
	left: 0;
	top: 0;
	width: 100%;
	position: sticky;
	z-index: 20
}

#topMenu > .inner {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	padding: 0 4rem;
	min-height: 100%;
	width: 100%
}

/* Logo */
#site-logo {
	display: flex;
	align-items: center;
	border: 0;
	text-decoration: none;
	flex-shrink: 0
}

#site-logo img {
	height: 3.2em;
	width: auto;
	display: block
}
	#topMenu nav {
		display: flex;
		align-items: center
	}
		#topMenu nav ul {
			display: flex;
			list-style: none;
			padding: 0;
			margin: 0
		}
		#topMenu nav a {
			padding: 0
		}
		#topMenu nav > ul > li {
			margin: 0 1em 0 1em;
			opacity: 1;
			padding: 0;
			position: relative
		}

	#topMenu nav a {
		border: 0;
		font-size: 0.70em;
		font-weight: bold;
		letter-spacing: 0.25em;
		line-height: 1.75;
		outline: 0;
		padding: 2em 0;
		position: relative;
		text-decoration: none;
		text-transform: uppercase
	}

	/* Aktiver Menüeintrag in Ocker */
	#topMenu nav li.active,
	nav li.active a {
		color: #c4a675 !important
	}
		#topMenu nav a:hover {
			border-bottom: 1px solid rgba(196, 166, 117, 0.5);
			color: #c4a675 !important
		}
		#topMenu nav li.active > a::after {
			content: '';
			position: absolute;
			bottom: 0.6em;
			left: 0;
			right: 0;
			height: 3px;
			background-color: #c4a675
		}

	@media screen and (max-width: 736px) {
		#topMenu {
			height: auto;
			font-size: 0.94em;
			position: relative;
			background-color: #212224;
			padding-bottom: 12px
		}
		#topMenu > .inner {
			padding: 0 1.2rem;
			flex-wrap: wrap;
			gap: 0.4em
		}
		#site-logo img {
			height: 2.6em
		}
		#topMenu nav ul {
			display: flex;
			flex-wrap: wrap;
			float: none;
			gap: 0
		}
		#topMenu nav > ul > li {
			display: block;
			float: none;
			margin: 0 0.8em 0 0.8em
		}
		#topMenu nav a {
			padding: 0.6em 0;
			letter-spacing: 0.12em
		}
		#topMenu nav a:hover,
		#topMenu nav li.active > a::after {
			border-bottom: none;
			background-color: transparent
		}
		footer {
			font-size: 1em
		}
	}

/* ---------------------------------------------------------------
   Intro-Bereich
--------------------------------------------------------------- */
#intro p {
	font-size: 1.25em
}
	@media screen and (max-width: 736px) {
		#intro p {
			font-size: 1em
		}
	}

/* ---------------------------------------------------------------
   Footer – Dunkelgrau
--------------------------------------------------------------- */
footer {
	background-color: #212224
}

footer a {
	color: #c4a675;
	border-bottom-color: rgba(196, 166, 117, 0.45)
}

footer a:hover {
	color: #d4b885;
	border-bottom-color: #c4a675
}

/* Dreispaltiges Footer-Layout */
.footer-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	align-items: stretch
}

.footer-col {
	flex: 1;
	min-width: 180px;
	text-align: left;
	display: flex;
	flex-direction: column
}

/* Kontakt-Links im Footer */
.footer-col .home-contact {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	margin-top: 0.5em
}

.footer-col h4 {
	color: #eeeeee;
	margin-bottom: 0.6em;
	font-size: 0.95em;
	text-transform: uppercase;
	letter-spacing: 0.08em
}

.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0
}

.footer-col ul li {
	margin-bottom: 0.3em
}

/* Öffnungszeiten-Tabelle */
.oeffnungszeiten-tabelle {
	border-collapse: collapse;
	width: 100%;
	max-width: 380px
}

.oeffnungszeiten-tabelle td:first-child {
	width: 7em
}

.oeffnungszeiten-tabelle td {
	padding: 0.2em 0.8em 0.2em 0;
	font-size: 0.95em
}

.oeffnungszeiten-tabelle td:last-child {
	text-align: right;
	padding-right: 0
}

	@media screen and (max-width: 736px) {
		.footer-col--copy {
			text-align: left
		}
	}

.footer-col--right {
	text-align: right
}

.footer-col--right ul {
	padding: 0
}

.footer-col--right ul li {
	text-align: right
}

/* ---------------------------------------------------------------
   Submenüs (Dropdown)
--------------------------------------------------------------- */
.subPageDropdown a {
	border: 0 !important
}

.subPageDropdown ul {
	margin: 0;
	padding-left: 0
}

.subPageDropdown li {
	color: #dddddd;
	display: block;
	float: left;
	position: relative;
	padding: 0 1em 0 1em;
	text-decoration: none;
	transition-duration: 0.5s
}

#topMenu li a {
	color: rgba(221, 221, 221, 0.85)
}

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

#topMenu li:focus-within a {
	outline: none
}

#topMenu .nav-item {
	margin-top: 5px
}

ul.subPageDropdown {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	margin-top: 10px;
	display: none;
	padding-left: 10px !important
}

#topMenu ul li:hover > ul,
#topMenu ul li:focus-within > ul,
#topMenu ul li ul:hover,
#topMenu ul li ul:focus {
	visibility: visible;
	opacity: 1;
	display: block
}

#topMenu ul li ul li {
	clear: both;
	text-align: left;
	background-color: rgba(33, 34, 36, 0.96);
	border-left: 2px solid #c4a675;
	white-space: nowrap
}

/* Dropdown-Pfeil */
.menu li > a:after {
	content: ' ▼';
	font-weight: bold
}

.menu > li > a:after {
	content: ' ▼';
	font-weight: bold
}

.menu li > a:only-child:after {
	content: ''
}

/* ---------------------------------------------------------------
   Suche
--------------------------------------------------------------- */
.wondersearch-container {
	position: relative;
	padding: 2em 0;
	max-width: 600px;
	margin-left: auto;
	margin-right: auto
}

.wondersearch-input {
	width: 100%;
	padding: 10px 15px;
	font-size: 1em;
	border: 1px solid rgba(196, 166, 117, 0.35);
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.05);
	color: #dddddd;
	outline: none;
	transition: border-color 0.2s ease, background-color 0.2s ease
}

.wondersearch-input:focus {
	border-color: rgba(196, 166, 117, 0.85);
	background-color: rgba(255, 255, 255, 0.08)
}

.wondersearch-results {
	position: absolute;
	width: 100%;
	background-color: rgba(33, 34, 36, 0.97);
	border-radius: 5px;
	margin-top: 5px;
	z-index: 1000;
	max-height: 300px;
	overflow-y: auto;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
	padding: 10px;
	border: 1px solid transparent;
	display: none
}

.wondersearch-results:not(:empty) {
	display: block;
	border: 1px solid rgba(196, 166, 117, 0.25)
}

.wondersearch-item {
	padding: 10px;
	border-bottom: 1px solid rgba(196, 166, 117, 0.1);
	transition: background-color 0.2s ease
}

.wondersearch-item:last-child {
	border-bottom: none
}

.wondersearch-item:hover {
	background-color: rgba(196, 166, 117, 0.08)
}

.wondersearch-item a {
	color: #c4a675;
	text-decoration: none;
	font-weight: bold;
	display: block;
	margin-bottom: 5px;
	border-bottom: none
}

.wondersearch-item a:hover {
	text-decoration: underline
}

.wondersearch-item p {
	color: rgba(221, 221, 221, 0.8);
	margin: 0;
	font-size: 0.9em
}

.wondersearch-item mark {
	background-color: rgba(196, 166, 117, 0.25);
	color: #c4a675;
	padding: 2px 4px;
	border-radius: 3px
}

/* ---------------------------------------------------------------
   Admin-Panel: Settings/Logout-Buttons nach oben verschieben
   (Standard top:90px liegt im Menübereich dieses Themes)
--------------------------------------------------------------- */
#adminPanel .settings,
#adminPanel .logout {
	top: 130px
}

/* ---------------------------------------------------------------
   Hero (nur Homepage) – Vollbild-Slideshow mit Crossfade
   Bilder ablegen unter: themes/tcwunderlich-theme/images/
   hero-willkommen.jpg, hero-sandplaetze.jpg, hero-tennishalle.jpg
--------------------------------------------------------------- */
#hero {
	position: relative;
	width: 100%;
	min-height: calc(87vh - 2.5em);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}
	@media screen and (max-width: 736px) {
		#hero {
			min-height: 60vh
		}
	}

#hero-slides {
	position: absolute;
	inset: 0
}

.hero-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: heroFade 18s infinite
}

.hero-slide--1 {
	background-image: url('../images/hero-willkommen.jpg');
	animation-delay: 0s
}

.hero-slide--2 {
	background-image: url('../images/hero-sandplaetze.jpg');
	animation-delay: 6s
}

.hero-slide--3 {
	background-image: url('../images/hero-tennishalle.jpg');
	animation-delay: 12s
}

@keyframes heroFade {
	0%   { opacity: 0 }
	10%  { opacity: 1 }
	33%  { opacity: 1 }
	44%  { opacity: 0 }
	100% { opacity: 0 }
}

#hero-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 1
}

@media screen and (max-width: 736px) {
	#hero-overlay {
		display: none
	}
}

#hero-familie-frame {
	display: inline-block;
	position: relative;
	line-height: 0
}

#hero-familie-frame::before {
	content: '';
	position: absolute;
	inset: 0;
	border: 10px solid rgba(196, 166, 117, 0.7);
	pointer-events: none
}

#hero-familie-overlay-img {
	display: block;
	max-height: 55vh;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	transform: translate(30px, -30px)
}

.hero-content {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	padding: 2em;
	opacity: 0;
	animation: heroFade 18s infinite
}

.hero-col-left,
.hero-col-right {
	width: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 1em
}

.hero-col-left {
	justify-content: flex-end;
	padding-bottom: 8%
}

.hero-col-right {
	justify-content: center
}

.hero-content--1 {
	animation-delay: 0s
}

.hero-content--2 {
	animation-delay: 6s
}

.hero-content--2 .hero-col-right,
.hero-content--3 .hero-col-right {
	justify-content: flex-start;
	padding-top: 22%;
	align-items: flex-end;
	text-align: right
}

.hero-content--3 {
	animation-delay: 12s
}

.hero-content h1 {
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
	line-height: 1.0
}

.hero-content h2,
.hero-content h3 {
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6)
}

.hero-content p {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5)
}

@media screen and (max-width: 736px) {
	.hero-content {
		display: none
	}
}

.hero-content a.button {
	margin-top: 1em
}

/* ---------------------------------------------------------------
   Homepage-Sections (page('content') auf der Startseite)
--------------------------------------------------------------- */
.home-section {
	width: 100%;
	padding: 3.5em 0
}

@media screen and (max-width: 736px) {
	.home-section {
		padding: 2em 0
	}
	.home-section .inner {
		padding: 0 1.4rem
	}
	#intro > .inner > .home-section:first-child {
		padding-top: 1em
	}
}

.home-section .inner > h2:first-child,
.home-section .inner > h3:first-child,
.home-section .inner > .home-two-col:first-child h2,
.home-section .inner > .home-two-col:first-child h3 {
	margin-top: 0
}

.home-section .inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 4rem
}

.home-section--white {
	background: #f8f9fa
}

.home-section--bluegrey {
	background: #dde5ed;
	color: #2c2e30
}

.home-section--bluegrey h2,
.home-section--bluegrey h3,
.home-section--bluegrey p {
	color: #2c2e30
}

.home-section--white h2,
.home-section--white h3 {
	color: #2c2e30
}

.home-section--ocker {
	background: #c4a675;
	color: #212224
}

.home-section--ocker__inner {
	text-align: center
}

.home-section--ocker h2 {
	color: #212224;
	margin-bottom: 1em
}

.home-section--parallax {
	position: relative;
	background-image: url('../images/hero-sandplaetze.jpg');
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	color: #ffffff
}

.home-section--parallax::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(196, 166, 117, 0.72);
	pointer-events: none
}

.home-section--parallax .inner {
	position: relative
}

.home-section--parallax__inner {
	text-align: center
}

.home-section--parallax h2 {
	color: #ffffff;
	margin-bottom: 1em;
	text-shadow: 0 2px 8px rgba(0,0,0,0.35)
}

.button--dark {
	background-color: #212224;
	color: #f5fafd;
	border: none;
	padding: 0.7em 2em;
	font-size: 1em;
	font-weight: bold;
	letter-spacing: 0.1em;
	border-radius: 3px;
	text-decoration: none;
	display: inline-block;
	transition: background-color 0.2s ease, color 0.2s ease
}

.button--dark:hover {
	background-color: #3a3c3f;
	color: #c4a675;
	border: none
}

/* Zweispaltiges Layout */
.home-two-col {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
	align-items: center
}

.home-two-col__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	display: block
}

.home-two-col--images img {
	width: 100%;
	max-width: 260px;
	aspect-ratio: 210 / 275;
	height: auto;
	border-radius: 4px;
	display: block;
	margin: 0 auto;
	background-color: #e8e8e8;
	object-fit: cover
}

/* Klickbare Bilder (Menü/Preisliste) */
.home-image-link {
	display: block;
	text-align: center;
	border: none;
	text-decoration: none;
	transition: opacity 0.2s ease
}

.home-image-link:hover {
	opacity: 0.88;
	border: none
}

.home-image-link span {
	display: block;
	margin-top: 0.6em;
	font-weight: bold;
	color: #2c2e30
}

.home-image-link span small {
	display: block;
	font-weight: normal;
	font-size: 0.85em;
	color: #666;
	margin-top: 0.2em
}

/* Gestapelte/überlappende Bilder (Tenniscourts) */
.home-section--no-top-padding {
	padding-top: 0
}

.home-two-col__right {
	display: flex;
	flex-direction: column;
	gap: 1.2em
}

.tennis-luftbild {
	width: 100%;
	border-radius: 4px;
	display: block;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12)
}

.home-two-col__text p {
	margin-bottom: 0.5em
}

.home-two-col__text ul {
	margin-top: 0.2em;
	margin-bottom: 0.4em;
	padding-left: 1.4em
}

.home-two-col__text ul + p {
	margin-top: 1.2em
}

.home-stack {
	position: relative;
	padding-bottom: 8em;
	padding-right: 1.5em
}

.home-stack__top {
	width: 78%;
	position: relative;
	z-index: 2;
	margin-top: -1em;
	box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.18);
	border-radius: 4px
}

.home-stack__bottom {
	width: 72%;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	box-shadow: 4px 6px 18px rgba(0, 0, 0, 0.14);
	border-radius: 4px;
	border: 3px solid #ffffff
}

@media screen and (max-width: 736px) {
	.home-two-col {
		grid-template-columns: 1fr
	}
	.home-section .inner {
		padding: 0 2rem
	}
	.home-stack {
		padding-bottom: 0;
		padding-right: 0
	}
	.home-stack__bottom {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: 1em;
		width: 100%;
		border: none
	}
	.home-stack__top {
		width: 100%
	}
}

/* Partner-Logos */
.home-partners {
	display: flex;
	flex-wrap: wrap;
	gap: 2em;
	justify-content: center;
	align-items: center;
	margin-top: 1.5em
}

.home-partner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5em;
	border: none;
	text-decoration: none;
	transition: opacity 0.2s ease
}

.home-partner:hover {
	opacity: 0.75;
	border: none
}

.home-partner img {
	height: 153px;
	width: auto;
	max-width: 357px;
	object-fit: contain
}

.home-partner span {
	font-size: 0.85em;
	font-weight: bold;
	color: #2c2e30;
	text-align: center
}

/* Kontakt-Block */
.home-contact {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2em;
	margin-top: 1.5em
}

.home-contact__item h3 {
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #c4a675;
	margin-bottom: 0.05em
}

.home-contact__item strong {
	display: block;
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: #c4a675;
	margin-bottom: 0.05em
}

.home-contact__item strong::after {
	content: ':'
}

.home-contact__item a {
	color: #dddddd;
	border-bottom-color: rgba(221, 221, 221, 0.2)
}

.home-contact__item a:hover {
	color: #c4a675
}

.home-contact__social {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border-bottom: none !important
}

.home-contact__social svg {
	width: 1.2em;
	height: 1.2em;
	flex-shrink: 0
}

@media screen and (max-width: 736px) {
	.home-contact {
		grid-template-columns: 1fr 1fr
	}
}
/* Trainer-Block */
.tennis-trainers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3em;
	margin-top: 2.5em
}

.tennis-trainer {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center
}

.tennis-trainer__img {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
	border: 4px solid #c4a675;
	margin-bottom: 1em
}

.tennis-trainer__school {
	font-size: 0.8em;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #c4a675;
	margin-bottom: 0.25em
}

.tennis-trainer__name {
	font-size: 1.15em;
	margin-bottom: 0.5em
}

.tennis-trainer__text {
	font-size: 0.95em;
	margin-bottom: 0.4em;
	color: #444
}

.tennis-trainer__links {
	display: flex;
	gap: 0.75em;
	justify-content: center;
	margin-top: 0.3em;
	padding-bottom: 0.8em
}

.tennis-trainer__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: #2c2e30;
	color: #ffffff;
	border: none;
	transition: background 0.2s ease
}

.tennis-trainer__links a:hover {
	background: #c4a675;
	color: #212224
}

.tennis-trainer__links svg {
	width: 1em;
	height: 1em;
	flex-shrink: 0
}

@media screen and (max-width: 736px) {
	.tennis-trainers {
		grid-template-columns: 1fr
	}
}