/* Vin & Flower Redesign – eigene Styles, nach dem Bundle und Elementor geladen. */

/* ==========================================================================
   MONA-Menü – Schrift umschalten
   Zum Wechseln nur die Zeile "--vf-menu-font" ändern:
     var(--vf-font-a)  = Dosis (wie bisher)
     var(--vf-font-b)  = EB Garamond (Serifenschrift ähnlich MONA)
   EB Garamond liegt lokal in assets/fonts/ (Lizenz: SIL OFL, siehe EB-Garamond-OFL.txt).
   Der Browser lädt die Datei nur, wenn Variante B aktiv ist.
   ========================================================================== */
@font-face {
	font-family: "EB Garamond";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/eb-garamond-latin-400.woff2") format("woff2");
}

:root {
	--vf-font-a: Dosis, sans-serif;
	--vf-font-b: "EB Garamond", Georgia, "Times New Roman", serif;

	--vf-menu-font: var(--vf-font-b); /* <- HIER umschalten: -a oder -b */
}

/* ==========================================================================
   MONA-Menü – Hintergrund umschalten
   Zum Wechseln nur die Zeile "--vf-menu-mode" ändern:
     white = weiße Fläche, schwarze Schrift, Linien, Pfeile und Icons (Standard)
     photo = das Elementor-Hintergrundfoto mit dunklem Overlay, alles weiß
   Das Script (vf-redesign.js) liest den Wert und setzt die Klasse "vf-menu-photo" am <html>.
   Das Foto und das Overlay selbst stellt man weiter in Elementor ein (Header-Vorlage, Abschnitt "menu-canvas").
   ========================================================================== */
:root {
	--vf-menu-mode: white; /* <- HIER umschalten: white oder photo */
}

html.vf-menu-photo {
	--vf-menu-fg: #fff;
}

/* ==========================================================================
   MONA-Menü – Einstellungen (hier ändern, nicht weiter unten)
   ========================================================================== */
:root {
	--vf-menu-step: 0%;        /* Einzug pro Stufe der Treppe: unter 1024 px keine Treppe (wie MONA); ab 1024 px siehe unten */
	--vf-menu-row: 72px;       /* Höhe der Kopfzeile bis zur ersten Linie (MONA: 64 px bis 559 px Breite; seit Runde 12 72 px, Alo: Logo größer) */
	--vf-logo-h: 44px;         /* Höhe des Logos in der Kopfzeile (vorher 36 px) */
	--vf-menu-gutter: 16px;    /* Rand links/rechts (MONA: 16 px bis 559 px Breite) */
	--vf-menu-bg: #fff;
	--vf-menu-fg: #000;

	/* Menü passt in die Fensterhöhe (Runde 12, Alo: am kleineren Büro-Bildschirm musste er scrollen, um FAQs zu sehen).
	   Höhe einer Zeile höchstens = (Fensterhöhe - Kopfzeile - Rand unten) / Zahl der Zeilen; Schrift höchstens 60 % davon.
	   Gilt nur, wenn das Fenster niedriger ist als das Menü nach Breite ohnehin wäre. Untergrenze der Zeile: --vf-menu-row-min
	   (darunter scrollt das Menü wie bisher). Menü mit mehr oder weniger Zeilen: --vf-menu-rows ändern. */
	--vf-menu-rows: 7;
	--vf-menu-bottom: 20px;    /* Platz unter der letzten Zeile (vorher 3 rem) */
	--vf-menu-row-min: 56px;
	--vf-menu-vh: 100vh;
	--vf-menu-row-max: max(var(--vf-menu-row-min), calc((var(--vf-menu-vh) - var(--vf-top) - var(--vf-menu-row) - var(--vf-menu-bottom)) / var(--vf-menu-rows)));
}

@supports (height: 100dvh) {
	:root { --vf-menu-vh: 100dvh; }
}


/* Gemessen bei mona.net.au (Menü offen): Kopfzeile 64 px / Rand 16 px bei 375 und 480 px,
   72 px / 24 px bei 600 px und breiter (Umschaltstelle liegt zwischen 480 und 600, hier: 560).
   Runde 12 (Alo 17.10.: "logo bigger and the header bigger with it"): Kopfzeile jetzt 72 px (unter 560 px) bzw. 88 px, Logo 44 bzw. 52 px.
   Zurückstellen: 64 / 72 px und Logo 36 px.
   Treppe erst ab 1024 px (bei 1000 px keine, bei 1280 px ja; Stufe dort ca. 12,7 %). */
@media (min-width: 560px) {
	:root {
		--vf-menu-row: 88px;  /* vorher 72 px */
		--vf-logo-h: 52px;    /* vorher 36 px */
		--vf-menu-gutter: 24px;
	}
}

@media (min-width: 1024px) {
	:root { --vf-menu-step: 10.5%; } /* MONA hat ca. 12,7 % bei 6 Zeilen. Mit 7 Zeilen (CATERING) auf 10,5 % verkleinert, sonst läuft "GET IN TOUCH" bei 1024 px in den Pfeil. */
}

/* ==========================================================================
   Layout und Farbumkehr
   Elementor-Regeln haben Spezifität bis 0,5,0. "body #menu-canvas" (1,0,1)
   gewinnt gegen alle ohne !important.
   ========================================================================== */

/* Fläche: weiß, volle Höhe, kein Foto, kein Overlay. Elementors Slide-in (left:-100%,
   translateX) wird hier aufgehoben, geschlossen ist das Menü unsichtbar. */
body #menu-canvas {
	left: 0;
	top: var(--vf-top);
	bottom: 0;
	width: 100%;
	transform: none;
	overflow-y: auto; /* sehr niedrige Fenster (Handy quer): scrollen statt abschneiden */
	opacity: 0;
	visibility: hidden; /* geschlossen: nicht anklickbar, nicht per Tab erreichbar */
}

body #menu-canvas.active {
	opacity: 1;
	visibility: visible;
}

/* Modus "white": weiße Fläche statt Foto, kein Overlay. Im Modus "photo" (html.vf-menu-photo)
   gelten stattdessen Foto und Overlay aus Elementor. */
html:not(.vf-menu-photo) body #menu-canvas {
	background: var(--vf-menu-bg);
	background-image: none;
}

html:not(.vf-menu-photo) body #menu-canvas > .elementor-background-overlay {
	display: none;
}

/* Platz für die obere Zeile lassen. Die Zeilen haben eine feste Höhe (siehe unten), unter
   dem letzten Link bleibt weißer Platz. Ist das Fenster niedriger als der Inhalt, scrollt das Menü. */
body #menu-canvas > .elementor-container {
	align-items: flex-start;
	min-height: 100vh;
	min-height: 100dvh; /* Handy: berücksichtigt die ein-/ausfahrende Adressleiste */
	padding: var(--vf-menu-row) var(--vf-menu-gutter) var(--vf-menu-bottom);
	box-sizing: border-box;
}

body #menu-canvas .elementor-column,
body #menu-canvas .elementor-widget-wrap {
	position: static; /* damit das Logo sich am Menü (nicht an der Spalte) ausrichten kann */
}

body #menu-canvas .elementor-column > .elementor-element-populated {
	text-align: left;
	padding: 0;
}

/* ==========================================================================
   Kopfzeile für die ganze Seite (Alos Wunsch: sticky Header mit Logo und Social-Links,
   Header schwarz). Gleicher Aufbau wie im offenen Menü, damit beim Öffnen nichts springt:
   links Hamburger bzw. X, Mitte kleines Logo, rechts Social-Icons, Höhe = --vf-menu-row.
   - schwarze Leiste (.vf-headerbar) und Logo (.vf-logo) kommen aus functions.php
   - Hamburger/X und Social-Icons sind Elementor-Elemente (fixed), hier ausgerichtet
   - das Logo im versteckten Menü (Elementor) wird nicht mehr gebraucht und ausgeblendet
   Beim Öffnen wird die Fläche weiß; die Zeichen wechseln von weiß auf --vf-menu-fg.
   ========================================================================== */
:root {
	--vf-top: 0px;               /* Abstand nach oben: bei angemeldetem Admin die WordPress-Leiste */
	--vf-header-bg: #000;
	--vf-header-fg: #fff;
}

body.admin-bar {
	--vf-top: 32px;
}

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

/* Platz unter der fixierten Leiste, damit der Seiteninhalt nicht darunter verschwindet */
body:not(.elementor-editor-active) {
	padding-top: var(--vf-menu-row);
}

.vf-headerbar {
	position: fixed;
	top: var(--vf-top);
	left: 0;
	right: 0;
	height: var(--vf-menu-row);
	background: var(--vf-header-bg);
	z-index: 90; /* unter dem Menü (95): das weiße Menü deckt die Leiste beim Öffnen ab */
}

/* a.vf-logo: Elementors Kit-Regel ".elementor-kit-7 a" färbt Links sonst in der Sekundärfarbe */
a.vf-logo {
	position: fixed;
	top: var(--vf-top);
	left: 50%;
	transform: translateX(-50%);
	height: var(--vf-menu-row);
	display: flex;
	align-items: center;
	z-index: 100; /* über dem Menü, damit es beim Öffnen sichtbar bleibt (dann schwarz) */
	color: var(--vf-header-fg);
	line-height: 0;
	transition: color 0.25s ease;
}

/* Dünne Linie unter der Kopfzeile (wie bei MONA): geschlossen weiß mit geringer Deckkraft, im
   offenen Menü --vf-menu-fg (schwarz, bzw. weiß im Foto-Modus). Es ist EINE Linie, die die Farbe
   wechselt: die erste Linie des Menüs (Oberlinie des ersten Links) wird unten unsichtbar gemacht.
   Sie liegt dort, wo im Menü die erste Linie war (direkt unter der Kopfzeile, Rand = --vf-menu-gutter). */
.vf-headerline {
	position: fixed;
	top: calc(var(--vf-top) + var(--vf-menu-row));
	left: var(--vf-menu-gutter);
	right: var(--vf-menu-gutter);
	height: 1px;
	background: rgba(255, 255, 255, 0.25);
	z-index: 100; /* über dem Menü, damit sie beim Öffnen sichtbar bleibt (dann schwarz) */
	pointer-events: none;
	transition: background-color 0.25s ease;
}

body.offcanvas-menu-active .vf-headerline {
	background: var(--vf-menu-fg);
}

body.elementor-editor-active .vf-headerline {
	display: none;
}

/* Die erste Linie des Menüs ersetzt .vf-headerline: sie bleibt unsichtbar, der Platz bleibt gleich */
body #menu-canvas .elementor-widget-text-editor p:nth-child(1) {
	border-top-color: transparent;
}

.vf-logo svg {
	display: block;
	height: var(--vf-logo-h);
	width: auto;
}

.vf-logo svg path {
	fill: currentColor;
}

body.offcanvas-menu-active a.vf-logo {
	color: var(--vf-menu-fg);
}

/* Im Elementor-Editor die Leiste nicht anzeigen (der Editor zeigt den Header selbst) */
body.elementor-editor-active .vf-headerbar,
body.elementor-editor-active .vf-logo {
	display: none;
}

