/**
 * Rheinfly – Komponenten.
 *
 * In Elementor: Klasse im Feld „Erweitert → CSS-Klassen“ des Containers bzw. Widgets eintragen.
 * Übersicht: .rf-hero, .rf-trustbar, .rf-badge, .rf-card, .rf-vorteile, .rf-steps/.rf-step,
 * .rf-cta-band, .rf-faq, .rf-booking, .rf-btn--accent|dark|outline, .rf-section--alt
 */

/* ---------- Layout-Helfer ---------- */
.rf-container {
	width: 100%;
	max-width: calc(var(--rf-container) + 2 * var(--rf-gutter));
	margin-inline: auto;
	padding-inline: var(--rf-gutter);
	box-sizing: border-box;
}
.rf-section {
	padding-block: var(--rf-section-y);
}
.rf-section--alt {
	background: var(--rf-bg-alt);
}
.rf-lead {
	font-size: var(--rf-fs-lg);
	color: var(--rf-muted);
}
.rf-icon {
	flex: none;
	width: 24px;
	height: 24px;
}

/* ---------- Buttons ---------- */
.rf-btn,
.rf-btn--accent .elementor-button,
.rf-btn--dark .elementor-button,
.rf-btn--outline .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--rf-space-2);
	min-height: var(--rf-control-h);
	padding: 12px 24px;
	border: 2px solid transparent;
	border-radius: var(--rf-radius-btn);
	font-family: var(--rf-font);
	font-size: var(--rf-fs-base);
	font-weight: var(--rf-fw-semibold);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	box-sizing: border-box;
	cursor: pointer;
	transition: background-color var(--rf-transition), color var(--rf-transition), border-color var(--rf-transition), transform var(--rf-transition);
}
.rf-btn .rf-icon { width: 20px; height: 20px; }
.rf-btn:active,
.rf-btn--accent .elementor-button:active { transform: translateY(1px); }

.rf-btn--accent,
.rf-btn.rf-btn--accent,
.rf-btn--accent .elementor-button {
	background: var(--rf-accent);
	border-color: var(--rf-accent);
	color: #fff;
}
.rf-btn--accent:hover,
.rf-btn.rf-btn--accent:hover,
.rf-btn--accent .elementor-button:hover {
	background: var(--rf-accent-hover);
	border-color: var(--rf-accent-hover);
	color: #fff;
}

.rf-btn--dark,
.rf-btn.rf-btn--dark,
.rf-btn--dark .elementor-button {
	background: var(--rf-primary);
	border-color: var(--rf-primary);
	color: var(--rf-primary-contrast);
}
.rf-btn--dark:hover,
.rf-btn.rf-btn--dark:hover,
.rf-btn--dark .elementor-button:hover {
	background: #000;
	color: var(--rf-primary-contrast);
}

.rf-btn--outline,
.rf-btn.rf-btn--outline,
.rf-btn--outline .elementor-button {
	background: transparent;
	border-color: currentColor;
	color: var(--rf-primary);
}
.rf-btn--outline:hover,
.rf-btn.rf-btn--outline:hover,
.rf-btn--outline .elementor-button:hover {
	background: var(--rf-primary);
	border-color: var(--rf-primary);
	color: var(--rf-primary-contrast);
}

.rf-btn--block,
.rf-btn--block .elementor-button {
	width: 100%;
}

/* ---------- Hero ---------- */
.rf-hero {
	background: var(--rf-bg-alt);
	padding-block: var(--rf-space-7);
}
.rf-hero h1,
.rf-hero .elementor-heading-title {
	max-width: 22ch;
}
.rf-hero p,
.rf-hero .elementor-widget-text-editor {
	max-width: 60ch;
	font-size: var(--rf-fs-lg);
	color: var(--rf-muted);
}
.rf-hero img {
	border-radius: var(--rf-radius);
	object-fit: cover;
}
.rf-hero--compact {
	padding-block: var(--rf-space-6) var(--rf-space-4);
}
@media (max-width: 767px) {
	.rf-hero { padding-block: var(--rf-space-6); }
	.rf-hero--compact { padding-block: var(--rf-space-5) var(--rf-space-3); }
	.rf-hero p,
	.rf-hero .elementor-widget-text-editor { font-size: var(--rf-fs-base); }
}

