/* =========================================================================
   registration.css – Layout der Meldeformulare (ArcheryCup & Championship).
   Geladen NACH base.css für: regArcheryCup, regChampionship, thx*, Mitcom.
   Varianten-Deltas: archeryCup.css / championship.css.
   ========================================================================= */

[eingabe] {
	color :var(--color-error);
}

[prüf] {
	color:var(--color-success);
}
button[name="Angaben_bearbeiten"] {
	width: 10.5em;
}
[class^="textklasse"] {
	width: 8.5rem;
	font-size: 0.85rem;
	font-style: normal;
	text-align: left;
	margin: 0.65rem 0 0 0;
	padding: 1.5px 1.5px 1.5px 3px;
}

#archerlist section div:nth-last-of-type(3) p {
	width: 2.35rem;
}

#general-info {
    display: grid;
	grid-template-columns: repeat(3, 1fr);
}

#general-info input,
#general-info select {
    width: 18.5rem;
    box-sizing: border-box;
}

#archerlist input[type="date"] {
    width: 6rem;
}

#archerlist input[name^="dsanr"] {
    width: 6.5rem;
}

#archerlist select {
    width: 9rem;
    box-sizing: border-box;
}

#archerlist select[name^="bowtype"],
#archerlist select[name^="gender"] {
    width: 6.25rem;
}

#general-info input[type="radio"],
#general-info input[type="checkbox"] {
    width: 1.25rem;
	height: 1.25rem;
}

#general-info > div:last-child {
	display: flex;
    flex-direction: column;
	grid-column: 3; /* Liste in der vierten Spalte */
    grid-row: 1 / span 3; /* Option, um das Layout anzupassen, falls nötig */
	align-items: flex-start;
	justify-content: flex-end;
}

#general-info > div:last-child label {
	width: 16rem;
	padding: 0;
	line-height: 2.5rem;
}

#general-info > div:last-child label:nth-last-of-type(-n+3) {
	grid-row: 2 / 2;
}

.spalte {
	display: flex;
    align-items: center;
	grid-column: 1 / 2;
	border-left: thin dotted var(--color-line-blue);
	padding: 10px 0px 15px 30px;
	margin: 0px 10px 0px 30px;
}

.spalte-rechts {
    grid-column: 2 / 3;
}

/* Zusätzliche CSS-Regel für die vertikale Anordnung der Radio-Buttons */
.spalte-dsgvo > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Abstand zwischen den Radio-Buttons */
	margin: 0 2rem 0 0.9rem;
}

.spalte-dsgvo label {
	padding: 0;
	width: 5.5rem;
}

.spalte-dsgvo p {
	text-align: left;
	width: 12rem;
	padding: 0;
	margin: 0;
}

#archerlist, #checklist {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(950px, 100%), 1fr));
	gap: 10px;
	padding-top: 20px;
}

#archerlist {
	row-gap: 20px;
}

section {
	display: flex;
	flex-direction: row; /* row oder column, abhängig vom gewünschten Layout */
	gap: 26px;
}

#checklist, #checklist section {
	gap: unset;
	justify-content: center;
}

.daten {
	display: flex;
	flex-direction: column; /* Hier wird die Richtung auf vertikal gesetzt */
	align-items: flex-start; /* Ausrichtung der Items am Anfang des Containers */
	gap: 5px;
	font-style: italic;
	font-size: 0.9rem;
	font-weight: normal;
	padding-left: 21px;
	width: min-content;
	min-width: 64px;
}

.daten input:not([type]), input[type="number"], input[type="date"] {
	margin-top: 0.65rem;
}

/* Schützenliste: Spaltenüberschriften einzeilig halten, damit ein langer Titel
   wie "Klasse im Championat" (ArcheryCup) nicht umbricht. So sind alle Spalten
   gleich hoch und die Eingabe-/Ausgabefelder bleiben automatisch auf einer Linie.
   Das Ausgabefeld (p.textklasse) bleibt umbruchfähig für lange Klassennamen. */
#archerlist section .daten {
	white-space: nowrap;
}
#archerlist section .daten > p {
	white-space: normal;
}

#checklist .daten {
	flex-direction: row; /* row oder column, abhängig vom gewünschten Layout */
	gap: 10px;
	justify-content: center;
	padding: 10px;
	font-style: normal;
	border-top: thin solid var(--color-line-blue);
	min-width: 7rem;
	text-align: center;
	align-items: center;
}

