/*
 * Header, Hauptnavigation und Footer.
 *
 * Maße und Umbrüche entsprechen exakt dem bisherigen Elementor-/ElementsKit-Aufbau
 * (Header 2544/2467, Footer 2459). Breakpoints wie bisher: Tablet ≤ 1024 px, Handy ≤ 767 px.
 */

@font-face {
	font-family: "alborn-icons";
	src: url("../fonts/alborn-icons.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Weiches Scrollen zu Ankern (wie bisher Elementor, frontend.css) */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* ---------- Header ---------- */

.alborn-header {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: stretch;
	padding: 10px 50px;
	background-color: var(--wp--preset--color--anthrazit);
}

.alborn-header__logo,
.alborn-header__nav {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
}

.alborn-header__logo {
	width: 10%;
}

.alborn-header__nav {
	width: 60%;
	justify-content: center;
}

/* Header bleibt auf dem Desktop beim Scrollen oben stehen. */
@media (min-width: 1025px) {
	.alborn-header:not(.alborn-header--home) {
		position: sticky;
		top: 0;
		z-index: 99;
	}
}

@media (max-width: 1024px) {
	.alborn-header {
		padding: 20px;
	}

	.alborn-header__logo {
		width: 20%;
	}

	.alborn-header__nav {
		width: 70%;
	}
}

@media (max-width: 767px) {
	.alborn-header {
		padding: 10px;
	}

	.alborn-header__logo {
		width: 30%;
	}

	.alborn-header__nav {
		align-items: flex-end;
	}
}

/* Startseite: transparenter Header über dem Video. */
.alborn-header--home {
	margin-top: 1em;
	padding: 0 2%;
	background: none;
}

.alborn-header--home .alborn-header__nav {
	width: 40%;
}

@media (max-width: 1024px) {
	.alborn-header--home {
		padding: 0;
	}

	.alborn-header--home .alborn-header__nav {
		width: 79%;
	}
}

@media (max-width: 767px) {
	.alborn-header--home {
		margin-top: 0;
	}

	.alborn-header--home .alborn-header__logo,
	.alborn-header--home .alborn-header__nav {
		width: 50%;
	}
}

/* ---------- Hauptnavigation ---------- */

.alborn-nav {
	--nav-color: #fff;
	--nav-hover: #fff;
	--nav-arrow: #fff;
	position: relative;
}

.alborn-nav.is-style-startseite {
	--nav-hover: var(--wp--preset--color--gruen);
}

.alborn-nav button {
	cursor: pointer;
}

.alborn-nav__toggle,
.alborn-nav__head,
.alborn-nav__overlay {
	display: none;
}

.alborn-nav__panel {
	position: relative;
	z-index: 1000;
	height: 30px;
}

.alborn-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alborn-nav__item,
.alborn-nav__subitem {
	position: relative;
}

.alborn-nav .alborn-nav__list .alborn-nav__link {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 10px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	font-weight: 500;
	color: var(--nav-color);
	text-decoration: none;
	transition: all 0.4s ease;
}

/* Selektoren mit .alborn-nav__list: stärker als das Hello-Reset für Links ohne href
   („a:not([href]):not([tabindex])“), z. B. „About us“ / „Über uns“. */

/* Platz für den Pfeil: bisher lag er im Link (Abstand 6 px + 11 px Symbol + 6 px). */
.alborn-nav .has-children > .alborn-nav__link {
	padding-right: 33px;
}

.alborn-nav .alborn-nav__list .alborn-nav__item:hover > .alborn-nav__link,
.alborn-nav .alborn-nav__list .alborn-nav__link:hover,
.alborn-nav .alborn-nav__list .alborn-nav__link:focus,
.alborn-nav .alborn-nav__list .alborn-nav__link:active {
	color: var(--nav-hover);
}

.alborn-nav .alborn-nav__list .alborn-nav__item.current-menu-item > .alborn-nav__link,
.alborn-nav .alborn-nav__list .alborn-nav__item.current-menu-ancestor > .alborn-nav__link {
	color: #fff;
}

/* Pfeil zum Aufklappen der Untermenüs */
.alborn-nav .alborn-nav__subtoggle {
	position: absolute;
	top: calc(50% - 8.25px); /* senkrecht mittig wie bisher im Link (16,5 px Zeilenhöhe), auch bei umbrochenem Menü */
	right: 16px;
	display: block;
	width: auto;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--nav-arrow);
	transition: none;
}

/* Eigenes Element im Button: Buttons berechnen ihre Zeilenhöhe anders als normale Blöcke. */
.alborn-nav__arrow {
	display: block;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 11px;
	font-style: normal;
	font-weight: 900;
	line-height: 1.5;
	text-align: start;
}

.alborn-nav__arrow::before {
	content: "\e994";
	font-family: "alborn-icons";
	font-style: normal;
	font-weight: 400;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.alborn-nav .alborn-nav__list .alborn-nav__item:hover > .alborn-nav__subtoggle {
	color: var(--nav-hover);
}

.alborn-nav .alborn-nav__list .alborn-nav__item.current-menu-ancestor > .alborn-nav__subtoggle {
	color: #fff;
}

/* Untermenüs */
.alborn-nav__sub {
	margin: 0;
	padding: 10px 0;
	list-style: none;
	min-width: 220px;
	border: 1px solid #dadada;
	background-color: #f4f4f4;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.4s ease;
}

/* Sprachwahl (inc/language-switcher.php): Das bisherige WPML-CSS verschmälerte nur das Untermenü
   der deutschen Sprache (#menu-item-wpml-ls-3-de); auf englischen Seiten bleibt es 220 px breit. */
.alborn-nav .alborn-lang--de > .alborn-nav__sub {
	min-width: 150px;
}

.alborn-nav .alborn-nav__list .alborn-nav__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 10px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 14px;
	font-weight: 400;
	color: #000;
	text-decoration: none;
	transition: all 0.3s;
}

.alborn-nav .alborn-nav__list .alborn-nav__subitem:hover > .alborn-nav__sublink,
.alborn-nav .alborn-nav__list .alborn-nav__sublink:hover,
.alborn-nav .alborn-nav__list .alborn-nav__sublink:focus,
.alborn-nav .alborn-nav__list .alborn-nav__sublink:active {
	color: #707070;
	background-color: rgba(255, 255, 255, 0.5);
}

.alborn-nav .alborn-nav__list .alborn-nav__subitem.current-menu-item > .alborn-nav__sublink {
	color: #707070;
}

/* Sprachwahl: Flagge und Sprachname */
.alborn-nav .alborn-lang__flag {
	display: block;
	margin-right: 5px;
}

.alborn-nav .alborn-lang__flag + span {
	margin-left: 0.3em;
}

@media (min-width: 1025px) {
	.alborn-nav__sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 999;
		box-shadow: 0 10px 30px 0 rgba(45, 45, 45, 0.2);
		transform: translateY(-10px);
		pointer-events: none;
	}

	.alborn-nav__item:hover > .alborn-nav__sub,
	.alborn-nav__item:focus-within > .alborn-nav__sub,
	.alborn-nav__item.is-open > .alborn-nav__sub {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
		pointer-events: auto;
	}
}