/* ---------- Trust-Zeile ---------- */
.rf-trustbar,
.rf-trustbar ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-space-2) var(--rf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--rf-fs-sm);
	font-weight: var(--rf-fw-semibold);
	color: var(--rf-text);
}
.rf-trustbar li {
	display: inline-flex;
	align-items: center;
	gap: var(--rf-space-2);
	margin: 0;
}
.rf-trustbar li::before {
	content: "";
	width: 18px;
	height: 18px;
	flex: none;
	background: var(--rf-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Badge ---------- */
.rf-badge,
.rf-badge .elementor-heading-title {
	display: inline-flex;
	align-items: center;
	gap: var(--rf-space-1);
	padding: 4px 12px;
	border-radius: var(--rf-radius-pill);
	background: var(--rf-accent-soft);
	color: var(--rf-accent-hover);
	font-size: var(--rf-fs-sm);
	font-weight: var(--rf-fw-semibold);
	line-height: 1.5;
}

/* ---------- Karte ---------- */
.rf-card {
	padding: var(--rf-space-4);
	border: 1px solid var(--rf-border);
	border-radius: var(--rf-radius);
	background: var(--rf-bg);
	box-shadow: var(--rf-shadow-card);
	box-sizing: border-box;
}
.rf-card > :last-child,
.rf-card .elementor-widget:last-child { margin-bottom: 0; }
body a.rf-card,
.rf-card--link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform var(--rf-transition), box-shadow var(--rf-transition), border-color var(--rf-transition);
}
body a.rf-card:hover,
.rf-card--link:hover {
	transform: translateY(-2px);
	border-color: #cdd5e0;
	box-shadow: var(--rf-shadow-raised);
}
/* Icon-Box-Widget in Karten */
.rf-card .elementor-icon {
	color: var(--rf-accent);
	font-size: 32px;
}
.rf-card .elementor-icon-box-title {
	margin-bottom: var(--rf-space-2);
	font-size: var(--rf-fs-h3);
}
.rf-card .elementor-icon-box-description {
	margin: 0;
	color: var(--rf-muted);
}

/* ---------- Vorteile ([rf_vorteile]) ---------- */
.rf-vorteile {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rf-vorteile__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: var(--rf-space-3);
	border-radius: var(--rf-radius);
	background: var(--rf-accent-soft);
	color: var(--rf-accent);
}
.rf-vorteile__icon .rf-icon { width: 28px; height: 28px; }
.rf-vorteile__title {
	margin-bottom: var(--rf-space-2);
}
.rf-vorteile p {
	margin: 0;
	color: var(--rf-muted);
}
@media (max-width: 1024px) {
	.rf-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	.rf-vorteile { grid-template-columns: 1fr; gap: var(--rf-space-3); }
}

/* ---------- Schritte ---------- */
.rf-steps {
	counter-reset: rf-step;
}
ol.rf-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--rf-space-4);
	margin: 0;
	padding: 0;
	list-style: none;
}
.rf-steps > li,
.rf-step {
	position: relative;
	counter-increment: rf-step;
	padding-top: 56px;
}
.rf-steps > li::before,
.rf-step::before {
	content: counter(rf-step);
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--rf-primary);
	color: var(--rf-primary-contrast);
	font-weight: var(--rf-fw-bold);
	font-size: var(--rf-fs-base);
}
.rf-steps > li h3,
.rf-step .elementor-heading-title,
.rf-step .elementor-icon-box-title {
	margin-bottom: var(--rf-space-2);
	font-size: var(--rf-fs-h3);
}
.rf-steps > li p,
.rf-step .elementor-icon-box-description {
	margin: 0;
	color: var(--rf-muted);
}
@media (max-width: 1024px) {
	ol.rf-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
	ol.rf-steps { grid-template-columns: 1fr; }
	.rf-steps > li,
	.rf-step { padding-top: 0; padding-left: 56px; }
}

/* ---------- CTA-Band ---------- */
.rf-cta-band {
	padding: var(--rf-space-6) var(--rf-space-5);
	border-radius: var(--rf-radius);
	background: var(--rf-primary);
	color: #e6e8eb;
}
.rf-cta-band h2,
.rf-cta-band h3,
.rf-cta-band .elementor-heading-title {
	color: #fff;
}
.rf-cta-band a:not(.rf-btn):not(.elementor-button) {
	color: #fff;
}
.rf-cta-band .rf-btn--outline .elementor-button,
.rf-cta-band .rf-btn--outline {
	color: #fff;
}
@media (max-width: 767px) {
	.rf-cta-band { padding: var(--rf-space-5) var(--rf-space-4); }
}

