/**
 * HWFF: Anpassungen des Block-Markups an das Verhalten von Elementor.
 *
 * Die eigentlichen Stilwerte (Abstände, Farben, Schriften) stehen in elementor-werte.css und stammen
 * unverändert aus Elementor. Hier steht nur, was das andere Markup der Blöcke ausgleicht.
 */

/*
 * Reine Text-Hüllen aus der DOM-Umwandlung (Text oder Inline-Elemente direkt in einem div bei Elementor)
 * erzeugen keine eigene Box, damit sich die Inline-Elemente verhalten wie im Original.
 * (Der Abstand-Nullwert für umgewandelte divs steht am Anfang von elementor-werte.css.)
 */
.hwff-d p.hwff-lauf {
	display: contents;
}

/* Hintergrund-Überlagerung (bei Elementor ein eigenes div). */
.hwff-has-overlay::before {
	content: "";
	pointer-events: none;
}

/* Font-Awesome-Icons als CSS-Masken (Formen in icons.css). */
li.hwff-fa::before,
.wp-block-button.hwff-fa > .wp-block-button__link::before {
	content: "";
	display: inline-block;
	flex-shrink: 0;
	width: 1em;
	height: 1em;
	background-color: currentColor;
	-webkit-mask: var(--hwff-fa) center / contain no-repeat;
	mask: var(--hwff-fa) center / contain no-repeat;
}

/* Akkordeons sind native details-Elemente. */
.hwff-d .wp-block-details > summary {
	cursor: pointer;
	list-style: none;
}

.hwff-d .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

/* Popup «Mitgliedschaftsantrag»: Werte aus den Popup-Einstellungen in Elementor (Dokument 605). */
.hwff-popup {
	width: 826px;
	height: 1030px;
	max-width: 100vw;
	max-height: 100vh;
	padding: 0;
	border: 0;
	background-color: #fff;
	overflow: auto;
}

.hwff-popup[open] {
	animation: fadeIn 1.25s both;
}

.hwff-popup::backdrop {
	background-color: #00000080;
}

.hwff-popup__zu {
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 2;
	width: 20px;
	height: 20px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.hwff-popup__zu::before,
.hwff-popup__zu::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #333;
	transform: rotate(45deg);
}

.hwff-popup__zu::after {
	transform: rotate(-45deg);
}

@media (max-width: 1024px) {
	.hwff-popup {
		width: 75vw;
		height: 75vh;
	}
}

@media (max-width: 767px) {
	.hwff-popup {
		width: 100vw;
		height: 100vh;
		margin-top: 0;
	}
}

/*
 * Karussell (bisher Elementor «Media Carousel»): Höhe 230 px und Bild «contain» wie Elementor,
 * Pfeile wie die Swiper-Pfeile von Elementor (20 px, siehe elementor-werte.css .hwff-e-… für die Grösse).
 */
.hwff-d .wp-block-gallery.hwff-karussell {
	display: block;
	position: relative;
	overflow: hidden;
	height: 230px;
}

.hwff-karussell__spur {
	display: flex;
	gap: var(--hwff-abstand, 10px);
	height: 100%;
}

.hwff-d .wp-block-gallery.hwff-karussell .hwff-karussell__spur > figure.wp-block-image:not(#hwff) {
	flex: 0 0 calc((100% - (var(--hwff-spv, 3) - 1) * var(--hwff-abstand, 10px)) / var(--hwff-spv, 3));
	width: auto;
	height: 100%;
	margin: 0;
}