/* Tablet und Handy: Seitenmenü von links */
@media (max-width: 1024px) {
	.alborn-nav {
		--nav-color: #000;
	}

	/* Hintergrund bei Hover/Fokus (#c36) kommt wie bisher aus dem Hello-Reset in base.css. */
	.alborn-nav .alborn-nav__toggle {
		position: relative;
		z-index: 10;
		display: block;
		float: right;
		width: 50px;
		padding: 10px;
		border: 4px solid var(--wp--preset--color--rot);
		border-radius: 0;
		color: #000;
	}

	.alborn-nav__bar {
		display: block;
		width: 100%;
		height: 1px;
		margin-bottom: 4px;
		background-color: var(--wp--preset--color--rot);
	}

	.alborn-nav__bar:last-child {
		margin-bottom: 0;
	}

	.alborn-nav .alborn-nav__toggle:hover .alborn-nav__bar {
		background-color: rgba(0, 0, 0, 0.5);
	}

	.alborn-nav__panel {
		position: fixed;
		top: 0;
		left: -100vw;
		z-index: 1000;
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 379px;
		height: 100%;
		padding-bottom: 10px;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #f7f7f7;
		transition: left 0.6s cubic-bezier(0.6, 0.1, 0.68, 0.53);
	}

	.alborn-nav.is-open .alborn-nav__panel {
		left: 0;
	}

	.alborn-nav__overlay {
		position: fixed;
		top: 0;
		left: -100%;
		z-index: 14;
		display: block;
		width: 100%;
		height: 100%;
		background-color: rgba(51, 51, 51, 0.5);
		transition: all 0.6s cubic-bezier(0.6, 0.1, 0.68, 0.53) 0.4s;
	}

	.alborn-nav.is-open .alborn-nav__overlay {
		left: 0;
		transition: all 0.6s cubic-bezier(0.22, 0.61, 0.24, 1) 0s;
	}

	.alborn-nav__head {
		position: relative;
		z-index: 5;
		display: block;
		width: 100%;
		padding: 15px;
	}

	.alborn-nav .alborn-nav__close {
		position: relative;
		z-index: 10;
		float: right;
		width: 50px;
		margin: 8px;
		padding: 10px;
		border: 0;
		border-radius: 0;
		font-size: 30px;
		color: #3b3b3b;
	}

	.alborn-nav .alborn-nav__close:hover {
		color: rgba(0, 0, 0, 0.5);
	}

	.alborn-nav__list {
		display: block;
		overflow-y: auto;
	}

	.alborn-nav .alborn-nav__list .alborn-nav__link {
		padding: 10px 15px;
	}

	.alborn-nav .has-children > .alborn-nav__link {
		padding-right: 15px;
	}

	.alborn-nav .alborn-nav__subtoggle {
		top: 10.25px; /* (47 px Zeilenhöhe − 26,5 px Pfeil) / 2 */
		right: 21px;
		padding: 4px 15px;
		border: 1px solid;
		border-radius: 30px;
	}

	.alborn-nav__sub {
		position: relative;
		display: none;
		border: 0;
	}

	.alborn-nav__item.is-open > .alborn-nav__sub {
		display: block;
		opacity: 1;
		visibility: visible;
	}

	.alborn-nav .alborn-nav__list .alborn-nav__sublink {
		padding: 15px;
		font-size: 12px;
	}
}

@media (max-width: 767px) {
	.alborn-nav.is-style-startseite .alborn-nav__toggle {
		border-width: 2px;
	}
}

/* ---------- Footer ---------- */

.alborn-footer {
	display: flex;
	padding: 20px 0;
	background-color: var(--wp--preset--color--anthrazit);
}

.alborn-footer__inner {
	display: flex;
	align-items: stretch;
	gap: 10px;
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

.alborn-footer__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	padding: 10px;
}

.alborn-footer__contact {
	padding: 20px;
	background-color: var(--wp--preset--color--gruen);
	color: #fff;
}

@media (max-width: 1024px) {
	.alborn-footer__inner {
		padding: 0 4%;
	}
}

@media (max-width: 767px) {
	.alborn-footer__inner {
		flex-wrap: wrap;
	}
}

.alborn-menu-list__list {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: normal;
}

.alborn-menu-list .menu-item a {
	display: flex;
	align-items: center;
	padding: 10px 0;
	font-family: var(--wp--preset--font-family--roboto);
	font-weight: 600;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
}

.alborn-footer__contact p {
	margin: 0;
}

.alborn-footer__contact a,
.alborn-footer__contact a:hover {
	color: #fff;
}

.alborn-footer .wp-block-social-links.alborn-social {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 0;
	padding: 0;
	font-size: 20px;
	line-height: 0;
}

.alborn-footer .wp-block-social-links.alborn-social .wp-social-link {
	margin: 0;
	border-radius: 50%;
	background-color: #000;
	color: #fff;
}

.alborn-footer .wp-block-social-links.alborn-social .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
}

.alborn-footer .wp-block-social-links.alborn-social .alborn-social-icon {
	display: block;
	width: 20px;
	height: 20px;
	fill: #fff;
}

/* ---------- Startseite: Kopfbereich mit Video (bisher Elementor-Vorlage 2467/3305) ---------- */
/* Zeilenhöhen in em wie bei Elementor: rundet auf Subpixel anders als ein reiner Faktor. */

.alborn-hero {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-height: 734px;
	padding: 10px;
}

/* Alle Inhalte über dem Video (wie die Elementor-Container: position relative). */
.alborn-hero > * {
	position: relative;
	flex-shrink: 0;
	width: 100%; /* wie Elementor-Container; nötig für den umbrechenden Aufbau auf dem Handy */
	margin: 0;
}

.alborn-hero > .alborn-header--home {
	margin-top: 1em;
}

@media (max-width: 767px) {
	.alborn-hero > .alborn-header--home {
		margin-top: 0;
	}
}