/* Das Logo im Menü (Elementor-Widget) ersetzt jetzt .vf-logo */
body #menu-canvas .elementor-widget-icon {
	display: none;
}

/* Hamburger/X und Social-Icons: Ausrichtung auf die Kopfzeile.
   Elementor setzt sie fest (fixed, Rand 2 rem); hier auf Mitte der Zeile und Seitenrand. */
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header {
	top: var(--vf-top);
	margin: 0 0 0 calc(var(--vf-menu-gutter) - 14px); /* 14 px = Klickfläche links vom Zeichen */
	height: var(--vf-menu-row);
	display: flex;
	align-items: center;
}

body:not(.elementor-editor-active) #menu-toggles {
	padding: 0 14px; /* größere Klickfläche für den dünnen Hamburger */
}

/* Tastatur-Fokus sichtbar (Tab-Taste); mit der Maus erscheint kein Rahmen */
body:not(.elementor-editor-active) #menu-toggles:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -4px;
}

body:not(.elementor-editor-active) .elementor-location-header .jump-contact {
	top: var(--vf-top);
	margin: 0 calc(var(--vf-menu-gutter) - 0.45rem - 2px) 0 0; /* 0,45 rem Innenabstand der Icons, 2 px Widget-Rand */
	height: var(--vf-menu-row);
	display: flex;
	align-items: center;
}

/* Kein seitliches Überlaufen der Seite. Auf /contact-us/ ist das Elementor-Formular (Feldbereich mit
   -30 px Rand) auf dem Handy 415 px breit; die Seite wird dadurch 395 statt 375 px breit (live
   genauso). Dann rechnet der Browser das "Fenster" größer, und die fixe Kopfzeile und die Leiste
   unten rutschen (Leiste unten teils außerhalb des Bildes, rechtes Icon abgeschnitten).
   Das hier schneidet nur den überstehenden Rest ab und ändert sonst nichts. Rückgängig machen: Regel löschen. */
html {
	overflow-x: hidden;
}

body {
	overflow-x: clip;
}

/* Kontaktseite (/contact-us/, Elementor-Seite 51): Dort liegen im Seiteninhalt zwei weitere
   Kopien der Icon-Gruppe (Abschnitte 8b10daa und d669ed7, Klasse "jump-contact", je Facebook,
   Instagram, Mail), fest oben rechts. Live liegen sie exakt unter der Gruppe aus der Header-Vorlage
   und fallen nicht auf. Seit die Header-Icons klein sind, schauen die großen Kopien darüber hervor.
   Die Header-Gruppe hat dieselben Links, deshalb werden die Kopien im Seiteninhalt hier
   ausgeblendet (nur diese Elemente: .jump-contact innerhalb der Seite, nicht im Header).
   Sauberer wäre, die zwei Abschnitte im Elementor-Editor der Seite zu löschen; dann kann diese
   Regel weg. */
body [data-elementor-type="wp-page"] .jump-contact {
	display: none;
}

/* Icon-Rahmen von Elementor sind wegen der Zeilenhöhe höher als das Icon und verschieben die
   Mittellinie; als flex haben sie genau die Höhe des Icons. */
body:not(.elementor-editor-active) .elementor-location-header .jump-contact .elementor-icon-wrapper {
	display: flex;
}

/* Farbe: Leiste = weiße Zeichen; offenes Menü = --vf-menu-fg */
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon .elementor-icon,
body:not(.elementor-editor-active) .elementor-location-header .jump-contact .elementor-widget-icon .elementor-icon {
	color: var(--vf-header-fg);
	border-color: var(--vf-header-fg);
	transition: color 0.25s ease, border-color 0.25s ease;
}

body.offcanvas-menu-active .elementor-location-header .pseudo-header .elementor-widget-icon .elementor-icon,
body.offcanvas-menu-active .elementor-location-header .jump-contact .elementor-widget-icon .elementor-icon {
	color: var(--vf-menu-fg);
	border-color: var(--vf-menu-fg);
}

/* Social-Icons: ohne Kreis, kleine Zeichen */
body:not(.elementor-editor-active) .elementor-location-header .jump-contact .elementor-widget-icon .elementor-icon {
	font-size: 1.1rem;
	border-width: 0;
	padding: 0.45rem;
}

/* Hamburger und X: dünn (1-px-Linien) statt Font-Awesome-Zeichen (zu fett), gleiche Stelle und Größe */
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon .elementor-icon {
	font-size: 0;
	border-width: 0;
	padding: 0;
	width: 1.4rem;
	height: 1.4rem;
	position: relative;
	display: block;
}

/* Hamburger (Widget "closed"): drei Linien */
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon.closed .elementor-icon {
	background:
		linear-gradient(currentColor, currentColor) 0 4px / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 50% / 100% 1px no-repeat,
		linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 100% 1px no-repeat;
	animation: vf-icon-closed 0.25s ease;
}

/* X (Widget "open"): zwei gekreuzte Linien */
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon.open .elementor-icon {
	animation: vf-icon-open 0.25s ease;
}

body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon.open .elementor-icon::before,
body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon.open .elementor-icon::after {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform: rotate(45deg);
}

body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon.open .elementor-icon::after {
	transform: rotate(-45deg);
}

/* Beim Tausch Hamburger <-> X ändert sich die Farbe weich mit dem Weiß-Überblenden */
@keyframes vf-icon-open {
	from { color: var(--vf-header-fg); }
	to { color: var(--vf-menu-fg); }
}

@keyframes vf-icon-closed {
	from { color: var(--vf-menu-fg); }
	to { color: var(--vf-header-fg); }
}

@media (prefers-reduced-motion: reduce) {
	a.vf-logo,
	.vf-headerline,
	body:not(.elementor-editor-active) .elementor-location-header .pseudo-header .elementor-widget-icon .elementor-icon,
	body:not(.elementor-editor-active) .elementor-location-header .jump-contact .elementor-widget-icon .elementor-icon {
		transition: none;
		animation: none;
	}
}

/* Links: Treppe + Linie über jedem Link.
   Die Links sind <p>-Absätze im Text-Editor-Widget. Der Einzug (margin-left)
   verschiebt Linie und Text zusammen, die Linie läuft bis zum rechten Rand. */
body #menu-canvas .elementor-widget-text-editor {
	color: var(--vf-menu-fg);
	width: 100%;
	/* Unter 768 px: MONA hat dort 32 px fest (bei 375, 480, 600 und 700 px gemessen).
	   Unsere Schrift mit Faktor 0,87 (siehe unten). Auf sehr schmalen Bildschirmen (320 px)
	   darf sie mit der Breite schrumpfen, damit "3SIX5 EVENT SPACE" samt Pfeil in eine Zeile passt. */
	font-size: min(27.84px, 7.6vw, calc(var(--vf-menu-row-max) * 0.6));
}

/* Ab 768 px nach Messung von mona.net.au (768, 900, 1000, 1280 und 1440 px Breite):
   MONA-Schriftgröße = 4,25 vw + 16 px, Zeilenabstand = 0,75 x MONA-Schrift + 32 px (bis 959 px)
   bzw. + 48 px (ab 960 px; Umschaltstelle zwischen 900 und 1000 gemessen, hier: 960).
   Unsere Schrift (EB Garamond) hat höhere Großbuchstaben als MONAs (0,653 em gegen 0,568 em),
   darum Faktor 0,87: so sind die Großbuchstaben gleich hoch wie bei MONA. */
@media (min-width: 768px) {
	:root {
		--vf-mona-fs: calc(4.25vw + 16px);
	}

	body #menu-canvas .elementor-widget-text-editor {
		font-size: min(calc(var(--vf-mona-fs) * 0.87), calc(var(--vf-menu-row-max) * 0.6));
	}
}

body #menu-canvas .elementor-widget-text-editor,
body #menu-canvas .elementor-widget-text-editor p {
	text-align: left; /* Elementor zentriert auf dem Handy, hier immer linksbündig */
}

body #menu-canvas .elementor-widget-text-editor p {
	margin: 0;
	border-top: 1px solid var(--vf-menu-fg);
	display: flex;
	align-items: center; /* Text und Pfeil senkrecht mittig in der Zeile */
	height: min(64px, var(--vf-menu-row-max)); /* feste Zeilenhöhe wie MONA unter 768 px (32 px Zeile + 2 x 16 px); bei niedrigen Fenstern kleiner (--vf-menu-row-max) */
}

@media (min-width: 768px) {
	body #menu-canvas .elementor-widget-text-editor p {
		height: min(calc(var(--vf-mona-fs) * 0.75 + 32px), var(--vf-menu-row-max)); /* Zeilenabstand wie MONA (siehe oben), bei niedrigen Fenstern kleiner */
	}
}

@media (min-width: 960px) {
	body #menu-canvas .elementor-widget-text-editor p {
		height: min(calc(var(--vf-mona-fs) * 0.75 + 48px), var(--vf-menu-row-max));
	}
}

body #menu-canvas .elementor-widget-text-editor p:nth-child(1) { margin-left: 0; }
body #menu-canvas .elementor-widget-text-editor p:nth-child(2) { margin-left: calc(var(--vf-menu-step) * 1); }
body #menu-canvas .elementor-widget-text-editor p:nth-child(3) { margin-left: calc(var(--vf-menu-step) * 2); }
body #menu-canvas .elementor-widget-text-editor p:nth-child(4) { margin-left: calc(var(--vf-menu-step) * 3); }
body #menu-canvas .elementor-widget-text-editor p:nth-child(5) { margin-left: calc(var(--vf-menu-step) * 4); }
body #menu-canvas .elementor-widget-text-editor p:nth-child(6) { margin-left: calc(var(--vf-menu-step) * 5); }
body #menu-canvas .elementor-widget-text-editor p:nth-child(7) { margin-left: calc(var(--vf-menu-step) * 6); }

body #menu-canvas .elementor-widget-text-editor p a {
	display: flex;
	align-items: center;
	justify-content: space-between; /* Text links, Pfeil ganz rechts */
	flex: 1 1 auto;
	padding: 0;
	color: var(--vf-menu-fg);
	font-family: var(--vf-menu-font);
	line-height: 1.1;
	text-decoration: none; /* Großschreibung steht im Text selbst, so bleibt "FAQs" mit kleinem s */
	white-space: nowrap; /* jeder Punkt bleibt in einer Zeile */
}

/* Schriftfarbe im Menü gegen Inline-Farben durchsetzen: Der Elementor-Editor (Reiter "Visuell") und
   Staging-Klone schreiben style="color: #ffffff;" an <span> und <a>, das wäre weiß auf weißem Menü.
   Alle Texte im Menü-Textfeld folgen --vf-menu-fg (Modus white: schwarz, Modus photo: weiß), auch
   .vf-menu-soon und <small>. !important ist nötig, weil Inline-Styles sonst gewinnen. */
body #menu-canvas .elementor-widget-text-editor,
body #menu-canvas .elementor-widget-text-editor * {
	color: var(--vf-menu-fg) !important;
}

