/*
Lorenz Meters - Kontaktformular Modul (mod_ddm_formular)
creation Date: 2026-09-09
Author: Sebastian Osinski
http://www.sebbi.net
https://ddm-friends.de
*/

/* ------------------------------------------------------------------
   Alle Masse sind aus kundendaten/07_Kontakt/01_Template/
   Lorenz_WEB_Kontakt.jpg abgenommen. Das Layout ist 7938 px breit und
   entspricht 1920 CSS-Pixeln.

   Das Formular steht dort 1207 px breit mittig in der 1324er
   .main-container, haengt also rund 58 px innerhalb der Ueberschrift
   "Kontaktformular" darueber. Zwei Spalten zu 594 px mit 20 px
   Abstand, jede Zeile 83 px hoch: 18 px Beschriftung, 33 px Eingabe,
   1 px Linie, 32 px Abstand zur naechsten Zeile.

   Drei Stellen weichen bewusst vom Entwurf ab:

   1. Die Beschriftungen stehen dort in #969696. Auf dem grauen
      Abschnitt sind das 2,6:1 - zu wenig fuer Text. Sie nehmen
      deshalb --c-dg2 (4,7:1). Die Linien unter den Feldern behalten
      das gezeichnete Grau, sie sind kein Text.
   2. Der Absendeknopf ist im Entwurf 199 x 33 px. Hier ist es der
      .contentbutton des Templates, wie ihn jeder andere Knopf dieser
      Seite auch nimmt - ein Formular ist kein Grund fuer eine zweite
      Knopfform.
   3. Das Wuerfel-Captcha des Entwurfs ist das ddm_captcha des
      Templates: ein Klick statt einer Rechenaufgabe.

   Die Eingaben sind 16 px gross statt der gezeichneten 14: unter
   16 px zoomt iOS beim Hineintippen in das Feld hinein und die Seite
   springt. Beschriftungen bleiben bei 14 px.

   Das Formular ist durchgehend in normaler Laufweite gesetzt, nicht
   in der schmalen des Fliesstextes - so ist es im Entwurf gemessen
   (rund 0,55 em je Zeichen) und so liest sich ein Formular besser.
   ------------------------------------------------------------------ */

