/*
 * Eigenes Registrierungsformular (Reg_Formular, Baustein R2).
 * Maße nach dem Leitsatz der Kasse (Zielgruppe 50+): Grundschrift 20 px,
 * kleine Texte 17 px, Felder 52 px hoch, Knopf über die volle Breite.
 * Farben aus docs/design/ (Fundament + CSS-Startpaket).
 */
.gs-reg-formular {
	--gs-cta: #d81e5b;
	--gs-cta-dunkel: #b3164b;
	--gs-text: #000;
	--gs-text-2: #595959;
	--gs-rahmen: #8a8a8a;
	--gs-fehler: #c0392b;
	font-size: 20px;
	line-height: 1.5;
}
/* Registrierung: Rechtstexte (Datenschutz, Newsletter-Einwilligung) über die
   volle Breite, Felder und Knopf bleiben bei 520 px (Projektinhaber
   18.09.2026). Anmeldung und Rückmeldeseiten bleiben insgesamt 520 px. */
.gs-reg-formular input[type="text"],
.gs-reg-formular input[type="email"],
.gs-reg-formular input[type="password"],
.gs-reg-formular .gs-reg-knopf { max-width: 520px; }
.gs-reg-anmeldung, .gs-reg-formular--fertig, .gs-reg-formular--status, .gs-reg-formular--angemeldet { max-width: 520px; }
.gs-reg-zeile { margin: 0 0 20px; }
.gs-reg-formular label { display: block; font-weight: 600; margin-bottom: 6px; }
.gs-reg-formular input[type="text"],
.gs-reg-formular input[type="email"],
.gs-reg-formular input[type="password"] {
	width: 100%;
	min-height: 52px;
	padding: 0 14px;
	font-size: 20px;
	border: 1px solid var(--gs-rahmen);
	border-radius: 10px;
	background: #fff;
	box-sizing: border-box;
}
.gs-reg-formular input[aria-invalid="true"] { border-color: var(--gs-fehler); border-width: 2px; }
.gs-reg-pflicht { font-weight: 400; font-size: 17px; color: var(--gs-text-2); }
.gs-reg-klein { font-size: 17px; color: var(--gs-text-2); margin: 6px 0 0; display: block; }
.gs-reg-fehler { font-size: 17px; color: var(--gs-fehler); margin: 6px 0 0; font-weight: 600; }
.gs-reg-hinweis { font-size: 17px; margin: 6px 0 0; }
.gs-reg-haken label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; font-size: 17px; }
.gs-reg-haken input[type="checkbox"] { width: 24px; height: 24px; margin: 3px 0 0; flex: 0 0 24px; }
/* Text als EIN Block neben dem Häkchen -- sonst macht Flex aus Text, Link und
   Resttext drei Spalten (18.09.2026 gesehen). */
.gs-reg-haken label > span { flex: 1 1 auto; min-width: 0; }
.gs-reg-knopf {
	display: block;
	width: 100%;
	min-height: 56px;
	border: 0;
	border-radius: 10px;
	background: var(--gs-cta);
	color: #fff;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
}
.gs-reg-knopf:hover, .gs-reg-knopf:focus { background: var(--gs-cta-dunkel); }
/* Als Link (Jetzt anmelden) gleich aussehen lassen. */
a.gs-reg-knopf--link { display: flex; align-items: center; justify-content: center; text-decoration: none; color: #fff; }
a.gs-reg-knopf--link:hover, a.gs-reg-knopf--link:focus { color: #fff; }
/* Zweitrangig: „Link noch einmal schicken" -- umrandet statt gefüllt. */
.gs-reg-knopf--zweit { background: #fff; color: var(--gs-cta); border: 2px solid var(--gs-cta); }
.gs-reg-knopf--zweit:hover, .gs-reg-knopf--zweit:focus { background: #fff; color: var(--gs-cta-dunkel); border-color: var(--gs-cta-dunkel); }
.gs-reg-absenden { margin: 24px 0 0; }
.gs-reg-formular--fertig h2, .gs-reg-formular--status h2 { font-size: 24px; margin: 0 0 12px; }
/* Köder: für Menschen unsichtbar, aber nicht display:none (das erkennen Bots). */
.gs-reg-koeder { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.cf-turnstile { margin: 0 0 20px; }
/* Anmeldung (Reg_Anmeldung, R4). */
.gs-reg-fehler--oben { margin: 0 0 20px; padding: 12px 14px; border: 2px solid var(--gs-fehler); border-radius: 10px; background: #fdf1ef; }
.gs-reg-fehler--oben a { color: var(--gs-fehler); text-decoration: underline; }
.gs-anm-passwort { position: relative; display: block; }
.gs-anm-passwort input[type="password"], .gs-anm-passwort input[type="text"] { padding-right: 56px; }
.gs-anm-auge { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border: 0; background: transparent; color: var(--gs-text-2); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.gs-anm-auge[hidden] { display: none; }
.gs-anm-auge[aria-pressed="true"] { color: var(--gs-cta); }
.gs-anm-links { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 20px 0 0; font-size: 17px; }
.gs-anm-links a { color: var(--gs-cta); }