/* Menüpunkt ohne Link ("CATERING coming soon", Klasse vf-menu-soon, bis die Seite steht).
   Sieht aus wie die Links (gleiche Schrift, Größe, Linie, Treppenstufe, Animation, denn er steckt in
   derselben <p>-Zeile), ist aber kein Link: kein Pfeil, kein Hover, kein Zeiger, per Tab nicht erreichbar.
   "coming soon" steht klein und gedämpft in derselben Zeile (Grundlinie bündig, weil beides Fließtext
   in einer Zeile ist). Größe: 0,28 em, mindestens 11 px, damit es am Handy lesbar bleibt (dort wären
   0,28 em nur ca. 8 px). Rückgängig: die Zeile in Elementor zum Link machen, dann ist die Regel unbenutzt. */
body #menu-canvas .elementor-widget-text-editor .vf-menu-soon {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	color: var(--vf-menu-fg);
	font-family: var(--vf-menu-font);
	line-height: 1.1;
	white-space: nowrap;
	cursor: default;
}

body #menu-canvas .elementor-widget-text-editor .vf-menu-soon small {
	margin-left: 0.7em;
	font-size: max(0.28em, 11px);
	letter-spacing: 0.08em;
	opacity: 0.55;
}

/* Leerer Absatz im Menü (z. B. nach dem Tippen im Visuell-Reiter): ausblenden, damit keine leere Zeile mit Linie entsteht */
body #menu-canvas .elementor-widget-text-editor p.vf-menu-empty {
	display: none;
}

/* Leerer Platzhalter-Absatz (<p><br></p>) im Startbereich der Startseite einklappen, auf allen
   Breiten. Die Klasse "vf-empty-p" setzt vf-redesign.js nur bei Absätzen ohne Text (vorher:
   p:has(> br:only-child), das auch Absätze MIT Text und einem <br> erwischt hat). */
body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-widget-text-editor p.vf-empty-p {
	display: none;
}

/* ==========================================================================
   Startseite, erster Bildschirm (ab 768 px Breite) – ohne das große Doppel-Logo (Runde 8)
   Alo (15.10.): Das große Doppel-Logo (Vin & Flower + 3six5) über "Unforgettable events start at Perth's most
   stylish events venue" fliegt raus ("overload of logos"). Es wird per CSS ausgeblendet (display: none, auf
   allen Breiten); die Logos in den beiden Kacheln bleiben. Das Bild-Widget selbst bleibt in Elementor.
   Die Kopfzeile (--vf-menu-row, ab 560 px 88 px) und die fixe Leiste unten (--vf-footer-h) nehmen Platz weg. Ziel: Satz und beide Kacheln
   (Vin & Flower, 3six5) samt weißem Rahmen komplett im ersten Bildschirm, über der Leiste, und GLEICHMÄSSIG
   verteilt: Abstand Kopfzeile -> Satz, Satz -> Kacheln und Kacheln -> Leiste sind gleich (space-evenly).
   - Der Abschnitt ist so hoch wie das Fenster minus Kopfzeile minus Leiste (bei angemeldetem Admin
     zusätzlich minus WordPress-Leiste, --vf-top; mindestens so hoch, wie Satz + Kacheln + drei Abstände von
     je ca. 24 px brauchen, damit er nie in den nächsten Abschnitt ragt).
   - Gestrafft wird die Luft aus Elementor: leerer Platzhalter-Absatz vor dem Satz, Außenabstände
     der Kachel-Spalten, Innenabstände des Abschnitts.
   SICHTBAR GLEICHE ABSTÄNDE: Die Zeilenbox des Satzes (48 px) hat leeren Rand (Schrift 10,3 px unter der Oberkante,
   3,1 px über der Unterkante). Der Kasten wird per negativem Außenabstand auf die sichtbare Schrift gekürzt,
   dann sind die drei Abstände mit space-evenly auch sichtbar gleich (vorher: 12 px oben, 4 px + 8 px Ausgleich unten).
   Die Rechnung für die Untergrenze nutzt feste Maße: Satz 34,6 px (eine Zeile), Kacheln 310 px (768 bis 1099 px Breite: 374 px).
   Ändern sich Satz-Schrift oder Kachelgröße, --vf-home-sentence-h und --vf-home-tiles-h unten anpassen.
   Rückgängig machen (Logo wieder zeigen): Stand vor Runde 8 aus Git holen (dieser Block rechnete mit Logo,
   Obergrenze für den Abstand und schrumpfendem Logo).
   ========================================================================== */
body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image:first-child {
	display: none;
}

@media (min-width: 768px) {
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full {
		--vf-home-sentence-h: 34.6px;  /* Satz: sichtbare Schrift (48 px Zeilenbox minus 10,3 oben minus 3,1 unten), eine Zeile */
		--vf-home-tiles-h: 310px;      /* Kacheln samt Rahmen (768 bis 1099 px Breite: 374 px) */
		--vf-home-gap-min: 24px;       /* kleinster Abstand (jeweils drei Abstände: oben, zwischen, unten) */

		/* Platz zwischen Kopfzeile und Leiste; Untergrenze = Satz + Kacheln + 3 Mindestabstände */
		--vf-home-h: max(
			calc(100vh - var(--vf-top) - var(--vf-menu-row) - var(--vf-footer-h)),
			calc(var(--vf-home-sentence-h) + var(--vf-home-tiles-h) + 3 * var(--vf-home-gap-min))
		);

		height: var(--vf-home-h);
		padding-top: 0;
		padding-bottom: 0;
	}

	/* Spalte und Fläche übernehmen die Abschnittshöhe, statt mit dem Inhalt zu wachsen */
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full > .elementor-container > .elementor-column {
		height: 100%;
		min-height: 0;
	}

	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full > .elementor-container > .elementor-column > .elementor-widget-wrap {
		height: 100%;
		min-height: 0;
		flex-direction: column;
		flex-wrap: nowrap;
		justify-content: space-evenly;    /* oben, zwischen Satz und Kacheln, unten: gleich große Abstände */
		align-content: stretch;
		row-gap: 0;
		padding: 0;
	}

	/* Satz und Kacheln werden nie gestaucht */
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-widget-text-editor,
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-inner-section {
		flex: 0 0 auto;
	}

	/* Satz: Der Kasten des Satzes endet an der SICHTBAREN Schrift (Semplicita Pro, 32 px, Zeilenbox 48 px, gemessen
	   per canvas: Schrift beginnt 10,3 px unter der Oberkante und endet 3,1 px über der Unterkante, mit Unterlängen).
	   Negative Außenabstände schneiden den leeren Rand weg; damit sind die drei Abstände (space-evenly) sichtbar gleich.
	   Der Abstand unter dem Satz aus Elementor entfällt (der leere Platzhalter-Absatz wird weiter oben eingeklappt). */
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-widget-text-editor {
		margin: -10.3px 0 -3.1px;
	}

	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-widget-text-editor p {
		margin-bottom: 0;
	}

	/* Kachel-Spalten: oben/unten kein Außenabstand mehr (links/rechts unverändert) */
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full .elementor-inner-section .elementor-column > .elementor-widget-wrap {
		margin-top: 0;
		margin-bottom: 0;
	}
}

/* Bei 768 bis 1099 px Breite sind die Kacheln höher (374 statt 310 px) */
@media (min-width: 768px) and (max-width: 1099px) {
	body.home [data-elementor-type="wp-page"] > .elementor-top-section.elementor-section-height-full {
		--vf-home-tiles-h: 374px;
	}
}

/* ==========================================================================
   Footer schwarz (Alos Wunsch: Footer static und schwarz)
   1) Schmale fixe Leiste unten (.vf-footerbar, aus functions.php), immer sichtbar: links Adresse,
      in der Mitte die Telefonnummer (nur auf breiteren Fenstern), rechts "Enquire now".
   2) Der volle Footer aus Elementor (Vorlage 124: Copyright-Zeile, Lizenz, Warnhinweis zum
      Liquor Control Act) steht unverändert am Ende jeder Seite, nur schwarz mit weißer Schrift.
   ========================================================================== */
:root {
	/* Höhe der fixen Leiste (Runde 10: Alo wollte sie "maybe 50% thicker"). ZURÜCKSTELLEN: wide 36px, narrow 40px
	   (und unter "Enquire now" die Knopf-Werte unten). Ab 920 px (Adresse, Telefon, Knopf) gilt "wide", darunter "narrow". */
	--vf-footer-h-wide: 54px;   /* vorher 36 px */
	--vf-footer-h-narrow: 48px; /* vorher 40 px */
	--vf-footer-h: var(--vf-footer-h-narrow);
	--vf-footer-bg: #000;
	--vf-footer-fg: #fff;
}

@media (min-width: 920px) {
	:root {
		--vf-footer-h: var(--vf-footer-h-wide);
	}
}

.vf-footerbar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: var(--vf-footer-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 var(--vf-menu-gutter);
	background: var(--vf-footer-bg);
	color: var(--vf-footer-fg);
	font-family: Dosis, sans-serif;
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	z-index: 90; /* wie die Kopfzeile unter dem Menü (95): das offene Menü deckt sie ab */
}

body .vf-footerbar a {
	color: var(--vf-footer-fg);
	text-decoration: none;
}

/* Unter 920 px steht links die Telefonnummer, rechts "Enquire now" (Alo 16.10.: "swap the address to the phone number");
   die Adresse ist dort ausgeblendet. Ab 920 px: Adresse links, Telefonnummer genau in der Seitenmitte, rechts "Enquire now". */
body .vf-footerbar a.vf-footerbar__address {
	display: none;
	flex: 0 1 auto;      /* nur so breit wie der Text */
	margin-right: auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body .vf-footerbar a.vf-footerbar__phone {
	display: block;
	margin-right: auto;  /* schiebt "Enquire now" nach rechts */
	padding: 8px 0;      /* größere Tippfläche am Handy (Leiste ist 40 px hoch) */
	white-space: nowrap;
}

/* 920 px: gemessen (13 px Schrift, Semplicita Pro): volle Adresse 358 px (ab 24 px Rand bis 382 px), Nummer 98 px, Knopf 134 px.
   Die Nummer beginnt bei (Breite - 98) / 2; mit mindestens ca. 24 px Abstand zur Adresse passt sie ab 910 px,
   bei 920 px sind es 29 px. Davor war die Schwelle für die Adresse 550 px (Kurzform darunter); die Kurzform entfällt. */
@media (min-width: 920px) {
	body .vf-footerbar a.vf-footerbar__address {
		display: block;
	}

	body .vf-footerbar a.vf-footerbar__phone {
		position: absolute;
		left: 50%;
		margin-right: 0;
		padding: 0;
		transform: translateX(-50%);
	}
}

body .vf-footerbar a.vf-footerbar__phone:hover,
body .vf-footerbar a.vf-footerbar__phone:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .vf-footerbar a.vf-footerbar__address:hover,
body .vf-footerbar a.vf-footerbar__address:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* "Enquire now": deutlich als Knopf (weißer Rahmen), beim Überfahren weiß gefüllt.
   Größer seit Runde 10: Höhe = Leiste minus 14 px (vorher minus 12 px), mehr Innenabstand und etwas größere Schrift
   (unter 920 px 13 px, ab 920 px 14 px; vorher 12 px). Adresse und Telefon behalten 13 px und stehen senkrecht mittig. */
body .vf-footerbar a.vf-footerbar__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: calc(var(--vf-footer-h) - 14px);
	padding: 0 1.1rem;
	border: 1px solid var(--vf-footer-fg);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.8125rem;
	transition: background-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 920px) {
	body .vf-footerbar a.vf-footerbar__cta {
		padding: 0 1.5rem;
		font-size: 0.875rem;
		letter-spacing: 0.12em;
	}
}

