/* ==========================================================================
   UB Consulting — Barrierefreiheit (Paket A / Teil 2, T2)
   Eingebunden von inc/ub-a11y.php, laedt NACH ub-blockb.css und ub-contact.css.

   Grundsatz: Fuer Mausnutzer aendert sich nichts. Alle Regeln wirken nur
   - im Fokus-Zustand (:focus-visible, :focus-within),
   - auf Trefferflaechen ueber Pseudo-Elemente (ohne Layout-Verschiebung),
   - auf zwei nachweislich zu schwache Textfarben,
   - oder unter prefers-reduced-motion.

   Farbwelt: Navy #14203B, Bronze #B29063, Sand #D4BFA3, Off-White #F5ECE3.
   ========================================================================== */

/* --------------------------------------------------------------------------
   T2a-1  Skip-Link sichtbar machen
   Das Theme gibt <a class="skip-link screen-reader-text"> aus. Der Text wird
   in inc/ub-a11y.php je Sprache uebersetzt; hier nur die Darstellung.
   -------------------------------------------------------------------------- */
.skip-link.screen-reader-text:focus,
a.skip-link:focus {
	position: fixed !important;
	top: 12px;
	left: 12px;
	right: auto;
	z-index: 10000;
	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 14px 22px;
	overflow: visible !important;
	clip: auto !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
	display: block;
	background-color: #14203b;
	color: #ffffff !important;
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: none;
	border: 3px solid #d4bfa3;
	border-radius: 2px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   T2a-2  Sichtbarer Fokus site-weit
   ub-blockb.css setzt bereits einen 3-px-Ring fuer :focus-visible und faerbt
   ihn in bekannten dunklen Bereichen weiss. Hier kommt ein heller Hof dazu,
   damit der Ring AUCH auf unbekannt dunklem Grund sichtbar bleibt, und der
   Ring wird auf die drei Bedienelemente ausgedehnt, die das Theme vergisst.
   Kein !important: die vorhandenen Regeln (auch die der Kontaktseiten,
   ub-contact.css) behalten Vorrang bei der Ringfarbe.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.qodef-button:focus-visible,
.qodef-button.qodef-html--link:focus-visible,
.qodef-opener-icon:focus-visible,
#qodef-back-to-top:focus-visible,
.widget_polylang .lang-item a:focus-visible {
	outline: 3px solid #14203b;
	outline-offset: 2px;
	box-shadow: 0 0 0 6px rgba(245, 236, 227, 0.95);
	border-radius: 2px;
}

/* Bereiche, die sicher dunkel sind: heller Ring, dunkler Hof. */
#qodef-page-header :focus-visible,
#qodef-page-mobile-header :focus-visible,
.qodef-header-sticky :focus-visible,
#qodef-page-footer :focus-visible,
.ub-cta :focus-visible,
.ub-hero-cta a:focus-visible,
#qodef-back-to-top:focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 6px rgba(20, 32, 59, 0.95);
}

/* ENTFALLEN mit Paket 1 (Nachbesserung M3, 2026-09-21):
   Hier stand eine Ausnahme
       body:not(.home) #qodef-page-header  :focus-visible { outline-color:#14203b }
       body:not(.home) .qodef-header-sticky :focus-visible { … }
       body:not(.home) #qodef-page-mobile-header :focus-visible { … }
   Sie war richtig, solange die Unterseiten eine WEISSE Kopfzeile hatten.
   Seit Paket 1 ist die Kopfzeile auf ALLEN Seiten dunkelblau — die Ausnahme
   hätte dort einen dunkelblauen Umriss auf dunkelblauem Grund erzeugt
   (gemessen 1,14 : 1); sichtbar blieb nur der cremefarbene Hof.
   Es gilt jetzt durchgehend die Regel darüber: weisser Umriss, dunkler Hof
   (Weiss auf #14203B = 16,16 : 1, auf #1B2A4A = 14,22 : 1).

   Diese Datei ist damit die EINZIGE Quelle für Fokusstile in Kopfzeile,
   fixierter Kopfzeile, Mobil-Kopfzeile und Aufklappmenü. ub-design.css setzt
   nur noch Fokusfarben im Seiteninhalt der Inhaltsseiten. */

