@import url('/typo3conf/ext/musikkapelle_rottenbuch_template/Resources/Public/Css/styles.css');

html {
	scroll-padding-top: 80px;
}

html,
body {
	text-rendering: optimizeLegibility;
}

body {
	background-color: var(--beige);
	color: var(--schwarz);
	font-size: 22px;
	font-family: 'Raleway', sans-serif;
	line-height: 1.8;
	scroll-padding-top: 80px;
}

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

h1,
.h1 {
	font-family: 'Bebas Neue';
	font-size: 36px;
	color: var(--dunkelrot);
}

h2,
.h2 {
	background: var(--gruen);
	color: var(--weiss);
	font-family: 'Bebas Neue';
	font-size: 28px;
	padding: 5px 15px;
	text-align: center;
}

h3,
.h3 {
	font-family: 'Bebas Neue';
	font-size: 24px;
}

/*------------------------------------*\
  #SEITENHEADER
\*------------------------------------*/
#seitenheader {
	height: 100vh;
	margin-bottom: 80px;
}

.layout-contentseite #seitenheader {
	height: auto;
	margin-bottom: 80px;
}

.programm__button {
	background: var(--gelb);
	border-radius: 20px;
	height: 40px;
}

.programm__button:hover {
	background: var(--weiss);
}

.programm__button a {
	color: var(--schwarz);
	display: flex;
	align-items: center;
	padding: 0 15px;
}

.programm__button span {
	font-size: 18px;
	font-weight: 400;
}

.navigation {
	background: #333;
	height: 80px;
	width: 100%;
	position: sticky;
	top: 0;
	z-index: 1000;
}

.festbg {
	background: #116635 url(/typo3conf/ext/musikfest_rottenbuch_template/Resources/Public/Images/Template/festbg-hintergrund.jpg) no-repeat center center;
	background-size: 101%;
	height: calc(100vh - 274px);
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px 20px;
}

@media (max-height: 900px) {
	#seitenheader {
		height: auto;
	}

	.festbg {
		height: 100vh;
	}
}

.festbg__layer {
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

/* ---------- 1. Wandernde Lichtstrahlen ---------- */
.festbg__rays {
	opacity: .5;
	background:
		linear-gradient(115deg,
			transparent 22%,
			rgba(255, 255, 255, .07) 30%, transparent 40%,
			rgba(255, 255, 255, .05) 52%, transparent 60%),
		linear-gradient(100deg,
			transparent 55%,
			rgba(255, 244, 190, .05) 66%, transparent 78%);
	background-size: 220% 100%;
	animation: festbg-rays 26s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

@keyframes festbg-rays {
	from {
		background-position: 0% 0
	}

	to {
		background-position: 100% 0
	}
}

/* ---------- 2. Sanftes Atmen (Vignette) ---------- */
.festbg__breath {
	background: radial-gradient(120% 90% at 50% 20%,
			rgba(255, 255, 255, .06), transparent 55%);
	animation: festbg-breath 11s ease-in-out infinite alternate;
	mix-blend-mode: screen;
}

@keyframes festbg-breath {
	from {
		opacity: .35
	}

	to {
		opacity: .9
	}
}

/* ---------- 3. Schwebende Bokeh-Lichter ---------- */
.festbg__light {
	position: absolute;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%,
			rgba(255, 240, 180, .9), rgba(255, 220, 120, 0) 70%);
	mix-blend-mode: screen;
	animation: festbg-float var(--dur, 9s) ease-in-out infinite alternate;
}

@keyframes festbg-float {
	from {
		transform: translateY(10px)
	}

	to {
		transform: translateY(-24px)
	}
}

/* ---------- 4. Aufsteigende Noten ---------- */
.festbg__note {
	position: absolute;
	bottom: -60px;
	font-family: Georgia, "Times New Roman", serif;
	color: rgba(255, 240, 190, .5);
	text-shadow: 0 0 14px rgba(255, 230, 150, .35);
	animation: festbg-note var(--dur, 18s) linear infinite;
	animation-delay: var(--delay, 0s);
	opacity: 0;
}

@keyframes festbg-note {
	0% {
		opacity: 0;
		transform: translateY(0) rotate(-10deg)
	}

	8% {
		opacity: var(--op, .45)
	}

	85% {
		opacity: var(--op, .45)
	}

	100% {
		opacity: 0;
		transform: translateY(calc(-100vh - 120px)) rotate(12deg)
	}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {

	.festbg__rays,
	.festbg__breath,
	.festbg__light,
	.festbg__note {
		animation: none !important;
	}

	.festbg__note {
		display: none
	}
}

.hero__inhalt {
	position: relative;
	z-index: 1;
	color: #fff8e6;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Zeile ÜBER dem Logo: „Die Musikkapelle Rottenbuch lädt ein" */
.hero__inhalt .kicker {
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .22em;
	font-size: clamp(12px, 1vw, 14px);
	color: #f6c400;
	text-shadow: 1px 1px 3px #000000;
}

/* Helle Logo-Karte, leicht gedreht */
.hero__logo {
	display: inline-block;
	background: #f8f2e2;
	border-radius: 38px;
	padding: clamp(26px, 3.6vw, 48px) clamp(30px, 4.6vw, 60px);
	margin-top: 30px;
	box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
	transform: rotate(-1.4deg);
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

.hero__logo:hover {
	transform: rotate(0deg) scale(1.012)
}

.hero__logo img {
	display: block;
	width: min(66vw, 460px);
	height: auto;
}

/* Zeile UNTER dem Logo: Datum + Ort */
.hero__ortdatum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	margin-top: 40px;
}

.hero__datum {
	font-family: 'Big Shoulders Display', sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(22px, 2.6vw, 32px);
	letter-spacing: .01em;
	color: #fff;
	text-shadow: 1px 1px 3px #000000;
}

.hero__datum b {
	color: #f6c400
}

.hero__location {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-weight: 650;
	font-size: 1.02rem;
	opacity: .92;
	text-shadow: 1px 1px 3px #000000;
}

.hero__trenner {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #f6c400;
	display: inline-block;
}

.mf-countdown {
	background: var(--dunkelrot);
	padding: 30px;
	text-align: center;
}

.mf-cd {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: clamp(18px, 5vw, 70px);
}

.mf-cd__unit {
	display: flex;
	flex-direction: column;
	align-items: center
}

.mf-cd__num {
	font-weight: 600;
	font-size: clamp(56px, 10vw, 110px);
	line-height: .9;
	color: #fff;
	font-variant-numeric: tabular-nums;
	/* Ziffern springen nicht */
	letter-spacing: -.02em;
}

.mf-cd__lab {
	margin-top: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .18em;
	font-size: clamp(11px, 1vw, 14px);
	color: #f6c400;
	/* Gold */
}

.mf-cd__sep {
	font-weight: 600;
	font-size: clamp(40px, 7vw, 80px);
	color: #fff;
	line-height: 1.1;
}

/*------------------------------------*\
  #CONTENT
\*------------------------------------*/
.mf-logo {
	max-height: 160px;
	/* einheitliche Maximalhöhe für breite Logos */
	width: auto;
}

.mf-logo--quad {
	max-height: 200px;
	/* das quadratische rote Logo etwas höher */
}

@media (max-width: 767px) {
	.mf-logo {
		max-height: 120px
	}

	.mf-logo--quad {
		max-height: 150px
	}
}

/*------------------------------------*\
  #FOOTER
\*------------------------------------*/
footer {
	background: var(--dunkelbraun);
	color: var(--hellbraun);
	font-size: 18px;
	padding-top: 60px;
	padding-bottom: 60px;
}

footer a {
	color: var(--hellbraun);
	text-decoration: underline;
}

footer #c130 span.c-important {
	font-size: 36px;
	font-weight: 600;
	color: #9D8059;
}

footer #c130 span.c-important.c-tiny {
	color: var(--weiss);
}

#c130 p {
	line-height: 1;
}