body .vf-footerbar a.vf-footerbar__cta:hover,
body .vf-footerbar a.vf-footerbar__cta:focus-visible {
	background: var(--vf-footer-fg);
	color: var(--vf-footer-bg);
}

body.elementor-editor-active .vf-footerbar {
	display: none;
}

/* Voller Footer: schwarz, weiße gut lesbare Schrift. Unten bekommt er so viel Platz wie die
   fixe Leiste hoch ist, damit die Leiste am Seitenende nichts verdeckt (Lizenz-/Warntext). */
body:not(.elementor-editor-active) .elementor-location-footer {
	background: var(--vf-footer-bg);
	color: var(--vf-footer-fg);
	padding-bottom: var(--vf-footer-h);
}

/* ".elementor-element" zusätzlich, damit die Regel stärker ist als die Widget-Regeln aus Elementor */
body .elementor-location-footer .elementor-element.elementor-widget-text-editor {
	color: var(--vf-footer-fg);
	font-size: 0.875rem; /* vorher 12 px beim Lizenztext: zu klein */
	line-height: 1.6;    /* vorher bei der Copyright-Zeile 1 px */
}

body .elementor-location-footer a {
	color: var(--vf-footer-fg);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body .elementor-location-footer a:hover,
body .elementor-location-footer a:focus-visible {
	text-decoration: none;
}

/* ==========================================================================
   Animation (wie MONA): Fläche blendet schnell zu Weiß ein, danach erscheinen die
   Links von oben nach unten nacheinander. Schließen: schneller, ohne Staffelung.
   "transition" braucht !important, weil Elementor dort selbst !important setzt.
   "visibility" wird erst nach dem Ausblenden auf hidden gesetzt (Verzögerung).
   ========================================================================== */

/* zu: 0,15 s ausblenden */
body #menu-canvas {
	transition: opacity 0.15s ease, visibility 0s linear 0.15s !important;
}

/* auf: 0,25 s einblenden */
body #menu-canvas.active {
	transition: opacity 0.25s ease, visibility 0s linear 0s !important;
}

/* Links: Startzustand (unsichtbar, 1 rem höher). Beim Schließen blenden sie schnell
   aus; die Position springt erst danach zurück, ohne Verzögerung pro Link. */
body #menu-canvas .elementor-widget-text-editor p {
	opacity: 0;
	transform: translateY(-1rem);
	transition: opacity 0.15s ease, transform 0s linear 0.15s;
}

body #menu-canvas.active .elementor-widget-text-editor p {
	opacity: 1;
	transform: translateY(0);
	transition: opacity 0.6s ease, transform 0.75s cubic-bezier(0.22, 1, 0.36, 1); /* vorher 0,45 s / 0,55 s */
}

/* Staffelung beim Öffnen: 0,2 s warten, dann alle 0,13 s ein Link von oben nach unten (vorher 0,09 s) */
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(1) { transition-delay: 0.2s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(2) { transition-delay: 0.33s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(3) { transition-delay: 0.46s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(4) { transition-delay: 0.59s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(5) { transition-delay: 0.72s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(6) { transition-delay: 0.85s; }
body #menu-canvas.active .elementor-widget-text-editor p:nth-child(7) { transition-delay: 0.98s; }

/* Wer weniger Bewegung eingestellt hat: nur einblenden, nichts rutscht */
@media (prefers-reduced-motion: reduce) {
	body #menu-canvas,
	body #menu-canvas.active {
		transition: none !important;
	}

	body #menu-canvas .elementor-widget-text-editor p,
	body #menu-canvas.active .elementor-widget-text-editor p {
		transform: none;
		transition: none;
	}

	body #menu-canvas.active .elementor-widget-text-editor p {
		opacity: 1;
	}
}

/* ==========================================================================
   Pfeil am Zeilenende (wie das "+" bei MONA) und Hover
   Der Pfeil ist eine dünne SVG-Linie, als Maske gezeichnet: Farbe = --vf-menu-fg, unabhängig
   von der Schrift. Er hängt am Link (a::after), die ganze Zeile ist damit klickbar.
   Hover (nur mit Maus, hover: hover): der Text rückt 1 rem nach rechts (Einzug links),
   der Pfeil wandert 0,5 rem mit. Per Tab-Taste (:focus-visible) dasselbe.
   ========================================================================== */
body #menu-canvas .elementor-widget-text-editor p a {
	transition: padding-left 0.3s ease;
}

body #menu-canvas .elementor-widget-text-editor p a::after {
	content: "";
	flex: 0 0 auto;
	width: 0.65em;  /* klein und dünn, ähnlich dem "+" bei MONA (spart Platz für die Treppe) */
	height: 0.35em;
	margin-left: 0.3em;
	margin-right: 0.5rem; /* Platz, damit der Pfeil beim Hover nicht über die Linie hinausragt */
	background-color: var(--vf-menu-fg);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h41M33 2l9 9-9 9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 22' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 11h41M33 2l9 9-9 9' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 0.3s ease;
}

@media (hover: hover) {
	body #menu-canvas .elementor-widget-text-editor p a:hover {
		padding-left: 1rem;
	}

	body #menu-canvas .elementor-widget-text-editor p a:hover::after {
		transform: translateX(0.5rem);
	}
}

body #menu-canvas .elementor-widget-text-editor p a:focus-visible {
	padding-left: 1rem;
}

body #menu-canvas .elementor-widget-text-editor p a:focus-visible::after {
	transform: translateX(0.5rem);
}

@media (prefers-reduced-motion: reduce) {
	body #menu-canvas .elementor-widget-text-editor p a,
	body #menu-canvas .elementor-widget-text-editor p a::after {
		transition: none;
	}
}

/* ==========================================================================
   Schwarz-Weiß-Grundlage (Runde 5a) – Alos Wunsch: "a whole black and white theme"
   WAS:  Die rosé Akzentfarbe (#EFC2B4) wird per CSS zu Weiß, Links im Seiteninhalt bekommen
         eine dünne Unterstreichung, Buttons kehren beim Überfahren Schwarz/Weiß um, die
         zwei Startseiten-Kacheln sind farblos und gleich dick.
   WARUM: Die Farbe steckt zentral in Elementor (Site Settings, "Sekundär" = #EFC2B4). Wir
         dürfen Elementor nicht ändern, also überschreibt dieses CSS sie mit höherer
         Spezifität (body.elementor-kit-7 statt .elementor-kit-7).
   HINWEIS: Die Site Settings in Elementor zeigen weiterhin #EFC2B4. Das soll später dort von
         Hand auf #FFFFFF geändert werden; dann kann Punkt 1 hier entfallen.
   RÜCKGÄNGIG: Den ganzen Block bis zum Ende der Datei löschen (oder einzelne Punkte 1-4).
   Fotos werden NICHT entsättigt. Der Seitenübergang (e-page-transition, orange) ist auf der
   Seite nicht aktiv (kein Element im HTML), daher keine Regel dafür.
   ========================================================================== */

/* 1. Zentrale Farbe: alles, was var(--e-global-color-secondary) nutzt (Links, Button-Hover,
      aktives Plus im FAQ-Akkordeon), wird weiß. */
body.elementor-kit-7 {
	--e-global-color-secondary: #fff;
}

/* 2. Links im Seiteninhalt (Text-Editor-Widgets, Akkordeon-Inhalte): dünne Unterstreichung.
      Nicht betroffen: Menü, Kopfzeile, fixe Leiste, Footer, Social-Icons, Kacheln und
      andere Bild-/Icon-Links (a:not(:has(img, svg, i)) = nur Links mit Text). */
body.elementor-kit-7 #content .elementor-widget-text-editor a:not(:has(img, svg, i)),
body.elementor-kit-7 #content .elementor-tab-content a:not(:has(img, svg, i)) {
	color: #fff;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: opacity 0.2s ease;
}

body.elementor-kit-7 #content .elementor-widget-text-editor a:not(:has(img, svg, i)):hover,
body.elementor-kit-7 #content .elementor-tab-content a:not(:has(img, svg, i)):hover {
	opacity: 0.7;
}

/* 3. Buttons: in Ruhe wie bisher (schwarz, weiße Schrift, Rahmen). Beim Überfahren/Fokus
      wird der Hintergrund weiß (durch Punkt 1), also muss die Schrift schwarz werden. */
body.elementor-kit-7 button:hover,
body.elementor-kit-7 button:focus,
body.elementor-kit-7 input[type="button"]:hover,
body.elementor-kit-7 input[type="button"]:focus,
body.elementor-kit-7 input[type="submit"]:hover,
body.elementor-kit-7 input[type="submit"]:focus,
body.elementor-kit-7 .elementor-button:hover,
body.elementor-kit-7 .elementor-button:focus {
	background-color: #fff;
	color: #000;
}

/* 4. Startseiten-Kacheln: beide gleich, ohne Farbe. Elementor färbt die Überlagerung links
      pfirsich (#FFD1C2) und rechts grau (#686767) und macht sie beim Überfahren (70 %)
      sichtbar. Jetzt: weiß, 4 % in Ruhe, 11 % beim Überfahren, Übergangszeit (0,6 s) bleibt.
      Rahmen beide 4 px (vorher links 5 px, rechts 3 px). */
body.elementor-kit-7 .elementor-5 .elementor-element-3bcb4b1 > .elementor-element-populated > .elementor-background-overlay,
body.elementor-kit-7 .elementor-5 .elementor-element-fe493ee > .elementor-element-populated > .elementor-background-overlay {
	background-color: #fff;
	opacity: 0.04;
	filter: none;
}

body.elementor-kit-7 .elementor-5 .elementor-element-3bcb4b1:hover > .elementor-element-populated > .elementor-background-overlay,
body.elementor-kit-7 .elementor-5 .elementor-element-fe493ee:hover > .elementor-element-populated > .elementor-background-overlay {
	opacity: 0.11;
	filter: none;
}

body.elementor-kit-7 .elementor-5 .elementor-element-3bcb4b1 > .elementor-element-populated,
body.elementor-kit-7 .elementor-5 .elementor-element-fe493ee > .elementor-element-populated {
	border-width: 4px;
}