/* ---------- FAQ (Elementor-Akkordeon, verschachteltes Akkordeon, <details>) ---------- */
.rf-faq .elementor-accordion-item,
.rf-faq .e-n-accordion-item,
.rf-faq details {
	margin-bottom: var(--rf-space-2);
	border: 1px solid var(--rf-border) !important;
	border-radius: var(--rf-radius);
	background: var(--rf-bg);
	overflow: hidden;
}
.rf-faq .elementor-tab-title,
.rf-faq .e-n-accordion-item-title,
.rf-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--rf-space-3);
	min-height: var(--rf-control-h);
	padding: var(--rf-space-3) var(--rf-space-4);
	border: 0 !important;
	color: var(--rf-primary);
	font-weight: var(--rf-fw-semibold);
	font-size: var(--rf-fs-base);
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}
.rf-faq summary::-webkit-details-marker { display: none; }
.rf-faq summary::after {
	content: "+";
	flex: none;
	font-size: 24px;
	line-height: 1;
	color: var(--rf-accent);
}
.rf-faq details[open] summary::after { content: "–"; }
.rf-faq .elementor-tab-title a,
.rf-faq .e-n-accordion-item-title-text {
	color: inherit;
	text-decoration: none;
}
.rf-faq .elementor-tab-content,
.rf-faq .e-n-accordion-item > [role="region"],
.rf-faq details > :not(summary) {
	padding: 0 var(--rf-space-4) var(--rf-space-4);
	border: 0 !important;
	color: var(--rf-text);
}

/* ---------- Buchungs-iFrame ---------- */
.rf-booking {
	width: 100%;
	overflow-x: hidden;
	border: 1px solid var(--rf-border);
	border-radius: var(--rf-radius);
	background: var(--rf-bg);
}
.rf-booking iframe {
	display: block;
	width: 100%;
	min-height: 1000px;
	border: 0;
}
@media (max-width: 767px) {
	.rf-booking { border-radius: 0; border-inline: 0; }
	.rf-booking iframe { min-height: 1400px; }
}

/* Hinweisbox nur zeigen, wenn Complianz das Buchungs-iFrame blockiert */
body .rf-booking-fallback {
	display: none;
}
body:has(.rf-booking .cmplz-blocked-content-container) .rf-booking-fallback,
body:has(.rf-booking iframe[data-src-cmplz]) .rf-booking-fallback,
body:has(.rf-booking .cmplz-placeholder-element) .rf-booking-fallback {
	display: flex;
}

/* ---------- Kontakt & Adresse ---------- */
.rf-kontakt {
	margin: 0;
	padding: 0;
	list-style: none;
}
.rf-kontakt li,
.rf-adresse {
	display: flex;
	align-items: flex-start;
	gap: var(--rf-space-2);
	margin-bottom: var(--rf-space-2);
}
.rf-kontakt .rf-icon,
.rf-adresse .rf-icon {
	margin-top: 2px;
	color: var(--rf-accent);
}
body .rf-kontakt a {
	font-weight: var(--rf-fw-semibold);
	text-decoration: none;
}
.rf-adresse {
	flex-wrap: wrap;
}
.rf-adresse__route {
	flex-basis: 100%;
	padding-left: 32px;
	font-weight: var(--rf-fw-semibold);
}