.alborn-hero > .alborn-hero__video {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.alborn-hero__video video {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Grüne Fläche unten rechts über dem Video */
.alborn-hero__video::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: url("../img/hero-overlay.png") no-repeat 100% 100% / 65% auto;
}

/* Textbox „Innovative Lösungen …“ */
.alborn-hero > .alborn-hero__claim {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 35%;
	margin: 5% 0 15% 10%;
	padding: 20px;
	background-color: rgba(0, 79, 56, 0.82);
}

.alborn-hero .alborn-hero__title {
	margin: 0;
	padding-left: 80px;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 35px;
	font-style: italic;
	font-weight: 900;
	line-height: 1.3em;
	color: #fff;
}

/* Bisher mit der nicht vorhandenen Schrift „Roboto Lokal“ gesetzt – der Browser nimmt die
   Systemschrift. Auf dem Desktop bewusst so übernommen, damit die Darstellung gleich bleibt. */
.alborn-hero .alborn-hero__lead {
	padding-left: 68px;
	font-family: "Roboto Lokal", sans-serif;
	font-size: 17px;
	font-weight: 300;
	line-height: 1.2em;
	color: #fff;
}

/* Abstand unter dem Text wie bisher (0,9rem). Stärker als WordPress' „letztes Kind ohne Abstand“. */
.alborn-hero .alborn-hero__claim .alborn-hero__lead {
	margin: 0 0 0.9rem;
}

/* Kontaktbox */
.alborn-hero > .alborn-hero__contact {
	display: flex;
	flex-direction: column;
	align-self: flex-end;
	gap: 20px;
	width: 33.618%;
	padding: 10px;
}

.alborn-hero .alborn-hero__contact-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 25px;
	font-style: italic;
	font-weight: 900;
	line-height: 1.3em;
	color: #fff;
}

.alborn-hero .alborn-hero__divider {
	width: 70px;
	height: 0;
	margin: 3px 0;
	border: 0;
	border-top: 4px solid var(--wp--preset--color--rot);
	opacity: 1;
}

.alborn-hero__contact-text > p {
	margin: 0;
}

.alborn-hero .alborn-hero__text {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 17px;
	line-height: normal;
	color: #fff;
}

.alborn-hero .alborn-hero__text--mail {
	line-height: 1.2em;
}

.alborn-hero .alborn-hero__text a,
.alborn-hero .alborn-hero__text a:hover {
	color: #fff;
	text-decoration: none;
}

.alborn-hero .alborn-hero__actions {
	display: block;
}

.alborn-hero .alborn-hero__film {
	display: block;
}

.alborn-hero .alborn-hero__film .wp-block-button__link {
	display: inline-block;
	padding: 15px;
	border-radius: 0;
	background-color: var(--wp--preset--color--rot);
	font-family: var(--wp--preset--font-family--montserrat);
	font-size: 18px;
	font-style: italic;
	font-weight: 900;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	color: #fff;
	transition: transform 0.3s;
}

.alborn-hero .alborn-hero__film .wp-block-button__link:hover,
.alborn-hero .alborn-hero__film .wp-block-button__link:focus {
	transform: scale(1.1);
}

/* Pfeil nach unten */
.alborn-hero > .alborn-hero__more {
	text-align: center;
}

.alborn-hero__more a {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	font-size: 50px;
	line-height: 50px;
	color: #fff;
	text-decoration: none;
	transition: transform 0.3s;
}

.alborn-hero__more a::before {
	content: "\e874";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	font-family: "alborn-icons";
	font-style: normal;
	font-weight: 400;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.alborn-hero__more a:hover {
	color: var(--wp--preset--color--rot);
	transform: scale(0.9);
}

@media (max-width: 1024px) {
	.alborn-hero__video::after {
		background-size: 900px auto;
	}

	.alborn-hero > .alborn-hero__claim {
		align-items: center;
		justify-content: center;
		width: 50%;
		margin: 5% 0 15%;
		padding: 10px;
		background-color: rgba(0, 79, 56, 0.83);
	}

	.alborn-hero .alborn-hero__title {
		padding-left: 0;
		font-size: 18px;
	}

	.alborn-hero .alborn-hero__lead {
		padding-left: 0;
		font-family: var(--wp--preset--font-family--roboto);
		text-align: center;
	}

	.alborn-hero > .alborn-hero__contact {
		width: 33%;
	}

	.alborn-hero .alborn-hero__actions {
		margin-top: 20px;
	}
}

@media (max-width: 767px) {
	.alborn-hero {
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.alborn-hero__video::after {
		background-size: 745px auto;
	}

	.alborn-hero > .alborn-hero__claim {
		width: 100%;
		margin: 0;
		padding: 20px;
	}

	.alborn-hero .alborn-hero__title,
	.alborn-hero .alborn-hero__contact-title {
		font-size: 23px;
	}

	.alborn-hero > .alborn-hero__contact {
		width: 100%;
	}

	.alborn-hero__more a {
		width: 25px;
		height: 25px;
		font-size: 25px;
		line-height: 25px;
	}
}

/* ---------- Video-Dialog (Imagefilm; bisher Elementor-Pro-Popup 3518) ---------- */

.alborn-dialog {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 0, 0, 0.8);
}

.alborn-dialog.is-open {
	display: flex;
}

.alborn-dialog__video {
	position: relative;
	width: 1300px;
	max-width: 100%;
	margin: 0;
	background-color: #fff;
	box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, 0.2);
}

.alborn-dialog__video video {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9; /* wie bisher: Größe steht schon vor dem Laden des Videos fest */
	background-color: #000;
	object-fit: cover;
}

.alborn-dialog__close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 9999;
	display: flex;
	padding: 0;
	border: 0;
	background: none;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
}

.alborn-dialog .alborn-dialog__close:hover,
.alborn-dialog .alborn-dialog__close:focus {
	background: none;
}

.alborn-dialog__close svg {
	width: 1em;
	height: 1em;
	fill: #1f2124;
}

body.alborn-dialog-open {
	overflow: hidden;
}

/* ---------- Seiteninhalte (Gutenberg) ----------
 * Bausteine, in die migration/lib/elementor-to-blocks.php die Elementor-Seiten übersetzt.
 * Maße wie die bisherigen Elementor-Container: Inhaltsbreite 1140 px, Abschnittsabstand 50 px,
 * Abstand zwischen Elementen 20 px. Präfix :is(.page-content, .is-root-container) = Seiteninhalt im Frontend bzw. im
 * Block-Editor; macht die Regeln zugleich stärker als WordPress' Flow-Layout
 * („letztes Kind ohne Abstand“, Spezifität 0,2,0).
 */

:is(.page-content, .is-root-container) .alborn-stack {
	display: flex;
	flex-direction: column;
	gap: 50px;
}