/* Das Aufklappmenue steht seit Paket 1 auf Dunkelblau #1B2A4A (vorher weiss)
   — heller Umriss, dunkler Hof. Weiss auf #1B2A4A = 14,22 : 1. */
.qodef-drop-down-second :focus-visible {
	outline-color: #ffffff;
	box-shadow: 0 0 0 5px rgba(20, 32, 59, 0.95);
}

/* --------------------------------------------------------------------------
   T2b  Aufklappmenue „Ueber uns" per Tastatur
   Das Theme oeffnet das Untermenue nur per JavaScript beim Ueberfahren
   (Klasse .qodef-drop-down--start). Diese Regel oeffnet es zusaetzlich,
   sobald der Tastatur-Fokus im Menuepunkt steht. inc/ub-a11y.php liefert
   aria-haspopup/aria-expanded und die Esc-Taste dazu.
   -------------------------------------------------------------------------- */
.qodef-header-navigation ul li.menu-item-has-children:focus-within > .qodef-drop-down-second,
.qodef-header-navigation ul li.menu-item-has-children > .qodef-drop-down-second.ub-a11y-open {
	height: auto;
	opacity: 1;
	visibility: visible;
	overflow: visible;
	z-index: 20;
}

/* Esc muss das Menue auch SICHTBAR schliessen.
   Das JS gibt den Fokus dabei auf den Elternlink zurueck — damit greift
   `:focus-within` weiter und das Menue blieb offen, waehrend aria-expanded
   bereits „false" meldete. Widerspruch zwischen Bild und Vorlesetext.
   Die Klasse `ub-closed` (vom JS bei Esc gesetzt) uebersteuert deshalb
   sowohl `:focus-within` als auch `:hover`. Sie wird beim naechsten
   Fokuswechsel, bei Enter/Pfeil-ab und bei jeder Mausbewegung ueber den
   Menuepunkt wieder entfernt — die Maussteuerung bleibt unveraendert.
   Hoehere Spezifitaet (0,5,2) als die Oeffnen-Regeln (0,4,2). */
.qodef-header-navigation ul li.menu-item-has-children.ub-closed > .qodef-drop-down-second,
.qodef-header-navigation ul li.menu-item-has-children.ub-closed:focus-within > .qodef-drop-down-second,
.qodef-header-navigation ul li.menu-item-has-children.ub-closed:hover > .qodef-drop-down-second,
.qodef-header-navigation ul li.menu-item-has-children.ub-closed > .qodef-drop-down-second.ub-a11y-open,
.qodef-header-navigation ul li.menu-item-has-children.ub-closed > .qodef-drop-down-second.qodef-drop-down--start {
	height: 0;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	z-index: auto;
}

/* --------------------------------------------------------------------------
   T2b-2  Kontrast im Aufklappmenue
   Gemessen: #B29063 auf #FFFFFF = 2,97 : 1 (AA verlangt 4,5). Nur die Farbe
   wird korrigiert; Schriftgroesse, Laufweite und Versalien bleiben, weil das
   Header-Redesign ausdruecklich nicht Teil dieses Auftrags ist.
   Navy #14203B auf Weiss = 14,4 : 1. Hover/Fokus: #7A5A31 = 6,3 : 1.
   -------------------------------------------------------------------------- */
.qodef-header-navigation ul li .qodef-drop-down-second-inner ul li > a,
.qodef-header-navigation ul li .qodef-drop-down-second-inner ul li > a .qodef-menu-item-text,
.qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a,
.qodef-header-navigation ul li.qodef-menu-item--wide .qodef-drop-down-second-inner > ul > li ul li > a {
	color: #14203b;
}

