/* ==========================================================================
   UB Consulting — Kontaktseiten im Look der Startseite
   Eingebunden von inc/ub-contact-design.php, NUR auf den vier Kontaktseiten
   (en 11168, de 11169, sv 11170, et 11171 — gelesen aus ub_contact_page_ids).

   JEDE Regel ist mit `.ub-contact-page` geschachtelt. Faellt die Body-Klasse
   weg, greift nichts davon — andere Unterseiten koennen nicht betroffen sein.

   Farben:  Dunkelblau #14203B · Sand #D4BFA3 · Off-White #FAF8F5 · Weiss
   Gemessene Kontraste (WCAG 2.1, 1.4.3 / 1.4.11) stehen an der jeweiligen
   Regel und im PROTOKOLL-kontaktdesign-consent-button.md.

   Sand wird NIE als Textfarbe auf Weiss verwendet (1,78:1) — nur als
   Schaltflaechen-Hintergrund mit dunkelblauer Schrift und als Linkfarbe auf
   Dunkelblau.
   ========================================================================== */

body.ub-contact-page {
	--ub-navy: #14203b;
	--ub-sand: #d4bfa3;
	--ub-offwhite: #faf8f5;
	--ub-onnavy: #d9dee8;       /* Fliesstext auf Dunkelblau — 11,99:1 */
	--ub-onnavy-mute: #c3cad8;  /* Kleingedrucktes auf Dunkelblau — 9,93:1 */
	--ub-field-border: #6e7380; /* Feldkontur auf Weiss — 4,74:1 (>= 3:1) */
	--ub-error: #b3261e;        /* Fehlerrot auf Off-White — 6,16:1 */
}

/* --------------------------------------------------------------------------
   1) Titelzone
   Der Seitenhintergrund ist bereits dunkelblau (Seiten-Metafeld
   qodef_page_background_color, wie auf der Startseite). Die Titelzone braucht
   deshalb KEINEN Vollbreiten-Trick mit 100vw — solche Regeln erzeugen auf
   Systemen mit sichtbarer Bildlaufleiste waagrechtes Scrollen.

   Stattdessen liegt das Band auf einem Pseudo-Element des ohnehin vollbreiten
   Wrappers #qodef-page-outer (das Theme gibt ihm bereits position: relative).
   Das Pseudo-Element hat eine feste Hoehe, sodass `cover` das Kiew-Foto der
   Startseite sauber auf diese Flaeche zuschneidet — ohne es zu verzerren und
   ohne es auf die gesamte Seitenhoehe zu strecken.

   Der Verlauf darueber endet bei 100 % in vollem Dunkelblau; das Band geht
   damit ohne sichtbare Kante in den dunkelblauen Seitenhintergrund ueber.

   --ub-contact-hero wird von inc/ub-contact-design.php gesetzt. Fehlt sie,
   bleibt die Zone einfarbig dunkelblau.
   -------------------------------------------------------------------------- */
body.ub-contact-page #qodef-page-outer {
	background-color: var(--ub-navy);
}

body.ub-contact-page #qodef-page-outer::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 520px;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(
			to bottom,
			rgba(20, 32, 59, 0.55) 0%,
			rgba(20, 32, 59, 0.74) 55%,
			rgb(20, 32, 59) 100%
		),
		var(--ub-contact-hero, none);
	background-repeat: no-repeat, no-repeat;
	background-position: center top, center 32%;
	background-size: cover, cover;
}

/* Der Inhalt muss ueber dem Band liegen. */
body.ub-contact-page #qodef-page-inner {
	position: relative;
	z-index: 1;
}

/* Abstand nach oben: der Inhalt liegt wegen qodef_content_behind_header = yes
   unter dem transparenten Header (Kopfhoehe 130 px, mobil 70 px). */
body.ub-contact-page .ub-contact-intro {
	padding-top: 196px;
	padding-bottom: 16px;
}

body.ub-contact-page .ub-contact-intro h1 {
	margin-top: 0;
	margin-bottom: 20px;
	color: #ffffff;              /* Weiss auf #14203B — 16,16:1 */
	font-family: "Marcellus", serif;
}

body.ub-contact-page .ub-contact-intro .ub-lead {
	color: var(--ub-onnavy);     /* #D9DEE8 auf #14203B — 11,99:1 */
	font-family: "Montserrat", sans-serif;
	max-width: 46em;
}

/* --------------------------------------------------------------------------
   2) Ueberschriften im Inhaltsbereich
   Der Bereich unter der Titelzone steht auf dunkelblauem Seitenhintergrund.
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-contact-h2 {
	color: #ffffff;              /* 16,16:1 */
}

