/* ==========================================================================
   Materialliste — Gruppen auf der Themenseite
   Ergänzt Abschnitt 30 von app.css (Dokumentzeile). Geladen wird die
   Datei dort, wo die Zeilen Gruppen, Klappen und die Spalte
   «Hochgeladen» tragen (site/templates/thema.php, css-Parameter des
   Layout-Snippets).

   Grundsatz wie überall: Zeilen mit einer Linie dazwischen, keine
   Kästchen. Was die Gruppen trennt, ist ihr Titel und der Abstand — und
   beide Gruppen behalten dieselben Spaltenkanten, sonst wäre die
   Trennung mit einer neuen Unordnung erkauft.

   Inhalt
     1. Gruppe und Gruppenkopf
     2. Suchfeld der Gruppe
     3. Sortierbare Kopfzeile der Gruppe
     4. Klappe: Knopf und Zusatzbereich
     5. Spalte «Hochgeladen»
     6. Ansichten «Liste» und «Raster»
     7. Schmale Container
     8. Keine Flächentönung — die geprüfte und verworfene Fassung
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Gruppe und Gruppenkopf
   Titel, Zähler, Suche in einer Zeile; darunter die Kopfzeile der
   Spalten, deren Linie die Gruppe eröffnet. Eine zweite Linie unter dem
   Titel wäre eine Dekorlinie — die gibt es hier nicht.
   -------------------------------------------------------------------------- */

.ml-gruppe + .ml-gruppe {
	margin-top: var(--raum-7);
}

.ml-bestand-leer {
	padding: var(--raum-3);
	margin: 0;
}