.ddm_formular{
	--form-width: 1208px;
	--form-col-gap: 20px;
	--form-row-gap: 32px;
	--form-line: #969696;
	--form-line-focus: var(--c-blue, #2b2d7a);
	--form-label: var(--c-dg2, #777777);
	--form-text: var(--c-dg, #4c4c4c);
	--form-error: var(--c-red, #cd1719);

	max-width: var(--form-width);
	margin-left: auto;
	margin-right: auto;
	/* Nach dem Absenden springt die Seite auf den Anker des Formulars -
	   ohne diesen Abstand laege sein Anfang unter der festen Menueleiste,
	   die dann schon ihre kleine Hoehe hat. */
	scroll-margin-top: calc(var(--menu-height-small, 80px) + 30px);
	font-family: var(--font-base, "OpenSans", sans-serif);
	font-stretch: var(--width-normal, 100%);
	color: var(--form-text);
}

/* Ohne das rechnet die Polsterung eines Feldes zu seiner Breite hinzu
   und die beiden Spalten passen nicht mehr in die Zeile. */
.ddm_formular *,
.ddm_formular *::before,
.ddm_formular *::after{
	box-sizing: border-box;
}

.ddm_formular [hidden]{
	display: none;
}

/* Der Abschnitt um das Formular herum ist .blue eingefaerbt und
   .contstyles gibt jedem Absatz 15 px Aussenabstand - beides muss hier
   weg, das Formular setzt seine Abstaende selbst. */
.ddm_formular p,
.contstyles .ddm_formular p{
	margin-top: 0px;
	margin-bottom: 0px;
	line-height: inherit;
}

/* ------------------------------------------------------------------
   Zeilen und Felder
   ------------------------------------------------------------------ */

/* Ein Feld allein in der Zeile bleibt in der linken Spalte stehen -
   Anrede, Betreff und E-Mail sind im Entwurf genau so gezeichnet. */
.ddm_formular .form_row{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--form-col-gap);
}

.ddm_formular .form_field{
	display: flex;
	flex-direction: column;
	margin-bottom: var(--form-row-gap);
	min-width: 0;
}

.ddm_formular .form_field_wide{
	grid-column: 1 / -1;
}

.ddm_formular .form_label,
.contstyles .ddm_formular .form_label{
	display: block;
	margin: 0px;
	padding: 0px;
	font-size: 14px;
	line-height: 18px;
	font-weight: var(--weight-regular, 400);
	font-stretch: var(--width-normal, 100%);
	color: var(--form-label);
}

/* Das Sternchen ist gezeichnet, nicht gesprochen: dass ein Feld ein
   Pflichtfeld ist, sagt required dem Vorleseprogramm. */
.ddm_formular .form_req{
	margin-left: 2px;
}

.ddm_formular input[type="text"],
.ddm_formular input[type="email"],
.ddm_formular input[type="tel"],
.ddm_formular select,
.ddm_formular textarea{
	display: block;
	width: 100%;
	margin: 0px;
	padding: 0px;
	border: none;
	border-bottom: 1px solid var(--form-line);
	border-radius: 0px;
	background-color: transparent;
	font-family: inherit;
	font-stretch: var(--width-normal, 100%);
	font-size: 16px;
	line-height: 22px;
	color: var(--form-text);
	-webkit-appearance: none;
	appearance: none;
}

.ddm_formular input[type="text"],
.ddm_formular input[type="email"],
.ddm_formular input[type="tel"],
.ddm_formular select{
	height: 33px;
}

/* Der Entwurf zeichnet die Nachricht 78 px hoch, also rund drei
   Zeilen. Groesser ziehen darf sie trotzdem, wer mehr zu sagen hat. */
.ddm_formular textarea{
	height: 78px;
	min-height: 78px;
	padding-top: 6px;
	resize: vertical;
}

.ddm_formular input:focus-visible,
.ddm_formular select:focus-visible,
.ddm_formular textarea:focus-visible{
	outline: none;
	border-bottom-color: var(--form-line-focus);
	/* Die zweite Linie liegt als Schatten unter der ersten, statt den
	   Rahmen zu verdicken - so bleibt die Zeile beim Hineinklicken
	   genau da stehen, wo sie war. */
	box-shadow: 0px 1px 0px 0px var(--form-line-focus);
}

.ddm_formular .form_field._err input,
.ddm_formular .form_field._err select,
.ddm_formular .form_field._err textarea{
	border-bottom-color: var(--form-error);
}

.ddm_formular .form_field._err .form_label{
	color: var(--form-error);
}

/* Auswahlfeld ---------------------------------------------------
   Das native select bleibt stehen, nur sein Pfeil wird selbst
   gezeichnet: ein eigenes Aufklappmenue waere auf dem Telefon
   schlechter zu bedienen und muesste die Tastatursteuerung
   nachbauen, die das Original mitbringt. */
.ddm_formular .form_select{
	position: relative;
}

.ddm_formular .form_select select{
	padding-right: 26px;
	cursor: pointer;
}

.ddm_formular .form_select::after{
	content: "";
	position: absolute;
	right: 6px;
	top: 13px;
	width: 0px;
	height: 0px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--form-text);
	pointer-events: none;
}

/* Der leere erste Eintrag ist eine Aufforderung, keine Auswahl - er
   steht deshalb im Grau der Beschriftungen. */
.ddm_formular select:has(option[value=""]:checked){
	color: var(--form-label);
}

/* Angefragtes Produkt --------------------------------------------
   Weisse Karte ueber den Feldern, nur bei einer Anfrage von einer
   Produktdetailseite: das Bild links, Beschriftung und Titel rechts
   daneben. Weiss als Gegenton zum grauen
   Abschnitt, wie die Kacheln der Produktseiten. Das Motiv wird wie
   dort vergroessert, die Produktfotos bringen viel leeren Rand mit. */
.ddm_formular .form_product{
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 36px;
	padding: 16px 24px 16px 16px;
	background-color: #ffffff;
	border-left: 4px solid var(--c-blue, #2b2d7a);
}

.ddm_formular .form_product_media{
	flex: 0 0 96px;
	height: 96px;
	overflow: hidden;
}

.ddm_formular .form_product_media img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	/* Staerker als in den Kacheln: im kleinen Rahmen bliebe das Motiv
	   sonst ein Punkt in der Mitte. */
	transform: scale(1.7);
}

.ddm_formular .form_product_text{
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.ddm_formular .form_product_label{
	font-size: 14px;
	line-height: 18px;
	color: var(--form-label);
}

.ddm_formular .form_product_title{
	margin-top: 2px;
	font-stretch: var(--width-condensed, 75%);
	font-weight: var(--weight-bold, 700);
	font-size: 24px;
	line-height: 28px;
	color: var(--c-blue, #2b2d7a);
	overflow-wrap: anywhere;
}

/* Fester Betreff -------------------------------------------------
   Anfrage von einer Produktdetailseite: das Feld zeigt das Produkt und
   laesst sich nicht aendern. Es sieht aus wie die anderen Felder, nur
   ohne Pfeil, mit Schloss und in der Hausfarbe - so ist es als
   vorbelegt zu lesen und nicht als ausgegraut. Ein langer Titel endet
   in Auslassungspunkten statt unter das Schloss zu laufen. */
.ddm_formular .form_locked_value{
	position: relative;
}

.ddm_formular .form_locked input{
	padding-right: 26px;
	color: var(--c-blue, #2b2d7a);
	text-overflow: ellipsis;
	cursor: default;
}

.ddm_formular .form_locked_value::after{
	content: "";
	position: absolute;
	right: 4px;
	top: 8px;
	width: 13px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath fill='%23777777' d='M3 7V5a4 4 0 0 1 8 0v2h1a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1zm2 0h4V5a2 2 0 0 0-4 0v2z'/%3E%3C/svg%3E") no-repeat center / contain;
	pointer-events: none;
}

/* ------------------------------------------------------------------
   Anhaenge

   Im Entwurf nicht gezeichnet. Sie stehen deshalb bewusst ruhig:
   Beschriftung und Knopf in einer Zeile, darunter nichts, was mit den
   Eingabefeldern darueber um Aufmerksamkeit streitet.

   Das Dateifeld selbst ist versteckt, aber nicht display:none - es
   bleibt fokussierbar, und der Rahmen um den Knopf zeigt den Fokus an.
   Die Beschriftung umschliesst Zeile und Knopf, ein Klick irgendwo
   darauf oeffnet die Dateiauswahl. Ohne Javascript funktioniert das
   alles; nur der Dateiname bleibt dann stehen, wie er ist.
   ------------------------------------------------------------------ */

.ddm_formular .form_uploads{
	margin-bottom: var(--form-row-gap);
}

.ddm_formular .form_uploads_headline,
.contstyles .ddm_formular .form_uploads_headline{
	margin-bottom: 6px;
	font-family: var(--font-bold, "OpenSans", sans-serif);
	font-weight: var(--weight-bold, 700);
	font-size: 16px;
	line-height: 22px;
	color: var(--form-text);
}

.ddm_formular .form_uploads_intro,
.contstyles .ddm_formular .form_uploads_intro,
.ddm_formular .form_uploads_hint,
.contstyles .ddm_formular .form_uploads_hint{
	font-size: 14px;
	line-height: 20px;
	color: var(--form-label);
}

.ddm_formular .form_uploads_hint,
.contstyles .ddm_formular .form_uploads_hint{
	margin-bottom: 18px;
}

.ddm_formular .form_file{
	position: relative;
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}

.ddm_formular .form_file_control{
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
}

.ddm_formular .form_file_control .form_label{
	width: 96px;
	flex: 0 0 auto;
}

.ddm_formular .form_file_button{
	display: block;
	padding: 6px 20px;
	border: 1px solid var(--c-blue, #2b2d7a);
	border-radius: 6px;
	font-family: var(--font-bold, "OpenSans", sans-serif);
	font-weight: var(--weight-bold, 700);
	font-size: 14px;
	line-height: 20px;
	color: var(--c-blue, #2b2d7a);
	background-color: transparent;
	transition: background-color 200ms ease, color 200ms ease;
}

.ddm_formular .form_file_control:hover .form_file_button{
	background-color: var(--c-blue, #2b2d7a);
	color: var(--c-white, #ffffff);
}

.ddm_formular .form_file input[type="file"]{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0px;
}

/* Das Feld selbst ist unsichtbar, den Fokus zeigt der Knopf an. */
.ddm_formular .form_file:has(input[type="file"]:focus-visible) .form_file_button{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 2px;
}

.ddm_formular .form_file_name{
	font-size: 14px;
	line-height: 20px;
	color: var(--form-label);
	overflow-wrap: anywhere;
}

.ddm_formular .form_file._err .form_file_name{
	color: var(--form-error);
}

.ddm_formular .form_error{
	display: block;
	font-size: 14px;
	line-height: 20px;
	color: var(--form-error);
}

/* ------------------------------------------------------------------
   Newsletter und Einwilligung

   Auswahlknopf und Ankreuzfeld sind die eigenen Elemente, nur
   umgezeichnet - appearance:none nimmt ihnen das Aussehen, nicht ihr
   Verhalten. Ein nachgebauter Kreis aus einem span haette weder
   Tastatursteuerung noch Gruppierung.
   ------------------------------------------------------------------ */

.ddm_formular .form_radios{
	margin: 0px 0px var(--form-row-gap) 0px;
	padding: 0px;
	border: none;
}

.ddm_formular .form_radios legend{
	margin: 0px 0px 6px 0px;
	padding: 0px;
}

.ddm_formular .form_radio,
.ddm_formular .form_consent{
	display: flex;
	align-items: flex-start;
	gap: 14px;
	min-height: 26px;
}

.ddm_formular .form_radio label,
.ddm_formular .form_consent label{
	font-size: 16px;
	line-height: 26px;
	color: var(--form-text);
	cursor: pointer;
}

.ddm_formular .form_consent{
	max-width: 800px;
	margin-bottom: var(--form-row-gap);
}

.ddm_formular .form_consent label{
	line-height: 22px;
}

.ddm_formular .form_consent a{
	text-decoration: underline;
	color: var(--c-blue, #2b2d7a);
}

.ddm_formular input[type="radio"],
.ddm_formular input[type="checkbox"]{
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 4px 0px 0px 0px;
	padding: 0px;
	border: 2px solid var(--form-text);
	background-color: transparent;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}

.ddm_formular input[type="radio"]{
	border-radius: 50%;
}

.ddm_formular input[type="checkbox"]{
	border-radius: 3px;
}

.ddm_formular input[type="radio"]:checked{
	border-color: var(--c-blue, #2b2d7a);
	/* Der Punkt ist ein Innenschatten, kein zweites Element - so bleibt
	   er auch dann rund, wenn der Browser die Groesse anders rundet. */
	box-shadow: inset 0px 0px 0px 3px var(--c-white, #ffffff);
	background-color: var(--c-blue, #2b2d7a);
}

.ddm_formular input[type="checkbox"]:checked{
	border-color: var(--c-blue, #2b2d7a);
	background-color: var(--c-blue, #2b2d7a);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M3 7.4 5.9 10.2 11 4.2'/%3E%3C/svg%3E");
	background-size: 100% 100%;
}

.ddm_formular input[type="radio"]:focus-visible,
.ddm_formular input[type="checkbox"]:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 2px;
}

.ddm_formular .form_consent._err input[type="checkbox"]{
	border-color: var(--form-error);
}

.ddm_formular .form_consent._err label{
	color: var(--form-error);
}

/* ------------------------------------------------------------------
   ddm_captcha

   Ein button, kein div: mit der Tastatur erreichbar, und der Klick
   bedeutet dasselbe wie die Eingabetaste. Das Textfeld daneben traegt
   die halbe Zeichenkette und ist ausgeblendet, ohne verschwunden zu
   sein - der Server prueft sie.
   ------------------------------------------------------------------ */

.ddm_formular .form_captcha{
	margin-bottom: 18px;
}

.ddm_formular .ddm_captcha{
	position: relative;
	display: block;
	width: 230px;
	height: 48px;
	padding: 0px;
	overflow: hidden;
	border: 2px solid var(--c-blue, #2b2d7a);
	border-radius: 30px;
	background-color: var(--c-white, #ffffff);
	color: var(--c-blue, #2b2d7a);
	cursor: pointer;
	transition: color 300ms ease, border-color 300ms ease;
}

.ddm_formular .ddm_captcha:hover{
	box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
}

.ddm_formular .ddm_captcha ._bar{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 0%;
	height: 100%;
	background-color: var(--c-lblue, #a3d8e7);
	transition: width 1000ms linear, background-color 300ms ease;
}

.ddm_formular .ddm_captcha ._txt{
	position: relative;
	display: block;
	width: 100%;
	font-family: var(--font-base, "OpenSans", sans-serif);
	font-stretch: var(--width-normal, 100%);
	font-size: 14px;
	line-height: 18px;
	text-align: center;
}

.ddm_formular .ddm_captcha ._top,
.ddm_formular .ddm_captcha ._bot{
	display: block;
}

.ddm_formular .ddm_captcha._holding ._bar{
	width: 100%;
}

.ddm_formular .ddm_captcha._done{
	color: var(--c-white, #ffffff);
	cursor: default;
}

.ddm_formular .ddm_captcha._done ._bar{
	width: 100%;
	background-color: var(--c-blue, #2b2d7a);
}

.ddm_formular .ddm_captcha._done ._txt{
	font-family: var(--font-bold, "OpenSans", sans-serif);
	font-weight: var(--weight-bold, 700);
}

.ddm_formular .ddm_captcha._err{
	border-color: var(--form-error);
	color: var(--form-error);
}

.ddm_formular .ddm_captcha:focus-visible{
	outline: 2px solid var(--c-blue, #2b2d7a);
	outline-offset: 3px;
}

/* ------------------------------------------------------------------
   Meldungen, Absenden, Bestaetigung
   ------------------------------------------------------------------ */

.ddm_formular .form_required,
.contstyles .ddm_formular .form_required{
	margin-bottom: 24px;
	font-size: 14px;
	line-height: 20px;
	color: var(--form-label);
}

/* Kein Kasten, nur eine Kante: ein weisser Block auf dem grauen
   Abschnitt sieht aus wie eine Karte und zieht mehr Aufmerksamkeit auf
   sich, als die Meldung wert ist. Die rote Kante und die rote Schrift
   reichen, die Felder darunter sind ohnehin markiert. */
.ddm_formular .form_note,
.contstyles .ddm_formular .form_note{
	max-width: 800px;
	margin-bottom: 24px;
	padding-left: 14px;
	border-left: 4px solid var(--form-error);
	font-size: 16px;
	line-height: 22px;
	color: var(--form-error);
}

.ddm_formular .form_missing,
.contstyles .ddm_formular .form_missing{
	margin-bottom: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--form-label);
}

/* Der Honigtopf muss ausgefuellt werden koennen, um etwas zu verraten -
   display:none uebergehen viele Skripte. */
.ddm_formular .form_hp{
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.ddm_formular .form_submit{
	margin-top: 10px;
}

/* .contentbutton.autosize gibt seine Groesse sonst an den Link darin
   ab; hier ist der Knopf selbst das Element und traegt die Polsterung. */
.ddm_formular button.contentbutton{
	padding-top: 10px;
	padding-bottom: 10px;
	cursor: pointer;
	transition: opacity 200ms ease;
}

/* .font_s gibt die Zeilenhoehe nur an Absaetze weiter; hier steht sie
   deshalb selbst, sonst haengt die Hoehe des Knopfes an der des body. */
.ddm_formular button.contentbutton > span{
	display: block;
	line-height: 20px;
}

/* Stumpf, solange Pflichtfelder fehlen - aber nicht abgeschaltet:
   wer trotzdem absendet, bekommt die Meldungen des Servers und
   erfaehrt, woran es liegt. */
.ddm_formular button.contentbutton._inact{
	opacity: 0.45;
}

.ddm_formular .form_message{
	max-width: 800px;
}

.ddm_formular .form_message_headline,
.contstyles .ddm_formular .form_message_headline{
	margin-bottom: 10px;
	font-family: var(--font-bold, "OpenSans", sans-serif);
	font-weight: var(--weight-bold, 700);
	font-size: 24px;
	line-height: 30px;
	color: var(--c-blue, #2b2d7a);
}

.ddm_formular .form_message_text,
.contstyles .ddm_formular .form_message_text{
	font-size: 18px;
	line-height: 26px;
	color: var(--form-text);
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */

@media (max-width: 860px){
	.ddm_formular .form_row{
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 600px){
	.ddm_formular .form_file{
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.ddm_formular .form_file_control{
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.ddm_formular .form_file_control .form_label{
		width: auto;
	}

	.ddm_formular .ddm_captcha{
		width: 100%;
		max-width: 260px;
	}
}