/**
 * Apo-Widgets: das fehlende Stueck CSS.
 *
 * Elementor Pro lieferte zu jedem seiner Widgets eine eigene CSS-Datei mit.
 * Darin stand nicht das Aussehen (Farben, Schriften, Abstaende, das kommt
 * weiterhin aus der pro Seite erzeugten Elementor-Datei), sondern die
 * Mechanik: was liegt uebereinander, was klappt auf, was dreht sich.
 * Genau diese Mechanik faellt weg, wenn Pro abgeschaltet wird, und genau
 * die steht hier drin.
 *
 * Zwei Regeln fuer alles, was hier ergaenzt wird:
 *   - kein !important (einzige Ausnahme: [hidden], siehe unten). Damit
 *     gewinnt die vorhandene Seiten-CSS jeden Streit, und das Aussehen
 *     bleibt so, wie es war.
 *   - moeglichst niedrige Spezifitaet, aus demselben Grund.
 */


/* ==========================================================================
   1. Flip-Box
   ========================================================================== */

/**
 * Eine einzige Stelle entscheidet, ob die Rueckseite dran ist: die
 * Variable --apo-rueckseite (0 = Vorderseite, 1 = Rueckseite). Alle sechs
 * Effekte rechnen nur noch mit dieser Zahl. Sonst muesste jeder Effekt in
 * jeder Richtung seinen eigenen Hover-Block bekommen, und beim Nachbessern
 * vergisst man garantiert die Haelfte davon.
 */
.elementor-flip-box {
	--apo-rueckseite: 0;
	position: relative;
	height: 280px;
	overflow: hidden;
	/* Fuer das Umdrehen braucht der Browser eine Fluchtpunkt-Tiefe. */
	perspective: 1000px;
	-webkit-perspective: 1000px;
}

.elementor-flip-box:hover,
.elementor-flip-box:focus {
	--apo-rueckseite: 1;
}

/**
 * Getrennte Regel, weil ein alter Browser, der :focus-within nicht kennt,
 * sonst auch die Maus-Regel darueber wegwerfen wuerde. Gebraucht wird
 * :focus-within fuer den Knopf auf der Rueckseite: wer sich mit der
 * Tabulatortaste dorthin bewegt, muss ihn auch sehen.
 */
.elementor-flip-box:focus-within {
	--apo-rueckseite: 1;
}

.elementor-flip-box__layer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.2, 0.6, 0.3, 1), opacity 0.45s ease;
}

/**
 * Die Rueckseite steht im HTML hinter der Vorderseite und liegt damit von
 * Haus aus obenauf. Solange sie unsichtbar ist, darf sie keine Klicks
 * abfangen; die Tastatur erreicht sie trotzdem, deshalb kein
 * visibility: hidden.
 */
.elementor-flip-box__back {
	opacity: var(--apo-rueckseite);
	pointer-events: none;
}

.elementor-flip-box:hover .elementor-flip-box__back {
	pointer-events: auto;
}

.elementor-flip-box:focus-within .elementor-flip-box__back {
	pointer-events: auto;
}

.elementor-flip-box__layer__overlay {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 35px;
	overflow: hidden;
	text-align: center;
}

.elementor-flip-box__layer__inner {
	width: 100%;
}

.elementor-flip-box__layer__title,
.elementor-flip-box__layer__description {
	margin: 0;
}

/* Etwas Luft zwischen Text und Knopf, falls die Seiten-CSS nichts vorgibt. */
.elementor-flip-box__button {
	display: inline-block;
	margin-top: 15px;
}

/* Ist die ganze Box verlinkt, liegt der Link ueber allem, auch ueber dem
   Knopf, den es in diesem Fall gar nicht gibt. */
.elementor-flip-box__link-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5;
	width: 100%;
	height: 100%;
}


/* --- Effekt: Umdrehen ----------------------------------------------------- */

/**
 * Beide Ebenen drehen sich um dieselbe Achse in dieselbe Richtung, die
 * Rueckseite liegt dabei eine halbe Umdrehung voraus. Welche Ebene man
 * gerade von hinten saehe, blendet der Browser ueber backface-visibility
 * selbst aus. Deshalb bleibt die Rueckseite hier dauerhaft deckend.
 */
