/**
 * Mobile Darstellung
 *
 * 1. Kopfbereich   - Logo und Menueschalter auf einer Zeile, flacher, Glasoptik
 * 2. Mobilmenue    - eigene Scrollflaeche, aufklappbare Ebenen, 44px-Tippziele
 * 3. Kachelreihen  - zwei nebeneinander statt gestapelt
 * 4. Ankaufsformular - Schrittfolge unter das Formular
 * 5. Einblendungen - je Kachel statt blockweise
 * 6. FAQ           - beide Spalten als eine Gruppe
 */

/* ------------------------------------------------------------------ */
/* 1. Kopfbereich                                                      */
/* ------------------------------------------------------------------ */

@media (max-width: 980px) {

	body #top-header {
		background-image: linear-gradient(165deg, rgba(64, 64, 64, 0.88) 0%, rgba(22, 36, 8, 0.92) 100%) !important;
		-webkit-backdrop-filter: blur(14px) saturate(150%);
		backdrop-filter: blur(14px) saturate(150%);
	}

	body #main-header {
		padding: 0 !important;
		background-color: rgba(255, 255, 255, 0.82) !important;
		-webkit-backdrop-filter: blur(18px) saturate(170%);
		backdrop-filter: blur(18px) saturate(170%);
		border-bottom: 1px solid rgba(22, 36, 8, 0.1);
		box-shadow: 0 4px 24px rgba(22, 36, 8, 0.07);
	}

	/*
	 * Statt "relative": so ist der Kopfbereich selbst der Bezugsrahmen fuer die
	 * ausgeklappte Menueflaeche, die dadurch ueber die volle Breite laufen kann.
	 */
	body #main-header .et_menu_container {
		display: flex;
		align-items: center;
		gap: 12px;
		min-height: 56px;
		position: static;
	}

	/* clearfix-Pseudoelemente wuerden im Flex-Kontext zu eigenen Spalten */
	body #main-header .et_menu_container::before,
	body #main-header .et_menu_container::after {
		display: none;
	}

	body #main-header .logo_container {
		position: static;
		flex: 0 1 auto;
		width: auto;
		height: auto;
		text-align: left;
	}

	body #main-header .logo_container .logo_helper {
		display: none;
	}

	body #main-header #logo {
		display: block;
		width: auto;
		max-width: 62vw;
		height: 34px;
		max-height: 34px;
		margin: 0;
		padding: 0;
	}

	/*
	 * "static" und kein transform: sonst waere dieses schmale Element der
	 * Bezugsrahmen der ausgeklappten Menueflaeche und wuerde sie auf
	 * Schalterbreite zusammenziehen. Divi setzt hier eine leere Transformation,
	 * die allein schon als Bezugsrahmen wirkt. So bezieht sich die Flaeche auf
	 * den Kopfbereich und laeuft ueber die volle Breite.
	 */
	body #main-header #et-top-navigation {
		position: static;
		transform: none !important;
		flex: 0 0 auto;
		width: auto;
		margin: 0 0 0 auto;
		padding: 0;
		text-align: right;
	}

	/*
	 * Der Menueschalter wird schmal, deshalb darf die Menueflaeche nicht mehr
	 * an ihm haengen - sie richtet sich am Kopfcontainer aus und bleibt breit.
	 */
	body #main-header #et_mobile_nav_menu {
		position: static;
		width: auto;
		margin: 0;
	}

	body #main-header #et_mobile_nav_menu .mobile_nav {
		padding: 0;
		background: none;
	}

	body #main-header #et_mobile_nav_menu .select_page {
		display: none;
	}

	body #main-header #et_mobile_nav_menu .mobile_menu_bar {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		line-height: 1;
		border-radius: 10px;
		cursor: pointer;
		transition: background-color 0.2s ease;
	}

	body #main-header #et_mobile_nav_menu .mobile_menu_bar::before {
		position: static;
		top: auto;
		left: auto;
		margin: 0;
		font-size: 30px;
		line-height: 1;
	}

	body #main-header #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar {
		background-color: rgba(22, 36, 8, 0.08);
	}

	body #main-header #et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
		content: "\4d";
	}
}

/* ------------------------------------------------------------------ */
/* 2. Mobilmenue                                                       */
/* ------------------------------------------------------------------ */