/* --------------------------------------------------------------------------
   3) Formular als helle Karte
   Die Karte ist bewusst Off-White statt Reinweiss: ruhiger Kontrast zum
   dunkelblauen Grund, ohne an Lesbarkeit zu verlieren (Dunkelblau auf
   #FAF8F5 = 15,24:1).
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-form {
	background-color: var(--ub-offwhite);
	border: 1px solid #e7e0d6;
	padding: 34px 32px 30px;
}

/* --- Beschriftungen ------------------------------------------------------- */
body.ub-contact-page .ub-form .ub-field label {
	color: var(--ub-navy);       /* auf #FAF8F5 — 15,24:1 */
}

body.ub-contact-page .ub-form .ub-field .ub-opt {
	color: #5e5e5e;              /* auf #FAF8F5 — 6,12:1 */
}

body.ub-contact-page .ub-form .ub-req {
	color: var(--ub-error);      /* auf #FAF8F5 — 6,16:1 */
}

/* --- Felder mit klarer Kontur ---------------------------------------------
   Das Theme zeichnet Eingabefelder nur mit einer unteren Linie und setzt die
   Schriftfarbe global auf Weiss (halstein-style-inline-css:
   `input[type="text"], … , textarea { color: rgb(255,255,255); }`).
   Auf der hellen Karte waere getippter Text damit unsichtbar. Beides wird
   hier — ausschliesslich innerhalb von .ub-contact-page .ub-form — korrigiert.
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-form input[type="text"],
body.ub-contact-page .ub-form input[type="email"],
body.ub-contact-page .ub-form input[type="tel"],
body.ub-contact-page .ub-form textarea {
	background-color: #ffffff;
	border: 1px solid var(--ub-field-border);   /* 4,74:1 gegen Weiss */
	border-radius: 2px;
	color: var(--ub-navy);                      /* Eingabe: 15,91:1 gegen Weiss */
	padding: 11px 12px;
	margin-bottom: 22px;
}

body.ub-contact-page .ub-form input[type="text"]::placeholder,
body.ub-contact-page .ub-form input[type="email"]::placeholder,
body.ub-contact-page .ub-form input[type="tel"]::placeholder,
body.ub-contact-page .ub-form textarea::placeholder {
	color: #5e5e5e;                             /* 7,00:1 gegen Weiss */
	opacity: 1;
}

body.ub-contact-page .ub-form input[type="text"]:hover,
body.ub-contact-page .ub-form input[type="email"]:hover,
body.ub-contact-page .ub-form input[type="tel"]:hover,
body.ub-contact-page .ub-form textarea:hover {
	border-color: #4b5262;
}

/* Fokus: zusaetzlich zur Kontur ein Ring. Der sichtbare Tastaturfokus aus
   ub-blockb.css (outline 3px #14203B) bleibt unangetastet — er sitzt auf
   :focus-visible und wird hier nicht ueberschrieben. */
body.ub-contact-page .ub-form input[type="text"]:focus,
body.ub-contact-page .ub-form input[type="email"]:focus,
body.ub-contact-page .ub-form input[type="tel"]:focus,
body.ub-contact-page .ub-form textarea:focus {
	border-color: var(--ub-navy);
	box-shadow: 0 0 0 3px rgba(20, 32, 59, 0.14);
}

body.ub-contact-page .ub-form textarea {
	min-height: 190px;
}

/* --- Datenschutzhinweis (Text unveraendert) -------------------------------- */
body.ub-contact-page .ub-form .ub-privacy-note {
	color: #4a4a4a;              /* auf #FAF8F5 — 8,37:1 */
}

body.ub-contact-page .ub-form .ub-privacy-note a {
	color: var(--ub-navy);       /* 15,24:1 */
}

/* --- Schaltflaeche: wie der Hero-Button --------------------------------- */
body.ub-contact-page .ub-form .wpcf7-submit.qodef-button {
	color: var(--ub-navy);               /* Dunkelblau auf Sand — 9,06:1 */
	background-color: var(--ub-sand);
	border-color: transparent;
}

body.ub-contact-page .ub-form .wpcf7-submit.qodef-button:hover,
body.ub-contact-page .ub-form .wpcf7-submit.qodef-button:focus {
	color: var(--ub-navy);
	background-color: #ffffff;           /* 15,91:1 */
	border-color: var(--ub-navy);
}

/* --- Validierung ----------------------------------------------------------
   Fehlermeldungen von Contact Form 7 stehen innerhalb der hellen Karte.
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-form .wpcf7-not-valid-tip {
	color: var(--ub-error);      /* auf #FAF8F5 — 6,16:1 */
	margin: -18px 0 16px;
}

body.ub-contact-page .ub-form .wpcf7-not-valid {
	border-color: var(--ub-error) !important;
	border-width: 2px !important;
}

/* Die Sammelmeldung steht ausserhalb der Karte auf Dunkelblau. Damit sie dort
   nicht als roter Text auf Dunkelblau endet (3,43:1), bekommt sie einen
   hellen Grund. */
