/*
 * Das Anmeldeformular im Frontend.
 *
 * Grundsatz seit 22.09.2026: **Das Theme gestaltet, das Plugin ordnet an.**
 * Schrift, Schriftgroesse, Farben und Knopfaussehen kommen vom Theme; hier
 * steht nur, was wo hingehoert.
 *
 * Vorher war es umgekehrt, und zwar unfreiwillig. Die Regeln stammten aus der
 * Zeit der Float-Layouts, "padding:0px" auf den Eingabefeldern nahm dem Theme
 * sogar weg, was es gegeben haette, und der Knopf trug allein die Klasse
 * "button" -- die gestaltet wp-admin, im Frontend bewirkt sie in einem
 * Block-Theme nichts. Am 22.09.2026 im Browser gemessen: Die Seite sprach
 * Manrope, die Felder standen in Arial 13,3 Pixel, und der Knopf war der rohe
 * Knopf des Browsers mit "border: 2px outset".
 *
 * Die Klassennamen bleiben, wie sie waren. Eine Installation, die eine eigene
 * register/index.phtml oder ein eigenes frontend.css hinterlegt hat, verliert
 * dadurch nichts.
 *
 * color-mix() steht jeweils hinter einem festen Wert. Ein Browser, der es
 * nicht kennt, ueberliest die zweite Zeile und behaelt die erste; einer, der
 * es kennt, bekommt eine Farbe, die sich an das Theme anpasst -- auch an ein
 * dunkles, in dem ein fest eingetragenes Grau verschwindet.
 */

/* ----- Meldungen ----- */

#wpng_message p,
#wpng_error p {
	margin: 0 0 0.75rem;
	padding: 0.75em 1em;
	background-color: rgba( 127, 127, 127, 0.08 );
	background-color: color-mix( in srgb, currentColor 8%, transparent );
}

#wpng_message,
#wpng_error {
	margin-bottom: 1.5rem;
}

#wpng_message p:last-child,
#wpng_error p:last-child {
	margin-bottom: 0;
}

#wpng_message p { border-left: 4px solid #7ad03a; }
#wpng_error p   { border-left: 4px solid #dd3d36; }

/* ----- Das Formular ----- */

.wpng_registerForm .wpng_row,
.wpng_registerForm .wpng_row > label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em 1em;
}

.wpng_registerForm .wpng_row {
	margin-bottom: 0.75em;
}

.wpng_registerForm .wpng_row > label {
	width: 100%;
	margin: 0;
	cursor: pointer;
}

/*
 * Die Beschriftungsspalte war mit 48 Prozent so breit, dass das Feld weit
 * rechts stand und beides nicht mehr zusammengehoerte. Eine feste Breite in
 * em waechst stattdessen mit der Schrift des Themes mit.
 */
.wpng_registerForm .label,
.wpng_registerForm .recaptcha_label {
	flex: 0 0 12em;
	max-width: 100%;
}

.wpng_registerForm .field,
.wpng_registerForm .recaptcha_field {
	flex: 1 1 16em;
	min-width: 0;
}

/*
 * Kein font-size, keine Farbe, kein Hintergrund: Was das Theme den
 * Eingabefeldern gibt, bleibt stehen. "font: inherit" holt nur zurueck, was
 * der Browser den Formularelementen von sich aus wegnimmt -- ohne die Zeile
 * stehen sie in der Schrift des Betriebssystems statt in der der Seite.
 */
.wpng_registerForm input[type="text"],
.wpng_registerForm input[type="email"],
.wpng_registerForm select {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	font: inherit;
	line-height: inherit;
}

/*
 * Nur fuer Themes, die Formularfeldern gar nichts mitgeben -- sonst steht das
 * Feld ohne Rahmen da. Wo das Theme selbst einen setzt, gewinnt es: seine
 * Regel steht spaeter im Stylesheet.
 */
.wpng_registerForm input[type="text"]:not([style]),
.wpng_registerForm input[type="email"]:not([style]) {
	padding: 0.5em 0.7em;
	border: 1px solid #8c8f94;
	border-color: color-mix( in srgb, currentColor 35%, transparent );
	border-radius: 2px;
}