/* ==========================================================================
   Neue Unterseite "Vin & Flower" – CSS-Bausteine (Runde 5b, Präfix vf-vp-)
   WAS:  Das Aussehen der neuen Unterseite kommt aus diesen Klassen. Die Elementor-Vorlage
         (vf-vorlagen/vf-vinflower-neu-v1.json) setzt nur die Klassen (Feld "CSS-Klassen" im
         Reiter Erweitert), keine Farben/Schriften in Elementor.
   WARUM: Layout, Schrift und Abstände bleiben an einer Stelle änderbar; die Klassen lassen sich
         später für 3six5 und appetiteevents.com.au wiederverwenden (Werte als Variablen).
   WIRKT NUR auf Elemente mit diesen Klassen. Einzige Ausnahme: die Seitenfläche (schwarz statt
   Banner-Bild), erkannt per body:has(.vf-vp-sec).
   Klassen: vf-vp-sec (jeder Abschnitt), vf-vp-hero, vf-vp-eyebrow, vf-vp-label, vf-vp-title,
   vf-vp-h2, vf-vp-lead, vf-vp-btns (Spalte mit Knöpfen), vf-vp-btn-solid, vf-vp-btn-outline,
   vf-vp-cols (2 Spalten), vf-vp-facts (+ -num, -label, -sub), vf-vp-list, vf-vp-meta,
   vf-vp-incl (+ -num, -title, -text), vf-vp-photos (4 Kacheln 4:5, ab 1025 px; darunter 2x2), vf-vp-more, vf-vp-cta,
   vf-vp-head (Kopfzeile mit Link rechts), vf-vp-pt0 / vf-vp-pb0 (Abstand oben/unten null),
   vf-vp-pt-m (Abstand oben klein, 32 px).
   RÜCKGÄNGIG: Block bis zum Dateiende löschen. Ohne die Klassen im Elementor ändert sich nichts.
   ========================================================================== */
:root {
	--vf-vp-w: 1084px;                          /* Breite des Inhalts (wie im Entwurf bei 1440 px) */
	--vf-vp-gutter: clamp(20px, 5vw, 48px);      /* Seitenrand, wenn das Fenster schmaler ist */
	--vf-vp-pad: clamp(36px, 4.5vw, 64px);       /* Abstand oben/unten je Abschnitt */
	--vf-vp-line: rgba(255, 255, 255, 0.28);     /* Rahmen und Trennlinien */
	--vf-vp-muted: rgba(255, 255, 255, 0.68);    /* gedämpfte Schrift */
	--vf-vp-serif: "EB Garamond", Georgia, "Times New Roman", serif;
	--vf-vp-sans: Dosis, sans-serif;
}

/* Seite insgesamt schwarz (Elementor-Kit legt sonst ein Foto hinter die Seite) */
html body.elementor-kit-7:has(.vf-vp-sec) {
	background-image: none;
	background-color: #000;
}

/* --- Abschnitt: Breite, Abstand, Raster ------------------------------------ */
body .elementor-section.vf-vp-sec {
	padding: var(--vf-vp-pad) 0;
	background: transparent;
}

body .elementor-section.vf-vp-sec.vf-vp-pt0 { padding-top: 0; }
body .elementor-section.vf-vp-sec.vf-vp-pb0 { padding-bottom: 0; }
body .elementor-section.vf-vp-sec.vf-vp-pt-m { padding-top: 32px; }
body .elementor-section.vf-vp-sec.vf-vp-head { padding-bottom: 40px; } /* Abstand Kopfzeile -> Boxen */

body .elementor-section.vf-vp-sec > .elementor-container {
	display: grid;
	width: min(var(--vf-vp-w), calc(100% - 2 * var(--vf-vp-gutter)));
	max-width: none;
	margin: 0 auto;
}

/* Standard: eine Spalte. :where() hat keine Spezifität, damit die Raster unten (Eckdaten, Boxen ...) gewinnen. */
:where(.vf-vp-sec) > .elementor-container {
	grid-template-columns: minmax(0, 1fr);
}

body .vf-vp-sec > .elementor-container > .elementor-column {
	width: auto;
	min-width: 0;
}

body .vf-vp-sec .elementor-widget-wrap {
	padding: 0;
}

body .vf-vp-sec .elementor-widget,
body .vf-vp-sec .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* --- Kleine Schrift: Eyebrow, Label, Meta ---------------------------------- */
body .vf-vp-sec .elementor-widget.vf-vp-eyebrow,
body .vf-vp-sec .elementor-widget.vf-vp-label,
body .vf-vp-sec .elementor-widget.vf-vp-meta {
	font-family: var(--vf-vp-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--vf-vp-muted);
}

body .vf-vp-sec .vf-vp-eyebrow p,
body .vf-vp-sec .vf-vp-label p,
body .vf-vp-sec .vf-vp-meta p {
	margin: 0;
	font: inherit;
	letter-spacing: inherit;
	color: inherit;
}

body .vf-vp-sec .elementor-widget.vf-vp-label { margin-bottom: 28px; }
body .vf-vp-sec .elementor-widget.vf-vp-eyebrow { margin-bottom: 20px; }

body .vf-vp-sec .elementor-widget.vf-vp-meta {
	margin-top: 32px;
	letter-spacing: 0.22em;
	line-height: 2.1;
	color: rgba(255, 255, 255, 0.55);
}

/* --- Überschriften (EB Garamond, Großbuchstaben) ---------------------------- */
body .vf-vp-sec .vf-vp-title .elementor-heading-title,
body .vf-vp-sec .vf-vp-h2 .elementor-heading-title {
	font-family: var(--vf-vp-serif);
	font-weight: 400;
	text-transform: uppercase;
	color: #fff;
	margin: 0;
}

body .vf-vp-sec .vf-vp-title .elementor-heading-title {
	font-size: clamp(52px, 8.5vw, 128px);
	line-height: 0.95;
	letter-spacing: 0.005em;
}

body .vf-vp-sec .vf-vp-h2 .elementor-heading-title {
	font-size: clamp(34px, 4.2vw, 56px);
	line-height: 1.05;
}

/* Fließtext in den Bausteinen */
body .vf-vp-sec .elementor-widget-text-editor {
	font-family: var(--vf-vp-sans);
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

body .vf-vp-sec .elementor-widget-text-editor p {
	margin: 0 0 1.1em;
}

body .vf-vp-sec .elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Hero-Untertitel */
body .vf-vp-sec .elementor-widget.vf-vp-lead {
	margin-top: 22px;
	font-family: var(--vf-vp-serif);
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.3;
	color: #fff;
}

/* --- Hero ------------------------------------------------------------------ */
body .elementor-section.vf-vp-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: clamp(520px, 78vh, 820px);
	padding: 0 0 clamp(40px, 6vw, 80px);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-attachment: scroll;
}

/* Dunkle Überlagerung: oben ca. 55 %, unten ca. 92 % schwarz (Bild bleibt in Elementor einstellbar) */
body .elementor-section.vf-vp-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.92) 100%);
	pointer-events: none;
}

body .elementor-section.vf-vp-hero > .elementor-container {
	position: relative;
	z-index: 1;
}

/* --- Knöpfe ---------------------------------------------------------------- */
body .vf-vp-sec .vf-vp-btns > .elementor-widget-wrap {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 36px;
}

body .vf-vp-sec .vf-vp-btns .elementor-widget-wrap > .elementor-widget {
	width: auto;
}

body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button,
body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
	font-family: var(--vf-vp-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button {
	background-color: #fff;
	color: #000;
}

body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
	background-color: transparent;
	color: #fff;
}

/* Hover/Fokus jeweils umgekehrt (überschreibt die Button-Regeln aus Runde 5a) */
body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button:hover,
body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button:focus {
	background-color: transparent;
	color: #fff;
}

body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button:hover,
body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button:focus {
	background-color: #fff;
	color: #000;
}

/* --- Zwei Spalten (Intro, "Der Raum") ----------------------------------------- */
body .vf-vp-cols > .elementor-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: clamp(32px, 6vw, 86px);
	align-items: start;
}

body .vf-vp-cols.vf-vp-cols-center > .elementor-container {
	align-items: center;
}

body .vf-vp-cols .elementor-widget-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* --- Eckdaten-Boxen ---------------------------------------------------------- */
body .vf-vp-facts > .elementor-container {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-top: 1px solid var(--vf-vp-line);
	border-left: 1px solid var(--vf-vp-line);
}

body .vf-vp-facts > .elementor-container > .elementor-column {
	padding: 30px clamp(18px, 2.2vw, 28px) 32px;
	border-right: 1px solid var(--vf-vp-line);
	border-bottom: 1px solid var(--vf-vp-line);
}

body .vf-vp-sec .elementor-widget.vf-vp-facts-num .elementor-heading-title {
	font-family: var(--vf-vp-serif);
	font-size: clamp(30px, 4vw, 52px);
	font-weight: 400;
	line-height: 1.1;
	text-transform: none;
	color: #fff;
	margin: 0 0 18px;
}

body .vf-vp-sec .elementor-widget.vf-vp-facts-label {
	margin-bottom: 8px;
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #fff;
}

body .vf-vp-sec .elementor-widget.vf-vp-facts-sub {
	font-size: 15px;
	line-height: 1.4;
	color: var(--vf-vp-muted);
}

/* Abstand Überschrift -> Liste */
body .vf-vp-sec .elementor-widget.vf-vp-list { margin-top: 36px; }

/* --- Liste mit Nummern 01-04 ---------------------------------------------------- */
body .vf-vp-sec .vf-vp-list ul {
	counter-reset: vf-vp-n;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--vf-vp-line);
}

body .vf-vp-sec .vf-vp-list li {
	counter-increment: vf-vp-n;
	display: flex;
	align-items: baseline;
	gap: 24px;
	margin: 0;
	padding: 20px 0;
	border-bottom: 1px solid var(--vf-vp-line);
	font-size: 18px;
	line-height: 1.4;
	color: #fff;
}

body .vf-vp-sec .vf-vp-list li::before {
	content: counter(vf-vp-n, decimal-leading-zero);
	flex: 0 0 auto;
	min-width: 18px;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.5);
}

/* --- Kopfzeile mit Link rechts (Inklusive) --------------------------------------- */
body .vf-vp-head > .elementor-container {
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	column-gap: 32px;
}

body .vf-vp-head > .elementor-container > .elementor-column:last-child {
	padding-bottom: 10px;
}

/* --- Textlink mit Unterstrich und Pfeil -------------------------------------------- */
body .vf-vp-sec .elementor-widget.vf-vp-more {
	font-size: 13px;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

body.elementor-kit-7 #content .elementor-widget.vf-vp-more a {
	display: inline-block;
	padding-bottom: 8px;
	border-bottom: 1px solid #fff;
	font-family: var(--vf-vp-sans);
	font-weight: 400;
	text-decoration: none;
	color: #fff;
}

body .vf-vp-sec .vf-vp-more p {
	margin: 0;
}

/* --- Inklusive: 5 Boxen ------------------------------------------------------------- */
body .vf-vp-incl > .elementor-container {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
}

body .vf-vp-incl > .elementor-container > .elementor-column {
	padding: 26px 24px 32px;
	border: 1px solid var(--vf-vp-line);
}

body .vf-vp-sec .elementor-widget.vf-vp-incl-num {
	margin-bottom: 44px;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: rgba(255, 255, 255, 0.5);
}

body .vf-vp-sec .elementor-widget.vf-vp-incl-title .elementor-heading-title {
	margin: 0 0 18px;
	font-family: var(--vf-vp-serif);
	font-size: clamp(20px, 2.1vw, 28px);
	font-weight: 400;
	line-height: 1.1;
	text-transform: uppercase;
	color: #fff;
}

body .vf-vp-sec .elementor-widget.vf-vp-incl-text {
	font-size: 15px;
	line-height: 1.65;
	color: var(--vf-vp-muted);
}