.qodef-header-navigation ul li .qodef-drop-down-second-inner ul li > a:hover,
.qodef-header-navigation ul li .qodef-drop-down-second-inner ul li > a:focus,
.qodef-header-navigation ul li .qodef-drop-down-second-inner ul li.current-menu-item > a,
.qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:hover,
.qodef-header-navigation ul li.qodef-menu-item--narrow .qodef-drop-down-second-inner > ul > li > a:focus {
	color: #7a5a31;
}

/* --------------------------------------------------------------------------
   T2c-1  Trefferflaeche des Sprachumschalters (WCAG 2.2, 2.5.8)
   Gemessen: Flaggen 16 x 11 px, Abstand der Mittelpunkte 26 px. Die
   Trefferflaeche wird ueber ein Pseudo-Element auf 24 x 24 px vergroessert —
   ohne jede Layout-Aenderung, die Flaggen bleiben exakt 16 x 11 px.
   -------------------------------------------------------------------------- */
.widget_polylang .lang-item a,
#qodef-page-mobile-header .widget_polylang .lang-item a {
	position: relative;
	display: inline-block;
}

.widget_polylang .lang-item a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	transform: translate(-50%, -50%);
}

/* --------------------------------------------------------------------------
   T2c-2  Trefferflaeche der Kategorie-/Schlagwortlinks unter den Kacheln
   Gemessen: 116,6 x 17,6 px bzw. 208,1 x 17,6 px. Gleiche Technik: die
   Zeilenhoehe bleibt, nur die Trefferflaeche waechst auf 24 px Hoehe.
   -------------------------------------------------------------------------- */
.qodef-e-info a[rel="tag"],
.qodef-e-info a {
	position: relative;
}

.qodef-e-info a[rel="tag"]::after,
.qodef-e-info a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	height: 24px;
	transform: translateY(-50%);
}

/* --------------------------------------------------------------------------
   T2c-3  Links im Fliesstext erkennbar (WCAG 1.4.1, Verwendung von Farbe)
   Auf den Kontaktseiten steht „Datenschutzerklaerung" als Link (#14203B) im
   Fliesstext (#4A4A4A). Der Farbunterschied allein traegt nicht (< 3 : 1),
   deshalb eine Unterstreichung. Betrifft nur diesen Hinweissatz.
   -------------------------------------------------------------------------- */
.ub-privacy-note a,
.ub-form .ub-privacy-note a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* Dasselbe in den Rechtstexten: Impressum, Datenschutz und Cookie-Richtlinie
   verlinken im Fliesstext auf die jeweils anderen Seiten. Navy #14203B auf
   Textgrau #262626 unterscheidet sich zu wenig (< 3 : 1), also unterstreichen.
   `:not([class])` laesst die eigens gestalteten Links (Schaltflaechen,
   .qodef-custom-link-light im Footer) unberuehrt. */
.elementor-widget-html p > a:not([class]),
.elementor-widget-html li > a:not([class]),
.elementor-widget-html td > a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}

/* --------------------------------------------------------------------------
   T2f  Kontrast der Elementor-Globalfarbe „Text" (#7A7A7A)
   Gemessen ueber alle vier Sprachen und alle Seitentypen: die Farbe wird
   ausschliesslich im Abschnitt „Wer sind wir?" der Startseiten sichtbar,
   dort auf #141C2C = 3,97 : 1. Auf hellem Grund kommt sie nirgends vor.
   Ein einziger Globalwert kann nicht gleichzeitig auf #14203B und auf Weiss
   4,5 : 1 erreichen (siehe Protokoll), deshalb wird hier gezielt nur dieses
   Textfeld korrigiert; der Elementor-Globalwert bleibt unveraendert.
   #929292 auf #141C2C = 5,48 : 1.
   -------------------------------------------------------------------------- */
.elementor-element-69ae2ff,
.elementor-element-69ae2ff p,
.elementor-element-69ae2ff li,
.elementor-element-69ae2ff strong,
.elementor-element-69ae2ff span:not([style*="color"]) {
	color: #929292;
}