/* Abschnitt mit zentrierter Inhaltsbreite (bisher „boxed“-Container mit 10 px Innenabstand) */
:is(.page-content, .is-root-container) .alborn-section {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px max(10px, calc((100% - 1140px) / 2));
}

/* Allgemeiner Bereich (umgestellte Elementor-Container); Werte je Seite im Seiten-CSS */
:is(.page-content, .is-root-container) .alborn-con {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	min-width: 0;
	padding: 10px;
}

/* Auf dem Handy brechen Zeilen um, sofern der Bereich nichts anderes festlegt (wie bei Elementor) */
@media (max-width: 767px) {
	:is(.page-content, .is-root-container) .alborn-con {
		flex-wrap: wrap;
	}
}

/* Elemente in Bereichen: dürfen schrumpfen, nie breiter als der Bereich (wie bei Elementor) */
:is(.page-content, .is-root-container) .alborn-con > .alborn-w {
	min-width: 0;
	max-width: 100%;
}

/* Breiter Abschnitt (Inhaltsbreite 1500 px) */
:is(.page-content, .is-root-container) .alborn-section--wide {
	padding-inline: max(10px, calc((100% - 1500px) / 2));
}

/* Abschnitt mit nebeneinanderliegenden Spalten (z. B. Bild | Text) */
:is(.page-content, .is-root-container) .alborn-section--row {
	flex-direction: row;
}

:is(.page-content, .is-root-container) .alborn-column,
:is(.page-content, .is-root-container) .alborn-box {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

:is(.page-content, .is-root-container) .alborn-column {
	width: 100%;
}

/* Container in voller Breite mit Standard-Innenabstand */
:is(.page-content, .is-root-container) .alborn-box {
	padding: 10px;
}

:is(.page-content, .is-root-container) .alborn-column--padded {
	padding: 10px;
}

/* 100 px Abstand oben/unten. Doppelte Klasse: stärker als WordPress' „erstes/letztes Kind
   ohne Abstand“ (0,2,0). */
:is(.page-content, .is-root-container) .alborn-section.alborn-mt-100 {
	margin-top: 100px;
}

:is(.page-content, .is-root-container) .alborn-section.alborn-mb-100 {
	margin-bottom: 100px;
}

/* Abschnitt ohne Innenabstand (Inhalt weiterhin auf 1140 px begrenzt) */
:is(.page-content, .is-root-container) .alborn-section.alborn-section--flush {
	padding: 0 max(0px, calc((100% - 1140px) / 2));
}

:is(.page-content, .is-root-container) .alborn-gap-10 {
	gap: 10px;
}

/* Volle Breite ohne Innenabstand */
:is(.page-content, .is-root-container) .alborn-full {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* Video in voller Breite, Format 16:9 */
:is(.page-content, .is-root-container) .alborn-video {
	margin: 0;
}

:is(.page-content, .is-root-container) .alborn-video video {
	display: flex;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background-color: #000;
}

/* Titelband: dunkler Hintergrund */
:is(.page-content, .is-root-container) .alborn-section--band {
	background-color: var(--wp--preset--color--anthrazit);
}

/* Abschnitt mit 20 px Innenabstand (z. B. Titelband der Leistungsseiten) */
:is(.page-content, .is-root-container) .alborn-section.alborn-section--pad-20 {
	padding: 20px max(20px, calc((100% - 1140px) / 2));
}

/* Überschrift mit eigener Gestaltung (Schrift, Größe, Farbe am Block) */
:is(.page-content, .is-root-container) .alborn-h {
	margin: 0;
	line-height: 1;
}

/* Link in einer Überschrift erbt die Farbe (wie Elementor) */
:is(.page-content, .is-root-container) .alborn-h a {
	color: inherit;
}

:is(.page-content, .is-root-container) .alborn-space-before {
	margin-top: 50px;
}

:is(.page-content, .is-root-container) .alborn-space-after {
	margin-bottom: 50px;
}

/* Text: mehrere Teile eines bisherigen Elementor-Textelements stehen ohne Elementabstand
   zusammen; Absätze und Zwischenüberschriften behalten die Abstände aus dem Grundstil. */
:is(.page-content, .is-root-container) .alborn-textblock {
	display: block;
}

:is(.page-content, .is-root-container) :is(p.alborn-copy, p.alborn-copy-legal, p.alborn-copy-light, p.alborn-copy-custom),
:is(.page-content, .is-root-container) .alborn-textblock p {
	margin: 0 0 0.9rem;
}

:is(.page-content, .is-root-container) .alborn-textblock :is(h1, h2, h3, h4, h5, h6) {
	margin: 0.5rem 0 1rem;
}

:is(.page-content, .is-root-container) :is(ul, ol).alborn-copy,
:is(.page-content, .is-root-container) .alborn-textblock :is(ul, ol) {
	margin: 0;
}

/* Textgestaltungen (bisher je Elementor-Textelement eingestellt) */
:is(.page-content, .is-root-container) .alborn-copy-light {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 18px;
	font-weight: 300;
	color: #000;
}

:is(.page-content, .is-root-container) .alborn-copy {
	font-size: 1.125rem;
	color: #000;
}

:is(.page-content, .is-root-container) .alborn-copy-legal {
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 17px;
	font-weight: 300;
	color: var(--wp--preset--color--anthrazit);
}

/* Links in Textfarbe, unterstrichen (bisher eigenes CSS am Abschnitt) */
:is(.page-content, .is-root-container) .alborn-links-inherit a {
	color: inherit;
	text-decoration: underline;
}

/* Überschriften wie Elementors Standard: Größe der Ebene aus dem Grundstil, Gewicht 600,
   Zeilenhöhe 1; Farbe und abweichende Größe stehen am Block. */
:is(.page-content, .is-root-container) .alborn-heading {
	margin: 0;
	font-weight: 600;
	line-height: 1;
}

/* Karten mit Icon */
:is(.page-content, .is-root-container) .alborn-cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 50px;
}

:is(.page-content, .is-root-container) .alborn-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 50px;
	border-radius: 20px;
	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
}

:is(.page-content, .is-root-container) .alborn-card--stretch {
	align-self: stretch;
}

:is(.page-content, .is-root-container) .alborn-card__body {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-height: 230px;
}

/* Icon: wie bisher in einer Textzeile, daher 7 px Unterlänge unter dem Bild */
:is(.page-content, .is-root-container) .alborn-icon {
	margin: 0;
	text-align: center;
}

:is(.page-content, .is-root-container) .alborn-icon img {
	display: inline;
	vertical-align: baseline; /* Größe (100/150 px) steht am Bild */
	max-width: none; /* Elementor-Icons schrumpfen nicht mit dem Container */
}