/* --- Fotoraster: gleich große Hochformat-Kacheln (4:5) ---------------------------------------------
   Ab 1025 px 4 Kacheln nebeneinander, bis 1024 px (auch Handy) 2 x 2. Abstand 12 px, Bilder füllen die
   Kachel (object-fit: cover). Vorher: groß links, 2 klein in der Mitte, 1 hoch rechts (Stand fafbd05). */
body .vf-vp-photos > .elementor-container {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

body .vf-vp-photos > .elementor-container > .elementor-column {
	aspect-ratio: 4 / 5;
	overflow: hidden;
}

body .vf-vp-photos .elementor-widget-wrap,
body .vf-vp-photos .elementor-widget,
body .vf-vp-photos .elementor-widget-container {
	height: 100%;
}

body .vf-vp-photos .elementor-widget-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 1025px) {
	body .vf-vp-photos > .elementor-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* --- Abschluss: mittig, Linie oben ------------------------------------------------------- */
body .elementor-section.vf-vp-cta {
	padding: clamp(64px, 9vw, 128px) 0;
	border-top: 1px solid var(--vf-vp-line);
	text-align: center;
}

body .vf-vp-cta .elementor-widget-text-editor {
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
}

body .vf-vp-cta .elementor-widget.vf-vp-label {
	margin-bottom: 24px;
}

body .vf-vp-cta .elementor-widget.vf-vp-lead {
	margin-top: 28px;
	font-family: var(--vf-vp-sans);
	font-size: 18px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
}

body .vf-vp-cta .vf-vp-h2 .elementor-heading-title {
	max-width: 10em;
	margin-left: auto;
	margin-right: auto;
}

body .vf-vp-cta .vf-vp-btns > .elementor-widget-wrap {
	justify-content: center;
}

/* --- Tablet (bis 1100 px): eng werdende Raster umbrechen ---------------------------------- */
@media (max-width: 1100px) {
	body .vf-vp-incl > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body .vf-vp-incl > .elementor-container > .elementor-column:last-child {
		grid-column: 1 / -1; /* 5 Boxen: die letzte läuft über die ganze Breite */
	}
}

@media (max-width: 1024px) {
	body .vf-vp-facts > .elementor-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* --- Handy (bis 767 px) -------------------------------------------------------------------- */
@media (max-width: 767px) {
	body .vf-vp-cols > .elementor-container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	body .vf-vp-incl > .elementor-container {
		grid-template-columns: minmax(0, 1fr);
	}

	body .vf-vp-incl > .elementor-container > .elementor-column {
		padding: 22px 22px 26px;
	}

	body .vf-vp-sec .elementor-widget.vf-vp-incl-num {
		margin-bottom: 36px;
	}

	body .vf-vp-head > .elementor-container {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 20px;
	}

	body .vf-vp-head > .elementor-container > .elementor-column:last-child {
		padding-bottom: 0;
	}

	body .vf-vp-sec .vf-vp-btns > .elementor-widget-wrap {
		flex-direction: column;
		align-items: stretch;
	}

	body .vf-vp-sec .vf-vp-btns .elementor-widget-wrap > .elementor-widget {
		width: 100%;
	}

	body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button,
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
		display: flex;
		width: 100%;
	}

	body .vf-vp-sec .vf-vp-list li {
		gap: 18px;
		padding: 18px 0;
	}
}

/* Knöpfe am Handy (Runde 12): Mit drei Knöpfen im Kopf der Seiten Vin & Flower und 3six5 (Enquire now, Download event pack,
   Download catering pack) wurde der Text "DOWNLOAD CATERING PACK" bei 375 px zweizeilig (Text 273 px, Platz 275 px), "DOWNLOAD EVENT PACK"
   schon bei 320 px (237 px gegen 220 px). Deshalb unter 768 px weniger Innenabstand (14 px statt 30 px), unter 400 px etwas
   engere Laufweite (0,16 em), unter 360 px 13 px Schrift. Ab 768 px ändert sich nichts. Gemessen: alle Knöpfe einzeilig bei 320, 375, 414, 767 px. */
@media (max-width: 767px) {
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button,
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
		padding-left: 14px;
		padding-right: 14px;
	}
}

@media (max-width: 399px) {
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button,
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
		letter-spacing: 0.16em;
	}
}

@media (max-width: 359px) {
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-solid .elementor-button,
	body.elementor-kit-7 .elementor-widget.vf-vp-btn-outline .elementor-button {
		font-size: 13px;
	}
}

/* ==========================================================================
   Adobe-Schriften (Runde 6b) – nur aktiv, wenn VF_FONTS in functions.php auf 'adobe' steht
   WAS:  Mit der body-Klasse vf-fonts-adobe wird
         - EB Garamond (Menü, Überschriften der neuen Unterseiten) zu "nicholas" (400),
         - Dosis (Text, Knöpfe, Leiste unten, Formulare) zu "semplicitapro" (Text 400, Knöpfe 500),
         jeweils mit den bisherigen Schriften als Ersatz (falls Adobe nicht lädt).
         Zusätzlich werden Elementors Schrift-Variablen (--e-global-typography-*-font-family) und die
         Standard-Überschriften der älteren Seiten (h1-h6) umgestellt, damit der Test auf allen Seiten greift.
   WARUM: Alos Wunsch (07.10.): Menü "Nicholas", Haupttext "Semplicita Pro" testen (Adobe Fonts, Projekt ure8tth).
   HINWEIS: Elementor Site Settings zeigen weiter Dosis; das hier überschreibt es nur per CSS. Wer die
         Schriften behalten will, muss sie später in Elementor eintragen (und Stellen mit fest
         eingestellter Dosis in einzelnen Widgets prüfen).
   RÜCKGÄNGIG: In functions.php VF_FONTS auf 'klassisch' stellen (dann ist dieser Block wirkungslos),
         oder diesen Block löschen.
   ========================================================================== */
body.vf-fonts-adobe {
	--vf-font-nicholas: "nicholas", "EB Garamond", Georgia, "Times New Roman", serif;
	--vf-font-semplicita: "semplicitapro", Dosis, sans-serif;

	/* eigene Variablen: Menü und neue Unterseiten */
	--vf-menu-font: var(--vf-font-nicholas);
	--vf-vp-serif: var(--vf-font-nicholas);
	--vf-vp-sans: var(--vf-font-semplicita);
}

/* Elementors Schrift-Variablen (stehen im Kit auf Dosis); primary = Überschriften, Rest = Text */
body.elementor-kit-7.vf-fonts-adobe {
	--e-global-typography-primary-font-family: "nicholas";
	--e-global-typography-secondary-font-family: "semplicitapro";
	--e-global-typography-text-font-family: "semplicitapro";
	--e-global-typography-accent-font-family: "semplicitapro";
	font-family: var(--vf-font-semplicita);
}

/* Das Kit setzt Dosis auch fest an Überschriften, Links und Knöpfen */
body.elementor-kit-7.vf-fonts-adobe h1,
body.elementor-kit-7.vf-fonts-adobe h2,
body.elementor-kit-7.vf-fonts-adobe h3,
body.elementor-kit-7.vf-fonts-adobe h4,
body.elementor-kit-7.vf-fonts-adobe h5,
body.elementor-kit-7.vf-fonts-adobe h6,
body.elementor-kit-7.vf-fonts-adobe .elementor-heading-title {
	font-family: var(--vf-font-nicholas);
}

body.elementor-kit-7.vf-fonts-adobe a,
body.elementor-kit-7.vf-fonts-adobe p,
body.elementor-kit-7.vf-fonts-adobe li,
body.elementor-kit-7.vf-fonts-adobe label,
body.elementor-kit-7.vf-fonts-adobe input,
body.elementor-kit-7.vf-fonts-adobe textarea,
body.elementor-kit-7.vf-fonts-adobe select,
body.elementor-kit-7.vf-fonts-adobe button,
body.elementor-kit-7.vf-fonts-adobe .elementor-button,
body.elementor-kit-7.vf-fonts-adobe .vf-footerbar {
	font-family: var(--vf-font-semplicita);
}

/* Verlinkte Überschriften (z. B. Weddings: Furniture, Bar, ...): der Link erbt die Schrift der Überschrift,
   sonst greift die Link-Regel oben (semplicitapro) und die Überschrift hätte eine andere Schrift. */
body.elementor-kit-7.vf-fonts-adobe .elementor-heading-title a,
body.elementor-kit-7.vf-fonts-adobe h1 a,
body.elementor-kit-7.vf-fonts-adobe h2 a,
body.elementor-kit-7.vf-fonts-adobe h3 a,
body.elementor-kit-7.vf-fonts-adobe h4 a,
body.elementor-kit-7.vf-fonts-adobe h5 a,
body.elementor-kit-7.vf-fonts-adobe h6 a {
	font-family: inherit;
}

/* Menü bleibt bei nicholas (die Menülinks sind Links, sie sollen nicht von der Regel oben erfasst werden) */
body.elementor-kit-7.vf-fonts-adobe #menu-canvas a {
	font-family: var(--vf-menu-font);
}

/* ==========================================================================
   Galerie-Seite (Runde 7) – Klassen vf-gal-*
   WAS:  Styling für die Elementor-Vorlage der Seite "Galleries" (vf-export/galerie-*.json):
         Kopf mit nur einer Überschrift, Pro-Widget "Gallery" mit Filterleiste (Reiter), darunter
         der Instagram-Bereich (Überschrift, @vinandflower, 4 Kacheln, Knopf). Alles baut auf den
         vf-vp-Bausteinen oben auf (Breite, Abstände, Schriften, Knöpfe, Fotoraster).
   Klassen: vf-gal-hero (niedriger Kopf), vf-gal (Abschnitt der Galerie), vf-gal-grid (am Gallery-Widget),
         vf-gal-insta (Überschrift + Name), vf-gal-handle (@vinandflower), vf-gal-insta-photos (4 Kacheln),
         vf-gal-insta-btn (Abschnitt mit dem Knopf).
   Spalten (3 / 2 / 2), Abstand (12 px) und Seitenverhältnis (1:1) stellt das Widget selbst ein
         (Elementor: Gallery > Inhalt), nicht dieses CSS.
   RÜCKGÄNGIG: Block bis zum Dateiende löschen. Ohne die Klassen im Elementor ändert sich nichts.
   ========================================================================== */

/* Kopf: nur die Überschrift, deshalb viel niedriger als der Hero der Unterseiten */
body .elementor-section.vf-vp-hero.vf-gal-hero {
	min-height: clamp(220px, 30vh, 340px);
}

/* Filterleiste: wie unsere Textlinks (Großbuchstaben, weit gesperrt); aktiver Reiter weiß mit Unterstrich */
body .vf-gal-grid .elementor-gallery__titles-container {
	justify-content: flex-start;
	margin-bottom: 32px;
}

body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title {
	--space-between: 28px;
	padding: 0 0 8px;
	border-bottom: 1px solid transparent;
	font-family: var(--vf-vp-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--vf-vp-muted);
	transition: color 0.2s, border-color 0.2s;
}

body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title:hover,
body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title:focus-visible,
body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title.elementor-item-active {
	color: #fff;
}