/* --------------------------------------------------------------------------
   T2d  Optik der Ueberschriften festhalten
   Die HTML-Ebenen der Startseiten werden in den Elementor-Daten begradigt
   (h4 -> h3, h3 -> h2, h5 -> h3 usw.). Damit sich fuer das Auge nichts
   aendert, werden Schriftgroesse, Zeilenhoehe und Abstaende hier auf die
   vorher gemessenen Werte festgenagelt.

   Messwerte vorher:
     Listentitel / Kachel / Team / Banner-Tagline  h4  28 px / 35,98 px
     Abschnittstitel „Wer sind wir?"               h3  34 px / 43,996 px
     Zaehlertitel                                  h5  20 px / 28 px
     Footer-Widget-Titel                           h5  20 px / 28 px
     Tagline „Fachgebiet"                          h6  11 px / 17,6 px / 6,6 px LS
   -------------------------------------------------------------------------- */
.qodef-m-list-item-title,
.qodef-portfolio-list .qodef-e-title,
.qodef-team-list .qodef-e-title,
.qodef-banner .qodef-m-tagline,
h3.qodef-m-list-item-title,
h3.qodef-e-title,
h2.qodef-m-tagline {
	font-size: 28px;
	line-height: 35.98px;
	letter-spacing: normal;
	text-transform: none;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 0;
}

.elementor-element-96aa76b .qodef-m-title,
h2.qodef-m-title.ub-a11y-keep-h3 {
	font-size: 34px;
	line-height: 43.996px;
	margin-top: 0;
	margin-bottom: 0;
}

.qodef-counter .qodef-m-title,
.elementor-element-36c40bfe .qodef-m-title {
	font-size: 20px;
	line-height: 28px;
	margin-top: 5px;
	margin-bottom: 0;
}

#qodef-page-footer .qodef-widget-title {
	font-size: 20px;
	line-height: 28px;
	letter-spacing: normal;
	text-transform: none;
	font-weight: 400;
	margin-top: 0;
	margin-bottom: 19px;
}

/* Tagline „Fachgebiet" wird vom h6 zum p — Optik unveraendert. */
.qodef-section-title .qodef-m-tagline,
p.qodef-m-tagline {
	font-family: Montserrat, "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 500;
	line-height: 17.6px;
	letter-spacing: 6.6px;
	text-transform: uppercase;
	color: #b29063;
	margin-top: 0;
	margin-bottom: 13px;
}

/* Die Buero-Ueberschriften im Textfeld behalten ihre Groesse. */
.elementor-element-7cad5b3 h2 {
	font-size: 34px;
	line-height: 43.996px;
}

.elementor-element-c47ac8e h3,
.elementor-element-9d6bcf0 h3 {
	font-size: 28px;
	line-height: 35.98px;
	margin: 0;
}

/* --------------------------------------------------------------------------
   T2e  prefers-reduced-motion
   Wer im Betriebssystem „Bewegung reduzieren" eingestellt hat, bekommt die
   Inhalte sofort im Endzustand: keine Einblend-, Zaehl- oder Parallax-
   Bewegung. Die Dauer wird nicht auf 0 gesetzt, sondern auf 1 Mikrosekunde,
   damit Skripte, die auf transitionend/animationend warten, weiterlaufen.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		transition-delay: 0ms !important;
	}

	html {
		scroll-behavior: auto !important;
	}

	/* Parallax-Hintergruende festsetzen. */
	.qodef-parallax,
	.qodef-parallax-row-holder,
	[data-parallax],
	.qodef--parallax,
	.elementor-motion-effects-element,
	.elementor-motion-effects-layer {
		background-attachment: scroll !important;
		transform: none !important;
		will-change: auto !important;
	}

	/* Einblend-Animationen des Themes sofort im Endzustand. */
	.qodef-appear-animation,
	.qodef--appear,
	.qodef-fade-in,
	.elementor-invisible {
		opacity: 1 !important;
		visibility: visible !important;
		transform: none !important;
	}
}