/*
 * Checkboxen: das echte input wird die sichtbare Box.
 *
 * Bisher lag das input mit opacity:0 unsichtbar unter einem Pseudo-Element des Labels
 * (Dev/Pages/src/sass/base/_forms.scss:101-164). Der Tastaturfokus landete damit auf
 * einem unsichtbaren Element, und der Fokusstil am Geschwisterelement war ein blasser
 * Schatten mit 25 Prozent Deckkraft auf hellem Grund, also praktisch nicht erkennbar.
 * Pruefschritt 9.2.4.3 hat das auf der Startseite als Halt auf einem unsichtbaren
 * Element gemeldet.
 *
 * Diese Datei liegt in css_interim und wird nach main.css geladen, weil main.css ein
 * gebautes Artefakt ist und die Webpack-Kette derzeit nicht laeuft (node-sass 4.12).
 * Sobald der Build wieder geht, gehoeren diese Regeln zurueck nach _forms.scss.
 *
 * Geometrie unveraendert: .form-check ist position:relative mit padding-left 20px,
 * left:0 trifft damit exakt die Stelle, an der bisher label::after mit left:-1.25rem sass.
 * Radiobuttons nutzen dasselbe Muster, bleiben hier aber bewusst unberuehrt.
 */

.form-check > input[type="checkbox"].form-check-input {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 1;
	z-index: auto;
	border: 2px solid #2c2e30;
	border-radius: 0;
	background-color: transparent;
	cursor: pointer;
}

/* Die alte sichtbare Box entfaellt, sonst stuenden zwei Kaestchen uebereinander. */
.form-check > input[type="checkbox"].form-check-input + .form-check-label::after {
	content: none;
}

/* Fokusring wie bei Links: 2px gestrichelt mit Abstand, nicht nur ein Farbwechsel. */
.form-check > input[type="checkbox"].form-check-input:focus,
.form-check > input[type="checkbox"].form-check-input:focus-visible {
	outline: 2px dashed #5e2669;
	outline-offset: 5px;
	box-shadow: none;
}

/* Fehlerzustand hing bisher am Pseudo-Element des Labels. */
.form-check > input[type="checkbox"].form-check-input.is-invalid {
	border-color: #c20030;
}

/* Dunkle Variante des Newsletter-Kastens: weisser Rahmen auf #5e2669. */
.newsletter-form--big .form-check > input[type="checkbox"].form-check-input {
	border-color: #fff;
}

.newsletter-form--big .form-check > input[type="checkbox"].form-check-input:focus,
.newsletter-form--big .form-check > input[type="checkbox"].form-check-input:focus-visible {
	outline-color: #fff;
}