.wpng_registerForm .wpng_required {
	margin-left: 0.15em;
	color: #d63638;
}

.wpng_registerForm input[type="submit"] {
	max-width: 100%;
	cursor: pointer;
}

/* ----- Schmale Bildschirme: Beschriftung ueber das Feld ----- */

@media ( max-width: 600px ) {

	.wpng_registerForm .label,
	.wpng_registerForm .recaptcha_label,
	.wpng_registerForm .field,
	.wpng_registerForm .recaptcha_field {
		flex: 1 1 100%;
	}
}

/* ----- Altlasten, die im Markup noch stehen ----- */

/*
 * Die <div class="wpng_clear"> zwischen den Zeilen sind seit dem Umstieg auf
 * Flexbox ohne Wirkung. Die Regel bleibt, weil eine Installation mit eigener
 * Vorlage sie noch braucht.
 */
.wpng_clear { clear: both; }

.recaptcha_label { padding: 0 15px 0 0 !important; }
.recaptcha_field { padding: 0 !important; }

/*
 * Das Lockfeld des Spamschutzes. Es versteckt sich zusaetzlich inline, siehe
 * views/mods/mod_spamschutz/register_form.phtml -- ein Theme, das dieses
 * Stylesheet ersetzt, wuerde es sonst sichtbar machen, und jede Eintragung
 * darin wird stillschweigend verworfen.
 */
.wpng_botsperre {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	margin-left: -10000px;
	margin-top: -10000px;
}

/* ----- Die kurze Fassung: [wpng_form compact="1"] ----- */

/*
 * Gedacht fuer den Platz unter einem Beitrag. Feld und Knopf stehen in einer
 * Zeile, der Datenschutzsatz darunter -- er faellt nicht weg, er ist
 * Pflicht, aber er muss die Zeile nicht sprengen.
 *
 * Die <br /> in der Vorlage waeren hier Flex-Elemente mit eigener Hoehe und
 * rissen die Zeile auseinander.
 *
 * Der Knopf steht unter dem Datenschutzsatz und nicht neben dem Feld. Das
 * waere ueber "order" zu machen, aber die Reihenfolge fuer das Auge waere
 * dann eine andere als die fuer die Tastatur: Wer vom Eingabefeld weitertabbt,
 * landete im Verweis des Datenschutzsatzes -- der unter dem Knopf steht -- und
 * erst danach auf dem Knopf. Drei Zeilen sind kompakt genug.
 */
.wpng_registerForm_kompakt form {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 0.75em;
}

.wpng_registerForm_kompakt br {
	display: none;
}

.wpng_registerForm_kompakt .wpng_row {
	flex: 1 1 18em;
	margin: 0;
}

.wpng_registerForm_kompakt .label {
	flex: 0 0 auto;
}

.wpng_registerForm_kompakt .field {
	flex: 1 1 10em;
}

.wpng_registerForm_kompakt input[type="submit"] {
	flex: 0 0 auto;
}

.wpng_registerForm_kompakt p {
	flex: 1 1 100%;
	margin: 0;
	font-size: 0.875em;
}

@media ( max-width: 600px ) {

	.wpng_registerForm_kompakt .wpng_row,
	.wpng_registerForm_kompakt input[type="submit"] {
		flex: 1 1 100%;
	}
}

/*
 * Das automatisch angehaengte Formular.
 *
 * Es steht unmittelbar hinter dem letzten Absatz des Beitrags und braucht
 * deshalb einen sichtbaren Abstand und eine Trennlinie -- sonst liest es
 * sich wie der Schluss des Textes. Die Linie kommt aus der Schriftfarbe,
 * damit sie in jedem Theme und in beiden Farbschemata passt; der Rueckfall
 * gilt fuer Browser ohne color-mix().
 */
.wpng_unterBeitrag {
	margin-top: 2.5em;
	padding-top: 1.5em;
	border-top: 1px solid #ddd;
	border-top: 1px solid color-mix( in srgb, currentColor 20%, transparent );
}