/* Melissa Oynar – Dekoration und Feinschliff zu theme.json */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

[id] {
	scroll-margin-top: 1rem;
}

/* ---------- Kopfbereich ---------- */

.fm-header__bar {
	gap: 2.25rem;
}

.fm-header .fm-nav-left,
.fm-header .fm-nav-right {
	flex: 1 1 0;
}

.fm-header .fm-logo {
	flex: 0 0 auto;
	margin: 0;
}

.fm-header .wp-block-navigation a:hover,
.fm-header .wp-block-navigation a:focus {
	color: var(--wp--preset--color--dark);
}

.fm-nav-mobile {
	display: none !important;
}

@media (max-width: 960px) {
	.fm-header .fm-nav-left,
	.fm-header .fm-nav-right {
		display: none !important;
	}

	.fm-nav-mobile {
		display: flex !important;
	}

	.fm-header .fm-logo img {
		width: 92px !important;
		height: auto;
	}
}

.fm-nav-mobile .wp-block-navigation__responsive-container.is-menu-open {
	padding-top: 4rem;
	font-size: 1rem;
}

/* ---------- Abschnitte ---------- */

/* Abschnitte stoßen ohne Abstand aneinander */
.fm-sections > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.fm-main > .fm-sections {
	margin-block-start: 0;
}

/* Überzeile („Willkommen bei“) */
.is-style-fm-eyebrow {
	font-style: italic;
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--orange);
	margin-bottom: -0.35em !important;
}