/* Derselbe Zeilenaufbau wie Dokumente, aber als dauerhafter Weblink erkennbar. */
.dz[data-altseitenhinweis] .dz-titel {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.ml-kopf {
	display: flex;
	align-items: baseline;
	gap: var(--raum-2) var(--raum-3);
	min-height: var(--feld);
	margin-bottom: var(--raum-2);
	flex-wrap: wrap;
}

.ml-titel {
	margin: 0;
	font-size: var(--t-2);
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	text-wrap: balance;
}

.ml-zahl {
	margin: 0;
	font-size: var(--t--2);
	color: var(--text-muted);
	font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   2. Suchfeld der Gruppe
   Rechts im Gruppenkopf, Feldhöhe, --radius wie jedes Eingabefeld. Ohne
   Rahmen, bis der Zeiger oder der Fokus darauf liegt: die Liste ist die
   Hauptsache, nicht ihr Werkzeug.
   -------------------------------------------------------------------------- */

.ml-suche {
	position: relative;
	display: flex;
	align-items: center;
	margin-left: auto;
	flex: 0 1 18rem;
	min-width: 10rem;
}

.ml-suche-icon {
	position: absolute;
	left: 0.6rem;
	color: var(--text-faint);
	pointer-events: none;
}

.ml-suche input {
	width: 100%;
	height: var(--feld);
	padding-left: 2rem;
	border-radius: var(--radius);
	border-color: transparent;
	background: var(--surface);
}

.ml-suche input:hover {
	border-color: var(--border);
}

/* Auf schmalen Listen steht das Feld nicht mehr rechts, sondern über die
   ganze Zeile. `margin-left: auto` schiebt es sonst auch dann an den
   rechten Rand, wenn es längst auf einer eigenen Zeile steht: bei 400 px
   begann es 24 px hinter der Inhaltskante, und davor lag ein Loch.
   Gemessen wird die Liste, nicht das Fenster — mit offenem Vorschaupanel
   ist die Liste auf einem grossen Schirm genauso schmal. */
@container dokumente (max-width: 560px) {
	.ml-suche {
		margin-left: 0;
		flex: 1 1 100%;
	}
}

/* --------------------------------------------------------------------------
   3. Sortierbare Kopfzeile der Gruppe
   Dieselbe Form wie `.dz-sort` in app.css, Abschnitt 30 — anderer Name,
   weil ein anderes Modul zuhört: `.dz-sort` sortiert die ganze Liste
   (dokumentliste.js), `.ml-sort` nur die eigene Gruppe
   (materialliste.js). Zwei Kopfzeilen mit demselben Namen hiessen: zwei
   Zuhörer auf einem Knopf.
   -------------------------------------------------------------------------- */

/* Die Kopfzeile ist ein Subgrid derselben Spuren wie die Zeilen
   (app.css §30): ihre Schriftgrösse bestimmt darum keine Spurbreite
   mehr, sie zählt nur noch beim Messen mit — eine Beschriftung, die
   breiter ist als ihre Spalte, macht die Spalte breiter statt sich
   selbst schmal. Vorher rechneten die Spuren in `ch` gegen die Schrift
   des Elements, an dem sie standen; die Kopfzeile musste dafür in der
   Schrift der Zeile rechnen. Das ist weg. */

.ml-sort {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	font-size: var(--t--2);
	font-weight: 500;
	color: var(--text-muted);
	text-align: left;
	cursor: pointer;
}

.ml-sort:hover {
	color: var(--text);
}

.ml-sort-pfeil::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	opacity: 0;
	border-left: 3.5px solid transparent;
	border-right: 3.5px solid transparent;
	border-bottom: 5px solid currentColor;
}

.ml-sort[aria-sort="ascending"] .ml-sort-pfeil::before {
	opacity: 1;
}

.ml-sort[aria-sort="descending"] .ml-sort-pfeil::before {
	opacity: 1;
	transform: rotate(180deg);
}

.ml-sort[aria-sort]:not([aria-sort="none"]) {
	color: var(--text);
}

/* Format, Grösse und Hochgeladen stehen in der Zelle rechts (app.css
   §30 und Abschnitt 5 hier) — ihre Beschriftung darum auch. Der Knopf
   ist so breit wie sein Wort; er wird im Raster nach rechts gesetzt,
   nicht in sich ausgerichtet. Beide Kopfzeilen brauchen die Regel:
   `.ml-sort` sortiert die Gruppe (Themenseite), `.dz-sort` die ganze
   Liste (Bibliothek, Praktikum). Alle übrigen Spalten stehen links —
   das ist die Vorgabe von `.ml-sort`/`.dz-sort` und bleibt es. */
.dz-kopf .ml-sort[data-sort="format"],
.dz-kopf .ml-sort[data-sort="mass"],
.dz-kopf .ml-sort[data-sort="datum"],
.dz-kopf .dz-sort[data-sort="format"],
.dz-kopf .dz-sort[data-sort="mass"],
.dz-kopf .dz-sort[data-sort="datum"] {
	justify-self: end;
}

/* Eine Zeile, die die Gruppensuche weggefiltert hat. Sie steht neben
   `hidden`, das die Typleiste setzt (dokumentliste.js): zwei Schalter,
   eine Zeile — sichtbar nur, wenn beide sie stehen lassen. */
.dokumente .dz.ml-aus {
	display: none;
}

.ml-leer {
	margin: var(--raum-4) 0 0;
}

/* --------------------------------------------------------------------------
   4. Klappe: Knopf und Zusatzbereich
   Der Knopf steht in einer eigenen Spur ganz links (18 px, gesetzt in
   thema.php). Er ist die einzige Stelle, die aufklappt — der Klick auf
   die Zeile wählt sie und zeigt die Vorschau.
   -------------------------------------------------------------------------- */

/* Die Spur ganz links gehört zum Raster des Stroms (app.css §30,
   Spur 1). Sie misst null, solange keine Liste eine Klappe bestellt —
   niemand muss sie hier noch dazurechnen. */

.dz-auf {
	position: relative;
	display: grid;
	place-items: center;
	align-self: center;
	width: 18px;
	height: 18px;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--radius-sm);
	color: var(--text-faint);
	cursor: pointer;
}

/* Die Trefferfläche ist grösser als das Kästchen: 24 × 24 px auf dem
   Schirm, 44 × 44 unter 700 px (die Grösse für einen Finger). Sie liegt
   als unsichtbare Fläche über dem Knopf und ändert an der Zeile nichts —
   weder ihre 40 px Höhe noch die 18 px ihrer ersten Spur, und auch nicht
   die Fläche, die beim Überfahren aufleuchtet. Ein negativer Rand am
   Knopf selbst hätte all das verschoben. */
.dz-auf::after {
	content: "";
	position: absolute;
	inset: -3px;
}

