/*
 * Kontaktformular.
 * Greift auf die Designtokens des Themes zu (theme.json), damit Farben und
 * Abstände mitwandern, wenn dort etwas geändert wird.
 */

.ca-kontakt {
	max-width: 38rem;
}

.ca-feld {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin-block: 0 1.1rem;
}

.ca-feld label {
	font-weight: 600;
}

.ca-feld input,
.ca-feld select,
.ca-feld textarea {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--wp--preset--color--contrast-2, #5A6472);
	border-radius: 0.25rem;
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1A1D21);
	font-family: inherit;
	font-size: 1rem;
}

.ca-feld input:focus,
.ca-feld select:focus,
.ca-feld textarea:focus {
	outline: 2px solid var(--wp--preset--color--primary-strong, #3A5FBF);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--primary-strong, #3A5FBF);
}

/* Pflichtfeld-Markierung: Die Farbe allein darf die Information nicht
   tragen, deshalb steht zusätzlich das Sternchen da. */
.ca-pflicht {
	color: var(--wp--preset--color--primary-strong, #3A5FBF);
}

.ca-hinweis {
	margin-block: 1rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--contrast-2, #5A6472);
}

/* Der Honigtopf muss für Menschen unsichtbar sein, aber für Bots wie ein
   normales Feld aussehen. display:none würde von besseren Bots erkannt –
   deshalb aus dem sichtbaren Bereich schieben. */
.ca-honigtopf {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ca-meldung {
	padding: 0.9rem 1.1rem;
	border-radius: 0.25rem;
	border-inline-start: 4px solid;
	margin-block-end: 1.5rem;
}

.ca-meldung--erfolg {
	border-color: #2E7D5B;
	background-color: #E8F3EE;
	color: #1B4A36;
}

.ca-meldung--fehler {
	border-color: #B04A4A;
	background-color: #FBECEC;
	color: #6E2A2A;
}

/* Im dunklen Kontaktabschnitt (Hintergrund contrast) müssen Beschriftungen
   und Hinweistext hell sein – sonst dunkelgrau auf fast schwarz. */
.has-contrast-background-color .ca-feld label,
.has-contrast-background-color .ca-hinweis,
.has-contrast-background-color .ca-pflicht {
	color: var(--wp--preset--color--base, #fff);
}

.has-contrast-background-color .ca-hinweis a {
	color: var(--wp--preset--color--primary-light, #A6B9E9);
}

/* Der Datenschutzhinweis steht in gedämpftem Grau (contrast-2). Gegen diese
   Farbe erreicht die Linkfarbe nur 1,19:1, ist also nicht unterscheidbar.
   Hier trägt die Unterstreichung die Erkennbarkeit, nicht die Farbe.

   Das ist die Ausnahme von der Regel „Links ohne Unterstreichung": Sie gilt
   nur dort, wo der Link sich um mindestens 3:1 vom Text abhebt. */
.ca-hinweis a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.ca-hinweis a:hover,
.ca-hinweis a:focus-visible {
	text-decoration-thickness: 2px;
}


/* ── Auswahlfeld ──────────────────────────────────────────────────────────
   Ein <select> zeichnet der Browser selbst: eigener Pfeil, eigene
   Innenmasse. Gemessen am 15.09.2026 stand es dadurch 45 px hoch neben
   43 px hohen Eingabefeldern, mit sichtbar anderer Anmutung - im selben
   Formular, direkt untereinander.

   `appearance: none` schaltet die Systemdarstellung ab; der Pfeil kommt
   als Hintergrundbild zurueck. Er ist ein Bedienhinweis und braucht
   deshalb 3:1 - hell erreicht er 6,00:1, dunkel 5,51:1.

   Die Hoehe kommt jetzt aus demselben Polster wie bei input und textarea,
   das Feld reiht sich damit ein. */
.ca-feld select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235A6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.75rem center;
	background-size: 0.75rem;
	padding-inline-end: 2.25rem;
	/* `normal` wie bei input: Eine gesetzte Zeilenhoehe von 1.5 ergab 24 px
	   Inhaltshoehe gegen 22 px beim Eingabefeld - das Auswahlfeld stand
	   dadurch weiterhin 2 px hoeher. */
	line-height: normal;
}

.ist-dunkel .ca-feld select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%239BA4B2' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ── Dunkle Darstellung ───────────────────────────────────────────────────
   Das Theme setzt `ist-dunkel` auf <html>, sobald die dunkle Fassung gilt.
   Laeuft das Formular in einem anderen Theme, greift hier nichts und die
   helle Gestaltung bleibt - deshalb stehen bei allen Farben Rueckfallwerte.

   Alle Werte gerechnet am 14.09.2026, nachzurechnen mit
   docs/kontrast-rechner.py im Theme-Repo. */

.ist-dunkel .ca-feld input,
.ist-dunkel .ca-feld select,
.ist-dunkel .ca-feld textarea {
	/* Der Rahmen traegt hier die Erkennbarkeit: Die Feldflaeche hebt sich
	   mit 1,22:1 kaum von der Seite ab, der Rahmen erreicht 3,67:1 gegen
	   das Feld und 4,47:1 gegen die Seite. contrast-2 kaeme auf 2,31:1. */
	border-color: #7A8494;
	background-color: var(--ca-dm-flaeche-2, #282D34);
	color: var(--ca-dm-text, #E6E8EC);
}

/* primary-strong erreicht auf dunklem Grund nur 2,87:1 und verfehlt die
   3:1 fuer Bedienelemente. primary-light kommt auf 8,65:1. */
.ist-dunkel .ca-feld input:focus-visible,
.ist-dunkel .ca-feld select:focus-visible,
.ist-dunkel .ca-feld textarea:focus-visible {
	outline-color: var(--wp--preset--color--primary-light, #A6B9E9);
	border-color: var(--wp--preset--color--primary-light, #A6B9E9);
}

.ist-dunkel .ca-hinweis,
.ist-dunkel .ca-feld label {
	color: var(--ca-dm-text-gedaempft, #9BA4B2);
}

.ist-dunkel .ca-hinweis a {
	color: var(--ca-dm-link, #7A99E7);
}

.ist-dunkel .ca-pflicht {
	color: var(--wp--preset--color--primary-light, #A6B9E9);
}

/* Statusmeldungen behalten ihre Signalfarben, nur umgekehrt aufgebaut:
   dunkle Flaeche, helle Schrift. Gruen und Rot sind hier bedeutungstragend
   und duerfen nicht zu Grau werden. */
.ist-dunkel .ca-meldung--erfolg {
	border-color: #7FC49B;
	background-color: #16301F;
	color: #A8DCC0;
}

.ist-dunkel .ca-meldung--fehler {
	border-color: #D98A8A;
	background-color: #3A1D1D;
	color: #F2B8B8;
}