/* Kurzer Trennstrich unter Überschriften */
.wp-block-separator.is-style-fm-short {
	width: 56px;
	max-width: 56px;
	height: 0;
	border: 0;
	border-top: 1px solid currentColor;
	background: none !important;
	opacity: 1;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Kleine Ornamente mittig */
.fm-ornament {
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Kerben (früher „rounded split“) ---------- */

.is-style-fm-notch-white,
.is-style-fm-notch-apricot,
.is-style-fm-card {
	position: relative;
}

.is-style-fm-notch-white::before,
.is-style-fm-notch-apricot::before,
.is-style-fm-card::before,
.is-style-fm-card::after {
	content: "";
	position: absolute;
	left: 50%;
	width: 110px;
	height: 55px;
	transform: translateX(-50%);
	pointer-events: none;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 55'%3E%3Cpath d='M0 0A55 55 0 0 1 55 55 55 55 0 0 1 110 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 55'%3E%3Cpath d='M0 0A55 55 0 0 1 55 55 55 55 0 0 1 110 0Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.is-style-fm-notch-white::before,
.is-style-fm-notch-apricot::before {
	top: -1px;
}

.is-style-fm-notch-white::before {
	background: var(--wp--preset--color--white);
}

.is-style-fm-notch-apricot::before {
	background: var(--wp--preset--color--apricot);
}

/* Karte (Kundenmeinungen): Kerbe oben und unten in der Farbe des Abschnitts */
.is-style-fm-card {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.is-style-fm-card::before,
.is-style-fm-card::after {
	width: 90px;
	height: 45px;
	background: var(--wp--preset--color--apricot);
}

.is-style-fm-card::before {
	top: -1px;
}

.is-style-fm-card::after {
	bottom: -1px;
	transform: translateX(-50%) rotate(180deg);
}

.fm-quotes > .wp-block-column {
	display: flex;
	flex-direction: column;
}

.fm-quotes > .wp-block-column > .is-style-fm-card {
	flex: 1;
}

/* ---------- Startbild ---------- */

/* Maße des Hintergrundbilds (1922 × 825) als Bezug für Bogen und Pfeil */
:root {
	--fm-hero-w: 100vw;
	--fm-hero-h: calc(100vw * 825 / 1922);
}

@media (max-width: 700px) {
	:root {
		--fm-hero-h: 112vw;
		--fm-hero-w: calc(112vw * 1922 / 825);
	}
}

/* Das Hintergrundbild enthält die Schleifenform bereits – immer ganz zeigen */
.wp-block-cover.is-style-fm-hero {
	aspect-ratio: 1922 / 825;
	min-height: 0;
	padding: 0;
	overflow: hidden;
	align-items: flex-start;
}

.wp-block-cover.is-style-fm-hero .wp-block-cover__image-background {
	object-position: center top;
}

.wp-block-cover.is-style-fm-hero .wp-block-cover__inner-container {
	position: static;
	height: 100%;
}

/* Weißer Bogen über dem Porträt (over-curve_03.png aus dem alten Slider):
   1328 px breit bei 1922 px Bildbreite, 35 px über der Unterkante, schiebt sich von unten ein */
.wp-block-cover.is-style-fm-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: calc(var(--fm-hero-h) * 35 / 825);
	z-index: 2;
	width: calc(var(--fm-hero-w) * 1328 / 1922);
	height: calc(var(--fm-hero-w) * 113 / 1922);
	background: url("../images/over-curve_03.png") center bottom / 100% 100% no-repeat;
	transform: translate(-50%, 0);
	pointer-events: none;
	animation: fm-curve-in 1s cubic-bezier(0.25, 1, 0.5, 1) 2s both;
}

/* unterhalb des Bogens bis zur Kante weiß auffüllen */
.wp-block-cover.is-style-fm-hero::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	z-index: 2;
	width: calc(var(--fm-hero-w) * 1328 / 1922);
	height: calc(var(--fm-hero-h) * 35 / 825 + 1px);
	background: #fff;
	transform: translateX(-50%);
	pointer-events: none;
	animation: fm-curve-in 1s cubic-bezier(0.25, 1, 0.5, 1) 2s both;
}

@keyframes fm-curve-in {
	from { opacity: 0; transform: translate(-50%, 120%); }
	to { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-cover.is-style-fm-hero::before,
	.wp-block-cover.is-style-fm-hero::after {
		animation: none;
	}
}

/* Slogan wie im alten Slider: groß, mittig über dem Porträt */
.wp-block-cover.is-style-fm-hero .fm-hero-tagline {
	position: absolute;
	top: 48%;
	left: 0;
	right: 0;
	z-index: 2;
	margin: 0;
	padding: 0 1rem;
	max-width: none;
	text-align: center;
	font-size: clamp(2.6rem, 6.25vw, 5.625rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -2px;
	white-space: nowrap;
	text-shadow: 0 2px 18px rgba(150, 70, 0, 0.3);
}

/* Pfeil nach unten unter dem Startbild (wie im alten Slider) */
.fm-scroll-down {
	position: relative;
	z-index: 3;
	margin-top: calc(var(--fm-hero-h) * -92 / 825) !important;
	margin-bottom: calc(var(--fm-hero-h) * 49 / 825) !important;
	line-height: 1;
	opacity: 0;
	animation: fm-drop-in 0.5s cubic-bezier(0.45, 0, 0.55, 1) 2.6s forwards;
}

.fm-scroll-down a {
	display: inline-block;
	width: 48px;
	height: 43px;
	font-size: 0;
	color: var(--wp--preset--color--orange);
	text-decoration: none;
	position: relative;
}

.fm-scroll-down a::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 6px;
	width: 22px;
	height: 22px;
	border-right: 4px solid currentColor;
	border-bottom: 4px solid currentColor;
	transform: translateX(-50%) rotate(45deg);
	transition: top 0.2s ease;
}

.fm-scroll-down a:hover::before,
.fm-scroll-down a:focus-visible::before {
	top: 11px;
}

.fm-scroll-down a:focus-visible {
	outline: 2px solid var(--wp--preset--color--apricot);
	outline-offset: 2px;
}

@keyframes fm-drop-in {
	from { opacity: 0; transform: translateY(-50px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.fm-scroll-down {
		animation: none;
		opacity: 1;
	}
}

/* Porträt */
.fm-hero-faces {
	position: relative;
	width: 41.5vw;
	max-width: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.fm-hero-faces > .wp-block-image {
	margin: 0;
}

.fm-hero-faces > .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

@media (max-width: 700px) {
	.wp-block-cover.is-style-fm-hero {
		aspect-ratio: auto;
		height: 112vw;
	}

	.fm-hero-faces {
		width: 105vw;
		margin-left: -2.5vw !important;
	}

	.wp-block-cover.is-style-fm-hero .fm-hero-tagline {
		top: 52%;
		font-size: 11vw;
		letter-spacing: -1px;
		white-space: normal;
	}
}

/* Slogan-Animation wie im alten Slider („PopUpSmooth“, Buchstabe für Buchstabe).
   Die Buchstaben-Spans setzt assets/js/hero.js; ohne JavaScript bleibt der Text einfach stehen. */
.fm-js .fm-hero-tagline:not(.is-split) {
	visibility: hidden;
}

.fm-hero-tagline .fm-word {
	display: inline-block;
	white-space: nowrap;
}

.fm-hero-tagline .fm-char {
	display: inline-block;
	opacity: 0;
	transform: scale(0.9);
	animation: fm-popup 1s cubic-bezier(0.55, 0.055, 0.675, 0.19) forwards;
}

@keyframes fm-popup {
	from { opacity: 0; transform: scale(0.9); }
	to { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.fm-hero-tagline .fm-char {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* ---------- Öffnungszeiten ---------- */

.wp-block-table.is-style-fm-hours table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table.is-style-fm-hours td,
.wp-block-table.is-style-fm-hours th {
	border: 0;
	border-bottom: 1px solid rgba(243, 156, 44, 0.45);
	padding: 0.85em 0.5em;
	vertical-align: top;
	color: var(--wp--preset--color--dark);
}

.wp-block-table.is-style-fm-hours td:first-child {
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 500;
	white-space: nowrap;
	width: 38%;
}

.wp-block-table.is-style-fm-hours tr:last-child td {
	border-bottom: 0;
}

.wp-block-table.is-style-fm-hours mark {
	letter-spacing: 0.3em;
	text-transform: uppercase;
}

.wp-block-table.is-style-fm-hours small {
	display: block;
	color: var(--wp--preset--color--body);
	font-size: 0.85em;
}

/* ---------- Galerien ---------- */

.wp-block-gallery.fm-gallery {
	--wp--style--unstable-gallery-gap: 6px;
	gap: 6px;
}

/* einheitliche Bildformate statt Masonry */
.wp-block-gallery.fm-gallery .wp-block-image img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
	height: auto;
}

/* ---------- Vorher/Nachher (Deinen Style) ---------- */

/* 3 + 2 Bilder, zweite Reihe mittig – wie im alten Layout */
.fm-compare-row {
	gap: 2rem !important;
}

.fm-compare-row > .is-style-fm-compare {
	flex: 0 0 calc((100% - 4rem) / 3);
	max-width: 300px;
	margin: 0 !important;
}

@media (max-width: 781px) {
	.fm-compare-row > .is-style-fm-compare {
		flex-basis: calc((100% - 2rem) / 2);
	}
}

@media (max-width: 520px) {
	.fm-compare-row > .is-style-fm-compare {
		flex-basis: 100%;
	}
}

/* Regler erst, wenn compare.js geladen ist (im Editor bleiben es zwei normale Bilder) */
.is-style-fm-compare.is-ready {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.is-style-fm-compare.is-ready > .wp-block-image {
	margin: 0;
}

.is-style-fm-compare.is-ready img {
	display: block;
	width: 100%;
	height: auto;
	pointer-events: none;
	-webkit-user-drag: none;
}

.is-style-fm-compare.is-ready > .wp-block-image + .wp-block-image {
	position: absolute;
	inset: 0;
	clip-path: inset(0 0 0 var(--fm-pos, 80%));
}

.is-style-fm-compare.is-ready > .wp-block-image + .wp-block-image img {
	height: 100%;
	object-fit: cover;
}

/* weiße Linie mit Raute als Griff (ohne den automatischen Block-Abstand von WordPress) */
.is-style-fm-compare .fm-compare__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--fm-pos, 80%);
	width: 44px;
	margin: 0 !important;
	transform: translateX(-50%);
	cursor: ew-resize;
	touch-action: none;
	z-index: 2;
}

.fm-compare__handle::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	margin-left: -1.5px;
	background: #fff;
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
}

.fm-compare__handle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 26px;
	height: 26px;
	margin: -13px 0 0 -13px;
	border: 3px solid #fff;
	background: rgba(0, 0, 0, 0.5) radial-gradient(circle, #fff 0 3px, transparent 3.5px);
	box-shadow: 0 0 12px rgba(51, 51, 51, 0.5);
	transform: rotate(45deg);
	box-sizing: border-box;
}

.fm-compare__handle:focus-visible {
	outline: none;
}

.fm-compare__handle:focus-visible::after {
	border-color: var(--wp--preset--color--orange);
}

/* ---------- Kontaktformular (Contact Form 7) ---------- */

.wpcf7 .fm-form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.9rem;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.875rem;
}

.wpcf7 .fm-form p {
	margin: 0;
}

.wpcf7 .fm-form .fm-form__full {
	grid-column: 1 / -1;
}

.wpcf7 .fm-form label {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--wp--preset--color--dark);
	margin-bottom: 0.3rem;
}

.wpcf7 .fm-form input[type="text"],
.wpcf7 .fm-form input[type="email"],
.wpcf7 .fm-form input[type="tel"],
.wpcf7 .fm-form textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 0.8rem 0.9rem;
	border: 1px solid #d9d9d9;
	border-radius: 0;
	background: #fff;
	font: inherit;
	color: var(--wp--preset--color--dark);
}

.wpcf7 .fm-form textarea {
	height: 9rem;
	resize: vertical;
}

.wpcf7 .fm-form input:focus,
.wpcf7 .fm-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--apricot);
	outline-offset: 0;
	border-color: var(--wp--preset--color--orange);
}

.wpcf7 .fm-form .fm-form__hint {
	font-size: 0.75rem;
	color: var(--wp--preset--color--body);
}

.wpcf7 .fm-form input[type="submit"] {
	width: 100%;
	border: 0;
	border-radius: 0;
	padding: 1rem;
	background: var(--wp--preset--color--orange);
	color: #fff;
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7 .fm-form input[type="submit"]:hover {
	background: var(--wp--preset--color--dark);
}

.wpcf7 .wpcf7-spinner {
	position: absolute;
}

@media (max-width: 600px) {
	.wpcf7 .fm-form {
		grid-template-columns: 1fr;
	}
}

/* ---------- Fußbereich ---------- */

.fm-footer {
	position: relative;
}

.fm-footer a {
	color: inherit;
	text-decoration: none;
}

.fm-footer a:hover {
	text-decoration: underline;
}

.fm-contact .wp-block-heading {
	margin-bottom: 0;
}

.fm-contact p {
	margin-top: 0.25rem;
	white-space: nowrap;
	overflow-wrap: normal;
}

@media (max-width: 1000px) {
	.fm-contact p {
		white-space: normal;
		font-size: 1.75rem !important;
	}
}

/* weißer Bogen am unteren Rand */
.fm-footer .fm-contact {
	margin-bottom: calc(var(--wp--preset--spacing--40) + clamp(40px, 9vw, 127px)) !important;
}

.fm-footer__bar {
	position: relative;
}

.fm-footer__bar::before {
	content: "";
	position: absolute;
	bottom: calc(100% - 1px);
	left: 50%;
	transform: translateX(-50%);
	width: min(978px, 100%);
	height: clamp(40px, 9vw, 127px);
	background: url("../images/footer-curve.png") center bottom / 100% 100% no-repeat;
	pointer-events: none;
}

.fm-nav-footer {
	color: var(--wp--preset--color--body);
}

/* ---------- Normale Seiten (Impressum, Datenschutz) ---------- */

.fm-page-content h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-top: 2.5rem;
}

.fm-page-content h3 {
	font-size: var(--wp--preset--font-size--large);
	margin-top: 1.75rem;
}

/* Login-Hinweis-Leiste ausblenden, falls Theme im Editor-Iframe */
.editor-styles-wrapper .fm-nav-mobile {
	display: none !important;
}