@media (max-width: 700px) {
	.dz-auf::after {
		inset: -13px;
	}
}

.dz-auf svg {
	width: 11px;
	height: 11px;
}

@media (prefers-reduced-motion: no-preference) {
	.dz-auf svg {
		transition: transform 120ms ease;
	}
}

.dz-auf:hover {
	color: var(--text);
	background: var(--surface-2);
}

.dz.ist-offen .dz-auf svg {
	transform: rotate(90deg);
}

/* Zeilen ohne Zusatzinfos halten die Spur frei, damit die Symbole
   aller Zeilen auf einer Linie stehen. */
.dz-auf-leer {
	display: block;
}

/* Der Bereich beginnt unter dem Titel: das Raster des Stroms benennt
   die Titelspur `[dz-titel]` (app.css §30), damit hier niemand
   Spurenbreiten nachrechnet. Keine Fläche, keine Linie — er gehört zur
   Zeile darüber und ist nur beim Lesen da. */
.dz-zusatz {
	grid-column: dz-titel / -1;
	/* Im Spaltenraster steht der Name für Spur 4; die Zahl steht
	   daneben, damit die Regel auch dann trägt, wenn eine Ansicht ein
	   anderes Raster setzt. */
	align-self: start;
	margin: var(--raum-2) 0 var(--raum-3);
	display: grid;
	gap: var(--raum-2);
	max-width: 90ch;
	font-size: var(--t--1);
	color: var(--text);
}

/* Fliesstext hält 72 Zeichen, auch wenn die Liste breiter ist: auf
   2560 px lief der Klappentext über 2068 px und 295 Zeichen, und eine
   Zeile, die so lang ist, findet ihren Anfang nicht wieder
   (docs/DESIGN.md §2). */
.dz-zusatz-text {
	font-size: var(--t--1);
	max-width: var(--prosa);
}

/* Der Kontextsatz. In der Tabelle ist er der erste Absatz der Klappe;
   in den Ansichten «Liste» und «Raster» steht er in der Zeile selbst,
   dort bleibt er hier weg. */
.dz-zusatz-beschrieb {
	margin: 0;
	max-width: var(--prosa);
	font-size: var(--t--1);
	color: var(--text-muted);
}

[data-ansicht="liste"] .dz-zusatz-beschrieb,
[data-ansicht="raster"] .dz-zusatz-beschrieb {
	display: none;
}

/* Bis zur zwölften Spur, nicht bis `-1`: die dreizehnte ist der leere
   Rand rechts (app.css §30), und der Klappentext soll dort so wenig
   hineinlaufen wie die Zeile darüber. */
[data-ansicht="tabelle"] .dokumente-strom .dz-zusatz {
	grid-column: 4 / 13;
}

.dz-zusatz-text img {
	max-width: 100%;
	height: auto;
}

/* Ist nichts erfasst, sieht nur Staff die Klappe — mit dem Weg dorthin,
   wo es erfasst wird. Für alle anderen gibt es dann keinen Knopf, denn
   eine leere Klappe ist keine Auskunft. */
.dz-zusatz-leer,
.dz-zusatz-panel {
	margin: 0;
	font-size: var(--t--2);
	color: var(--text-faint);
}

.dz-zusatz-leer a,
.dz-zusatz-panel a {
	color: inherit;
	text-decoration-color: var(--border);
	text-underline-offset: 2px;
}