body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title.elementor-item-active {
	border-bottom-color: #fff;
}

body.elementor-kit-7 .vf-gal-grid a.elementor-item.elementor-gallery-title:focus-visible {
	outline: 1px solid #fff;
	outline-offset: 4px;
}

/* Kacheln: beim Darüberfahren leicht abdunkeln (zeigt, dass man klicken kann) */
body .vf-gal-grid a.e-gallery-item .e-gallery-image {
	transition: opacity 0.25s;
}

body .vf-gal-grid a.e-gallery-item:hover .e-gallery-image {
	opacity: 0.82;
}

/* Instagram: Linie über dem Bereich, Überschrift, darunter der Name */
body .elementor-section.vf-vp-sec.vf-gal-insta {
	padding-bottom: 40px;
	border-top: 1px solid var(--vf-vp-line);
}

body .vf-vp-sec.vf-gal-insta .elementor-widget.vf-gal-handle {
	margin: 20px 0 0;
}

/* Lightbox (Elementor): der Titel unter dem großen Bild wäre sonst der Dateiname (z. B. "117858334_28132..._o.jpg") */
body:has(.vf-gal-grid) .elementor-lightbox .elementor-slideshow__title {
	display: none;
}

/* ==========================================================================
   Semplicita Pro überall (Runde 8) – nur aktiv, wenn VF_FONTS in functions.php auf 'semplicita' steht
   WAS:  Mit der body-Klasse vf-fonts-semplicita wird "nicholas" durch "semplicitapro" ersetzt:
         Menü, h1-h6, Überschriften-Links, vf-vp-Überschriften und Elementors Überschriften-Variable.
         Größen, Großschreibung und Stärken bleiben wie bei 'adobe'.
   WARUM: Alo (15.10.): Nicholas wirkt zu hart, Semplicita Pro "everywhere". Der Block davor (adobe) bleibt
         unverändert erhalten, weil die Appetite-Seite Nicholas nutzen soll.
   RÜCKGÄNGIG: VF_FONTS auf 'adobe' stellen oder diesen Block löschen.
   ========================================================================== */
body.vf-fonts-adobe.vf-fonts-semplicita {
	--vf-font-nicholas: var(--vf-font-semplicita); /* alle Stellen, die oben die "Überschriften-Schrift" nehmen */
}

body.elementor-kit-7.vf-fonts-adobe.vf-fonts-semplicita {
	--e-global-typography-primary-font-family: "semplicitapro";
}

/* ==========================================================================
   Kontaktformular: Absende-Knopf "Submit your details" im Stil der übrigen Knöpfe (Runde 8)
   WAS:  Der Knopf des Elementor-Formulars (Seite Contact us) sah anders aus als alle anderen: runde Ecken
         (35 px), Rahmen 2 px, Schrift 22 px. Jetzt wie vf-vp-btn-solid: eckig, weiß gefüllt mit schwarzer Schrift,
         Großbuchstaben, Laufweite 0,22 em, 14 px, Höhe 52 px; beim Darüberfahren/Fokus umgekehrt (transparent, weiße
         Schrift). Die Ausrichtung (mittig) stellt das Formular-Widget in Elementor ein, nicht dieses CSS.
   WIRKT NUR auf Knöpfe in Formular-Widgets (.elementor-widget-form). Die lange Auswahl (.elementor-element, [type="submit"])
         ist nötig, weil Elementor die Knopf-Farben der Seite mit gleich hoher Spezifität schreibt (post-51.css).
         Rückgängig: Block löschen.
   ========================================================================== */
body.elementor-kit-7 .elementor-widget-form.elementor-element .e-form__buttons button.elementor-button[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 30px;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
	background-color: #fff;
	color: #000;
	font-family: var(--vf-vp-sans);
	font-size: 14px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.25s ease, color 0.25s ease;
}

body.elementor-kit-7 .elementor-widget-form.elementor-element .e-form__buttons button.elementor-button[type="submit"]:hover,
body.elementor-kit-7 .elementor-widget-form.elementor-element .e-form__buttons button.elementor-button[type="submit"]:focus-visible {
	background-color: transparent;
	color: #fff;
}

@media (max-width: 767px) {
	body.elementor-kit-7 .elementor-widget-form.elementor-element .e-form__buttons button.elementor-button[type="submit"] {
		display: flex;
		width: 100%;
	}
}

/* Galerie-Seite: zwei Instagram-Knöpfe (@vinandflower und @365_perth) nebeneinander, gleich breit (Runde 8)
   Ab 768 px zwei gleich breite Spalten (so breit wie der längere Knopf), Abstand 12 px wie bei allen Knöpfen;
   darunter stehen sie untereinander (das macht schon die Regel für .vf-vp-btns oben, volle Breite).
   Gilt für beliebig viele Knöpfe in dieser Spalte: mehr als zwei laufen in die nächste Zeile. */
@media (min-width: 768px) {
	body .vf-vp-sec.vf-gal-insta-btn .vf-vp-btns > .elementor-widget-wrap {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: max-content;
		max-width: 100%;
	}

	body .vf-vp-sec.vf-gal-insta-btn .vf-vp-btns .elementor-widget-wrap > .elementor-widget {
		width: auto;
	}

	body.elementor-kit-7 .vf-gal-insta-btn .elementor-widget .elementor-button {
		display: flex;
		width: 100%;
	}
}

/* ==========================================================================
   Find us (ID 419), Contact us (ID 51), FAQs (ID 424), Thank you (ID 1031): linksbündig wie die neuen Unterseiten (Runde 9, Thank you ab Runde 11)
   WAS:  Überschriften, Texte, Kontakt-Box, Formular, Karte und FAQ-Liste standen zentriert in einer 800 px breiten
         Mitte. Jetzt gleiche Breite und gleiche linke Kante wie die vf-vp-Unterseiten (--vf-vp-w, --vf-vp-gutter;
         bei 1440 px beginnt der Inhalt bei 178 px) und alles linksbündig. Fließtext bleibt höchstens 800 px breit
         (Lesbarkeit), Formular, Karte und FAQ-Liste nutzen die ganze Breite.
   WIE:  Die Seiten werden über ihre Seiten-IDs angesprochen (body-Klassen elementor-page-ID), das gilt auf Staging und
         live gleich. Die Kontakt-Box (Spalte a3aeddf der Seite 51) behält ihren Rahmen und Innenabstand.
   WIRKT NUR im Seiteninhalt (data-elementor-type="wp-page"), nicht in Kopfzeile, Menü und Footer (Vorlage 124: Text bleibt mittig wie
   auf allen Seiten; Runde 10, in Runde 9 traf die Regel versehentlich auch den Footer).
   WIRKT NICHT auf die Icon-Gruppen "jump-contact" (auf Contact us per CSS ausgeblendet).
   RÜCKGÄNGIG: Block löschen (bis "Doppel-Logo ausblenden").
   ========================================================================== */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-section.elementor-top-section:not(.jump-contact) > .elementor-container {
	width: min(var(--vf-vp-w), calc(100% - 2 * var(--vf-vp-gutter)));
	max-width: none;
	margin-left: auto;
	margin-right: auto;
}

body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-top-section:not(.jump-contact) > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding-left: 0;
	padding-right: 0;
}

/* alles linksbündig (Elementor setzt "center" je Widget; ".elementor-element" macht die Regel stärker) */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-element.elementor-widget {
	text-align: left;
}

body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-widget-form .elementor-field-type-submit {
	justify-content: flex-start; /* Absende-Knopf links statt mittig */
}

/* Fließtext nicht breiter als 800 px (Zeilenlänge), FAQ-Antworten ebenso */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-widget-text-editor > .elementor-widget-container,
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-widget-heading > .elementor-widget-container,
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-accordion .elementor-tab-content {
	max-width: 800px;
}

/* Kontakt-Box: Rahmen und Innenabstand bleiben, aber ohne seitlichen Außenabstand (linke Kante wie der Rest)
   und nur so breit wie ihr Inhalt */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] .elementor-top-section .elementor-element.elementor-element-a3aeddf > .elementor-widget-wrap.elementor-element-populated {
	width: auto;
	max-width: 100%;
	margin: 2em 0;
	padding: 2em;
}

/* Terms (ID 3, /privacy-policy/): Theme-Seite von Hello ohne Elementor-Inhalt (Body-Klasse page-id-3, es gibt kein elementor-page-3).
   Gleiche Breite und linke Kante wie die vf-vp-Seiten, Text höchstens 800 px breit, genug Platz unter der Kopfzeile
   (die Überschrift saß direkt unter der 72-px-Leiste). Die dunkle Ebene steht im Block "Abdunklung" unten. */
body.page-id-3 main#content.site-main {
	width: min(var(--vf-vp-w), calc(100% - 2 * var(--vf-vp-gutter)));
	max-width: none;
	margin: 0 auto;
	padding: var(--vf-vp-pad) 0;
}

body.page-id-3 main#content .page-content {
	max-width: 800px;
}

/* Hello zentriert die Überschrift (margin-inline: auto) und begrenzt sie je Breite auf 500 / 600 / 800 / 1140 px: bei kurzem
   Text und auf Tablets sitzt sie dadurch nicht an der linken Kante. Hier wieder volle Breite, linksbündig. */
body.page-id-3 main#content .page-header .entry-title {
	width: 100%;
	max-width: none;
	margin-inline: 0;
}

/* Terms am Handy (unter 768 px): Überschrift 32 px statt 48 px (sonst 5 Zeilen bei 375 px), Zeilenabstand passend */
@media (max-width: 767px) {
	body.page-id-3 main#content .page-header h1 {
		font-size: 32px;
		line-height: 1.15;
	}
}

/* ==========================================================================
   Doppel-Logo ausblenden (Runde 9; auch Thank you ab Runde 11) – eigener Block, damit es leicht wieder einzuschalten ist
   WAS:  Das große Doppel-Logo (Vin & Flower + 3six5) über der Überschrift von Find us, Contact us, FAQs und Thank you
         wird ausgeblendet, wie auf der Startseite (Alo: zu viele Logos). Das Bild-Widget bleibt in Elementor.
   WIEDER EINSCHALTEN: Diesen Block löschen (oder die Zeile display: none entfernen).
   ========================================================================== */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031) [data-elementor-type="wp-page"] > .elementor-top-section:first-child > .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-image {
	display: none;
}

/* ==========================================================================
   Kontaktformular im Stil der Seite (Runde 9) – nur das Formular-Widget der Seite Contact us (ID 51)
   WAS:  Beschriftungen wie vf-vp-label (klein, Großbuchstaben, gesperrt, gedämpft), Felder transparent mit dünner weißer
         Linie (Fokus: volle weiße Linie), Platzhalter grau, Pflicht-Sternchen gedämpft statt rot, Auswahlfelder mit dünnem
         weißem Pfeil, Datums- und Zeitauswahl (flatpickr) schwarz-weiß, Fehler- und Erfolgsmeldung schwarz-weiß:
         Fehler = weiße Fläche mit schwarzer Schrift und "!", Erfolg = weißer Rahmen mit "✓".
   Der Absende-Knopf steht weiter oben (Runde 8). Die Farben, die Elementor im Widget einstellt (post-51.css), haben hohe
   Spezifität; deshalb die lange Auswahl mit .elementor-element.
   RÜCKGÄNGIG: Block löschen (bis "Abdunklung").
   ========================================================================== */