.hwff-d .wp-block-gallery.hwff-karussell figure.wp-block-image:not(#hwff) a,
.hwff-d .wp-block-gallery.hwff-karussell figure.wp-block-image:not(#hwff) img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hwff-karussell__pfeil {
	position: absolute;
	top: 50%;
	z-index: 1;
	width: 20px;
	height: 20px;
	margin-top: -10px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: #eeeeee;
}

.hwff-karussell__pfeil::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%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 1000 1000'%3E%3Cpath d='M646 125C629 125 613 133 604 142L308 442C296 454 292 471 292 487 292 504 296 521 308 533L604 854C617 867 629 875 646 875 663 875 679 871 692 858 704 846 713 829 713 812 713 796 708 779 692 767L438 487 692 225C700 217 708 204 708 187 708 171 704 154 692 142 675 129 663 125 646 125Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.hwff-karussell__pfeil--prev {
	left: 10px;
}

.hwff-karussell__pfeil--next {
	right: 10px;
	transform: scaleX(-1);
}

/*
 * Einblende-Animationen wie Elementor: unsichtbar bis im Bild, dann animiert (Dauer wie .animated).
 * Durchsichtig statt «visibility: hidden»: Links bleiben per Tastatur erreichbar und Screenreader lesen den
 * Inhalt (hwff.js blendet beim Fokus sofort ein). Nur mit hwff-anim-js, also nicht bei «Bewegung reduzieren».
 */
.hwff-anim-js .hwff-anim:not(.hwff-anim-on) {
	opacity: 0;
}

.hwff-anim-on {
	animation-duration: 1.25s;
	animation-fill-mode: both;
}

.hwff-anim-on.hwff-anim-slow {
	animation-duration: 2s;
}

.hwff-anim-on.hwff-anim-fast {
	animation-duration: 0.75s;
}

@media (prefers-reduced-motion: reduce) {
	.hwff-anim-on {
		animation: none !important;
	}
}

/*
 * Kopfzeile: Menü (bisher Elementor «Nav Menu» 3b4c4b6e). Werte aus post-1579.css und im Browser gemessen:
 * Space Grotesk 18 px / 400, Zeilenhöhe 1em, Innenabstand 8 px oben und unten, 50 px zwischen den Punkten,
 * rechtsbündig, Farbe #202124, Hover und aktive Seite #FFB500. Tablet (≤ 1024 px): 14 px, kein Innenabstand,
 * 15 px Abstand. Handy (≤ 767 px): Hamburger 25 px, Menü klappt als gelbe Liste unter der Kopfzeile auf
 * (wie Elementor «Dropdown», volle Breite): 17 px, Innenabstand 15 px 20 px, aktive Seite #FFB500 auf Weiss.
 */
.hwff-d .hwff-w-nav-menu.wp-block-navigation {
	font-family: "Space Grotesk", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1em;
	text-transform: capitalize;
	color: #202124;
	justify-content: flex-end;
}

.hwff-d .hwff-w-nav-menu .wp-block-navigation__container {
	gap: 50px;
	justify-content: flex-end;
}

.hwff-d .hwff-w-nav-menu .wp-block-navigation-item__content {
	padding: 8px 0;
	color: #202124;
	text-decoration: none;
	white-space: nowrap; /* wie Elementor: Menüpunkte brechen nie um */
}

.hwff-d .hwff-w-nav-menu .wp-block-navigation-item__content:hover,
.hwff-d .hwff-w-nav-menu .current-menu-item > .wp-block-navigation-item__content,
.hwff-d .hwff-w-nav-menu .wp-block-navigation-item__content[aria-current="page"] {
	color: #ffb500;
}

@media (max-width: 1024px) {
	.hwff-d .hwff-w-nav-menu.wp-block-navigation {
		font-size: 14px;
	}

	.hwff-d .hwff-w-nav-menu .wp-block-navigation__container {
		gap: 15px;
	}

	.hwff-d .hwff-w-nav-menu .wp-block-navigation-item__content {
		padding: 0;
	}
}

@media (max-width: 767px) {
	/* Hamburger schon unter 768 px wie bei Elementor (WordPress klappt erst unter 600 px zu). */
	.hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		padding: 6.25px; /* Elementor: 0.25em bei 25 px */
		border-radius: 3px;
		background-color: #fff;
		color: #000;
	}

	/* Hamburger-Form von Elementor (eicon-menu-bar, drei Striche) statt der zwei WordPress-Striche. */
	.hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-open svg {
		display: none;
	}

	.hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-open::before {
		content: "";
		display: block;
		width: 25px;
		height: 25px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201000%27%3E%3Cpath%20d%3D%27M104%20333H896C929%20333%20958%20304%20958%20271S929%20208%20896%20208H104C71%20208%2042%20237%2042%20271S71%20333%20104%20333ZM104%20583H896C929%20583%20958%20554%20958%20521S929%20458%20896%20458H104C71%20458%2042%20487%2042%20521S71%20583%20104%20583ZM104%20833H896C929%20833%20958%20804%20958%20771S929%20708%20896%20708H104C71%20708%2042%20737%2042%20771S71%20833%20104%20833Z%27/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201000%27%3E%3Cpath%20d%3D%27M104%20333H896C929%20333%20958%20304%20958%20271S929%20208%20896%20208H104C71%20208%2042%20237%2042%20271S71%20333%20104%20333ZM104%20583H896C929%20583%20958%20554%20958%20521S929%20458%20896%20458H104C71%20458%2042%20487%2042%20521S71%20583%20104%20583ZM104%20833H896C929%20833%20958%20804%20958%20771S929%20708%20896%20708H104C71%20708%2042%20737%2042%20771S71%20833%20104%20833Z%27/%3E%3C/svg%3E") center / contain no-repeat;
	}

	.hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	.hwff-d .hwff-w-nav-menu.wp-block-navigation {
		justify-content: flex-start;
	}

	/*
	 * Aufgeklappt: gelbe Liste in voller Breite, 5 px unter dem Hamburger (Position setzt hwff.js).
	 * Werte am Elementor-Original gemessen: 14 px, Zeilenhöhe 14 px, Innenabstand 15 px 20 px,
	 * Hintergrund und Rand #FFB500, aktive Seite #FFB500 auf Weiss. «:root» schlägt die Weiss-Regel von WordPress 7.1.
	 */
	:root .hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container.is-menu-open {
		position: fixed;
		top: calc(var(--hwff-menue-oben, 143px) + 5px);
		right: 0;
		bottom: auto;
		left: 0;
		height: auto;
		padding: 0;
		border: 1px solid #ffb500;
		background-color: #ffb500;
		color: #202124;
		animation: none;
	}

	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation__responsive-close,
	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation__responsive-dialog,
	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation__responsive-container-content {
		margin: 0;
		padding: 0;
		max-width: none;
		align-items: stretch;
	}

	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		align-self: stretch;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: 0;
	}

	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation-item {
		width: 100%;
		max-width: none;
		margin: 0;
	}

	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		padding: 15px 20px;
		font-size: 14px;
		line-height: 14px;
		color: #202124;
	}

	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation-item__content:hover,
	:root .hwff-d .hwff-w-nav-menu .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	:root .hwff-d .hwff-w-nav-menu .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		color: #ffb500;
		background-color: #fff;
	}

	/* Schliessen-Kreuz an der Stelle des Hamburgers (wie das Elementor-Kreuz), Hamburger solange verstecken. */
	:root .hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: var(--hwff-zu-oben, 105px);
		left: var(--hwff-zu-links, 31px);
		width: 38px;
		height: 38px;
		padding: 6.25px;
		border-radius: 3px;
		background-color: #fff;
		color: #000;
	}

	/* Kreuz-Form von Elementor (eicon-close) statt des dünneren WordPress-Kreuzes. */
	:root .hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	:root .hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-close::before {
		content: "";
		display: block;
		width: 25px;
		height: 25px;
		background-color: currentColor;
		-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201000%27%3E%3Cpath%20d%3D%27M742%20167L500%20408%20258%20167C246%20154%20233%20150%20217%20150%20196%20150%20179%20158%20167%20167%20154%20179%20150%20196%20150%20212%20150%20229%20154%20242%20171%20254L408%20500%20167%20742C138%20771%20138%20800%20167%20829%20196%20858%20225%20858%20254%20829L496%20587%20738%20829C750%20842%20767%20846%20783%20846%20800%20846%20817%20842%20829%20829%20842%20817%20846%20804%20846%20783%20846%20767%20842%20750%20829%20737L588%20500%20833%20258C863%20229%20863%20200%20833%20171%20804%20137%20775%20137%20742%20167Z%27/%3E%3C/svg%3E") center / contain no-repeat;
		mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201000%201000%27%3E%3Cpath%20d%3D%27M742%20167L500%20408%20258%20167C246%20154%20233%20150%20217%20150%20196%20150%20179%20158%20167%20167%20154%20179%20150%20196%20150%20212%20150%20229%20154%20242%20171%20254L408%20500%20167%20742C138%20771%20138%20800%20167%20829%20196%20858%20225%20858%20254%20829L496%20587%20738%20829C750%20842%20767%20846%20783%20846%20800%20846%20817%20842%20829%20829%20842%20817%20846%20804%20846%20783%20846%20767%20842%20750%20829%20737L588%20500%20833%20258C863%20229%20863%20200%20833%20171%20804%20137%20775%20137%20742%20167Z%27/%3E%3C/svg%3E") center / contain no-repeat;
	}

	:root.has-modal-open .hwff-d .hwff-w-nav-menu .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}
}

