/* ==========================================================================
   boerse-responsive.css
   Mobile-Anpassungen fuer die Modulseiten (Spielpartner-Boerse, Turniere).
   Bewusst getrennt von screen.css. Wirkt nur auf schmalen Screens
   (max-width), die Desktop-Ansicht bleibt unveraendert.
   cc, 20.07.26
   ========================================================================== */

/* Content-Box fluid: nicht ueber den Viewport hinaus, aber bis max-width nutzen.
   Wird als Inline-max-width auf den Wrappern gesetzt; hier die Fluid-Basis. */
.mod-wrap {
	width: 100%;
	box-sizing: border-box;
}

/* Datentabellen (Verfuegbarkeitsmatrix, Turnier-/Meldelisten):
   in einen horizontal scrollbaren Container huellen, damit breite Tabellen
   die Seite nicht sprengen. */
.mod-tablewrap {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {

	/* Formular-Tabellen: Label ueber Feld stapeln statt nebeneinander.
	   NUR die aeussere mod-form-Tabelle (> direkte Kinder), damit verschachtelte
	   Tabellen wie die Verfuegbarkeits-Matrix ihr Raster behalten! */
	table.mod-form,
	table.mod-form > tbody,
	table.mod-form > tbody > tr,
	table.mod-form > tbody > tr > td,
	table.mod-form > tr,
	table.mod-form > tr > td {
		display: block;
		width: 100% !important;
		height: auto !important;
		box-sizing: border-box;
	}
	table.mod-form > tbody > tr > td,
	table.mod-form > tr > td {
		padding: 2px 0 !important;
	}
	/* Label-Zelle (erste Zelle jeder aeusseren Zeile): Abstand nach oben */
	table.mod-form > tbody > tr > td:first-child,
	table.mod-form > tr > td:first-child {
		padding-top: 12px !important;
		font-weight: bold;
	}
	/* Eingabefelder fluid statt feste Pixelbreite (auch verschachtelte) */
	table.mod-form input[type="text"],
	table.mod-form select,
	table.mod-form textarea {
		width: 100% !important;
		max-width: 100% !important;
		box-sizing: border-box;
	}
	/* Checkboxen der Matrix NICHT auf 100% aufblasen */
	table.mod-form input[type="checkbox"] {
		width: auto !important;
	}

	/* Kompakteres Padding in den Datentabellen auf dem Handy */
	.mod-tablewrap table td {
		padding: 7px 9px !important;
	}

	/* Karten (Gesuche/Turniere): weniger Innenabstand */
	.mod-card-head { padding: 10px 12px !important; }
	.mod-card-body { padding: 12px 12px !important; }

	/* Buttons/Links im Modul-Inhalt auf Mobile: volle Breite + eigener Abstand,
	   damit sie nicht aneinanderkleben. Der Header (.main-header) liegt AUSSERHALB
	   von .mod-wrap und bleibt davon unberuehrt. */
	.mod-wrap .btn {
		display: block;
		width: 100%;
		box-sizing: border-box;
		margin: 6px 0 0 0 !important;
		text-align: center;
	}
	/* Das Turnier-Meldeformular (Selects nebeneinander) auf Mobile stapeln */
	.mod-wrap select {
		max-width: 100%;
	}
}