body.elementor-page-51 .elementor-widget-form.elementor-element .elementor-field-group > label.elementor-field-label {
	padding-bottom: 10px;
	font-family: var(--vf-vp-sans);
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--vf-vp-muted);
}

body.elementor-page-51 .elementor-widget-form .elementor-mark-required .elementor-field-label::after {
	color: var(--vf-vp-muted);
}

body.elementor-page-51 .elementor-widget-form.elementor-element .elementor-field-group :is(.elementor-field, select).elementor-field-textual:not(.elementor-select-wrapper) {
	min-height: 52px;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
	font-family: var(--vf-vp-sans);
	font-size: 16px;
	line-height: 1.4;
	color: #fff;
	transition: border-color 0.2s ease;
}

body.elementor-page-51 .elementor-widget-form.elementor-element .elementor-field-group :is(.elementor-field, select).elementor-field-textual:not(.elementor-select-wrapper):hover {
	border-color: rgba(255, 255, 255, 0.8);
}

body.elementor-page-51 .elementor-widget-form.elementor-element .elementor-field-group :is(.elementor-field, select).elementor-field-textual:not(.elementor-select-wrapper):focus {
	border-color: #fff;
	outline: 0;
	box-shadow: 0 0 0 1px #fff; /* weiße Linie rundum, 2 px zusammen */
}

body.elementor-page-51 .elementor-widget-form .elementor-field-textual::placeholder {
	color: rgba(255, 255, 255, 0.4);
	opacity: 1;
}

/* Browser-Autofill (gelb/blau) schwarz-weiß halten */
body.elementor-page-51 .elementor-widget-form .elementor-field-textual:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
	box-shadow: 0 0 0 1000px #000 inset;
}

/* Auswahlfelder: eigener dünner weißer Pfeil statt des Elementor-Symbols */
body.elementor-page-51 .elementor-widget-form .elementor-select-wrapper select {
	padding-right: 44px;
	cursor: pointer;
}

body.elementor-page-51 .elementor-widget-form .elementor-select-wrapper select option {
	background: #000;
	color: #fff;
}

body.elementor-page-51 .elementor-widget-form .elementor-select-wrapper .select-caret-down-wrapper {
	inset-inline-end: 18px;
	width: 14px;
	height: 8px;
	font-size: 0;
	line-height: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8' fill='none' stroke='white' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.elementor-page-51 .elementor-widget-form .elementor-select-wrapper .select-caret-down-wrapper > * {
	display: none;
}

/* Fehler und Erfolg: schwarz-weiß, aber deutlich. Feld mit Fehler: kräftige weiße Linie, Meldung als weiße Fläche. */
body.elementor-page-51 .elementor-widget-form .elementor-field-group.elementor-error .elementor-field-textual {
	border-color: #fff;
	box-shadow: 0 0 0 1px #fff;
}

body.elementor-page-51 .elementor-widget-form .elementor-message {
	display: block;
	margin: 10px 0 0;
	padding: 8px 12px;
	font-family: var(--vf-vp-sans);
	font-size: 14px;
	line-height: 1.4;
	letter-spacing: 0.04em;
}

body.elementor-page-51 .elementor-widget-form .elementor-message::before {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-inline-end: 0.7em;
	border: 1px solid currentColor;
	border-radius: 50%;
	background: none;
	font-family: inherit;
	font-weight: 700;
	line-height: 1.4em;
	text-align: center;
	vertical-align: middle;
}

body.elementor-page-51 .elementor-widget-form .elementor-message.elementor-message-danger {
	background: #fff;
	color: #000;
}

body.elementor-page-51 .elementor-widget-form .elementor-message.elementor-message-danger::before {
	content: "!";
}

body.elementor-page-51 .elementor-widget-form .elementor-message.elementor-message-success {
	border: 1px solid #fff;
	background: transparent;
	color: #fff;
}

body.elementor-page-51 .elementor-widget-form .elementor-message.elementor-message-success::before {
	content: "\2713";
}

/* Datums- und Zeitauswahl (flatpickr, hängt am <body>): schwarz-weiß statt blau/rot */
body.elementor-page-51 .flatpickr-calendar {
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 0;
	background: #000;
	box-shadow: none;
	font-family: var(--vf-vp-sans);
	color: #fff;
}

body.elementor-page-51 .flatpickr-calendar::before,
body.elementor-page-51 .flatpickr-calendar::after {
	display: none; /* Pfeilspitze am Rand */
}

body.elementor-page-51 .flatpickr-months .flatpickr-month,
body.elementor-page-51 .flatpickr-current-month .flatpickr-monthDropdown-months,
body.elementor-page-51 .flatpickr-current-month input.cur-year,
body.elementor-page-51 .flatpickr-current-month span.cur-month {
	background: transparent;
	color: #fff;
	fill: #fff;
}

body.elementor-page-51 .flatpickr-monthDropdown-months option {
	background: #000;
	color: #fff;
}

body.elementor-page-51 .flatpickr-months .flatpickr-prev-month svg,
body.elementor-page-51 .flatpickr-months .flatpickr-next-month svg {
	fill: #fff;
}

body.elementor-page-51 .flatpickr-months .flatpickr-prev-month:hover svg,
body.elementor-page-51 .flatpickr-months .flatpickr-next-month:hover svg {
	fill: rgba(255, 255, 255, 0.6);
}

body.elementor-page-51 .flatpickr-weekdays,
body.elementor-page-51 span.flatpickr-weekday {
	background: transparent;
	color: rgba(255, 255, 255, 0.6);
	font-weight: 400;
}

body.elementor-page-51 .flatpickr-day {
	border: 1px solid transparent;
	border-radius: 0;
	color: #fff;
}

body.elementor-page-51 .flatpickr-day.prevMonthDay,
body.elementor-page-51 .flatpickr-day.nextMonthDay,
body.elementor-page-51 .flatpickr-day.flatpickr-disabled,
body.elementor-page-51 .flatpickr-day.flatpickr-disabled:hover {
	color: rgba(255, 255, 255, 0.3);
}

body.elementor-page-51 .flatpickr-day:hover,
body.elementor-page-51 .flatpickr-day:focus,
body.elementor-page-51 .flatpickr-day.prevMonthDay:hover,
body.elementor-page-51 .flatpickr-day.nextMonthDay:hover {
	border-color: transparent;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
}

body.elementor-page-51 .flatpickr-day.today {
	border-color: #fff;
}

body.elementor-page-51 .flatpickr-day.selected,
body.elementor-page-51 .flatpickr-day.selected:hover,
body.elementor-page-51 .flatpickr-day.startRange,
body.elementor-page-51 .flatpickr-day.endRange {
	border-color: #fff;
	background: #fff;
	color: #000;
}

body.elementor-page-51 .flatpickr-time {
	border-top: 1px solid rgba(255, 255, 255, 0.28);
}

body.elementor-page-51 .flatpickr-time input,
body.elementor-page-51 .flatpickr-time .flatpickr-time-separator,
body.elementor-page-51 .flatpickr-time .flatpickr-am-pm {
	background: transparent;
	color: #fff;
}

body.elementor-page-51 .flatpickr-time input:hover,
body.elementor-page-51 .flatpickr-time input:focus,
body.elementor-page-51 .flatpickr-time .flatpickr-am-pm:hover,
body.elementor-page-51 .flatpickr-time .flatpickr-am-pm:focus {
	background: rgba(255, 255, 255, 0.14);
}

body.elementor-page-51 .numInputWrapper span {
	border-color: rgba(255, 255, 255, 0.28);
}

body.elementor-page-51 .numInputWrapper span.arrowUp::after {
	border-bottom-color: #fff;
}

body.elementor-page-51 .numInputWrapper span.arrowDown::after {
	border-top-color: #fff;
}

body.elementor-page-51 .numInputWrapper:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* ==========================================================================
   Abdunklung nur auf Find us, Contact us, FAQs, Thank you und Terms (Runde 9, Thank you und Terms ab Runde 11)
   WAS:  Eine feste dunkle Ebene (schwarz, halbdurchsichtig) über dem Seitenhintergrund, hinter dem Inhalt. Sie bleibt beim
         Scrollen stehen. Die Stärke steht in --vf-page-dim (0 = keine, 1 = ganz schwarz); Start 0,6.
         (Vorschau mit 3six5-bar-gallery: bei 0,45 sind die Beschriftungen über den hellen Gläsern und dem Neon schlecht lesbar,
         bei 0,6 gut, bei 0,7 sehr dunkel.)
   WARUM: Auf einem scharfen dunklen Foto (z. B. 3six5-bar-gallery) müssen Text und Formular gut lesbar bleiben; die
         bisherigen Banner-Bilder waren dafür schon unscharf und dunkel gerechnet.
   Nur diese Seiten (Seiten-IDs 419, 51, 424, 1031 und Terms = ID 3 über die Body-Klasse page-id-3), keine andere Seite.
   RÜCKGÄNGIG: Block löschen, oder --vf-page-dim auf 0 setzen.
   ========================================================================== */
body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031, .page-id-3) {
	--vf-page-dim: 0.6;
}

/* Kurze Seiten (z. B. Thank you am Handy): Das Seitenbild deckt nur die Höhe des Inhalts, darunter schimmerte die weiße
   Körperfarbe durch die dunkle Ebene (grauer Streifen zwischen Footer und Leiste unten). Schwarz darunter, wie der Footer. */
html body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031, .page-id-3) {
	background-color: #000;
}

body:is(.elementor-page-419, .elementor-page-51, .elementor-page-424, .elementor-page-1031, .page-id-3)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	background: rgba(0, 0, 0, var(--vf-page-dim));
	pointer-events: none;
}

/* ==========================================================================
   Thank you (ID 1031): Footer immer direkt über der Leiste unten (Runde 11b)
   WAS:  Die Seite ist kürzer als das Fenster (nur Überschrift und zwei Zeilen). Der große Footer (Vorlage 124) hing deshalb
         mitten im Bild, darunter war wieder der Seitenhintergrund bis zur Leiste zu sehen. Jetzt füllt die Seite mindestens
         die Fensterhöhe (Kopfzeile und Leiste sind darin schon eingerechnet, weil body oben --vf-menu-row Platz hat und der Footer
         unten so viel Innenabstand wie die Leiste hoch ist): body ist eine Spalte, der Seiteninhalt (main#content) wächst
         und schiebt den Footer nach unten. Wird die Seite länger als das Fenster, ändert sich nichts.
   Nur Thank you. Bei angemeldetem Admin zieht --vf-top die WordPress-Leiste ab.
   RÜCKGÄNGIG: Block löschen.
   ========================================================================== */
body.elementor-page-1031 {
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	min-height: calc(100vh - var(--vf-top, 0px));
	min-height: calc(100dvh - var(--vf-top, 0px));
}

body.elementor-page-1031 > main#content {
	flex: 1 0 auto;
}

body.elementor-page-1031 > .elementor-location-footer {
	flex: 0 0 auto;
}