#c131 p,
#c132 p {
	color: #9D8059;
	font-weight: 600;
}

.instagram i {
	color: #fff;
	font-size: 32px;
}

.footer-bottom {
	display: flex;
	justify-content: space-between;
}

/*------------------------------------*\
  #TYPO3
\*------------------------------------*/
.cb-bildergalerie-item {
	display: inline-block;
	background: var(--weiss);
	padding: 15px !important;
	border: 1px solid #ccc;
	border-radius: 10px;
	margin: 0;
}

.cb-bildergalerie-item img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 10px !important;
}

p {
	margin-bottom: 15px;
}

strong {
	font-weight: 600;
}

.frame-space-before-extra-small {
	margin-top: 20px;
}

.frame-space-before-small {
	margin-top: 40px;
}

.frame-space-before-medium {
	margin-top: 60px;
}

.frame-space-before-large {
	margin-top: 80px;
}

.frame-space-before-extra-large {
	margin-top: 100px;
}

.frame-space-after-extra-small {
	margin-bottom: 20px;
}

.frame-space-after-small {
	margin-bottom: 40px;
}

.frame-space-after-medium {
	margin-bottom: 60px;
}

.frame-space-after-large {
	margin-bottom: 80px;
}

.frame-space-after-extra-large {
	margin-bottom: 100px;
}

.frame-transparent {
	background: rgba(255, 255, 255, 0.8);
}

.frame-type-mf_sectionhead .mf-section-head {
	padding-top: 30px;
	padding-bottom: 30px;
	text-align: center;
}

.frame-type-mf_sectionhead .mf-section-head .mf-kicker {
	color: var(--dunkelrot);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
}

.frame-type-mf_sectionhead .mf-section-head h2 {
	background: none;
	color: var(--gruen);
	font-size: 64px;
	text-transform: uppercase;
	text-align: center;
}

.ce-gallery .image img {
	width: 100%;
	height: auto;
}

.ce-gallery img {
	display: block;
	width: 100%;
	height: auto;
}

#back-to-top.show {
	opacity: 1;
	visibility: visible;
}