/*
 * Das Menue haengt in einem fest positionierten Kopfbereich. Ohne
 * Hoehenbegrenzung laeuft die Liste unter den Bildschirmrand und ist dort
 * nicht erreichbar, weil ein fester Kopf nicht mitscrollt. Deshalb: eigene
 * Scrollflaeche plus aufklappbare Ebenen, damit die Liste kurz bleibt.
 */

@media (max-width: 980px) {

	#et_mobile_nav_menu .et_mobile_menu {
		left: 0;
		right: 0;
		top: 100%;
		width: auto;
		max-height: calc(100vh - 120px);
		max-height: calc(100dvh - 120px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		/*
		 * Glasoptik wie die Kopfleiste, aber mit hoher Deckung: bei 95 Prozent
		 * blitzte der helle Text des Bildbereichs durch die Liste. 98 Prozent
		 * traegt den Weichzeichner sichtbar und bleibt gut lesbar.
		 */
		background-color: rgba(255, 255, 255, 0.98);
		-webkit-backdrop-filter: blur(18px) saturate(170%);
		backdrop-filter: blur(18px) saturate(170%);
		border-top: 2px solid #162408;
		border-radius: 0 0 14px 14px;
		box-shadow: 0 18px 40px rgba(22, 36, 8, 0.16);
	}

	#et_mobile_nav_menu .et_mobile_menu li {
		position: relative;
	}

	#et_mobile_nav_menu .et_mobile_menu li a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 11px 2%;
	}

	#et_mobile_nav_menu .et_mobile_menu li.menu-item-has-children > a {
		padding-right: 60px;
	}

	#et_mobile_nav_menu .ua-sub-toggle {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 56px;
		height: 44px;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: inherit;
		line-height: 1;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	#et_mobile_nav_menu .ua-sub-toggle::before {
		content: "";
		display: block;
		width: 9px;
		height: 9px;
		margin-top: -4px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.2s ease;
	}

	#et_mobile_nav_menu .et_mobile_menu li.ua-open > .ua-sub-toggle::before {
		margin-top: 4px;
		transform: rotate(-135deg);
	}

	#et_mobile_nav_menu .ua-sub-toggle:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -6px;
	}

	/*
	 * Eingeklappt wird erst, wenn die Schalter tatsaechlich gesetzt sind.
	 * Divi haelt die Unterebenen mit !important offen, daher hier ebenso.
	 */
	#et_mobile_nav_menu .et_mobile_menu.ua-accordion li.menu-item-has-children > ul.sub-menu {
		display: none !important;
	}

	#et_mobile_nav_menu .et_mobile_menu.ua-accordion li.menu-item-has-children.ua-open > ul.sub-menu {
		display: block !important;
	}
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {

	#et_mobile_nav_menu .ua-sub-toggle::before,
	body #main-header #et_mobile_nav_menu .mobile_menu_bar {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* 3. Kachelreihen zweispaltig                                         */
/* ------------------------------------------------------------------ */

/*
 * Divi stapelt mobil jede Spalte untereinander. Bei kurzen Kacheln
 * (Vorteile, Schritte, Markenlisten) entstehen dadurch lange Strecken mit
 * viel Leerraum. Die Klasse setzt das Skript, wenn eine Reihe wirklich aus
 * gleichartigen kurzen Kacheln besteht - siehe js/script.js.
 */

@media (max-width: 980px) {

	.et_pb_row.ua-2col,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 14px;
	}

	.et_pb_row.ua-2col > .et_pb_column,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column {
		width: calc(50% - 7px) !important;
		margin: 0 !important;
		float: none !important;
	}

	/* Eine ungerade letzte Kachel fuellt die Zeile, statt halb leer zu stehen */
	.et_pb_row.ua-2col > .et_pb_column.ua-2col-last,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column.ua-2col-last {
		width: 100% !important;
	}

	/*
	 * Nur eine alleinstehende Kachel darf sich auf die Spaltenhoehe strecken.
	 * Stehen mehrere Bausteine untereinander (Zahl, Titel, Beschreibung), wuerde
	 * jeder von ihnen auf volle Hoehe wachsen und der Text weit nach unten
	 * rutschen.
	 */
	.et_pb_row.ua-2col > .et_pb_column > .et_pb_module:only-child,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column > .et_pb_module:only-child {
		height: 100%;
	}

	.et_pb_row.ua-2col > .et_pb_column > .et_pb_module,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column > .et_pb_module {
		margin-bottom: 0 !important;
	}

	.et_pb_row.ua-2col > .et_pb_column > .et_pb_module + .et_pb_module,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column > .et_pb_module + .et_pb_module {
		margin-top: 6px !important;
	}

	/* Inhalt mittig, damit unterschiedlich lange Texte gleichmaessig sitzen */
	.et_pb_row.ua-2col > .et_pb_column > .et_pb_blurb:only-child,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column > .et_pb_blurb:only-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.et_pb_row.ua-2col .et_pb_blurb,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_blurb,
	.et_pb_row.ua-2col .et_pb_number_counter,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_number_counter,
	.et_pb_row.ua-2col .et_pb_text,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_text {
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	/*
	 * Silbentrennung nur als letzte Rettung: erst darf die Zeile normal
	 * umbrechen, lange Einzelwoerter werden getrennt statt herauszuragen.
	 * "auto" auf dem ganzen Absatz trennte auch dort, wo Platz gewesen waere.
	 */
	.et_pb_row.ua-2col .et_pb_blurb_container,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_blurb_container,
	.et_pb_row.ua-2col .et_pb_blurb_description,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_blurb_description,
	.et_pb_row.ua-2col p,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) p,
	.et_pb_row.ua-2col li,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) li {
		hyphens: manual;
		overflow-wrap: break-word;
		word-break: normal;
		text-wrap: pretty;
	}

	.et_pb_row.ua-2col h2,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h2,
	.et_pb_row.ua-2col h3,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h3,
	.et_pb_row.ua-2col h4,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h4,
	.et_pb_row.ua-2col .et_pb_module_header,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_module_header {
		hyphens: manual;
		overflow-wrap: break-word;
		text-wrap: balance;
	}
}