/* Akkordeons: Inhalt zeigt der Browser über details[open]; Elementor/EAEL blendeten ihn per Skript ein. */
.hwff-d .wp-block-details[open] > .eael-accordion-content,
.hwff-d .wp-block-details[open] > .hwff-tab-content {
	display: block;
}

/*
 * Klassische Galerie (Bestellung): Elementor reiht die Bilder als inline-block ohne Leerraum dazwischen.
 * Im Block-Markup steht zwischen den Blöcken ein Zeilenumbruch, der sonst die zweite Spalte umbrechen liesse.
 */
.hwff-d .hwff-w-image-gallery .gallery {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
}

/* Beitragslisten: Autor, Datum und Zeit stehen wie bei Elementor in einer Zeile (dort span-Elemente). */
.hwff-d .hwff-post__meta-data > * {
	display: inline;
}

/*
 * «Weiterlesen» ist bei Elementor ein Link in einer Textzeile (Zeilenhöhe der Liste, 24 px),
 * der WordPress-Block setzt ihn als Block (21 px). Lange Wörter im Titel trennt Elementor nicht
 * (WordPress: word-break: break-word), so bricht der Titel auf dem Handy gleich um wie bisher.
 */
.hwff-d .hwff-posts-container .wp-block-read-more.hwff-post__read-more {
	display: inline;
}