/* Icon-Box: Icon links, Titel und Text rechts (Handy: untereinander) */
:is(.page-content, .is-root-container) .alborn-iconbox {
	display: flex;
	align-items: center;
	gap: 80px;
}

:is(.page-content, .is-root-container) .alborn-iconbox__icon {
	flex-shrink: 0;
	margin: 0;
	line-height: 0;
}

:is(.page-content, .is-root-container) .alborn-iconbox__icon img {
	display: block;
}

:is(.page-content, .is-root-container) .alborn-iconbox__content {
	flex-grow: 1;
}

:is(.page-content, .is-root-container) .alborn-iconbox .alborn-iconbox__title {
	margin: 0.5rem 0 1rem;
	font-weight: 600;
	line-height: 1.2;
}

:is(.page-content, .is-root-container) .alborn-iconbox__title a {
	color: inherit;
	text-decoration: none;
}

:is(.page-content, .is-root-container) .alborn-iconbox .alborn-iconbox__text {
	margin: 0;
}

/* Titel als einfacher Text (ohne Überschriften-Abstände) */
:is(.page-content, .is-root-container) .alborn-iconbox .alborn-iconbox__title--plain {
	margin: 0;
	line-height: 1.5;
}

/* Kompakte Icon-Box (z. B. Download mit PDF-Symbol): oben ausgerichtet, enger Abstand */
:is(.page-content, .is-root-container) .alborn-iconbox--compact {
	align-items: flex-start;
	gap: 14px;
}

:is(.page-content, .is-root-container) .alborn-iconbox--compact .alborn-iconbox__title {
	margin-bottom: 0;
}

/* Trennlinie: kurzer roter Balken (schrumpft wie bei Elementor in schmalen Spalten) */
:is(.page-content, .is-root-container) hr.alborn-divider {
	width: 70px;
	max-width: 100%;
	height: 0;
	margin: 3px 0;
	border: 0;
	border-top: 4px solid var(--wp--preset--color--rot);
	opacity: 1;
}

/* Weiß auf rotem Grund – nach der Grundregel, sonst gewinnt deren Rot (gleiche Spezifität) */
:is(.page-content, .is-root-container) hr.alborn-divider--weiss {
	border-top-color: var(--wp--preset--color--weiss);
}

/* Bildergalerie (WordPress-Galerie, Gestaltung wie bisher von Elementor) */
:is(.page-content, .is-root-container) .alborn-gallery {
	--gallery-gap: 25px;
	width: 100%;
}

:is(.page-content, .is-root-container) .alborn-gallery--gap-50 {
	--gallery-gap: 50px;
}

:is(.page-content, .is-root-container) .alborn-gallery .gallery {
	margin: 0 calc(-1 * var(--gallery-gap)) calc(-1 * var(--gallery-gap)) 0;
}

:is(.page-content, .is-root-container) .alborn-gallery .gallery-item {
	display: inline-block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 var(--gallery-gap) var(--gallery-gap) 0;
	text-align: center;
	vertical-align: top;
}

:is(.page-content, .is-root-container) .alborn-gallery .gallery-icon {
	padding: 0;
}

:is(.page-content, .is-root-container) .alborn-gallery .gallery-item img {
	display: block;
	margin: 0 auto;
}

:is(.page-content, .is-root-container) .alborn-gallery .gallery-caption {
	display: none;
}

@media (min-width: 768px) {
	:is(.page-content, .is-root-container) .alborn-gallery .gallery-columns-2 .gallery-item { max-width: 50%; }
	:is(.page-content, .is-root-container) .alborn-gallery .gallery-columns-3 .gallery-item { max-width: 33.33%; }
	:is(.page-content, .is-root-container) .alborn-gallery .gallery-columns-4 .gallery-item { max-width: 25%; }
}

@media (min-width: 480px) and (max-width: 767px) {
	:is(.page-content, .is-root-container) .alborn-gallery .gallery .gallery-item { max-width: 50%; }
}

/* Abschnitt mit senkrecht zentriertem Inhalt (z. B. Titelbild) */
:is(.page-content, .is-root-container) .alborn-section--center {
	justify-content: center;
}

/* Bild in voller Breite der Spalte */
:is(.page-content, .is-root-container) .alborn-image {
	margin: 0;
	text-align: center;
}

:is(.page-content, .is-root-container) .alborn-image--left {
	text-align: left;
}

:is(.page-content, .is-root-container) .alborn-image--right {
	text-align: right;
}

:is(.page-content, .is-root-container) .alborn-image img {
	display: inline-block;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* Abschnitt mit verblasstem Hintergrundbild (bisher Elementor-Überlagerung, 50 % Deckkraft) */
:is(.page-content, .is-root-container) .alborn-section--faded {
	position: relative;
}

:is(.page-content, .is-root-container) .alborn-section--faded::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.5);
}

:is(.page-content, .is-root-container) .alborn-section--faded > * {
	position: relative;
}

/* 3 % Innenabstand oben/unten, seitlich nur Begrenzung auf 1140 px */
:is(.page-content, .is-root-container) .alborn-section.alborn-section--pad-y-3pct {
	padding: 3% max(0px, calc((100% - 1140px) / 2));
}

/* Links in Textfarbe (bisher eigenes CSS am Abschnitt) */
:is(.page-content, .is-root-container) .alborn-links-color a {
	color: inherit;
}

/* Flip-Box (bisher Essential Addons): dreht sich beim Überfahren, Rückseite mit Kontaktdaten */
:is(.page-content, .is-root-container) .alborn-flipbox {
	position: relative;
	width: 100%;
	height: 250px;
	overflow: hidden;
	perspective: 1000px;
}

:is(.page-content, .is-root-container) .alborn-flipbox__card {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	transition: all 500ms ease;
}

:is(.page-content, .is-root-container) .alborn-flipbox:hover .alborn-flipbox__card,
:is(.page-content, .is-root-container) .alborn-flipbox:focus-within .alborn-flipbox__card {
	transform: rotateY(180deg);
}

:is(.page-content, .is-root-container) .alborn-flipbox__front,
:is(.page-content, .is-root-container) .alborn-flipbox__back {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	border-radius: 5px;
	text-align: center;
	backface-visibility: hidden;
	transition: all 500ms ease;
}

:is(.page-content, .is-root-container) .alborn-flipbox__front {
	z-index: 2;
	transform: rotateY(0deg);
}

:is(.page-content, .is-root-container) .alborn-flipbox__back {
	transform: rotateY(180deg);
}