/* ------------------------------------------------------------------ */
/* 4. Ankaufsformular - Schrittfolge unter das Formular                */
/* ------------------------------------------------------------------ */

/*
 * Die Schrittfolge stand mobil vor dem Formular und schob es um zwei
 * Bildschirmhoehen nach unten. Die Reihenfolge wird nur mobil getauscht,
 * am Inhalt aendert sich nichts.
 */

@media (max-width: 980px) {

	.page-id-229 .et-l--post .et_builder_inner_content {
		display: flex;
		flex-direction: column;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section {
		order: 5;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_0 {
		order: 1;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_2 {
		order: 2;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_1 {
		order: 3;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_3 {
		order: 4;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_4 {
		order: 6;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_5 {
		order: 7;
	}

	.page-id-229 .et-l--post .et_builder_inner_content > .et_pb_section_6 {
		order: 8;
	}
}

/* ------------------------------------------------------------------ */
/* 5. Einblendungen je Kachel                                          */
/* ------------------------------------------------------------------ */

/*
 * Divi legt die Einblendung auch auf ganze Reihen. Mobil erscheint dadurch
 * ein ganzer Block auf einmal. Die Reihen-Einblendung wird abgeschaltet, die
 * einzelnen Kacheln blenden dafuer nacheinander ein - gesteuert vom Skript.
 */

@media (max-width: 980px) {

	.et_pb_row.et_animated,
	.et_pb_section.et_animated,
	.et_pb_column.et_animated {
		animation: none !important;
		opacity: 1 !important;
	}

	/*
	 * Der Uebergang gehoert an den Ausgangszustand, nicht erst an den Zielzustand.
	 * Steht er nur am Ziel, sieht der Browser beim Klassenwechsel einen
	 * Sofortsprung statt einer Bewegung und rechnet ihn als Layoutverschiebung mit.
	 */
	.ua-reveal {
		opacity: 0;
		transform: translateY(24px);
		transition: opacity 0.5s ease-out, transform 0.5s ease-out;
		will-change: opacity, transform;
	}

	.ua-reveal.ua-shown {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {

	.ua-reveal,
	.ua-reveal.ua-shown {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* 6. FAQ - beide Spalten als eine Gruppe                              */
/* ------------------------------------------------------------------ */

/*
 * Desktop stehen zwei Akkordeons nebeneinander, jedes mit einer offenen
 * Frage. Mobil stehen sie untereinander, wodurch zwei Antworten gleichzeitig
 * offen sind. Das Skript fasst sie mobil zu einer Gruppe zusammen.
 */

@media (max-width: 980px) {

	.et_pb_accordion .et_pb_toggle_title {
		padding-right: 34px;
	}
}

/* ------------------------------------------------------------------ */
/* 7. Kompaktere Kacheln und Abstaende                                 */
/* ------------------------------------------------------------------ */

/*
 * Die Kacheln stammen aus dem vierspaltigen Desktoplayout: grosse Symbole,
 * viel Innenabstand, weite Zeilenabstaende. Nebeneinander auf dem Handy ist
 * das zu luftig, deshalb hier eine kompaktere Fassung - nur innerhalb der
 * zweispaltigen Reihen, damit gestapelte Bereiche unveraendert bleiben.
 */

@media (max-width: 980px) {

	.et_pb_row.ua-2col .et_pb_blurb,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_blurb,
	.et_pb_row.ua-2col .et_pb_number_counter,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_number_counter,
	.et_pb_row.ua-2col .et_pb_text,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_text {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	.et_pb_row.ua-2col .et_pb_main_blurb_image,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_main_blurb_image {
		margin-bottom: 8px !important;
	}

	.et_pb_row.ua-2col .et_pb_main_blurb_image .et-pb-icon,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_main_blurb_image .et-pb-icon {
		font-size: 44px !important;
		line-height: 1 !important;
		height: auto !important;
		width: auto !important;
	}

	.et_pb_row.ua-2col .et_pb_main_blurb_image .et_pb_image_wrap img,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_main_blurb_image .et_pb_image_wrap img {
		max-width: 56px;
		height: auto;
	}

	.et_pb_row.ua-2col h2,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h2,
	.et_pb_row.ua-2col h3,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h3,
	.et_pb_row.ua-2col h4,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) h4,
	.et_pb_row.ua-2col .et_pb_module_header,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_module_header {
		font-size: 17px !important;
		line-height: 1.25 !important;
		margin-bottom: 6px !important;
		padding-bottom: 0 !important;
	}

	.et_pb_row.ua-2col p,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) p,
	.et_pb_row.ua-2col li,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) li,
	.et_pb_row.ua-2col .et_pb_blurb_description,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_blurb_description {
		font-size: 15px !important;
		line-height: 1.5 !important;
	}

	.et_pb_row.ua-2col .et_pb_number_counter .percent p,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_number_counter .percent p {
		font-size: 34px !important;
		line-height: 1.2 !important;
	}

	.et_pb_row.ua-2col .et_pb_number_counter .title,
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) .et_pb_number_counter .title {
		font-size: 16px !important;
		line-height: 1.3 !important;
	}

	/*
	 * Der Abstand unter gestapelten Spalten stammt aus dem Theme und ist auf
	 * dem Handy zu gross. In zweispaltigen Reihen regelt ihn bereits "gap".
	 */
	.et_pb_section .et_pb_row:not(.ua-2col) > .et_pb_column {
		margin-bottom: 18px !important;
	}

	.et_pb_section .et_pb_row:not(.ua-2col) > .et_pb_column:last-child {
		margin-bottom: 0 !important;
	}
}

/* ------------------------------------------------------------------ */
/* 8. Fussbereich                                                      */
/* ------------------------------------------------------------------ */

/*
 * Die Listen "Standorte" und "Uhrenmarken" stehen mobil untereinander und
 * ergeben zwei sehr lange Spalten. Zweispaltig bleiben sie ueberschaubar.
 * Das Fussmenue lag hinter einem eigenen Menueschalter - dort gehoert es
 * nicht hin, vier Rechtslinks zeigt man direkt.
 */

@media (max-width: 980px) {

	.et-l--footer .et_pb_text ul,
	.et-l--footer .et_pb_blurb_description ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 14px;
		row-gap: 2px;
		padding-left: 0 !important;
		list-style: none;
	}

	.et-l--footer .et_pb_text ul li,
	.et-l--footer .et_pb_blurb_description ul li {
		margin: 0;
		padding: 0;
		min-width: 0;
	}

	.et-l--footer .et_pb_text ul li a,
	.et-l--footer .et_pb_blurb_description ul li a {
		display: flex;
		align-items: center;
		min-height: 40px;
		overflow-wrap: break-word;
	}

	/* Fussmenue direkt zeigen, ohne den Umweg ueber einen Menueschalter */
	.et-l--footer .et_pb_menu .et_mobile_nav_menu {
		display: none !important;
	}

	.et-l--footer .et_pb_menu .et_pb_menu__menu {
		display: block !important;
	}

	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		gap: 4px 6px;
		padding: 0;
	}

	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu > li {
		margin: 0;
		padding: 0;
	}

	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu > li > a {
		display: flex;
		align-items: center;
		min-height: 40px;
		padding: 0 12px;
		border: 1px solid rgba(255, 255, 255, 0.16);
		border-radius: 999px;
		background-color: rgba(255, 255, 255, 0.05);
		font-size: 14px;
		line-height: 1.2;
		white-space: nowrap;
		transition: background-color 0.2s ease, border-color 0.2s ease;
	}

	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu > li > a:hover,
	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu > li > a:focus-visible {
		border-color: rgba(255, 255, 255, 0.4);
		background-color: rgba(255, 255, 255, 0.12);
	}
}

@media (max-width: 980px) and (prefers-reduced-motion: reduce) {

	.et-l--footer .et_pb_menu .et-menu-nav > ul.et-menu > li > a {
		transition: none;
	}
}

/* ------------------------------------------------------------------ */
/* 9. Kachelreihen ohne Nachrücken                                     */
/* ------------------------------------------------------------------ */

/*
 * Die Zweispaltigkeit stand zuerst nur im Skript. Bei langsamer Verbindung
 * lief das erst rund fuenf Sekunden nach dem Zeichnen - der Inhalt sprang dann
 * sichtbar um. Deshalb entscheidet jetzt das Stylesheet, was beim allerersten
 * Zeichnen schon gilt. Das Skript korrigiert nur noch Ausnahmen.
 *
 * Bedingungen: mindestens drei Spalten, keine Bilder, kein Akkordeon, kein
 * Formular - also wirklich nur Kachelreihen.
 */

@media (max-width: 980px) {

	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) {
		display: flex;
		flex-wrap: wrap;
		align-items: stretch;
		gap: 14px;
	}

	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column {
		width: calc(50% - 7px) !important;
		margin: 0 !important;
		float: none !important;
	}

	/* Ausnahme: zu viel Text fuer zwei Spalten - das Skript setzt die Klasse */
	.et_pb_row.ua-kein-2col {
		display: block;
	}

	.et_pb_row.ua-kein-2col > .et_pb_column {
		width: 100% !important;
	}

	/*
	 * Das Polster unter dem festen Kopfbereich fest verankern. Divi berechnet
	 * es sonst per Skript und setzt zuerst einen zu kleinen Wert - der ganze
	 * Inhalt rutschte dadurch nachtraeglich um 13 Pixel nach unten.
	 */
	body.et_fixed_nav #page-container {
		padding-top: 93px !important;
	}
}

@media (max-width: 980px) {

	/*
	 * Eine ungerade letzte Kachel fuellt die Zeile. "last-child" an ungerader
	 * Position trifft genau dann zu, wenn die Reihe ungerade viele Spalten hat -
	 * das laesst sich ohne Skript entscheiden und springt deshalb nicht nach.
	 */
	.et_pb_row:has(> .et_pb_column:nth-child(3)):not(:has(img)):not(:has(.et_pb_accordion)):not(:has(form)):not(:has(.et_pb_video)):not(.ua-kein-2col) > .et_pb_column:last-child:nth-child(odd) {
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* 7. Uebersichtstabellen                                              */
/* ------------------------------------------------------------------ */

/*
 * Die Marken- und Modellseiten tragen Orientierungstabellen. Eine Tabelle
 * kennt keinen Umbruch: sie wird so breit, wie ihr Inhalt es verlangt, und
 * schiebt sonst die ganze Seite seitlich weg. Deshalb bekommt sie eine eigene
 * Rollflaeche - die Seite selbst bleibt damit auf jeder Breite ruhig.
 */

.ua-tabelle {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1.4em 0;
	border: 1px solid rgba(32, 32, 32, 0.12);
	border-radius: 8px;
	background: #fff;
}

.ua-tabelle table {
	width: 100%;
	min-width: 620px;
	border-collapse: collapse;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
}

.ua-tabelle th,
.ua-tabelle td {
	padding: 12px 16px;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid rgba(32, 32, 32, 0.1);
}

.ua-tabelle thead th {
	background: #162408;
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
	border-bottom: 0;
}

.ua-tabelle tbody tr:nth-child(even) {
	background: #f8f8f8;
}

.ua-tabelle tbody tr:last-child td {
	border-bottom: 0;
}

.ua-tabelle td:first-child {
	font-weight: 600;
	color: #162408;
	white-space: nowrap;
}

/*
 * Hinweis, dass es seitlich weitergeht. Ohne ihn uebersieht man auf dem Handy
 * die halbe Tabelle, weil am rechten Rand nichts angeschnitten aussieht.
 *
 * Bewusst ein innenliegender Schatten am Rahmen und kein Pseudoelement: Ein
 * Kind der Rollflaeche wandert beim Rollen mit, und die Zeilen haben eigene
 * Hintergruende, die einen dahinterliegenden Verlauf verdecken wuerden.
 */
@media (max-width: 980px) {

	.ua-tabelle {
		box-shadow: inset -16px 0 14px -14px rgba(0, 0, 0, 0.35);
	}

	.ua-tabelle table {
		font-size: 14px;
		min-width: 540px;
	}

	.ua-tabelle th,
	.ua-tabelle td {
		padding: 10px 12px;
	}

	/*
	 * Auf dem Handy zaehlt jeder Millimeter Breite: die erste Spalte darf
	 * umbrechen, sonst haelt ein langer Modellname wie "GMT-Master und
	 * GMT-Master II" die halbe Tabelle in Geiselhaft.
	 */
	.ua-tabelle td:first-child {
		white-space: normal;
	}
}

/* ------------------------------------------------------------------ */
/* 8. Kleinstschrift im Fussbereich                                    */
/* ------------------------------------------------------------------ */

/*
 * Zwei Stellen im Fuss standen auf 11 Pixel: die Zeile unter dem Logo und die
 * Beschriftung der Vertrauenszeichen. Unter 13 Pixel wird Fliesstext auf
 * vielen Bildschirmen muehsam, und beide Zeilen tragen Aussage - die eine
 * nennt das Einzugsgebiet, die andere erklaert das Zeichen daneben.
 */
#page-container [style*="font-size: 11px"],
#page-container [style*="font-size:11px"],
#page-container [style*="font-size: 12px"],
#page-container [style*="font-size:12px"] {
	font-size: 13px !important;
	line-height: 1.5 !important;
}

/* ------------------------------------------------------------------ */
/* 9. Ueberschriften auf dunklem Grund                                 */
/* ------------------------------------------------------------------ */

/*
 * Im Kopf- und Abschlussbereich der Markenseiten steht Text auf dunklem
 * Verlauf. Die Farbangabe des Bausteins setzt sich dort fuer Ueberschriften
 * nicht durch - Divi zeichnet sie weiter in der Markenfarbe #162408, also
 * dunkelgruen auf dunkelgruen. Gemessen, nicht vermutet.
 */
.ua-tudor-hero h1,
.ua-tudor-hero h2,
.ua-tudor-hero h3,
.ua-tudor-abschluss h1,
.ua-tudor-abschluss h2,
.ua-tudor-abschluss h3 {
	color: #ffffff !important;
}

.ua-tudor-hero p,
.ua-tudor-abschluss p {
	color: #e0e0e0 !important;
}

.ua-tudor-hero a,
.ua-tudor-abschluss a {
	color: #ffffff !important;
}

/*
 * Groesse der H1 wie auf den uebrigen Markenseiten (dort 56 px am grossen
 * Bildschirm, 42 px auf dem Handy). Divi setzt die Angabe des Bausteins hier
 * ebenso wenig durch wie die Farbe, deshalb auch das ueber die Klasse.
 */
.ua-tudor-hero h1 {
	font-size: 56px !important;
	line-height: 1.15em !important;
	margin-bottom: 0.4em;
}

.ua-tudor-hero h2 {
	font-size: 24px !important;
	line-height: 1.3em !important;
}

@media (max-width: 980px) {
	.ua-tudor-hero h1 { font-size: 42px !important; }
	.ua-tudor-hero h2 { font-size: 21px !important; }
}

@media (max-width: 480px) {
	.ua-tudor-hero h1 { font-size: 34px !important; }
}

/* ------------------------------------------------------------------ */
/* 10. Helle Bausteine auf dunklem Grund                               */
/* ------------------------------------------------------------------ */

/*
 * Divi setzt die Farbangaben eines Textbausteins fuer Ueberschriften auf
 * dunklem Grund nicht durch - gemessen: dunkelgruen (#162408) auf dunklem
 * Verlauf, Kontrast 1,0. Die Klasse macht es unmissverstaendlich.
 */
.ua-hell h1,
.ua-hell h2,
.ua-hell h3,
.ua-hell h4,
.ua-hell strong {
	color: #ffffff !important;
}

.ua-hell,
.ua-hell p,
.ua-hell li {
	color: #e6e6e6 !important;
}

.ua-hell a {
	color: #ffffff !important;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ */
/* 11. Ablaufschritte mit eigenen Symbolen                             */
/* ------------------------------------------------------------------ */

/*
 * Eigene Zeichnungen statt Divis Zeichensatz: gleiche Strichstaerke, gleiches
 * Raster, gleiche Rundungen. Der mitgelieferte Satz mischt gefuellte und
 * gestrichelte Formen - nebeneinander wirkte das zusammengewuerfelt.
 */
.ua-symbol-zeile {
	margin: 0 0 14px !important;
	line-height: 1;
}

.ua-symbol {
	color: #ffffff;
	opacity: 0.92;
	display: block;
}

.ua-schritt h3 {
	font-size: 19px !important;
	line-height: 1.3 !important;
	margin-bottom: 8px !important;
}

.ua-schritt p:not(.ua-symbol-zeile) {
	font-size: 15px !important;
	line-height: 1.7 !important;
}

.ua-schritt {
	border-left: 2px solid rgba(255, 255, 255, 0.16);
	padding-left: 18px;
}

@media (max-width: 980px) {

	/* Zwei nebeneinander statt vier - vier werden auf dem Handy zu schmal */
	.ua-schritte.et_pb_row {
		display: flex !important;
		flex-wrap: wrap;
		gap: 22px 4%;
	}

	.ua-schritte.et_pb_row > .et_pb_column {
		width: 48% !important;
		margin: 0 !important;
	}

	.ua-schritt {
		padding-left: 12px;
	}

	.ua-symbol {
		width: 28px;
		height: 28px;
	}
}

@media (max-width: 480px) {

	.ua-schritte.et_pb_row > .et_pb_column {
		width: 100% !important;
	}
}

/* ------------------------------------------------------------------ */
/* 12. Fragen: aufgeklappter Eintrag sichtbar abgesetzt                */
/* ------------------------------------------------------------------ */

/*
 * Der offene Eintrag ist weiss. Auf weissem Abschnitt loeste er sich auf -
 * man sah nicht mehr, wo eine Frage anfaengt und die naechste beginnt.
 * Der Abschnitt traegt jetzt Hellgrau, der offene Eintrag zusaetzlich Rahmen
 * und Schatten.
 */
.ua-faq-paar .et_pb_toggle_open {
	border: 1px solid rgba(22, 36, 8, 0.16) !important;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	border-radius: 8px;
}

.ua-faq-paar .et_pb_toggle_close {
	border-radius: 8px;
	margin-bottom: 10px !important;
}

.ua-faq-paar .et_pb_toggle {
	margin-bottom: 10px !important;
}

.ua-faq-paar .et_pb_toggle_title {
	font-size: 16px !important;
	line-height: 1.4 !important;
}

@media (min-width: 981px) {

	/* Beide Spalten oben buendig, damit die Liste als eine Einheit liest */
	.ua-faq-paar.et_pb_row {
		display: flex !important;
		align-items: flex-start;
	}
}

/* ------------------------------------------------------------------ */
/* 13. Lesbarkeit im Fussbereich                                       */
/* ------------------------------------------------------------------ */

/*
 * Gemessen auf allen 44 Seiten: #999999 auf dem dunklen Verlauf ergibt einen
 * Kontrast von 3,64, #666666 nur 1,81. Gefordert sind 4,5 fuer Fliesstext.
 * Betroffen sind Anschrift, Telefon, E-Mail, Zeile unter dem Logo und die
 * Beschriftung der Vertrauenszeichen - also genau die Angaben, wegen derer
 * jemand in den Fuss schaut.
 *
 * Die neuen Werte sind gemessen, nicht geschaetzt: #c9c9c9 auf #0a0a0a
 * ergibt 11,3, auf #404040 immer noch 5,0.
 */
.et-l--footer,
.et-l--footer p,
.et-l--footer li,
.et-l--footer span,
.et-l--footer strong,
.et-l--footer a {
	color: #c9c9c9;
}

/*
 * Die schwachen Werte stehen als style-Angabe direkt im Element und schlagen
 * jede Klassenregel. Deshalb hier ausdruecklich - und nur fuer genau diese
 * beiden Farbwerte, damit nichts anderes im Fuss mitgefaerbt wird.
 */
.et-l--footer [style*="#999999"],
.et-l--footer [style*="#999"],
.et-l--footer [style*="rgb(153, 153, 153)"] {
	color: #c9c9c9 !important;
}

.et-l--footer [style*="#666666"]:not(.trust-badge *):not(.badge-container *),
.et-l--footer [style*="#666"]:not(.trust-badge *):not(.badge-container *) {
	color: #bdbdbd !important;
}

/*
 * Die Vertrauenszeichen stehen auf einer hellen Karte. Dort ist Aufhellen
 * genau falsch - gemessen 1,72 nach der ersten Fassung dieser Regel. Hier
 * muss der Text dunkler werden, nicht heller.
 */
.et-l--footer .badge-container p,
.et-l--footer .badge-container span,
.et-l--footer .trust-badge p,
.et-l--footer .trust-badge span {
	color: #3a3a3a !important;
}

.et-l--footer h1,
.et-l--footer h2,
.et-l--footer h3,
.et-l--footer h4 {
	color: #ffffff;
}

.et-l--footer a:hover {
	color: #ffffff;
}

/*
 * Die Vertrauenszeichen stehen auf einer hellen Karte - dort gilt das
 * Gegenteil, dunkler Text auf hellem Grund.
 */
.et-l--footer .et_pb_blurb .et_pb_module_header,
.et-l--footer [class*="trust"] p,
.et-l--footer [class*="trust"] span {
	color: inherit;
}

/* ------------------------------------------------------------------ */
/* 14. Hinweistext am Datei-Upload                                     */
/* ------------------------------------------------------------------ */

/*
 * "Klicken oder Datei ablegen" stand in #777777 auf #f9f9f9 - gemessen 4,25,
 * gefordert 4,5. Knapp darunter, aber es ist der Hinweis, der erklaert, wie
 * man Fotos anhaengt: die wichtigste Angabe im ganzen Formular.
 */
.wpcf7 .codedropz-upload-handler,
.wpcf7 .codedropz-upload-handler span,
.wpcf7 .dnd-upload-counter,
.wpcf7 .codedropz-btn-wrap,
.wpcf7 [class*="upload"] span {
	color: #5c5c5c !important;
}

/* ------------------------------------------------------------------ */
/* 15. Karten in gleich hohen Reihen fuellen ihre Spalte               */
/* ------------------------------------------------------------------ */

/*
 * Divis make_equal stellt die SPALTEN gleich hoch. Die Karte darin behaelt
 * aber ihre Inhaltshoehe - dann steht die kuerzere Karte oben und darunter
 * bleibt eine Luecke, was schlimmer aussieht als vorher.
 *
 * Deshalb: ist die Karte der einzige Baustein der Spalte, fuellt sie die
 * ganze Hoehe. Das ":only-child" ist wichtig - eine fruehere Fassung ohne
 * diese Bedingung streckte auch Textbausteine und schob deren Text weit nach
 * unten.
 */
.et_pb_equal_columns > .et_pb_column > .et_pb_module:only-child {
	height: 100%;
}

.et_pb_equal_columns > .et_pb_column > .et_pb_blurb:only-child,
.et_pb_equal_columns > .et_pb_column > .et_pb_number_counter:only-child {
	display: flex;
	flex-direction: column;
}

.et_pb_equal_columns > .et_pb_column > .et_pb_blurb:only-child .et_pb_blurb_content {
	width: 100%;
}