body.ub-contact-page .wpcf7 .wpcf7-response-output {
	background-color: var(--ub-offwhite);
	border-color: currentColor !important;
}

body.ub-contact-page .wpcf7 form.invalid .wpcf7-response-output,
body.ub-contact-page .wpcf7 form.unaccepted .wpcf7-response-output,
body.ub-contact-page .wpcf7 form.payment-required .wpcf7-response-output,
body.ub-contact-page .wpcf7 form.spam .wpcf7-response-output,
body.ub-contact-page .wpcf7 form.failed .wpcf7-response-output,
body.ub-contact-page .wpcf7 form.aborted .wpcf7-response-output {
	color: var(--ub-error) !important;   /* 6,16:1 */
}

body.ub-contact-page .wpcf7 form.sent .wpcf7-response-output {
	color: #1b5e20 !important;           /* auf #FAF8F5 — 6,58:1 */
}

/* --------------------------------------------------------------------------
   4) Kontaktdaten / Bueros / Rechtstraeger — zweite Spalte auf Dunkelblau
   Die Spaltenaufteilung (58 % / Rest, ab Tablet gestapelt) stammt aus den
   Elementor-Daten der Seite und bleibt unveraendert.
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-contact-info,
body.ub-contact-page .ub-contact-info p,
body.ub-contact-page .ub-contact-info li,
body.ub-contact-page .ub-contact-info strong {
	color: #ffffff;              /* 16,16:1 */
}

body.ub-contact-page .ub-contact-info .ub-contact-h2,
body.ub-contact-page .ub-contact-info .ub-contact-h3 {
	color: #ffffff;              /* ersetzt das Dunkelblau aus ub-blockb.css */
}

/* Die Regel bleibt als Vorsorge stehen, falls der Block je zurueckkehrt.
   Seit Paket A/Teil 1 (2026-09-21) enthaelt keine der vier Kontaktseiten
   mehr einen Rechtstraeger-Absatz. */
body.ub-contact-page .ub-contact-info .ub-contact-legal {
	color: var(--ub-onnavy-mute);   /* #C3CAD8 auf #14203B — 9,93:1 */
}

/* Ohne den Rechtstraeger-Absatz endet die rechte Spalte mit der Bueroliste.
   Deren letztes <li> traegt 18 px Aussenabstand nach unten — der wuerde als
   lose Luecke ueber dem Footer stehen (auf Mobil ist diese Spalte die letzte
   des Inhalts). Nur das letzte Element verliert den Abstand; die Abstaende
   zwischen den Bueros bleiben unveraendert. */
body.ub-contact-page .ub-contact-info > *:last-child,
body.ub-contact-page .ub-contact-info .ub-contact-offices li:last-child {
	margin-bottom: 0;
}

body.ub-contact-page .ub-contact-info a {
	color: var(--ub-sand);       /* Sand auf Dunkelblau — 9,06:1 */
}

body.ub-contact-page .ub-contact-info a:hover {
	color: #ffffff;
}

/* --------------------------------------------------------------------------
   5) Sichtbarer Fokus auf dunkelblauem Grund
   ub-blockb.css setzt site-weit einen dunkelblauen Ring. Auf Dunkelblau waere
   er unsichtbar; dort wird nur die Farbe getauscht. Die :focus-visible-Regel
   selbst bleibt erhalten.
   -------------------------------------------------------------------------- */
body.ub-contact-page .ub-contact-info a:focus-visible,
body.ub-contact-page .ub-contact-intro a:focus-visible {
	outline-color: var(--ub-sand);
}

/* --------------------------------------------------------------------------
   6) Abstand nach unten, bevor der Footer beginnt
   -------------------------------------------------------------------------- */
body.ub-contact-page #qodef-page-outer {
	padding-bottom: 96px;
}

/* --------------------------------------------------------------------------
   7) Schmale Ansichten
   Ab 1024 px ist der mobile Header 70 px hoch (#qodef-page-outer bekommt vom
   Theme margin-top: -70px).
   -------------------------------------------------------------------------- */
@media only screen and (max-width: 1024px) {
	body.ub-contact-page #qodef-page-outer {
		padding-bottom: 72px;
	}

	body.ub-contact-page #qodef-page-outer::before {
		height: 400px;
	}

	body.ub-contact-page .ub-contact-intro {
		padding-top: 124px;
	}
}

@media only screen and (max-width: 680px) {
	body.ub-contact-page #qodef-page-outer {
		padding-bottom: 56px;
	}

	body.ub-contact-page #qodef-page-outer::before {
		height: 340px;
	}

	body.ub-contact-page .ub-contact-intro {
		padding-top: 108px;
		padding-bottom: 8px;
	}

	body.ub-contact-page .ub-form {
		padding: 24px 20px 22px;
	}
}