#general-info > div:nth-of-type(-2n+5) {
	border: none;
	margin-left: 0;
}

#checklist section:first-of-type > div {
	border-top: none;
	font-size: 0.9rem;
	font-weight: bold;
}
	
.button-container {
	grid-column: 1 / -1; /* Lässt den Button-Container die volle Breite einnehmen */
	display: flex;
	justify-content: flex-end; /* Zentriert den Button innerhalb des Containers */
}

/* -------------------------------------------------------------------------
   Schützen entfernen: kompakter Icon-Button (Mülleimer), je Schützen-Sektion
   per JS eingefügt. Absolut am rechten unteren Sektionsrand positioniert, damit
   er KEINE zusätzliche Breite beansprucht – sonst würde die Sektion (und damit
   das Fieldset) breiter als die übrigen Fieldsets. Greift in beiden
   Meldeformularen (ArcheryCup & Championship).
   ------------------------------------------------------------------------- */
#archerlist section {
	position: relative;
}

.archer-remove {
	position: absolute;
	right: 0;
	bottom: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.1rem;
	height: 2.1rem;
	margin: 0;
	padding: 0;
	/* border: thin solid var(--color-primary-soft); */
	border-radius: 0.3rem;
	background-color: transparent;
	color: var(--color-primary-soft);
	cursor: pointer;
}

.archer-remove svg {
	display: block;
	width: 1.2rem;
	height: 1.2rem;
}

.archer-remove:hover,
.archer-remove:focus-visible {
	background-color: var(--color-error);
	border-color: var(--color-error);
	color: var(--color-page-bg);
}

#general-info_check {
    display: grid;
    /* Erstellt ein Sechs-Spalten-Layout */
    grid-template-columns: 0.4fr 0.4fr 0.75fr 1fr;
	max-width: 100%;
    align-items: center;
}

#general-info_check .spalte {
	border: none;
	margin: 0;
	padding-left: 0;
}

/* Labels (ungerade divs) und zugehörige Texte (gerade divs) in den ersten beiden Spalten */
#general-info_check .spalte:nth-of-type(-n+7):nth-of-type(odd) {
    grid-column: 2; /* Labels in der ersten Spalte */
}

#general-info_check .spalte:nth-of-type(-n+8):nth-of-type(even) {
    grid-column: 3; /* Zugehörige Texte in der zweiten Spalte */
}

/* Die Liste (das letzte div) in der vierten Spalte */
#general-info_check .spalte:last-of-type {
    grid-column: 4; /* Liste in der vierten Spalte */
    grid-row: 1 / span 4; /* Option, um das Layout anzupassen, falls nötig */
}

#general-info_check .spalte:last-of-type ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
 
#general-info_check .spalte:last-of-type ul li {
  margin-bottom: 0.75rem;
}

#general-info_check .spalte:nth-of-type(6) {
	flex-direction: column;
	align-items: flex-start;
}

#general-info_check .spalte span {
	color: var(--color-success);
	margin: 0;
	font-size: 1.2em;
	font-weight: bold;
}

.error {
	border: 2px solid var(--color-error);
	border-radius: 5px;
	height: min-content;
}

#danke {
/*     position: absolute;
	top: 11rem; */
	display: block;
	margin-bottom: 0.5rem;
	padding: 0.5rem;
	border: thin solid var(--color-accent-light);
	border-radius: 0.5rem;
	width: 100%;
	background-color: var(--color-accent-bg);
	padding-bottom: 2rem;
}

#danke > div {
	max-width: 25rem;
	margin: auto;
}

#danke h3, #danke h3 + p {
	text-align: center;
}

#danke ul {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 20px; /* Abstand zwischen Bild und Text */
	list-style: none;
	padding: 0;
	width: 30%;
	margin: auto;
	line-height: 3rem;
}

#danke li {
  display: contents;
}

#danke img {
  max-width: 50px; /* Bildgröße anpassen */
  max-height: 50px;
  align-self: center;
}

#danke span {
  align-self: center; /* Vertikale Ausrichtung des Textes */
}

/* =========================================================================
   Responsive Anpassungen (Desktop-first; greifen unterhalb der Breakpoints).
   Ziel: Die breiten, mehrspaltigen Formular-Layouts auf schmalen Screens
   vertikal stapeln. Die Grid-Container werden dazu auf display:block gesetzt –
   damit verlieren ihre grid-column/grid-row-Zuweisungen die Wirkung und die
   Kinder ordnen sich natürlich untereinander an.
   ========================================================================= */