.hwff-d .hwff-posts-container .wp-block-post-title.hwff-post__title {
	word-break: normal;
}

/* Beitragsinfo im Einzelbeitrag: Icon vor «Veröffentlicht am:» wie die Icon-Liste von Elementor. */
.hwff-d .hwff-post-info .hwff-fa::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-inline-end: 5px;
	vertical-align: middle;
	background-color: currentColor;
	-webkit-mask: var(--hwff-fa) center / contain no-repeat;
	mask: var(--hwff-fa) center / contain no-repeat;
}

/*
 * Bildergalerie der Beiträge (bisher Elementor Pro «Gallery», Raster): Standardwerte von Elementor,
 * 4 Spalten (Tablet ≤ 1024 px: 2, Handy ≤ 767 px: 1), Bildverhältnis 3:2 zugeschnitten, 10 px Abstand.
 */
.hwff-d .wp-block-gallery.hwff-w-gallery {
	--wp--style--unstable-gallery-gap: 10px;
	gap: 10px;
}

.hwff-d .wp-block-gallery.hwff-w-gallery figure.wp-block-image:not(#hwff) {
	width: calc((100% - 30px) / 4);
	flex-grow: 0;
	margin: 0;
}

.hwff-d .wp-block-gallery.hwff-w-gallery figure.wp-block-image:not(#hwff) img {
	aspect-ratio: 3 / 2;
	width: 100%;
	height: auto;
	object-fit: cover;
}

@media (max-width: 1024px) {
	.hwff-d .wp-block-gallery.hwff-w-gallery figure.wp-block-image:not(#hwff) {
		width: calc((100% - 10px) / 2);
	}
}

@media (max-width: 767px) {
	.hwff-d .wp-block-gallery.hwff-w-gallery figure.wp-block-image:not(#hwff) {
		width: 100%;
	}
}

/*
 * Vorschaubilder der Beitragslisten: Elementor schneidet auf ein festes Verhältnis zu
 * (Standard «Item Ratio» 0.66, Bild mittig, ganze Breite), unabhängig vom Format des Bildes.
 */
.hwff-d .hwff-posts-container .hwff-post__thumbnail__link {
	position: relative;
	aspect-ratio: 1 / 0.66;
	overflow: hidden;
	margin: 0;
}

.hwff-d .hwff-posts-container .hwff-post__thumbnail__link img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Widgets: Elementor nullt den Abstand von figure-Elementen in Widgets (frontend.css), beim Bildblock ist das
 * Widget selbst das figure. Unten zählt der Abstand der (fehlenden) inneren Hülle (--hwff-hm) mit.
 * Gewicht einer Klasse: schwächer als alle Elementor-Werte des Widgets, stärker als die WordPress-Grundwerte.
 */
.hwff-w {
	margin-bottom: calc(0px + var(--hwff-hm, 0px));
}

.hwff-w:where(figure) {
	margin-top: 0;
	margin-right: 0;
	margin-left: 0;
}

/*
 * Suchseite (bisher Essential Addons «Advanced Search» f8f512a): Icons als SVG statt Font-Awesome-Schrift.
 * Treffer über der eingestellten Anzahl erscheinen erst mit «Alle Resultate anzeigen» (hwff.js).
 */
.hwff-suche-icon {
	display: inline-block;
	vertical-align: -0.125em;
}

/* !important: Die Stilwerte des Suchfelds setzen die Einträge mit höherer Gewichtung auf flex. */
.hwff-js .hwff-suche-mehr {
	display: none !important;
}

html:not(.hwff-js) .eael-advanced-search-load-more-button {
	display: none !important;
}

/*
 * Seitentitel (404-Seite, Hello Elementor): Elementor setzt den Grundwert in frontend.min.css auf «block».
 * Der Übersetzer übernimmt :root-Regeln nicht, ohne den Wert wäre der Titel eine Inline-Zeile ohne Abstände.
 */
:root {
	--page-title-display: block;
}

/* Überschrift aus einem Überschrift-Widget, im Texteditor eingefügt (Suchseite): wie .elementor-heading-title. */
.hwff-heading-title {
	padding: 0;
	margin: 0;
	line-height: 1;
}