/*
 * Tovogo Design Layer — isolated visual override stylesheet.
 *
 * This file is the ONLY place where Tovogo-specific visual changes
 * should be made. It is loaded by tovogo-design-layer.php and is
 * completely separate from the Astra theme, Elementor, WPCode, and
 * the Additional CSS stored in the Customizer.
 */

/* Shared control geometry. Deliberately compact rather than pill-shaped. */
body {
	--tvg-control-radius: 8px;
	--tvg-header-background: linear-gradient(112deg, #32155f 0%, #4a2188 52%, #5d2ca6 100%);
}

/* ==========================================================================
   Header / navigation — deep-purple premium redesign (.tvg-* — sitewide,
   injected by WPCode). CSS only: no HTML, JS, WPCode option, logo file,
   or navigation URLs are touched.

   The WPCode header's own <style> block prints AFTER our stylesheet in
   <head>, so equal-specificity rules would lose the cascade to it. Every
   selector below is prefixed with "body" to reliably win without
   !important. Breakpoints (993px / 992px / 640px) match the WPCode
   header's own, so no new responsive system is introduced.
   ========================================================================== */

/* --- Header shell: a compact, layered brand surface. The logo's white
   lettering stays crisp, while the subtle gradient and translucent lower
   edge keep the header from reading as a heavy solid block. --- */

body .tvg-header {
	background: var(--tvg-header-background);
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 8px 24px rgba(30, 11, 61, 0.18);
	position: sticky;
	top: 0;
}

/* LocalRent renders vehicle-detail dialogs into this body-level portal.
   Keep those transient dialogs above TOVOGO's sticky header (100000) so
   their upper edge and controls are never hidden behind navigation. */
body > lr-whitelabel-teleport {
	--lr-wl-zindex: 100001 !important;
}

/* Keep the sticky header clear of the WordPress admin bar (body.admin-bar
   is a standard core class, added whenever the toolbar is showing) so it
   never overlaps or hides behind it. */
body.admin-bar .tvg-header {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .tvg-header {
		top: 46px;
	}
}

/* --- Inner layout: taller, more generous, still centered at 1400px ---

   gap: real-Chromium measurement (getBoundingClientRect at
   1120/1136/1140/1160/1200/1440px) found the desktop composition
   (logo + full inline nav, no wrap) has a fixed packed content width
   — .tvg-inner's own justify-content:space-between
   (WPCode's own rule, untouched) only has room to distribute *extra*
   space once the container is comfortably wide; below that it adds
   none, so the explicit `gap` value alone becomes the floor. At
   exactly the 1120px breakpoint the real *usable* width is ~15px
   narrower than the requested viewport (vertical scrollbar), so the
   32px-gap floor (1119.77px measured, constant across
   1120–1160px) was overflowing the page by that same ~15px.
   Confirmed at 1440/1200/1024 (all comfortably above the floor) that
   space-between's own distributed extra space makes this value
   invisible: reducing it does not move logo/nav/right by a single
   pixel there — it only shrinks the floor, which is exactly what
   1120–1160px needed. 16px (half) leaves ~17px of real margin at
   1120px, safely above typical scrollbar widths. --- */

@media (min-width: 993px) {
	body .tvg-header .tvg-inner {
		min-height: 68px;
		gap: 16px;
	}
}

/* --- Logo: balanced premium size, unchanged artwork --- */

@media (min-width: 641px) {
	body .tvg-logo img {
		width: 145px;
	}
}

/* The original header reserves a right-hand utility area even when it
   contains no account or language controls. On desktop, use that space for
   a restrained brand promise so the composition stays balanced rather than
   leaving an unexplained empty end-cap. */
@media (min-width: 1120px) {
	body .tvg-right {
		min-width: 174px;
		justify-content: flex-end;
	}

	body .tvg-right::before {
		content: "Reisen. Einfacher.";
		padding-left: 16px;
		border-left: 1px solid rgba(255, 255, 255, 0.24);
		color: rgba(255, 253, 251, 0.76);
		font-size: 11px;
		font-weight: 700;
		letter-spacing: 0.12em;
		line-height: 1.2;
		text-transform: uppercase;
	}
}

/* --- Logo: the header is purple again, so the contrasting "brand plate"
   that used to sit behind the (white-lettered) logo on the white header
   is now redundant — the artwork already matches its background.
   Background only goes transparent; padding/radius are left exactly as
   they were so the logo keeps its exact position/spacing and never
   jumps or resizes. Artwork itself is untouched. --- */
body .tvg-logo a {
	background: transparent;
	border-radius: 12px;
	padding: 8px 15px;
}

@media (max-width: 543px) {
	body .tvg-logo a {
		border-radius: 10px;
		padding: 7px 12px;
	}
}

/* --- Navigation: clean and minimal — no glass/frosted capsule box
   anymore. max-width is kept so the nav still hugs its own content
   (not the full header width) rather than reading as a giant bar;
   flex-grow/flex-basis are left exactly as the WPCode CSS set them, and
   the leftover space is absorbed by .tvg-inner's own
   justify-content: space-between, which keeps it visually centered. --- */

@media (min-width: 993px) {
	body .tvg-nav {
		max-width: max-content;
	}
}

/* --- Nav links: clean modern type, warm ivory on the purple header,
   comfortable padding, pill shape. The Autos dropdown arrow (":after"
   in the WPCode CSS, no color of its own) inherits this same ivory via
   currentColor — no separate rule needed. --- */

body .tvg-nav > a,
body .tvg-nav-item > .tvg-nav-parent {
	position: relative;
	color: #fffdfb;
	font-weight: 600;
	letter-spacing: 0.005em;
	padding: 8px 13px;
	border-radius: var(--tvg-control-radius);
	transition: color 180ms ease, background-color 180ms ease;
}

/* --- Active page: a slim underline identifies the destination without
   turning the navigation into a row of filled tabs. --- */

body .tvg-nav > a.active,
body .tvg-nav-item > .tvg-nav-parent.active {
	background: transparent;
	color: #fffdfb;
	box-shadow: none;
}

body .tvg-nav > a.active::after,
body .tvg-nav-item > .tvg-nav-parent.active::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 1px;
	height: 1px;
	border-radius: 1px;
	background: linear-gradient(90deg, rgba(214, 187, 255, 0.7), #f7f2ea, rgba(214, 187, 255, 0.7));
}

/* --- Hover: subtle translucent ivory, never applied to the active item
   itself so hover can never out-compete the active pill. No motion —
   quiet and premium, not a SaaS-style lift/animate interaction. --- */

body .tvg-nav > a:hover:not(.active),
body .tvg-nav-item > .tvg-nav-parent:hover:not(.active) {
	background: rgba(255, 253, 251, 0.10);
	color: #fffdfb;
}

/* --- Autos dropdown: a light, spacious destination panel instead of a
   generic square menu. The transparent hover bridge preserves the existing
   desktop hover behaviour while allowing the panel to breathe below nav. --- */

body .tvg-submenu {
	top: calc(100% + 10px);
	min-width: 232px;
	padding: 8px;
	border: 1px solid rgba(64, 29, 112, 0.10);
	border-radius: var(--tvg-control-radius);
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 20px 44px rgba(35, 13, 68, 0.20), 0 4px 12px rgba(35, 13, 68, 0.08);
	overflow: visible;
}

body .tvg-submenu::before {
	top: -12px;
	height: 12px;
}

body .tvg-submenu a {
	position: relative;
	padding: 11px 40px 11px 14px;
	border-radius: var(--tvg-control-radius);
	color: #351563 !important;
	font-size: 14px;
	font-weight: 600;
	transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}

body .tvg-submenu a::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 14px;
	color: #6a40a5;
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	opacity: 0.56;
	transform: translateY(-50%);
	transition: transform 180ms ease, opacity 180ms ease;
}

body .tvg-submenu a:hover {
	background: linear-gradient(90deg, rgba(84, 36, 157, 0.12), rgba(112, 214, 228, 0.10));
	color: #351563 !important;
	transform: translateX(2px);
}

body .tvg-submenu a:hover::after {
	opacity: 1;
	transform: translate(2px, -50%);
}

body .tvg-submenu a.active {
	background: rgba(84, 36, 157, 0.12);
	box-shadow: inset 3px 0 0 #5d2ca6;
	color: #351563 !important;
	font-weight: 700;
}

/* --- Home nav item: keep the explicit “Startseite” label in the desktop
   navigation. It is easier to scan than a standalone house icon and uses
   the same rhythm as every other top-level destination. --- */
body .tvg-nav > a:first-child {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 13px;
}

body .tvg-nav > a:first-child .tvg-nav-home-icon {
	display: none;
}

body .tvg-nav > a:first-child .tvg-visually-hidden {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* Standard clip-based screen-reader-only utility (WebAIM's "sr-only"
   recipe) — visually hidden but never display:none/visibility:hidden, so
   it stays in the accessibility tree. Used to carry the home icon's
   "Startseite" accessible label. */
body .tvg-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* --- Narrowest phones: same real-Chromium measurement as the desktop
   .tvg-inner gap fix above. Below ~380px, .tvg-inner's own
   justify-content:space-between (WPCode's own rule, untouched) has no
   extra space left to distribute between the logo and the hamburger,
   so the existing 12px gap (WPCode's own value at this tier) becomes
   the floor — measured constant at 352.34px (390/375/360px all show
   the identical packed position), which overflowed the page at 360px
   by the same ~7px the scrollbar takes from the usable width. Zeroed
   here — confirmed at 768/430/390 (all comfortably above this floor)
   that space-between's own distributed space makes this value
   invisible there: logo and the hamburger sit in the exact same
   position either way, since space-between fills in whatever gap
   value is not explicitly set. Only matters, and only fixes, the
   sub-380px floor. --- */
@media (max-width: 640px) {
	body .tvg-header .tvg-inner {
		gap: 0;
	}
}

/* ==========================================================================
   Header — compact mobile navigation (hamburger + dropdown panel).
   Sitewide, injected by tovogo_design_layer_print_mobile_nav() in
   tovogo-design-layer.php — see that function's own docblock for the
   full mechanism and the measurement data behind the breakpoint below.

   BREAKPOINT: 1119.98px / 1120px, NOT the WPCode header's own 992/993px
   boundary. Measured directly (getBoundingClientRect/scrollWidth in a
   real Chromium instance) across 1440/1200/1024/992/768/430/390/360px:
   the existing desktop header layout (logo + full inline nav, no wrap)
   needs the viewport to be at least 1120px wide to fit without the
   PAGE ITSELF overflowing horizontally — confirmed
   scrollWidth stayed a constant 1120px (i.e. genuinely too wide to fit)
   at every tested width from 993px up to 1119px, and only stopped
   overflowing at 1120px. The WPCode header's own responsive CSS only
   switches away from that layout at max-width:992px, so 993–1119px
   (e.g. the common 1024px tablet-landscape width, explicitly one of the
   required test widths) has been overflowing on every load, before this
   change. 992px was measured and found insufficient, so this
   intentionally does not reuse it — using the actual, verified-safe
   value instead, per "determine the clean breakpoint from actual layout
   behavior."

   PROGRESSIVE ENHANCEMENT: every rule below that hides/shows something
   is scoped under html.tvg-header-js, added by the script above only
   after the button + panel are fully built. Without it (JS blocked or
   erroring), none of this activates and .tvg-nav keeps using the
   WPCode header's own existing wrap/horizontal-scroll behavior at
   narrow widths, exactly as before this change — navigation is never
   lost. Desktop (min-width: 1120px) carries an explicit !important
   safety net at the end of this block so the mobile toggle/panel can
   never show there regardless of any leftover JS state.
   ========================================================================== */

/* --- Hamburger button: hidden by default everywhere; only shown inside
   the narrow-width rule below. Same restrained translucent-ivory
   language as the rest of the header — no new color, shadow, or
   gradient introduced. --- */
html.tvg-header-js body .tvg-mobile-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid rgba(255, 253, 251, 0.32);
	border-radius: 8px;
	background: rgba(255, 253, 251, 0.06);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

html.tvg-header-js body .tvg-mobile-menu-toggle:hover {
	background: rgba(255, 253, 251, 0.14);
	border-color: rgba(255, 253, 251, 0.48);
}

html.tvg-header-js body .tvg-mobile-menu-toggle:focus-visible {
	outline: 2px solid #fffdfb;
	outline-offset: 2px;
}

/* Hamburger -> close icon: three bars, restrained transform-only
   transition (no spin, no bounce, no scale). */
html.tvg-header-js body .tvg-mobile-menu-toggle-bars {
	position: relative;
	width: 18px;
	height: 14px;
	display: block;
}

html.tvg-header-js body .tvg-mobile-menu-toggle-bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 1px;
	background: #fffdfb;
	transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 280ms cubic-bezier(0.22, 1, 0.36, 1), top 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

html.tvg-header-js body .tvg-mobile-menu-toggle-bars span:nth-child(1) { top: 0; }
html.tvg-header-js body .tvg-mobile-menu-toggle-bars span:nth-child(2) { top: 6px; }
html.tvg-header-js body .tvg-mobile-menu-toggle-bars span:nth-child(3) { top: 12px; }

html.tvg-header-js body .tvg-mobile-menu-toggle.is-open .tvg-mobile-menu-toggle-bars span:nth-child(1) {
	top: 6px;
	transform: rotate(45deg);
}

html.tvg-header-js body .tvg-mobile-menu-toggle.is-open .tvg-mobile-menu-toggle-bars span:nth-child(2) {
	opacity: 0;
}

html.tvg-header-js body .tvg-mobile-menu-toggle.is-open .tvg-mobile-menu-toggle-bars span:nth-child(3) {
	top: 6px;
	transform: rotate(-45deg);
}

/* --- Mobile nav panel: opens directly below the sticky header via
   position:absolute (header is already position:sticky, so it is the
   containing block for this) — never pushes page content down, never
   animates height. Same deep Tovogo purple as the header itself, one
   subtle top keyline, no card, no rounded floating capsule, no
   glassmorphism, no gradient. Closed state uses opacity/visibility/
   pointer-events + a small translateY, never display:none, so the
   opacity/transform transition below can actually run. --- */
html.tvg-header-js body .tvg-mobile-nav {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: calc(100svh - 64px);
	overflow-y: auto;
	background: var(--tvg-header-background);
	border-top: 1px solid rgba(255, 253, 251, 0.16);
	box-shadow: 0 16px 32px rgba(20, 8, 46, 0.22);
	padding: 4px 28px 20px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transform: translateY(-6px);
	transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 300ms;
}

html.tvg-header-js body .tvg-mobile-nav.is-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateY(0);
	transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0s;
}

html.tvg-header-js body .tvg-mobile-nav-list {
	display: flex;
	flex-direction: column;
	max-width: 1400px;
	margin: 0 auto;
}

/* --- Links: flat vertical list, fine translucent keyline between
   items, no pills, no card per-item. A consistent left inset makes
   room for the active-state accent bar below without shifting text
   between active/inactive states. --- */
html.tvg-header-js body .tvg-mobile-nav-link {
	position: relative;
	display: block;
	padding: 16px 4px 16px 18px;
	color: #fffdfb;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	border-top: 1px solid rgba(255, 253, 251, 0.14);
}

html.tvg-header-js body .tvg-mobile-nav-link:first-child {
	border-top: 0;
}

/* Autos keeps its destination link on mobile and gains an adjacent,
   keyboard-accessible disclosure button for the real desktop sub-links. */
html.tvg-header-js body .tvg-mobile-nav-group-row {
	display: flex;
	align-items: stretch;
	border-top: 1px solid rgba(255, 253, 251, 0.14);
}

html.tvg-header-js body .tvg-mobile-nav-list > :first-child .tvg-mobile-nav-link {
	border-top: 0;
}

html.tvg-header-js body .tvg-mobile-nav-group-row .tvg-mobile-nav-link {
	flex: 1 1 auto;
	border-top: 0;
}

html.tvg-header-js body .tvg-mobile-nav-expander {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 52px;
	padding: 0;
	border: 0;
	border-left: 1px solid rgba(255, 253, 251, 0.14);
	background: transparent;
	color: #fffdfb;
	cursor: pointer;
}

html.tvg-header-js body .tvg-mobile-nav-expander span {
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform 180ms ease;
}

html.tvg-header-js body .tvg-mobile-nav-group.is-open .tvg-mobile-nav-expander span {
	transform: rotate(225deg) translate(-2px, -2px);
}

html.tvg-header-js body .tvg-mobile-nav-expander:focus-visible {
	outline: 2px solid #fffdfb;
	outline-offset: -2px;
}

html.tvg-header-js body .tvg-mobile-nav-submenu {
	padding: 4px 0 10px 18px;
	background: rgba(20, 8, 46, 0.18);
}

html.tvg-header-js body .tvg-mobile-nav-submenu-link {
	display: block;
	padding: 11px 18px;
	color: rgba(255, 253, 251, 0.88);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

html.tvg-header-js body .tvg-mobile-nav-submenu-link:focus-visible {
	outline: 2px solid #fffdfb;
	outline-offset: -2px;
}

html.tvg-header-js body .tvg-mobile-nav-link:focus-visible {
	outline: 2px solid #fffdfb;
	outline-offset: -2px;
}

/* Strong active state without a pill/badge: bold ivory text plus a
   thin left accent bar, matching the desktop nav's own restraint. */
html.tvg-header-js body .tvg-mobile-nav-link.active {
	font-weight: 700;
}

html.tvg-header-js body .tvg-mobile-nav-link.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: 14px;
	bottom: 14px;
	width: 3px;
	border-radius: 2px;
	background: #fffdfb;
}

/* --- Home item, mobile panel: the cloned link carries the exact same
   icon+span markup as its desktop counterpart (see
   tovogo_design_layer_print_header_home_icon() in tovogo-design-layer.php)
   — here the two are simply flipped so the panel reads "Startseite" as
   plain visible text, same as every other item in this list, instead of
   an unlabeled icon. --- */
html.tvg-header-js body .tvg-mobile-nav-link .tvg-nav-home-icon {
	display: none;
}

html.tvg-header-js body .tvg-mobile-nav-link .tvg-visually-hidden {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	overflow: visible;
	clip: auto;
	clip-path: none;
	white-space: normal;
}

/* --- Activate at narrow widths only: hide the hamburger's sibling
   inline nav and show the toggle. .tvg-inner/.tvg-right are forced back
   to a single no-wrap row (overriding the WPCode header's own ≤992px
   wrap/center rules, which existed to accommodate the now-hidden inline
   nav) so the layout reads as "logo left / hamburger right", exactly
   the requested composition, at every width in this range. --- */
@media (max-width: 1119.98px) {
	html.tvg-header-js body .tvg-nav {
		display: none;
	}

	html.tvg-header-js body .tvg-mobile-menu-toggle {
		display: inline-flex;
	}

	html.tvg-header-js body .tvg-header .tvg-inner {
		flex-wrap: nowrap;
		justify-content: space-between;
		min-height: 64px;
	}

	html.tvg-header-js body .tvg-header .tvg-right {
		flex-wrap: nowrap;
	}
}

/* --- Desktop safety net: even if JS ever left stale state behind (a
   resize race, a future bug), the toggle/panel can never render at true
   desktop widths. Belt-and-suspenders, same principle already used
   elsewhere in this file for prefers-reduced-motion. --- */
@media (min-width: 1120px) {
	body .tvg-mobile-menu-toggle,
	body .tvg-mobile-nav {
		display: none !important;
	}
}

/* --- Reduced motion: instant open/close, no icon or panel transition,
   still fully functional. --- */
@media (prefers-reduced-motion: reduce) {
	html.tvg-header-js body .tvg-mobile-menu-toggle-bars span,
	html.tvg-header-js body .tvg-mobile-nav {
		transition: none;
	}
}

/* ========================================================================== 
   Mobile header refresh — an intentionally distinct, touch-first composition.
   The desktop header stays exactly as-is; this only restyles the existing
   accessible mobile toggle and cloned navigation at widths below 1120px.
   ========================================================================== */
@media (max-width: 1119.98px) {
	html.tvg-header-js body .tvg-header {
		border-bottom-color: rgba(255, 253, 251, 0.18);
		box-shadow: 0 10px 26px rgba(25, 8, 55, 0.24);
	}

	html.tvg-header-js body .tvg-header .tvg-inner {
		min-height: 66px;
		padding: 0 18px;
	}

	html.tvg-header-js body .tvg-logo a {
		padding: 7px 0;
	}

	html.tvg-header-js body .tvg-logo img {
		width: 130px;
	}

	html.tvg-header-js body .tvg-mobile-menu-toggle {
		width: 44px;
		height: 44px;
		border: 1px solid rgba(255, 253, 251, 0.28);
		border-radius: 50%;
		background: rgba(255, 253, 251, 0.11);
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
	}

	html.tvg-header-js body .tvg-mobile-menu-toggle:hover,
	html.tvg-header-js body .tvg-mobile-menu-toggle.is-open {
		background: #fffdfb;
		border-color: #fffdfb;
	}

	html.tvg-header-js body .tvg-mobile-menu-toggle.is-open .tvg-mobile-menu-toggle-bars span {
		background: #3b196f;
	}

	html.tvg-header-js body .tvg-mobile-nav {
		max-height: calc(100svh - 66px);
		padding: 14px 16px 28px;
		border-top: 0;
		border-radius: 0 0 24px 24px;
		background: var(--tvg-header-background);
		box-shadow: 0 20px 42px rgba(23, 8, 50, 0.30);
		transform: translateY(-10px);
	}

	html.tvg-header-js body .tvg-mobile-nav::before {
		content: "Navigation";
		display: block;
		padding: 1px 4px 10px;
		color: rgba(255, 253, 251, 0.64);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: 0.15em;
		text-transform: uppercase;
	}

	html.tvg-header-js body .tvg-mobile-nav-list {
		gap: 7px;
	}

	html.tvg-header-js body .tvg-mobile-nav-link,
	html.tvg-header-js body .tvg-mobile-nav-group-row {
		border: 0;
		border-radius: 12px;
		background: rgba(255, 253, 251, 0.09);
	}

	html.tvg-header-js body .tvg-mobile-nav-link {
		padding: 15px 42px 15px 16px;
		font-size: 16px;
		line-height: 1.25;
		transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
	}

	html.tvg-header-js body .tvg-mobile-nav-link::after {
		content: "→";
		position: absolute;
		top: 50%;
		right: 16px;
		color: rgba(255, 253, 251, 0.62);
		font-size: 19px;
		font-weight: 400;
		line-height: 1;
		transform: translateY(-50%);
	}

	html.tvg-header-js body .tvg-mobile-nav-link:hover {
		background: rgba(255, 253, 251, 0.16);
		transform: translateX(2px);
	}

	html.tvg-header-js body .tvg-mobile-nav-link.active {
		background: #fffdfb;
		color: #3b196f;
		box-shadow: 0 8px 20px rgba(22, 7, 48, 0.16);
	}

	html.tvg-header-js body .tvg-mobile-nav-link.active::before {
		display: none;
	}

	html.tvg-header-js body .tvg-mobile-nav-link.active::after {
		color: #6a40a5;
	}

	html.tvg-header-js body .tvg-mobile-nav-group-row {
		overflow: hidden;
	}

	html.tvg-header-js body .tvg-mobile-nav-group-row .tvg-mobile-nav-link {
		border-radius: 0;
		background: transparent;
	}

	html.tvg-header-js body .tvg-mobile-nav-group-row .tvg-mobile-nav-link.active {
		background: #fffdfb;
		color: #3b196f;
	}

	html.tvg-header-js body .tvg-mobile-nav-expander {
		flex-basis: 54px;
		border-left-color: rgba(255, 253, 251, 0.16);
	}

	html.tvg-header-js body .tvg-mobile-nav-submenu {
		margin-top: 7px;
		padding: 7px 8px;
		border-radius: 12px;
		background: rgba(15, 5, 35, 0.22);
	}

	html.tvg-header-js body .tvg-mobile-nav-submenu-link {
		padding: 11px 12px;
		border-radius: 8px;
	}
}

@media (max-width: 420px) {
	html.tvg-header-js body .tvg-header .tvg-inner {
		padding: 0 14px;
	}

	html.tvg-header-js body .tvg-logo img {
		width: 118px;
	}
}

/* ==========================================================================
   Footer — premium editorial redesign (.tvg-footer — sitewide, printed by
   tovogo_design_layer_print_site_footer() in tovogo-design-layer.php; see
   that function's own docblock for full source-inspection notes).

   SOURCE: the previously-visible footer (`<footer class="tovogo-footer">`)
   is entirely IHAF-managed (Insert Headers and Footers plugin, wp_options
   row `ihaf_insert_footer`) — the same system already documented above as
   the source of `.tvg-header`. Its stored HTML/CSS is left completely
   untouched (zero database writes): the rule immediately below only hides
   its rendered output, and a brand-new `.tvg-footer` is printed by this
   plugin in its place. Same specificity technique already used for
   `.tvg-header`: "body footer.tovogo-footer" (element + element + class)
   reliably beats IHAF's own bare ".tovogo-footer" rule (class-only)
   regardless of source order, no !important needed. Astra's own theme
   footer (#colophon) is untouched and was already empty/0px before this
   change — not part of this redesign. ========================================================================== */

body footer.tovogo-footer {
	display: none;
}

/* --- Footer shell: deep aubergine, deliberately darker than the header
   purple (#54249d) for a quieter closing tone. --- */
body .tvg-footer {
	background: #2d123f;
	color: #f3ede4;
	border-top: 1px solid rgba(243, 237, 228, 0.08);
}

body .tvg-footer * {
	box-sizing: border-box;
}

body .tvg-footer-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 88px 32px 40px;
}

/* --- Top area: brand statement left, compact nav right. --- */
body .tvg-footer-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 48px;
	flex-wrap: wrap;
}

body .tvg-footer-brand {
	flex: 1 1 320px;
	max-width: 420px;
}

body .tvg-footer-logo {
	display: inline-flex;
	margin-bottom: 20px;
}

body .tvg-footer-logo-img {
	width: 160px;
	height: auto;
	display: block;
}

body .tvg-footer-statement {
	margin: 0 0 10px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: #f3ede4;
}

body .tvg-footer-substatement {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: rgba(243, 237, 228, 0.7);
}

body .tvg-footer-nav {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px 30px;
	padding-top: 8px;
}

body .tvg-footer-nav a {
	color: #f3ede4;
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

body .tvg-footer-nav a:hover,
body .tvg-footer-nav a:focus-visible {
	color: #ffffff;
	border-bottom-color: rgba(243, 237, 228, 0.55);
}

body .tvg-footer-nav a:focus-visible {
	outline: 2px solid rgba(243, 237, 228, 0.6);
	outline-offset: 4px;
}

/* --- Restored "Über uns" heading + paragraph, original footer content
   kept alongside (not replacing) the new tagline above it. --- */
body .tvg-footer-about {
	margin-top: 22px;
	padding-top: 22px;
	border-top: 1px solid rgba(243, 237, 228, 0.1);
}

body .tvg-footer-about-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #f3ede4;
}

body .tvg-footer-about-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.65;
	color: rgba(243, 237, 228, 0.62);
}

/* --- Secondary row: restored original content (Unternehmen/Support
   links, address + social, app-download links) — three quiet, evenly
   spaced groups beneath the main brand/nav row, not a fourth heavy
   corporate column set. --- */
body .tvg-footer-secondary {
	margin-top: 48px;
	display: flex;
	flex-wrap: wrap;
	gap: 36px 48px;
	justify-content: space-between;
}

body .tvg-footer-secondary-nav {
	flex: 1 1 220px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

body .tvg-footer-secondary-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(243, 237, 228, 0.5);
	margin-bottom: 2px;
}

body .tvg-footer-secondary-nav a {
	color: rgba(243, 237, 228, 0.78);
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	width: fit-content;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

body .tvg-footer-secondary-nav a:hover,
body .tvg-footer-secondary-nav a:focus-visible {
	color: #f3ede4;
	border-bottom-color: rgba(243, 237, 228, 0.45);
}

body .tvg-footer-secondary-nav a:focus-visible {
	outline: 2px solid rgba(243, 237, 228, 0.6);
	outline-offset: 3px;
}

body .tvg-footer-contact {
	flex: 1 1 220px;
}

body .tvg-footer-address {
	font-style: normal;
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.7;
	color: rgba(243, 237, 228, 0.62);
}

body .tvg-footer-social {
	display: flex;
	align-items: center;
	gap: 12px;
}

body .tvg-footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(243, 237, 228, 0.08);
	color: rgba(243, 237, 228, 0.85);
	transition: background 200ms ease, color 200ms ease;
}

body .tvg-footer-social a:hover,
body .tvg-footer-social a:focus-visible {
	background: rgba(243, 237, 228, 0.16);
	color: #ffffff;
}

body .tvg-footer-social a:focus-visible {
	outline: 2px solid rgba(243, 237, 228, 0.6);
	outline-offset: 2px;
}

body .tvg-footer-social svg {
	width: 16px;
	height: 16px;
	display: block;
}

body .tvg-footer-apps {
	flex: 1 1 220px;
}

body .tvg-footer-apps-label {
	display: block;
	margin-bottom: 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: rgba(243, 237, 228, 0.62);
}

body .tvg-footer-apps-links {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

body .tvg-footer-apps-links a {
	width: fit-content;
	color: rgba(243, 237, 228, 0.78);
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

body .tvg-footer-apps-links a:hover,
body .tvg-footer-apps-links a:focus-visible {
	color: #f3ede4;
	border-bottom-color: rgba(243, 237, 228, 0.45);
}

body .tvg-footer-apps-links a:focus-visible {
	outline: 2px solid rgba(243, 237, 228, 0.6);
	outline-offset: 3px;
}

/* --- Keyline separating main content from the bottom meta row. --- */
body .tvg-footer-keyline {
	margin-top: 48px;
	border-top: 1px solid rgba(243, 237, 228, 0.14);
}

/* --- Bottom meta row: legal / copyright — one quiet line, reordered
   visually (copyright, legal) via flex `order` while the DOM keeps the
   mobile-preferred reading order (legal, copyright). --- */
body .tvg-footer-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px 24px;
	padding-top: 24px;
}

body .tvg-footer-legal {
	order: 2;
	display: flex;
	gap: 18px;
}

body .tvg-footer-legal a {
	color: rgba(243, 237, 228, 0.7);
	text-decoration: none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	border-bottom: 1px solid transparent;
	transition: color 200ms ease, border-color 200ms ease;
}

body .tvg-footer-legal a:hover,
body .tvg-footer-legal a:focus-visible {
	color: #f3ede4;
	border-bottom-color: rgba(243, 237, 228, 0.45);
}

body .tvg-footer-legal a:focus-visible {
	outline: 2px solid rgba(243, 237, 228, 0.6);
	outline-offset: 3px;
}

body .tvg-footer-copyright {
	order: 1;
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: rgba(243, 237, 228, 0.7);
}

/* --- Tablet (<=992px): brand stacks above nav, nav left-aligns and
   wraps — still two clear blocks, never cards. --- */
@media (max-width: 992px) {
	body .tvg-footer-inner {
		padding: 64px 28px 32px;
	}

	body .tvg-footer-top {
		flex-direction: column;
		gap: 28px;
	}

	body .tvg-footer-brand {
		max-width: 480px;
	}

	body .tvg-footer-nav {
		justify-content: flex-start;
		padding-top: 0;
	}

	body .tvg-footer-secondary {
		margin-top: 36px;
		gap: 28px 36px;
	}

	body .tvg-footer-keyline {
		margin-top: 40px;
	}

	body .tvg-footer-bottom {
		justify-content: flex-start;
	}
}

/* --- Mobile (<=543px): everything stacks in one column, DOM order
   (brand, nav, legal, copyright), thin separators instead of the
   desktop keyline + inline meta row. --- */
@media (max-width: 543px) {
	body .tvg-footer-inner {
		padding: 48px 20px 28px;
	}

	body .tvg-footer-top {
		flex-direction: column;
		gap: 24px;
	}

	body .tvg-footer-statement {
		font-size: 22px;
	}

	body .tvg-footer-nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
	}

	body .tvg-footer-about {
		margin-top: 18px;
		padding-top: 18px;
	}

	body .tvg-footer-secondary {
		flex-direction: column;
		gap: 28px;
		margin-top: 28px;
	}

	body .tvg-footer-keyline {
		margin-top: 28px;
	}

	body .tvg-footer-bottom {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 12px;
		padding-top: 20px;
	}

	body .tvg-footer-legal,
	body .tvg-footer-copyright {
		order: initial;
	}

	body .tvg-footer-legal {
		gap: 16px;
	}
}

/* ==========================================================================
   404 page — premium branded "route interrupted" experience
   (body.error404 only). Markup is printed by
   tovogo_design_layer_render_404_page() on Astra's own
   `astra_content_before` hook (see that function's own docblock for
   the full source-inspection notes). Astra's generic
   `.error-404.not-found` content is hidden, not altered, immediately
   below — header/footer/mobile-nav/scroll-to-top are never touched.
   Echoes the homepage hero's visual language (same gradient, same
   ivory/lavender palette, same route+node SVG technique) via its own
   independent .tovogo-404-* classes — never a reuse of .tovogo-hero-*,
   so neither page can affect the other. ========================================================================== */

/* Hide ONLY Astra's own generic 404 content — nothing else in #primary,
   nothing in the header/footer/mobile-nav is targeted. */
body.error404 .error-404.not-found {
	display: none;
}

body.error404 .tovogo-404 {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #2a1147 0%, #1c0e33 55%, #120a1f 100%);
	padding: 96px 32px;
	display: flex;
	align-items: center;
	/* Astra's own #page is a flex column with min-height:100vh, and
	   #content (now empty — its generic 404 content is hidden) normally
	   flex-grows to soak up any leftover viewport space, which pushed
	   the footer down and left a blank field between this section and
	   the footer. This section is also a #page flex child (same
	   astra_content_before placement already used by the homepage
	   hero), so letting IT grow instead — with #content's own grow
	   disabled below — makes the existing layout fill the viewport
	   naturally, no hardcoded vh/pixel subtraction needed. */
	flex: 1 1 auto;
}

/* See the comment above: stop Astra's own #content from also
   competing for the leftover flex space now that its only child
   (the hidden generic 404 template) has zero height. */
body.error404 #content {
	flex-grow: 0;
}

/* Astra's own "separate containers" layout style (body class
   ast-separate-container) gives #primary a fixed 72px top/bottom
   margin regardless of its content. With that content now hidden,
   #primary itself is otherwise empty — its margin alone was leaving a
   144px dead gap before the footer. Zeroed here, scoped to this one
   now-empty element on the 404 response only; no other page's
   #primary is touched. Astra's own margin-bottom rule ties this
   selector's specificity and wins the tie by printing later in
   <head>, so !important is used for this single, narrow, well-
   justified override — the same pattern already used elsewhere in
   this file for the mandatory reduced-motion safety net.

   Below Astra's own tablet/mobile breakpoint (<=992px), Astra swaps
   that spacing from margin to ~65-72px top/bottom *padding* on this
   same #primary instead — confirmed via real-browser measurement to
   reopen the identical dead gap at 992/768/430/390/375/360. Padding
   is zeroed here for the same reason and under the same narrow
   scoping as the margin above; confirmed via the same measurement
   that #primary is already zero-height above 992px, so this is a
   no-op at desktop and only affects the 404 response at tablet/
   mobile widths. */
body.error404 #primary {
	margin: 0 !important;
	padding: 0 !important;
}

body.error404 .tovogo-404 * {
	box-sizing: border-box;
}

body.error404 .tovogo-404-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: minmax(0, 560px) minmax(0, 1fr);
	align-items: center;
	gap: 48px;
}

body.error404 .tovogo-404-eyebrow {
	display: inline-flex;
	align-items: center;
	color: #cdb8ef;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

body.error404 .tovogo-404-title {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(38px, 6vw, 84px);
	line-height: 1.08;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #f7f2ea;
}

body.error404 .tovogo-404-text {
	margin: 0 0 36px;
	max-width: 560px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: rgba(247, 242, 234, 0.72);
}

body.error404 .tovogo-404-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

body.error404 .tovogo-404-cta {
	display: inline-flex;
	align-items: center;
	background: #f7f2ea;
	color: #241041;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 16px 34px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

body.error404 .tovogo-404-cta:hover {
	background: #ffffff;
	transform: translateY(-1px);
}

body.error404 .tovogo-404-cta:focus-visible {
	outline: 2px solid #cdb8ef;
	outline-offset: 3px;
}

body.error404 .tovogo-404-secondary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: rgba(247, 242, 234, 0.72);
	text-decoration: none;
	transition: color 0.2s ease;
}

body.error404 .tovogo-404-secondary span {
	transition: transform 0.2s ease;
	display: inline-block;
}

body.error404 .tovogo-404-secondary:hover {
	color: #f7f2ea;
}

body.error404 .tovogo-404-secondary:hover span {
	transform: translateX(3px);
}

body.error404 .tovogo-404-secondary:focus-visible {
	outline: 2px solid #cdb8ef;
	outline-offset: 3px;
}

/* --- Right-side visual: same atmospheric-glow + contour + route/node
   technique as the homepage hero, but the route here deliberately
   never arrives — 3 solid waypoints on a fully-drawn path, then one
   dashed, fading segment toward a hollow "ghost" node that is never
   reached. --- */
body.error404 .tovogo-404-visual {
	position: relative;
	min-height: 360px;
}

body.error404 .tovogo-404-glow {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(circle at 66% 30%, rgba(138, 95, 214, 0.24) 0%, rgba(138, 95, 214, 0) 56%),
		radial-gradient(circle at 22% 78%, rgba(101, 66, 170, 0.13) 0%, rgba(101, 66, 170, 0) 52%);
	pointer-events: none;
}

body.error404 .tovogo-404-route-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(440px, 100%);
	height: auto;
	margin: 0 auto;
}

body.error404 .tovogo-404-contour {
	fill: none;
	stroke: rgba(247, 242, 234, 0.07);
	stroke-width: 1;
}

body.error404 .tovogo-404-contour--2 {
	stroke: rgba(247, 242, 234, 0.12);
	stroke-dasharray: 3 7;
}

body.error404 .tovogo-404-route-main {
	fill: none;
	stroke: #b79bea;
	stroke-width: 2.25;
	stroke-linecap: round;
}

body.error404 .tovogo-404-route-broken {
	fill: none;
	stroke: rgba(183, 155, 234, 0.5);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 4 8;
}

body.error404 .tovogo-404-node {
	fill: #e4d9f7;
}

body.error404 .tovogo-404-node-ghost {
	fill: none;
	stroke: rgba(228, 217, 247, 0.55);
	stroke-width: 1.5;
	stroke-dasharray: 3 4;
}

body.error404 .tovogo-404-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	fill: rgba(247, 242, 234, 0.4);
}

body.error404 .tovogo-404-label--ghost {
	font-size: 14px;
	fill: rgba(228, 217, 247, 0.55);
	text-anchor: middle;
}

body.error404 .tovogo-404-coord path {
	fill: none;
	stroke: rgba(247, 242, 234, 0.22);
	stroke-width: 1;
}

/* --- Entrance motion: local to this page only, runs once on load, no
   loop, no scroll trigger — completely independent of
   tovogo-motion.js. --- */
@media (prefers-reduced-motion: no-preference) {
	body.error404 .tovogo-404-copy {
		opacity: 0;
		transform: translateY(12px);
		animation: tovogo-404-copy-in 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
	}

	body.error404 .tovogo-404-route-main {
		stroke-dasharray: 900;
		stroke-dashoffset: 900;
		animation: tovogo-404-draw 1100ms cubic-bezier(0.22, 1, 0.36, 1) 200ms forwards;
	}

	body.error404 .tovogo-404-node {
		opacity: 0;
		animation: tovogo-404-fade-in 400ms ease forwards;
	}

	body.error404 .tovogo-404-node--1 { animation-delay: 300ms; }
	body.error404 .tovogo-404-node--2 { animation-delay: 550ms; }
	body.error404 .tovogo-404-node--3 { animation-delay: 800ms; }

	body.error404 .tovogo-404-route-broken,
	body.error404 .tovogo-404-node-ghost,
	body.error404 .tovogo-404-label {
		opacity: 0;
		animation: tovogo-404-fade-in 500ms ease forwards;
	}

	body.error404 .tovogo-404-route-broken { animation-delay: 1300ms; }
	body.error404 .tovogo-404-node-ghost { animation-delay: 1500ms; }
	body.error404 .tovogo-404-label { animation-delay: 1600ms; }

	@keyframes tovogo-404-copy-in {
		to { opacity: 1; transform: translateY(0); }
	}

	@keyframes tovogo-404-draw {
		to { stroke-dashoffset: 0; }
	}

	@keyframes tovogo-404-fade-in {
		to { opacity: 1; }
	}
}

/* --- Mandatory reduced-motion override: every animated element
   appears immediately at its final state — no transform, no dash
   offset, no stagger, no delay. --- */
@media (prefers-reduced-motion: reduce) {
	body.error404 .tovogo-404-copy,
	body.error404 .tovogo-404-node,
	body.error404 .tovogo-404-route-broken,
	body.error404 .tovogo-404-node-ghost,
	body.error404 .tovogo-404-label {
		opacity: 1;
		transform: none;
	}

	body.error404 .tovogo-404-route-main {
		stroke-dasharray: none;
		stroke-dashoffset: 0;
	}
}

@media (max-width: 992px) {
	body.error404 .tovogo-404 {
		padding: 72px 24px;
	}

	body.error404 .tovogo-404-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	body.error404 .tovogo-404-visual {
		min-height: 280px;
		order: 2;
	}

	body.error404 .tovogo-404-route-svg {
		max-width: min(340px, 100%);
	}
}

@media (max-width: 543px) {
	body.error404 .tovogo-404 {
		padding: 56px 20px;
	}

	body.error404 .tovogo-404-text {
		font-size: 15px;
		margin-bottom: 28px;
	}

	body.error404 .tovogo-404-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}

	body.error404 .tovogo-404-cta {
		width: 100%;
		justify-content: center;
	}

	body.error404 .tovogo-404-visual {
		min-height: 220px;
	}

	body.error404 .tovogo-404-route-svg {
		max-width: min(260px, 100%);
	}
}

/* ==========================================================================
   Homepage body — premium page background + search/map module framing
   ("Heim", body.page-id-57 only).

   Strictly scoped to the 4 approved wrappers: body.page-id-57, #stay,
   #stay .elementor-element-e234bba, and .elementor-element-b83d232.
   Nothing inside any affiliate widget (.elementor-shortcode,
   .elementor-widget-shortcode, #tpwl-search, #tpwl-tickets, iframe,
   script) is targeted, and no generic top-level-section spacing rule is
   added here (that was tried previously and produced unwanted spacing).
   ========================================================================== */

/* 1. Subtle premium off-white page background. */
body.page-id-57 {
	background-color: #f8f7fb;
}

/* 2. #stay — outer vertical spacing only. Width, display, flex, grid,
   position, overflow, and everything inside the widget are untouched.
   Top padding is intentionally modest now that the hero section
   (below) already provides the lead-in space above it.

   scroll-margin-top added so the final CTA's native
   <a href="#stay"> anchor jump (see .tovogo-cta-button further down
   this file) lands the widget comfortably below the sticky
   .tvg-header instead of tucked underneath it. CSS-only — no
   JavaScript scroll handler, no change to #stay's own markup, width,
   display, or anything inside the widget. Value matches the header's
   own documented height at each breakpoint (see the ~82/134/122px
   measurements noted against .tovogo-destinations below) plus a
   small comfortable gap. */
body.page-id-57 #stay {
	padding-top: 32px;
	padding-bottom: 40px;
	scroll-margin-top: 110px;
}

/* 3. The search widget's existing Elementor card (already purple with a
   12px radius, set natively by Elementor). Background, padding, and
   layout are left exactly as-is — only the corner radius is nudged and
   a very soft shadow is added underneath. */
body.page-id-57 #stay .elementor-element-e234bba {
	border-radius: 18px;
	box-shadow: 0 12px 28px rgba(84, 36, 157, 0.14), 0 2px 6px rgba(0, 0, 0, 0.05);
}

/* 3b. TRUNCATION AUDIT FOLLOW-UP (partial, cosmetic only): Elementor's
   own native "boxed" container width caps .e-con-inner (the direct
   wrapper between #stay and e234bba) at max-width: min(100%, 1140px).
   Relaxed to 1300px so the White Label search form has a bit more
   total row width to distribute across its own internal flex fields —
   this is the one outer-wrapper lever identified as safe in the
   truncation audit. Still fully responsive (min(100%, …), no fixed
   width) and still overflow-safe (nothing else about #stay/e234bba's
   width, display, flex, grid, or padding is touched). This does NOT
   reach into #tpwl-search's Shadow DOM, does not change Travelpayouts'
   own text-overflow/ellipsis/min-width rules there, and is expected to
   reduce — not eliminate — truncation of long location names. */
body.page-id-57 #stay .e-con-inner {
	max-width: min(100%, 1140px);
}

/* 4. Map section — outer frame for the map-stage module (rule set
   further below). REFINED: this used to be a padded, solid-white,
   moderately-shadowed "card" on its own — now deliberately quiet, so
   the two-panel .tovogo-map-stage grid inside it (editorial panel +
   map) can span edge-to-edge and read as one seamless module rather
   than content padded inside a separate outer box. No background color
   (the page's own body.page-id-57 background shows through in the
   map's own padding area — rule 1 above), an almost-invisible 1px
   border, a much softer single shadow, a smaller radius, and zero
   padding (padding now lives on the two inner panels individually, see
   .tovogo-map-stage-editorial / .tovogo-map-stage-map below). Still
   only background/border/radius/shadow/padding on this one pre-existing
   OUTER Elementor container — nothing inside the widget, its markup,
   or its runtime DOM is touched. No overflow property is set or has
   ever been set here (still, deliberately, never overflow:hidden) —
   the map's own popups/controls/markers can never be visually clipped
   by this or any ancestor of it. */
body.page-id-57 .elementor-element-b83d232 {
	border-radius: 16px;
	box-shadow: 0 4px 16px rgba(20, 8, 46, 0.05);
	padding: 0;
}

/* 4b. Hide only the scrollbar UI on the map's own widget wrapper — the
   exact element that owns it (confirmed via inspection:
   .elementor-element-dda95c4 / .elementor-widget-shortcode, the div
   Elementor generates around the map shortcode, styled overflow-x:auto
   by the site's existing Additional CSS). overflow-x/y is left exactly
   as Additional CSS set it (still "auto", still scrollable/draggable) —
   only the scrollbar's visual chrome is suppressed. Scoped to just this
   one widget, not to .elementor-widget-shortcode generally, so every
   other shortcode widget on the page keeps its scrollbar untouched. */
body.page-id-57 .elementor-element-b83d232 .elementor-widget-shortcode {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

body.page-id-57 .elementor-element-b83d232 .elementor-widget-shortcode::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Chromium Edge */
}

@media (max-width: 992px) {
	body.page-id-57 #stay {
		padding-top: 24px;
		padding-bottom: 28px;
		scroll-margin-top: 160px;
	}

	body.page-id-57 .elementor-element-b83d232 {
		border-radius: 14px;
	}
}

@media (max-width: 543px) {
	body.page-id-57 #stay {
		padding-top: 16px;
		padding-bottom: 20px;
		scroll-margin-top: 150px;
	}

	body.page-id-57 #stay .elementor-element-e234bba {
		border-radius: 14px;
	}

	body.page-id-57 .elementor-element-b83d232 {
		border-radius: 12px;
	}
}

/* --- Mobile flight-search height fix (read-only audit + flex-sizing
   investigation, both already documented in full in the session
   history): at mobile widths, the flight-search widget's own Elementor
   widget wrapper (.elementor-element-0166e66 — one level above
   Elementor's own auto-generated .elementor-shortcode div, itself the
   parent of #tpwl-search/#tpwl-tickets) rendered ~361px taller than its
   real content needed (~776px vs ~415px), leaving a large empty purple
   block before the map section.

   ROOT CAUSE, confirmed by ephemeral runtime isolation testing (each
   candidate applied individually via a temporary injected stylesheet,
   measured, then removed — nothing was guessed): `height: auto` (the
   first attempt) provably could not fix this — forcing it with
   `!important` at maximum specificity left the computed height
   unchanged, meaning no competing rule was ever "winning" a cascade
   fight; the browser's own auto-height algorithm genuinely resolved to
   ~776px for a reason not traceable to any CSS rule (verified against
   our own CSS, every Elementor per-element setting for this widget and
   its ancestors, Elementor Global Classes — none applied sitewide —
   and every stylesheet rule that matches the element). Isolation
   testing narrowed the actual cause to this element's WIDTH resolution
   silently coupling with its height resolution: restating the width
   explicitly (`width: 100%` alone, tested in isolation from every flex
   property) fully resolved the height with zero change to any other
   property. `flex-grow`/`flex-basis`/`flex` shorthand were each tested
   alone and had zero effect — not part of the fix, so not included
   here.

   This is a width rule, not a height hack: no height, min-height,
   max-height, or overflow value is set anywhere in this rule — the
   wrapper is left free to size to its real content on any future
   render (e.g. once #tpwl-tickets is populated by an actual search).

   SAFETY: `.elementor-element-0166e66` is only a per-element auto-ID,
   not guaranteed unique sitewide (the Flüge page's own, completely
   separate, protected flight widget happens to reuse the same ID from
   a cloned template) — this selector is compound-scoped through
   body.page-id-57 AND #stay, never written as a bare
   `.elementor-element-0166e66` rule, so /fluege/'s own widget is never
   affected. Never touches #tpwl-search, #tpwl-tickets, their Shadow
   DOM, the Elementor shortcode setting, or any Elementor-generated
   CSS/data. --- */
@media (max-width: 767px) {
	body.page-id-57 #stay .elementor-element-0166e66 {
		width: 100%;
	}
}

/* ==========================================================================
   Homepage "map stage" — editorial discovery panel + the existing,
   untouched Travelpayouts map, split into one unified module. Markup
   printed by tovogo_design_layer_wrap_map_widget() in
   tovogo-design-layer.php, hooked to Elementor's own
   elementor/widget/render_content filter, guarded to homepage + widget
   dda95c4 only. .tovogo-map-stage prints INSIDE the existing
   .elementor-element-dda95c4 widget wrapper, which itself sits inside
   .elementor-element-b83d232 (rule 4 above, now zero-padding/quiet —
   see its own comment for why). This block only ever controls internal
   layout, the editorial panel's own background/typography, and the
   thin divider between the two panels — nothing here targets
   .elementor-shortcode, any Travelpayouts-generated class, or any map
   control/marker/popup, and overflow is never set to hidden anywhere
   in this file, so nothing the map renders can ever be clipped.

   REFINED composition (previous pass felt too empty/centered/boxed):
   panels now sit flush against the outer frame (gap:0, no stage-level
   padding) so the editorial panel's own soft lavender background reads
   as a true half of one continuous module rather than content floating
   inside a separate white card; its own matching corner radius (only
   on the two outward-facing corners) keeps that background visually
   flush with .elementor-element-b83d232's outer rounding without ever
   using overflow:hidden. Content is anchored near the top
   (justify-content:flex-start) instead of vertically centered. The
   destination list is now a small vertical "route" motif — a thin
   rail with a dot per stop — echoing the same dot/route language
   already used in the homepage hero's SVG (.tovogo-hero-svg-dot)
   rather than reading as generic bullet text.
   ========================================================================== */

body.page-id-57 .tovogo-map-stage {
	display: grid;
	grid-template-columns: minmax(240px, 34%) 1fr;
	align-items: stretch;
	gap: 0;
}

body.page-id-57 .tovogo-map-stage-editorial {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding: 48px 40px 40px;
	background: #f7f4fc;
	border-radius: 16px 0 0 16px;
	border-top: 1px solid rgba(84, 36, 157, 0.18);
	border-right: 0;
	border-bottom: 1px solid rgba(84, 36, 157, 0.18);
	border-left: 1px solid rgba(84, 36, 157, 0.18);
}

body.page-id-57 .tovogo-map-stage-eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

body.page-id-57 .tovogo-map-stage-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(26px, 2.4vw, 34px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-57 .tovogo-map-stage-text {
	margin: 0 0 32px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #52485f;
}

/* Destination "route" list: a thin vertical rail (::before on the
   list) with one small dot per stop (::before on each li) — the same
   restrained dot/route visual language already used in the hero SVG,
   not a separate card component. The dot's box-shadow ring colour
   (#f7f4fc) intentionally matches .tovogo-map-stage-editorial's own
   background above, so the dot appears to cleanly interrupt the rail
   rather than overlap it; both are updated together if this panel's
   background colour ever changes. */
body.page-id-57 .tovogo-map-stage-labels {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 13px;
	margin: 0;
	padding: 0 0 0 18px;
	list-style: none;
}

body.page-id-57 .tovogo-map-stage-labels::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background: rgba(84, 36, 157, 0.16);
}

body.page-id-57 .tovogo-map-stage-labels li {
	position: relative;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.01em;
	color: #3a1568;
}

body.page-id-57 .tovogo-map-stage-labels li::before {
	content: "";
	position: absolute;
	left: -18px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #54249d;
	box-shadow: 0 0 0 3px #f7f4fc;
	transform: translate(-50%, -50%);
}

/* The map's own column — a restrained "matte frame" around the real,
   untouched map. min-width:0 only tells the GRID TRACK it is allowed
   to shrink below the map's intrinsic content width (the standard fix
   for grid blowout) — it does not touch, hide, or clip the widget's
   own content. Everything below (background/border/radius/shadow) is
   box-level styling on THIS frame element only — a matte/passe-partout
   around the map, not a change to the map itself: padding provides the
   10–14px breathing space, so the frame's own border/rounded corner
   sits entirely outside the map's own rectangular content and can
   never overlap or clip it. The 1px border is a low-opacity, uniform
   Tovogo-purple keyline around the whole frame (no decorative route
   graphics, no gradient, no background tint) — a refined frame, not a
   decoration. No overflow property is set (and never overflow:hidden)
   — the widget's own overflow-x:auto + hidden-scrollbar treatment
   (rules 4/4b above, both untouched) already governs its scrolling
   exactly as before this change, and nothing here can clip a control,
   marker, or popup the map itself renders. */
body.page-id-57 .tovogo-map-stage-map {
	position: relative;
	min-width: 0;
	padding: 12px;
	background: #fffefd;
	border: 1px solid rgba(84, 36, 157, 0.18);
	border-radius: 0 16px 16px 0;
	box-shadow: 0 2px 10px rgba(20, 8, 46, 0.05);
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-map-stage {
		grid-template-columns: 1fr;
	}

	body.page-id-57 .tovogo-map-stage-editorial {
		padding: 36px 28px 28px;
		border-radius: 14px 14px 0 0;
		border-right: 1px solid rgba(84, 36, 157, 0.18);
		border-bottom: 0;
	}

	body.page-id-57 .tovogo-map-stage-map {
		padding: 10px;
		border-radius: 0 0 14px 14px;
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-map-stage-editorial {
		padding: 28px 20px 24px;
		border-radius: 12px 12px 0 0;
	}

	body.page-id-57 .tovogo-map-stage-map {
		padding: 8px;
		border-radius: 0 0 12px 12px;
	}
}

/* ==========================================================================
   Homepage hero ("Heim", body.page-id-57 only).

   REDESIGNED (brand-hub pass): dark-luxury editorial "whole journey"
   canvas — deep aubergine/near-black plum background, warm ivory type,
   one restrained light-purple accent. Deliberately NOT a Flights hero:
   no plane, no flight-search language, no globe, no floating city
   chips. The right side is one unified abstract canvas (sweeping route
   curve + 2 faint contour ellipses + 4 waypoint nodes + a couple of
   quiet coordinate-fragment marks) instead of separate floating cards.

   Markup printed by tovogo_design_layer_render_hero_section() in
   tovogo-design-layer.php, hooked to Astra's public astra_content_before
   action — fires before #content/.ast-container even open, so this is a
   plain sibling inside #page's own flex-column layout, never a flex-row
   item competing with #primary. Two real links only, both native
   in-page anchors (#tovogo-services, #stay) — no JavaScript. Everything
   is scoped under .tovogo-hero-* (a namespace distinct from .tvg-*
   which belongs to the WPCode header/footer).
   ========================================================================== */

/* Desktop vertical rebalance (>992px only — the 992/543px tiers below
   have their own separate padding values, untouched): real-Chromium
   measurement (getBoundingClientRect at 1440/1366/1280/1200/1120/1024,
   each ×768–900) found the hero pinned at a constant 696.5px tall
   regardless of viewport width, entirely because the right-side SVG
   (see .tovogo-hero-canvas-svg below) rendered at a fixed 504.5px tall
   no matter the column width — .tovogo-hero-inner's own align-items:
   center (WPCode-independent, this file's own layout) then stretches
   the whole grid row to match that fixed artwork height and vertically
   centers the shorter copy block inside it, which is what produced the
   large dead margins above/below the copy and the oversized
   CTA-to-hero-bottom gap. Trimmed here by 16px/16px (within one hero,
   still generous) — paired with the artwork's own height reduction
   below, this is what actually shortens the hero; padding alone was a
   minor contributor. */
.tovogo-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, #2a1147 0%, #1c0e33 55%, #120a1f 100%);
	padding: 88px 32px 72px;
}

.tovogo-hero * {
	box-sizing: border-box;
}

/* Desktop viewport fit (>=993px only — the <=992px stacked tier is
   completely untouched below, confirmed byte-for-byte identical via
   real-Chromium re-measurement): the padding-only height above left a
   large white gap of the next section visible inside the initial
   viewport (real-Chromium measured: hero bottom sat 82-214px above the
   viewport's own bottom edge across 1024-1784px-wide desktop windows).
   header + hero should instead fill the initial viewport.

   No existing --header-height (or similar) custom property exists
   anywhere in this file to reuse, so the header's own two *measured*,
   stable desktop heights are hardcoded directly — not guessed. Split
   at the exact same 1119.98/1120px boundary the header CSS itself
   already uses (see the .tvg-mobile-menu-toggle block below): the
   rendered header measures 65.13px tall from 993-1119px and 68.8px
   tall at >=1120px. Matching these live dimensions prevents the hero
   from ending 11–13px above the viewport's lower edge.

   min-height, not height: never clips shorter/zoomed viewports where
   the hero's own natural content height (padding + row height) already
   exceeds the calc() target — the browser simply keeps the larger of
   the two, exactly as tested at 1440x700 and 1366x650, and the page
   scrolls the small remainder rather than compressing anything.
   .tovogo-hero already computes as box-sizing:border-box (Astra's own
   base reset), so padding is correctly included in this calc(), no
   extra box-sizing rule is needed here.

   display:flex + align-items:center (paired with .tovogo-hero-inner's
   own width:100% below, so its existing max-width:1200px/margin:auto
   horizontal centering is unaffected — verified identical
   grid-template-columns/inner-width before vs after) distributes the
   min-height's extra room as natural top/bottom breathing room around
   the existing copy+artwork composition, rather than the old block
   layout leaving it as dead space below. */
@media (min-width: 993px) {
	.tovogo-hero {
		display: flex;
		align-items: center;
	}

	.tovogo-hero-inner {
		width: 100%;
	}
}

@media (min-width: 993px) and (max-width: 1119.98px) {
	.tovogo-hero {
		min-height: calc(100vh - 65.13px);
		min-height: calc(100svh - 65.13px);
	}
}

@media (min-width: 1120px) {
	.tovogo-hero {
		min-height: calc(100vh - 68.8px);
		min-height: calc(100svh - 68.8px);
	}
}

.tovogo-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.92fr 1.08fr;
	align-items: center;
	gap: 64px;
}

.tovogo-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #cdb8ef;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	margin: 0 0 22px;
}

.tovogo-hero-title {
	margin: 0 0 22px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(34px, 4.4vw, 58px);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #f7f2ea;
}

.tovogo-hero-title-line {
	display: block;
}

.tovogo-hero-subtitle {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: rgba(247, 242, 234, 0.68);
}

.tovogo-hero-actions {
	display: flex;
	align-items: center;
	gap: 28px;
	margin-top: 36px;
}

.tovogo-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: #f7f2ea;
	color: #241041;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 17px 38px;
	border-radius: 4px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(8, 3, 18, 0.22);
	transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

.tovogo-hero-cta span {
	font-size: 18px;
	line-height: 1;
	transition: transform 0.25s ease;
}

.tovogo-hero-cta:hover {
	background: #ffffff;
	box-shadow: 0 14px 28px rgba(8, 3, 18, 0.28);
	transform: translateY(-1px);
}

.tovogo-hero-cta:hover span {
	transform: translateX(3px);
}

.tovogo-hero-cta:focus-visible {
	outline: 2px solid #cdb8ef;
	outline-offset: 3px;
}

.tovogo-hero-secondary {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 13px;
	color: rgba(247, 242, 234, 0.62);
	text-decoration: none;
	transition: color 0.2s ease;
}

.tovogo-hero-secondary span {
	transition: transform 0.2s ease;
	display: inline-block;
}

.tovogo-hero-secondary:hover {
	color: #f7f2ea;
}

.tovogo-hero-secondary:hover span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	.tovogo-hero-cta,
	.tovogo-hero-secondary,
	.tovogo-hero-secondary span {
		transition: none;
	}
}

/* --- Right-side visual: ONE unified canvas — atmospheric glow, three
   faint contour lines, a sweeping route curve with 4 waypoint nodes,
   and a couple of quiet coordinate-fragment marks. Decorative only
   (aria-hidden), generous negative space by design.

   POLISH PASS: strengthened the opacity hierarchy so each layer reads
   at a clearly distinct depth (contour--1 furthest back → contour--3
   nearest → route/nodes on top), added a third, smaller, off-center
   contour (--3) for better balance across the right half instead of
   two perfectly concentric rings, and layered the glow into two
   overlapping radial gradients (upper-right + lower-left) for subtle
   atmospheric depth instead of one flat pool. The route/typography
   remain the focal point — nothing here is louder than before, only
   better distributed. --- */

.tovogo-hero-visual {
	position: relative;
	min-height: 420px;
}

.tovogo-hero-canvas-glow {
	position: absolute;
	inset: -10%;
	background:
		radial-gradient(circle at 66% 30%, rgba(138, 95, 214, 0.26) 0%, rgba(138, 95, 214, 0) 56%),
		radial-gradient(circle at 22% 78%, rgba(101, 66, 170, 0.14) 0%, rgba(101, 66, 170, 0) 52%);
	pointer-events: none;
}

/* max-width 460 -> 405 (~12% smaller, within the requested 8-15% range):
   this is the actual lever behind the hero-height fix above — the SVG's
   own viewBox aspect ratio (620:680) ties its rendered height directly
   to this width, so 460px was rendering at a fixed 504.5px tall (real-
   Chromium measured) regardless of viewport, dwarfing the copy block
   (319-348px tall across desktop widths) it sits beside. 405px renders
   at ~444px tall — still comfortably taller than the copy (real
   breathing room, not filling most of the hero) but no longer the
   dominant element. .tovogo-hero-visual's own min-height:420px (below)
   stays under this new 444px, so it remains non-binding, unchanged.
   Mobile/tablet (<=992px) already renders this SVG far below either
   value (~300px wide, capped by .tovogo-hero-visual's own narrower
   box there) and is unaffected — confirmed via the same measurement. */
.tovogo-hero-canvas-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(405px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-hero-canvas-contour {
	fill: none;
	stroke: rgba(247, 242, 234, 0.07);
	stroke-width: 1;
}

.tovogo-hero-canvas-contour--2 {
	stroke: rgba(247, 242, 234, 0.13);
	stroke-dasharray: 3 7;
}

.tovogo-hero-canvas-contour--3 {
	stroke: rgba(205, 184, 239, 0.20);
	stroke-width: 1;
}

.tovogo-hero-canvas-route {
	fill: none;
	stroke: #b79bea;
	stroke-width: 2.25;
	stroke-linecap: round;
}

.tovogo-hero-canvas-node {
	fill: #e4d9f7;
}

.tovogo-hero-canvas-coord path {
	fill: none;
	stroke: rgba(247, 242, 234, 0.28);
	stroke-width: 1;
}

.tovogo-hero-canvas-dash {
	fill: none;
	stroke: rgba(247, 242, 234, 0.2);
	stroke-width: 1;
	stroke-dasharray: 2 6;
}

@media (prefers-reduced-motion: no-preference) {
	.tovogo-hero-canvas-svg {
		animation: tovogo-hero-canvas-drift 10s ease-in-out infinite;
	}

	@keyframes tovogo-hero-canvas-drift {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-10px); }
	}
}

@media (max-width: 992px) {
	.tovogo-hero {
		padding: 80px 24px 64px;
	}

	.tovogo-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 40px;
	}

	.tovogo-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-hero-actions {
		justify-content: center;
	}

	.tovogo-hero-visual {
		min-height: 320px;
		max-width: 420px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-hero {
		padding: 64px 20px 52px;
	}

	.tovogo-hero-actions {
		flex-direction: column;
		align-items: center;
		gap: 18px;
	}

	.tovogo-hero-cta {
		width: 100%;
		justify-content: center;
	}

	.tovogo-hero-visual {
		min-height: 260px;
	}
}

/* ==========================================================================
   Homepage destinations section ("Beliebte Reiseziele") — printed via
   elementor/frontend/after_render, immediately after the map section
   (element b83d232). See tovogo_design_layer_render_destinations_section()
   in tovogo-design-layer.php.

   REDESIGNED: one asymmetric editorial spread (Paris dominant, Istanbul
   wide, Barcelona medium, Dubai a small accent) via CSS grid-template-
   areas instead of 4 equal cards, and the old "Entdecken →" affordance
   is gone — city/country now stand alone as honest, non-clickable
   metadata. Nothing here touches .elementor-element-b83d232,
   .elementor-shortcode, .elementor-widget-shortcode, tp-cascoon,
   iframe, or script — this section only ever styles its own
   .tovogo-destination(s)-* markup.
   ========================================================================== */

/* Top padding was originally sized with a clear safety margin above
   the sticky .tvg-header (measured: ~82px desktop, ~134px tablet,
   ~122px mobile — the header wraps to a taller 2-row layout below its
   own 992px breakpoint) — but .tovogo-destinations carries no id/
   scroll-margin-top of its own and is never a direct anchor-jump
   target (unlike #tovogo-services above it), so that clearance was
   never actually load-bearing here; it only ever showed up as extra
   whitespace under Services.

   GAP FIX (desktop only): top padding trimmed 128px → 24px — paired
   with .tovogo-services' own bottom-padding trim above — to close the
   ~224px empty field that had opened up between the end of the
   service modules and "Reiseinspiration / Beliebte Reiseziele" down
   to a ~56px editorial gap. Tablet (≤992px: 160px) and mobile
   (≤543px: 150px) keep their own separate top-padding overrides
   further down this block — untouched, since their header wraps to a
   taller 2-row layout and still needs that clearance.

   The Destinations → Why bottom padding (32px, see tovogo-why's own
   GAP FIX comment for the paired top-padding value) is unchanged by
   this Services → Destinations fix. */
body.page-id-57 .tovogo-destinations {
	position: relative;
	background: linear-gradient(180deg, #faf8f5 0%, #f8f7fb 100%);
	padding: 24px 32px 32px;
}

body.page-id-57 .tovogo-destinations * {
	box-sizing: border-box;
}

body.page-id-57 .tovogo-destinations-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-57 .tovogo-destinations-header {
	max-width: 640px;
	margin: 0 auto 30px;
	text-align: center;
}

body.page-id-57 .tovogo-destinations-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

body.page-id-57 .tovogo-destinations-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-57 .tovogo-destinations-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Grid: EXTENDED from the original 4-card asymmetric spread (Paris
   dominant, Istanbul wide, Barcelona medium, Dubai accent) to 8 cities.
   With 8 cards there is no room left in a clean 4-column × 2-row desktop
   grid for any card to span multiple cells, so every card — the original
   4 and the 4 added below — now occupies one equal cell (uniform
   aspect-ratio on .tovogo-destination-card, below) instead of using
   grid-template-areas. The old --dominant/--wide/--medium/--accent
   modifier classes stay on the original 4 cards (their PHP call sites
   are unchanged) but no longer carry a grid-area override. --- */
body.page-id-57 .tovogo-destinations-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: stretch;
	gap: 24px;
}

/* POLISH PASS: radius cut from 24px to 12px — reads as an editorial
   photographic plate, not a rounded SaaS card.
   aspect-ratio added with the 8-card grid above so all cards (original
   4 + 4 added) render as one equal, uniform cell instead of relying on
   grid-area spans. */
body.page-id-57 .tovogo-destination-card {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	aspect-ratio: 4 / 5;
	box-shadow: 0 16px 32px rgba(20, 8, 46, 0.10);
	transition: box-shadow 0.3s ease;
}

/* COMPACT PASS (desktop only): the 4:5 portrait ratio above still
   governs tablet (≤992px, 2-col) and mobile (≤543px, 1-col) exactly
   as before — untouched. At ≥993px, where all 8 cards sit in the full
   4-column × 2-row grid, 4:5 made both rows too tall to see
   comfortably together, so desktop switches to a shorter 5:4
   landscape ratio instead — same column width (grid-template-columns
   is unchanged), no card gets narrower. .tovogo-destination-card-svg's
   default (unset) preserveAspectRatio="xMidYMid meet" already
   centers/scales each portrait-viewBox landmark icon to fit the
   shorter frame with no clipping, and .tovogo-destination-card-content
   is bottom-anchored via position:absolute, so the city/country text
   block needs no size change either — both simply have a bit less
   empty space above them now. */
@media (min-width: 993px) {
	body.page-id-57 .tovogo-destination-card {
		aspect-ratio: 5 / 4;
	}
}

body.page-id-57 .tovogo-destination-card:hover {
	box-shadow: 0 18px 34px rgba(20, 8, 46, 0.14);
}

body.page-id-57 .tovogo-destination-card-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* Soft radial light + a faint opposite-corner vignette layered on top of
   each card's own gradient — restrained atmospheric depth, CSS only. */
body.page-id-57 .tovogo-destination-card-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 120% 55% at 28% -10%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 60%),
		radial-gradient(ellipse 90% 65% at 88% 112%, rgba(0, 0, 0, 0.16) 0%, rgba(0, 0, 0, 0) 62%);
	pointer-events: none;
}

/* Per-destination atmosphere — restrained and muted, not neon/rainbow,
   each with its own tonal identity while staying within the Tovogo
   purple family. */
body.page-id-57 .tovogo-destination-card--paris .tovogo-destination-card-media {
	background: linear-gradient(160deg, #ddd0ef 0%, #8a6bb8 45%, #241b3a 100%);
}

body.page-id-57 .tovogo-destination-card--barcelona .tovogo-destination-card-media {
	background: linear-gradient(160deg, #eabf98 0%, #c97a5a 45%, #5a3a5e 100%);
}

body.page-id-57 .tovogo-destination-card--istanbul .tovogo-destination-card-media {
	background: linear-gradient(160deg, #4a3a6e 0%, #3f7373 55%, #8a5a52 100%);
}

body.page-id-57 .tovogo-destination-card--dubai .tovogo-destination-card-media {
	background: linear-gradient(160deg, #ecdfc0 0%, #d4b483 45%, #7a5a7e 100%);
}

body.page-id-57 .tovogo-destination-card--rom .tovogo-destination-card-media {
	background: linear-gradient(160deg, #e8d2b0 0%, #b9784f 45%, #4a2f3d 100%);
}

body.page-id-57 .tovogo-destination-card--amsterdam .tovogo-destination-card-media {
	background: linear-gradient(160deg, #cfe0e6 0%, #5f8fa3 45%, #2c2440 100%);
}

body.page-id-57 .tovogo-destination-card--lissabon .tovogo-destination-card-media {
	background: linear-gradient(160deg, #f3ddc0 0%, #e08a6a 45%, #4a3860 100%);
}

body.page-id-57 .tovogo-destination-card--wien .tovogo-destination-card-media {
	background: linear-gradient(160deg, #ece0c8 0%, #b79b6b 45%, #392a4a 100%);
}

/* Landmark line art — minimal, stroke-only, sits on top of the gradient
   as a supporting motif, not the focal point. Base scale(1.1) makes the
   composition read slightly larger/stronger without touching the SVG
   paths themselves; the card's own overflow:hidden keeps this safely
   contained. */
body.page-id-57 .tovogo-destination-card-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: rgba(255, 255, 255, 0.56);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: scale(1.1);
	transform-origin: 50% 50%;
	transition: transform 0.6s ease;
}

body.page-id-57 .tovogo-destination-card:hover .tovogo-destination-card-svg {
	transform: scale(1.14);
}

body.page-id-57 .tovogo-destination-card-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(18, 10, 28, 0.78) 0%, rgba(18, 10, 28, 0.26) 42%, rgba(18, 10, 28, 0) 68%);
}

body.page-id-57 .tovogo-destination-card-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 22px 24px 28px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

body.page-id-57 .tovogo-destination-card-city {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: #ffffff;
}

body.page-id-57 .tovogo-destination-card-country {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0.03em;
	color: rgba(255, 255, 255, 0.72);
	margin: 0;
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-destinations {
		padding: 160px 24px 64px;
	}

	/* 2 columns: all 8 cards keep the same equal-cell treatment as
	   desktop (see the base .tovogo-destinations-grid/.tovogo-destination-card
	   rules above), just re-flowed into 2 columns × 4 rows. */
	body.page-id-57 .tovogo-destinations-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-destinations {
		padding: 150px 20px 48px;
	}

	body.page-id-57 .tovogo-destinations-header {
		margin-bottom: 22px;
	}

	/* Single column — every card keeps the same 4:5 aspect-ratio set on
	   the base .tovogo-destination-card rule above, so the stack reads
	   as one consistent set of editorial plates. */
	body.page-id-57 .tovogo-destinations-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* ==========================================================================
   Homepage consolidated brand/trust statement ("Heim", body.page-id-57
   only). Printed via tovogo_design_layer_render_why_section() in
   tovogo-design-layer.php, hooked to astra_content_after at priority 20
   (after the destinations section, priority 10, on the same hook) so it
   always renders directly below "Beliebte Reiseziele" and above the
   final CTA.

   REDESIGNED: replaces the old separate "Warum Tovogo?" 3-card section
   AND the old separate "So funktioniert Tovogo" 3-step section (now
   disabled on the homepage, see tovogo_design_layer_render_journey_section())
   with ONE quiet statement — large left-hand headline, three short
   editorial lines on the right separated only by thin keyline
   dividers. No cards, no icon circles, no 01/02/03 numerals anywhere.
   Everything scoped under .tovogo-why-*.
   ========================================================================== */

/* SPACING CORRECTION: bottom padding trimmed 128px → 88px (-40px) to
   offset the right column's new top offset below, so the section's
   overall rendered height stays the same instead of growing.

   GAP FIX (desktop only): top padding trimmed 120px → 16px, paired with
   .tovogo-destinations' own bottom-padding trim above, closing the
   Destinations → Why gap to a ~40px editorial breathing space instead
   of the previous ~216px empty field.

   OPEN-UP PASS (desktop only): that ~40px read slightly too tight, so
   top padding was nudged back up 16px → 24px (paired with
   .tovogo-destinations' bottom padding, also nudged 24px → 32px) for a
   ~56px total gap — still nowhere near the original ~216px. Tablet
   (≤992px: 88px) and mobile (≤543px: 64px) keep their own separate,
   already-smaller top-padding overrides below, untouched. */
body.page-id-57 .tovogo-why {
	background: #faf9fb;
	padding: 24px 32px 88px;
}

body.page-id-57 .tovogo-why * {
	box-sizing: border-box;
}

body.page-id-57 .tovogo-why-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 80px;
	align-items: start;
}

/* SPACING CORRECTION: desktop-only — the right benefit column sat
   noticeably higher than the left "Weniger suchen. Mehr reisen."
   block; nudged down 40px (within the requested 32–48px range) for
   vertical balance between the two columns. Reset to 0 at ≤992px
   (see the tablet/mobile media queries below) so stacked layouts never
   carry an artificial gap above the list. */
@media (min-width: 993px) {
	body.page-id-57 .tovogo-why-list {
		margin-top: 40px;
	}
}

body.page-id-57 .tovogo-why-title {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 3.6vw, 46px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-57 .tovogo-why-title-line {
	display: block;
}

body.page-id-57 .tovogo-why-text {
	margin: 0;
	max-width: 380px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #52485f;
}

/* --- Three quiet editorial lines, not cards: no background, no
   border-radius, no shadow — separated only by a thin top keyline
   (the first item has none, so the list opens flush with the grid). --- */
body.page-id-57 .tovogo-why-list {
	display: flex;
	flex-direction: column;
}

body.page-id-57 .tovogo-why-item {
	padding: 28px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.14);
}

body.page-id-57 .tovogo-why-item:first-child {
	padding-top: 0;
	border-top: 0;
}

body.page-id-57 .tovogo-why-item-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #3a1568;
}

body.page-id-57 .tovogo-why-item-text {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-why {
		padding: 88px 24px 96px;
	}

	body.page-id-57 .tovogo-why-inner {
		grid-template-columns: 1fr;
		gap: 44px;
	}

	body.page-id-57 .tovogo-why-text {
		max-width: 100%;
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-why {
		padding: 64px 20px 72px;
	}

	body.page-id-57 .tovogo-why-item {
		padding: 22px 0;
	}
}

/* ==========================================================================
   Homepage "Alles für deine Reise" premium service gateway ("Heim",
   body.page-id-57 only). Printed via
   tovogo_design_layer_render_services_section() in
   tovogo-design-layer.php — REORDERED to now render right after the
   hero (hooked to astra_content_before, priority 20) instead of near
   the bottom of the page, so this CSS block's position in the file no
   longer matches its position on the page; that is fine, every
   selector here is uniquely scoped to .tovogo-service(s)-* and has no
   cascade dependency on file order.

   REDESIGNED: five real, semantic <a href> modules (never `#flight`,
   never JavaScript) composed as ONE asymmetric system via CSS
   grid-template-areas — Flüge a large anchor, Hotels a wide editorial
   module, Autos medium, Transfers a compact vertical strip, Erlebnisse
   a wide band — not five equal tiles. No pill/button nested inside any
   module; the CTA text + arrow is simply the last line of the module's
   own content, and the whole element is the one link. Everything
   scoped under .tovogo-service(s)-*.
   ========================================================================== */

/* scroll-margin-top so the hero's and final CTA's native
   <a href="#tovogo-services"> anchor lands this section comfortably
   below the sticky .tvg-header — same technique/values already used
   for #stay above, CSS-only.

   GAP FIX (desktop only): bottom padding trimmed 96px → 32px — paired
   with .tovogo-destinations' own top-padding trim just below it — to
   close the ~224px empty field that had opened up between the end of
   the service modules and "Reiseinspiration / Beliebte Reiseziele"
   down to a ~56px editorial gap. Tablet (≤992px: 72px) and mobile
   (≤543px: 56px) already carry their own separate, already-smaller
   bottom-padding overrides further down this block and are untouched. */
body.page-id-57 .tovogo-services {
	background: #f8f7fb;
	padding: 112px 32px 32px;
	scroll-margin-top: 110px;
}

body.page-id-57 .tovogo-services * {
	box-sizing: border-box;
}

body.page-id-57 .tovogo-services-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-57 .tovogo-services-header {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

/* POLISH PASS: quiet editorial eyebrow — no pill/capsule/background,
   just uppercase, small type, and wide letter-spacing (same treatment
   as the hero eyebrow above it). */
body.page-id-57 .tovogo-services-eyebrow {
	display: block;
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 18px;
}

body.page-id-57 .tovogo-services-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-57 .tovogo-services-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Grid: one asymmetric system —
   Flüge (large anchor, 2 cols × 2 rows) | Hotels (wide, top right)
                                          | Autos | Transfers (tall,
   Erlebnisse (wide band, bottom) ------------------ right column) --- */
/* SURGICAL POLISH PASS: the five modules previously read as separate
   floating white cards (own border + own radius + 20px gaps between
   them). They now form ONE flush editorial composition — a single
   shared 1px hairline grid instead of five independent boxes: the
   grid container itself carries the thin keyline color as its own
   background and a single outer radius (with overflow:hidden to clip
   the four true outer corners), while gap is cut to 1px so each
   module's own opaque background reveals exactly 1px of that colour
   between neighbours. Individual modules no longer have their own
   border or radius at all — "boxed tile" separation is gone, replaced
   by shared alignment lines, exactly like a printed travel-magazine
   grid rather than a dashboard of cards. */
body.page-id-57 .tovogo-services-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(3, minmax(160px, auto));
	grid-template-areas:
		"fluege fluege unterkuenfte unterkuenfte"
		"fluege fluege mietwagen transfers"
		"erlebnisse erlebnisse erlebnisse transfers";
	gap: 1px;
	background: rgba(84, 36, 157, 0.14);
	border-radius: 8px;
	overflow: hidden;
}

body.page-id-57 .tovogo-service-module--fluege { grid-area: fluege; }
body.page-id-57 .tovogo-service-module--unterkuenfte { grid-area: unterkuenfte; }
body.page-id-57 .tovogo-service-module--mietwagen { grid-area: mietwagen; }
body.page-id-57 .tovogo-service-module--transfers { grid-area: transfers; }
body.page-id-57 .tovogo-service-module--erlebnisse { grid-area: erlebnisse; }

/* --- Shared module shell: the whole module IS the link. No border,
   no radius, no shadow of its own any more — this module is one flush
   tile inside the shared hairline grid above (its own opaque
   background is what draws the 1px line between it and its
   neighbours). Hover is a very quiet warm-tint shift, not a
   border/shadow response — even quieter than "bordered plane," fully
   in keeping with a single unified composition rather than five
   individually-reacting cards. --- */
body.page-id-57 .tovogo-service-module {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fffdfb;
	padding: 36px 32px;
	text-decoration: none;
	transition: background-color 0.25s ease;
}

body.page-id-57 .tovogo-service-module:hover {
	background-color: #faf6f0;
}

body.page-id-57 .tovogo-service-module:focus-visible {
	outline: 2px solid #54249d;
	outline-offset: -2px;
}

body.page-id-57 .tovogo-service-module-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 20px;
	color: #54249d;
}

body.page-id-57 .tovogo-service-module-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-57 .tovogo-service-module-body {
	flex: 1 0 auto;
}

body.page-id-57 .tovogo-service-module-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 19px;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-57 .tovogo-service-module-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #52485f;
}

body.page-id-57 .tovogo-service-module-cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	width: fit-content;
	margin-top: 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: #54249d;
}

body.page-id-57 .tovogo-service-module-cta span {
	transition: transform 0.2s ease;
	display: inline-block;
}

body.page-id-57 .tovogo-service-module:hover .tovogo-service-module-cta span {
	transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-57 .tovogo-service-module,
	body.page-id-57 .tovogo-service-module-cta span {
		transition: none;
	}
}

/* --- Flüge: the large anchor module.
   POLISH PASS: switched from justify-content:flex-end (all content
   clustered at the bottom, leaving the top of this tall module empty)
   to space-between, so the icon anchors the top, the aviation motif
   below fills the middle intentionally, and title/text/CTA sit
   together at the bottom — the whole height is now composed, not
   partially empty. The motif (printed by
   tovogo_design_layer_service_module() only for this 'anchor' variant)
   is a single restrained route curve + 2 nodes + one small, muted
   dart/plane reference — background/editorial detail, not a second
   hero. Bigger type/icon than the other modules; dominance still comes
   only from size and proportion, no badge/label. --- */
body.page-id-57 .tovogo-service-module--fluege {
	overflow: hidden;
	padding: 40px 36px;
	justify-content: space-between;
	background: linear-gradient(165deg, #f7f4fc 0%, #fffdfb 55%);
}

body.page-id-57 .tovogo-service-module--fluege::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 82% 6%, rgba(84, 36, 157, 0.10) 0%, rgba(84, 36, 157, 0) 58%);
	pointer-events: none;
}

/* SURGICAL POLISH PASS: shifted from a centered box to a
   middle/right-biased one (was left:8%/right:8%, now left:22%/
   right:2%) so the route visibly moves emphasis away from the
   bottom-left corner where the title/text/CTA already live — the two
   no longer compete for the same lower-left ground, and the module's
   right side is no longer empty. Taller box (top:12%/bottom:30%) lets
   the curve sweep further before it settles near the CTA. */
body.page-id-57 .tovogo-service-module-motif {
	position: absolute;
	left: 22%;
	right: 2%;
	top: 12%;
	bottom: 30%;
	width: 76%;
	height: 58%;
	pointer-events: none;
}

/* Stroke/node opacity raised (route 0.16 → 0.22, node 0.22 → 0.32) —
   "clearer" and "stronger contrast" as requested, while remaining
   well below the copy's own contrast so it still reads as background
   detail, never competing with the title. */
body.page-id-57 .tovogo-service-module-motif-route {
	fill: none;
	stroke: rgba(84, 36, 157, 0.22);
	stroke-width: 1.75;
	stroke-linecap: round;
}

body.page-id-57 .tovogo-service-module-motif-node {
	fill: rgba(84, 36, 157, 0.32);
}

body.page-id-57 .tovogo-service-module-motif-mark path {
	fill: rgba(58, 21, 104, 0.26);
}

body.page-id-57 .tovogo-service-module--fluege .tovogo-service-module-icon {
	position: relative;
	width: 56px;
	height: 56px;
	color: #3a1568;
}

body.page-id-57 .tovogo-service-module--fluege .tovogo-service-module-body {
	position: relative;
	flex: 0 0 auto;
}

body.page-id-57 .tovogo-service-module--fluege .tovogo-service-module-title {
	font-size: clamp(24px, 2.1vw, 30px);
}

body.page-id-57 .tovogo-service-module--fluege .tovogo-service-module-text {
	max-width: 300px;
	font-size: 15px;
}

body.page-id-57 .tovogo-service-module--fluege .tovogo-service-module-cta {
	position: relative;
}

/* --- Hotels: wide editorial module — icon and copy sit side by side
   instead of stacked, echoing a magazine strap rather than a card.
   POLISH PASS: dropped the distinct lavender surface so it reads as
   part of the same quiet white/thin-keyline system as the other
   modules instead of a separate horizontal card — its proportion
   (wide, row layout) still makes it visually distinct, without a
   different surface color doing that job too. --- */
body.page-id-57 .tovogo-service-module--unterkuenfte {
	flex-direction: row;
	align-items: center;
	gap: 24px;
}

body.page-id-57 .tovogo-service-module--unterkuenfte .tovogo-service-module-icon {
	margin-bottom: 0;
	flex: 0 0 auto;
}

body.page-id-57 .tovogo-service-module--unterkuenfte .tovogo-service-module-body {
	flex: 1 1 auto;
}

body.page-id-57 .tovogo-service-module--unterkuenfte .tovogo-service-module-cta {
	margin-top: 12px;
}

/* --- Transfers: compact vertical strip on the far right, spanning two
   rows — narrower padding, content anchored to the bottom. --- */
body.page-id-57 .tovogo-service-module--transfers {
	padding: 28px 22px;
	justify-content: flex-end;
}

/* --- Erlebnisse: wide cultural band across the bottom — icon and copy
   side by side, same magazine-strap language as Hotels but its own
   tone via a warmer neutral surface. --- */
body.page-id-57 .tovogo-service-module--erlebnisse {
	flex-direction: row;
	align-items: center;
	gap: 24px;
	background: #faf8f5;
}

body.page-id-57 .tovogo-service-module--erlebnisse .tovogo-service-module-icon {
	margin-bottom: 0;
	flex: 0 0 auto;
}

body.page-id-57 .tovogo-service-module--erlebnisse .tovogo-service-module-body {
	flex: 1 1 auto;
}

body.page-id-57 .tovogo-service-module--erlebnisse .tovogo-service-module-cta {
	margin-top: 12px;
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-services {
		padding: 80px 24px 72px;
	}

	body.page-id-57 .tovogo-services-header {
		margin-bottom: 36px;
	}

	/* 2 columns: Flüge stays the tall anchor, Hotels/Erlebnisse widen
	   to fill a row each, Autos/Transfers pair up — still asymmetric,
	   not five equal tiles. */
	body.page-id-57 .tovogo-services-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: minmax(200px, auto) minmax(160px, auto) minmax(140px, auto);
		grid-template-areas:
			"fluege unterkuenfte"
			"fluege mietwagen"
			"erlebnisse transfers";
	}

	body.page-id-57 .tovogo-service-module--transfers {
		justify-content: center;
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-services {
		padding: 64px 20px 56px;
	}

	/* Single column, source order: Flüge, Hotels, Autos, Transfers,
	   Erlebnisse — but deliberately varied padding/min-height per
	   module below, not five identical boxes. */
	body.page-id-57 .tovogo-services-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
		gap: 1px;
	}

	body.page-id-57 .tovogo-service-module--fluege,
	body.page-id-57 .tovogo-service-module--unterkuenfte,
	body.page-id-57 .tovogo-service-module--mietwagen,
	body.page-id-57 .tovogo-service-module--transfers,
	body.page-id-57 .tovogo-service-module--erlebnisse {
		grid-area: auto;
	}

	body.page-id-57 .tovogo-service-module--fluege {
		padding: 36px 26px;
		min-height: 220px;
	}

	body.page-id-57 .tovogo-service-module--unterkuenfte,
	body.page-id-57 .tovogo-service-module--erlebnisse {
		flex-direction: column;
		align-items: flex-start;
		padding: 26px 22px;
		min-height: 170px;
	}

	body.page-id-57 .tovogo-service-module--mietwagen {
		padding: 24px 20px;
		min-height: 150px;
	}

	body.page-id-57 .tovogo-service-module--transfers {
		padding: 22px 20px;
		min-height: 130px;
		justify-content: flex-start;
	}
}

/* ==========================================================================
   Homepage "So funktioniert Tovogo" 3-step journey section — REMOVED.

   This section is INTENTIONALLY DISABLED on the homepage (see
   tovogo_design_layer_render_journey_section() in
   tovogo-design-layer.php, which now unconditionally returns nothing);
   its ideas were folded into the consolidated "Weniger suchen. Mehr
   reisen." brand statement above (.tovogo-why-* rules). Its CSS rules
   are removed here too, since nothing on the site renders
   .tovogo-journey-* markup any more — the step-building PHP helpers
   are still defined (not deleted) in case this section is reused
   elsewhere later; if it is, its CSS would need to be re-added here.
   ========================================================================== */

/* ==========================================================================
   Homepage final CTA section ("Heim", body.page-id-57 only). Printed
   via tovogo_design_layer_render_cta_section() in
   tovogo-design-layer.php, hooked to astra_content_after at priority
   50 (after the consolidated brand statement, priority 20, on the same
   hook) so it always renders directly below it and above the footer.

   REDESIGNED: the primary link now points to #tovogo-services (not
   #stay) — this closing statement echoes the hero, not the search
   widget. A quiet secondary row of the five real service links
   (.tovogo-cta-links) sits beneath the button.

   Visual finale: a large rounded, deep-purple panel (not an
   edge-to-edge rectangular banner — the outer .tovogo-cta section
   keeps the page's own light background around it). The decorative
   orbit/route SVG is deliberately restrained — a quiet closing echo
   of the hero's motif, not a second hero — kept small and low-opacity
   so it never competes with the copy or the top of the page.
   Everything scoped under .tovogo-cta-*.
   ========================================================================== */

/* POLISH PASS: outer side padding trimmed (32px → 20px) so the dark
   panel reads wider/closer to full-bleed within the site's own
   ~1200px content rhythm, instead of a card floating in generous
   light padding. */
/* SURGICAL POLISH PASS: less side inset (20px → 12px) and a shorter
   overall section height (96/120 → 80/96 vertical) so the dark panel
   reads as a wider, more architectural closing plane rather than a
   card centered in generous pale padding. */
body.page-id-57 .tovogo-cta {
	background: #f8f7fb;
	padding: 80px 12px 96px;
}

body.page-id-57 .tovogo-cta * {
	box-sizing: border-box;
}

body.page-id-57 .tovogo-cta-inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* POLISH PASS: radius cut from 36px to 12px and the shadow tightened
   (smaller spread, lower opacity) — the panel now reads as an
   architectural dark plane closing the page, not a large soft/SaaS
   rounded-card banner. */
/* SURGICAL POLISH PASS: radius 12px → 8px (top of the requested 6-8px
   range), vertical padding trimmed (72px → 56px, "slightly shorter
   vertical height"), and the column split pushed further left-weighted
   (1.15/0.85 → 1.3/0.7 + wider gap) for stronger editorial left
   alignment and more deliberate negative space around the right-side
   visual instead of it filling its column edge-to-edge. */
body.page-id-57 .tovogo-cta-panel {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #3f1a72 0%, #241041 100%);
	border-radius: 8px;
	padding: 56px 60px;
	display: grid;
	grid-template-columns: 1.3fr 0.7fr;
	align-items: center;
	gap: 56px;
	box-shadow: 0 16px 40px rgba(20, 8, 46, 0.22);
}

/* Restrained atmospheric wash behind the decorative side only — not a
   page-wide or panel-wide gradient sweep. */
body.page-id-57 .tovogo-cta-glow {
	position: absolute;
	top: -10%;
	right: -10%;
	width: 60%;
	height: 120%;
	background: radial-gradient(circle at 70% 40%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 62%);
	pointer-events: none;
}

body.page-id-57 .tovogo-cta-copy {
	position: relative;
}

/* POLISH PASS: quiet uppercase eyebrow — no pill/capsule/background,
   same restrained treatment as the hero and services eyebrows. */
body.page-id-57 .tovogo-cta-eyebrow {
	display: block;
	color: #cdb8ef;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	margin: 0 0 20px;
}

body.page-id-57 .tovogo-cta-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #ffffff;
}

body.page-id-57 .tovogo-cta-text {
	margin: 0 0 32px;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.78);
}

/* --- Primary CTA: warm-white surface, dark purple text — clearly a
   button, restrained hover/focus, no aggressive animation. --- */
body.page-id-57 .tovogo-cta-button {
	display: inline-flex;
	align-items: center;
	background: #fffdfb;
	color: #3a1568;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 32px;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(20, 8, 46, 0.28);
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

body.page-id-57 .tovogo-cta-button:hover {
	background: #ffffff;
	box-shadow: 0 14px 30px rgba(20, 8, 46, 0.34);
	transform: translateY(-2px);
}

body.page-id-57 .tovogo-cta-button:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.9);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-57 .tovogo-cta-button {
		transition: none;
	}
}

/* --- Quiet secondary row: the five real service links, plain text
   with thin dot separators — deliberately not styled as buttons/pills
   so they read as a footnote to the primary CTA, not a second row of
   competing actions. --- */
body.page-id-57 .tovogo-cta-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 26px;
}

body.page-id-57 .tovogo-cta-links a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.58);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.2s ease, border-color 0.2s ease;
}

body.page-id-57 .tovogo-cta-links a:hover {
	color: #ffffff;
	border-color: rgba(255, 255, 255, 0.5);
}

body.page-id-57 .tovogo-cta-links a:not(:last-child)::after {
	content: "\00B7";
	display: inline-block;
	margin-left: 10px;
	color: rgba(255, 255, 255, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	body.page-id-57 .tovogo-cta-links a {
		transition: none;
	}
}

body.page-id-57 .tovogo-cta-note {
	margin: 18px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);
}

/* --- Decorative orbit/route artwork: small and low-opacity by
   design — a quiet echo of the hero motif, never the visual focus. --- */
/* SURGICAL POLISH PASS: enlarged (260px → 320px) and every geometry
   layer's opacity lowered so this reads as soft atmospheric detail
   filling the panel's right side, not "a little icon floating alone"
   — same concept/artwork, just given more room and less contrast. */
body.page-id-57 .tovogo-cta-visual {
	position: relative;
	max-width: 320px;
	margin: 0 auto;
}

body.page-id-57 .tovogo-cta-svg {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
}

body.page-id-57 .tovogo-cta-svg-ring {
	fill: none;
	stroke: rgba(255, 255, 255, 0.14);
	stroke-width: 1.5;
}

body.page-id-57 .tovogo-cta-svg-ring--inner {
	stroke: rgba(255, 255, 255, 0.20);
	stroke-dasharray: 4 8;
}

body.page-id-57 .tovogo-cta-svg-route {
	fill: none;
	stroke: rgba(255, 255, 255, 0.40);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 8;
}

body.page-id-57 .tovogo-cta-svg-dot {
	fill: rgba(255, 255, 255, 0.65);
}

body.page-id-57 .tovogo-cta-svg-plane {
	fill: rgba(255, 255, 255, 0.55);
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-cta {
		padding: 72px 24px 88px;
	}

	body.page-id-57 .tovogo-cta-panel {
		padding: 56px 40px;
		gap: 32px;
	}

	body.page-id-57 .tovogo-cta-visual {
		max-width: 200px;
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-cta {
		padding: 56px 20px 64px;
	}

	body.page-id-57 .tovogo-cta-panel {
		grid-template-columns: 1fr;
		padding: 44px 28px;
		border-radius: 8px;
		text-align: center;
	}

	body.page-id-57 .tovogo-cta-copy {
		order: 1;
	}

	body.page-id-57 .tovogo-cta-visual {
		order: 0;
		max-width: 160px;
		margin: 0 auto 8px;
	}

	body.page-id-57 .tovogo-cta-text {
		margin-left: auto;
		margin-right: auto;
	}

	body.page-id-57 .tovogo-cta-button {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Hotels page ("/hotels/", page ID 58) — Step 1 hero + Step 2 search-area
   framing. Printed via tovogo_design_layer_render_hotels_hero_section()
   in tovogo-design-layer.php, hooked to astra_content_before (same
   mechanism as the homepage hero, mutually exclusive via is_page(58)
   vs is_front_page()).

   SAFETY: the FeWo-direkt integration lives inside
   .elementor-element-1ce5b10 → .elementor-shortcode → .eg-widget
   (Expedia Group widget, loaded by eg-widgets.js). Nothing below ever
   targets .elementor-widget-shortcode, .elementor-shortcode,
   .eg-widget, any [data-*] attribute, <script>, or any element that
   script could render at runtime. Only the pre-existing OUTER
   Elementor container .elementor-element-0afed2f (a plain sibling
   wrapper, confirmed via inspection to hold nothing but that one
   widget) is restyled — background/border/radius/shadow/spacing only.
   Deliberately no `overflow` property is set on that wrapper: the
   widget may render its own dropdowns/calendars outside its own box,
   and overflow:hidden on an ancestor could visually clip those even
   without touching the widget itself, so it's avoided entirely.
   .elementor-element-e172f39 (the existing image block) is untouched
   in this step, per instruction.
   ========================================================================== */

.tovogo-hotels-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(160deg, #fbf3ec 0%, #f5eefb 55%, #f8f7fb 100%);
	padding: 64px 32px 40px;
}

.tovogo-hotels-hero * {
	box-sizing: border-box;
}

.tovogo-hotels-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 56px;
}

.tovogo-hotels-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

.tovogo-hotels-hero-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

.tovogo-hotels-hero-subtitle {
	margin: 0;
	max-width: 480px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Right-side visual: hotel-facade line art + a soft glow + two
   small floating "stay type" pills. Decorative only (aria-hidden). --- */

.tovogo-hotels-hero-visual {
	position: relative;
	min-height: 360px;
}

.tovogo-hotels-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 55% 35%, rgba(101, 66, 170, 0.16) 0%, rgba(101, 66, 170, 0) 62%);
	pointer-events: none;
}

.tovogo-hotels-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(300px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-hotels-hero-svg-tower {
	fill: rgba(255, 255, 255, 0.5);
	stroke: #54249d;
	stroke-width: 2;
}

.tovogo-hotels-hero-svg-window {
	fill: none;
	stroke: rgba(84, 36, 157, 0.45);
	stroke-width: 1.6;
}

.tovogo-hotels-hero-svg-window--lit {
	fill: rgba(84, 36, 157, 0.55);
	stroke: none;
}

.tovogo-hotels-hero-svg-door {
	fill: rgba(84, 36, 157, 0.12);
	stroke: #54249d;
	stroke-width: 2;
	stroke-linejoin: round;
}

.tovogo-hotels-hero-svg-handle {
	fill: #54249d;
}

.tovogo-hotels-hero-svg-ground {
	stroke: rgba(84, 36, 157, 0.28);
	stroke-width: 2;
	stroke-linecap: round;
}

.tovogo-hotels-hero-svg-pole {
	stroke: rgba(84, 36, 157, 0.4);
	stroke-width: 1.6;
}

.tovogo-hotels-hero-svg-pole-cap {
	fill: #54249d;
}

.tovogo-hotels-hero-svg-moon {
	fill: rgba(84, 36, 157, 0.3);
}

.tovogo-hotels-hero-svg-star {
	fill: rgba(84, 36, 157, 0.35);
}

.tovogo-hotels-hero-card {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #3a1568;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: 0 12px 24px rgba(20, 8, 46, 0.12);
	white-space: nowrap;
}

.tovogo-hotels-hero-card-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #54249d;
	flex: 0 0 auto;
}

.tovogo-hotels-hero-card--hotel { top: 12%; left: 2%; }
.tovogo-hotels-hero-card--ferienwohnung { bottom: 14%; right: 0%; }

@media (prefers-reduced-motion: no-preference) {
	.tovogo-hotels-hero-card {
		animation: tovogo-hotels-hero-float 6s ease-in-out infinite;
	}

	.tovogo-hotels-hero-card--ferienwohnung {
		animation-delay: -3s;
	}

	@keyframes tovogo-hotels-hero-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
}

@media (max-width: 992px) {
	.tovogo-hotels-hero {
		padding: 48px 24px 32px;
	}

	.tovogo-hotels-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}

	.tovogo-hotels-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-hotels-hero-visual {
		min-height: 280px;
		max-width: 380px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-hotels-hero {
		padding: 40px 20px 24px;
	}

	.tovogo-hotels-hero-visual {
		min-height: 240px;
	}

	.tovogo-hotels-hero-card--ferienwohnung {
		display: none;
	}
}

/* --- Step 2: frame the existing FeWo-direkt search area. Only the
   pre-existing outer Elementor container is touched — background,
   border, radius, shadow, spacing, and centering. No overflow, no
   pointer-events, no width/height constraint that could affect the
   widget itself; the widget's own box simply sits inside this
   wrapper's padding. --- */
body.page-id-58 .elementor-element-0afed2f {
	max-width: 1200px;
	margin: 40px auto 48px;
	background: #fffdfb;
	border: 1px solid rgba(84, 36, 157, 0.10);
	border-radius: 24px;
	box-shadow: 0 16px 36px rgba(20, 8, 46, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
}

@media (max-width: 992px) {
	body.page-id-58 .elementor-element-0afed2f {
		margin: 28px auto 36px;
		border-radius: 18px;
		padding: 28px 24px;
	}
}

@media (max-width: 543px) {
	body.page-id-58 .elementor-element-0afed2f {
		margin: 20px auto 28px;
		border-radius: 16px;
		padding: 20px 16px;
	}
}

/* --- Hide the pre-existing, unrelated ad-crop image block
   (.elementor-element-e172f39, attachment 614) so the new
   "Unterkunftsarten" section below takes over its visual role.
   Exact-match selector only — no generic .e-flexbox/.e-image-base
   targeting, so nothing on any other page or element is affected.
   display:none only: Elementor data, the attachment, and the
   database are completely untouched — this is purely a rendering
   instruction in our own stylesheet, fully reversible. --- */
body.page-id-58 .elementor-element-e172f39 {
	display: none;
}

/* ==========================================================================
   Hotels page "Unterkunftsarten" (accommodation types) section — page
   ID 58 only. Printed via
   tovogo_design_layer_render_hotel_types_section() in
   tovogo-design-layer.php, hooked to astra_content_after at priority
   10 (the first Hotels-page callback on that hook), so it renders
   directly after the FeWo-direkt search area and in place of the
   now-hidden image above.

   REVISED: now an asymmetric editorial composition — Hotels the
   dominant anchor, the other three smaller supporting/closing
   blocks — matching the same grid-template-areas technique already
   used by the homepage's own Services section, rather than the four
   equal cards this used to be. Differentiation between modules comes
   from size/proportion, four genuinely distinct hand-authored
   illustrations, and a barely-tinted individual background per
   module (all within the existing purple/warm-neutral family), not
   from photography, heavy color blocking, or numeric labels.
   Everything scoped under .tovogo-hotel-type(s)-*.
   ========================================================================== */

body.page-id-58 .tovogo-hotel-types {
	background: #f8f7fb;
	padding: 112px 32px 120px;
}

body.page-id-58 .tovogo-hotel-types * {
	box-sizing: border-box;
}

body.page-id-58 .tovogo-hotel-types-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-58 .tovogo-hotel-types-header {
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

body.page-id-58 .tovogo-hotel-types-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

body.page-id-58 .tovogo-hotel-types-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-58 .tovogo-hotel-types-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Grid: one asymmetric editorial composition instead of four
   equal cards — Hotels the dominant anchor (2 cols × 2 rows),
   Ferienwohnungen/Apartments smaller supporting blocks top-right,
   Resorts a wide closing block beneath them. A single shared 1px
   hairline grid (the container's own tinted background revealed
   through a 1px gap) replaces four individually bordered/shadowed
   cards — no border, radius, or shadow on any individual module, only
   on the grid container itself (whose overflow:hidden clips the four
   outer corners) — same technique already used by the homepage's own
   Services module grid. Dominance comes only from size/proportion
   (bigger icon, bigger title, more padding — see the --hotels
   overrides below), never from a badge or numeral. --- */
body.page-id-58 .tovogo-hotel-types-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(2, minmax(200px, auto));
	grid-template-areas:
		"hotels hotels ferienwohnungen apartments"
		"hotels hotels resorts resorts";
	gap: 1px;
	background: rgba(84, 36, 157, 0.14);
	border-radius: 12px;
	overflow: hidden;
}

/* --- Shared module shell: the whole module is just its content —
   no border/radius/shadow of its own, no hover lift. Individual,
   barely-tinted background per module (also each module's own
   grid-area placement above) is the "not four identical white cards"
   differentiator, alongside the distinct illustrations. All four stay
   close in lightness so the grid still reads as one cohesive
   palette. --- */
body.page-id-58 .tovogo-hotel-type {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 32px 28px;
}

body.page-id-58 .tovogo-hotel-type--hotels { grid-area: hotels; background: #f6f2fb; }
body.page-id-58 .tovogo-hotel-type--ferienwohnungen { grid-area: ferienwohnungen; background: #faf6ee; }
body.page-id-58 .tovogo-hotel-type--apartments { grid-area: apartments; background: #f5f1f2; }
body.page-id-58 .tovogo-hotel-type--resorts { grid-area: resorts; background: #fbf3ee; }

/* --- Hotels: the dominant module — larger icon/type, more padding.
   --- */
body.page-id-58 .tovogo-hotel-type--hotels {
	padding: 48px 44px;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title {
	font-size: clamp(24px, 2.1vw, 30px);
	margin-bottom: 12px;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text {
	font-size: 15px;
	max-width: 380px;
}

/* Subtle icon treatment: smaller than before, slightly less than
   full opacity, so the illustrations read as quiet supporting detail
   rather than the module's own focal point — the title/text carry
   that instead. Every fill/stroke rule on the icons' own paths below
   is unchanged. */
body.page-id-58 .tovogo-hotel-type-illustration {
	display: block;
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	color: #54249d;
	opacity: 0.88;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
	width: 96px;
	height: 96px;
	margin-bottom: 28px;
}

body.page-id-58 .tovogo-hotel-type-svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Line-only shapes: building frames, roofline, windows (unlit),
   doors, chimney, palm fronds, trunk. */
body.page-id-58 .tovogo-hotel-type-svg-frame,
body.page-id-58 .tovogo-hotel-type-svg-roof,
body.page-id-58 .tovogo-hotel-type-svg-window,
body.page-id-58 .tovogo-hotel-type-svg-door,
body.page-id-58 .tovogo-hotel-type-svg-chimney,
body.page-id-58 .tovogo-hotel-type-svg-palm,
body.page-id-58 .tovogo-hotel-type-svg-trunk {
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-58 .tovogo-hotel-type-svg-ground {
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	opacity: 0.45;
}

/* Filled accent details: room-number plaque, door-handle dot, lit
   apartment windows — the one warm/solid touch per icon. */
body.page-id-58 .tovogo-hotel-type-svg-plaque,
body.page-id-58 .tovogo-hotel-type-svg-accent-dot,
body.page-id-58 .tovogo-hotel-type-svg-window--lit {
	fill: currentColor;
	opacity: 0.55;
}

/* Sun: soft filled wash + a defined stroke edge. */
body.page-id-58 .tovogo-hotel-type-svg-sun {
	fill: currentColor;
	fill-opacity: 0.18;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-58 .tovogo-hotel-type-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-58 .tovogo-hotel-type-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-58 .tovogo-hotel-types {
		padding: 80px 24px 88px;
	}

	body.page-id-58 .tovogo-hotel-types-header {
		margin-bottom: 40px;
	}

	/* Tablet: Hotels stays a wide top feature (full row), the two
	   supporting blocks pair up beneath it, Resorts closes as a wide
	   band — collapses gracefully from the 4-column desktop shape
	   without ever leaving an empty grid cell. */
	body.page-id-58 .tovogo-hotel-types-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: minmax(220px, auto) minmax(160px, auto) minmax(140px, auto);
		grid-template-areas:
			"hotels hotels"
			"ferienwohnungen apartments"
			"resorts resorts";
	}

	body.page-id-58 .tovogo-hotel-type {
		padding: 28px 24px;
	}

	body.page-id-58 .tovogo-hotel-type--hotels {
		padding: 40px 32px;
	}

	body.page-id-58 .tovogo-hotel-type-illustration {
		width: 56px;
		height: 56px;
		margin-bottom: 16px;
	}

	body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
		width: 80px;
		height: 80px;
		margin-bottom: 20px;
	}
}

@media (max-width: 543px) {
	body.page-id-58 .tovogo-hotel-types {
		padding: 64px 20px 72px;
	}

	body.page-id-58 .tovogo-hotel-types-header {
		margin-bottom: 32px;
	}

	/* Mobile: single-column editorial flow, source order (Hotels first,
	   already the intended reading priority). */
	body.page-id-58 .tovogo-hotel-types-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
		gap: 1px;
	}

	body.page-id-58 .tovogo-hotel-type--hotels,
	body.page-id-58 .tovogo-hotel-type--ferienwohnungen,
	body.page-id-58 .tovogo-hotel-type--apartments,
	body.page-id-58 .tovogo-hotel-type--resorts {
		grid-area: auto;
	}

	body.page-id-58 .tovogo-hotel-type {
		padding: 24px 20px;
	}

	body.page-id-58 .tovogo-hotel-type--hotels {
		padding: 32px 24px;
	}

	body.page-id-58 .tovogo-hotel-type-illustration {
		width: 52px;
		height: 52px;
		margin-bottom: 14px;
	}

	body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
		width: 72px;
		height: 72px;
		margin-bottom: 18px;
	}
}

/* ==========================================================================
   Hotels page "Warum Tovogo?" trust/benefits section — page ID 58
   only. Printed via tovogo_design_layer_render_hotel_why_section() in
   tovogo-design-layer.php, hooked to astra_content_after at priority
   20 (after "Unterkunftsarten", priority 10, on the same hook) so it
   always renders directly below it.

   REVISED: the "01/02/03" numbered-badge cards are gone — a quiet
   left-intro / right-keyline-list composition instead, the same
   pattern already used by the homepage's own "Warum Tovogo?" section
   (.tovogo-why-list/.tovogo-why-item there): three items separated
   only by a thin top keyline, no card boxes, no border/radius/shadow,
   no numerals. Flat warm off-white background — no gradient, no
   photography, no heavy shadow. Everything scoped under
   .tovogo-hotel-why-*.
   ========================================================================== */

body.page-id-58 .tovogo-hotel-why {
	background: #faf8f5;
	padding: 112px 32px 120px;
}

body.page-id-58 .tovogo-hotel-why * {
	box-sizing: border-box;
}

body.page-id-58 .tovogo-hotel-why-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 64px;
	align-items: start;
}

body.page-id-58 .tovogo-hotel-why-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

body.page-id-58 .tovogo-hotel-why-title {
	margin: 0 0 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #3a1568;
}

body.page-id-58 .tovogo-hotel-why-text {
	margin: 0;
	max-width: 420px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #52485f;
}

/* --- Three quiet editorial lines, not cards: no background, no
   border-radius, no shadow — separated only by a thin top keyline
   (the first item has none, so the list opens flush with the intro
   column). Same pattern as the homepage's own .tovogo-why-list. --- */
body.page-id-58 .tovogo-hotel-why-list {
	display: flex;
	flex-direction: column;
}

body.page-id-58 .tovogo-hotel-why-item {
	padding: 28px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.14);
}

body.page-id-58 .tovogo-hotel-why-item:first-child {
	padding-top: 0;
	border-top: 0;
}

body.page-id-58 .tovogo-hotel-why-item-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-58 .tovogo-hotel-why-item-text {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-58 .tovogo-hotel-why {
		padding: 80px 24px 88px;
	}

	body.page-id-58 .tovogo-hotel-why-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	body.page-id-58 .tovogo-hotel-why-intro {
		max-width: 640px;
	}

	body.page-id-58 .tovogo-hotel-why-text {
		max-width: 100%;
	}
}

@media (max-width: 543px) {
	body.page-id-58 .tovogo-hotel-why {
		padding: 64px 20px 72px;
	}

	body.page-id-58 .tovogo-hotel-why-item {
		padding: 22px 0;
	}
}

/* ==========================================================================
   "Nächste Schritte" cross-service journey band — sitewide reusable
   component, currently rendering on 5 pages (Hotels 58, Flüge 668,
   Mietwagen 60, Pendeln 59, Angebote 447). Printed by
   tovogo_design_layer_render_next_step_section() in
   tovogo-design-layer.php, driven entirely by the page-ID-keyed config
   in tovogo_design_layer_get_next_step_pages() — one shared render
   function, one shared CSS block, never page-specific markup or a
   per-page cosmetic variant. Hooked to astra_content_after at priority
   30, always the last editorial section on whichever of the 5 pages is
   currently rendering, directly before the footer.

   NOT page-ID-scoped (unlike every other rule in this file): this
   started as a body.page-id-58–scoped Hotels-only prototype; rolling it
   out to 4 more pages means the component itself, not any one page, is
   now what should own its own styling — .tovogo-next-step is already a
   name unique to this one feature sitewide, and which page(s) render it
   at all is entirely controlled by the PHP config, so no CSS-side page
   gating is needed or wanted. This is the one necessary CSS change for
   the multi-page rollout — every property/value below is byte-identical
   to the original Hotels-only version; only the body.page-id-58 prefix
   was removed from each selector.

   Deliberately reuses .tovogo-hotel-why's own composition (quiet
   left-intro / right-keyline-list, max-width:1200px, same gap) — not a
   new visual idea, the same established pattern applied to real links
   instead of static benefit text. Shorter padding than a primary
   section on purpose — this is a closing "journey continuity" note, not
   another major content block (target ~300–420px total section height).

   No .tovogo-motion-section on the root — static by design across all 5
   pages for this pass; no motion rules are added here for that reason,
   only the two restrained hover states specified in the brief. --- */

.tovogo-next-step {
	background: #f8f7fb;
	padding: 88px 32px 96px;
}

.tovogo-next-step * {
	box-sizing: border-box;
}

.tovogo-next-step-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	gap: 64px;
	align-items: start;
}

.tovogo-next-step-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

.tovogo-next-step-title {
	margin: 0 0 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.22;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #3a1568;
}

.tovogo-next-step-text {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #52485f;
}

/* --- Link rail: plain text + arrow rows, each closed by its own
   bottom keyline (including the last row) — a bounded rail, not an
   open-ended list. No background, no border-radius, no shadow, no
   pill, no icon. --- */
.tovogo-next-step-links {
	display: flex;
	flex-direction: column;
}

.tovogo-next-step-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 2px;
	border-bottom: 1px solid rgba(84, 36, 157, 0.14);
	text-decoration: none;
	transition: border-color 240ms ease;
}

.tovogo-next-step-link-label {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
	transition: color 240ms ease;
}

.tovogo-next-step-link-arrow {
	flex: 0 0 auto;
	font-size: 18px;
	line-height: 1;
	color: #54249d;
	transition: transform 240ms ease;
}

.tovogo-next-step-link:hover,
.tovogo-next-step-link:focus-visible {
	border-bottom-color: rgba(84, 36, 157, 0.36);
}

.tovogo-next-step-link:hover .tovogo-next-step-link-label,
.tovogo-next-step-link:focus-visible .tovogo-next-step-link-label {
	color: #54249d;
}

.tovogo-next-step-link:hover .tovogo-next-step-link-arrow,
.tovogo-next-step-link:focus-visible .tovogo-next-step-link-arrow {
	transform: translateX(4px);
}

.tovogo-next-step-link:focus-visible {
	outline: 2px solid #54249d;
	outline-offset: 4px;
	border-radius: 2px;
}

@media (max-width: 992px) {
	.tovogo-next-step {
		padding: 72px 24px 80px;
	}

	.tovogo-next-step-inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tovogo-next-step-header {
		max-width: 640px;
	}

	.tovogo-next-step-text {
		max-width: 100%;
	}
}

@media (max-width: 543px) {
	.tovogo-next-step {
		padding: 56px 20px 64px;
	}

	.tovogo-next-step-link {
		padding: 18px 2px;
	}

	.tovogo-next-step-link-label {
		font-size: 18px;
	}
}

/* ==========================================================================
   Mietwagen page ("/mietwagen/", page ID 60) — Step 1 hero + Step 2
   rental-search framing. Printed via
   tovogo_design_layer_render_mietwagen_hero_section() in
   tovogo-design-layer.php, hooked to astra_content_before (same
   mechanism as the homepage hero and the Hotels hero, mutually
   exclusive via is_page(60) vs is_front_page()/is_page(58)).

   SAFETY: the existing rental-car integration is Travelpayouts →
   LocalRent white-label app, living inside .elementor-element-637f1c0
   (an elementor-widget-html widget printing one
   <script src="//tpembd.com/content?…"> tag), which at runtime injects
   a randomly-ID'd #mrc_widget_wrapper* containing LocalRent's own
   booking app (static.localrent.com/booking/v2/wl/app.js). Nothing
   below ever targets tpembd.com, static.localrent.com,
   #mrc_widget_wrapper*, any LocalRent-generated class, [data-*]
   attribute, <script>, search field, filter, or result — and
   .elementor-element-637f1c0 itself is never selected. Only the
   pre-existing OUTER Elementor container .elementor-element-3c442e8 is
   restyled — background, border, radius, shadow, spacing, and
   max-width only. Deliberately no `overflow` property is set on that
   wrapper: the widget may render dropdowns/calendars outside its own
   box, and overflow:hidden on an ancestor could visually clip those
   even without touching the widget itself — the same caution already
   applied to the Hotels page's FeWo-direkt wrapper
   (.elementor-element-0afed2f) above. A sitewide Additional CSS rule
   already guards horizontal overflow on
   .elementor-widget-shortcode/.elementor-widget-html — that rule is
   left completely alone; nothing here overrides or fights it.
   ========================================================================== */

.tovogo-mietwagen-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f7f2ec 0%, #f4eefb 60%, #f8f7fb 100%);
	padding: 64px 32px 40px;
}

.tovogo-mietwagen-hero * {
	box-sizing: border-box;
}

.tovogo-mietwagen-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 56px;
}

.tovogo-mietwagen-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

.tovogo-mietwagen-hero-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

.tovogo-mietwagen-hero-subtitle {
	margin: 0;
	max-width: 480px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Right-side visual: road/horizon line art + a soft glow + two
   floating location pills. Decorative only (aria-hidden). --- */

.tovogo-mietwagen-hero-visual {
	position: relative;
	min-height: 360px;
}

.tovogo-mietwagen-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 55% 40%, rgba(101, 66, 170, 0.16) 0%, rgba(101, 66, 170, 0) 62%);
	pointer-events: none;
}

.tovogo-mietwagen-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(320px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-mietwagen-hero-svg-horizon {
	fill: none;
	stroke: rgba(84, 36, 157, 0.22);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.tovogo-mietwagen-hero-svg-road {
	fill: rgba(84, 36, 157, 0.08);
	stroke: rgba(84, 36, 157, 0.32);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.tovogo-mietwagen-hero-svg-lane {
	fill: none;
	stroke: #54249d;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 6 10;
}

.tovogo-mietwagen-hero-svg-pin {
	fill: #54249d;
}

.tovogo-mietwagen-hero-svg-pin circle {
	fill: #ffffff;
}

.tovogo-mietwagen-hero-svg-pin--near {
	fill: #3a1568;
}

.tovogo-mietwagen-hero-svg-car {
	fill: #3a1568;
	filter: drop-shadow(0 2px 3px rgba(20, 8, 46, 0.22));
}

.tovogo-mietwagen-hero-svg-car circle {
	fill: #201033;
}

.tovogo-mietwagen-hero-card {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #3a1568;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: 0 12px 24px rgba(20, 8, 46, 0.12);
	white-space: nowrap;
}

.tovogo-mietwagen-hero-card-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #54249d;
	flex: 0 0 auto;
}

.tovogo-mietwagen-hero-card--provence { top: 14%; left: 4%; }
.tovogo-mietwagen-hero-card--amalfi { bottom: 10%; right: 2%; }

@media (prefers-reduced-motion: no-preference) {
	.tovogo-mietwagen-hero-card {
		animation: tovogo-mietwagen-hero-float 6s ease-in-out infinite;
	}

	.tovogo-mietwagen-hero-card--amalfi {
		animation-delay: -3s;
	}

	@keyframes tovogo-mietwagen-hero-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
}

/* Soft purple pool at the hero's own bottom edge — a quiet color
   handoff into the rental-search card that follows directly below
   (Step 2). Same device already used on the homepage hero. */
.tovogo-mietwagen-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: min(90%, 1100px);
	height: 100px;
	background: radial-gradient(ellipse at center, rgba(84, 36, 157, 0.12) 0%, rgba(84, 36, 157, 0) 72%);
	pointer-events: none;
}

@media (max-width: 992px) {
	.tovogo-mietwagen-hero {
		padding: 48px 24px 32px;
	}

	.tovogo-mietwagen-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}

	.tovogo-mietwagen-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-mietwagen-hero-visual {
		min-height: 280px;
		max-width: 380px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-mietwagen-hero {
		padding: 40px 20px 24px;
	}

	.tovogo-mietwagen-hero-visual {
		min-height: 220px;
	}

	.tovogo-mietwagen-hero-card--amalfi {
		display: none;
	}
}

/* --- Step 2: frame the existing Travelpayouts/LocalRent search area.
   Only the pre-existing outer Elementor container is touched —
   background, border, radius, shadow, spacing, max-width, and
   centering. No overflow, no pointer-events, no width/height
   constraint that could affect the widget itself or its runtime-
   injected #mrc_widget_wrapper*; that content simply sits inside this
   wrapper's padding, exactly like the Hotels page's FeWo-direkt
   wrapper above.

   The Elementor container's own boxed_width setting (1249px, set in
   Elementor's data/database) is left completely untouched — this is a
   purely visual, CSS-only clamp on the OUTER .e-con row (which
   Elementor otherwise renders full-bleed), so the visible card reads
   as ~1200px-aligned with the rest of the site regardless of what
   Elementor's own inner boxed width is doing beneath it. --- */
body.page-id-60 .elementor-element-3c442e8 {
	max-width: 1200px;
	margin: 40px auto 48px;
	background: #fffdfb;
	border: 1px solid rgba(84, 36, 157, 0.10);
	border-radius: 24px;
	box-shadow: 0 16px 36px rgba(20, 8, 46, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
}

@media (max-width: 992px) {
	body.page-id-60 .elementor-element-3c442e8 {
		margin: 28px auto 36px;
		border-radius: 18px;
		padding: 28px 24px;
	}
}

@media (max-width: 543px) {
	body.page-id-60 .elementor-element-3c442e8 {
		margin: 20px auto 28px;
		border-radius: 16px;
		padding: 20px 16px;
	}
}

/* ==========================================================================
   Mietwagen "travel styles" editorial road scene — page ID 60 only.
   Printed via tovogo_design_layer_render_mietwagen_travel_styles_section()
   in tovogo-design-layer.php, hooked to astra_content_after (priority
   10), which fires only after #content/.ast-container — and therefore
   the entire Elementor tree, including .elementor-element-3c442e8 →
   .elementor-element-637f1c0 and the Travelpayouts → LocalRent chain
   it renders — has already closed. Nothing in this block targets
   tpembd.com, static.localrent.com, #mrc_widget_wrapper*, any
   LocalRent-generated class, or .elementor-element-637f1c0 itself.

   Deliberately NOT a card grid: one continuous decorative SVG (road,
   horizon, pins, one small car) sits behind four independently
   positioned text "stops" that read as points along one route, not
   peers in a row. Three SVGs are included (--desktop/--tablet/
   --mobile) and toggled purely via CSS display per breakpoint — no
   JS, no external image.
   ========================================================================== */

body.page-id-60 .tovogo-mietwagen-styles {
	position: relative;
	background: linear-gradient(180deg, #f8f5f0 0%, #f6f2fb 55%, #f8f7fb 100%);
	padding: 42px 32px 120px;
}

body.page-id-60 .tovogo-mietwagen-styles * {
	box-sizing: border-box;
}

body.page-id-60 .tovogo-mietwagen-styles-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-60 .tovogo-mietwagen-styles-header {
	max-width: 640px;
	margin: 0 auto 64px;
	text-align: center;
}

body.page-id-60 .tovogo-mietwagen-styles-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

body.page-id-60 .tovogo-mietwagen-styles-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-60 .tovogo-mietwagen-styles-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- The scene: one relative-positioned canvas holding the
   decorative background SVG (z-index 0) and the four foreground stops
   (z-index 1). --- */
body.page-id-60 .tovogo-mietwagen-styles-scene {
	position: relative;
}

body.page-id-60 .tovogo-mietwagen-styles-scene-svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

body.page-id-60 .tovogo-mietwagen-styles-horizon {
	fill: none;
	stroke: rgba(84, 36, 157, 0.16);
	stroke-width: 1.5;
}

body.page-id-60 .tovogo-mietwagen-styles-hill {
	fill: none;
	stroke: rgba(84, 36, 157, 0.10);
	stroke-width: 1.5;
}

body.page-id-60 .tovogo-mietwagen-styles-road-path {
	fill: none;
	stroke: rgba(84, 36, 157, 0.30);
	stroke-width: 1.8;
	stroke-linecap: round;
}

body.page-id-60 .tovogo-mietwagen-styles-lane {
	fill: none;
	stroke: #54249d;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 5 9;
}

body.page-id-60 .tovogo-mietwagen-styles-pin {
	fill: #54249d;
}

body.page-id-60 .tovogo-mietwagen-styles-pin circle {
	fill: #ffffff;
}

body.page-id-60 .tovogo-mietwagen-styles-car {
	fill: #3a1568;
	opacity: 0.85;
}

body.page-id-60 .tovogo-mietwagen-styles-car circle {
	fill: #201033;
}

/* --- Stops: real HTML, always above the decorative layer. Capped
   width so a paragraph can never stretch into the road. --- */
body.page-id-60 .tovogo-mietwagen-styles-stop {
	position: relative;
	z-index: 1;
	max-width: 232px;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-icon {
	display: block;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	color: #54249d;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-icon-dot {
	fill: currentColor;
	stroke: none;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-icon-sun {
	fill: currentColor;
	fill-opacity: 0.18;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-60 .tovogo-mietwagen-styles-stop-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Desktop (>=993px): the landscape scene. Four stops absolutely
   positioned at four different heights along the road — never a
   shared baseline, never a grid. Küstenroute is inset from the right
   edge (56% left, ~232px wide, leaving ~25% clear margin) so it never
   reads as cramped against the corner. --- */
@media (min-width: 993px) {
	body.page-id-60 .tovogo-mietwagen-styles-scene {
		height: 640px;
	}

	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--tablet,
	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--mobile {
		display: none;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop {
		position: absolute;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--city {
		left: 1%;
		top: 36%;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip {
		left: 12%;
		top: 6%;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--family {
		left: 34%;
		top: 74%;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--coast {
		left: 56%;
		top: 4%;
	}
}

/* --- Tablet (641-992px): portrait scene, stops back in normal
   document flow (too fragile to keep absolute at a reflow-prone
   width) but alternating sides, so the reading column itself
   zig-zags — road stays one continuous background behind it. Still
   no grid, no card. --- */
@media (min-width: 641px) and (max-width: 992px) {
	body.page-id-60 .tovogo-mietwagen-styles-scene {
		display: flex;
		flex-direction: column;
		gap: 56px;
		padding: 24px 0;
	}

	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--desktop,
	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--mobile {
		display: none;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop {
		max-width: 320px;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--city,
	body.page-id-60 .tovogo-mietwagen-styles-stop--family {
		margin-right: auto;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip,
	body.page-id-60 .tovogo-mietwagen-styles-stop--coast {
		margin-left: auto;
		text-align: right;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip .tovogo-mietwagen-styles-stop-icon,
	body.page-id-60 .tovogo-mietwagen-styles-stop--coast .tovogo-mietwagen-styles-stop-icon {
		margin-left: auto;
	}
}

/* --- Mobile (<=640px): compact vertical scene — never four stacked
   cards. Same head/body split already proven on the Journey section:
   a small icon head sits beside a full-width text body, alternating
   sides of the slim road spine running behind the whole stack. --- */
@media (max-width: 640px) {
	body.page-id-60 .tovogo-mietwagen-styles {
		padding: 64px 20px 72px;
	}

	body.page-id-60 .tovogo-mietwagen-styles-header {
		margin-bottom: 40px;
	}

	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--desktop,
	body.page-id-60 .tovogo-mietwagen-styles-scene-svg--tablet {
		display: none;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop {
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 16px;
		max-width: none;
		margin-bottom: 40px;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop:last-child {
		margin-bottom: 0;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop-icon {
		flex: 0 0 auto;
		margin-bottom: 0;
	}

	/* BUGFIX: title + text now share one wrapper (see the matching PHP
	   docblock) so the stop has exactly two flex children — icon and
	   this body column — instead of three (icon, h3, p) sitting side by
	   side. flex:1 lets the body take the remaining row width beside
	   the fixed-width icon; min-width:0 is the standard flex-item
	   allowance so its text can still wrap/shrink instead of forcing
	   overflow. h3/p need no rules of their own here — as plain block
	   elements inside this wrapper they already stack normally. */
	body.page-id-60 .tovogo-mietwagen-styles-stop-body {
		flex: 1;
		min-width: 0;
	}

	body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip,
	body.page-id-60 .tovogo-mietwagen-styles-stop--coast {
		flex-direction: row-reverse;
		text-align: right;
	}
}

/* ==========================================================================
   Pendeln (airport transfer) page hero — page ID 59 (/pendeln/) only.

   Markup printed by tovogo_design_layer_render_pendeln_hero_section()
   in tovogo-design-layer.php, hooked to Astra's public
   astra_content_before action — fires before #content/.ast-container
   even open, the same safe sibling placement already used for the
   homepage, Hotels, and Mietwagen heroes. Purely decorative: no links,
   no booking logic, no data. Everything scoped under
   .tovogo-pendeln-hero-*, a namespace distinct from every other page's
   hero classes.
   ========================================================================== */

.tovogo-pendeln-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f6f4fb 0%, #f8f7fb 100%);
	padding: 64px 32px 40px;
}

.tovogo-pendeln-hero * {
	box-sizing: border-box;
}

.tovogo-pendeln-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 56px;
}

.tovogo-pendeln-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: 'Courier New', ui-monospace, monospace;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

.tovogo-pendeln-hero-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

.tovogo-pendeln-hero-subtitle {
	margin: 0;
	max-width: 480px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Right-side visual: one direct airport-to-destination route,
   a small shuttle, a pickup sign, and two floating location pills.
   Wide/short viewBox (520x320) instead of the other heroes' square
   ones, on purpose — this is a single horizontal A-to-B journey, not
   a scene or a globe. Decorative only (aria-hidden). --- */

.tovogo-pendeln-hero-visual {
	position: relative;
	min-height: 300px;
}

.tovogo-pendeln-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 58% 45%, rgba(101, 66, 170, 0.14) 0%, rgba(101, 66, 170, 0) 62%);
	pointer-events: none;
}

.tovogo-pendeln-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(420px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-pendeln-hero-svg-route {
	fill: none;
	stroke: rgba(84, 36, 157, 0.26);
	stroke-width: 1.8;
	stroke-linecap: round;
}

.tovogo-pendeln-hero-svg-lane {
	fill: none;
	stroke: #54249d;
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-dasharray: 6 10;
}

.tovogo-pendeln-hero-svg-shuttle {
	fill: #3a1568;
	filter: drop-shadow(0 2px 3px rgba(20, 8, 46, 0.22));
}

.tovogo-pendeln-hero-svg-shuttle line {
	stroke: #f6f4fb;
	stroke-width: 1.5;
}

.tovogo-pendeln-hero-svg-shuttle circle {
	fill: #201033;
}

.tovogo-pendeln-hero-svg-pin {
	fill: #54249d;
}

.tovogo-pendeln-hero-svg-pin-mark {
	stroke: #ffffff;
	stroke-width: 2;
	stroke-linecap: round;
}

.tovogo-pendeln-hero-svg-pin--dest {
	fill: #3a1568;
}

.tovogo-pendeln-hero-svg-pin-dot {
	fill: #ffffff;
}

.tovogo-pendeln-hero-svg-sign {
	fill: none;
	stroke: #54249d;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tovogo-pendeln-hero-svg-sign rect {
	fill: #ffffff;
}

.tovogo-pendeln-hero-svg-sign-mark {
	stroke: rgba(84, 36, 157, 0.45);
	stroke-width: 2;
}

.tovogo-pendeln-hero-card {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #3a1568;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 10px 16px;
	border-radius: 999px;
	box-shadow: 0 12px 24px rgba(20, 8, 46, 0.12);
	white-space: nowrap;
}

.tovogo-pendeln-hero-card-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #54249d;
	flex: 0 0 auto;
}

.tovogo-pendeln-hero-card--from { top: 8%; left: 0%; }
.tovogo-pendeln-hero-card--to { bottom: 12%; right: 0%; }

@media (prefers-reduced-motion: no-preference) {
	.tovogo-pendeln-hero-card {
		animation: tovogo-pendeln-hero-float 6s ease-in-out infinite;
	}

	.tovogo-pendeln-hero-card--to {
		animation-delay: -3s;
	}

	@keyframes tovogo-pendeln-hero-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
}

@media (max-width: 992px) {
	.tovogo-pendeln-hero {
		padding: 48px 24px 32px;
	}

	.tovogo-pendeln-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}

	.tovogo-pendeln-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-pendeln-hero-visual {
		min-height: 240px;
		max-width: 420px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-pendeln-hero {
		padding: 40px 20px 24px;
	}

	.tovogo-pendeln-hero-visual {
		min-height: 200px;
	}

	.tovogo-pendeln-hero-card--to {
		display: none;
	}
}

/* ==========================================================================
   Pendeln page — Step 2: frame the existing Travelpayouts/Intui
   transfer-search area. Only the pre-existing outer Elementor
   container is touched — background, border, radius, shadow, spacing,
   and max-width. No overflow, no pointer-events, no width/height
   constraint on anything inside it; the widget's own box (and
   whatever the "cascoon" app renders inside .elementor-element-93815c4
   at runtime, including any Intui.travel transfer-search DOM) simply
   sits inside this wrapper's padding — same pattern already used for
   Mietwagen's .elementor-element-3c442e8 and Hotels' FeWo-direkt
   wrapper .elementor-element-0afed2f. Deliberately no `overflow`
   property is set here: the widget may render dropdowns/calendars/a
   datepicker outside its own box, and overflow:hidden on an ancestor
   could visually clip those even without touching the widget itself.
   The pre-existing sitewide overflow-x:auto safeguard on
   .elementor-widget-shortcode (see the horizontal-scrollbar diagnosis
   in the accompanying report) is left completely alone here — nothing
   in this block touches .elementor-element-93815c4 or its overflow
   behavior.

   Step 3: hide the unrelated leftover Meta-ad image wrapper
   (.elementor-element-9f186cd, attachment 619) so it no longer
   displays on this page. display:none only — Elementor data, the
   attachment, and the database are completely untouched, exactly
   mirroring the Hotels page's existing .elementor-element-e172f39
   precedent above.
   ========================================================================== */
body.page-id-59 .elementor-element-3c308fd {
	max-width: 1200px;
	margin: 40px auto 48px;
	background: #fffdfb;
	border: 1px solid rgba(84, 36, 157, 0.10);
	border-radius: 24px;
	box-shadow: 0 16px 36px rgba(20, 8, 46, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
}

@media (max-width: 992px) {
	body.page-id-59 .elementor-element-3c308fd {
		margin: 28px auto 36px;
		border-radius: 18px;
		padding: 28px 24px;
	}
}

@media (max-width: 543px) {
	body.page-id-59 .elementor-element-3c308fd {
		margin: 20px auto 28px;
		border-radius: 16px;
		padding: 20px 16px;
	}
}

body.page-id-59 .elementor-element-9f186cd {
	display: none;
}

/* --- Step 4: hide only the scrollbar UI on the transfer widget's own
   wrapper (.elementor-element-93815c4) — the exact element that owns
   it, per the horizontal-scrollbar diagnosis (the pre-existing
   sitewide Additional CSS already sets overflow-x:auto on
   .elementor-widget-shortcode, which this element matches). overflow-x
   is left exactly as Additional CSS set it (still "auto", still
   scrollable if the cascoon app's content ever needs it) — only the
   scrollbar's visual chrome is suppressed. No overflow-y, pointer-events,
   width, height, or positioning is touched, and nothing inside the
   widget (Travelpayouts/Intui runtime DOM, form fields, dropdowns,
   datepicker, buttons) is selected. Same technique already shipped for
   the homepage's map widget (.elementor-element-b83d232
   .elementor-widget-shortcode) above. Scoped to just this one widget,
   not to .elementor-widget-shortcode generally, so every other
   shortcode widget on the site keeps its scrollbar untouched. */
body.page-id-59 .elementor-element-93815c4 {
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* legacy Edge/IE */
}

body.page-id-59 .elementor-element-93815c4::-webkit-scrollbar {
	display: none; /* Chrome/Safari/Chromium Edge */
}

/* ==========================================================================
   Pendeln page "Weiterreisen" editorial route section — page ID 59
   only. Printed via tovogo_design_layer_render_pendeln_routes_section()
   in tovogo-design-layer.php, hooked to astra_content_after at
   priority 10 (first Pendeln-page callback on that hook), so it
   always renders directly below the transfer widget.

   Horizontal journey composition, not stacked/boxed cards: no
   enclosing rounded container, no shadow, no per-item card shell, no
   numbering. A single continuous route line (.tovogo-pendeln-routes-
   line, a gently curved SVG path — solid first half, dashed second
   half) runs the width of the section with three small, equally-
   weighted circle markers set on it: Ankunft and Rückreise as solid
   dots (arrival/return), Aufenthalt as a hollow ring (a stop along
   the way, not an endpoint). Three text blocks below sit in a plain
   3-column grid whose column centers line up exactly with the three
   markers (equal thirds); all three share the same type scale so
   none dominates. Warm near-white background, no gradient, no
   photography. Everything scoped under .tovogo-pendeln-routes-*.

   >992px: horizontal route, gentle curve. 543–992px: horizontal
   route, flattened curve, tighter spacing. <=543px: the line and its
   markers rotate into a vertical keyline — each waypoint grows its
   own marker+connector (.tovogo-pendeln-routes-waypoint-marker,
   hidden above 543px) and the row switches to marker-left/text-
   right — still no cards, no horizontal overflow.
   ========================================================================== */

body.page-id-59 .tovogo-pendeln-routes {
	background: #f8f7fb;
	padding: 84px 32px 92px;
}

body.page-id-59 .tovogo-pendeln-routes * {
	box-sizing: border-box;
}

body.page-id-59 .tovogo-pendeln-routes-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-59 .tovogo-pendeln-routes-header {
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

body.page-id-59 .tovogo-pendeln-routes-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 14px;
}

body.page-id-59 .tovogo-pendeln-routes-title {
	margin: 0 0 12px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-59 .tovogo-pendeln-routes-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Route line: absolutely-positioned circle markers over a full-
   bleed SVG path (preserveAspectRatio="none" + non-scaling-stroke,
   so the curve stretches to any width while the stroke and the
   circle markers stay a constant, undistorted size). --- */
body.page-id-59 .tovogo-pendeln-routes-line {
	position: relative;
	height: 56px;
	margin: 0 0 4px;
}

body.page-id-59 .tovogo-pendeln-routes-line svg {
	display: block;
	width: 100%;
	height: 100%;
}

body.page-id-59 .tovogo-pendeln-routes-line-path {
	fill: none;
	stroke: #54249d;
}

body.page-id-59 .tovogo-pendeln-routes-line-path--solid {
	stroke-width: 1.5;
	opacity: 0.55;
}

body.page-id-59 .tovogo-pendeln-routes-line-path--dashed {
	stroke-width: 1.5;
	stroke-dasharray: 1 4.5;
	stroke-linecap: round;
	opacity: 0.4;
}

body.page-id-59 .tovogo-pendeln-routes-line-marker {
	position: absolute;
	top: 50%;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #54249d;
	transform: translate(-50%, -50%);
}

body.page-id-59 .tovogo-pendeln-routes-line-marker--ankunft {
	left: 16.666%;
}

body.page-id-59 .tovogo-pendeln-routes-line-marker--aufenthalt {
	left: 50%;
	width: 11px;
	height: 11px;
	background: #f8f7fb;
	border: 1.5px solid #54249d;
}

body.page-id-59 .tovogo-pendeln-routes-line-marker--rueckreise {
	left: 83.333%;
}

/* --- Text grid: plain equal thirds, no border/radius/shadow/tint —
   column centers line up with the three markers above. --- */
body.page-id-59 .tovogo-pendeln-routes-waypoints {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0 24px;
}

body.page-id-59 .tovogo-pendeln-routes-waypoint {
	text-align: center;
}

body.page-id-59 .tovogo-pendeln-routes-waypoint-marker {
	display: none;
}

body.page-id-59 .tovogo-pendeln-routes-waypoint-body {
	max-width: 260px;
	margin: 0 auto;
}

body.page-id-59 .tovogo-pendeln-routes-waypoint-title {
	margin: 0 0 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-59 .tovogo-pendeln-routes-waypoint-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-59 .tovogo-pendeln-routes {
		padding: 70px 24px 78px;
	}

	body.page-id-59 .tovogo-pendeln-routes-header {
		margin-bottom: 42px;
	}

	/* Tablet: flatten the curve and tighten the line height, but keep
	   the same horizontal 3-across composition connecting all three
	   moments. */
	body.page-id-59 .tovogo-pendeln-routes-line {
		height: 44px;
	}

	body.page-id-59 .tovogo-pendeln-routes-line-path--solid,
	body.page-id-59 .tovogo-pendeln-routes-line-path--dashed {
		stroke-width: 1.25;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoints {
		gap: 0 16px;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint-body {
		max-width: 220px;
	}
}

@media (max-width: 543px) {
	body.page-id-59 .tovogo-pendeln-routes {
		padding: 56px 20px 64px;
	}

	body.page-id-59 .tovogo-pendeln-routes-header {
		margin-bottom: 36px;
	}

	/* Mobile: the horizontal SVG route line is replaced by a vertical
	   keyline built per waypoint (marker + connector), so the layout
	   stays a single continuous route rotated 90°, never a stack of
	   cards. */
	body.page-id-59 .tovogo-pendeln-routes-line {
		display: none;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoints {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint {
		display: flex;
		align-items: stretch;
		gap: 16px;
		text-align: left;
		padding-bottom: 28px;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint:last-child {
		padding-bottom: 0;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint-marker {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 11px;
		flex-shrink: 0;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint-marker::before {
		content: '';
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background: #54249d;
		flex-shrink: 0;
		margin-top: 4px;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint--aufenthalt .tovogo-pendeln-routes-waypoint-marker::before {
		width: 9px;
		height: 9px;
		background: #f8f7fb;
		border: 1.5px solid #54249d;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint-marker::after {
		content: '';
		flex: 1;
		width: 1px;
		margin-top: 4px;
		background-color: rgba(84, 36, 157, 0.3);
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint--aufenthalt .tovogo-pendeln-routes-waypoint-marker::after {
		background-color: transparent;
		background-image: linear-gradient(to bottom, rgba(84, 36, 157, 0.4) 50%, transparent 50%);
		background-size: 1px 7px;
		background-repeat: repeat-y;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint:last-child .tovogo-pendeln-routes-waypoint-marker::after {
		display: none;
	}

	body.page-id-59 .tovogo-pendeln-routes-waypoint-body {
		max-width: none;
		margin: 0;
	}
}

/* ==========================================================================
   Pendeln page "Warum Tovogo" trust/benefits section — page ID 59
   only. Printed via tovogo_design_layer_render_pendeln_why_section()
   in tovogo-design-layer.php, hooked to astra_content_after at
   priority 20 (after "Weiterreisen", priority 10, on the same hook)
   so it always renders directly below it.

   Same underlying idea as the homepage's/Hotels' quiet keyline list
   (no cards, no numerals) but a different composition, used only as
   a design-language reference: proportions flipped (intro column
   wider here, list column narrower) and a thin vertical keyline
   between the two columns — echoing the route-line motif from the
   section above — that neither of those two sections has. Flat warm
   off-white background, no gradient, no photography, no heavy
   shadow. Everything scoped under .tovogo-pendeln-why-*.
   ========================================================================== */

body.page-id-59 .tovogo-pendeln-why {
	background: #faf8f5;
	padding: 112px 32px 120px;
}

body.page-id-59 .tovogo-pendeln-why * {
	box-sizing: border-box;
}

body.page-id-59 .tovogo-pendeln-why-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 64px;
	align-items: start;
}

body.page-id-59 .tovogo-pendeln-why-intro {
	position: relative;
	padding-right: 40px;
}

/* Thin vertical route-keyline between the question and the answer —
   the one deliberate visual echo of the "Weiterreisen" section's
   route-line motif above, and the detail that most sets this section
   apart from the homepage's/Hotels' own (dividerless) why layout. */
body.page-id-59 .tovogo-pendeln-why-intro::after {
	content: "";
	position: absolute;
	top: 6px;
	right: 0;
	bottom: 6px;
	width: 1px;
	background: rgba(84, 36, 157, 0.16);
}

body.page-id-59 .tovogo-pendeln-why-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

body.page-id-59 .tovogo-pendeln-why-title {
	margin: 0 0 18px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.4vw, 40px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #3a1568;
}

body.page-id-59 .tovogo-pendeln-why-title-line {
	display: block;
}

body.page-id-59 .tovogo-pendeln-why-text {
	margin: 0;
	max-width: 380px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #52485f;
}

body.page-id-59 .tovogo-pendeln-why-list {
	display: flex;
	flex-direction: column;
}

body.page-id-59 .tovogo-pendeln-why-item {
	padding: 26px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.14);
}

body.page-id-59 .tovogo-pendeln-why-item:first-child {
	padding-top: 0;
	border-top: 0;
}

body.page-id-59 .tovogo-pendeln-why-item-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-59 .tovogo-pendeln-why-item-text {
	margin: 0;
	max-width: 420px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-59 .tovogo-pendeln-why {
		padding: 80px 24px 88px;
	}

	body.page-id-59 .tovogo-pendeln-why-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	body.page-id-59 .tovogo-pendeln-why-intro {
		padding-right: 0;
	}

	body.page-id-59 .tovogo-pendeln-why-intro::after {
		display: none;
	}

	body.page-id-59 .tovogo-pendeln-why-text {
		max-width: 100%;
	}
}

@media (max-width: 543px) {
	body.page-id-59 .tovogo-pendeln-why {
		padding: 64px 20px 72px;
	}

	body.page-id-59 .tovogo-pendeln-why-item {
		padding: 20px 0;
	}
}

/* ==========================================================================
   Erlebnisse (experiences/activities) page hero — page ID 447
   (/angebote_header/) only.

   Markup printed by tovogo_design_layer_render_experiences_hero_section()
   in tovogo-design-layer.php, hooked to Astra's public
   astra_content_before action — fires before #content/.ast-container
   even open, the same safe sibling placement already used for the
   homepage, Hotels, Mietwagen, and Pendeln heroes. Purely decorative:
   no links, no booking logic, no data. Everything scoped under
   .tovogo-experiences-hero-*, a namespace distinct from every other
   page's hero classes — a classical museum/gallery facade + an
   admission-stamp motif + two ticket-stub chips, deliberately not an
   airplane/orbit, building-tower, road, or shuttle-route motif.
   ========================================================================== */

.tovogo-experiences-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f6f4fb 0%, #f8f7fb 100%);
	padding: 64px 32px 40px;
}

.tovogo-experiences-hero * {
	box-sizing: border-box;
}

.tovogo-experiences-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 56px;
}

.tovogo-experiences-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

.tovogo-experiences-hero-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

.tovogo-experiences-hero-subtitle {
	margin: 0;
	max-width: 480px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Right-side visual: museum/gallery facade line art + a soft glow
   + an admission-stamp motif + two floating ticket-stub chips.
   Decorative only (aria-hidden). --- */

.tovogo-experiences-hero-visual {
	position: relative;
	min-height: 340px;
}

.tovogo-experiences-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 55% 38%, rgba(101, 66, 170, 0.16) 0%, rgba(101, 66, 170, 0) 62%);
	pointer-events: none;
}

.tovogo-experiences-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(320px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-experiences-hero-svg-pediment {
	fill: rgba(84, 36, 157, 0.08);
	stroke: #54249d;
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.tovogo-experiences-hero-svg-entablature {
	stroke: #54249d;
	stroke-width: 2;
	stroke-linecap: round;
}

.tovogo-experiences-hero-svg-column {
	stroke: rgba(84, 36, 157, 0.4);
	stroke-width: 1.8;
	stroke-linecap: round;
}

.tovogo-experiences-hero-svg-step {
	stroke: rgba(84, 36, 157, 0.28);
	stroke-width: 2;
	stroke-linecap: round;
}

.tovogo-experiences-hero-svg-step--wide {
	stroke: rgba(84, 36, 157, 0.18);
}

.tovogo-experiences-hero-svg-stamp {
	fill: none;
	stroke: #3a1568;
	stroke-width: 1.6;
	stroke-linecap: round;
	opacity: 0.55;
}

.tovogo-experiences-hero-svg-stamp-ring {
	stroke: #3a1568;
}

.tovogo-experiences-hero-chip {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #ffffff;
	color: #3a1568;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	padding: 9px 16px 9px 10px;
	border-radius: 12px;
	box-shadow: 0 12px 24px rgba(20, 8, 46, 0.12);
	white-space: nowrap;
}

.tovogo-experiences-hero-chip-icon {
	display: block;
	width: 24px;
	height: 24px;
	flex: 0 0 auto;
	color: #54249d;
}

.tovogo-experiences-hero-chip-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.tovogo-experiences-hero-chip--museum { top: 8%; left: 2%; }
.tovogo-experiences-hero-chip--tour { bottom: 12%; right: 0%; }

@media (prefers-reduced-motion: no-preference) {
	.tovogo-experiences-hero-chip {
		animation: tovogo-experiences-hero-float 6s ease-in-out infinite;
	}

	.tovogo-experiences-hero-chip--tour {
		animation-delay: -3s;
	}

	@keyframes tovogo-experiences-hero-float {
		0%, 100% { transform: translateY(0); }
		50% { transform: translateY(-8px); }
	}
}

@media (max-width: 992px) {
	.tovogo-experiences-hero {
		padding: 48px 24px 32px;
	}

	.tovogo-experiences-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 32px;
	}

	.tovogo-experiences-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-experiences-hero-visual {
		min-height: 260px;
		max-width: 380px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-experiences-hero {
		padding: 40px 20px 24px;
	}

	.tovogo-experiences-hero-visual {
		min-height: 220px;
	}

	.tovogo-experiences-hero-chip--tour {
		display: none;
	}
}

/* --- Step 2: frame the existing Tiqets/Travelpayouts experiences
   area. Only the pre-existing top-level Elementor container is
   touched — background, border, radius, shadow, spacing, max-width,
   and centering. No overflow property is set here: the pre-existing
   sitewide Additional CSS rule already guards horizontal overflow on
   .elementor-widget-shortcode (max-width:100%; overflow-x:auto), and
   that rule is left completely alone — nothing here overrides or
   duplicates it. .elementor-element-853993e, .elementor-widget-shortcode,
   .elementor-shortcode, the tpembd.com script tag, and any DOM it
   generates at runtime are never selected, directly or indirectly.

   Refinement pass: moved away from the conventional floating white
   card (24px radius, visible border, soft drop shadow) toward a
   restrained editorial "stage" — a top/bottom keyline only (no side
   borders, so it reads as an open editorial band inside the page
   column, not a boxed container), no shadow, a barely-there radius,
   and a background only one shade off the plain page background
   (subtle tonal separation, not a card surface). No fixed height, no
   overflow/clipping — the widget's own runtime content still governs
   its height entirely. --- */
body.page-id-447 .elementor-element-86e9571 {
	max-width: 1200px;
	margin: 40px auto 48px;
	background: #fdfcf9;
	border-top: 1px solid rgba(84, 36, 157, 0.16);
	border-bottom: 1px solid rgba(84, 36, 157, 0.16);
	border-radius: 3px;
	box-shadow: none;
	padding: 44px 56px;
}

@media (max-width: 992px) {
	body.page-id-447 .elementor-element-86e9571 {
		margin: 28px auto 36px;
		padding: 32px 32px;
	}
}

@media (max-width: 543px) {
	body.page-id-447 .elementor-element-86e9571 {
		margin: 20px auto 28px;
		padding: 24px 20px;
	}
}

/* ==========================================================================
   Erlebnisse "Was möchtest du entdecken?" editorial discovery section —
   page ID 447 only. Printed via
   tovogo_design_layer_render_experiences_discovery_section() in
   tovogo-design-layer.php, hooked to astra_content_after, which fires
   only after #content/.ast-container — and therefore the entire
   Elementor tree, including .elementor-447 → .elementor-element-86e9571
   → .elementor-element-853993e and the Tiqets/Travelpayouts script it
   renders — has already closed. Nothing in this block targets
   .elementor-element-853993e, .elementor-widget-shortcode,
   .elementor-shortcode, tpembd.com, or any DOM that script generates.

   Deliberately an asymmetric "collage" grid, not four equal cards and
   not a numbered process: "Museen" (tall, spans both rows) and
   "Sehenswürdigkeiten" (wide, spans two columns) carry more visual
   weight than the compact "Touren" and "Tickets & Erlebnisse" modules.
   Flat, barely-tinted panel backgrounds and a restrained 1px border +
   very soft shadow only — no gradients, no large shadows, no
   photography. Everything scoped under .tovogo-experiences-discovery-*.
   ========================================================================== */

body.page-id-447 .tovogo-experiences-discovery {
	background: #faf8f5;
	padding: 112px 32px 120px;
}

body.page-id-447 .tovogo-experiences-discovery * {
	box-sizing: border-box;
}

body.page-id-447 .tovogo-experiences-discovery-inner {
	max-width: 1200px;
	margin: 0 auto;
}

body.page-id-447 .tovogo-experiences-discovery-header {
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

body.page-id-447 .tovogo-experiences-discovery-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 18px;
}

body.page-id-447 .tovogo-experiences-discovery-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-447 .tovogo-experiences-discovery-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Layout: illustration + list, stacked by default (mobile-first —
   illustration above, list below, purely in normal document flow, no
   absolute positioning anywhere at any width) and placed side by side
   from 993px up via source order alone (illustration markup comes
   first, so it lands left / list lands right with no `order`
   property needed). --- */
body.page-id-447 .tovogo-experiences-discovery-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

@media (min-width: 993px) {
	body.page-id-447 .tovogo-experiences-discovery-layout {
		grid-template-columns: 0.85fr 1fr;
		gap: 72px;
	}

	/* Nudge the illustration slightly right + up within its own column
	   (transform only — no absolute positioning, no change to layout
	   flow/flex sizing, so the grid/gap math above is untouched and it
	   can never overlap the list column: at this column width the SVG
	   still has ~130px of horizontal breathing room after this shift).
	   Desktop-only, so tablet/mobile stacking is unaffected. */
	body.page-id-447 .tovogo-experiences-discovery-illustration-svg {
		transform: translate(28px, -20px);
	}
}

/* --- Illustration: ONE coherent line-art scene (museum facade +
   slender tower silhouette + a small ticket resting at its foot, all
   sharing one ground line) — not separate floating fragments. Kept to
   a single, centered, modestly-sized SVG so it reads as one picture,
   not a decorative field. --- */
body.page-id-447 .tovogo-experiences-discovery-illustration {
	display: flex;
	justify-content: center;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-svg {
	display: block;
	width: 100%;
	max-width: 380px;
	height: auto;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-ground {
	stroke: rgba(84, 36, 157, 0.22);
	stroke-width: 1.6;
	stroke-linecap: round;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-line {
	fill: none;
	stroke: #54249d;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-line-faint {
	fill: none;
	stroke: rgba(84, 36, 157, 0.32);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

/* --- List: a clean vertical editorial list, not cards. No border,
   no background, or border-radius on any item — only a single 1px
   top hairline between consecutive items (never around an item). --- */
body.page-id-447 .tovogo-experiences-discovery-list {
	display: flex;
	flex-direction: column;
}

body.page-id-447 .tovogo-experiences-discovery-item {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	padding: 26px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.12);
}

body.page-id-447 .tovogo-experiences-discovery-item:first-child {
	border-top: none;
	padding-top: 0;
}

/* Slightly tighter vertical rhythm between the four list rows —
   desktop-only (placed after the base padding rule above so it
   correctly wins at this width), so the tablet/mobile item spacing
   further below is unaffected. */
@media (min-width: 993px) {
	body.page-id-447 .tovogo-experiences-discovery-item {
		padding: 22px 0;
	}
}

body.page-id-447 .tovogo-experiences-discovery-item-icon {
	display: block;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	margin-top: 2px;
	color: #54249d;
}

body.page-id-447 .tovogo-experiences-discovery-item-icon svg {
	display: block;
	width: 100%;
	height: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.25;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-447 .tovogo-experiences-discovery-icon-dot {
	fill: currentColor;
	stroke: none;
	opacity: 0.6;
}

body.page-id-447 .tovogo-experiences-discovery-item-body {
	flex: 1 1 auto;
	min-width: 0;
}

body.page-id-447 .tovogo-experiences-discovery-item-title {
	margin: 0 0 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 21px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-447 .tovogo-experiences-discovery-item-text {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-447 .tovogo-experiences-discovery {
		padding: 80px 24px 88px;
	}

	body.page-id-447 .tovogo-experiences-discovery-header {
		margin-bottom: 36px;
	}

	body.page-id-447 .tovogo-experiences-discovery-illustration-svg {
		max-width: 280px;
	}
}

@media (max-width: 543px) {
	body.page-id-447 .tovogo-experiences-discovery {
		padding: 64px 20px 72px;
	}

	body.page-id-447 .tovogo-experiences-discovery-header {
		margin-bottom: 32px;
	}

	body.page-id-447 .tovogo-experiences-discovery-layout {
		gap: 32px;
	}

	body.page-id-447 .tovogo-experiences-discovery-item {
		padding: 20px 0;
		gap: 16px;
	}

	body.page-id-447 .tovogo-experiences-discovery-item-icon {
		width: 28px;
		height: 28px;
	}
}

/* ==========================================================================
   Erlebnisse "Warum Tovogo" trust/benefits section — page ID 447
   only. Printed via tovogo_design_layer_render_experiences_why_section()
   in tovogo-design-layer.php, hooked to astra_content_after at
   priority 20 (after Discovery, priority 10, on the same hook) so it
   always renders directly below it.

   Editorial split, not three equal cards: a large two-line heading
   column on the left, a plain hairline-separated benefits list on
   the right — no border/radius/shadow/tint on any item, no
   numbering, no icons. A single thin vertical keyline
   (.tovogo-experiences-why-divider) runs between the two columns on
   desktop, interrupted by one small hollow ring
   (.tovogo-experiences-why-divider-notch) — a restrained nod to a
   museum-ticket perforation, this section's one small "gallery"
   motif, distinct from the Pendeln "why" section's own proportions.
   Warm near-white background (one shade lighter than Discovery's, so
   the two sections stay visually distinct while sharing the same
   family), no gradient, no photography. Everything scoped under
   .tovogo-experiences-why-*.
   ========================================================================== */

body.page-id-447 .tovogo-experiences-why {
	background: #fffdfb;
	padding: 112px 32px 120px;
}

body.page-id-447 .tovogo-experiences-why * {
	box-sizing: border-box;
}

body.page-id-447 .tovogo-experiences-why-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr auto 1fr;
	column-gap: 56px;
}

body.page-id-447 .tovogo-experiences-why-intro {
	min-width: 0;
	padding-top: 4px;
}

body.page-id-447 .tovogo-experiences-why-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 20px;
}

body.page-id-447 .tovogo-experiences-why-title {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 3.4vw, 46px);
	line-height: 1.14;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

body.page-id-447 .tovogo-experiences-why-title-line {
	display: block;
}

body.page-id-447 .tovogo-experiences-why-text {
	margin: 0;
	max-width: 360px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #52485f;
}

/* --- Divider: one thin vertical keyline between the two columns —
   a plain 1px-wide grid item, stretched to the row's full height by
   the grid's default stretch alignment (no explicit height needed) —
   interrupted once by a small hollow ring "notch" at its vertical
   midpoint. --- */
body.page-id-447 .tovogo-experiences-why-divider {
	position: relative;
	width: 1px;
	background: rgba(84, 36, 157, 0.16);
}

body.page-id-447 .tovogo-experiences-why-divider-notch {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fffdfb;
	border: 1.5px solid rgba(84, 36, 157, 0.45);
	transform: translate(-50%, -50%);
}

body.page-id-447 .tovogo-experiences-why-list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

body.page-id-447 .tovogo-experiences-why-item {
	padding: 28px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.12);
}

body.page-id-447 .tovogo-experiences-why-item:first-child {
	border-top: none;
	padding-top: 0;
}

body.page-id-447 .tovogo-experiences-why-item-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #201033;
}

body.page-id-447 .tovogo-experiences-why-item-text {
	margin: 0;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #52485f;
}

@media (max-width: 992px) {
	body.page-id-447 .tovogo-experiences-why {
		padding: 80px 24px 88px;
	}

	/* Tablet/mobile: collapse to one column, source order (intro,
	   then list — the divider has nothing to divide any more, so it
	   is hidden rather than left as a stray horizontal rule). */
	body.page-id-447 .tovogo-experiences-why-inner {
		grid-template-columns: 1fr;
		row-gap: 40px;
	}

	body.page-id-447 .tovogo-experiences-why-divider {
		display: none;
	}

	body.page-id-447 .tovogo-experiences-why-text {
		max-width: 520px;
	}
}

@media (max-width: 543px) {
	body.page-id-447 .tovogo-experiences-why {
		padding: 64px 20px 72px;
	}

	body.page-id-447 .tovogo-experiences-why-inner {
		row-gap: 32px;
	}

	body.page-id-447 .tovogo-experiences-why-item {
		padding: 22px 0;
	}
}

/* ==========================================================================
   Mietwagen "country hero" system — reusable across every Mietwagen
   country subpage (Spanien, Italien, Frankreich, Türkei, Griechenland,
   USA), driven by tovogo_design_layer_get_country_hero_pages() in
   tovogo-design-layer.php. This markup only ever prints for a page ID
   present in that config array — currently just page 557 (Spanien),
   the pilot — so this base block is intentionally unscoped by
   body.page-id, exactly like .tovogo-mietwagen-hero above: the
   PHP-side config array is the real boundary, not a CSS selector.
   Per-country colour/accent differences (see .tovogo-country-hero--spain
   below) hang off the modifier class the renderer already adds
   (tovogo-country-hero--<slug>), so later countries can add their own
   modifier block without touching this shared one.

   Deliberately lighter than .tovogo-mietwagen-hero above: less
   vertical padding, no floating animated location pills, a smaller/
   quieter glow, no bottom colour-handoff pool — a country page should
   read as a calmer, more focused sibling of the Mietwagen hub, not a
   like-for-like copy of it.
   ========================================================================== */

.tovogo-country-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #f7f2ec 0%, #f6f2fb 60%, #f8f7fb 100%);
	padding: 48px 32px 36px;
}

.tovogo-country-hero * {
	box-sizing: border-box;
}

.tovogo-country-hero-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	align-items: center;
	gap: 48px;
}

.tovogo-country-hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: rgba(84, 36, 157, 0.08);
	color: #54249d;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 8px 16px;
	border-radius: 999px;
	margin: 0 0 16px;
}

.tovogo-country-hero-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.6vw, 44px);
	line-height: 1.16;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #201033;
}

.tovogo-country-hero-subtitle {
	margin: 0 0 20px;
	max-width: 460px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.6;
	color: #52485f;
}

.tovogo-country-hero-back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: #54249d;
	text-decoration: none;
}

.tovogo-country-hero-back:hover,
.tovogo-country-hero-back:focus-visible {
	text-decoration: underline;
}

/* --- Right-side visual: one restrained destination scene + a soft
   glow. Decorative only (aria-hidden). --- */

.tovogo-country-hero-visual {
	position: relative;
	min-height: 300px;
}

.tovogo-country-hero-glow {
	position: absolute;
	inset: 0;
	background: radial-gradient(circle at 55% 45%, rgba(101, 66, 170, 0.12) 0%, rgba(101, 66, 170, 0) 62%);
	pointer-events: none;
}

.tovogo-country-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: min(300px, 100%);
	height: auto;
	margin: 0 auto;
}

.tovogo-country-hero-svg-horizon {
	fill: none;
	stroke: rgba(84, 36, 157, 0.2);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.tovogo-country-hero-svg-sun {
	fill: none;
	stroke: rgba(84, 36, 157, 0.28);
	stroke-width: 2;
	stroke-linecap: round;
}

.tovogo-country-hero-svg-wave {
	fill: none;
	stroke: rgba(84, 36, 157, 0.22);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.tovogo-country-hero-svg-building {
	fill: rgba(84, 36, 157, 0.08);
	stroke: rgba(84, 36, 157, 0.3);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.tovogo-country-hero-svg-roofline {
	stroke: rgba(84, 36, 157, 0.3);
	stroke-width: 1.6;
	stroke-linecap: round;
}

.tovogo-country-hero-svg-arch {
	fill: #f8f7fb;
	stroke: rgba(84, 36, 157, 0.3);
	stroke-width: 1.4;
	stroke-linejoin: round;
}

.tovogo-country-hero-svg-road {
	fill: rgba(84, 36, 157, 0.08);
	stroke: rgba(84, 36, 157, 0.32);
	stroke-width: 1.8;
	stroke-linejoin: round;
}

.tovogo-country-hero-svg-lane {
	fill: none;
	stroke: #54249d;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-dasharray: 6 10;
}

/* --- Car silhouette, viewed from behind (rear elevation) to match the
   road's own forward/receding perspective — the viewer is positioned
   behind the car looking down the road toward the horizon, same as the
   road/lane above, so the car must face away into that same view
   rather than sideways across it. Body + rear window "cutout" (same
   light-fill convention already used for the architecture doorway/
   arch) + two taillights + two wheel hints peeking from under the
   bumper — deliberately no more detail than that. --- */

.tovogo-country-hero-svg-car-body {
	fill: #3a1568;
}

.tovogo-country-hero-svg-car-glass {
	fill: #f8f7fb;
}

.tovogo-country-hero-svg-car-light,
.tovogo-country-hero-svg-car-wheel {
	fill: #201033;
}

/* --- Three additional shared scene parts, added for the Italy/France/
   Turkey/Greece/USA rollout — same restrained stroke-only visual
   language as every part above, reused as-is by whichever motifs need
   them (see tovogo_design_layer_country_hero_motif() in
   tovogo-design-layer.php): a gentle countryside hill line (France), a
   simple rounded rooftop/dome (Turkey, Greece), and a fainter second
   horizon line for a wider, emptier landscape (USA). --- */

.tovogo-country-hero-svg-hill {
	fill: none;
	stroke: rgba(84, 36, 157, 0.16);
	stroke-width: 1.4;
	stroke-linecap: round;
}

.tovogo-country-hero-svg-dome {
	fill: rgba(84, 36, 157, 0.08);
	stroke: rgba(84, 36, 157, 0.3);
	stroke-width: 1.6;
	stroke-linejoin: round;
}

.tovogo-country-hero-svg-horizon--far {
	stroke: rgba(84, 36, 157, 0.12);
}

/* --- Per-country colour modifiers. Each one only ever tints the small
   destination cue that motif already prints (sun/wave/building/
   roofline/arch/dome/hill/horizon) — never layout, spacing, type, or
   the shared road/lane/car — so all six heroes stay one visibly
   related system and only the accent + a few path shapes change. --- */

/* Spain: warm terracotta accent on the sun and architecture silhouette. */

.tovogo-country-hero--spain .tovogo-country-hero-svg-sun {
	stroke: rgba(199, 118, 61, 0.55);
}

.tovogo-country-hero--spain .tovogo-country-hero-svg-building {
	fill: rgba(199, 118, 61, 0.1);
	stroke: rgba(199, 118, 61, 0.42);
}

.tovogo-country-hero--spain .tovogo-country-hero-svg-roofline {
	stroke: rgba(199, 118, 61, 0.42);
}

/* Italy: warm ochre architecture, soft sea-teal coastline. */

.tovogo-country-hero--italy .tovogo-country-hero-svg-building {
	fill: rgba(196, 155, 74, 0.12);
	stroke: rgba(196, 155, 74, 0.45);
}

.tovogo-country-hero--italy .tovogo-country-hero-svg-roofline {
	stroke: rgba(196, 155, 74, 0.45);
}

.tovogo-country-hero--italy .tovogo-country-hero-svg-wave {
	stroke: rgba(58, 124, 140, 0.4);
}

/* France: soft sage-green countryside — hill line and the small
   village silhouette share the same accent. */

.tovogo-country-hero--france .tovogo-country-hero-svg-hill {
	stroke: rgba(107, 142, 96, 0.38);
}

.tovogo-country-hero--france .tovogo-country-hero-svg-building {
	fill: rgba(107, 142, 96, 0.1);
	stroke: rgba(107, 142, 96, 0.4);
}

.tovogo-country-hero--france .tovogo-country-hero-svg-roofline {
	stroke: rgba(107, 142, 96, 0.4);
}

/* Turkey: warm terracotta architecture/dome, turquoise coastline. */

.tovogo-country-hero--turkey .tovogo-country-hero-svg-building {
	fill: rgba(197, 108, 63, 0.1);
	stroke: rgba(197, 108, 63, 0.42);
}

.tovogo-country-hero--turkey .tovogo-country-hero-svg-dome {
	fill: rgba(197, 108, 63, 0.12);
	stroke: rgba(197, 108, 63, 0.45);
}

.tovogo-country-hero--turkey .tovogo-country-hero-svg-wave {
	stroke: rgba(45, 140, 151, 0.4);
}

/* Greece: simple white architecture, Aegean-blue dome and coastline. */

.tovogo-country-hero--greece .tovogo-country-hero-svg-building {
	fill: rgba(255, 255, 255, 0.85);
	stroke: rgba(43, 108, 176, 0.4);
}

.tovogo-country-hero--greece .tovogo-country-hero-svg-dome {
	fill: rgba(43, 108, 176, 0.15);
	stroke: rgba(43, 108, 176, 0.5);
}

.tovogo-country-hero--greece .tovogo-country-hero-svg-wave {
	stroke: rgba(43, 108, 176, 0.42);
}

/* USA: no architecture — just a warmer, wider horizon for the open
   highway/wide-landscape motif. */

.tovogo-country-hero--usa .tovogo-country-hero-svg-horizon {
	stroke: rgba(196, 142, 74, 0.32);
}

.tovogo-country-hero--usa .tovogo-country-hero-svg-horizon--far {
	stroke: rgba(196, 142, 74, 0.16);
}

@media (max-width: 992px) {
	.tovogo-country-hero {
		padding: 40px 24px 28px;
	}

	.tovogo-country-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 28px;
	}

	.tovogo-country-hero-subtitle {
		margin-left: auto;
		margin-right: auto;
	}

	.tovogo-country-hero-back {
		justify-content: center;
	}

	.tovogo-country-hero-visual {
		min-height: 240px;
		max-width: 340px;
		margin: 0 auto;
	}
}

@media (max-width: 543px) {
	.tovogo-country-hero {
		padding: 32px 20px 24px;
	}

	.tovogo-country-hero-visual {
		min-height: 200px;
	}
}

/* ==========================================================================
   Frame the existing Travelpayouts/LocalRent search area — Spain
   Mietwagen country page (page ID 557) only.

   Mirrors the exact same "Step 2" framing already applied to page 60's
   own outer container (body.page-id-60 .elementor-element-3c442e8,
   above): background, border, radius, shadow, spacing, and max-width
   on the pre-existing OUTER Elementor container only. No overflow, no
   pointer-events, no width/height constraint that could affect the
   widget itself or its runtime-injected #mrc_widget_wrapper*; nothing
   inside .elementor-element-d084b85, .elementor-widget-shortcode, or
   .elementor-shortcode is targeted here. The sitewide Additional CSS
   rule that already guards horizontal overflow on
   .elementor-widget-shortcode is left completely alone — no competing
   overflow rule is added.
   ========================================================================== */

body.page-id-557 .elementor-element-75e2a62 {
	max-width: 1200px;
	margin: 32px auto 48px;
	background: #fffdfb;
	border: 1px solid rgba(84, 36, 157, 0.10);
	border-radius: 24px;
	box-shadow: 0 16px 36px rgba(20, 8, 46, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
}

@media (max-width: 992px) {
	body.page-id-557 .elementor-element-75e2a62 {
		margin: 24px auto 36px;
		border-radius: 18px;
		padding: 28px 24px;
	}
}

@media (max-width: 543px) {
	body.page-id-557 .elementor-element-75e2a62 {
		margin: 16px auto 28px;
		border-radius: 16px;
		padding: 20px 16px;
	}
}

/* ==========================================================================
   Frame the existing Travelpayouts/LocalRent search area — Italien,
   Frankreich, Türkei, Griechenland, and USA Mietwagen country pages
   (page IDs 559, 576, 580, 588, 593).

   Identical rule, values, and responsive breakpoints as the Spain block
   directly above — only the body.page-id-* selector and each page's
   own outer Elementor container id differ (559 → .elementor-element-
   44d6b40, 576 → -eb4ca2d, 580 → -49b0e30, 588 → -28584c4, 593 →
   -c0f1af7), so all six country pages get the exact same "Step 2"
   framing. Same safety profile as the Spain block: only the pre-
   existing OUTER Elementor container is touched (background, border,
   radius, shadow, spacing, max-width); nothing inside each page's own
   shortcode widget or .elementor-shortcode is targeted, and the
   sitewide Additional CSS overflow rule is left completely alone.
   ========================================================================== */

body.page-id-559 .elementor-element-44d6b40,
body.page-id-576 .elementor-element-eb4ca2d,
body.page-id-580 .elementor-element-49b0e30,
body.page-id-588 .elementor-element-28584c4,
body.page-id-593 .elementor-element-c0f1af7 {
	max-width: 1200px;
	margin: 32px auto 48px;
	background: #fffdfb;
	border: 1px solid rgba(84, 36, 157, 0.10);
	border-radius: 24px;
	box-shadow: 0 16px 36px rgba(20, 8, 46, 0.08), 0 2px 8px rgba(0, 0, 0, 0.05);
	padding: 40px 40px;
}

@media (max-width: 992px) {
	body.page-id-559 .elementor-element-44d6b40,
	body.page-id-576 .elementor-element-eb4ca2d,
	body.page-id-580 .elementor-element-49b0e30,
	body.page-id-588 .elementor-element-28584c4,
	body.page-id-593 .elementor-element-c0f1af7 {
		margin: 24px auto 36px;
		border-radius: 18px;
		padding: 28px 24px;
	}
}

@media (max-width: 543px) {
	body.page-id-559 .elementor-element-44d6b40,
	body.page-id-576 .elementor-element-eb4ca2d,
	body.page-id-580 .elementor-element-49b0e30,
	body.page-id-588 .elementor-element-28584c4,
	body.page-id-593 .elementor-element-c0f1af7 {
		margin: 16px auto 28px;
		border-radius: 16px;
		padding: 20px 16px;
	}
}

/* ==========================================================================
   Flights page ("/fluege/", page ID 668) — hero + safe outer framing for
   the real, untouched flight-search container. Printed by
   tovogo_design_layer_render_flights_hero_section() in
   tovogo-design-layer.php, guarded by is_page(668) so it never renders
   anywhere else. Every rule below is scoped under body.page-id-668 or
   .tovogo-flights-hero-* — nothing here is a generic/site-wide selector.

   Light-luxury palette, deliberately distinct from the homepage's dark
   hero: warm ivory base, deep aubergine type, restrained purple for the
   one real route/CTA accent, neutral graphite for secondary linework.
   No neon, no loud gradients, no globe.
   ========================================================================== */

/* --- Hide only page 668's own default Astra title wrapper (.entry-header,
   which on this page contains nothing but the auto-printed <h1
   class="entry-title">Flüge</h1> — confirmed via the live rendered
   markup, no thumbnail/meta markup present to preserve). CSS-only;
   Elementor's own "hide_title" page setting and _elementor_data are
   never touched. Scoped to body.page-id-668 only — no other page's
   title is affected. --- */
body.page-id-668 .entry-header {
	display: none;
}

/* --- Remove the large empty gap between the flight-search widget and
   the footer. Root cause (confirmed via computed-style inspection,
   not guessed): Astra's own sitewide sticky-footer layout —
   `#page{display:flex;flex-direction:column;min-height:100vh}` plus
   `#page .site-content{flex-grow:1}`, both printed inline in <head> by
   the theme itself, untouched here — force-stretches #content (.site-
   content) to fill any leftover viewport height. On every other page
   there is normally enough content to fill that space invisibly; on
   this page the real content (#stay/a3e0ea8 → e234bba → 0166e66 →
   #tpwl-search/#tpwl-tickets) is only ~344px tall against a 900px-
   tall #page, so .site-content was force-stretched to ~495px, leaving
   ~150px of pure unfilled flex space before the footer even started.
   #tpwl-search and #tpwl-tickets themselves are untouched, unhidden,
   and unsized — this only stops THIS ONE outer wrapper, on THIS ONE
   page, from being stretched taller than its own content by Astra's
   generic sticky-footer rule. flex-grow:0 (not a fixed height) means
   the box still simply hugs whatever content it holds, so it remains
   free to grow naturally once a real search populates #tpwl-tickets
   with results. Astra's theme files and its sticky-footer behavior on
   every other page are completely unaffected.

   Selector note: Astra's own rule is `#page .site-content` — an ID
   selector, specificity (1,1,0), which beats a class-only override
   like `body.page-id-668 .site-content` (0,2,1) regardless of load
   order. `#page` is confirmed to be a genuine ancestor of .site-
   content in the live DOM (body > #page > #content.site-content), so
   including it here is simply matching the real markup, not a
   specificity hack, and it deliberately avoids !important. --- */
body.page-id-668 #page .site-content {
	flex-grow: 0;
	width: 100%;
	max-width: none;
	padding-right: 0;
	padding-left: 0;
}

.tovogo-flights-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #faf8f4 0%, #f8f6f1 100%);
	padding: 20px 32px 24px;
}

.tovogo-flights-hero * {
	box-sizing: border-box;
}

/* --- Two-column composition: ~48% copy / ~52% visual. 1200px matches
   the content width already used across the site's other pages. --- */
.tovogo-flights-hero-inner {
	position: relative;
	z-index: 1;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.94fr 1.06fr;
	align-items: center;
	gap: 48px;
}

.tovogo-flights-hero-copy,
.tovogo-flights-hero-visual {
	min-width: 0;
}

.tovogo-flights-hero-eyebrow {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #54249d;
}

.tovogo-flights-hero-title {
	margin: 0 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(32px, 4vw, 54px);
	line-height: 1.12;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #241245;
}

.tovogo-flights-hero-title-line {
	display: block;
}

.tovogo-flights-hero-subtitle {
	margin: 0 0 32px;
	max-width: 440px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 1.65;
	color: #55495f;
}

.tovogo-flights-hero-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

.tovogo-flights-hero-cta {
	display: inline-flex;
	align-items: center;
	background: #2e1444;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 16px 34px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

.tovogo-flights-hero-cta:hover {
	background: #54249d;
	transform: translateY(-1px);
}

.tovogo-flights-hero-cta:focus-visible {
	outline: 2px solid #54249d;
	outline-offset: 3px;
}

/* Plain text — deliberately not a second button/link. */
.tovogo-flights-hero-secondary {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #7c7286;
}

/* --- Visual: one sculptural campaign-style aviation composition — a
   single large radial "field" ellipse, two soft concentric circles (a
   trajectory field, not a chart), one small radial illumination
   highlight, one dominant purple flight-path curve with 3 small nodes
   and quiet FRA/BCN/IST labels beside them (no connector lines — this
   is deliberately less "technical diagram" than the previous pass),
   and one refined top-down jet silhouette. No globe, no dashboard, no
   fake UI. Depth on the right side only — the soft radial field lives
   on this container, not the whole hero. Canvas is wide/short
   (640×440) so the composition reads as horizontal mass rather than
   height, matching the shortened hero (Step 8: wider, not taller). --- */
.tovogo-flights-hero-visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tovogo-flights-hero-svg {
	position: relative;
	display: block;
	width: 100%;
	max-width: 360px;
	height: auto;
}

/* Two soft concentric circles — a trajectory field, not a ruled grid.
   Outer fades further than inner for the same "nearer reads clearer"
   depth logic as before, now with far fewer, bolder elements. */
.tovogo-flights-hero-svg-arc {
	fill: none;
	stroke: rgba(84, 36, 157, 0.14);
	stroke-width: 1;
}

.tovogo-flights-hero-svg-arc--1 {
	stroke-opacity: 0.55;
}

.tovogo-flights-hero-svg-route {
	fill: none;
	stroke: #54249d;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.tovogo-flights-hero-svg-node {
	fill: #54249d;
}

.tovogo-flights-hero-svg-code {
	fill: #3a1568;
	opacity: 0.55;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
}

.tovogo-flights-hero-svg-plane path {
	fill: #2e1444;
}

/* One tiny, controlled aircraft drift — nothing else in this
   composition moves. Entirely gated behind prefers-reduced-motion;
   the default (no media query match) state is perfectly still. The
   full base transform (translate + rotate + scale) is repeated in
   each keyframe because a CSS `transform` animation replaces — never
   adds to — the element's own `transform` presentation attribute. */
@media (prefers-reduced-motion: no-preference) {
	.tovogo-flights-hero-svg-plane {
		animation: tovogo-flights-plane-drift 7s ease-in-out infinite;
	}

	@keyframes tovogo-flights-plane-drift {
		0%, 100% { transform: translate(415px, 155px) rotate(-36deg) scale(0.85); }
		50% { transform: translate(421px, 151px) rotate(-36deg) scale(0.85); }
	}
}

/* ==========================================================================
   Safe outer framing for the real flight-search container (element
   f22911a, id="flight") — the same container, byte-identical, that
   lives on the homepage. Only background/border/radius/shadow/padding
   on this one pre-existing OUTER Elementor wrapper; nothing inside the
   widgets, their shortcode strings, or their runtime-generated DOM is
   touched. overflow is never set here (and never to hidden), so any
   Travelpayouts dropdown/popup remains free to render outside this
   box. The second widget (e90145f, the results list) gets only a
   top border/spacing from its own stable Elementor wrapper class
   (.elementor-element-e90145f) — not a second boxed "card" — so it
   reads as a continuation of the same surface rather than a separate
   embed pasted underneath.

   padding-top trimmed to 24px (was a uniform 40px on all sides) —
   measured via real headless-Chrome rendering that, with the locked
   hero's own confirmed bottom edge (585.75px at 1776×800) and the
   existing -64px overlap below, the widget's content already began at
   ~562px, comfortably clearing the requested 120–180px-visible target
   with ~58px to spare even before this trim; this only adds a little
   more margin, it isn't fixing a shortfall. Bottom/left/right padding
   left at 40px so the surface still reads generously spaced, not
   cramped. --- */
body.page-id-668 #flight {
	position: relative;
	background: #fffdfa;
	border: 1px solid rgba(84, 36, 157, 0.12);
	border-radius: 20px;
	box-shadow: 0 20px 48px rgba(20, 8, 46, 0.08);
	padding: 24px 40px 40px;
}

body.page-id-668 .elementor-element-e90145f {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid rgba(84, 36, 157, 0.1);
}

/* Desktop-only overlap so the search surface visually lifts into the
   hero's bottom edge, echoing the same technique already proven safe
   for the homepage's #stay container (verified there: no
   overflow:hidden anywhere in Astra's own compiled CSS along the
   #content/.ast-container/#primary/#main/article/.entry-content
   ancestor chain, so a negative margin-top here cannot be clipped). */
@media (min-width: 993px) {
	body.page-id-668 #flight {
		z-index: 2;
		margin-top: -72px;
	}
}

@media (max-width: 992px) {
	.tovogo-flights-hero {
		padding: 40px 24px 32px;
	}

	.tovogo-flights-hero-inner {
		grid-template-columns: 1fr;
		text-align: center;
		gap: 40px;
	}

	.tovogo-flights-hero-copy {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tovogo-flights-hero-actions {
		align-items: center;
	}

	.tovogo-flights-hero-svg {
		max-width: 300px;
	}

	/* Reduce atmospheric layers: drop the outer of the two concentric
	   circles, keep the field/glow/route/plane. */
	.tovogo-flights-hero-svg-arc--1 {
		display: none;
	}

	body.page-id-668 #flight {
		padding: 28px;
	}
}

@media (max-width: 543px) {
	.tovogo-flights-hero {
		padding: 32px 20px 24px;
	}

	.tovogo-flights-hero-title {
		font-size: clamp(28px, 8vw, 36px);
	}

	.tovogo-flights-hero-svg {
		max-width: 240px;
	}

	.tovogo-flights-hero-cta {
		width: 100%;
		justify-content: center;
	}

	/* Simplify the aviation artwork aggressively on mobile: keep the
	   field, route, and plane; drop both concentric circles and the
	   glow highlight; keep only the first (FRA) node/code. */
	.tovogo-flights-hero-svg-arc {
		display: none;
	}

	.tovogo-flights-hero-svg-glow {
		display: none;
	}

	/* Node circles are the 3rd/4th/5th <circle> siblings overall (the
	   2 arc circles come first in source order, still counted by
	   nth-of-type even while hidden above) — hide the 4th and 5th to
	   keep only the 1st node (FRA). */
	.tovogo-flights-hero-svg-node:nth-of-type(4),
	.tovogo-flights-hero-svg-node:nth-of-type(5) {
		display: none;
	}

	.tovogo-flights-hero-svg-code:nth-of-type(2),
	.tovogo-flights-hero-svg-code:nth-of-type(3) {
		display: none;
	}

	body.page-id-668 #flight {
		padding: 20px;
		border-radius: 16px;
	}

	body.page-id-668 .elementor-element-e90145f {
		margin-top: 20px;
		padding-top: 20px;
	}
}

/* ==========================================================================
   Flights page ("/fluege/", page ID 668) — "Beliebte Flugverbindungen"
   editorial route board and "Warum Tovogo" benefits section. Printed by
   tovogo_design_layer_render_flights_routes_section() and
   tovogo_design_layer_render_flights_why_section() in
   tovogo-design-layer.php, both hooked to astra_content_after
   (priority 10 / 20) — the same public Astra hook already used for the
   Hotels and Pendeln page sections — so they render directly below the
   real, untouched Travelpayouts flight-search container (#flight) and
   before the footer. Every selector below is scoped under
   body.page-id-668 or .tovogo-flights-routes-* / .tovogo-flights-why-* —
   nothing here is a generic/site-wide selector, and nothing here
   touches #tpwl-search, #tpwl-tickets, #flight, or
   .elementor-element-e90145f.

   Same light-luxury palette already established by this page's own hero
   above (warm ivory, deep aubergine, restrained purple) — continued
   here rather than the homepage's own tones, so the whole page reads as
   one consistent surface. ==========================================

   PARSER-BUG NOTE (fixed without changing rendered output): the line
   above used to end its first sentence differently — immediately after
   the words "tovogo-flights-routes", a hyphen and an asterisk were
   directly followed, with no space, by a forward slash and then the
   words "tovogo-flights-why". Read together, that asterisk-then-slash
   pair is CSS's own comment-close token, so it ended this comment right
   there, unintentionally. Everything after that point — the rest of
   this prose, this comment's real closing token below, and the base
   `.tovogo-flights-routes` rule that used to follow immediately
   (declaring `background: #faf8f4;` and `padding: 104px 32px 80px;`) —
   was silently swallowed into one non-matching selector, confirmed via
   both Chromium's CSS engine and an independent CSS parser, neither of
   which ever produced a real rule for that selector. So in every
   browser, on every past render (including the currently-approved one),
   that base rule's background and padding were never applied:
   .tovogo-flights-routes has always actually rendered with a
   transparent background and 0 padding on all sides at desktop widths —
   confirmed via getComputedStyle immediately before this fix. The
   tablet (max-width 992px) and mobile (max-width 543px)
   `body.page-id-668 .tovogo-flights-routes` padding overrides below are
   separate rules inside their own @media blocks and were never affected
   by this bug — their padding has been genuinely active this whole time
   and is left completely untouched. The base rule itself is
   intentionally omitted below, rather than restored, so this fix cannot
   change one visible pixel: an empty, no-op base rule would only be
   dead weight, so it simply is not there. If a base background or
   padding is ever wanted at desktop widths, it must be added as a
   deliberate, visually-reviewed change — not by undoing this note. */

body.page-id-668 .tovogo-flights-routes * {
	box-sizing: border-box;
}

body.page-id-668 .tovogo-flights-routes-inner {
	max-width: 880px;
	margin: 0 auto;
}

body.page-id-668 .tovogo-flights-routes-header {
	max-width: 560px;
	margin: 0 auto 56px;
	text-align: center;
}

body.page-id-668 .tovogo-flights-routes-eyebrow {
	display: block;
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #54249d;
}

body.page-id-668 .tovogo-flights-routes-title {
	margin: 0 0 14px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #241245;
}

body.page-id-668 .tovogo-flights-routes-text {
	margin: 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #55495f;
}

/* --- The board: one structured route list, 6 horizontal rows, not a
   card grid. Each row is a 4-column line: index | departure (left) |
   drawn connecting line (center) | destination + country (right). --- */
body.page-id-668 .tovogo-flights-routes-board {
	display: flex;
	flex-direction: column;
}

body.page-id-668 .tovogo-flights-route {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr 88px 1fr;
	grid-template-areas: "index from line to";
	align-items: center;
	column-gap: 24px;
	padding: 24px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.14);
}

body.page-id-668 .tovogo-flights-route:first-child {
	padding-top: 0;
	border-top: 0;
}

body.page-id-668 .tovogo-flights-route-index {
	grid-area: index;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(84, 36, 157, 0.45);
}

body.page-id-668 .tovogo-flights-route-from {
	grid-area: from;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #241245;
	text-align: left;
}

/* Connecting line: a static track (full width, visible) plus a small
   chevron head — drawn on scroll via transform only (see the motion
   block at the end of this file), never via layout width. */
body.page-id-668 .tovogo-flights-route-line {
	grid-area: line;
	position: relative;
	height: 14px;
}

body.page-id-668 .tovogo-flights-route-line-track {
	position: absolute;
	top: 50%;
	left: 0;
	right: 12px;
	height: 1px;
	background: rgba(84, 36, 157, 0.35);
	transform-origin: left center;
}

body.page-id-668 .tovogo-flights-route-line-head {
	position: absolute;
	top: 50%;
	right: 0;
	width: 7px;
	height: 7px;
	border-top: 1px solid rgba(84, 36, 157, 0.55);
	border-right: 1px solid rgba(84, 36, 157, 0.55);
	transform: translateY(-50%) rotate(45deg);
}

body.page-id-668 .tovogo-flights-route-to {
	grid-area: to;
	text-align: right;
}

body.page-id-668 .tovogo-flights-route-city {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #241245;
}

body.page-id-668 .tovogo-flights-route-meta {
	display: block;
	margin-top: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #948aa1;
}

/* --- One restrained CTA, deliberately not implying any route row
   pre-fills or selects anything in the real search widget. --- */
body.page-id-668 .tovogo-flights-routes-cta-wrap {
	margin-top: 48px;
	margin-bottom: 20px;
	text-align: center;
}

body.page-id-668 .tovogo-flights-routes-cta {
	display: inline-flex;
	align-items: center;
	background: #2e1444;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.01em;
	padding: 15px 32px;
	border-radius: 4px;
	text-decoration: none;
	transition: background-color 0.25s ease, transform 0.25s ease;
}

body.page-id-668 .tovogo-flights-routes-cta:hover {
	background: #54249d;
	transform: translateY(-1px);
}

body.page-id-668 .tovogo-flights-routes-cta:focus-visible {
	outline: 2px solid #54249d;
	outline-offset: 3px;
}

@media (max-width: 992px) {
	body.page-id-668 .tovogo-flights-routes {
		padding: 80px 24px 64px;
	}

	body.page-id-668 .tovogo-flights-routes-header {
		margin-bottom: 44px;
	}

	body.page-id-668 .tovogo-flights-route {
		grid-template-columns: 32px 1fr 64px 1fr;
		column-gap: 16px;
	}

	body.page-id-668 .tovogo-flights-route-from,
	body.page-id-668 .tovogo-flights-route-city {
		font-size: 17px;
	}
}

@media (max-width: 543px) {
	body.page-id-668 .tovogo-flights-routes {
		padding: 56px 20px 48px;
	}

	body.page-id-668 .tovogo-flights-routes-header {
		margin-bottom: 36px;
	}

	/* Stack each row cleanly instead of squeezing 4 columns into a
	   narrow viewport — index sits beside "from", the drawn line and
	   "to" follow underneath. No horizontal overflow at any width. */
	body.page-id-668 .tovogo-flights-route {
		grid-template-columns: 24px 1fr;
		grid-template-areas:
			"index from"
			".     line"
			".     to";
		row-gap: 6px;
		padding: 20px 0;
	}

	body.page-id-668 .tovogo-flights-route-line {
		justify-self: start;
		width: 56px;
	}

	body.page-id-668 .tovogo-flights-route-to {
		text-align: left;
	}

	body.page-id-668 .tovogo-flights-routes-cta {
		width: 100%;
		justify-content: center;
	}
}

/* ==========================================================================
   Flights page "Warum Tovogo" benefits section — page ID 668 only.
   Related to, but deliberately not a copy of, the homepage's own
   .tovogo-why-list (same typography-led/thin-keyline language) — this
   version adds a small 01/02/03 numeral to each row. Everything scoped
   under body.page-id-668 .tovogo-flights-why-*.
   ========================================================================== */

body.page-id-668 .tovogo-flights-why {
	background: #faf9fb;
	padding: 56px 32px 104px;
}

body.page-id-668 .tovogo-flights-why * {
	box-sizing: border-box;
}

body.page-id-668 .tovogo-flights-why-inner {
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 72px;
	align-items: start;
}

body.page-id-668 .tovogo-flights-why-eyebrow {
	display: block;
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #54249d;
}

body.page-id-668 .tovogo-flights-why-title {
	margin: 0 0 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(28px, 3.2vw, 38px);
	line-height: 1.18;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #241245;
}

body.page-id-668 .tovogo-flights-why-text {
	margin: 0;
	max-width: 360px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #55495f;
}

body.page-id-668 .tovogo-flights-why-list {
	display: flex;
	flex-direction: column;
}

body.page-id-668 .tovogo-flights-why-item {
	display: grid;
	grid-template-columns: 40px 1fr;
	column-gap: 20px;
	padding: 26px 0;
	border-top: 1px solid rgba(84, 36, 157, 0.14);
}

body.page-id-668 .tovogo-flights-why-item:first-child {
	padding-top: 0;
	border-top: 0;
}

body.page-id-668 .tovogo-flights-why-item-number {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: rgba(84, 36, 157, 0.45);
}

body.page-id-668 .tovogo-flights-why-item-title {
	margin: 0 0 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 19px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #3a1568;
}

body.page-id-668 .tovogo-flights-why-item-text {
	margin: 0;
	max-width: 420px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: #55495f;
}

@media (max-width: 992px) {
	body.page-id-668 .tovogo-flights-why {
		padding: 64px 24px 88px;
	}

	body.page-id-668 .tovogo-flights-why-inner {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	body.page-id-668 .tovogo-flights-why-text {
		max-width: 100%;
	}
}

@media (max-width: 543px) {
	body.page-id-668 .tovogo-flights-why {
		padding: 48px 20px 64px;
	}

	body.page-id-668 .tovogo-flights-why-item {
		padding: 20px 0;
	}
}

/* ==========================================================================
   Homepage scroll-motion system ("Heim", body.page-id-57 only). Printed
   markup is untouched everywhere except one added class,
   .tovogo-motion-section, on five existing design-layer section roots
   (.tovogo-services, .tovogo-destinations, .tovogo-why, .tovogo-cta, and
   the map's own outer .tovogo-map-stage wrapper) — see
   tovogo_design_layer_render_*_section()/tovogo_design_layer_wrap_map_widget()
   in tovogo-design-layer.php. Everything below is purely additive.

   PROGRESSIVE ENHANCEMENT: tovogo-motion.js (enqueued homepage-only, see
   tovogo_design_layer_enqueue_motion_script()) adds tovogo-motion-ready to
   <html> ONLY once its IntersectionObserver is fully wired up — every
   hidden/initial-transform rule in this block is scoped under that class,
   so with JS disabled/failed, or on any browser without
   IntersectionObserver, or for prefers-reduced-motion users (the script
   bails out before ever adding the class in that case — see the
   dedicated @media block at the end of this section for a second,
   independent guarantee), .tovogo-motion-section elements and everything
   inside them simply render at their normal, fully visible resting
   state. One consistent easing curve throughout:
   cubic-bezier(0.22, 1, 0.36, 1). Animated properties are only ever
   opacity/transform — nothing here ever animates height, width, top,
   left, margin, padding, or box-shadow. No selector below targets
   #tpwl-search, #tpwl-tickets, any .elementor-* class, or anything
   inside .tovogo-map-stage-map — the map's third-party widget content
   is never selected, only the design-layer wrapper around it.
   ========================================================================== */

/* --- Section-level reveal: the five .tovogo-motion-section roots. --- */
.tovogo-motion-ready body.page-id-57 .tovogo-motion-section {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-motion-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* CTA enters slightly slower and travels slightly further, per spec. */
.tovogo-motion-ready body.page-id-57 .tovogo-cta.tovogo-motion-section {
	transform: translateY(18px);
	transition-duration: 800ms;
}

/* The map's outer wrapper (.tovogo-map-stage) is opacity-only, no
   translateY — deliberately more conservative than the other four
   sections: the Travelpayouts/Elementor map widget inside
   .tovogo-map-stage-map may read its own layout geometry on init, and a
   fade never perturbs layout the way a transform theoretically could if
   the map happened to initialize mid-transition. Nothing inside
   .tovogo-map-stage-map is selected here — only this one outer,
   design-layer-owned wrapper. */
.tovogo-motion-ready body.page-id-57 .tovogo-map-stage.tovogo-motion-section,
.tovogo-motion-ready body.page-id-57 .tovogo-map-stage.tovogo-motion-section.is-visible {
	transform: none;
}

/* --- Services: eyebrow → title → text stagger, then a 5-item wave
   across the existing (unchanged) asymmetric service-module grid, in
   source order — Flüge, Hotels, Autos, Transfers, Erlebnisse. --- */
.tovogo-motion-ready body.page-id-57 .tovogo-services-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-services.is-visible .tovogo-services-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-services.is-visible .tovogo-services-grid > .tovogo-service-module {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(3) { transition-delay: 140ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(4) { transition-delay: 210ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(5) { transition-delay: 280ms; }

/* --- Destinations: eyebrow → title → text stagger, then the 8-card
   diagonal wave. The grid has been a plain source-order 4-col/2-row
   flow (no grid-template-areas) since the desktop compact-height pass,
   so nth-child below lines up exactly with visual position — row 1
   (Paris/Istanbul/Barcelona/Dubai) sweeps left→right, row 2
   (Rom/Amsterdam/Lissabon/Wien) follows with a +90ms offset,
   the "subtle diagonal editorial rhythm" from the brief. --- */
.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-destinations.is-visible .tovogo-destinations-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-destinations.is-visible .tovogo-destinations-grid > .tovogo-destination-card {
	opacity: 1;
	transform: translateY(0);
}

/* Desktop (≥993px, 4 cols): the brief's exact diagonal-wave delays. */
@media (min-width: 993px) {
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(2) { transition-delay: 60ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(3) { transition-delay: 120ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(4) { transition-delay: 180ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(5) { transition-delay: 90ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(6) { transition-delay: 150ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(7) { transition-delay: 210ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(8) { transition-delay: 270ms; }
}

/* Tablet (544–992px, 2 cols): same distance, shorter/simpler stagger —
   a two-per-row cascade instead of the desktop diagonal. */
@media (min-width: 544px) and (max-width: 992px) {
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(2) { transition-delay: 40ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(3) { transition-delay: 40ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(4) { transition-delay: 80ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(5) { transition-delay: 80ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(6) { transition-delay: 120ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(7) { transition-delay: 120ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(8) { transition-delay: 160ms; }
}

/* Mobile (≤543px, 1 col): shorter travel distance (8–10px, per the
   brief) and a subtle, capped stagger — items 4–8 share one delay so a
   long single-column stack never makes the reader wait. */
@media (max-width: 543px) {
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card {
		transform: translateY(9px);
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(2) { transition-delay: 30ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(3) { transition-delay: 60ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card:nth-child(n+4) { transition-delay: 90ms; }
}

/* --- Why: title → text 2-tier stagger (no separate eyebrow paragraph
   here, unlike Services/Destinations), the 3-item keyline-list reveal,
   and the keyline-draw effect on the item dividers themselves. --- */
.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why.is-visible .tovogo-why-statement > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > *:nth-child(2) { transition-delay: 70ms; }

.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why.is-visible .tovogo-why-list > .tovogo-why-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(3) { transition-delay: 140ms; }

/* Keyline draw: .tovogo-why-item's existing 1px border-top (see the
   base rule earlier in this file) is left completely alone — it is
   what renders the line with JS disabled/failed or under
   prefers-reduced-motion, so layout height never changes in any state.
   Only once motion is confirmed running is that real border made
   transparent (color only — it still occupies its 1px of box height,
   so nothing reflows) and a same-position ::before overlay revealed in
   its place, which is what actually performs the left-to-right draw.
   :first-child is excluded, matching the existing base rule, which
   never gives that first item a line at all. */
.tovogo-motion-ready body.page-id-57 .tovogo-why-item {
	position: relative;
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-57 .tovogo-why-item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.14);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why.is-visible .tovogo-why-item:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(2)::before { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(3)::before { transition-delay: 140ms; }

/* --- CTA: eyebrow → title → text stagger, then button/links/note
   together ~100ms after the text. --- */
.tovogo-motion-ready body.page-id-57 .tovogo-cta-eyebrow,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-title,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-text,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-note {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-eyebrow,
.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-title,
.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-text,
.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-button,
.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-links,
.tovogo-motion-ready body.page-id-57 .tovogo-cta.is-visible .tovogo-cta-note {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-57 .tovogo-cta-title { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-cta-text { transition-delay: 140ms; }
.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
.tovogo-motion-ready body.page-id-57 .tovogo-cta-note { transition-delay: 240ms; }

/* --- Responsive: "Tablet: slightly shorter delays. Mobile: reduce
   motion distance to around 8–10px and keep stagger subtle." (the
   Destinations grid's own tablet/mobile stagger is handled separately
   above, since its wave pattern needs its own per-breakpoint values). --- */
@media (min-width: 544px) and (max-width: 992px) {
	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-title {
		transition-delay: 50ms;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-text {
		transition-delay: 100ms;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(4) { transition-delay: 150ms; }
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(5) { transition-delay: 200ms; }

	.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-note {
		transition-delay: 170ms;
	}
}

@media (max-width: 543px) {
	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module,
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-eyebrow,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-title,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-text,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-note {
		transform: translateY(9px);
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > *:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(2),
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-title {
		transition-delay: 30ms;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(3),
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-text {
		transition-delay: 60ms;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(4),
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module:nth-child(5) {
		transition-delay: 90ms;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-note {
		transition-delay: 120ms;
	}
}

/* --- Mandatory reduced-motion override: a second, independent
   guarantee alongside tovogo-motion.js's own prefers-reduced-motion
   check (which stops it from ever adding tovogo-motion-ready at all
   for these users) — belt and suspenders. Everything appears
   immediately: no transform, no transition, no delay, no line-draw. --- */
@media (prefers-reduced-motion: reduce) {
	.tovogo-motion-ready body.page-id-57 .tovogo-motion-section,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-header > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-services-grid > .tovogo-service-module,
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-header > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-destinations-grid > .tovogo-destination-card,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-statement > *,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-list > .tovogo-why-item,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item,
	.tovogo-motion-ready body.page-id-57 .tovogo-why-item::before,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-eyebrow,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-title,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-text,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-button,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-links,
	.tovogo-motion-ready body.page-id-57 .tovogo-cta-note {
		opacity: 1 !important;
		transform: none !important;
		border-top-color: rgba(84, 36, 157, 0.14) !important;
		transition: none !important;
		transition-delay: 0ms !important;
	}

	.tovogo-motion-ready body.page-id-57 .tovogo-why-item:first-child {
		border-top-color: transparent !important;
	}
}

/* ==========================================================================
   Flights page scroll-motion system ("Flüge", body.page-id-668 only).
   Reuses the exact same architecture as the homepage block above — same
   tovogo-motion.js, same single IntersectionObserver, same
   tovogo-motion-ready gate, same cubic-bezier(0.22, 1, 0.36, 1) easing.
   See tovogo_design_layer_enqueue_motion_script() in
   tovogo-design-layer.php, whose is_front_page() guard was extended
   with `|| is_page( 668 )` and nothing else — tovogo-motion.js itself
   was not modified, since it already queries `.tovogo-motion-section`
   generically. Printed markup is untouched except one added class,
   tovogo-motion-section, on this page's own two new section roots
   (.tovogo-flights-routes, .tovogo-flights-why) — see
   tovogo_design_layer_render_flights_routes_section() /
   tovogo_design_layer_render_flights_why_section() above. Every
   homepage (page-id-57) selector/timing elsewhere in this file is
   completely untouched by anything below.

   PROGRESSIVE ENHANCEMENT / REDUCED MOTION: identical guarantee to the
   homepage block above — every hidden/initial-transform rule below is
   scoped under .tovogo-motion-ready, which tovogo-motion.js only adds
   once its IntersectionObserver is fully wired up and only for users
   who do not prefer reduced motion (it bails out before that point
   otherwise); the dedicated prefers-reduced-motion media block at the
   end of this section is a second, independent guarantee, exactly
   mirroring the homepage one above. No selector below targets
   #tpwl-search, #tpwl-tickets, #flight, or anything inside the
   Travelpayouts widget.
   ========================================================================== */

/* --- Section-level reveal for both new sections. --- */
.tovogo-motion-ready body.page-id-668 .tovogo-motion-section {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-motion-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Routes: eyebrow → title → text stagger (0 / 70 / 140ms). --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes.is-visible .tovogo-flights-routes-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(3) { transition-delay: 140ms; }

/* --- Routes: row-by-row stagger, 60ms apart, across all 6 rows. --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route {
	opacity: 0;
	transform: translateY(11px);
	transition: opacity 580ms cubic-bezier(0.22, 1, 0.36, 1), transform 580ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes.is-visible .tovogo-flights-routes-board > .tovogo-flights-route {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2) { transition-delay: 60ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3) { transition-delay: 120ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4) { transition-delay: 180ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5) { transition-delay: 240ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6) { transition-delay: 300ms; }

/* --- Routes: keyline draw, same technique as the homepage's
   .tovogo-why-item — the real border-top stays as the fallback line
   (visible with JS off/failed or under reduced motion), and only once
   motion is confirmed running does it turn transparent in favor of a
   same-position ::before overlay that performs the actual left-to-right
   draw (transform only, layout width never animates). --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-route {
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-route:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.14);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes.is-visible .tovogo-flights-route:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2)::before { transition-delay: 60ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3)::before { transition-delay: 120ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4)::before { transition-delay: 180ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5)::before { transition-delay: 240ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6)::before { transition-delay: 300ms; }

/* --- Routes: the departure→destination connecting line itself draws
   (transform only) in step with its own row, and its small chevron head
   fades in just after the line finishes (row delay + ~550ms). Both are
   written as explicit per-row values (not relying on CSS delay
   addition) so each row's timing is unambiguous. --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-route-line-track {
	transform: scaleX(0);
	transition: transform 750ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes.is-visible .tovogo-flights-route-line-track {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-route-line-head {
	opacity: 0;
	transition: opacity 300ms ease;
	transition-delay: 550ms;
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes.is-visible .tovogo-flights-route-line-head {
	opacity: 1;
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2) .tovogo-flights-route-line-track { transition-delay: 60ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2) .tovogo-flights-route-line-head { transition-delay: 610ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3) .tovogo-flights-route-line-track { transition-delay: 120ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3) .tovogo-flights-route-line-head { transition-delay: 670ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4) .tovogo-flights-route-line-track { transition-delay: 180ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4) .tovogo-flights-route-line-head { transition-delay: 730ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5) .tovogo-flights-route-line-track { transition-delay: 240ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5) .tovogo-flights-route-line-head { transition-delay: 790ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6) .tovogo-flights-route-line-track { transition-delay: 300ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6) .tovogo-flights-route-line-head { transition-delay: 850ms; }

/* --- Why: right benefit rows stagger 0/80/160ms; left copy relies only
   on the section-level reveal above ("normal section reveal", per
   spec) — no separate eyebrow/title/text stagger added here. --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-why.is-visible .tovogo-flights-why-list > .tovogo-flights-why-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(2) { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(3) { transition-delay: 160ms; }

/* --- Why: keyline draw for each benefit row's divider, same technique
   as Routes/homepage above. --- */
.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item {
	position: relative;
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.14);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-why.is-visible .tovogo-flights-why-item:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(2)::before { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(3)::before { transition-delay: 160ms; }

/* --- Responsive: tablet keeps the stagger but shortens the delays
   slightly; mobile shortens further and caps translate distance at
   9px, matching the homepage's own tablet/mobile motion overrides. --- */
@media (min-width: 544px) and (max-width: 992px) {
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:nth-child(2)::before {
		transition-delay: 50ms;
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:nth-child(3)::before {
		transition-delay: 100ms;
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2) .tovogo-flights-route-line-track { transition-delay: 45ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3) .tovogo-flights-route-line-track { transition-delay: 90ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4) .tovogo-flights-route-line-track { transition-delay: 135ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5) .tovogo-flights-route-line-track { transition-delay: 180ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6) .tovogo-flights-route-line-track { transition-delay: 225ms; }
}

@media (max-width: 543px) {
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item {
		transform: translateY(9px);
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:nth-child(2)::before {
		transition-delay: 30ms;
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:nth-child(3)::before {
		transition-delay: 60ms;
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(2) .tovogo-flights-route-line-track { transition-delay: 35ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(3) .tovogo-flights-route-line-track { transition-delay: 70ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(4) .tovogo-flights-route-line-track { transition-delay: 105ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(5) .tovogo-flights-route-line-track { transition-delay: 140ms; }
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6),
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6)::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route:nth-child(6) .tovogo-flights-route-line-track { transition-delay: 175ms; }

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route-line-head {
		transition-delay: 400ms;
	}
}

/* --- Mandatory reduced-motion override: a second, independent
   guarantee alongside tovogo-motion.js's own prefers-reduced-motion
   check (which stops it from ever adding tovogo-motion-ready at all for
   these users) — belt and suspenders, mirroring the homepage block
   above exactly. Everything appears immediately: no transform, no
   transition, no delay, no line-draw. --- */
@media (prefers-reduced-motion: reduce) {
	.tovogo-motion-ready body.page-id-668 .tovogo-motion-section,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-header > *,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-routes-board > .tovogo-flights-route,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route::before,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route-line-track,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route-line-head,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-list > .tovogo-flights-why-item,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item::before {
		opacity: 1 !important;
		transform: none !important;
		border-top-color: rgba(84, 36, 157, 0.14) !important;
		transition: none !important;
		transition-delay: 0ms !important;
	}

	.tovogo-motion-ready body.page-id-668 .tovogo-flights-route:first-child,
	.tovogo-motion-ready body.page-id-668 .tovogo-flights-why-item:first-child {
		border-top-color: transparent !important;
	}
}

/* ==========================================================================
   Service-page scroll-motion system — Hotels (page-id-58), Pendeln
   (page-id-59), Mietwagen (page-id-60), Erlebnisse (page-id-447).
   Reuses the exact same architecture as the homepage/Flüge blocks
   above: same tovogo-motion.js, same single IntersectionObserver, same
   tovogo-motion-ready gate, same cubic-bezier(0.22, 1, 0.36, 1) easing.
   See tovogo_design_layer_enqueue_motion_script() in
   tovogo-design-layer.php, whose is_page() guard was extended to these
   four page IDs and nothing else — tovogo-motion.js itself was not
   modified, since it already queries `.tovogo-motion-section`
   generically. Printed markup is untouched except one added class,
   tovogo-motion-section, on seven existing section roots across these
   four pages (see the matching "MOTION:" docblock note on each
   render function in tovogo-design-layer.php):
     Hotels:     .tovogo-hotel-types, .tovogo-hotel-why
     Pendeln:    .tovogo-pendeln-routes, .tovogo-pendeln-why
     Mietwagen:  .tovogo-mietwagen-styles
     Erlebnisse: .tovogo-experiences-discovery, .tovogo-experiences-why
   Every hero on these four pages, and every third-party widget wrapper
   (FeWo-direkt on Hotels, the transfer widget on Pendeln, LocalRent on
   Mietwagen, Tiqets/Travelpayouts on Erlebnisse) is deliberately left
   without this class, so none of it is ever selected, observed, or
   animated by this block or by tovogo-motion.js.

   PROGRESSIVE ENHANCEMENT / REDUCED MOTION: identical guarantee to the
   homepage/Flüge blocks above — every hidden/initial-transform rule
   below is scoped under .tovogo-motion-ready, which tovogo-motion.js
   only adds once its IntersectionObserver is fully wired up and only
   for users who do not prefer reduced motion (it bails out before that
   point otherwise, for every page it runs on, including these four —
   no page-specific reduced-motion logic exists or is needed). That
   existing, already-proven JS-level bailout is the sole reduced-motion
   guarantee for this block; per "do not duplicate huge reduced-motion
   rule sets unnecessarily" no separate `!important` override block is
   added here (the homepage/Flüge ones above are pre-existing, untouched,
   and were not required for THIS block to satisfy "reduced-motion users
   see everything immediately" — verified by testing).

   RESPONSIVE: desktop stagger delays across this block top out at
   240ms (Mietwagen's 4-stop sequence) — already short enough that a
   separate "tablet: slightly shorter" tier would only trim a few tens
   of milliseconds off an already-brief cascade, so tablet intentionally
   inherits the desktop values below rather than duplicating another
   near-identical rule tier; only the mobile tier (≤543px, translateY
   capped ~9px, shorter delays) gets its own dedicated overrides, same
   principle as the homepage/Flüge blocks above.
   ========================================================================== */

/* --- Section-level reveal, shared verbatim across all four pages —
   same 700ms/16px timing as homepage/Flüge. --- */
.tovogo-motion-ready body.page-id-58 .tovogo-motion-section,
.tovogo-motion-ready body.page-id-59 .tovogo-motion-section,
.tovogo-motion-ready body.page-id-60 .tovogo-motion-section,
.tovogo-motion-ready body.page-id-447 .tovogo-motion-section {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-motion-section.is-visible,
.tovogo-motion-ready body.page-id-59 .tovogo-motion-section.is-visible,
.tovogo-motion-ready body.page-id-60 .tovogo-motion-section.is-visible,
.tovogo-motion-ready body.page-id-447 .tovogo-motion-section.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* --- Hotels: "Unterkunftsarten" — eyebrow/title/text stagger, then the
   4-item asymmetric grid in source order (Hotels, Ferienwohnungen,
   Apartments, Resorts). --- */
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types.is-visible .tovogo-hotel-types-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type {
	opacity: 0;
	transform: translateY(11px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types.is-visible .tovogo-hotel-types-grid > .tovogo-hotel-type {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(3) { transition-delay: 140ms; }
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(4) { transition-delay: 210ms; }

/* --- Hotels: "Warum Tovogo?" — left intro relies on the section-level
   reveal alone; right keyline list staggers 0/80/160ms, each item's
   existing top keyline drawing left-to-right via a transform-only
   ::before overlay (same technique as the homepage's .tovogo-why-item —
   the real border-top stays as the no-JS/no-motion fallback line). --- */
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why.is-visible .tovogo-hotel-why-list > .tovogo-hotel-why-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(2) { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(3) { transition-delay: 160ms; }

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-item {
	position: relative;
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.14);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why.is-visible .tovogo-hotel-why-item:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(2)::before { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(3)::before { transition-delay: 160ms; }

/* --- Pendeln: "Weiterreisen" — eyebrow/title/text stagger, then the
   three waypoints (Ankunft/Aufenthalt/Rückreise) reveal sequentially at
   0/100/200ms per the brief. The decorative route line/markers are
   deliberately left unanimated (static SVG line art) — see the matching
   PHP docblock for why. --- */
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes.is-visible .tovogo-pendeln-routes-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes.is-visible .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint:nth-child(2) { transition-delay: 100ms; }
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint:nth-child(3) { transition-delay: 200ms; }

/* --- Pendeln: "Warum Tovogo" — same restrained Why language as Hotels
   above (left intro = section-level reveal only; right list staggers
   0/80/160ms with a matching keyline draw). --- */
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why.is-visible .tovogo-pendeln-why-list > .tovogo-pendeln-why-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(2) { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(3) { transition-delay: 160ms; }

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-item {
	position: relative;
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.14);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why.is-visible .tovogo-pendeln-why-item:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(2)::before { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(3)::before { transition-delay: 160ms; }

/* --- Mietwagen: "Für welche Reise brauchst du ein Auto?" — eyebrow/
   title/text stagger, then the 4 stops staggered by their own existing
   --city/--roadtrip/--family/--coast modifier class (not nth-child: the
   three decorative scene SVGs are earlier siblings, so the stops are
   not consecutively indexed — see the matching PHP docblock). The
   approved absolute positioning (desktop), zig-zag flow (tablet), and
   icon/body flex row (mobile) are untouched; this only adds opacity/
   transform on top of whatever position each stop already has. --- */
.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles.is-visible .tovogo-mietwagen-styles-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop {
	opacity: 0;
	transform: translateY(11px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles.is-visible .tovogo-mietwagen-styles-stop {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--city { transition-delay: 0ms; }
.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--family { transition-delay: 160ms; }
.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--coast { transition-delay: 240ms; }

/* --- Erlebnisse: "Was möchtest du entdecken?" — eyebrow/title/text
   stagger, then the 4 discovery items in source order (Museen,
   Sehenswürdigkeiten, Touren, Tickets & Erlebnisse). No keyline draw
   here (unlike the Why sections below) — the brief's Discovery-item
   spec asks only for opacity/translateY, so each item's own existing
   hairline divider is left exactly as it renders today. --- */
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > * {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery.is-visible .tovogo-experiences-discovery-header > * {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > *:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > *:nth-child(3) { transition-delay: 140ms; }

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item {
	opacity: 0;
	transform: translateY(11px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery.is-visible .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(2) { transition-delay: 70ms; }
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(3) { transition-delay: 140ms; }
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(4) { transition-delay: 210ms; }

/* --- Erlebnisse: "Warum Tovogo" — same restrained Why language as
   Hotels/Pendeln above. --- */
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why.is-visible .tovogo-experiences-why-list > .tovogo-experiences-why-item {
	opacity: 1;
	transform: translateY(0);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(2) { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(3) { transition-delay: 160ms; }

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-item {
	position: relative;
	border-top-color: transparent;
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-item:not(:first-child)::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 100%;
	height: 1px;
	background: rgba(84, 36, 157, 0.12);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why.is-visible .tovogo-experiences-why-item:not(:first-child)::before {
	transform: scaleX(1);
}

.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(2)::before { transition-delay: 80ms; }
.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(3)::before { transition-delay: 160ms; }

/* --- Mobile (≤543px): cap movement at 9px and shorten every stagger
   across all four pages — same principle as the homepage/Flüge mobile
   overrides above. Consolidated into shared rules wherever the
   structure lines up (header 3-stagger, Why-list 3-stagger, 4-item
   grid stagger), per-page only where the sequence genuinely differs
   (Pendeln's 3-waypoint 0/100/200 desktop cadence; Mietwagen's
   modifier-class-keyed stops). --- */
@media (max-width: 543px) {
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > *,
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type,
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item,
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > *,
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint,
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item,
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > *,
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop,
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > *,
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item,
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item {
		transform: translateY(9px);
	}

	/* Header 3-stagger (eyebrow/title/text), all four pages: 0/30/60ms. */
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > *:nth-child(2),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > *:nth-child(2) {
		transition-delay: 30ms;
	}

	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-header > *:nth-child(3),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-header > *:nth-child(3) {
		transition-delay: 60ms;
	}

	/* Why-list 3-stagger (+ matching keyline delay), Hotels/Pendeln/
	   Erlebnisse: 0/30/60ms. */
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-item:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-item:nth-child(2)::before,
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(2),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-item:nth-child(2)::before {
		transition-delay: 30ms;
	}

	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-list > .tovogo-hotel-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-why-item:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-list > .tovogo-pendeln-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-why-item:nth-child(3)::before,
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-list > .tovogo-experiences-why-item:nth-child(3),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-why-item:nth-child(3)::before {
		transition-delay: 60ms;
	}

	/* 4-item grid stagger, Hotels types + Erlebnisse discovery: 0/30/60/90ms. */
	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(2),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(2) {
		transition-delay: 30ms;
	}

	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(3),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(3) {
		transition-delay: 60ms;
	}

	.tovogo-motion-ready body.page-id-58 .tovogo-hotel-types-grid > .tovogo-hotel-type:nth-child(4),
	.tovogo-motion-ready body.page-id-447 .tovogo-experiences-discovery-list > .tovogo-experiences-discovery-item:nth-child(4) {
		transition-delay: 90ms;
	}

	/* Pendeln waypoints: 0/45/90ms (same 1:2 ratio as the desktop
	   0/100/200ms sequence, compressed). */
	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint:nth-child(2) {
		transition-delay: 45ms;
	}

	.tovogo-motion-ready body.page-id-59 .tovogo-pendeln-routes-waypoints > .tovogo-pendeln-routes-waypoint:nth-child(3) {
		transition-delay: 90ms;
	}

	/* Mietwagen stops, keyed by modifier class: 0/30/60/90ms. */
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--roadtrip { transition-delay: 30ms; }
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--family { transition-delay: 60ms; }
	.tovogo-motion-ready body.page-id-60 .tovogo-mietwagen-styles-stop--coast { transition-delay: 90ms; }
}

/* ======================================================================
   Control-radius consistency — buttons and form actions use the same
   compact geometry as the header navigation. Cards, pills, badges and
   avatars are intentionally excluded: they communicate grouping/status,
   not an action. This lives at the end of the layer so it also normalizes
   controls styled by Elementor or the active theme.
   ====================================================================== */
body button,
body .button,
body .wp-element-button,
body .elementor-button,
body input[type="button"],
body input[type="submit"],
body input[type="reset"] {
	border-radius: var(--tvg-control-radius);
}

/* ======================================================================
   Footer refresh — a darker, more editorial travel hub. The existing
   semantic footer markup and all destinations stay intact; only its visual
   structure becomes a clear brand story, a compact navigation panel, and
   three useful information modules.
   ====================================================================== */
body .tvg-footer {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 7% 0%, rgba(112, 214, 228, 0.18), transparent 31%),
		radial-gradient(circle at 91% 13%, rgba(239, 245, 106, 0.12), transparent 23%),
		linear-gradient(135deg, #170723 0%, #2c0e52 54%, #1d0b35 100%);
	border-top: 0;
}

body .tvg-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #eff56a, #70d6e4 48%, #a875d7);
}

body .tvg-footer-inner {
	position: relative;
	max-width: 1320px;
	padding: 72px 32px 28px;
}

body .tvg-footer-top {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
	gap: 64px;
	align-items: start;
}

body .tvg-footer-brand {
	max-width: 560px;
}

body .tvg-footer-logo {
	margin-bottom: 26px;
}

body .tvg-footer-logo-img {
	width: 172px;
}

body .tvg-footer-statement {
	max-width: 460px;
	margin-bottom: 12px;
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1.04;
	letter-spacing: -0.045em;
	color: #ffffff;
}

body .tvg-footer-substatement {
	max-width: 470px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

body .tvg-footer-about {
	max-width: 500px;
	margin-top: 30px;
	padding-top: 22px;
	border-top-color: rgba(255, 255, 255, 0.16);
}

body .tvg-footer-about-title,
body .tvg-footer-secondary-label {
	color: #eff56a;
}

body .tvg-footer-about-text {
	font-size: 14px;
	color: rgba(255, 255, 255, 0.62);
}

body .tvg-footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 5px;
	align-self: start;
	padding: 14px;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: var(--tvg-control-radius);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 18px 42px rgba(11, 3, 25, 0.18);
}

body .tvg-footer-nav a {
	padding: 11px 12px;
	border: 0;
	border-radius: 6px;
	color: rgba(255, 255, 255, 0.88);
	font-size: 15px;
	font-weight: 600;
}

body .tvg-footer-nav a:hover,
body .tvg-footer-nav a:focus-visible {
	border: 0;
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff;
}

body .tvg-footer-secondary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 56px;
}

body .tvg-footer-secondary > * {
	min-width: 0;
	padding: 22px;
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: var(--tvg-control-radius);
	background: rgba(255, 255, 255, 0.055);
}

body .tvg-footer-secondary-nav {
	gap: 10px;
}

body .tvg-footer-secondary-nav a,
body .tvg-footer-apps-links a {
	color: rgba(255, 255, 255, 0.76);
	border-bottom: 0;
}

body .tvg-footer-secondary-nav a:hover,
body .tvg-footer-secondary-nav a:focus-visible,
body .tvg-footer-apps-links a:hover,
body .tvg-footer-apps-links a:focus-visible {
	border-bottom: 0;
	color: #ffffff;
}

body .tvg-footer-address,
body .tvg-footer-apps-label {
	color: rgba(255, 255, 255, 0.66);
}

body .tvg-footer-social {
	gap: 8px;
}

body .tvg-footer-social a {
	width: 32px;
	height: 32px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--tvg-control-radius);
	background: rgba(255, 255, 255, 0.08);
}

body .tvg-footer-keyline {
	margin-top: 32px;
	border-top-color: rgba(255, 255, 255, 0.15);
}

body .tvg-footer-bottom {
	justify-content: space-between;
	gap: 16px;
	padding-top: 20px;
}

body .tvg-footer-legal,
body .tvg-footer-copyright {
	color: rgba(255, 255, 255, 0.62);
}

@media (max-width: 992px) {
	body .tvg-footer-inner {
		padding: 60px 28px 28px;
	}

	body .tvg-footer-top {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	body .tvg-footer-nav {
		max-width: 560px;
	}

	body .tvg-footer-secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		margin-top: 40px;
	}
}

@media (max-width: 543px) {
	body .tvg-footer-inner {
		padding: 48px 20px 24px;
	}

	body .tvg-footer-statement {
		font-size: 34px;
	}

	body .tvg-footer-nav,
	body .tvg-footer-secondary {
		grid-template-columns: 1fr;
	}

	body .tvg-footer-secondary {
		gap: 12px;
		margin-top: 32px;
	}

	body .tvg-footer-bottom {
		align-items: flex-start;
	}
}

/* ======================================================================
   Back to top — compactly tied to the footer palette instead of using the
   theme's generic blue square. The native Astra control and accessibility
   label remain unchanged.
   ====================================================================== */
body #ast-scroll-top {
	position: fixed;
	right: 24px;
	bottom: 24px;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: var(--tvg-control-radius);
	background: rgba(29, 11, 53, 0.92);
	box-shadow: 0 8px 20px rgba(13, 4, 29, 0.22);
	color: rgba(255, 255, 255, 0.88);
	transition: transform 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}

body #ast-scroll-top .ast-icon.icon-arrow svg {
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 17px;
	height: 17px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.6;
	transform: translate(-50%, -50%) rotate(180deg);
}

body #ast-scroll-top:hover,
body #ast-scroll-top:focus-visible {
	border-color: rgba(112, 214, 228, 0.72);
	background: #3a1769;
	box-shadow: 0 12px 24px rgba(13, 4, 29, 0.3);
	color: #ffffff;
	transform: translateY(-3px);
}

body #ast-scroll-top:focus-visible {
	outline: 2px solid #70d6e4;
	outline-offset: 3px;
}

@media (max-width: 543px) {
	body #ast-scroll-top {
		right: 16px;
		bottom: 16px;
		width: 42px;
		height: 42px;
	}
}

/* ======================================================================
   Page transition — a short, branded pause between ordinary site pages.
   It is created by the small frontend script and never appears on first
   load. Reduced-motion visitors keep the browser's normal navigation.
   ====================================================================== */
body .tvg-page-loader {
	position: fixed;
	inset: 0;
	z-index: 100002;
	display: grid;
	place-items: center;
	padding: 24px;
	background:
		radial-gradient(circle at 18% 22%, rgba(112, 214, 228, 0.17), transparent 29%),
		radial-gradient(circle at 82% 76%, rgba(239, 245, 106, 0.1), transparent 24%),
		linear-gradient(135deg, rgba(23, 7, 35, 0.98), rgba(49, 17, 90, 0.98));
	opacity: 0;
	pointer-events: none;
	transition: opacity 220ms ease;
}

body .tvg-page-loader-content {
	display: grid;
	justify-items: center;
	gap: 12px;
	color: #ffffff;
	transform: translateY(12px);
	transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

html.tvg-page-is-leaving body .tvg-page-loader {
	opacity: 1;
	pointer-events: auto;
}

html.tvg-page-is-leaving body .tvg-page-loader-content {
	transform: translateY(0);
}

body .tvg-page-loader-route {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 74px;
	height: 22px;
	padding: 0 3px;
}

body .tvg-page-loader-route::before {
	content: "";
	position: absolute;
	left: 8px;
	right: 8px;
	top: 50%;
	height: 1px;
	background: linear-gradient(90deg, #eff56a 0%, #70d6e4 36%, #a875d7 50%, #70d6e4 64%, #eff56a 100%);
	background-size: 200% 100%;
	animation: tvg-loader-route-line 1.35s ease-in-out infinite;
}

body .tvg-page-loader-route i {
	position: relative;
	z-index: 1;
	width: 9px;
	height: 9px;
	border: 2px solid #251044;
	border-radius: 50%;
	background: #eff56a;
	box-shadow: 0 0 0 4px rgba(239, 245, 106, 0.12);
	animation: tvg-loader-route 900ms ease-in-out infinite;
}

body .tvg-page-loader-route i:nth-child(2) {
	background: #70d6e4;
	animation-delay: 120ms;
}

body .tvg-page-loader-route i:nth-child(3) {
	background: #a875d7;
	animation-delay: 240ms;
}

body .tvg-page-loader-wordmark {
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.07em;
	line-height: 1;
}

/* Uses the live header logo source rather than a second hand-styled
   wordmark, keeping the transition perfectly aligned with the header. */
body .tvg-page-loader-logo {
	display: block;
	width: min(145px, 58vw);
	height: auto;
	object-fit: contain;
}

body .tvg-page-loader-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.66);
}

@keyframes tvg-loader-route {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-6px); }
}

@keyframes tvg-loader-route-line {
	0%, 100% { background-position: 100% 50%; opacity: 0.55; }
	50% { background-position: 0% 50%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	body .tvg-page-loader {
		display: none;
	}
}

/* ======================================================================
   Flights — route atlas refresh.
   A dark editorial travel surface separates inspiration from the live
   search widget above, while keeping the route list informational.
   ====================================================================== */
body.page-id-668 .tovogo-flights-routes {
	position: relative;
	overflow: hidden;
	padding: clamp(64px, 8vw, 108px) 32px clamp(56px, 7vw, 88px);
	background:
		radial-gradient(circle at 8% 14%, rgba(168, 117, 215, 0.28), transparent 28%),
		radial-gradient(circle at 94% 88%, rgba(112, 214, 228, 0.16), transparent 30%),
		#251044;
}

body.page-id-668 .tovogo-flights-routes::before {
	content: "";
	position: absolute;
	inset: 22px;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
}

body.page-id-668 .tovogo-flights-routes-inner {
	position: relative;
	z-index: 1;
	max-width: 1060px;
}

body.page-id-668 .tovogo-flights-routes-header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.75fr);
	align-items: end;
	gap: 48px;
	max-width: none;
	margin: 0 0 46px;
	text-align: left;
}

body.page-id-668 .tovogo-flights-routes-eyebrow {
	margin-bottom: 14px;
	color: #eff56a;
}

body.page-id-668 .tovogo-flights-routes-title {
	max-width: 610px;
	margin: 0;
	font-size: clamp(31px, 4vw, 50px);
	line-height: 1.06;
	letter-spacing: -0.045em;
	color: #fffdf8;
}

body.page-id-668 .tovogo-flights-routes-text {
	max-width: 360px;
	padding-bottom: 3px;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.72);
}

body.page-id-668 .tovogo-flights-routes-board {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.page-id-668 .tovogo-flights-route,
body.page-id-668 .tovogo-flights-route:first-child {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr) 46px minmax(0, 1fr);
	column-gap: 14px;
	min-height: 104px;
	padding: 20px 22px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease;
}

body.page-id-668 .tovogo-flights-route:hover {
	transform: translateY(-3px);
	border-color: rgba(239, 245, 106, 0.58);
	background: rgba(255, 255, 255, 0.1);
}

body.page-id-668 .tovogo-flights-route-index {
	align-self: start;
	padding-top: 2px;
	color: rgba(239, 245, 106, 0.8);
}

body.page-id-668 .tovogo-flights-route-from,
body.page-id-668 .tovogo-flights-route-city {
	font-size: clamp(16px, 1.7vw, 19px);
	color: #fffdf8;
}

body.page-id-668 .tovogo-flights-route-line {
	height: 18px;
}

body.page-id-668 .tovogo-flights-route-line-track {
	background: linear-gradient(90deg, rgba(239, 245, 106, 0.76), rgba(112, 214, 228, 0.85));
}

body.page-id-668 .tovogo-flights-route-line-head {
	border-color: #70d6e4;
}

body.page-id-668 .tovogo-flights-route-meta {
	color: rgba(255, 255, 255, 0.56);
}

body.page-id-668 .tovogo-flights-routes-cta-wrap {
	margin: 38px 0 0;
	text-align: left;
}

body.page-id-668 .tovogo-flights-routes-cta {
	gap: 18px;
	padding: 16px 22px;
	border-radius: 8px;
	background: #eff56a;
	color: #251044;
}

body.page-id-668 .tovogo-flights-routes-cta:hover {
	background: #ffffff;
	transform: translateY(-2px);
}

body.page-id-668 .tovogo-flights-routes-cta span {
	font-size: 20px;
	line-height: 0;
}

@media (max-width: 992px) {
	body.page-id-668 .tovogo-flights-routes {
		padding: 72px 24px 64px;
	}

	body.page-id-668 .tovogo-flights-routes-header {
		grid-template-columns: 1fr;
		gap: 18px;
	}

	body.page-id-668 .tovogo-flights-routes-text {
		max-width: 540px;
	}
}

@media (max-width: 620px) {
	body.page-id-668 .tovogo-flights-routes {
		padding: 54px 20px 48px;
	}

	body.page-id-668 .tovogo-flights-routes::before {
		inset: 10px;
		border-radius: 12px;
	}

	body.page-id-668 .tovogo-flights-routes-header {
		margin-bottom: 30px;
	}

	body.page-id-668 .tovogo-flights-routes-board {
		grid-template-columns: 1fr;
	}

	body.page-id-668 .tovogo-flights-route,
	body.page-id-668 .tovogo-flights-route:first-child {
		grid-template-columns: 28px minmax(0, 1fr) 42px minmax(0, 1fr);
		min-height: 88px;
		padding: 16px;
	}

	body.page-id-668 .tovogo-flights-routes-cta-wrap {
		margin-top: 28px;
	}

	body.page-id-668 .tovogo-flights-routes-cta {
		width: 100%;
		justify-content: space-between;
	}
}

/* Keep the route-map treatment exclusive to Mietwagen. The other service
   discovery sections retain their quieter, original editorial layouts. */
body.page-id-58 .tovogo-hotel-types {
	padding: 112px 32px 120px;
	background: #f8f7fb;
}

body.page-id-58 .tovogo-hotel-types-header {
	display: block;
	max-width: 640px;
	margin: 0 auto 56px;
	text-align: center;
}

body.page-id-58 .tovogo-hotel-types-eyebrow {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(84, 36, 157, 0.08);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}

body.page-id-58 .tovogo-hotel-types-title {
	margin: 0 0 14px;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

body.page-id-58 .tovogo-hotel-types-text {
	padding-bottom: 0;
	font-size: 18px;
	line-height: 1.6;
}

body.page-id-58 .tovogo-hotel-types-grid {
	gap: 1px;
	background: rgba(84, 36, 157, 0.14);
	border-radius: 12px;
	overflow: hidden;
}

body.page-id-58 .tovogo-hotel-type,
body.page-id-58 .tovogo-hotel-type--hotels {
	padding: 32px 28px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	transform: none;
}

body.page-id-58 .tovogo-hotel-type:hover {
	transform: none;
	border-color: transparent;
	box-shadow: none;
}

body.page-id-58 .tovogo-hotel-type--hotels { padding: 48px 44px; background: #f6f2fb; }
body.page-id-58 .tovogo-hotel-type--ferienwohnungen { background: #faf6ee; }
body.page-id-58 .tovogo-hotel-type--apartments { background: #f5f1f2; }
body.page-id-58 .tovogo-hotel-type--resorts { background: #fbf3ee; }

body.page-id-58 .tovogo-hotel-type-illustration,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
	width: 64px;
	height: 64px;
	margin-bottom: 20px;
	padding-bottom: 0;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration { width: 96px; height: 96px; color: #54249d; }
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title { font-size: clamp(24px, 2.1vw, 30px); color: #201033; }
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text { color: #52485f; }

body.page-id-59 .tovogo-pendeln-routes {
	padding: 84px 32px 92px;
	background: #f8f7fb;
}

body.page-id-59 .tovogo-pendeln-routes-header {
	display: block;
	max-width: 760px;
	margin: 0 auto 56px;
	text-align: center;
}

body.page-id-59 .tovogo-pendeln-routes-eyebrow {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(84, 36, 157, 0.08);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
}

body.page-id-59 .tovogo-pendeln-routes-title {
	margin: 0 0 12px;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

body.page-id-59 .tovogo-pendeln-routes-text {
	padding-bottom: 0;
	font-size: 18px;
	line-height: 1.6;
}

body.page-id-59 .tovogo-pendeln-routes-journey {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

body.page-id-59 .tovogo-pendeln-routes-waypoints { gap: 0 24px; }
body.page-id-59 .tovogo-pendeln-routes-waypoint { padding: 0; border-radius: 0; background: transparent; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-title { font-size: 20px; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-text { font-size: 15px; }

body.page-id-447 .tovogo-experiences-discovery {
	padding: 112px 32px 120px;
	background: #faf8f5;
}

body.page-id-447 .tovogo-experiences-discovery-header {
	display: block;
	max-width: 640px;
	margin: 0 auto 48px;
	text-align: center;
}

body.page-id-447 .tovogo-experiences-discovery-eyebrow {
	display: inline-flex;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(84, 36, 157, 0.08);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

body.page-id-447 .tovogo-experiences-discovery-title {
	margin: 0 0 14px;
	font-size: clamp(30px, 3.6vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

body.page-id-447 .tovogo-experiences-discovery-text {
	padding-bottom: 0;
	font-size: 18px;
	line-height: 1.6;
}

body.page-id-447 .tovogo-experiences-discovery-layout {
	grid-template-columns: 1fr;
	gap: 48px;
	align-items: center;
}

body.page-id-447 .tovogo-experiences-discovery-illustration {
	padding: 0;
	border-radius: 0;
	background: transparent;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-svg { max-width: 380px; }
body.page-id-447 .tovogo-experiences-discovery-illustration-ground { stroke: rgba(84, 36, 157, 0.22); }
body.page-id-447 .tovogo-experiences-discovery-illustration-line { stroke: #54249d; }
body.page-id-447 .tovogo-experiences-discovery-illustration-line-faint { stroke: rgba(84, 36, 157, 0.32); }

body.page-id-447 .tovogo-experiences-discovery-list {
	display: flex;
	flex-direction: column;
	gap: 0;
}

body.page-id-447 .tovogo-experiences-discovery-item,
body.page-id-447 .tovogo-experiences-discovery-item:first-child {
	display: flex;
	padding: 26px 0;
	border: 0;
	border-top: 1px solid rgba(84, 36, 157, 0.12);
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	transform: none;
}

body.page-id-447 .tovogo-experiences-discovery-item:first-child { border-top: 0; padding-top: 0; }
body.page-id-447 .tovogo-experiences-discovery-item:hover { transform: none; box-shadow: none; }
body.page-id-447 .tovogo-experiences-discovery-item-icon { width: 32px; height: 32px; margin: 2px 20px 0 0; }
body.page-id-447 .tovogo-experiences-discovery-item-title { font-size: 21px; }
body.page-id-447 .tovogo-experiences-discovery-item-text { font-size: 15px; }

@media (min-width: 993px) {
	body.page-id-447 .tovogo-experiences-discovery-layout { grid-template-columns: 0.85fr 1fr; gap: 72px; }
	body.page-id-447 .tovogo-experiences-discovery-illustration-svg { transform: translate(28px, -20px); }
	body.page-id-447 .tovogo-experiences-discovery-item { padding: 22px 0; }
}

@media (max-width: 992px) {
	body.page-id-58 .tovogo-hotel-types { padding: 80px 24px 88px; }
	body.page-id-59 .tovogo-pendeln-routes { padding: 70px 24px 78px; }
	body.page-id-447 .tovogo-experiences-discovery { padding: 80px 24px 88px; }
}

@media (max-width: 620px) {
	body.page-id-58 .tovogo-hotel-types { padding: 56px 20px 64px; }
	body.page-id-59 .tovogo-pendeln-routes { padding: 56px 20px 64px; }
	body.page-id-447 .tovogo-experiences-discovery { padding: 56px 20px 64px; }
}

@media (max-width: 543px) {
	body.page-id-58 .tovogo-hotel-types { padding: 64px 20px 72px; }
	body.page-id-58 .tovogo-hotel-types-grid {
		grid-template-columns: 1fr;
		grid-template-rows: none;
		grid-template-areas: none;
	}
	body.page-id-58 .tovogo-hotel-type--hotels,
	body.page-id-58 .tovogo-hotel-type--ferienwohnungen,
	body.page-id-58 .tovogo-hotel-type--apartments,
	body.page-id-58 .tovogo-hotel-type--resorts { grid-area: auto; }
	body.page-id-58 .tovogo-hotel-type,
	body.page-id-58 .tovogo-hotel-type--hotels { min-height: 0; padding: 24px 20px; }
	body.page-id-58 .tovogo-hotel-type--hotels { padding: 32px 24px; }

	body.page-id-59 .tovogo-pendeln-routes { padding: 56px 20px 64px; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint { padding-bottom: 28px; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint:last-child { padding-bottom: 0; }
}

/* ======================================================================
   Service discovery refresh — Hotels, Cars, Transfers and Experiences.
   Each service retains its own subject matter, while the shared spacing,
   editorial headings and low-elevation panels make the four pages feel
   part of one product.
   ====================================================================== */

/* Hotels: a calm accommodation collection. */
body.page-id-58 .tovogo-hotel-types {
	padding: clamp(64px, 8vw, 112px) 32px;
	background: linear-gradient(135deg, #f4f0fa 0%, #fbfaf7 56%, #f3eee8 100%);
}

body.page-id-58 .tovogo-hotel-types-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
	align-items: end;
	gap: 44px;
	max-width: 1060px;
	margin: 0 auto 42px;
	text-align: left;
}

body.page-id-58 .tovogo-hotel-types-eyebrow,
body.page-id-59 .tovogo-pendeln-routes-eyebrow,
body.page-id-447 .tovogo-experiences-discovery-eyebrow {
	padding: 0;
	border-radius: 0;
	background: transparent;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

body.page-id-58 .tovogo-hotel-types-title {
	max-width: 620px;
	margin: 0;
	font-size: clamp(32px, 4.1vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.045em;
}

body.page-id-58 .tovogo-hotel-types-text {
	padding-bottom: 3px;
	font-size: 16px;
	line-height: 1.65;
}

body.page-id-58 .tovogo-hotel-types-grid {
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: minmax(220px, auto) minmax(220px, auto);
	gap: 12px;
	border-radius: 16px;
	background: transparent;
	overflow: visible;
}

body.page-id-58 .tovogo-hotel-type,
body.page-id-58 .tovogo-hotel-type--hotels {
	position: relative;
	padding: 30px;
	border: 1px solid rgba(37, 16, 68, 0.1);
	border-radius: 14px;
	box-shadow: 0 14px 30px rgba(37, 16, 68, 0.05);
	transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

body.page-id-58 .tovogo-hotel-type:hover {
	transform: translateY(-4px);
	border-color: rgba(84, 36, 157, 0.38);
	box-shadow: 0 20px 38px rgba(37, 16, 68, 0.1);
}

body.page-id-58 .tovogo-hotel-type--hotels { background: #2a1249; }
body.page-id-58 .tovogo-hotel-type--ferienwohnungen { background: #fffdf9; }
body.page-id-58 .tovogo-hotel-type--apartments { background: #ece6f6; }
body.page-id-58 .tovogo-hotel-type--resorts { background: #f8e9df; }

body.page-id-58 .tovogo-hotel-type-illustration,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
	width: 70px;
	height: 70px;
	margin-bottom: auto;
	padding-bottom: 24px;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
	width: 90px;
	height: 90px;
	color: #eff56a;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text {
	color: #fffdf8;
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title {
	font-size: clamp(25px, 2.4vw, 34px);
}

body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text {
	color: rgba(255, 255, 255, 0.72);
}

/* Cars: turn the existing road drawing into a framed route map. */
body.page-id-60 .tovogo-mietwagen-styles {
	padding: clamp(64px, 8vw, 108px) 32px;
	background: #251044;
}

body.page-id-60 .tovogo-mietwagen-styles-header {
	max-width: 780px;
	margin: 0 auto 42px;
	text-align: center;
}

body.page-id-60 .tovogo-mietwagen-styles-eyebrow { color: #eff56a; }
body.page-id-60 .tovogo-mietwagen-styles-title {
	font-size: clamp(32px, 4.1vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.045em;
	color: #fffdf8;
}
body.page-id-60 .tovogo-mietwagen-styles-text {
	max-width: 560px;
	margin-inline: auto;
	font-size: 16px;
	color: rgba(255, 255, 255, 0.72);
}

body.page-id-60 .tovogo-mietwagen-styles-scene {
	padding: 34px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 18px;
	background: radial-gradient(circle at 50% 90%, rgba(112, 214, 228, 0.12), transparent 45%), rgba(255, 255, 255, 0.04);
}

body.page-id-60 .tovogo-mietwagen-styles-horizon,
body.page-id-60 .tovogo-mietwagen-styles-hill,
body.page-id-60 .tovogo-mietwagen-styles-road-path,
body.page-id-60 .tovogo-mietwagen-styles-lane { stroke: rgba(255, 255, 255, 0.58); }
body.page-id-60 .tovogo-mietwagen-styles-pin { fill: #eff56a; }
body.page-id-60 .tovogo-mietwagen-styles-car { fill: #70d6e4; }
body.page-id-60 .tovogo-mietwagen-styles-stop {
	padding: 18px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	background: rgba(37, 16, 68, 0.78);
}
body.page-id-60 .tovogo-mietwagen-styles-stop-title { color: #fffdf8; }
body.page-id-60 .tovogo-mietwagen-styles-stop-text { color: rgba(255, 255, 255, 0.65); }
body.page-id-60 .tovogo-mietwagen-styles-stop-icon { color: #eff56a; }

/* Transfers: a compact, three-step travel timeline. */
body.page-id-59 .tovogo-pendeln-routes {
	padding: clamp(64px, 8vw, 108px) 32px;
	background: #fbfaf7;
}

body.page-id-59 .tovogo-pendeln-routes-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
	align-items: end;
	gap: 48px;
	max-width: 1060px;
	margin: 0 auto 46px;
	text-align: left;
}

body.page-id-59 .tovogo-pendeln-routes-title {
	margin: 0;
	font-size: clamp(32px, 4vw, 51px);
	line-height: 1.06;
	letter-spacing: -0.045em;
}

body.page-id-59 .tovogo-pendeln-routes-text {
	padding-bottom: 3px;
	font-size: 16px;
	line-height: 1.65;
}

body.page-id-59 .tovogo-pendeln-routes-journey {
	padding: 38px 34px 32px;
	border: 1px solid rgba(84, 36, 157, 0.14);
	border-radius: 18px;
	background: #f0ebf7;
}

body.page-id-59 .tovogo-pendeln-routes-waypoints { gap: 16px; }
body.page-id-59 .tovogo-pendeln-routes-waypoint {
	padding: 22px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.62);
}
body.page-id-59 .tovogo-pendeln-routes-waypoint-title { font-size: 18px; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-text { font-size: 14px; }

/* Experiences: gallery-like discovery cards with the illustration as
   a quiet guide rather than the focal point. */
body.page-id-447 .tovogo-experiences-discovery {
	padding: clamp(64px, 8vw, 108px) 32px;
	background: linear-gradient(135deg, #f7f2ec, #fbfaf7 58%, #f1edf7);
}

body.page-id-447 .tovogo-experiences-discovery-header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr);
	align-items: end;
	gap: 48px;
	max-width: 1060px;
	margin: 0 auto 46px;
	text-align: left;
}

body.page-id-447 .tovogo-experiences-discovery-title {
	margin: 0;
	font-size: clamp(32px, 4.1vw, 52px);
	line-height: 1.06;
	letter-spacing: -0.045em;
}

body.page-id-447 .tovogo-experiences-discovery-text {
	padding-bottom: 3px;
	font-size: 16px;
	line-height: 1.65;
}

body.page-id-447 .tovogo-experiences-discovery-layout {
	grid-template-columns: minmax(260px, 0.64fr) minmax(0, 1.1fr);
	gap: 28px;
	align-items: stretch;
}

body.page-id-447 .tovogo-experiences-discovery-illustration {
	align-items: center;
	padding: 28px;
	border-radius: 16px;
	background: #2a1249;
}

body.page-id-447 .tovogo-experiences-discovery-illustration-svg {
	max-width: 300px;
	transform: none;
}
body.page-id-447 .tovogo-experiences-discovery-illustration-ground { stroke: rgba(255, 255, 255, 0.26); }
body.page-id-447 .tovogo-experiences-discovery-illustration-line { stroke: #eff56a; }
body.page-id-447 .tovogo-experiences-discovery-illustration-line-faint { stroke: rgba(112, 214, 228, 0.64); }

body.page-id-447 .tovogo-experiences-discovery-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body.page-id-447 .tovogo-experiences-discovery-item,
body.page-id-447 .tovogo-experiences-discovery-item:first-child {
	display: block;
	padding: 24px;
	border: 1px solid rgba(84, 36, 157, 0.12);
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.7);
	transition: transform 220ms ease, box-shadow 220ms ease;
}
body.page-id-447 .tovogo-experiences-discovery-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 30px rgba(37, 16, 68, 0.09);
}
body.page-id-447 .tovogo-experiences-discovery-item-icon {
	width: 30px;
	height: 30px;
	margin: 0 0 28px;
}
body.page-id-447 .tovogo-experiences-discovery-item-title { font-size: 19px; }
body.page-id-447 .tovogo-experiences-discovery-item-text { font-size: 14px; }

@media (max-width: 992px) {
	body.page-id-58 .tovogo-hotel-types,
	body.page-id-60 .tovogo-mietwagen-styles,
	body.page-id-59 .tovogo-pendeln-routes,
	body.page-id-447 .tovogo-experiences-discovery { padding: 72px 24px; }

	body.page-id-58 .tovogo-hotel-types-header,
	body.page-id-59 .tovogo-pendeln-routes-header,
	body.page-id-447 .tovogo-experiences-discovery-header { grid-template-columns: 1fr; gap: 16px; }

	body.page-id-447 .tovogo-experiences-discovery-layout { grid-template-columns: 1fr; }
	body.page-id-447 .tovogo-experiences-discovery-illustration { min-height: 260px; }
}

@media (max-width: 620px) {
	body.page-id-58 .tovogo-hotel-types,
	body.page-id-60 .tovogo-mietwagen-styles,
	body.page-id-59 .tovogo-pendeln-routes,
	body.page-id-447 .tovogo-experiences-discovery { padding: 54px 20px; }

	body.page-id-58 .tovogo-hotel-types-grid { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-template-areas: "hotels hotels" "ferienwohnungen apartments" "resorts resorts"; }
	body.page-id-58 .tovogo-hotel-type,
	body.page-id-58 .tovogo-hotel-type--hotels { min-height: 210px; padding: 22px; }
	body.page-id-58 .tovogo-hotel-type--hotels { min-height: 240px; }
	body.page-id-58 .tovogo-hotel-type-illustration,
	body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration { width: 58px; height: 58px; padding-bottom: 18px; }

	body.page-id-60 .tovogo-mietwagen-styles-scene { padding: 16px; border-radius: 14px; }
	body.page-id-60 .tovogo-mietwagen-styles-stop { padding: 14px; }

	body.page-id-59 .tovogo-pendeln-routes-journey { padding: 24px 18px; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint { padding: 0 0 24px; border-radius: 0; background: transparent; }

	body.page-id-447 .tovogo-experiences-discovery-list { grid-template-columns: 1fr; }
	body.page-id-447 .tovogo-experiences-discovery-illustration { min-height: 220px; padding: 20px; }
}

/* Restore the three service discovery sections to their approved designs.
   This is deliberately after the exploratory refresh block above so none
   of its hotel, transfer or experiences declarations can take precedence. */
body.page-id-58 .tovogo-hotel-types { background: #f8f7fb !important; padding: 112px 32px 120px !important; }
body.page-id-58 .tovogo-hotel-types-header { display: block !important; max-width: 640px !important; margin: 0 auto 56px !important; text-align: center !important; }
body.page-id-58 .tovogo-hotel-types-eyebrow { display: inline-flex !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(84, 36, 157, 0.08) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; text-transform: none !important; }
body.page-id-58 .tovogo-hotel-types-title { margin: 0 0 14px !important; font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
body.page-id-58 .tovogo-hotel-types-text { padding-bottom: 0 !important; font-size: 18px !important; line-height: 1.6 !important; }
body.page-id-58 .tovogo-hotel-types-grid { gap: 1px !important; border-radius: 12px !important; background: rgba(84, 36, 157, 0.14) !important; overflow: hidden !important; }
body.page-id-58 .tovogo-hotel-type, body.page-id-58 .tovogo-hotel-type--hotels { padding: 32px 28px !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
body.page-id-58 .tovogo-hotel-type--hotels { padding: 48px 44px !important; background: #f6f2fb !important; }
body.page-id-58 .tovogo-hotel-type--ferienwohnungen { background: #faf6ee !important; }
body.page-id-58 .tovogo-hotel-type--apartments { background: #f5f1f2 !important; }
body.page-id-58 .tovogo-hotel-type--resorts { background: #fbf3ee !important; }
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title { color: #201033 !important; font-size: clamp(24px, 2.1vw, 30px) !important; }
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text { color: #52485f !important; }

body.page-id-59 .tovogo-pendeln-routes { background: #f8f7fb !important; padding: 84px 32px 92px !important; }
body.page-id-59 .tovogo-pendeln-routes-header { display: block !important; max-width: 760px !important; margin: 0 auto 56px !important; text-align: center !important; }
body.page-id-59 .tovogo-pendeln-routes-eyebrow { display: inline-flex !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(84, 36, 157, 0.08) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; }
body.page-id-59 .tovogo-pendeln-routes-title { margin: 0 0 12px !important; font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
body.page-id-59 .tovogo-pendeln-routes-text { padding-bottom: 0 !important; font-size: 18px !important; line-height: 1.6 !important; }
body.page-id-59 .tovogo-pendeln-routes-journey { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoints { gap: 0 24px !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoint { padding: 0 !important; border-radius: 0 !important; background: transparent !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-title { font-size: 20px !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-text { font-size: 15px !important; }

body.page-id-447 .tovogo-experiences-discovery { background: #faf8f5 !important; padding: 112px 32px 120px !important; }
body.page-id-447 .tovogo-experiences-discovery-header { display: block !important; max-width: 640px !important; margin: 0 auto 48px !important; text-align: center !important; }
body.page-id-447 .tovogo-experiences-discovery-eyebrow { display: inline-flex !important; padding: 8px 16px !important; border-radius: 999px !important; background: rgba(84, 36, 157, 0.08) !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.02em !important; }
body.page-id-447 .tovogo-experiences-discovery-title { margin: 0 0 14px !important; font-size: clamp(30px, 3.6vw, 44px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; }
body.page-id-447 .tovogo-experiences-discovery-text { padding-bottom: 0 !important; font-size: 18px !important; line-height: 1.6 !important; }
body.page-id-447 .tovogo-experiences-discovery-layout { grid-template-columns: 1fr !important; gap: 48px !important; align-items: center !important; }
body.page-id-447 .tovogo-experiences-discovery-illustration { padding: 0 !important; border-radius: 0 !important; background: transparent !important; }
body.page-id-447 .tovogo-experiences-discovery-list { display: flex !important; flex-direction: column !important; gap: 0 !important; }
body.page-id-447 .tovogo-experiences-discovery-item, body.page-id-447 .tovogo-experiences-discovery-item:first-child { display: flex !important; padding: 26px 0 !important; border: 0 !important; border-top: 1px solid rgba(84, 36, 157, 0.12) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; transform: none !important; }
body.page-id-447 .tovogo-experiences-discovery-item:first-child { border-top: 0 !important; padding-top: 0 !important; }
body.page-id-447 .tovogo-experiences-discovery-item-icon { width: 32px !important; height: 32px !important; margin: 2px 20px 0 0 !important; }
body.page-id-447 .tovogo-experiences-discovery-item-title { font-size: 21px !important; }
body.page-id-447 .tovogo-experiences-discovery-item-text { font-size: 15px !important; }

@media (min-width: 993px) {
	body.page-id-447 .tovogo-experiences-discovery-layout { grid-template-columns: 0.85fr 1fr !important; gap: 72px !important; }
	body.page-id-447 .tovogo-experiences-discovery-illustration-svg { max-width: 380px !important; transform: translate(28px, -20px) !important; }
}

@media (max-width: 543px) {
	body.page-id-58 .tovogo-hotel-types { padding: 64px 20px 72px !important; }
	body.page-id-58 .tovogo-hotel-types-grid { grid-template-columns: 1fr !important; grid-template-rows: none !important; grid-template-areas: none !important; }
	body.page-id-58 .tovogo-hotel-type--hotels, body.page-id-58 .tovogo-hotel-type--ferienwohnungen, body.page-id-58 .tovogo-hotel-type--apartments, body.page-id-58 .tovogo-hotel-type--resorts { grid-area: auto !important; }
	body.page-id-59 .tovogo-pendeln-routes { padding: 56px 20px 64px !important; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint { padding-bottom: 28px !important; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint:last-child { padding-bottom: 0 !important; }
	body.page-id-447 .tovogo-experiences-discovery { padding: 56px 20px 64px !important; }
}

/* ======================================================================
   High-contrast service discovery surfaces.
   The sections below intentionally avoid pale cards on a pale page: each
   is a self-contained dark travel surface with one clear hierarchy.
   ====================================================================== */
body.page-id-58 .tovogo-hotel-types,
body.page-id-59 .tovogo-pendeln-routes,
body.page-id-447 .tovogo-experiences-discovery {
	position: relative;
	overflow: hidden;
	background: #251044 !important;
}

body.page-id-58 .tovogo-hotel-types::before,
body.page-id-59 .tovogo-pendeln-routes::before,
body.page-id-447 .tovogo-experiences-discovery::before {
	content: "";
	position: absolute;
	inset: 22px;
	pointer-events: none;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 18px;
}

body.page-id-58 .tovogo-hotel-types-inner,
body.page-id-59 .tovogo-pendeln-routes-inner,
body.page-id-447 .tovogo-experiences-discovery-inner {
	position: relative;
	z-index: 1;
}

body.page-id-58 .tovogo-hotel-types-header,
body.page-id-59 .tovogo-pendeln-routes-header,
body.page-id-447 .tovogo-experiences-discovery-header {
	max-width: 820px !important;
	margin: 0 auto 52px !important;
	text-align: center !important;
}

body.page-id-58 .tovogo-hotel-types-eyebrow,
body.page-id-59 .tovogo-pendeln-routes-eyebrow,
body.page-id-447 .tovogo-experiences-discovery-eyebrow {
	padding: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: #eff56a !important;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
}

body.page-id-58 .tovogo-hotel-types-title,
body.page-id-59 .tovogo-pendeln-routes-title,
body.page-id-447 .tovogo-experiences-discovery-title {
	margin: 0 0 16px !important;
	font-size: clamp(32px, 4.2vw, 54px) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.045em !important;
	color: #fffdf8 !important;
}

body.page-id-58 .tovogo-hotel-types-text,
body.page-id-59 .tovogo-pendeln-routes-text,
body.page-id-447 .tovogo-experiences-discovery-text {
	max-width: 620px;
	margin-inline: auto;
	font-size: 16px !important;
	line-height: 1.65 !important;
	color: rgba(255, 255, 255, 0.7) !important;
}

/* Accommodation types become four distinct dark destinations, not pale
   placeholders. The oversized icon and muted route number add a clear
   visual anchor to each choice. */
body.page-id-58 .tovogo-hotel-types-grid {
	gap: 12px !important;
	border-radius: 16px !important;
	background: transparent !important;
	overflow: visible !important;
}

body.page-id-58 .tovogo-hotel-type,
body.page-id-58 .tovogo-hotel-type--hotels {
	position: relative;
	min-height: 220px;
	padding: 34px !important;
	border: 1px solid rgba(255, 255, 255, 0.13) !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	transition: transform 220ms ease, border-color 220ms ease, background-color 220ms ease !important;
}

body.page-id-58 .tovogo-hotel-type::after {
	position: absolute;
	right: 22px;
	top: 18px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.13em;
	color: rgba(255, 255, 255, 0.35);
}
body.page-id-58 .tovogo-hotel-type:nth-child(1)::after { content: "01"; }
body.page-id-58 .tovogo-hotel-type:nth-child(2)::after { content: "02"; }
body.page-id-58 .tovogo-hotel-type:nth-child(3)::after { content: "03"; }
body.page-id-58 .tovogo-hotel-type:nth-child(4)::after { content: "04"; }
body.page-id-58 .tovogo-hotel-type:hover { transform: translateY(-4px) !important; border-color: rgba(239, 245, 106, 0.58) !important; }
body.page-id-58 .tovogo-hotel-type--hotels { background: #3a1b61 !important; }
body.page-id-58 .tovogo-hotel-type--ferienwohnungen { background: #30164f !important; }
body.page-id-58 .tovogo-hotel-type--apartments { background: #281344 !important; }
body.page-id-58 .tovogo-hotel-type--resorts { background: #422052 !important; }
body.page-id-58 .tovogo-hotel-type-illustration,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration {
	width: 78px !important;
	height: 78px !important;
	margin: 0 0 30px !important;
	padding: 0 !important;
	color: #eff56a !important;
	opacity: 1;
}
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration { width: 108px !important; height: 108px !important; }
body.page-id-58 .tovogo-hotel-type-title,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-title { margin-bottom: 10px !important; font-size: clamp(20px, 2vw, 28px) !important; color: #fffdf8 !important; }
body.page-id-58 .tovogo-hotel-type-text,
body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-text { max-width: 360px; color: rgba(255, 255, 255, 0.68) !important; }

/* Transfer: the real route line remains central; the three stops receive
   contrast and breathing room without creating pastel cards. */
body.page-id-59 .tovogo-pendeln-routes-journey {
	padding: 36px 32px 28px !important;
	border: 1px solid rgba(255, 255, 255, 0.13) !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, 0.045) !important;
}
body.page-id-59 .tovogo-pendeln-routes-line-path { stroke: #70d6e4 !important; }
body.page-id-59 .tovogo-pendeln-routes-line-marker { background: #eff56a !important; }
body.page-id-59 .tovogo-pendeln-routes-line-marker--aufenthalt { background: #251044 !important; border-color: #70d6e4 !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoints { gap: 16px !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoint {
	padding: 20px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.09) !important;
	border-radius: 10px !important;
	background: rgba(37, 16, 68, 0.58) !important;
}
body.page-id-59 .tovogo-pendeln-routes-waypoint-title { color: #fffdf8 !important; }
body.page-id-59 .tovogo-pendeln-routes-waypoint-text { color: rgba(255, 255, 255, 0.66) !important; }

/* Experiences: a dark exhibition wall. The existing illustration remains
   useful, while categories gain clear structure without yellow/blue fills. */
body.page-id-447 .tovogo-experiences-discovery-layout {
	grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1fr) !important;
	gap: 28px !important;
	align-items: stretch !important;
}
body.page-id-447 .tovogo-experiences-discovery-illustration {
	display: flex;
	align-items: center;
	padding: 30px !important;
	border: 1px solid rgba(255, 255, 255, 0.13) !important;
	border-radius: 16px !important;
	background: rgba(255, 255, 255, 0.045) !important;
}
body.page-id-447 .tovogo-experiences-discovery-illustration-ground { stroke: rgba(255, 255, 255, 0.25) !important; }
body.page-id-447 .tovogo-experiences-discovery-illustration-line { stroke: #eff56a !important; }
body.page-id-447 .tovogo-experiences-discovery-illustration-line-faint { stroke: rgba(112, 214, 228, 0.7) !important; }
body.page-id-447 .tovogo-experiences-discovery-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
body.page-id-447 .tovogo-experiences-discovery-item,
body.page-id-447 .tovogo-experiences-discovery-item:first-child {
	display: block !important;
	padding: 24px !important;
	border: 1px solid rgba(255, 255, 255, 0.13) !important;
	border-radius: 12px !important;
	background: rgba(255, 255, 255, 0.045) !important;
	transition: transform 220ms ease, background-color 220ms ease, border-color 220ms ease !important;
}
body.page-id-447 .tovogo-experiences-discovery-item:hover { transform: translateY(-3px) !important; border-color: rgba(239, 245, 106, 0.55) !important; background: rgba(255, 255, 255, 0.08) !important; }
body.page-id-447 .tovogo-experiences-discovery-item-icon { width: 32px !important; height: 32px !important; margin: 0 0 28px !important; color: #70d6e4; }
body.page-id-447 .tovogo-experiences-discovery-item-title { color: #fffdf8 !important; }
body.page-id-447 .tovogo-experiences-discovery-item-text { color: rgba(255, 255, 255, 0.66) !important; }

@media (max-width: 992px) {
	body.page-id-447 .tovogo-experiences-discovery-layout { grid-template-columns: 1fr !important; }
}
@media (max-width: 620px) {
	body.page-id-58 .tovogo-hotel-types::before,
	body.page-id-59 .tovogo-pendeln-routes::before,
	body.page-id-447 .tovogo-experiences-discovery::before { inset: 10px; border-radius: 12px; }
	body.page-id-58 .tovogo-hotel-type,
	body.page-id-58 .tovogo-hotel-type--hotels { min-height: 0; padding: 24px !important; }
	body.page-id-58 .tovogo-hotel-type--hotels .tovogo-hotel-type-illustration { width: 82px !important; height: 82px !important; }
	body.page-id-59 .tovogo-pendeln-routes-journey { padding: 24px 18px !important; }
	body.page-id-59 .tovogo-pendeln-routes-waypoint { padding: 0 0 24px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; }
	body.page-id-447 .tovogo-experiences-discovery-list { grid-template-columns: 1fr !important; }
}

/* Mietwagen route map: preserve the approved visual direction while
   tightening its vertical rhythm. */
body.page-id-60 .tovogo-mietwagen-styles {
	padding: clamp(52px, 6vw, 76px) 32px;
}

body.page-id-60 .tovogo-mietwagen-styles-header {
	margin-bottom: 30px;
}

body.page-id-60 .tovogo-mietwagen-styles-scene {
	padding: 24px;
}

@media (min-width: 993px) {
	body.page-id-60 .tovogo-mietwagen-styles-scene { height: 520px; }
}

@media (min-width: 641px) and (max-width: 992px) {
	body.page-id-60 .tovogo-mietwagen-styles-scene { gap: 36px; padding: 20px 0; }
}

@media (max-width: 640px) {
	body.page-id-60 .tovogo-mietwagen-styles { padding: 52px 20px 56px; }
	body.page-id-60 .tovogo-mietwagen-styles-header { margin-bottom: 28px; }
	body.page-id-60 .tovogo-mietwagen-styles-stop { margin-bottom: 26px; }
}

/* ======================================================================
   Homepage final CTA — a travel route card rather than a conventional
   closing banner. All links retain their existing destinations.
   ====================================================================== */
body.page-id-57 .tovogo-cta {
	padding: 68px 12px 88px;
	background: #f8f7fb;
}

body.page-id-57 .tovogo-cta-panel {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
	align-items: center;
	gap: 54px;
	min-height: 510px;
	padding: 64px clamp(32px, 6vw, 80px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 18px;
	background:
		radial-gradient(circle at 87% 12%, rgba(112, 214, 228, 0.23), transparent 25%),
		radial-gradient(circle at 7% 104%, rgba(239, 245, 106, 0.13), transparent 30%),
		linear-gradient(140deg, #35115f 0%, #1d0b36 68%);
	box-shadow: 0 22px 52px rgba(26, 8, 48, 0.2);
}

body.page-id-57 .tovogo-cta-panel::before {
	content: "GO.";
	position: absolute;
	right: clamp(24px, 4vw, 64px);
	top: 50%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: clamp(100px, 16vw, 220px);
	font-weight: 800;
	letter-spacing: -0.11em;
	line-height: 0.75;
	color: rgba(255, 255, 255, 0.035);
	transform: translateY(-50%);
	pointer-events: none;
}

body.page-id-57 .tovogo-cta-copy { z-index: 2; }
body.page-id-57 .tovogo-cta-eyebrow { color: #eff56a; margin-bottom: 18px; }
body.page-id-57 .tovogo-cta-title {
	max-width: 580px;
	margin-bottom: 18px;
	font-size: clamp(38px, 5vw, 64px);
	line-height: 0.98;
	letter-spacing: -0.055em;
}
body.page-id-57 .tovogo-cta-text { max-width: 460px; margin-bottom: 34px; font-size: 17px; }

body.page-id-57 .tovogo-cta-button {
	gap: 22px;
	padding: 17px 22px 17px 26px;
	border-radius: 9px;
	background: #eff56a;
	color: #251044;
	box-shadow: none;
}
body.page-id-57 .tovogo-cta-button:hover { background: #ffffff; box-shadow: none; }
body.page-id-57 .tovogo-cta-button span { font-size: 22px; line-height: 0; }

body.page-id-57 .tovogo-cta-links {
	gap: 0;
	max-width: 490px;
	margin-top: 34px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
body.page-id-57 .tovogo-cta-links a {
	padding: 12px 10px 12px 0;
	margin-right: 14px;
	font-size: 11px;
	color: rgba(255, 255, 255, 0.72);
}
body.page-id-57 .tovogo-cta-links a:not(:last-child)::after { display: none; }
body.page-id-57 .tovogo-cta-note { margin-top: 16px; }

body.page-id-57 .tovogo-cta-visual {
	position: relative;
	z-index: 1;
	width: min(100%, 390px);
	max-width: none;
	margin: 0 auto;
}
body.page-id-57 .tovogo-cta-svg { opacity: 0.86; }
body.page-id-57 .tovogo-cta-svg-ring { stroke: rgba(255, 255, 255, 0.13); }
body.page-id-57 .tovogo-cta-svg-ring--inner { stroke: rgba(112, 214, 228, 0.55); }
body.page-id-57 .tovogo-cta-svg-route { stroke: rgba(239, 245, 106, 0.72); }
body.page-id-57 .tovogo-cta-svg-dot { fill: #70d6e4; }
body.page-id-57 .tovogo-cta-svg-plane { fill: #eff56a; }

body.page-id-57 .tovogo-cta-route-card {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	width: min(86%, 330px);
	padding: 22px 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 12px;
	background: rgba(37, 16, 68, 0.78);
	box-shadow: 0 18px 34px rgba(13, 4, 27, 0.22);
	backdrop-filter: blur(8px);
	transform: translate(-50%, -50%) rotate(-4deg);
}
body.page-id-57 .tovogo-cta-route-label,
body.page-id-57 .tovogo-cta-route-foot {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
body.page-id-57 .tovogo-cta-route-label { color: #eff56a; }
body.page-id-57 .tovogo-cta-route-foot { color: rgba(255, 255, 255, 0.55); }
body.page-id-57 .tovogo-cta-route-stops {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 18px 0;
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: 700;
}
body.page-id-57 .tovogo-cta-route-stops i {
	flex: 1;
	height: 1px;
	min-width: 12px;
	background: linear-gradient(90deg, #eff56a, #70d6e4);
}

@media (max-width: 820px) {
	body.page-id-57 .tovogo-cta-panel { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding: 54px 32px 40px; }
	body.page-id-57 .tovogo-cta-visual { width: min(100%, 330px); }
}
@media (max-width: 543px) {
	body.page-id-57 .tovogo-cta { padding: 52px 12px 64px; }
	body.page-id-57 .tovogo-cta-panel { padding: 42px 24px 30px; border-radius: 12px; }
	body.page-id-57 .tovogo-cta-title { font-size: clamp(34px, 11vw, 48px); }
	body.page-id-57 .tovogo-cta-button { width: 100%; justify-content: space-between; }
	body.page-id-57 .tovogo-cta-links a { margin-right: 10px; }
	body.page-id-57 .tovogo-cta-visual { width: min(100%, 280px); }
}

/* ======================================================================
   Homepage map-stage editorial panel — intentionally scoped to the left
   copy column only. The live map/widget column is not selected here.
   ====================================================================== */
body.page-id-57 .tovogo-map-stage-editorial {
	overflow: hidden;
	padding: 52px 46px 44px;
	background:
		radial-gradient(circle at 100% 0%, rgba(112, 214, 228, 0.2), transparent 31%),
		linear-gradient(148deg, #32105a 0%, #1c0a35 62%, #160724 100%);
	border-color: rgba(112, 214, 228, 0.25);
}

body.page-id-57 .tovogo-map-stage-editorial::before {
	content: "";
	position: absolute;
	top: -66px;
	right: -66px;
	width: 180px;
	height: 180px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 50%;
	box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.025), 0 0 0 56px rgba(255, 255, 255, 0.02);
	pointer-events: none;
}

body.page-id-57 .tovogo-map-stage-eyebrow {
	position: relative;
	padding: 0 0 0 16px;
	margin: 0 0 23px;
	border-radius: 0;
	background: transparent;
	color: #eff56a;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
}

body.page-id-57 .tovogo-map-stage-eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #eff56a;
	box-shadow: 14px 0 0 rgba(112, 214, 228, 0.78);
	transform: translateY(-50%);
}

body.page-id-57 .tovogo-map-stage-title {
	position: relative;
	max-width: 380px;
	margin: 0 0 16px;
	font-size: clamp(32px, 3.15vw, 46px);
	line-height: 1.03;
	letter-spacing: -0.05em;
	color: #ffffff;
}

body.page-id-57 .tovogo-map-stage-text {
	position: relative;
	max-width: 390px;
	margin: 0 0 34px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.7);
}

body.page-id-57 .tovogo-map-stage-labels {
	position: relative;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 22px;
	padding: 0;
	counter-reset: tvg-destination;
}

body.page-id-57 .tovogo-map-stage-labels::before {
	display: none;
}

body.page-id-57 .tovogo-map-stage-labels li {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 8px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	color: rgba(255, 255, 255, 0.93);
	font-size: 15px;
	font-weight: 600;
	counter-increment: tvg-destination;
}

body.page-id-57 .tovogo-map-stage-labels li::before {
	position: static;
	flex: 0 0 30px;
	width: auto;
	height: auto;
	margin: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: #70d6e4;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	content: counter(tvg-destination, decimal-leading-zero);
	transform: none;
}

body.page-id-57 .tovogo-map-stage-labels li::after {
	content: "↗";
	margin-left: auto;
	color: rgba(239, 245, 106, 0.78);
	font-size: 15px;
	font-weight: 400;
}

@media (max-width: 992px) {
	body.page-id-57 .tovogo-map-stage-editorial {
		padding: 44px 34px 36px;
	}
}

@media (max-width: 543px) {
	body.page-id-57 .tovogo-map-stage-editorial {
		padding: 36px 24px 28px;
	}

	body.page-id-57 .tovogo-map-stage-labels {
		grid-template-columns: 1fr;
	}
}

/* ======================================================================
   Homepage refinement pass: living hero, clear continuation, trusted
   decision cues, and one shared editorial-card system.
   ====================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.tovogo-hero-canvas-glow { animation: tovogo-hero-glow-breathe 8s ease-in-out infinite; }
	.tovogo-hero-canvas-route { stroke-dasharray: 7 5; animation: tovogo-hero-route-travel 12s linear infinite; }
	.tovogo-hero-canvas-node { transform-box: fill-box; transform-origin: center; animation: tovogo-hero-node-pulse 3.6s ease-in-out infinite; }
	.tovogo-hero-canvas-node:nth-of-type(2) { animation-delay: 0.8s; }
	.tovogo-hero-canvas-node:nth-of-type(3) { animation-delay: 1.6s; }
	.tovogo-hero-canvas-node:nth-of-type(4) { animation-delay: 2.4s; }
	@keyframes tovogo-hero-glow-breathe { 0%, 100% { opacity: 0.72; transform: scale(0.98); } 50% { opacity: 1; transform: scale(1.04); } }
	@keyframes tovogo-hero-route-travel { to { stroke-dashoffset: -72; } }
	@keyframes tovogo-hero-node-pulse { 0%, 100% { opacity: 0.72; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1.08); } }
}

.tovogo-hero::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 96px; pointer-events: none; background: linear-gradient(to bottom, rgba(18, 10, 31, 0), rgba(248, 247, 251, 0.2)); }
.tovogo-hero-scroll-cue { position: absolute; z-index: 3; left: 50%; bottom: 22px; display: inline-flex; align-items: center; gap: 8px; transform: translateX(-50%); color: rgba(247, 242, 234, 0.66); font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-decoration: none; text-transform: uppercase; transition: color 0.2s ease; }
.tovogo-hero-scroll-cue:hover, .tovogo-hero-scroll-cue:focus-visible { color: #f7f2ea; }
.tovogo-hero-scroll-cue span { font-size: 16px; line-height: 1; }

.tovogo-hero-trust { display: flex; flex-wrap: wrap; gap: 9px 18px; padding: 0; margin: 24px 0 0; list-style: none; color: rgba(247, 242, 234, 0.62); font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.35; }
.tovogo-hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.tovogo-hero-trust li::before { content: ""; width: 5px; height: 5px; border: 1px solid rgba(214, 187, 255, 0.78); border-radius: 50%; }

/* Shared 12px geometry and a restrained shadow establish one hierarchy
   across services, destinations, and the benefit cards. */
body.page-id-57 .tovogo-services-grid { border-radius: 12px; box-shadow: 0 12px 28px rgba(20, 8, 46, 0.10); }
body.page-id-57 .tovogo-destination-card { border-radius: 12px; box-shadow: 0 12px 28px rgba(20, 8, 46, 0.10); }
body.page-id-57 .tovogo-destination-card:hover { box-shadow: 0 16px 32px rgba(20, 8, 46, 0.16); }
body.page-id-57 .tovogo-why-list { gap: 12px; }
body.page-id-57 .tovogo-why-item, body.page-id-57 .tovogo-why-item:first-child { padding: 26px 28px; border: 1px solid rgba(84, 36, 157, 0.12); border-radius: 12px; background: #fffdfb; box-shadow: 0 12px 28px rgba(20, 8, 46, 0.08); }

/* Eight generated editorial photographs are stored as one local sprite.
   The existing overlay retains excellent text contrast and plum atmosphere. */
body.page-id-57 .tovogo-destination-card-media { background-image: url("../images/tovogo-destinations-sprite.webp") !important; background-size: 400% 200% !important; background-repeat: no-repeat !important; }
body.page-id-57 .tovogo-destination-card--paris .tovogo-destination-card-media { background-position: 0% 0% !important; }
body.page-id-57 .tovogo-destination-card--istanbul .tovogo-destination-card-media { background-position: 33.333% 0% !important; }
body.page-id-57 .tovogo-destination-card--barcelona .tovogo-destination-card-media { background-position: 66.667% 0% !important; }
body.page-id-57 .tovogo-destination-card--dubai .tovogo-destination-card-media { background-position: 100% 0% !important; }
body.page-id-57 .tovogo-destination-card--rom .tovogo-destination-card-media { background-position: 0% 100% !important; }
body.page-id-57 .tovogo-destination-card--amsterdam .tovogo-destination-card-media { background-position: 33.333% 100% !important; }
body.page-id-57 .tovogo-destination-card--lissabon .tovogo-destination-card-media { background-position: 66.667% 100% !important; }
body.page-id-57 .tovogo-destination-card--wien .tovogo-destination-card-media { background-position: 100% 100% !important; }
body.page-id-57 .tovogo-destination-card-svg { opacity: 0.16; }

@media (max-width: 543px) {
	.tovogo-hero { padding-bottom: 42px; }
	.tovogo-hero-trust { justify-content: center; margin-top: 20px; font-size: 11px; }
	.tovogo-hero-visual { min-height: 180px; max-width: 210px; }
	.tovogo-hero-canvas-svg { max-width: 180px; }
	.tovogo-hero-canvas-contour, .tovogo-hero-canvas-coord, .tovogo-hero-canvas-dash { display: none; }
	.tovogo-hero-canvas-route { stroke-width: 1.7; }
	.tovogo-hero-scroll-cue { display: none; }
}

/* Shared conversion treatment for Hotels, Mietwagen, Transfers, and
   Erlebnisse: one clear next step plus the same restrained trust signal
   used on the homepage. The links only jump to each page's own content
   and do not alter any provider widget or booking flow. */
.tovogo-service-hero-actions { margin-top: 30px; }
.tovogo-service-hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 8px; background: #2e1444; box-shadow: 0 10px 22px rgba(45, 18, 74, 0.18); color: #ffffff; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; }
.tovogo-service-hero-cta span { font-size: 18px; line-height: 1; transition: transform 0.2s ease; }
.tovogo-service-hero-cta:hover { background: #54249d; box-shadow: 0 14px 28px rgba(45, 18, 74, 0.24); transform: translateY(-1px); }
.tovogo-service-hero-cta:hover span { transform: translateX(3px); }
.tovogo-service-hero-cta:focus-visible { outline: 2px solid #54249d; outline-offset: 3px; }
.tovogo-service-hero-trust { display: flex; flex-wrap: wrap; gap: 10px 18px; padding: 0; margin: 18px 0 0; list-style: none; color: #65586d; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4; }
.tovogo-service-hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.tovogo-service-hero-trust li::before { content: ""; width: 5px; height: 5px; border: 1px solid #8d68c5; border-radius: 50%; }

/* A very slow glow breath carries the homepage's sense of depth into the
   service heroes while leaving their page-specific illustrations intact. */
@media (prefers-reduced-motion: no-preference) {
	.tovogo-hotels-hero-glow, .tovogo-mietwagen-hero-glow, .tovogo-pendeln-hero-glow, .tovogo-experiences-hero-glow { animation: tovogo-service-hero-glow 8s ease-in-out infinite; }
	@keyframes tovogo-service-hero-glow { 0%, 100% { opacity: 0.72; } 50% { opacity: 1; } }
}

@media (max-width: 992px) {
	.tovogo-service-hero-actions, .tovogo-service-hero-trust { justify-content: center; }
}

@media (max-width: 543px) {
	.tovogo-service-hero-cta { width: 100%; justify-content: center; }
	.tovogo-service-hero-trust { justify-content: center; font-size: 11px; }
}

/* ======================================================================
   Curated site photography — balanced layouts
   ====================================================================== */

/* Banner files are designed at 1920×700 and 1080×1350. They therefore
   fill the hero itself; they are not treated as a small illustration
   inside a second, differently proportioned hero. */
.tovogo-hero { position: relative; min-height: 700px; padding: 0; overflow: hidden; background: #1b0d30; display: flex; align-items: stretch; }
.tovogo-hero-inner { position: static; z-index: 1; display: block; width: min(1200px, 100%); margin: 0 auto; padding: 112px 32px 92px; }
.tovogo-hero-copy { position: relative; z-index: 2; width: min(540px, 100%); }
.tovogo-hero-visual { position: absolute; z-index: 0; inset: 0; min-height: 0; max-width: none; margin: 0; }
.tovogo-hero-image,
.tovogo-hero-image img { display: block; width: 100%; height: 100%; }
.tovogo-hero-image img { object-fit: cover; object-position: center; }
.tovogo-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 8, 36, 0.88) 0%, rgba(20, 8, 36, 0.66) 46%, rgba(20, 8, 36, 0.18) 100%); }

/* Five equal visual modules make the service choice clear. The source photos
   are the focus; the supplied icons become modest, legible category marks. */
body.page-id-57 .tovogo-services-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(290px, auto); grid-template-areas: none; gap: 20px; box-shadow: none; }
body.page-id-57 .tovogo-service-module,
body.page-id-57 .tovogo-service-module--fluege,
body.page-id-57 .tovogo-service-module--unterkuenfte,
body.page-id-57 .tovogo-service-module--mietwagen,
body.page-id-57 .tovogo-service-module--transfers,
body.page-id-57 .tovogo-service-module--erlebnisse { position: relative; isolation: isolate; grid-area: auto; grid-column: span 2; min-height: 290px; padding: 28px; overflow: hidden; border: 0; border-radius: 14px; background: #28113f; color: #ffffff; }
body.page-id-57 .tovogo-service-module--transfers,
body.page-id-57 .tovogo-service-module--erlebnisse { grid-column: span 3; }
body.page-id-57 .tovogo-service-module--fluege,
body.page-id-57 .tovogo-service-module--unterkuenfte,
body.page-id-57 .tovogo-service-module--mietwagen,
body.page-id-57 .tovogo-service-module--transfers,
body.page-id-57 .tovogo-service-module--erlebnisse { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; }
body.page-id-57 .tovogo-service-module-image { position: absolute; z-index: 0; inset: 0; display: block; }
body.page-id-57 .tovogo-service-module-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 36, 0.12) 0%, rgba(20, 8, 36, 0.82) 100%); }
body.page-id-57 .tovogo-service-module-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
body.page-id-57 .tovogo-service-module:hover .tovogo-service-module-image img { transform: scale(1.03); }
body.page-id-57 .tovogo-service-module-icon,
body.page-id-57 .tovogo-service-module-body,
body.page-id-57 .tovogo-service-module-cta,
body.page-id-57 .tovogo-service-module-motif { position: relative; z-index: 1; }
body.page-id-57 .tovogo-service-module-icon { width: 64px !important; height: 64px !important; margin: 0 !important; padding: 9px !important; overflow: hidden; border-radius: 12px; background: rgba(255, 255, 255, 0.94); }
body.page-id-57 .tovogo-service-module-icon img { display: block; width: 100%; height: 100%; object-fit: contain; transform: scale(1.9); }
body.page-id-57 .tovogo-service-module-body { flex: 0 0 auto !important; margin: auto 0 0 !important; }
body.page-id-57 .tovogo-service-module-title { color: #ffffff; font-size: clamp(24px, 2vw, 30px); }
body.page-id-57 .tovogo-service-module-text { color: rgba(255, 255, 255, 0.82); }
body.page-id-57 .tovogo-service-module-cta { margin-top: 18px; color: #ffffff; border-color: rgba(255, 255, 255, 0.38); }
body.page-id-57 .tovogo-service-module-motif { display: none; }

/* The final image occupies its own clear visual column rather than being
   blended invisibly behind unrelated decoration. */
body.page-id-57 .tovogo-cta-visual { position: relative; overflow: hidden; border-radius: 14px; }
body.page-id-57 .tovogo-cta-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% center; opacity: 1; mix-blend-mode: normal; }
body.page-id-57 .tovogo-cta-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 9, 40, 0.05), rgba(22, 9, 40, 0.55)); }
body.page-id-57 .tovogo-cta-svg { position: relative; z-index: 1; opacity: 0.42; }
body.page-id-57 .tovogo-cta-route-card { position: absolute; z-index: 2; top: 22px; right: 22px; left: 22px; width: auto; padding: 16px 18px; transform: none; border-color: rgba(255, 255, 255, 0.28); background: rgba(37, 16, 68, 0.90); box-shadow: 0 12px 26px rgba(13, 4, 27, 0.30); }
body.page-id-57 .tovogo-cta-route-stops { margin: 12px 0; }

/* Angebote 2 is used as the visual half of the Erlebnisse hero. */
.tovogo-experiences-hero-visual { overflow: hidden; border-radius: 14px; }
.tovogo-experiences-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; opacity: 1; }
.tovogo-experiences-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(145deg, rgba(36, 16, 65, 0.32), rgba(36, 16, 65, 0.08)); pointer-events: none; }
.tovogo-experiences-hero-svg,
.tovogo-experiences-hero-chip { position: relative; z-index: 1; }

@media (max-width: 992px) {
	.tovogo-hero { min-height: 620px; }
	.tovogo-hero-inner { padding: 100px 28px 78px; }
	.tovogo-hero-copy { margin: 0 auto; text-align: center; }
	.tovogo-hero-visual::after { background: rgba(20, 8, 36, 0.68); }
	body.page-id-57 .tovogo-services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.page-id-57 .tovogo-service-module,
	body.page-id-57 .tovogo-service-module--transfers,
	body.page-id-57 .tovogo-service-module--erlebnisse { grid-column: auto; }
}

@media (max-width: 543px) {
	.tovogo-hero { min-height: 660px; }
	.tovogo-hero-inner { padding: 108px 22px 58px; }
	.tovogo-hero-visual::after { background: rgba(20, 8, 36, 0.66); }
	body.page-id-57 .tovogo-services-grid { grid-template-columns: 1fr; gap: 16px; }
	body.page-id-57 .tovogo-service-module { min-height: 270px; padding: 24px; }
	body.page-id-57 .tovogo-service-module-body { margin-top: 34px; }
}

/* Keep the route summary inside the text panel so the travel photograph
   stays clean and fully visible. */
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-card { position: static; width: auto; margin: 24px 0 0; padding: 13px 16px; transform: none; border-radius: 10px; background: rgba(255, 255, 255, 0.08); box-shadow: none; backdrop-filter: none; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-label,
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-foot { font-size: 9px; letter-spacing: 0.12em; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-stops { gap: 8px; margin: 8px 0; font-size: 11px; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-links { margin-top: 20px; }

/* Compact the final panel to the height of its actual content. */
body.page-id-57 .tovogo-cta { padding: 48px 12px 56px; }
body.page-id-57 .tovogo-cta-panel { min-height: 0; padding: 44px clamp(32px, 5vw, 72px); gap: 48px; align-items: start; }
body.page-id-57 .tovogo-cta-visual { width: min(100%, 390px); aspect-ratio: 4 / 5; }
body.page-id-57 .tovogo-cta-svg { width: 100%; height: 100%; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 16px; margin-top: 18px; padding: 12px 16px; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-label { grid-row: 1 / span 2; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-stops { margin: 0; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-route-foot { display: none; }
body.page-id-57 .tovogo-cta-copy .tovogo-cta-links { margin-top: 14px; }

/* Angebote uses the same edge-to-edge campaign-banner structure as
   Pendeln: image fills the first screen, while the copy remains readable. */
.tovogo-experiences-hero { position: relative; height: calc(100svh - 68.8px); min-height: 0; overflow: hidden; padding: 0; background: #18082d; }
.tovogo-experiences-hero-inner { position: static; z-index: 2; display: block; max-width: 1200px; margin: 0 auto; padding: 118px 32px 96px; }
.tovogo-experiences-hero-copy { position: relative; z-index: 3; width: min(550px, 100%); }
.tovogo-experiences-hero-eyebrow { background: transparent; border: 1px solid rgba(239, 247, 94, 0.42); color: #eff75e; }
.tovogo-experiences-hero-title { max-width: 540px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; }
.tovogo-experiences-hero-subtitle { max-width: 500px; color: rgba(255, 255, 255, 0.86); }
.tovogo-experiences-hero-visual { position: absolute; z-index: 0; inset: 0; min-height: 0; max-width: none; height: auto; margin: 0; overflow: hidden; border-radius: 0; background: #18082d; }
.tovogo-experiences-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tovogo-experiences-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 7, 39, 0.95) 0%, rgba(24, 8, 45, 0.84) 39%, rgba(31, 10, 51, 0.42) 63%, rgba(24, 8, 45, 0.14) 100%); pointer-events: none; }
.tovogo-experiences-hero .tovogo-service-hero-cta { background: #eff75e; color: #211039; }
.tovogo-experiences-hero .tovogo-service-hero-cta:hover { background: #ffffff; color: #211039; }
.tovogo-experiences-hero .tovogo-service-hero-cta:focus-visible { outline-color: #eff75e; }
.tovogo-experiences-hero .tovogo-service-hero-trust { color: rgba(255, 255, 255, 0.76); }
.tovogo-experiences-hero .tovogo-service-hero-trust li::before { border-color: #eff75e; }
@media (max-width: 992px) { .tovogo-experiences-hero { height: calc(100svh - 64px); } .tovogo-experiences-hero-inner { padding: 104px 28px 100px; } .tovogo-experiences-hero-visual::after { background: linear-gradient(90deg, rgba(20, 7, 39, 0.92), rgba(24, 8, 45, 0.72) 62%, rgba(24, 8, 45, 0.34)); } }
@media (max-width: 543px) { .tovogo-experiences-hero { height: auto; min-height: 590px; } .tovogo-experiences-hero-inner { padding: 98px 22px 84px; } .tovogo-experiences-hero-title { font-size: clamp(38px, 11vw, 52px); } .tovogo-experiences-hero-subtitle { font-size: 16px; } .tovogo-experiences-hero-image { object-position: 62% center; } .tovogo-experiences-hero-visual::after { background: linear-gradient(90deg, rgba(20, 7, 39, 0.93), rgba(24, 8, 45, 0.77)); } }

/* Pendeln uses the same full-bleed, photo-first campaign banner as the
   Hotels page. The transfer search itself remains below the hero. */
.tovogo-pendeln-hero { position: relative; height: calc(100svh - 68.8px); min-height: 0; overflow: hidden; padding: 0; background: #18082d; }
.tovogo-pendeln-hero-inner { position: static; z-index: 2; display: block; max-width: 1200px; margin: 0 auto; padding: 118px 32px 96px; }
.tovogo-pendeln-hero-copy { position: relative; z-index: 3; width: min(550px, 100%); }
.tovogo-pendeln-hero-eyebrow { background: transparent; border: 1px solid rgba(239, 247, 94, 0.42); color: #eff75e; }
.tovogo-pendeln-hero-title { max-width: 540px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; }
.tovogo-pendeln-hero-subtitle { max-width: 500px; color: rgba(255, 255, 255, 0.86); }
.tovogo-pendeln-hero-visual { position: absolute; z-index: 0; inset: 0; min-height: 0; max-width: none; height: auto; margin: 0; overflow: hidden; border-radius: 0; background: #18082d; }
.tovogo-pendeln-hero-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tovogo-pendeln-hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20, 7, 39, 0.95) 0%, rgba(24, 8, 45, 0.84) 39%, rgba(31, 10, 51, 0.42) 63%, rgba(24, 8, 45, 0.14) 100%); pointer-events: none; }
.tovogo-pendeln-hero .tovogo-service-hero-cta { background: #eff75e; color: #211039; }
.tovogo-pendeln-hero .tovogo-service-hero-cta:hover { background: #ffffff; color: #211039; }
.tovogo-pendeln-hero .tovogo-service-hero-cta:focus-visible { outline-color: #eff75e; }
.tovogo-pendeln-hero .tovogo-service-hero-trust { color: rgba(255, 255, 255, 0.76); }
.tovogo-pendeln-hero .tovogo-service-hero-trust li::before { border-color: #eff75e; }
@media (max-width: 992px) { .tovogo-pendeln-hero { height: calc(100svh - 64px); } .tovogo-pendeln-hero-inner { padding: 104px 28px 100px; } .tovogo-pendeln-hero-visual::after { background: linear-gradient(90deg, rgba(20, 7, 39, 0.92), rgba(24, 8, 45, 0.72) 62%, rgba(24, 8, 45, 0.34)); } }
@media (max-width: 543px) { .tovogo-pendeln-hero { height: auto; min-height: 590px; } .tovogo-pendeln-hero-inner { padding: 98px 22px 84px; } .tovogo-pendeln-hero-title { font-size: clamp(38px, 11vw, 52px); } .tovogo-pendeln-hero-subtitle { font-size: 16px; } .tovogo-pendeln-hero-image { object-position: 68% center; } .tovogo-pendeln-hero-visual::after { background: linear-gradient(90deg, rgba(20, 7, 39, 0.93), rgba(24, 8, 45, 0.77)); } }

/* Tablet fallback: keep campaign photography visible while an image element
   is still decoding. It also keeps the crop intentional in the intermediate
   544–992px range, where the portrait-like viewport otherwise exposes the
   most of the dark image overlay. */
@media (min-width: 544px) and (max-width: 992px) {
	body.page-id-59 .tovogo-pendeln-hero-visual { background: #18082d url('/wp-content/uploads/site-gorselleri/web/Photos/Pendeln.jpg') 66% center / cover no-repeat; }
	body.page-id-668 .tovogo-flights-hero-visual { background: #17092c url('/wp-content/uploads/site-gorselleri/web/Banners/Flights%20Hero%20Background.png') 68% center / cover no-repeat; }
}

/* Flights: replace the previous abstract illustration with a full-bleed
   campaign image. The left-to-right veil preserves a clear reading area
   without obscuring the aircraft and horizon on the right. */
body.page-id-668 .tovogo-flights-hero {
	position: relative;
	left: auto;
	width: 100%;
	height: calc(100svh - 68.8px);
	min-height: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	background: #17092c;
}

body.page-id-668 .tovogo-flights-hero-inner {
	position: static;
	z-index: 2;
	display: block;
	max-width: none;
	width: 100%;
	margin: 0 auto;
	padding: 108px clamp(32px, 10vw, 180px) 110px;
}

body.page-id-668 .tovogo-flights-hero-copy {
	position: relative;
	z-index: 3;
	max-width: 760px;
	color: #ffffff;
}

body.page-id-668 .tovogo-flights-hero-visual {
	position: absolute;
	inset: 0 0 -32px 0;
	z-index: 0;
	display: block;
	max-width: none;
	margin: 0;
	overflow: hidden;
}

body.page-id-668 .tovogo-flights-hero-visual::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 7, 34, 0.94) 0%, rgba(25, 9, 47, 0.84) 35%, rgba(27, 11, 48, 0.38) 61%, rgba(18, 7, 34, 0.16) 100%);
}

body.page-id-668 .tovogo-flights-hero-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.page-id-668 .tovogo-flights-hero-eyebrow { color: #eff75e; }
body.page-id-668 .tovogo-flights-hero-title { max-width: 760px; color: #ffffff; font-size: clamp(42px, 4.2vw, 66px); line-height: 1.08; }
body.page-id-668 .tovogo-flights-hero-subtitle { max-width: 470px; color: rgba(255, 255, 255, 0.86); font-size: 18px; }
body.page-id-668 .tovogo-flights-hero-cta { border-radius: 8px; background: #eff75e; color: #211039; padding: 17px 32px; }
body.page-id-668 .tovogo-flights-hero-cta:hover { background: #ffffff; color: #211039; }
body.page-id-668 .tovogo-flights-hero-cta:focus-visible { outline-color: #eff75e; }
body.page-id-668 .tovogo-flights-hero-secondary { color: rgba(255, 255, 255, 0.7); }

/* The live flight-search widget remains untouched internally. This only
   aligns its existing outer surface with the full-width hero and lets it
   bridge the section boundary on larger screens. */
@media (min-width: 993px) {
	body.page-id-668 #flight {
		box-sizing: border-box;
		width: min(1200px, calc(100vw - 64px));
		margin: -72px auto 0;
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (max-width: 992px) {
	body.page-id-668 .tovogo-flights-hero { height: calc(100svh - 64px); }
	body.page-id-668 .tovogo-flights-hero-inner { padding: 104px 28px 120px; text-align: left; }
	body.page-id-668 .tovogo-flights-hero-copy { display: block; }
	body.page-id-668 .tovogo-flights-hero-actions { align-items: flex-start; }
	body.page-id-668 .tovogo-flights-hero-visual::after { background: linear-gradient(90deg, rgba(18, 7, 34, 0.91) 0%, rgba(23, 8, 43, 0.74) 58%, rgba(18, 7, 34, 0.36) 100%); }
}

@media (max-width: 543px) {
	body.page-id-668 .tovogo-flights-hero { height: auto; min-height: 590px; }
	body.page-id-668 .tovogo-flights-hero-inner { padding: 98px 22px 104px; }
	body.page-id-668 .tovogo-flights-hero-title { font-size: clamp(38px, 11vw, 52px); }
	body.page-id-668 .tovogo-flights-hero-subtitle { font-size: 16px; }
	body.page-id-668 .tovogo-flights-hero-image { object-position: 74% center; }
	body.page-id-668 .tovogo-flights-hero-visual::after { background: linear-gradient(90deg, rgba(18, 7, 34, 0.92) 0%, rgba(24, 8, 44, 0.79) 100%); }
}

/* The flight-search embed inherits a cloned Elementor wrapper on mobile.
   Let that wrapper size to its actual controls instead of reserving an
   empty purple panel below the form. */
@media (max-width: 767px) {
	body.page-id-668 #stay,
	body.page-id-668 #stay > .e-con-inner,
	body.page-id-668 #stay .elementor-element-e234bba,
	body.page-id-668 #stay .elementor-element-0166e66 {
		width: 100%;
		min-height: 0;
		height: auto;
	}

}

/* Hotels: a single full-width photographic stay inspired by a coastal
   boutique hotel, replacing the former illustration panel. */
body.page-id-58 #page .site-content { width: 100%; max-width: none; padding-right: 0; padding-left: 0; }
body.page-id-58 .tovogo-hotels-hero {
	position: relative;
	min-height: calc(100svh - 67px);
	overflow: hidden;
	padding: 0;
	background: #180b2d url("/wp-content/uploads/site-gorselleri/web/Banners/Hotels%20Hero%20Background.png") center / cover no-repeat;
}
body.page-id-58 .tovogo-hotels-hero::before { content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(90deg, rgba(20, 8, 37, 0.94) 0%, rgba(25, 9, 45, 0.82) 42%, rgba(24, 9, 43, 0.31) 69%, rgba(18, 7, 32, 0.12) 100%); }
body.page-id-58 .tovogo-hotels-hero-inner {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 108px 32px 76px;
}
body.page-id-58 .tovogo-hotels-hero-copy { position: relative; z-index: 2; max-width: 740px; color: #fff; }
body.page-id-58 .tovogo-hotels-hero-visual { display: none; }
body.page-id-58 .tovogo-hotels-hero-image { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center; }
body.page-id-58 .tovogo-hotels-hero-glow,
body.page-id-58 .tovogo-hotels-hero-svg,
body.page-id-58 .tovogo-hotels-hero-card { display: none; }
body.page-id-58 .tovogo-hotels-hero-eyebrow { display: inline-flex; margin: 0 0 20px; padding: 9px 14px; border: 1px solid rgba(240, 247, 94, 0.34); border-radius: 999px; background: rgba(25, 9, 45, 0.42); color: #f0f75e; }
body.page-id-58 .tovogo-hotels-hero-title { max-width: 740px; color: #fff; font-size: clamp(42px, 3.6vw, 58px); line-height: 1.08; }
body.page-id-58 .tovogo-hotels-hero-subtitle { max-width: 580px; color: rgba(255,255,255,.86); }
body.page-id-58 .tovogo-service-hero-cta { border-radius: 8px; background: #f0f75e; color: #24113f; }
body.page-id-58 .tovogo-service-hero-trust { color: rgba(255,255,255,.75); }
body.page-id-58 .tovogo-service-hero-trust li::before { border-color: #f0f75e; }
@media (max-width: 992px) { body.page-id-58 .tovogo-hotels-hero { min-height: 610px; } body.page-id-58 .tovogo-hotels-hero-inner { padding: 104px 28px 92px; } body.page-id-58 .tovogo-hotels-hero-visual::after { background: linear-gradient(90deg, rgba(20, 8, 37, .91), rgba(25, 9, 45, .62)); } }
@media (max-width: 543px) { body.page-id-58 .tovogo-hotels-hero { min-height: 640px; } body.page-id-58 .tovogo-hotels-hero-inner { padding: 100px 22px 78px; } body.page-id-58 .tovogo-hotels-hero-title { font-size: clamp(40px, 11vw, 52px); } body.page-id-58 .tovogo-hotels-hero-image { object-position: 68% center; } }

/* Autos: one full-bleed coastal road scene. The photograph lives on the
   section itself, so the hero always ends exactly with its visual rather
   than leaving a separate coloured strip beneath an inner illustration. */
body.page-id-60 .tovogo-mietwagen-hero {
	position: relative;
	min-height: calc(100svh - 67px);
	overflow: hidden;
	padding: 0;
	background: #180b2d url("/wp-content/uploads/site-gorselleri/web/Banners/Cars%20Hero%20Background.png") center / cover no-repeat;
}

body.page-id-60 .tovogo-mietwagen-hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 8, 37, 0.95) 0%, rgba(25, 9, 45, 0.84) 42%, rgba(24, 9, 43, 0.36) 66%, rgba(18, 7, 32, 0.10) 100%);
}

body.page-id-60 .tovogo-mietwagen-hero::after { content: none; }

body.page-id-60 .tovogo-mietwagen-hero-inner {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 108px 32px 76px;
}

body.page-id-60 .tovogo-mietwagen-hero-copy { position: relative; z-index: 2; max-width: 700px; color: #ffffff; }
body.page-id-60 .tovogo-mietwagen-hero-visual { display: none; }
body.page-id-60 .tovogo-mietwagen-hero-eyebrow { display: inline-flex; margin: 0 0 20px; padding: 9px 14px; border: 1px solid rgba(240, 247, 94, 0.34); border-radius: 999px; background: rgba(25, 9, 45, 0.42); color: #f0f75e; }
body.page-id-60 .tovogo-mietwagen-hero-title { max-width: 700px; color: #ffffff; font-size: clamp(42px, 3.6vw, 58px); line-height: 1.08; }
body.page-id-60 .tovogo-mietwagen-hero-subtitle { max-width: 560px; color: rgba(255, 255, 255, 0.86); }
body.page-id-60 .tovogo-mietwagen-hero .tovogo-service-hero-cta { border-radius: 8px; background: #f0f75e; color: #24113f; }
body.page-id-60 .tovogo-mietwagen-hero .tovogo-service-hero-cta:hover { background: #ffffff; color: #24113f; }
body.page-id-60 .tovogo-mietwagen-hero .tovogo-service-hero-trust { color: rgba(255, 255, 255, 0.75); }
body.page-id-60 .tovogo-mietwagen-hero .tovogo-service-hero-trust li::before { border-color: #f0f75e; }

@media (max-width: 992px) {
	body.page-id-60 .tovogo-mietwagen-hero { min-height: 610px; }
	body.page-id-60 .tovogo-mietwagen-hero-inner { padding: 104px 28px 92px; }
}

@media (max-width: 543px) {
	body.page-id-60 .tovogo-mietwagen-hero { min-height: 640px; background-position: 69% center; }
	body.page-id-60 .tovogo-mietwagen-hero-inner { padding: 100px 22px 78px; }
	body.page-id-60 .tovogo-mietwagen-hero-title { font-size: clamp(40px, 11vw, 52px); }
}

/* Autos country pages: carry the hub's photographic hero into every
   destination page, replacing the former country-specific line drawings. */
.tovogo-country-hero {
	position: relative;
	min-height: calc(100svh - 67px);
	overflow: hidden;
	padding: 0;
	background: #180b2d url("/wp-content/uploads/site-gorselleri/web/Banners/Cars%20Hero%20Background.png") center / cover no-repeat;
}

.tovogo-country-hero::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, rgba(20, 8, 37, 0.95) 0%, rgba(25, 9, 45, 0.84) 42%, rgba(24, 9, 43, 0.36) 66%, rgba(18, 7, 32, 0.10) 100%);
}

.tovogo-country-hero-inner {
	position: relative;
	z-index: 2;
	display: block;
	max-width: 1200px;
	margin: 0 auto;
	padding: 108px 32px 76px;
}

.tovogo-country-hero-copy { position: relative; z-index: 2; max-width: 700px; color: #ffffff; }
.tovogo-country-hero-visual { display: none; }
.tovogo-country-hero-eyebrow { display: inline-flex; margin: 0 0 20px; padding: 9px 14px; border: 1px solid rgba(240, 247, 94, 0.34); border-radius: 999px; background: rgba(25, 9, 45, 0.42); color: #f0f75e; }
.tovogo-country-hero-title { max-width: 700px; color: #ffffff; font-size: clamp(42px, 3.6vw, 58px); line-height: 1.08; }
.tovogo-country-hero-subtitle { max-width: 560px; color: rgba(255, 255, 255, 0.86); }
.tovogo-country-hero-back { margin-top: 26px; padding: 14px 18px; border: 1px solid rgba(240, 247, 94, 0.54); border-radius: 8px; color: #ffffff; background: rgba(25, 9, 45, 0.40); }
.tovogo-country-hero-back:hover, .tovogo-country-hero-back:focus-visible { background: #f0f75e; color: #24113f; text-decoration: none; }

@media (max-width: 992px) {
	.tovogo-country-hero { min-height: 610px; }
	.tovogo-country-hero-inner { padding: 104px 28px 92px; text-align: left; }
	.tovogo-country-hero-copy { margin: 0; }
	.tovogo-country-hero-subtitle { margin-left: 0; margin-right: 0; }
	.tovogo-country-hero-back { justify-content: flex-start; }
}

@media (max-width: 543px) {
	.tovogo-country-hero { min-height: 640px; background-position: 69% center; }
	.tovogo-country-hero-inner { padding: 100px 22px 78px; }
	.tovogo-country-hero-title { font-size: clamp(40px, 11vw, 52px); }
}

/* Tablets use a centred campaign composition. The previous left-aligned
   copy was intended for desktop's wide photo crop, but looked stranded in
   the upper corner once the navigation collapsed. Phone layouts stay as-is. */
@media (min-width: 544px) and (max-width: 992px) {
	body.page-id-58 .tovogo-hotels-hero,
	body.page-id-60 .tovogo-mietwagen-hero,
	.tovogo-country-hero {
		height: calc(100svh - 64px);
		min-height: 0;
	}

	body.page-id-58 .tovogo-hotels-hero-inner,
	body.page-id-60 .tovogo-mietwagen-hero-inner,
	.tovogo-country-hero-inner,
	.tovogo-experiences-hero-inner,
	.tovogo-pendeln-hero-inner,
	body.page-id-668 .tovogo-flights-hero-inner {
		box-sizing: border-box;
		min-height: calc(100svh - 64px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 72px 28px;
		text-align: center;
	}

	body.page-id-58 .tovogo-hotels-hero-title,
	body.page-id-60 .tovogo-mietwagen-hero-title,
	.tovogo-country-hero-title,
	.tovogo-experiences-hero-title,
	.tovogo-pendeln-hero-title,
	body.page-id-668 .tovogo-flights-hero-title {
		font-size: clamp(38px, 8vw, 50px);
	}

	body.page-id-58 .tovogo-hotels-hero-copy,
	body.page-id-60 .tovogo-mietwagen-hero-copy,
	.tovogo-country-hero-copy,
	.tovogo-experiences-hero-copy,
	.tovogo-pendeln-hero-copy,
	body.page-id-668 .tovogo-flights-hero-copy {
		margin-inline: auto;
		text-align: center;
	}

	body.page-id-668 .tovogo-flights-hero-actions {
		align-items: center;
	}
}

/* Some tablet browsers report a phone-sized CSS viewport even when their
   physical display is tablet-sized. Keep the campaign copy centred there as
   well, so the layout never falls back to the old top-left composition. */
@media (max-width: 992px) {
	body.page-id-58 .tovogo-hotels-hero-inner,
	body.page-id-60 .tovogo-mietwagen-hero-inner,
	.tovogo-country-hero-inner,
	.tovogo-experiences-hero-inner,
	.tovogo-pendeln-hero-inner,
	body.page-id-668 .tovogo-flights-hero-inner {
		box-sizing: border-box;
		min-height: calc(100svh - 64px);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center !important;
	}

	body.page-id-58 .tovogo-hotels-hero-copy,
	body.page-id-60 .tovogo-mietwagen-hero-copy,
	.tovogo-country-hero-copy,
	.tovogo-experiences-hero-copy,
	.tovogo-pendeln-hero-copy,
	body.page-id-668 .tovogo-flights-hero-copy {
		margin-inline: auto !important;
		text-align: center !important;
	}

	body.page-id-668 .tovogo-flights-hero-actions {
		align-items: center !important;
	}
}

/* Angebote discovery: replace the former decorative line drawing with a
   full photographic city-culture scene that carries the same premium travel
   mood as the surrounding experience cards. */
body.page-id-447 .tovogo-experiences-discovery-illustration {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
	background: #24103f !important;
}

body.page-id-447 .tovogo-experiences-discovery-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

body.page-id-447 .tovogo-experiences-discovery-illustration::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(29, 11, 51, 0.06), rgba(29, 11, 51, 0.42));
}

@media (max-width: 992px) {
	body.page-id-447 .tovogo-experiences-discovery-illustration {
		min-height: 340px;
	}
}

/* A tighter editorial grid: the refreshed four-icon system gives each
   category a compact visual anchor and removes the oversized empty space
   around the discovery section. */
body.page-id-447 .tovogo-experiences-discovery {
	padding: clamp(56px, 6vw, 76px) 32px 72px !important;
}

body.page-id-447 .tovogo-experiences-discovery-header {
	margin-bottom: 32px !important;
}

body.page-id-447 .tovogo-experiences-discovery-layout {
	grid-template-columns: minmax(260px, 0.68fr) minmax(0, 1fr) !important;
	gap: 20px !important;
}

body.page-id-447 .tovogo-experiences-discovery-list {
	gap: 14px !important;
}

body.page-id-447 .tovogo-experiences-discovery-item,
body.page-id-447 .tovogo-experiences-discovery-item:first-child {
	padding: 20px !important;
	border-radius: 14px !important;
}

body.page-id-447 .tovogo-experiences-discovery-item-icon {
	display: grid !important;
	place-items: center;
	width: 44px !important;
	height: 44px !important;
	margin: 0 0 16px !important;
	border: 1px solid rgba(112, 214, 228, 0.30);
	border-radius: 12px;
	background: rgba(112, 214, 228, 0.08);
	color: #70d6e4;
}

body.page-id-447 .tovogo-experiences-discovery-item-icon svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

body.page-id-447 .tovogo-experiences-discovery-item-title {
	margin-bottom: 8px !important;
	font-size: 20px !important;
	line-height: 1.15;
}

body.page-id-447 .tovogo-experiences-discovery-item-text {
	font-size: 15px !important;
	line-height: 1.45;
}

@media (max-width: 992px) {
	body.page-id-447 .tovogo-experiences-discovery {
		padding: 56px 24px 64px !important;
	}

	body.page-id-447 .tovogo-experiences-discovery-layout {
		grid-template-columns: 1fr !important;
	}
}

@media (max-width: 620px) {
	body.page-id-447 .tovogo-experiences-discovery {
		padding: 48px 20px 56px !important;
	}

	body.page-id-447 .tovogo-experiences-discovery-list {
		grid-template-columns: 1fr !important;
		gap: 12px !important;
	}
}