@media (max-width: 768px) {
	/* Schützenliste (Eingabe): Felder einer Zeile untereinander stapeln.
	   Dort trägt jedes Feld ein sichtbares Label, daher bleibt die Zuordnung
	   beim Stapeln klar. Die Prüfliste (#checklist) wird stattdessen weiter
	   unten als Karten-Layout behandelt. */
	#archerlist section {
		flex-direction: column;
		gap: 0.6rem;
	}

	#archerlist section .daten {
		width: 100%;
		white-space: normal; /* das Desktop-nowrap hier aufheben */
		padding-left: 0;
	}

	/* Eingabefelder über die volle Breite, leichter bedienbar.
	   Über .daten spezifisch genug, um auch die festen Feldbreiten
	   (bowtype/gender/date/...) der Schützenliste zu überschreiben. */
	#archerlist section .daten input,
	#archerlist section .daten select,
	#archerlist section .daten [class^="textklasse"] {
		width: 100%;
		max-width: 22rem;
		margin-inline: 0; /* hebt das zentrierende margin:0 auto der number-Felder auf */
	}

	#archerlist section .daten input[type="number"] {
		text-align: left;
	}

	/* Gestapelte Sektion: Button zurück in den Fluss, rechtsbündig unter die Felder. */
	#archerlist section .archer-remove {
		position: static;
		align-self: flex-end;
		margin-top: 0.25rem;
	}

	/* -----------------------------------------------------------------
	   Prüfliste (Kontrolle vor dem Absenden): NICHT stapeln, sondern je
	   Schütze eine Karte. Da die Werte – anders als in der Schützenliste –
	   keine eigenen Labels tragen, würde reines Stapeln die Zuordnung
	   verlieren. Stattdessen entfällt die Kopfzeile und jedem Wert wird sein
	   Label (data-label) vorangestellt: Label links, Wert rechts. So bleibt
	   die Zuordnung auch bei vielen Schützen erhalten – ohne Seitwärts-Scroll.
	   ----------------------------------------------------------------- */
	#checklist {
		display: block;
		padding-top: 10px;
	}

	/* Kopfzeilen-Sektion entfällt – die Labels stehen jetzt an jeder Zelle. */
	#checklist section:first-of-type {
		display: none;
	}

	/* Jede Schützen-Sektion wird zu einer abgegrenzten Karte. */
	#checklist section {
		flex-direction: column;
		gap: 0;
		margin-bottom: 1rem;
		border: thin solid var(--color-accent-light);
		border-radius: 0.5rem;
		background-color: var(--color-accent-bg);
		overflow: hidden;
	}

	/* Zelle = Label-/Wert-Zeile. */
	#checklist .daten {
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		gap: 1rem;
		min-width: 0;
		width: auto;
		padding: 0.5rem 0.75rem;
		text-align: right;
		border-top: thin dotted var(--color-line-blue);
	}

	/* Label aus dem data-label-Attribut (links, hervorgehoben). */
	#checklist .daten::before {
		content: attr(data-label);
		font-weight: bold;
		text-align: left;
		white-space: nowrap;
	}

	/* Erste Zeile je Karte ohne obere Trennlinie. */
	#checklist section .daten:first-child {
		border-top: none;
	}

	/* Veranstaltungs-/Prüfdaten: mehrspaltige Grids einspaltig stapeln. */
	#general-info,
	#general-info_check {
		display: block;
	}

	#general-info input,
	#general-info select {
		width: 100%;
		max-width: 22rem;
	}

	/* Linke Akzentlinie/Einzüge der Spalten auf Mobil reduzieren. */
	.spalte {
		margin: 0 0 0.5rem 0;
		padding: 0.5rem 0 0.5rem 0.75rem;
	}

	/* Danke-Box aus der absoluten Positionierung lösen und voll ausnutzen. */
/* 	#danke {
		position: static;
		top: auto;
	} */

	#danke ul {
		width: 100%;
	}
}

@media (max-width: 480px) {
	/* Feinschliff: Einzüge/Abstände weiter verkleinern. */
	.daten {
		padding-left: 0;
	}

	#danke > div {
		max-width: 100%;
	}
}