.dz-zusatz-leer a:hover,
.dz-zusatz-panel a:hover {
	color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. Spalte «Hochgeladen»
   Sie erscheint nur, wo die Daten sich unterscheiden (thema.php); ist
   sie da, steht sie rechts neben der Grösse.
   -------------------------------------------------------------------------- */

.dz-datum {
	font-size: var(--t--2);
	color: var(--text-faint);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	text-align: right;
}

/* --------------------------------------------------------------------------
   6. Ansichten «Liste» und «Raster»
   Beide stellen die Zeile um (app.css, Abschnitt 37). Die zusätzlichen
   Spuren müssen mitziehen, sonst rutschen die Spalten um eine Stelle.
   -------------------------------------------------------------------------- */

[data-ansicht="liste"] .dz.dz-klappbar {
	grid-template-columns: 18px 24px [dz-titel] minmax(0, 1fr) minmax(0, max-content);
}

[data-ansicht="liste"] .dz-datum {
	display: none;
}

/* Im Raster ist die Zeile eine Kachel: eine Spalte, keine Spuren. Ohne
   diese Zeile gewänne die Spur des Klappenknopfs oben, weil sie im
   später geladenen Blatt steht. */
[data-ansicht="raster"] .dz.dz-klappbar {
	grid-template-columns: minmax(0, 1fr);
}

[data-ansicht="raster"] .dz-auf,
[data-ansicht="raster"] .dz-auf-leer,
[data-ansicht="raster"] .dz-datum,
[data-ansicht="raster"] .dz-zusatz {
	display: none;
}

/* --------------------------------------------------------------------------
   7. Schmale Container
   Dieselben Schwellen wie in app.css: unter 980 px fallen die feinen
   Angaben, unter 480 px wird die Zeile zweizeilig. Der Klappenknopf
   nimmt dort den Platz des Pfeils — beides ist «mehr dazu».
   -------------------------------------------------------------------------- */

/* Welche Beschriftungen auf schmalen Containern fallen, sagt app.css
   §30: Kopf und Zeile teilen sich ein Raster, es fällt beides
   gemeinsam. Hier bleibt nur, was zur Klappe gehört. */

@container dokumente (max-width: 480px) {
	/* Auch hier steht der Knopf links, wie auf jeder anderen Breite: der
	   Platz am rechten Rand gehoerte dem Pfeil, und ein Knopf dort saehe
	   aus wie er. Die Zeile bekommt dafür eine Spur mehr und eigene
	   Bereiche — app.css §30 kennt nur «typ haupt» und «typ meta». */
	[data-ansicht="tabelle"] .dz.dz-klappbar {
		grid-template-columns: 18px 24px minmax(0, 1fr);
		grid-template-areas:
			"auf typ haupt"
			"auf typ meta";
	}

	/* Kein `grid-column: auto` hinter `grid-area`: der Ruecksetzer nahm
	   der Zelle die Spalte gleich wieder weg (app.css §30). */
	[data-ansicht="tabelle"] .dz-klappbar .dz-auf,
	[data-ansicht="tabelle"] .dz-klappbar .dz-auf-leer {
		grid-area: auf;
	}

	/* Pfeil und Typzeichen sitzen auf DERSELBEN Textzeile, der ersten.
	   Mittig der ganzen Zeile stand der Pfeil bei einem umbrochenen
	   Titel eine halbe Zeile unter dem Zeichen daneben — zwei Zeichen,
	   die zusammengehoeren, auf zwei Hoehen. `--dz-erstzeile` ist die
	   Hoehe dieser ersten Zeile; sie steht an der Zeile (app.css §30),
	   damit hier niemand einen zweiten Wert pflegt. Der Knopf zentriert
	   seinen Pfeil darin wie zuvor in seinen 18 px. */
	[data-ansicht="tabelle"] .dz-klappbar .dz-auf,
	[data-ansicht="tabelle"] .dz-klappbar .dz-auf-leer {
		align-self: start;
		height: var(--dz-erstzeile);
	}

	[data-ansicht="tabelle"] .dokumente-strom .dz-zusatz {
		grid-column: 1 / -1;
	}
}

/* --------------------------------------------------------------------------
   8. Keine Flächentönung — die geprüfte und verworfene Fassung
   Zur Abnahme stand eine Variante daneben: die erste Gruppe auf
   `--surface` mit --radius-lg. Auf 1440, 1920 und 2560 px war das ein
   1450 px breiter heller Block um zwei Zeilen — ein Kasten um Inhalt,
   den docs/DESIGN.md §6 ausschliesst und den die Abnahme in §7 misst
   («0 Regeln mit border-radius > 6px auf Inhalt»). Die Gruppen
   unterscheiden sich darum durch Titel, Zähler und Abstand; die
   Fachdidaktik-Zeilen zusätzlich durch `.dz-kern` (halbfetter Titel,
   mehr Luft) aus app.css. Beide Gruppen behalten dieselben
   Spaltenkanten — genau das war der Wunsch.
   -------------------------------------------------------------------------- */