/* ---------- Parkhinweis-Legende ---------- */
.rf-legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--rf-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--rf-fs-sm);
}
.rf-legend li {
	display: inline-flex;
	align-items: center;
	gap: var(--rf-space-2);
}
.rf-legend li::before {
	content: "";
	width: 14px;
	height: 14px;
	border-radius: 3px;
	background: var(--rf-success);
}
.rf-legend .is-blocked::before {
	background: repeating-linear-gradient(45deg, var(--rf-danger) 0 3px, #fff 3px 6px);
	border: 1px solid var(--rf-danger);
}

/* ---------- Mobiler Sticky-Button ---------- */
.rf-sticky-cta {
	display: none;
}
@media (max-width: 767px) {
	.rf-sticky-cta {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 9990;
		display: flex;
		gap: var(--rf-space-2);
		padding: var(--rf-space-2) var(--rf-gutter) calc(var(--rf-space-2) + env(safe-area-inset-bottom));
		background: rgba(255, 255, 255, 0.96);
		border-top: 1px solid var(--rf-border);
		box-shadow: 0 -6px 20px rgba(17, 17, 17, 0.08);
		transition: transform 200ms ease;
	}
	.rf-sticky-cta.is-hidden {
		transform: translateY(110%);
	}
	.rf-sticky-cta__call,
	.rf-sticky-cta__book {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-height: var(--rf-control-h);
		border-radius: var(--rf-radius-btn);
		font-weight: var(--rf-fw-semibold);
		text-decoration: none;
	}
	/* Doppelte Klasse: schlägt Elementors Kit-Linkfarbe (.elementor-kit-N a) */
	.rf-sticky-cta .rf-sticky-cta__call {
		flex: 0 0 var(--rf-control-h);
		border: 2px solid var(--rf-primary);
		color: var(--rf-primary);
	}
	.rf-sticky-cta .rf-sticky-cta__book {
		flex: 1;
		background: var(--rf-accent);
		color: #fff;
	}
	.rf-sticky-cta .rf-sticky-cta__book:hover,
	.rf-sticky-cta .rf-sticky-cta__book:focus {
		background: var(--rf-accent-hover);
		color: #fff;
	}
	/* Platz für den Sticky-Button – im dunklen Footer statt als weißer Streifen unter der Seite */
	body.rf-has-sticky-cta .elementor-location-footer {
		padding-bottom: calc(var(--rf-control-h) + 2 * var(--rf-space-2) + env(safe-area-inset-bottom));
		background: #0a0a0a;
	}
}

/* ---------- Header (Elementor Theme Builder) ---------- */
/* Sticky per CSS statt Elementor-Sticky-JS: der Location-Wrapper ist direktes Body-Kind. */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}
.admin-bar .elementor-location-header {
	top: 32px;
}
@media (max-width: 782px) {
	.admin-bar .elementor-location-header { top: 46px; }
}
@media (max-width: 600px) {
	.admin-bar .elementor-location-header { top: 0; }
}
.rf-topbar p {
	margin: 0;
}
body .rf-topbar a {
	color: #fff;
	text-decoration: none;
}
body .rf-topbar a:hover {
	text-decoration: underline;
}
.rf-header .elementor-nav-menu--dropdown {
	border-top: 1px solid var(--rf-border);
	box-shadow: var(--rf-shadow-raised);
}
.rf-header .elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* ---------- Footer ---------- */
.rf-footer {
	color: #c9cdd3;
}
.rf-footer p:last-child {
	margin-bottom: 0;
}
.rf-footer a:not(.elementor-button) {
	color: #fff;
}
.rf-footer a:not(.elementor-button):hover {
	color: #fff;
	text-decoration: underline;
}
.rf-footer .rf-kontakt .rf-icon,
.rf-footer .rf-adresse .rf-icon {
	color: #8fb4ec; /* Rhein-Blau aufgehellt: Kontrast auf Schwarz ≥ 4,5:1 */
}
.rf-footer .rf-adresse strong {
	color: #fff;
}
.rf-footer .elementor-nav-menu a {
	text-decoration: none;
}

/* Gestaltete Wartungsseite (Elementor-Template) */
.rf-maintenance-address .rf-adresse {
	justify-content: center;
	text-align: left;
	color: var(--rf-muted);
	font-size: var(--rf-fs-sm);
}

/* ---------- Fallback-Wartungsseite ---------- */
.rf-maintenance {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: var(--rf-space-4) var(--rf-gutter);
	box-sizing: border-box;
	background: var(--rf-bg-alt);
}
.rf-maintenance__box {
	max-width: 560px;
	padding: var(--rf-space-6) var(--rf-space-5);
	border-radius: var(--rf-radius);
	background: var(--rf-bg);
	box-shadow: var(--rf-shadow-card);
	text-align: center;
}
.rf-maintenance__logo {
	width: 240px;
	margin-bottom: var(--rf-space-4);
}
.rf-maintenance h1 {
	font-size: var(--rf-fs-xl);
}
.rf-maintenance__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--rf-space-2);
	margin: var(--rf-space-4) 0 0;
}