/* ==========================================================================
   UB Consulting — Block B / C1
   Eingebunden von inc/ub-blockb.php (haengt an halstein-child-style).

   Farbwelt der Site:  Dunkelblau --qode-main-color #14203B, Gold #B29063,
   Schaltflaeche „filled one" #D4BFA3, Weiss.
   Schriften: Marcellus (Ueberschriften), Montserrat (Flaeche/UI).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0) Sichtbarer Tastatur-Fokus
   Das Theme setzt auf .qodef-button ausdruecklich `outline: none`. Damit war
   die Site per Tastatur nicht bedienbar erkennbar. Wir stellen einen Fokus-
   ring fuer alle interaktiven Elemente wieder her — nur fuer :focus-visible,
   also ohne den Ring bei Mausklick.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.qodef-button:focus-visible,
.qodef-button.qodef-html--link:focus-visible {
	outline: 3px solid #14203b;
	outline-offset: 2px;
	border-radius: 1px;
}

/* Auf dunklem Grund ein heller Ring. */
.ub-cta :focus-visible,
.ub-hero-cta a:focus-visible,
#qodef-page-footer a:focus-visible,
.elementor-element-6f4cda4 a:focus-visible {
	outline-color: #ffffff;
}

/* --------------------------------------------------------------------------
   1) Hero (B2)
   Die H1 ist deutlich laenger als vorher. Breite begrenzen, Zeilenumbrueche
   ausgleichen, keine Trennungsunfaelle.
   -------------------------------------------------------------------------- */
.ub-hero-h1 {
	max-width: 1120px;
	margin-left: auto;
	margin-right: auto;
}

.ub-hero-h1 .elementor-heading-title {
	text-wrap: balance;
	hyphens: manual;
	overflow-wrap: break-word;
	word-break: normal;
}

.ub-hero-sub {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
}

.ub-hero-cta {
	margin-top: 36px;
	text-align: center;
}

.ub-hero-cta .qodef-button {
	min-height: 48px;
	align-items: center;
	justify-content: center;
}

/* Der Theme-Hover macht den Hintergrund transparent und faerbt den Text
   dunkelblau — auf dem dunklen Hero waere die Beschriftung dann unlesbar.
   Deshalb hier: heller Hintergrund, dunkler Text. */
.ub-hero-cta .qodef-button.qodef-layout--filled-one.qodef-html--link:hover,
.ub-hero-cta .qodef-button.qodef-layout--filled-one.qodef-html--link:focus {
	color: #14203b;
	background-color: #ffffff;
	border-color: #ffffff;
}

@media only screen and (max-width: 1024px) {
	.ub-hero-h1 { max-width: 90%; }
	.ub-hero-cta { margin-top: 28px; }
}

@media only screen and (max-width: 680px) {
	.ub-hero-h1 { max-width: 100%; }
	.ub-hero-sub { max-width: 100%; }
	.ub-hero-cta { margin-top: 24px; }
	.ub-hero-cta .qodef-button.qodef-size--large { padding-left: 28px; padding-right: 28px; }
}

/* --------------------------------------------------------------------------
   2) Kontaktseite (B1)
   -------------------------------------------------------------------------- */
.ub-contact-intro h1 {
	margin-top: 0;
}

.ub-contact-intro .ub-lead {
	font-size: 20px;
	line-height: 1.6em;
	max-width: 760px;
	margin-bottom: 0;
}

.ub-contact-h2 {
	margin-top: 0;
	font-size: 30px;
	line-height: 1.25em;
}

.ub-contact-h3 {
	margin: 32px 0 10px;
	font-size: 18px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	color: #14203b;
}

.ub-contact-direct,
.ub-contact-offices {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ub-contact-direct li {
	margin: 0 0 8px;
	font-size: 18px;
}

.ub-contact-direct a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ub-contact-offices li {
	margin: 0 0 18px;
	line-height: 1.6em;
}

.ub-contact-legal {
	font-size: 14px;
	line-height: 1.65em;
	color: #4a4a4a;
}

.ub-contact-legal a {
	text-decoration: underline;
}

@media only screen and (max-width: 680px) {
	.ub-contact-intro .ub-lead { font-size: 18px; }
	.ub-contact-h2 { font-size: 26px; }
}

/* --------------------------------------------------------------------------
   3) Formular (B1)
   -------------------------------------------------------------------------- */
.ub-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 32px;
}

@media only screen and (max-width: 680px) {
	.ub-form-grid { grid-template-columns: 1fr; gap: 0; }
}

.ub-field {
	margin: 0;
}

.ub-field label {
	display: block;
	margin: 0 0 6px;
	font-family: "Montserrat", sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #14203b;
}

.ub-field .ub-opt {
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 12px;
	color: #5e5e5e;
}

/* Pflichtfeld-Kennzeichnung: rot, aber nicht als einziges Merkmal —
   die Felder tragen zusaetzlich aria-required. */
.ub-req {
	color: #b3261e;
	font-weight: 700;
	text-decoration: none;
	border: 0;
	cursor: help;
}

