/* RR348 Anmeldeformular */
.rr348-form { max-width: 760px; margin: 0; font-size: 16px; }
.rr348-form .rr348-hp { position: absolute !important; left: -9999px !important; }
.rr348-form .rr348-fs { border: 1px solid #d8d8d8; border-radius: 10px; padding: 18px 20px 14px; margin: 0 0 22px; background: #fff; }
.rr348-form legend { font-weight: 700; padding: 0 8px; color: #16305c; }
.rr348-form .rr348-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.rr348-form .rr348-grid label { display: flex; flex-direction: column; font-weight: 600; gap: 4px; margin: 0; }
.rr348-form .rr348-grid .rr348-wide { grid-column: 1 / -1; }
.rr348-form input[type=text], .rr348-form input[type=email], .rr348-form input[type=tel], .rr348-form input[type=date] { border: 1px solid #c4c4c4; border-radius: 6px; padding: 9px 10px; font: inherit; width: 100%; box-sizing: border-box; }
.rr348-form input:focus { outline: 2px solid #16305c; outline-offset: 1px; }
.rr348-form input.rr348-ok { border-color: #2e7d32; }
.rr348-form input.rr348-bad { border-color: #c62828; }
.rr348-form .rr348-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; margin: 10px 0; }
.rr348-form .rr348-check input { margin-top: 4px; flex: 0 0 auto; }
.rr348-form .rr348-rollen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rr348-form .rr348-rolle { display: flex; gap: 10px; align-items: flex-start; border: 1px solid #c4c4c4; border-radius: 8px; padding: 12px; cursor: pointer; margin: 0; }
.rr348-form .rr348-rolle:has(input:checked) { border-color: #16305c; background: #f2f5fb; }
.rr348-form .rr348-rolle small { display: block; font-weight: 400; color: #555; }
.rr348-form .rr348-stufe { margin: 12px 0 0; padding: 8px 12px; background: #fff7e0; border-left: 4px solid #e0a800; border-radius: 4px; }
.rr348-form .rr348-schwimmer { display: flex; gap: 24px; margin: 8px 0 0; }
.rr348-sig-wrap { position: relative; }
.rr348-sig-wrap canvas { width: 100%; max-width: 560px; height: 200px; border: 1px dashed #888; border-radius: 8px; background: #fcfcfc; touch-action: none; display: block; }
.rr348-sig-label { font-weight: 600; margin: 18px 0 6px; }
.rr348-sig-clear { position: absolute; top: 8px; right: 8px; border: 1px solid #c4c4c4; background: #fff; border-radius: 6px; padding: 4px 10px; cursor: pointer; font-size: 14px; }
.rr348-form .rr348-button { background: #b01116; color: #fff; border: 0; border-radius: 8px; padding: 14px 28px; font-size: 18px; font-weight: 700; cursor: pointer; }
.rr348-form .rr348-button:hover { background: #8d0d11; }
.rr348-form .rr348-hint { color: #555; font-size: 14px; }
.rr348-form small { color: #555; font-weight: 400; }
.rr348-errors { border: 1px solid #c62828; background: #fdecea; border-radius: 8px; padding: 14px 18px; margin: 0 0 20px; max-width: 760px; margin-left: auto; margin-right: auto; }
.rr348-errors ul { margin: 8px 0 0 18px; }
.rr348-success { border: 1px solid #2e7d32; background: #eaf6ea; border-radius: 10px; padding: 20px 24px; }
@media (max-width: 640px) {
	.rr348-form .rr348-grid, .rr348-form .rr348-rollen { grid-template-columns: 1fr; }
}

/* v1.1.0: Gesundheit, Foto-Einwilligung, Abholung, zweites Unterschriftsfeld */
.rr348-grid textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	border: 1px solid #c9c2b4;
	border-radius: 6px;
	font: inherit;
	background: #fff;
	resize: vertical;
}
.rr348-grid textarea:focus {
	outline: none;
	border-color: #14532d;
	box-shadow: 0 0 0 3px rgba(20, 83, 45, 0.12);
}
.rr348-radiofeld .rr348-radios {
	display: flex;
	gap: 1.25em;
	padding-top: 0.55em;
}
.rr348-radiofeld .rr348-check {
	font-weight: 400;
	margin: 0;
}
.rr348-abholung {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em 1.5em;
	margin: 0 0 0.6em;
}
#rr348-abholer-feld {
	display: block;
	margin-bottom: 1em;
}
#rr348-abholer-feld input {
	width: 100%;
	margin-top: 0.3em;
}
#rr348-abholer-feld.rr348-aus {
	opacity: 0.5;
}
.rr348-fotozeile {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em 1.25em;
	margin: 0.8em 0 0;
}
.rr348-fotozeile > span {
	flex: 1 1 100%;
	font-weight: 600;
}
.rr348-fotozeile .rr348-check {
	margin: 0;
}

/* v1.3.0: Pflichtfeld-Markierung */
.rr348-form input.rr348-invalid,
.rr348-form textarea.rr348-invalid,
.rr348-form select.rr348-invalid,
.rr348-sig-wrap.rr348-invalid canvas {
	border: 2px solid #b91c1c;
	background: #fef5f5;
}
.rr348-form p.rr348-invalid,
.rr348-form span.rr348-invalid,
.rr348-form label.rr348-check.rr348-invalid {
	outline: 2px solid #b91c1c;
	outline-offset: 4px;
	border-radius: 6px;
	background: #fef5f5;
}

/* v1.4.0 */
.rr348-form .rr348-formtitel {
	margin: 0 0 18px;
	font-family: inherit;
	font-size: 1.8em;
	font-weight: 500;
	color: #333;
}
.rr348-form .rr348-check span a {
	color: #b01116;
	font-weight: 600;
}
.rr348-form .rr348-grid label small {
	display: block;
	margin-top: 4px;
	line-height: 1.35;
}

/* v1.6.0: Demo-Modus-Hinweis */
.rr348-demo-hinweis {
	margin: 0 0 20px;
	padding: 12px 16px;
	border: 1px solid #f0c36d;
	border-left: 5px solid #e0a800;
	border-radius: 8px;
	background: #fff8e6;
	color: #6b5200;
	font-size: 0.95em;
	line-height: 1.5;
}
.rr348-demo-hinweis code {
	background: #fce8be;
	padding: 1px 5px;
	border-radius: 4px;
}

/* v1.7.0: Submit-Sperre + freudigere Bestätigung */
.rr348-button-busy {
	opacity: 0.7;
	cursor: progress;
}
.rr348-form.rr348-success {
	margin: 0 auto;
	text-align: center;
}
.rr348-success h3 {
	color: #14532d;
	font-size: 1.6em;
	margin: 0 0 12px;
}
.rr348-success-klein {
	color: #555;
	font-size: 0.95em;
	margin-top: 14px;
}

/* v1.8.0: Bestätigung bei fehlgeschlagenem Mailversand */
.rr348-success-warn {
	background: #fdf6e7;
	border-color: #d9a441;
}
.rr348-success-warn h3 {
	color: #8a5a00;
}