/* 24 px oben: bisher eine leere Icon-Zeile über dem Titel */
:is(.page-content, .is-root-container) .alborn-flipbox__inner {
	width: 100%;
	padding: 24px 30px 5px;
}

:is(.page-content, .is-root-container) .alborn-flipbox .alborn-flipbox__title {
	margin: 0.5rem 0 1rem;
	font-size: 2rem;
	font-weight: 500;
	line-height: 1.2;
}

:is(.page-content, .is-root-container) .alborn-flipbox .alborn-flipbox__text {
	margin: 0 0 0.9rem;
}

:is(.page-content, .is-root-container) .alborn-flipbox .alborn-flipbox__text--plain {
	margin: 0;
}

:is(.page-content, .is-root-container) .alborn-flipbox__text a {
	color: inherit;
}

/* Aufklappbare Einträge (bisher Elementor-Akkordeon) */
:is(.page-content, .is-root-container) .alborn-details-list {
	display: block;
}

:is(.page-content, .is-root-container) .alborn-details {
	display: flex;
	flex-direction: column;
	margin: 0;
}

:is(.page-content, .is-root-container) .alborn-details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0 10px;
	padding: 20px;
	border-bottom: 1px solid #d5d8dc;
	background-color: var(--wp--preset--color--rot);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	list-style: none;
	cursor: pointer;
}

:is(.page-content, .is-root-container) .alborn-details > summary::-webkit-details-marker {
	display: none;
}

:is(.page-content, .is-root-container) .alborn-details > summary::after {
	content: "";
	flex-shrink: 0;
	width: 12.5px;
	height: 25px;
	background: url("../icons/angle-right-white.svg") no-repeat center / contain;
}

:is(.page-content, .is-root-container) .alborn-details__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 10px;
	border: 1px solid #d5d8dc;
}

/* Bildleiste (bisher Bild-Akkordeon): Bild unter der Maus wird breiter (bis 800 px untereinander, dann höher) */
:is(.page-content, .is-root-container) .alborn-accordion {
	display: flex;
	overflow: hidden;
	border-radius: 4px;
}

:is(.page-content, .is-root-container) .alborn-accordion__item {
	position: relative;
	flex: 1;
	overflow: hidden;
	cursor: pointer;
	transition: flex 0.4s;
}

:is(.page-content, .is-root-container) .alborn-accordion__item::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.3);
	transition: all 0.3s ease-in-out;
}

:is(.page-content, .is-root-container) .alborn-accordion__item:hover {
	flex: 3;
}

:is(.page-content, .is-root-container) .alborn-accordion__item:hover::before {
	background-color: rgba(0, 0, 0, 0.5);
}

/* Variante mit Texten: Titel und Text erscheinen, wenn die Maus über dem Bild ist */
:is(.page-content, .is-root-container) .alborn-accordion--text .alborn-accordion__item {
	color: #fff;
	text-align: center;
}

:is(.page-content, .is-root-container) .alborn-accordion__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
}

:is(.page-content, .is-root-container) .alborn-accordion__inner {
	z-index: 1;
}

:is(.page-content, .is-root-container) .alborn-accordion__inner > * {
	visibility: hidden;
	opacity: 0;
	transform-style: preserve-3d;
}

:is(.page-content, .is-root-container) .alborn-accordion__title.alborn-accordion__title {
	margin: 0.5rem 0 1rem;
	transform: translate3d(0, -60px, 0);
}

:is(.page-content, .is-root-container) .alborn-accordion__text.alborn-accordion__text {
	margin: 0;
	transform: translate3d(0, 60px, 0);
}

:is(.page-content, .is-root-container) .alborn-accordion__item:hover .alborn-accordion__inner > * {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition: all 0.3s 0.3s;
}

@media screen and (max-width: 800px) {
	:is(.page-content, .is-root-container) .alborn-accordion {
		flex-direction: column;
	}
}

/* Trennbild mit feststehendem Hintergrund (Bild am Block gepflegt) */
:is(.page-content, .is-root-container) .alborn-parallax {
	min-height: 500px;
}

/* Button */
:is(.page-content, .is-root-container) .alborn-buttons {
	display: block;
}

:is(.page-content, .is-root-container) .alborn-buttons--center {
	text-align: center;
}

:is(.page-content, .is-root-container) .alborn-button {
	display: block;
}

:is(.page-content, .is-root-container) .alborn-button .wp-block-button__link {
	display: inline-block;
	padding: 12px 24px;
	border-radius: 3px;
	font-family: var(--wp--preset--font-family--roboto);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: #fff;
	text-decoration: none;
}

:is(.page-content, .is-root-container) .alborn-button--p15 .wp-block-button__link {
	padding: 15px 20px;
}

/* Button mit eigener Gestaltung (Werte am Block); Wörter nicht mittendrin trennen (wie Elementor) */
:is(.page-content, .is-root-container) :is(.alborn-button, .alborn-btn) .wp-block-button__link {
	word-break: normal;
}

@media (max-width: 1024px) {
	:is(.page-content, .is-root-container) .alborn-heading.alborn-size-tablet-2 {
		font-size: 2rem !important; /* überschreibt die Größe am Block */
	}

	:is(.page-content, .is-root-container) .alborn-card {
		padding: 25px;
	}

	:is(.page-content, .is-root-container) .alborn-card__body {
		min-height: 330px;
	}

	/* Wie bisher bei Elementor: feststehend nur auf dem Desktop. „!important“ überschreibt die
	   Werte, die WordPress aus den Block-Einstellungen inline setzt. */
	/* Icon-Box: auf dem Tablet Icon oben, alles zentriert */
	:is(.page-content, .is-root-container) .alborn-iconbox--stack-tablet {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}

	:is(.page-content, .is-root-container) .alborn-iconbox--stack-tablet .alborn-iconbox__icon img {
		margin: 0 auto;
	}

	:is(.page-content, .is-root-container) .alborn-parallax {
		min-height: 250px;
		background-position: 0 -150px !important;
		background-attachment: scroll !important;
	}
}