.ub-form input[type="text"],
.ub-form input[type="email"],
.ub-form input[type="tel"],
.ub-form textarea {
	cursor: text;
	margin-bottom: 22px;
	padding: 6px 2px;
}

.ub-form textarea {
	min-height: 190px;
	resize: vertical;
}

.ub-privacy-note {
	font-size: 14px;
	line-height: 1.65em;
	color: #4a4a4a;
	margin: 6px 0 26px;
}

.ub-privacy-note a {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ub-submit {
	margin: 0;
}

.ub-form .wpcf7-submit {
	min-height: 48px;
	cursor: pointer;
	width: auto;
}

.ub-form .wpcf7-submit:hover,
.ub-form .wpcf7-submit:focus {
	color: #14203b;
	background-color: #ffffff;
	border-color: #14203b;
}

/* Honeypot: aus dem Sichtfeld geschoben, nicht display:none. Zusaetzlich
   aria-hidden und tabindex="-1" im Markup (siehe mu-plugin ub-forms.php). */
.ub-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Validierung ---------------------------------------------------------- */
.ub-form .wpcf7-not-valid-tip {
	display: block;
	margin: -18px 0 16px;
	font-size: 14px;
	line-height: 1.5em;
	color: #b3261e;
	font-weight: 500;
}

.ub-form .wpcf7-not-valid {
	border-bottom-color: #b3261e !important;
	border-bottom-width: 2px !important;
}

.wpcf7 .wpcf7-response-output {
	margin: 26px 0 0 !important;
	padding: 14px 18px !important;
	border: 1px solid currentColor !important;
	font-size: 15px;
	line-height: 1.55em;
}

.wpcf7 form.sent .wpcf7-response-output {
	color: #1b5e20 !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
	color: #b3261e !important;
}

/* --------------------------------------------------------------------------
   4) CTA-Block (B2)
   -------------------------------------------------------------------------- */
.ub-cta {
	display: block;
	margin: 80px 0 0;
	padding: 60px 24px;
	background-color: #14203b;
	color: #ffffff;
}

.ub-cta-inner {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.ub-cta-title,
.ub-cta .ub-cta-title {
	margin: 0 0 16px;
	color: #ffffff;
	font-family: "Marcellus", serif;
	font-size: 34px;
	line-height: 1.25em;
	font-weight: 400;
}

.ub-cta-text {
	margin: 0 0 30px;
	color: #ffffff;
	font-size: 17px;
	line-height: 1.65em;
}

.ub-cta-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px 24px;
	margin: 0;
}

.ub-cta-or {
	font-size: 15px;
	color: #ffffff;
}

.ub-cta-or a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.ub-cta .qodef-button.qodef-html--link {
	min-height: 48px;
	align-items: center;
	justify-content: center;
}

.ub-cta .qodef-button.qodef-layout--filled-one.qodef-html--link {
	color: #14203b;
	background-color: #d4bfa3;
	border-color: transparent;
}

/* wie im Hero: auf dunklem Grund darf der Hover nicht transparent werden */
.ub-cta .qodef-button.qodef-layout--filled-one.qodef-html--link:hover,
.ub-cta .qodef-button.qodef-layout--filled-one.qodef-html--link:focus {
	color: #14203b;
	background-color: #ffffff;
	border-color: #ffffff;
}

@media only screen and (max-width: 767px) {
	.ub-cta { margin-top: 56px; padding: 44px 20px; }
	.ub-cta-title { font-size: 27px; }
	.ub-cta-text { font-size: 16px; }
	.ub-cta-actions { flex-direction: column; gap: 18px; }
	.ub-cta .qodef-button.qodef-size--large { padding-left: 30px; padding-right: 30px; }
}

/* Auf den Portfolio-/Leistungsseiten sitzt der CTA innerhalb des Rasters —
   dort den seitlichen Rand des Inhalts aufheben, damit der Block wie ein
   eigener Abschnitt wirkt. */
.qodef-portfolio-single .ub-cta {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   5) Kontaktwege im Mobilmenue (B3)
   Kein schwebender Button — die Kontaktwege stehen im Menue selbst.
   (Der frueher hier erwaehnte Complianz-Reiter „Einwilligung verwalten"
   unten rechts ist seit 2026-09-21 abgeschaltet.)
   -------------------------------------------------------------------------- */
.qodef-mobile-header-navigation > ul > li.ub-mobile-contact {
	margin: 0;
}

.qodef-mobile-header-navigation > ul > li.ub-mobile-contact--mail {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid #e1e1e1;
}

.qodef-mobile-header-navigation > ul > li.ub-mobile-contact--tel {
	margin-top: 10px;
}

.qodef-mobile-header-navigation > ul > li.ub-mobile-contact > a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-family: "Montserrat", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: none;
	line-height: 1.4em;
	color: #14203b;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.qodef-mobile-header-navigation > ul > li.ub-mobile-contact > a:hover {
	color: #b29063;
}

/* Der Menuepunkt „Kontakt" bekommt im Mobilmenue etwas mehr Gewicht. */
.qodef-mobile-header-navigation > ul > li.ub-nav-contact > a {
	font-weight: 700;
	color: #b29063;
}