#back-to-top {
	display: inline-block;
	background-color: #555;
	width: 50px;
	height: 50px;
	text-align: center;
	border-radius: 4px;
	position: fixed;
	bottom: 15px;
	right: 30px;
	transition: background-color .3s, opacity .5s, visibility .5s;
	opacity: 0;
	visibility: hidden;
	z-index: 1000;
}

#back-to-top::after {
	content: "\f077";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	font-style: normal;
	font-size: 2em;
	line-height: 50px;
	color: var(--weiss);
}

figcaption {
	font-weight: lighter;
	font-size: 14px;
}

/*------------------------------------*\
  #NEWS
\*------------------------------------*/


/*------------------------------------*\
  #TABELLEN
\*------------------------------------*/


/*------------------------------------*\
  #FORMULAR
\*------------------------------------*/
#kontaktformularMusikfest-137 .input.checkbox .form-check {
	padding: 0;
}

#kontaktformularMusikfest-137 .form-group {
	margin-bottom: 20px;
}

#kontaktformularMusikfest-137 textarea {
	min-height: 200px;
}

#kontaktformularMusikfest-137 .actions .submit button {
	background: #b01419;
	border-color: #b01419;
}

#kontaktformularMusikfest-137 .actions .submit:hover button {
	background: #333;
	border-color: #333;
}


/*------------------------------------*\
  #SIMPLE-LIGHTBOX
\*------------------------------------*/
.sl-overlay {
	background: var(--schwarz);
}

/*------------------------------------*\
  #CONTAINER
\*------------------------------------*/
.frame-type-b13-holzhintergrund {
	background-image: url(/typo3conf/ext/musikfest_rottenbuch_template/Resources/Public/Images/Template/holz4b-nahtlos.jpg);
	background-size: 100% auto;
	background-repeat: repeat-y;
	background-position: top center;
	padding-top: 60px;
	padding-bottom: 60px;
	overflow-x: hidden;
}

.frame-type-b13-weisser-hintergrund {
	background: var(--weiss);
	padding-top: 60px;
	padding-bottom: 60px;
}

/*------------------------------------*\
  #MAP
\*------------------------------------*/
.map {
	width: 100%;
	overflow: hidden;
	position: relative;
}

.map .privacy-msg.privacy-map-msg {
	background-image: url(/typo3conf/ext/musikfest_rottenbuch_template/Resources/Public/Images/Template/Mapdummy.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100% !important;
}

.map .privacy-msg.privacy-map-msg::after {
	content: "© OpenStreetMap contributors";
	position: absolute;
	left: 15px;
	bottom: 0;
}

.map .privacy-msg.privacy-map-msg p {
	background: rgba(0, 0, 0, 0.8);
	width: 1110px;
	position: absolute;
	left: 50%;
	margin-top: 50px;
	margin-left: -555px;
	color: var(--weiss);
	text-align: center;
}

.map iframe {
	width: 100%;
	margin-bottom: -12px;
}

.privacy-msg.privacy-script-msg a,
.privacy-msg.privacy-map-msg a {
	color: var(--gelb);
}

.privacy-msg a.btn {
	background: var(--gelb);
	border-color: var(--gelb);
	color: var(--schwarz);
	margin-top: 20px;
	margin-bottom: 20px;
}

.privacy-script-msg p {
	background: rgba(0, 0, 0, 0.8);
	position: relative;
	margin-top: 50px;
	color: var(--weiss);
	padding: 10px 20px;
	text-align: center;
}

.privacy-msg.privacy-video-msg {
	background-image: url(../Images/Template/Video-Dummy.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	width: 100% !important;
}

.privacy-msg.privacy-video-msg p {
	background-image: url(../Images/Template/trans-80-schwarz.png);
	width: 900px;
	position: absolute;
	left: 50%;
	margin-top: 50px;
	margin-left: -450px;
	color: var(--weiss);
	padding: 10px 20px;
	text-align: center;
}

/*------------------------------------*\
  #MEDIA-QUERIES
\*------------------------------------*/
@media (max-width: 1399px) {
	.festbg {
		background-size: cover;
	}
}

@media (max-width: 1199px) {
	.map .privacy-msg.privacy-map-msg p {
		width: 96%;
		margin-left: -48%;
	}
}

@media (max-width: 991px) {
	body {
		overflow-x: hidden;
	}

	.container {
		max-width: 100%;
	}

	#seitenheader {
		margin-bottom: 40px;
		height: auto;
	}

	.festbg {
		height: auto;
	}

	.programm__button {
		margin: 20px 15px;
	}
}

@media (max-width: 767px) {
	.festbg {
		height: 78vH;
	}

	.frame-type-mf_sectionhead .mf-section-head h2 {
		font-size: 48px;
	}

	.footer-bottom {
		justify-content: start;
		flex-direction: column;
	}

	footer #c130 span.c-important {
		font-size: 30px;
	}
}

@media (max-width: 575px) {
	body {
		font-size: 18px;
	}

	.mf-cd__num {
		font-size: 42px;
	}
}