@media (max-width: 767px) {
	:is(.page-content, .is-root-container) .alborn-heading.alborn-size-mobile-1-5 {
		font-size: 1.5rem !important;
	}

	:is(.page-content, .is-root-container) .alborn-center-mobile {
		text-align: center;
	}

	:is(.page-content, .is-root-container) .alborn-section--gap-50-mobile {
		gap: 50px;
	}

	/* Abstand vor/nach dem Abschnitt auf dem Handy weglassen */
	:is(.page-content, .is-root-container) .alborn-collapse-mobile {
		margin-top: 0;
		margin-bottom: 0;
	}

	:is(.page-content, .is-root-container) .alborn-cards {
		grid-template-columns: 1fr;
	}

	:is(.page-content, .is-root-container) .alborn-section--row {
		flex-wrap: wrap;
	}

	:is(.page-content, .is-root-container) .alborn-iconbox {
		flex-direction: column;
		align-items: stretch;
	}

	:is(.page-content, .is-root-container) .alborn-iconbox--tight-mobile {
		gap: 0;
	}

	:is(.page-content, .is-root-container) .alborn-inset-mobile {
		padding: 0 2% 0 5%;
	}

	/* Kartenreihe: auf dem Handy volle Breite (überschreibt die Breite am Block) */
	:is(.page-content, .is-root-container) .alborn-card-row > .alborn-card {
		flex-basis: 100%;
	}

	:is(.page-content, .is-root-container) .alborn-parallax.alborn-parallax--tall-mobile {
		min-height: 250px;
		background-position: 0 0 !important;
	}

	:is(.page-content, .is-root-container) .alborn-parallax {
		min-height: 150px;
		background-position: 50% 50% !important;
	}
}

/* ---------- Formulare (Contact Form 7; bisher Elementor-Pro-Formulare) ----------
   Markup aus migration/03-formulare.php, Maße wie das Elementor-Formular (Beschriftung oben,
   Feldabstand 10 px, Größe „sm“). Innenabstand der Eingabefelder kommt wie dort aus base.css
   (input[type=…] schlägt die Feldregel), bei Textfeldern gilt 5px 14px. */
.alborn-form .alborn-form__fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -10px;
}

.alborn-form .alborn-form__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	min-height: 1px;
	padding: 0 5px;
	margin-bottom: 10px;
}

.alborn-form .alborn-form__label {
	cursor: pointer;
	font-size: 16px;
	font-weight: 400;
}

.alborn-form .wpcf7-form-control-wrap {
	display: block;
	flex-basis: 100%;
	max-width: 100%;
}

:where(.alborn-form) .alborn-form__field {
	border-radius: 3px;
	font-size: 15px;
	line-height: 1.4;
	min-height: 40px;
	padding: 5px 14px;
}

.alborn-form .alborn-form__field {
	display: block;
	background-color: transparent;
	border: 1px solid #69727d;
	color: #1f2124;
	flex-grow: 1;
	max-width: 100%;
	vertical-align: middle;
	width: 100%;
	font-weight: 400;
}

.alborn-form .alborn-form__field:focus {
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1);
	outline: 0;
}

.alborn-form .alborn-form__field::placeholder {
	color: inherit;
	font-family: inherit;
	opacity: .6;
}

.alborn-form .alborn-form__files {
	display: block;
	width: 100%;
	max-width: 100%;
}

/* Datenschutz-Zustimmung: Kästchen + Text in einer Zeile (24 px) */
.alborn-form .wpcf7-acceptance {
	display: block;
}

.alborn-form .wpcf7-list-item {
	display: block;
	margin: 0;
}

/* Wie bei Elementor: Kästchen in der 24-px-Zeile, nur der Text als Label (Zeilenhöhe 1, mittig) */
.alborn-form .wpcf7-list-item label {
	display: contents;
}

.alborn-form .wpcf7-list-item input {
	display: inline-block;
	vertical-align: baseline;
	cursor: pointer;
}

.alborn-form .wpcf7-list-item-label {
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
}

.alborn-form .alborn-form__group--submit {
	align-items: flex-end;
}

.alborn-form .alborn-form__button {
	display: block;
	flex-basis: 100%;
	min-height: 40px;
	padding: 0 24px;
	border: none;
	border-radius: 3px;
	color: #fff;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	white-space: normal;
	cursor: pointer;
	transition: all .3s;
}

.alborn-form .alborn-form__button:hover,
.alborn-form .alborn-form__button:focus {
	color: #fff;
}

/* Kontakt (2692/3299) */
.alborn-form--kontakt .alborn-form__label,
.alborn-form--kontakt .wpcf7-list-item-label {
	color: var(--wp--preset--color--mittelgrau);
}

.alborn-form--kontakt .alborn-form__field {
	background-color: #fff;
	color: var(--wp--preset--color--mittelgrau);
}

.alborn-form--kontakt .alborn-form__button {
	background-color: var(--wp--preset--color--rot);
}

/* Bewerbung (globale Widgets 2664/3296): Felder grün getönt, Button 20 % breit */
.alborn-form--bewerbung .alborn-form__label,
.alborn-form--bewerbung .wpcf7-list-item-label,
.alborn-form--bewerbung .alborn-form__field,
.alborn-form--bewerbung .alborn-form__files {
	color: #000;
}

.alborn-form--bewerbung .alborn-form__field,
.alborn-form--bewerbung .alborn-form__files {
	background-color: rgba(0, 79, 56, .13);
	border-color: rgba(2, 1, 1, .18);
}

.alborn-form--bewerbung .wpcf7-list-item input {
	background-color: rgba(0, 79, 56, .13);
}

.alborn-form--bewerbung .alborn-form__button {
	background-color: #23a455;
}

@media (min-width: 768px) {
	.alborn-form--bewerbung .alborn-form__group--submit {
		width: 20%;
	}
}

/* Meldungen von Contact Form 7 */
.alborn-form .wpcf7-not-valid-tip {
	font-size: 14px;
}

.alborn-form .wpcf7-response-output {
	margin: 20px 0 0;
}

/* Google-Karte (bisher Elementor-Widget „google_maps“) */
.alborn-map {
	overflow: hidden;
	line-height: 0;
}

.alborn-map iframe {
	display: inline;
	width: 100%;
	max-width: 100%;
	height: 300px;
	margin: 0;
	border: none;
	line-height: 1;
}

/* ---------- Großansicht (bisher Elementor-Lightbox; assets/js/lightbox.js) ----------
   Maße und Farben wie Elementor: Hintergrund 80 % Schwarz, Bedienelemente rgba(237,237,237,.9),
   Bild mit 70 px Rand (Handy: nur oben/unten), Pfeile über 15 % (Handy 20 %) der Breite. */
.alborn-lightbox-open {
	overflow: hidden;
}

