/* ================================================================
   Responsive Tabelle – Mobile-First
   (spezifisch für die Tabelle mit #no-more-tables:
   Spalten "Präventionsmaßnahme" | "Zielgruppe" | "Verantwortliche")

   Basis (Mobile) = gestapelte Darstellung (jede Zeile wird zur Karte,
   Spaltenbeschriftung erscheint als Label vor dem Wert)
   Ab 768px = normale Tabellendarstellung

   Hinweis: Die alte iPad-Sonderausnahme (erzwang gestapelte Ansicht
   auch auf iPads 768–1024px Gerätebreite) wurde entfernt – ab 768px
   erscheint jetzt überall die normale Tabelle. Bei Bedarf kann diese
   Ausnahme gezielt wieder ergänzt werden.
   ================================================================ */


/* ----------------------------------------------------------------
   1. BASIS (Mobile) – gestapelte Darstellung
   ---------------------------------------------------------------- */

#no-more-tables table,
#no-more-tables thead,
#no-more-tables tbody,
#no-more-tables th,
#no-more-tables td,
#no-more-tables tr {
	display: block;
}

/* Tabellenkopf optisch ausblenden, aber für Screenreader erhalten */
#no-more-tables thead tr {
	position: absolute;
	top: -9999px;
	left: -9999px;
}

#no-more-tables tr {
	border: 1px solid #ccc;
}

#no-more-tables td {
	border: none;
	border-bottom: 1px solid #eee;
	position: relative;
	padding-left: 50%;
}

#no-more-tables td:before {
	position: absolute;
	top: 6px;
	left: 6px;
	width: 45%;
	padding-right: 10px;
	white-space: nowrap;
}

/* Spaltenbeschriftungen als generierter Inhalt */
#no-more-tables td:nth-of-type(1):before { content: "Präventionsmaßname"; }
#no-more-tables td:nth-of-type(2):before { content: "Zielgruppe"; }
#no-more-tables td:nth-of-type(3):before { content: "Verantwortliche"; }

/* Grundformatierung, die in beiden Ansichten gilt */
table {
	width: 100%;
	border-collapse: collapse;
}

tr:nth-of-type(odd) {
	background: #f2f2f2;
}

th {
	background: #333;
	color: white;
	font-weight: bold;
}

td, th {
	padding: 1rem;
	border: 1px solid #ccc;
	letter-spacing: 0.05rem;
}

td br {
	line-height: 1rem;
}


/* ----------------------------------------------------------------
   2. BREAKPOINT ≥ 768px – normale Tabellendarstellung
   ---------------------------------------------------------------- */

@media only screen and (min-width: 768px) {

	#no-more-tables table {
		display: table;
	}

	#no-more-tables thead {
		display: table-header-group;
	}

	#no-more-tables tbody {
		display: table-row-group;
	}

	#no-more-tables tr {
		display: table-row;
		border: none;
	}

	#no-more-tables th,
	#no-more-tables td {
		display: table-cell;
	}

	#no-more-tables thead tr {
		position: static;
		top: auto;
		left: auto;
	}

	#no-more-tables td {
		border: 1px solid #ccc;
		padding-left: 1rem;
	}

	#no-more-tables td:before {
		content: none;
		position: static;
	}

	td, th {
		width: 33%;
	}
}