.elementor-flip-box--effect-flip .elementor-flip-box__layer {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.elementor-flip-box--effect-flip .elementor-flip-box__back {
	opacity: 1;
}

/* Grundfall ist "nach oben"; die drei anderen Richtungen kehren die Achse
   oder das Vorzeichen um. */
.elementor-flip-box--effect-flip .elementor-flip-box__front {
	transform: rotateX(calc(var(--apo-rueckseite) * 180deg));
}

.elementor-flip-box--effect-flip .elementor-flip-box__back {
	transform: rotateX(calc(var(--apo-rueckseite) * 180deg - 180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-down .elementor-flip-box__front {
	transform: rotateX(calc(var(--apo-rueckseite) * -180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-down .elementor-flip-box__back {
	transform: rotateX(calc(180deg - var(--apo-rueckseite) * 180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box__front {
	transform: rotateY(calc(var(--apo-rueckseite) * -180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-left .elementor-flip-box__back {
	transform: rotateY(calc(180deg - var(--apo-rueckseite) * 180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-right .elementor-flip-box__front {
	transform: rotateY(calc(var(--apo-rueckseite) * 180deg));
}

.elementor-flip-box--effect-flip.elementor-flip-box--direction-right .elementor-flip-box__back {
	transform: rotateY(calc(var(--apo-rueckseite) * 180deg - 180deg));
}


/* --- Effekt: Schieben ----------------------------------------------------- */

/**
 * Die Rueckseite steht ausserhalb der Box und faehrt herein. Sie ist dabei
 * voll deckend, sonst saehe man sie waehrend der Fahrt durchscheinen.
 * "Richtung nach oben" heisst: sie kommt von unten und faehrt nach oben.
 */
.elementor-flip-box--effect-slide .elementor-flip-box__back {
	opacity: 1;
	transform: translateY(calc((1 - var(--apo-rueckseite)) * 100%));
}

.elementor-flip-box--effect-slide.elementor-flip-box--direction-down .elementor-flip-box__back {
	transform: translateY(calc((1 - var(--apo-rueckseite)) * -100%));
}

.elementor-flip-box--effect-slide.elementor-flip-box--direction-left .elementor-flip-box__back {
	transform: translateX(calc((1 - var(--apo-rueckseite)) * 100%));
}

.elementor-flip-box--effect-slide.elementor-flip-box--direction-right .elementor-flip-box__back {
	transform: translateX(calc((1 - var(--apo-rueckseite)) * -100%));
}


/* --- Effekt: Schieben mit Versatz ----------------------------------------- */

/* Wie Schieben, nur wandert die Vorderseite gleichzeitig mit hinaus. */
.elementor-flip-box--effect-push .elementor-flip-box__back {
	opacity: 1;
	transform: translateY(calc((1 - var(--apo-rueckseite)) * 100%));
}

.elementor-flip-box--effect-push .elementor-flip-box__front {
	transform: translateY(calc(var(--apo-rueckseite) * -100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-down .elementor-flip-box__back {
	transform: translateY(calc((1 - var(--apo-rueckseite)) * -100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-down .elementor-flip-box__front {
	transform: translateY(calc(var(--apo-rueckseite) * 100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-left .elementor-flip-box__back {
	transform: translateX(calc((1 - var(--apo-rueckseite)) * 100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-left .elementor-flip-box__front {
	transform: translateX(calc(var(--apo-rueckseite) * -100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-right .elementor-flip-box__back {
	transform: translateX(calc((1 - var(--apo-rueckseite)) * -100%));
}

.elementor-flip-box--effect-push.elementor-flip-box--direction-right .elementor-flip-box__front {
	transform: translateX(calc(var(--apo-rueckseite) * 100%));
}


/* --- Effekte: Zoom und Ueberblenden --------------------------------------- */

/* Heranzoomen: die Rueckseite waechst aus dem Nichts, die Deckkraft kommt
   schon aus der Grundregel weiter oben. Eine Richtung gibt es hier nicht. */
.elementor-flip-box--effect-zoom-in .elementor-flip-box__back {
	transform: scale(var(--apo-rueckseite));
}

/* Wegzoomen: die Vorderseite schrumpft weg und gibt den Blick frei. */
.elementor-flip-box--effect-zoom-out .elementor-flip-box__front {
	opacity: calc(1 - var(--apo-rueckseite));
	transform: scale(calc(1 - var(--apo-rueckseite) * 0.4));
}

/* Ueberblenden braucht nichts weiter: die Grundregel blendet die
   Rueckseite bereits ein. Steht hier nur, damit klar ist, dass das
   Absicht ist und nicht vergessen wurde. */


/* ==========================================================================
   2. Call to Action
   ========================================================================== */

.elementor-cta {
	position: relative;
	display: flex;
	overflow: hidden;
}

/* Hintergrundbild und Farbschleier liegen unter dem Inhalt. */
.elementor-cta__bg-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
}

.elementor-cta__bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.elementor-cta__bg-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/**
 * Der Inhalt ist eine Spalte, damit die senkrechte Ausrichtung unten ueber
 * justify-content laufen kann. Ohne width: 100% wuerde er in der Box nicht
 * die volle Breite einnehmen.
 */
.elementor-cta__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 20px;
	text-align: center;
}

.elementor-cta__title,
.elementor-cta__description {
	margin: 0;
}

.elementor-cta__button-wrapper {
	margin-top: 15px;
}

.elementor-cta__link-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}

/* Senkrechte Ausrichtung des Inhalts. */
.elementor-cta--valign-top .elementor-cta__content {
	justify-content: flex-start;
}

.elementor-cta--valign-middle .elementor-cta__content {
	justify-content: center;
}

.elementor-cta--valign-bottom .elementor-cta__content {
	justify-content: flex-end;
}

/**
 * Klassisch: das Bild fuellt die Kachel, der Inhalt bestimmt die Hoehe.
 * Ueberdeckend: der Inhalt legt sich als eigene Schicht komplett ueber das
 * Bild, die Hoehe kommt dann von der Kachel selbst.
 */
.elementor-cta--skin-classic .elementor-cta__content {
	flex-grow: 1;
}

.elementor-cta--skin-cover .elementor-cta__content {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
}


/* ==========================================================================
   3. Menue
   ========================================================================== */

.elementor-nav-menu--main .elementor-nav-menu,
.elementor-nav-menu__container .elementor-nav-menu {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
}

.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
	flex-direction: row;
}

.elementor-nav-menu--layout-vertical .elementor-nav-menu {
	flex-direction: column;
}

/* Jeder Punkt ist der Bezugspunkt fuer sein eigenes Untermenue. */
.elementor-nav-menu li {
	position: relative;
	list-style: none;
}

.elementor-nav-menu a {
	display: block;
	text-decoration: none;
}


/* --- Untermenues (Maus, Tastatur, Finger) --------------------------------- */

/**
 * Am Bildschirm klappt das Untermenue unter seinem Punkt auf. Es bleibt im
 * Dokument stehen (nur unsichtbar), damit die Tabulatortaste hineinlaufen
 * und das Aufklappen ueber :focus-within ausloesen kann.
 * .apo-offen setzt das Skript auf Geraeten ohne Maus beim ersten Tippen.
 */
.elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	display: block;
	min-width: 220px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

/* Untermenue der dritten Ebene klappt zur Seite statt nach unten. */
.elementor-nav-menu--main .sub-menu .sub-menu.elementor-nav-menu--dropdown {
	top: 0;
	left: 100%;
}

.elementor-nav-menu--main .menu-item:hover > .sub-menu.elementor-nav-menu--dropdown,
.elementor-nav-menu--main .menu-item.apo-offen > .sub-menu.elementor-nav-menu--dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* Wieder getrennt, damit ein Browser ohne :focus-within die Regel darueber
   nicht mitverwirft. */
.elementor-nav-menu--main .menu-item:focus-within > .sub-menu.elementor-nav-menu--dropdown {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown a {
	white-space: nowrap;
}


/* --- Markierung des aktiven Punktes --------------------------------------- */

/**
 * Die Striche, Rahmen und Flaechen sind leere Pseudo-Elemente. Ihre Farbe
 * setzt die vorhandene Seiten-CSS; die Werte hier sind nur der Notnagel,
 * falls dort nichts steht.
 */
.elementor-nav-menu--main .elementor-item {
	position: relative;
}

.e--pointer-underline .elementor-item:after,
.e--pointer-overline .elementor-item:before,
.e--pointer-double-line .elementor-item:before,
.e--pointer-double-line .elementor-item:after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background-color: currentColor;
	transform: scaleX(0);
	transition: transform 0.3s ease;
}

.e--pointer-underline .elementor-item:after,
.e--pointer-double-line .elementor-item:after {
	bottom: 0;
}

.e--pointer-overline .elementor-item:before,
.e--pointer-double-line .elementor-item:before {
	top: 0;
}

.e--pointer-underline .elementor-item:hover:after,
.e--pointer-underline .elementor-item.elementor-item-active:after,
.e--pointer-overline .elementor-item:hover:before,
.e--pointer-overline .elementor-item.elementor-item-active:before,
.e--pointer-double-line .elementor-item:hover:before,
.e--pointer-double-line .elementor-item:hover:after,
.e--pointer-double-line .elementor-item.elementor-item-active:before,
.e--pointer-double-line .elementor-item.elementor-item-active:after {
	transform: scaleX(1);
}

.e--pointer-framed .elementor-item:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 3px solid currentColor;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.e--pointer-framed .elementor-item:hover:before,
.e--pointer-framed .elementor-item.elementor-item-active:before {
	opacity: 1;
}

/* Die Flaeche liegt hinter dem Text, deshalb der negative Stapelwert. */
.e--pointer-background .elementor-item:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.08);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.e--pointer-background .elementor-item:hover:before,
.e--pointer-background .elementor-item.elementor-item-active:before {
	opacity: 1;
}

/* Ohne Markierung soll wirklich nichts erscheinen. */
.e--pointer-none .elementor-item:before,
.e--pointer-none .elementor-item:after {
	display: none;
}


/* --- Schalter und Klappmenue fuers Handy ---------------------------------- */

/**
 * Der Schalter ist ein div mit role="button". Am grossen Bildschirm ist er
 * weg, das Klappmenue ebenfalls. Beides erscheint erst in der Regel weiter
 * unten. Das Klappmenue haengt am Widget, deshalb bekommt dessen Behaelter
 * einen Bezugspunkt.
 */
.elementor-widget-nav-menu .elementor-widget-container {
	position: relative;
}

.elementor-menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0.25em;
	border: 0 solid;
	border-radius: 3px;
	background-color: rgba(0, 0, 0, 0.05);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}

.elementor-menu-toggle svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Zu: Burger sichtbar. Offen: Kreuz sichtbar. Massgeblich ist
   aria-expanded, das setzt das Skript zusammen mit aria-hidden am Menue. */
.elementor-menu-toggle__icon--close {
	display: none;
}

.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--open {
	display: none;
}

.elementor-menu-toggle[aria-expanded="true"] .elementor-menu-toggle__icon--close {
	display: block;
}

/**
 * Das Klappmenue haengt an der rechten Kante des Widgets. Feste Breite
 * statt links/rechts auf 0, weil das Widget im Kopf nur so breit sein kann
 * wie der Burger selbst, dann waere das Menue 40 Pixel schmal.
 */
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
	position: absolute;
	top: 100%;
	right: 0;
	left: auto;
	z-index: 9997;
	display: none;
	min-width: 260px;
	max-width: 92vw;
	max-height: 75vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background-color: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-nav-menu {
	flex-direction: column;
	flex-wrap: nowrap;
}

/* Im Klappmenue sitzen die Untermenues nicht als Ballon daneben, sondern
   eingerueckt darunter. */
.elementor-nav-menu__container.elementor-nav-menu--dropdown .sub-menu.elementor-nav-menu--dropdown {
	position: static;
	display: none;
	min-width: 0;
	padding-left: 1.2em;
	background: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

/**
 * Aufklappen im Klappmenue: mit der Maus ueberfahren, mit der Tastatur
 * hineinlaufen oder antippen (dann setzt das Skript .apo-offen). Alle drei
 * Wege muessen abgedeckt sein, weil das Skript .apo-offen nur auf Geraeten
 * ohne Maus vergibt.
 */
.elementor-nav-menu__container.elementor-nav-menu--dropdown .menu-item:hover > .sub-menu.elementor-nav-menu--dropdown,
.elementor-nav-menu__container.elementor-nav-menu--dropdown .menu-item.apo-offen > .sub-menu.elementor-nav-menu--dropdown {
	display: block;
}

.elementor-nav-menu__container.elementor-nav-menu--dropdown .menu-item:focus-within > .sub-menu.elementor-nav-menu--dropdown {
	display: block;
}

/* Im Klappmenue braucht jeder Punkt eine Flaeche, die man mit dem Daumen
   trifft. */
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu__container.elementor-nav-menu--dropdown .elementor-sub-item {
	padding: 12px 16px;
}

/**
 * Umschaltpunkt. Bis 1024 Pixel (Tablet quer und alles darunter) zeigt die
 * Seite den Burger, genauso war es vorher bei Pro eingestellt. Das
 * waagerechte Menue verschwindet nur, wenn es ueberhaupt einen Schalter
 * gibt, sonst waere die Navigation auf dem Handy ganz weg.
 */
@media (max-width: 1024px) {

	.elementor-nav-menu--toggle .elementor-menu-toggle {
		display: flex;
	}

	.elementor-nav-menu--toggle .elementor-nav-menu--main {
		display: none;
	}

	/* Offen ist es genau dann, wenn aria-hidden auf "false" steht. Die
	   Klasse elementor-active setzt das Skript zusaetzlich; sie ist der
	   Rueckhalt, falls jemand spaeter nur noch damit arbeitet. */
	.elementor-nav-menu__container.elementor-nav-menu--dropdown[aria-hidden="false"],
	.elementor-nav-menu__container.elementor-nav-menu--dropdown.elementor-active {
		display: block;
	}
}


/* ==========================================================================
   4. Formular: nur die Ergaenzungen
   ========================================================================== */

/**
 * Honigtopf. Er darf nicht display: none sein und auch nicht
 * visibility: hidden. Beides erkennen die ueblichen Bots und lassen das
 * Feld dann brav leer. Also wird er aus dem Bild geschoben: fuer Menschen
 * unsichtbar, fuer ein Skript ein ganz normales Textfeld.
 */
.apo-hp {
	position: absolute;
	top: auto;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/**
 * Fehlendes Pflichtfeld. Bewusst ueber outline statt ueber border: die
 * Rahmen der Felder kommen aus der vorhandenen Seiten-CSS, und die soll
 * hier niemand ueberschreiben muessen. Eine Umrandung legt sich einfach
 * darum herum, ohne dass sich am Feld selbst etwas verschiebt.
 */
.apo-feld-fehler .elementor-field {
	outline: 2px solid #b3261e;
	outline-offset: 2px;
}

.apo-feld-fehler .elementor-field-label {
	color: #b3261e;
}

/* Kleiner Hinweis unter einem Feld, etwa welche Dateien erlaubt sind. */
.apo-feld-hinweis {
	display: block;
	flex-basis: 100%;
	margin-top: 0.35em;
	color: #6b6b6b;
	font-size: 0.85em;
	line-height: 1.4;
}

/* Knopf waehrend des Versands: sichtbar beschaeftigt, damit niemand ein
   zweites Mal drueckt. */
.elementor-button.apo-laedt {
	opacity: 0.65;
	cursor: progress;
}

.elementor-button.apo-laedt:after {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-left: 0.6em;
	vertical-align: -0.15em;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: apo-dreht 0.7s linear infinite;
}

@keyframes apo-dreht {
	to {
		transform: rotate(360deg);
	}
}

/**
 * Die einzige Stelle mit !important im ganzen Blatt. Die Meldungen sind
 * anfangs mit dem HTML-Attribut hidden versehen, und mehrere Themes setzen
 * fuer .elementor-message ein display, das dieses Attribut aushebelt. Eine
 * versehentlich sichtbare Erfolgsmeldung waere schlimmer als diese
 * Ausnahme.
 */
.elementor-message[hidden] {
	display: none !important;
}

.elementor-message {
	margin-top: 12px;
}

.elementor-message-success {
	color: #1c7c3c;
}

.elementor-message-danger {
	color: #b3261e;
}

/**
 * Grundgeruest der Feldreihen. Auch das brachte Pro mit: ohne die
 * Umbruch-Regel liegen Beschriftung und Feld nebeneinander, weil
 * .elementor-column aus dem kostenlosen Elementor bereits ein Flex-Element
 * ist. Abstaende kommen weiterhin aus der Seiten-CSS; die Werte in var()
 * sind nur der Rueckfall, wenn dort nichts gesetzt ist.
 */
.elementor-form-fields-wrapper {
	display: flex;
	flex-wrap: wrap;
}

.elementor-form-fields-wrapper > .elementor-field-group {
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: var(--e-form-row-gap, 12px);
	padding-right: calc(var(--e-form-column-gap, 10px) / 2);
	padding-left: calc(var(--e-form-column-gap, 10px) / 2);
}

.elementor-field-group > .elementor-field-label {
	flex-basis: 100%;
}

.elementor-field-group > .elementor-field {
	flex-grow: 1;
	max-width: 100%;
}

.elementor-field-textual {
	width: 100%;
}

/* Ankreuzfelder und Auswahlknoepfe untereinander, ausser sie sollen
   ausdruecklich in eine Zeile. */
.elementor-field-subgroup {
	display: flex;
	flex-basis: 100%;
	flex-direction: column;
}

.elementor-field-subgroup.elementor-subgroup-inline {
	flex-direction: row;
	flex-wrap: wrap;
}

.elementor-field-subgroup.elementor-subgroup-inline .elementor-field-option {
	margin-right: 1em;
}

.elementor-field-type-submit {
	align-items: flex-end;
}


/* ==========================================================================
   5. Wer keine Bewegung mag
   ========================================================================== */

/**
 * Systemeinstellung "Bewegung reduzieren" respektieren. Die Zustaende
 * bleiben, nur der Weg dorthin faellt weg. Die Rueckseite der Flip-Box
 * erscheint dann eben sofort.
 */
@media (prefers-reduced-motion: reduce) {

	.elementor-flip-box__layer,
	.elementor-nav-menu--main .sub-menu.elementor-nav-menu--dropdown,
	.elementor-nav-menu--main .elementor-item:before,
	.elementor-nav-menu--main .elementor-item:after {
		transition-duration: 0.01ms;
	}

	.elementor-button.apo-laedt:after {
		animation: none;
	}
}

/* Kopfzeile beim Scrollen oben halten (Ersatz fuer Pro-Sticky "top"). Version 1.1 */
.apo-sticky-top { position: sticky; top: 0; z-index: 1000; }
.admin-bar .apo-sticky-top { top: 32px; }
@media (max-width: 782px) { .admin-bar .apo-sticky-top { top: 46px; } }

/* ==========================================================================
   Pop-ups (Ersatz fuer Elementor-Pro-Pop-ups, Version 1.3)
   Masse, Farben, Rundung und Schatten kommen als CSS-Variablen aus den
   gespeicherten Pop-up-Einstellungen (siehe apo-widgets.php, wp_footer).
   ========================================================================== */
.apo-popup { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 16px; background: var(--apo-popup-overlay, rgba(0, 0, 0, .8)); }
.apo-popup[hidden] { display: none !important; }
.apo-popup__box { position: relative; width: var(--apo-popup-breite, 640px); max-width: 100%;
  background: var(--apo-popup-bg, #fff); border-radius: var(--apo-popup-radius, 0);
  box-shadow: var(--apo-popup-schatten, none); overflow: hidden; }
.apo-popup__inhalt { height: var(--apo-popup-hoehe, auto); max-height: 85vh; overflow: auto; }
.apo-popup__schliessen { position: absolute; top: 8px; right: 10px; z-index: 2; border: 0; background: transparent; color: var(--e-global-color-primary, #444);
  font: 32px/1 sans-serif; padding: 4px 8px; cursor: pointer; }
.apo-popup__schliessen:hover, .apo-popup__schliessen:focus { color: var(--apo-popup-x-hover, #000); outline: none; }
body.apo-popup-offen { overflow: hidden; }
@media (max-width: 1024px) { .apo-popup__box { width: var(--apo-popup-breite-tablet, var(--apo-popup-breite, 640px)); } }
@media (max-width: 767px)  { .apo-popup__box { width: var(--apo-popup-breite-mobil, 92vw); } .apo-popup__inhalt { max-height: 80vh; } }

/* Pro-Theme-Builder-Hilfsregeln (standen in jeder post-<id>.css, fehlen ohne Pro). Version 1.5 */
.elementor-location-header:before, .elementor-location-footer:before { clear: both; content: ""; display: table; }