/* schulbuchausleihe.css – Formularseite /schulbuchausleihe.
   Gestaltung wie die NaMi-Seite (nami.css), ergänzt um Optionsfelder mit langen
   Texten, Auswahllisten, Textfeld und Hinweisblöcke. */

.sba-info,
.sba-form {
	--sba-accent: var(--color-ueber-uns);
	--sba-ink: #1f2430;
	--sba-muted: #5f6775;
	--sba-border: #d8dbe2;
	--sba-bg: #ffffff;
	--sba-card: #f7f7fa;
	--sba-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 2px 4px rgba(0, 0, 0, 0.07);
	--sba-success: var(--color-oberschule);
	--sba-success-bg: rgba(var(--color-oberschule-rgb), 0.18);
	--sba-error: var(--color-warning);
	--sba-error-bg: rgba(var(--color-warning-rgb), 0.18);
}

.sba-info {
	margin-bottom: 2rem;
}

.sba-info h2 {
	color: var(--sba-accent);
}

.sba-info h3 {
	color: var(--sba-ink);
	font-size: 1.35rem;
	font-weight: 500;
}

.sba-info p.achtung {
	color: var(--sba-ink);
	font-weight: 700;
	text-align: center;
	font-size: 1.2rem;
}

.sba-info p.achtung2 {
	color: var(--sba-ink);
	font-weight: 500;
	text-decoration: underline;
	text-align: center;
	font-size: 1.15rem;
}

.sba-info p.preview {
	color: red;
	font-weight: 700;
	text-align: center;
	font-size: 1.2rem;
}

.sba-info.is-success .sba-status,
.sba-info.is-error .sba-status {
	border: 1px solid var(--sba-border);
	border-radius: 1rem;
	box-shadow: var(--sba-shadow);
	padding: 1.25rem 1.5rem;
	background: var(--sba-bg);
}

.sba-info.is-success .sba-status {
	border-color: rgba(29, 122, 79, 0.35);
	background: var(--sba-success-bg);
}

.sba-info.is-error .sba-status {
	border-color: rgba(180, 35, 24, 0.35);
	background: var(--sba-error-bg);
}

.sba-info.is-success .sba-status h3 {
	color: var(--sba-success);
}

.sba-info.is-error .sba-status h3 {
	color: var(--sba-error);
}

.sba-info.is-success .sba-status p,
.sba-info.is-error .sba-status p {
	color: var(--sba-ink);
}

.sba-info a {
	color: var(--sba-accent);
	text-decoration: none;
}

.sba-info a:hover,
.sba-info a:focus {
	text-decoration: underline;
}

/* Ein-/Ausblenden über das hidden-Attribut (schulbuchausleihe.js). Ohne !important
   könnten Anzeige-Regeln weiter unten es überstimmen. */
.sba-form [hidden] {
	display: none !important;
}

.sba-form fieldset {
	border: 0;
	margin-bottom: 1.25rem;
	padding: 1rem 0;
}

.sba-form legend {
	background-color: var(--sba-card);
	border: 1px solid var(--sba-border);
	border-radius: 0.75rem;
	color: var(--sba-ink);
	display: block;
	font-size: 1.05rem;
	font-weight: 600;
	margin-bottom: 0.9rem;
	padding: 0.6rem 0.9rem;
	width: 100%;
}

.sba-form label {
	color: var(--sba-ink);
	display: inline-block;
	max-width: 100%;
}

/* Beschriftungen für Screenreader; sichtbar sind die Platzhalter */
.sba-form .sba-sr {
	position: absolute;
	left: -9999px;
}

.sba-form input[type="text"],
.sba-form input[type="tel"],
.sba-form input[type="email"],
.sba-form select,
.sba-form textarea {
	appearance: none;
	background: var(--sba-bg);
	border: 1px solid var(--sba-border);
	border-radius: 0.75rem;
	box-shadow: 0 1px 0 rgba(23, 27, 36, 0.04);
	color: var(--sba-ink);
	display: block;
	font: inherit;
	font-size: 1rem;
	margin-bottom: 1rem;
	padding: 0.65rem 0.85rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

.sba-form select {
	cursor: pointer;
}

.sba-form textarea {
	resize: vertical;
}

.sba-form input[type="text"]:focus,
.sba-form input[type="tel"]:focus,
.sba-form input[type="email"]:focus,
.sba-form select:focus,
.sba-form textarea:focus {
	border-color: var(--sba-accent);
	box-shadow: 0 0 0 3px rgba(var(--color-ueber-uns-rgb), 0.2);
	outline: none;
}

.sba-form input[type="text"]:valid,
.sba-form input[type="tel"]:valid,
.sba-form input[type="email"]:valid {
	border-color: #2e9f59;
}

.sba-form input[type="text"]:invalid,
.sba-form input[type="tel"]:invalid,
.sba-form input[type="email"]:invalid {
	border-color: #cf3b3b;
}

.sba-form .button {
	background-color: var(--sba-accent);
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	font-size: 1.05rem;
	font-weight: 600;
	gap: 0.35rem;
	justify-content: center;
	margin-bottom: 0.75rem;
	padding: 0.75rem 1.6rem;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.3s;
	box-shadow: 0 6px 16px rgba(var(--color-ueber-uns-rgb), 0.28);
}

.sba-form .radio,
.sba-form .checkbox {
	display: block;
	margin-bottom: 0.7rem;
	margin-top: 0.7rem;
}

/* Lange Texte neben Optionsfeld und Häkchen: oben ausrichten statt mittig */
.sba-form .radio label,
.sba-form .checkbox label {
	align-items: flex-start;
	display: inline-flex;
	gap: 0.6rem;
	min-height: 21px;
	font-weight: 500;
}

.sba-form input[type="checkbox"],
.sba-form input[type="radio"] {
	accent-color: var(--sba-accent);
	flex: none;
	height: 1.1rem;
	margin-top: 0.2rem;
	width: 1.1rem;
}

.sba-form .sba-vorschau {
	margin-top: -0.4rem;
}

.sba-form .sba-hinweis {
	background: var(--sba-card);
	border: 1px solid var(--sba-border);
	border-radius: 0.75rem;
	margin: 0.5rem 0 1rem;
	padding: 0.9rem 1rem;
}

.sba-form .sba-hinweis label {
	font-weight: 600;
	margin-bottom: 0.4rem;
}

.sba-form ul {
	margin: 0.5rem 0 0 1.25rem;
}

.sba-form li {
	margin-bottom: 0.4rem;
}

@media (prefers-color-scheme: dark) {
	.sba-info,
	.sba-form {
		--sba-accent: var(--color-ueber-uns-dark);
		--sba-ink: #f2f4f8;
		--sba-muted: #c6cbd6;
		--sba-border: #3a3f4b;
		--sba-bg: #2a2f38;
		--sba-card: #343a46;
		--sba-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
		--sba-success: var(--color-oberschule-dark);
		--sba-success-bg: rgba(var(--color-oberschule-rgb), 0.25);
		--sba-error: var(--color-warning-dark);
		--sba-error-bg: rgba(var(--color-warning-rgb), 0.25);
	}

	.sba-form input[type="text"],
	.sba-form input[type="tel"],
	.sba-form input[type="email"],
	.sba-form select,
	.sba-form textarea {
		background: #1f242c;
		color: var(--sba-ink);
	}

	.sba-form .button {
		color: #1f1f1f;
	}
}

/* Honeypot-Feld: für Menschen unsichtbar, auch für Screenreader (aria-hidden);
   Bots füllen es aus. */
.sba-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}