.alborn-lightbox {
	--alborn-lb-ui: rgba(237, 237, 237, 0.9);
	--alborn-lb-ui-hover: #fff;
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: none;
	overflow: hidden;
	background-color: rgba(0, 0, 0, 0.8);
	font-family: var(--wp--preset--font-family--roboto);
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.alborn-lightbox.is-open {
	display: block;
}

.alborn-lightbox:focus {
	outline: none;
}

.alborn-lightbox.is-opening .alborn-lightbox__track {
	animation: alborn-lb-zoom-in 0.3s;
}

@keyframes alborn-lb-zoom-in {
	from {
		opacity: 0;
		transform: scale3d(0.3, 0.3, 0.3);
	}

	50% {
		opacity: 1;
	}
}

.alborn-lightbox button {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--alborn-lb-ui);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.alborn-lightbox button:hover,
.alborn-lightbox button:focus {
	background: none;
}

.alborn-lightbox__icon {
	display: block;
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Bilder nebeneinander, 100 px Abstand wie bei Elementor (Swiper) */
.alborn-lightbox__track {
	display: flex;
	height: 100%;
	cursor: grab;
}

.alborn-lightbox__track.is-animated {
	transition: transform 0.3s ease-out;
}

.alborn-lightbox__slide {
	position: relative;
	display: flex;
	flex: 0 0 100vw;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 100%;
	margin-right: 100px;
	padding: 70px;
	overflow: hidden;
}

.alborn-lightbox__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	border-radius: 2px;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), 0 0 8px -5px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s;
}

.alborn-lightbox.is-zoomed .alborn-lightbox__image {
	transition: none;
	cursor: move;
}

/* Kopfzeile: Zähler links, Werkzeuge rechts */
.alborn-lightbox__header {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 10;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	box-sizing: border-box;
	width: 100%;
	padding: 15px 52px 15px 20px;
	color: var(--alborn-lb-ui);
	font-size: 20px;
	line-height: 30px;
	transition: 0.3s;
}

.alborn-lightbox__counter {
	margin-right: auto;
	font-size: 0.75em;
	line-height: 1.5;
	width: max-content;
}

.alborn-lightbox__header .alborn-lightbox__tool {
	margin: 0 0.35em;
	padding: 0.25em;
}

.alborn-lightbox .alborn-lightbox__tool:hover,
.alborn-lightbox .alborn-lightbox__close:hover,
.alborn-lightbox .alborn-lightbox__nav:hover {
	color: var(--alborn-lb-ui-hover);
}

.alborn-lightbox__tool .is-on,
.alborn-lightbox__tool[aria-checked="true"] .is-off {
	display: none;
}

.alborn-lightbox__tool[aria-checked="true"] .is-on {
	display: block;
}

.alborn-lightbox .alborn-lightbox__close {
	position: absolute;
	top: 13px;
	right: 15px;
	z-index: 11; /* wie bei Elementor auch über dem abgedunkelten Teilen-Hintergrund */
	display: flex;
	padding: 5px !important;
	font-size: 20px;
	transition: 0.3s;
}

.alborn-lightbox .alborn-lightbox__nav {
	position: absolute;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 15%;
	height: 100%;
	font-size: 25px;
	transition: 0.3s;
}

.alborn-lightbox__nav--prev {
	left: 0;
}

.alborn-lightbox__nav--next {
	right: 0;
}

.alborn-lightbox__nav[hidden] {
	display: none;
}

/* Bedienelemente ausblenden (Klick aufs Bild) und Zoom-Modus */
.alborn-lightbox.is-ui-hidden .alborn-lightbox__header,
.alborn-lightbox.is-ui-hidden .alborn-lightbox__nav {
	opacity: 0;
	pointer-events: none;
}

.alborn-lightbox.is-zoomed .alborn-lightbox__header {
	background-color: rgba(0, 0, 0, 0.5);
}

.alborn-lightbox.is-zoomed .alborn-lightbox__nav {
	opacity: 0;
	pointer-events: none;
}

/* Teilen */
.alborn-lightbox__share {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	background-color: transparent;
	transition: background-color 0.4s;
}

.alborn-lightbox.is-sharing .alborn-lightbox__share {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.5);
	cursor: default;
}

.alborn-lightbox__share-links {
	position: absolute;
	top: 3em;
	right: 2.8em;
	min-width: 200px;
	padding: 14px 20px;
	border-radius: 3px;
	background-color: #fff;
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
	opacity: 0;
	transform: scale(0);
	transform-origin: 90% 10%;
	transition: all 0.25s 0.1s;
}

.alborn-lightbox__share-links::before {
	content: "";
	position: absolute;
	top: 1px;
	right: 0.5em;
	display: block;
	border: 0.45em solid transparent;
	border-bottom-color: #fff;
	transform: translateY(-100%) scaleX(0.7);
}

.alborn-lightbox.is-sharing .alborn-lightbox__share-links {
	opacity: 1;
	transform: scale(1);
}

.alborn-lightbox__share-links a {
	display: block;
	color: #0c0d0e;
	font-size: 12px;
	line-height: 2.5;
	text-align: left;
	text-decoration: none;
}

.alborn-lightbox__share-links a:hover {
	color: #000;
}

.alborn-lightbox__share-links .alborn-lightbox__icon {
	display: inline;
	width: 1.25em;
	height: 1.25em;
	margin-right: 0.75em;
}

.alborn-lightbox__share-links [data-share="facebook"] .alborn-lightbox__icon {
	fill: #3b5998;
}

.alborn-lightbox__share-links [data-share="x"] .alborn-lightbox__icon {
	fill: #000;
}

.alborn-lightbox__share-links [data-share="pinterest"] .alborn-lightbox__icon {
	fill: #bd081c;
}

.alborn-lightbox__share-links [data-share="download"] .alborn-lightbox__icon {
	fill: #9da5ae;
}

@media (max-width: 767px) {
	.alborn-lightbox__slide {
		padding: 70px 0;
	}

	.alborn-lightbox .alborn-lightbox__nav {
		width: 20%;
	}

	.alborn-lightbox .alborn-lightbox__nav--prev {
		justify-content: flex-start;
	}

	.alborn-lightbox .alborn-lightbox__nav--next {
		justify-content: flex-end;
	}
}

/* ---------- Einblenden (bisher Elementor-Animationen; assets/js/animate.js) ----------
   Wie Elementor: unsichtbar, bis das Element in den sichtbaren Bereich kommt, dann 1,25 s
   Animation. Ohne JavaScript sichtbar (noscript in functions.php), im Editor siehe editor.css. */
.alborn-animate:not(.is-animated) {
	visibility: hidden;
}

.alborn-animate.is-animated {
	animation-duration: 1.25s;
}

.alborn-animate--fadeInUp.is-animated {
	animation-name: alborn-fadeInUp;
}

@keyframes alborn-fadeInUp {
	from {
		opacity: 0;
		transform: translate3d(0, 100%, 0);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.alborn-animate.is-animated {
		animation: none;
	}
}