/* changes: 2026-10-05 16:30 [Gate] 1.11.0: Styles für den Inline-PIN-Schritt des E-Mail-Gates */
/* changes: 2026-10-13 09:30 [Gate] 1.11.6: Box zentriert mit mehr Innenabstand, Button bleibt im Rahmen (Elementor-Stretch neutralisiert), PIN-Zeile zentriert */
/* changes: 2026-10-05 20:00 [Gate] 1.11.2: Neugestaltung — Feld/Button erben das Elementor-Formular-Design, Sekundäraktionen als Textlinks, Tabellenziffern im Countdown, klare Abstände, Mobile-Stack */

.rrsl-gate-hidden { display: none !important; }

/* Container: ruhige Karte, Typografie vom Formular */
.rrsl-gate {
	--rrsl-gap: 14px;
	--rrsl-radius: 12px;
	--rrsl-line: rgba(0, 0, 0, .12);
	--rrsl-muted: rgba(0, 0, 0, .62);
	--rrsl-error: #b3261e;
	--rrsl-ok: #1a7f37;
	width: 100%;
	box-sizing: border-box;
	margin: 6px 0 var(--rrsl-gap);
	padding: 22px 24px;
	border: 1px solid var(--rrsl-line);
	border-radius: var(--rrsl-radius);
	background: rgba(0, 0, 0, .025);
	font-size: 15px;
	line-height: 1.55;
	color: inherit;
	text-align: center;
	overflow: hidden;
}

/* changes: 2026-10-13 11:30 [Gate] 1.11.7: Elementor-Feldgruppen-Regel (.elementor-form .elementor-field-group: display:flex + Spalten-Padding) hat hoehere Spezifitaet als .rrsl-gate -> Inhalt klebte links, Innenabstand griff nicht. Gezielt ueberschreiben. */
.elementor-form .rrsl-gate.elementor-field-group,
.elementor-form .rrsl-gate.elementor-field-group.elementor-column {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 28px 32px; /* changes: 2026-10-13 12:00 [Gate] 1.11.8: mehr Innenabstand, Inhalt auf 88 % der Boxbreite begrenzt */
	margin-bottom: var(--rrsl-gap);
	text-align: center;
}
.elementor-form .rrsl-gate.elementor-field-group > * { width: 100%; box-sizing: border-box; }
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__text,
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__row,
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__actions,
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__error { width: 88%; margin-left: auto; margin-right: auto; }
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__row { margin-top: 2px; }
.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__actions { margin-top: 18px; }
.elementor-form .rrsl-gate.elementor-field-group input.rrsl-gate__pin { max-width: 100%; }
.elementor-form .rrsl-gate.rrsl-gate--verified.elementor-field-group { padding: 16px 20px; }
@media (max-width: 560px) {
	.elementor-form .rrsl-gate.elementor-field-group { padding: 22px 20px; }
	.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__text,
	.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__row,
	.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__actions,
	.elementor-form .rrsl-gate.elementor-field-group .rrsl-gate__error { width: 100%; }
}

.rrsl-gate .rrsl-gate__text {
	margin: 0 0 var(--rrsl-gap);
	font-size: inherit;
	line-height: inherit;
	overflow-wrap: anywhere;
}
.rrsl-gate .rrsl-gate__text strong { font-weight: 700; }

/* Eingabezeile: PIN-Feld + Primär-Button auf einer Höhe */
.rrsl-gate .rrsl-gate__row {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* PIN-Feld: erbt Rahmen/Hintergrund vom Elementor-Feld, dazu Ziffern-Optik */
.rrsl-gate input.rrsl-gate__pin {
	flex: 0 0 auto;
	width: 11em;
	max-width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
	letter-spacing: .32em;
	text-indent: .32em; /* gleicht das Letter-Spacing optisch aus */
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	min-height: 48px;
}
.rrsl-gate input.rrsl-gate__pin::placeholder { letter-spacing: .32em; opacity: .35; font-weight: 400; }

/* Primär-Button: Elementor-Button-Klassen liefern Farbe/Form des Formulars; hier nur Maße/Verhalten.
   Elementor „Stretch"-Ausrichtung (flex-basis/width 100 %) wird neutralisiert, damit der Button im Rahmen bleibt. */
.rrsl-gate button.rrsl-gate__btn,
.elementor-button-align-stretch .rrsl-gate button.rrsl-gate__btn.elementor-button {
	flex: 0 1 auto;
	width: auto;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 48px;
	padding-top: 0;
	padding-bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: normal;
	text-align: center;
	cursor: pointer;
	transition: opacity .15s ease;
}
.rrsl-gate button.rrsl-gate__btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Sekundäraktionen: Textlinks, bewusst KEINE Buttons (Theme stylt <button> als Pille) */
.rrsl-gate .rrsl-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px 12px;
	margin-top: var(--rrsl-gap);
	font-size: 14px;
	color: var(--rrsl-muted);
}
.rrsl-gate a.rrsl-gate__link,
.rrsl-gate a.rrsl-gate__link:visited {
	display: inline-block;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	background: none;
	border: 0;
	padding: 2px 0;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
	transition: color .15s ease, opacity .15s ease;
}
.rrsl-gate a.rrsl-gate__link:hover,
.rrsl-gate a.rrsl-gate__link:focus-visible { color: inherit; opacity: .75; text-decoration-thickness: 2px; }
.rrsl-gate a.rrsl-gate__link.is-disabled {
	opacity: .5;
	cursor: default;
	text-decoration: none;
	pointer-events: none;
}
/* Countdown: Tabellenziffern + Mindestbreite -> der Nachbarlink springt nicht */
.rrsl-gate a.rrsl-gate__link--resend {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
	min-width: 11.5em;
}
.rrsl-gate .rrsl-gate__sep { opacity: .45; user-select: none; }

/* Meldungen */
.rrsl-gate .rrsl-gate__error {
	color: var(--rrsl-error);
	font-size: 14px;
	line-height: 1.45;
	margin-top: 8px;
}
.rrsl-gate .rrsl-gate__error:empty { display: none; }

/* Zustand „bestätigt" */
.rrsl-gate.rrsl-gate--verified {
	border-color: rgba(26, 127, 55, .35);
	background: rgba(26, 127, 55, .07);
	padding: 14px 18px;
}
.rrsl-gate .rrsl-gate__ok { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; }
.rrsl-gate .rrsl-gate__ok::before {
	content: "";
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--rrsl-ok);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 70% no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/></svg>") center / 70% no-repeat;
}

/* Admin-Hinweis (fehlende Datenschutz-Checkbox) */
.rrsl-gate__admin {
	border: 2px dashed #b3261e;
	color: #b3261e;
	padding: 10px 12px;
	margin-bottom: 14px;
	font-size: 14px;
	border-radius: 8px;
}

/* Mobile: Feld und Button untereinander, volle Breite */
@media (max-width: 560px) {
	.rrsl-gate { padding: 16px 16px; }
	.rrsl-gate .rrsl-gate__row { flex-direction: column; align-items: stretch; }
	.rrsl-gate input.rrsl-gate__pin { width: 100%; }
	.rrsl-gate button.rrsl-gate__btn { width: 100%; }
	.rrsl-gate .rrsl-gate__actions { flex-direction: column; align-items: center; gap: 8px; }
	.rrsl-gate .rrsl-gate__sep { display: none; }
	.rrsl-gate a.rrsl-gate__link--resend { min-width: 0; }
}