.rzp-container{
	max-width:720px;
	margin:24px auto;
	font-family:Arial,sans-serif;
}

.rzp-form{
	background:#fff;
	border:1px solid #e5e7eb;
	border-radius:10px;
	padding:28px;
	box-shadow:0 1px 2px rgba(16,24,40,.04);
}

.rzp-title{
	margin:0 0 20px 0;
	font-size:32px;
	line-height:1.2;
	font-weight:700;
	color:#111827;
}

.rzp-form-group{
	margin-bottom:20px;
	position:relative;
}

.rzp-label{
	display:block;
	margin-bottom:8px;
	font-size:15px;
	font-weight:700;
	color:#111827;
}

.rzp-i,
.rzp-s,
.rzp-t-a{
	width:100%;
	border:1px solid #d1d5db;
	border-radius:6px;
	background:#fff;
	color:#111827;
	font-size:16px;
	line-height:1.4;
	padding:12px 14px;
	box-sizing:border-box;
}

.rzp-t-a{
	min-height:120px;
	resize:vertical;
}

.rzp-i:focus,
.rzp-s:focus,
.rzp-t-a:focus{
	outline:none;
	border-color:#2563eb;
	box-shadow:0 0 0 2px rgba(37,99,235,.15);
}

.rzp-invalid{
	border-color:#dc2626!important;
	box-shadow:0 0 0 2px rgba(220,38,38,.10)!important;
}

.rzp-notice-box{
	margin:0 0 18px 0;
	padding:12px 14px;
	background:#eff6ff;
	border:1px solid #bfdbfe;
	border-radius:6px;
	color:#1e3a8a;
	font-size:14px;
	font-weight:600;
	line-height:1.45;
}

.rzp-notice-error{
	background:#fef2f2;
	border-color:#fecaca;
	color:#991b1b;
}

.rzp-field-error{
	margin-top:6px;
	font-size:13px;
	line-height:1.4;
	color:#dc2626;
	font-weight:600;
	min-height:18px;
}

.rzp-btn{
	width:100%;
	min-height:50px;
	border:none;
	border-radius:6px;
	background:#2563eb;
	color:#fff;
	font-size:16px;
	font-weight:700;
	cursor:pointer;
	padding:12px 18px;
	box-sizing:border-box;
}

.rzp-btn:hover{
	background:#1d4ed8;
}

.rzp-btn:disabled{
	opacity:.85;
	cursor:not-allowed;
}

.rzp-spinner{
	width:18px;
	height:18px;
	border:3px solid rgba(255,255,255,.35);
	border-top-color:#fff;
	border-radius:50%;
	animation:rzp-spin .8s linear infinite;
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}

@keyframes rzp-spin{
	to{
		transform:rotate(360deg);
	}
}

.rzp-success-page{
	max-width:720px;
	margin:24px auto;
	font-family:Arial,sans-serif;
}

.rzp-success-box{
	background:#eff6ff;
	border:1px solid #bfdbfe;
	border-radius:12px;
	padding:24px;
}

.rzp-success-title{
	margin:0 0 18px 0;
	font-size:28px;
	line-height:1.15;
	font-weight:700;
	color:#1d4ed8;
}

.rzp-success-content p{
	margin:0 0 10px 0;
	font-size:16px;
	line-height:1.5;
	color:#111827;
}

/* Datum-Feld: native type=date als Basis -> funktioniert auch OHNE JavaScript
   (mobil + Desktop). Flatpickr wertet es auf; erst dann (.rzp-fp-active) zeigen
   wir unser eigenes, browseruebergreifend identisches Icon. */
.rzp-date-wrap{
	position:relative;
	width:100%;
}

.rzp-date-wrap .rzp-i-date{
	display:block;
	width:100% !important;
	max-width:100% !important;
	min-width:0 !important;
	box-sizing:border-box !important;
	padding:12px 14px !important;
	background-color:#fff;
	line-height:1.4;
	cursor:pointer;
	color-scheme:light;
	-webkit-appearance:auto !important;
	-moz-appearance:auto !important;
	appearance:auto !important;
}

/* Nur wenn Flatpickr aktiv ist (sichtbares Textfeld): eigenes Kalender-Icon */
.rzp-date-wrap.rzp-fp-active .rzp-i-date{
	padding:12px 44px 12px 14px !important;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M16 3v4M8 3v4M3 9h18'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 12px center;
	background-size:18px 18px;
	-webkit-appearance:none !important;
	-moz-appearance:none !important;
	appearance:none !important;
}

.rzp-date-wrap .rzp-i-date::placeholder{
	color:#9aa3af;
	opacity:1;
}

/* Mobile */
@media (max-width:768px){
	.rzp-date-wrap .rzp-i-date{
		height:50px !important;
		min-height:50px !important;
		line-height:1.2 !important;
	}
	.rzp-date-wrap.rzp-fp-active .rzp-i-date{
		padding:12px 44px 12px 14px !important;
	}
}

@media (max-width:640px){
	.rzp-form{
		padding:20px;
	}

	.rzp-title{
		font-size:26px;
	}

	.rzp-success-box{
		padding:18px;
	}

	.rzp-success-title{
		font-size:24px;
	}
}
/* Uhrzeit-Feld: Lade-Sanduhr neben dem Feld (ohne Layout-Sprung) */
.rzp-time-wrap{
	display:flex;
	align-items:center;
	gap:8px;
}
.rzp-time-wrap .rzp-s-time{
	flex:1 1 auto;
	min-width:0;
}
.rzp-time-loading{
	flex:0 0 auto;
	width:22px;
	height:22px;
	display:flex;
	align-items:center;
	justify-content:center;
	color:#2563eb;
	visibility:hidden;
	pointer-events:none;
}
.rzp-time-loading svg{
	display:block;
	width:18px;
	height:18px;
}
.rzp-time-wrap.rzp-loading .rzp-time-loading{
	visibility:visible;
	animation:rzp-hourglass 1.2s ease-in-out infinite;
}
@keyframes rzp-hourglass{
	0%{ transform:rotate(0deg); }
	60%{ transform:rotate(180deg); }
	100%{ transform:rotate(180deg); }
}
@media (prefers-reduced-motion: reduce){
	.rzp-time-wrap.rzp-loading .rzp-time-loading{ animation:none; }
}

/* Leere Pflichtfelder NICHT vorab rot anzeigen. Die rote Markierung erscheint
   ausschliesslich nach echter Validierung (Klasse .rzp-invalid), nicht schon,
   weil ein Feld leer und "required" ist (sonst wirkt das Datumsfeld direkt rot). */
.rzp-form .rzp-i:invalid:not(.rzp-invalid),
.rzp-form .rzp-s:invalid:not(.rzp-invalid),
.rzp-form .rzp-t-a:invalid:not(.rzp-invalid){
	border-color:#d1d5db !important;
	box-shadow:none !important;
}
.rzp-form .rzp-i:invalid:not(.rzp-invalid):focus,
.rzp-form .rzp-s:invalid:not(.rzp-invalid):focus,
.rzp-form .rzp-t-a:invalid:not(.rzp-invalid):focus{
	border-color:#2563eb !important;
	box-shadow:0 0 0 2px rgba(37,99,235,.15) !important;
}
.rzp-form :-moz-ui-invalid{
	box-shadow:none !important;
}