/**
 * Praktikumsanmeldung, Eingang und Anfragen.
 *
 * Wird nur auf Praktikumsseiten mit Formular, im Eingang und auf
 * Anfrageseiten geladen (Parameter `css` des Layout-Snippets).
 * Alle Farben kommen aus den Theme-Tokens; hier steht nichts, was
 * app.css schon kann.
 */

/* Anmeldeformular --------------------------------------------------------- */

.anmeldung {
	margin-top: var(--raum-6);
	scroll-margin-top: var(--raum-5);
}

.anmeldung h2 {
	margin-top: 0;
}

.anmeldung-formular {
	margin-top: var(--raum-4);
}

/* Gäste sehen statt des Knopfs den Weg zum Login. */
.anmeldung-login {
	margin: 0 0 var(--raum-4);
}

.datenschutz {
	border-top: 1px solid var(--border);
	padding-top: var(--raum-3);
}

.aside-aktion {
	margin: var(--raum-4) 0 0;
}

/* Angaben aus dem Konto ---------------------------------------------------
   Name und E-Mail sind keine Felder: sie stehen im Konto und werden von
   dort genommen. Eine Begriff-Wert-Zeile in voller Tinte, daneben der
   Stift, der zum Konto führt — dieselbe Gestalt wie «Bearbeiten» auf den
   Seiten (`.meta-panel` in app.css). */

/* Aufbau wie ein Feld: Beschriftung oben, Wert darunter — nur dass der
   Wert kein Feld ist, sondern Text. */
.anmeldung-konto {
	display: grid;
	gap: 4px;
	margin: 0;
}

.anmeldung-konto-begriff {
	font-size: var(--t--2);
	font-weight: 500;
	color: var(--text);
}

/* Wert und Stift auf einer Zeile: der Stift bleibt beim Wert, auch wenn
   der ueber zwei Zeilen laeuft. */
.anmeldung-konto-zeile {
	display: flex;
	align-items: center;
	gap: var(--raum-2);
	min-width: 0;
}

.anmeldung-konto-wert {
	min-width: 0;
	font-size: var(--t--1);
	color: var(--text);
	overflow-wrap: anywhere;
}

.anmeldung-konto-stift {
	flex: none;
}

/* Monatsreihe -------------------------------------------------------------
   Eine Reihe gleich breiter Felder, eines je Monat des gewählten
   Semesters (HS sieben, FS sechs). Gewählt ist eine Akzentfläche mit
   `--accent-contrast`; das Kästchen selbst ist weg, aber fokussierbar,
   und die Leertaste kreuzt an wie bei jeder Checkbox. */

.monatswahl-label {
	font-size: var(--t--2);
	font-weight: 500;
	color: var(--text);
}

.monatsreihe {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: var(--raum-1);
}

.monat {
	display: grid;
	place-items: center;
	min-width: 0;
	height: 36px;
	padding: 0 var(--raum-1);
	background: var(--bg);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-muted);
	font-size: var(--t--1);
	cursor: pointer;
	user-select: none;
}

/* Das native Kästchen bleibt in der Tabfolge und nimmt den Fokus — es
   ist nur weggeschnitten, nicht `display: none`. */
.monat input[type="checkbox"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: 0;
	padding: 0;
	border: 0;
	opacity: 0;
	pointer-events: none;
}

.monat-text {
	line-height: 1;
}

.monat:hover {
	border-color: var(--text-faint);
	color: var(--text);
}

.monat:has(input:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--accent-contrast);
	font-weight: 500;
}

.monat:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

.monatswahl.ist-ungueltig .monat {
	border-color: var(--danger);
}

/* Schulwahl ---------------------------------------------------------------
   Ein Suchfeld mit Trefferliste darunter und den gewählten Schulen als
   entfernbare Einträge (dieselben Chips wie die aktiven Filter der
   Bibliothek). Ohne JavaScript bleibt ein gewöhnliches Textfeld. */

.schulwahl-feld {
	position: relative;
}

.schulwahl-liste {
	position: absolute;
	z-index: 5;
	top: calc(100% + 2px);
	left: 0;
	right: 0;
	max-height: 260px;
	margin: 0;
	padding: var(--raum-1);
	list-style: none;
	overflow-y: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.schulwahl-option {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 var(--raum-2);
	padding: 6px var(--raum-2);
	border-radius: var(--radius-sm);
	font-size: var(--t--1);
	color: var(--text);
	cursor: pointer;
}

.schulwahl-option:hover,
.schulwahl-option.ist-aktiv {
	background: var(--hover);
}

.schulwahl-ort {
	font-size: var(--t--2);
	color: var(--text-muted);
}

.schulwahl-option.ist-frei {
	color: var(--text-muted);
}

.schulwahl-gewaehlt {
	margin: 0;
}

.schulwahl-gewaehlt:empty {
	display: none;
}

.schulwahl.ist-ungueltig input[type="text"] {
	border-color: var(--danger);
}

/* Zwei Hinweiszeilen gehören nur dem Rückfall ohne JavaScript. */
.nur-kein-js {
	display: none;
}

.kein-js .nur-kein-js {
	display: block;
}

/* Ohne JavaScript ist die Schulwahl ein Textfeld: keine Liste, keine
   Einträge, und das Feld heisst dort, was es ist. */
.kein-js .schulwahl-liste,
.kein-js .schulwahl-gewaehlt {
	display: none;
}

/* Eingang ----------------------------------------------------------------- */

.eingang-zaehler {
	color: var(--text-muted);
	font-size: var(--t--1);
	margin: 0 0 var(--raum-3);
}

/* Anfragen-Tabelle -------------------------------------------------------- */

.tabelle-anfragen td {
	vertical-align: top;
}

.anfrage-zeile.ist-neu td {
	font-weight: 500;
}

.punkt {
	display: inline-block;
	width: 0.5rem;
	height: 0.5rem;
	margin-right: var(--raum-2);
	border-radius: 50%;
	background: var(--accent);
	vertical-align: baseline;
}

/* Anfrageseite ------------------------------------------------------------ */

.anfrage-angaben dd {
	color: var(--text);
}

.anfrage-schulen {
	margin: 0;
	padding-left: 1.1em;
}

.anfrage-nachricht {
	max-width: var(--prosa);
}

.antwort {
	margin-top: var(--raum-6);
	padding: var(--raum-4) var(--raum-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.antwort h2 {
	margin-top: 0;
}

.antwort-formular textarea {
	font-family: inherit;
	line-height: 1.55;
}

.klein {
	font-size: var(--t--2);
	color: var(--text-muted);
	overflow-wrap: anywhere;
}

/* Kopf der Praktikumsseite ------------------------------------------------
   Die eine Handlung steht rechts auf der Titelzeile, nicht als eigene
   Zeile über der Tabelle: dort kostete sie eine Zeilenhöhe und stand
   zwischen Titel und Angaben. */

/* Der Knopf ist vier Pixel höher als die Titelzeile. Auf der Grundlinie
   des H1 hinge er darum tiefer als der Titel; mittig zur Titelzeile
   liegen beide Mitten aufeinander. */
.themenkopf:has(> .praktikum-aktion) {
	align-items: center;
}

.praktikum-aktion {
	flex: none;
	margin: 0;
}

/* Ein Hinweis ist Text, kein Knopf: er beginnt auf der Grundlinie des
   Titels, statt den Titel mit seiner Höhe nach unten zu ziehen. */
.themenkopf:has(> .praktikum-aktion-still) {
	align-items: baseline;
}

/* Geschlossenes Anmeldefenster: ein Satz an der Stelle des Knopfs. */
.praktikum-aktion-still {
	max-width: 44ch;
	text-align: right;
	font-size: var(--t--1);
	color: var(--text-muted);
}

/* Stammblatt und Dokumente ------------------------------------------------
   Zwei Felder eines Rasters: untereinander oder nebeneinander. Die
   Schwelle rechnet sich aus dem, was beide brauchen.

   Das Stammblatt bleibt in Lesebreite: Merkmalspalte so breit wie nötig
   (180 px), Inhaltsspalte höchstens 70 Zeichen — in «instrument»
   653 px, zusammen mit Linien und Luft 849 px, im breitesten der vier
   Looks knapp unter 54rem (864 px). Diesen Deckel trägt das Stammblatt
   in BEIDEN Fällen: eine Tabelle mit `width: auto` rechnet ihre
   Höchstbreite aus dem Text, nicht aus dem `max-width` ihrer Zellen —
   ohne Deckel zöge sie in der einspaltigen Lage über die ganze
   Inhaltsbreite, und die 70 Zeichen wären dahin. Rechts daneben bleibt
   Raum frei; Lesebreite geht vor.

   Die Dokumentliste ist dieselbe wie auf einer Themenseite und braucht
   640 px, um Typ, Autor, Jahr, Format und Grösse neben dem Titel zu
   behalten; darunter fallen die Spalten von rechts weg (app.css §30),
   und bei 288 px — der alten rechten Spalte — fiel jede Zeile in den
   Blockmodus.

   864 + 32 (Abstand `--raum-6`) + 640 = 1536 px. Erst ab dieser
   Inhaltsbreite steht die Liste rechts neben dem Stammblatt; das hat
   ein 2560-px-Fenster (2068 px Inhalt), ein 1920-px-Fenster (1428 px)
   nicht. Darunter steht sie unter dem Stammblatt in voller
   Inhaltsbreite — breiter als die rechte Spalte es je war. In beiden
   Fällen läuft sie im Tabellenmodus; die Zeilenhöhe ändert sich beim
   Übergang nicht. */

.praktikum-seite {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--raum-6);
	align-items: start;
}

.praktikum-stammblatt,
.praktikum-dokumente {
	min-width: 0;
}

/* Die Tabelle füllt den Block, den sie bekommt — `width: auto` macht sie
   nicht schmaler. Schmal wird darum der Block: er nimmt sich, was sein
   Inhalt will (`fit-content`), höchstens aber den Deckel. */
.praktikum-stammblatt {
	width: fit-content;
	max-width: min(100%, 54rem);
}

/* Der Abstand zwischen Stammblatt und «Dokumente» steht als Lücke des
   Rasters, nicht als Rand des Titels: sonst zählte er in der zweiten
   Spalte ein zweites Mal. */
.praktikum-dokumente .praktikum-dokumente-titel {
	margin-top: 0;
}

/* Die zweite Spur bleibt `1fr` und wird nicht `max-content` (Befund
   B93): die Liste zieht nicht auf die Spur, die Spur ist nur der Platz,
   den sie höchstens hat. Was die Liste wirklich einnimmt, entscheidet
   ihr eigenes Raster — es endet an der Linie `-2`, vor dem leeren Rand
   (app.css §30), und seit demselben Befund endet die Typleiste dort
   ebenfalls (app.css §32). Die überzählige Breite liegt also innerhalb
   der Spur rechts frei, und genau so sieht die Seite aus.

   `minmax(640px, max-content)` ginge nicht: der Strom der Liste ist der
   Abfragebehälter (`container-type: inline-size`), seine Breite kommt
   nie aus dem Inhalt — für jeden Vorfahren misst er null. Gemessen mit
   `max-content` fiel die Spur auf ihren Boden von 640 px, und die Liste
   verlor bei 2560 px vier ihrer fünf Spalten. */
@container inhalt (min-width: 1536px) {
	.praktikum-seite {
		grid-template-columns: fit-content(54rem) minmax(640px, 1fr);
		column-gap: var(--raum-6);
		row-gap: 0;
	}
}

/* Die Tabelle nimmt sich nur, was sie braucht: die Inhaltsspalte bleibt
   bei Lesebreite, statt auf die volle Fläche zu ziehen. */
.praktikum-stammblatt .beschreibung {
	width: auto;
	max-width: 100%;
}

.praktikum-stammblatt .beschreibung .prosa-dicht {
	max-width: 70ch;
}

/* Der Altbestand aus dem Feld «Weitere Hinweise» steht unter der
   Tabelle und hält dieselbe Zeilenbreite. */
.praktikum-stammblatt .praktikum-text {
	max-width: 70ch;
}

/* Anmeldedialog: Minimieren neben Schliessen ------------------------------ */

.dialog-tasten {
	flex: none;
	display: flex;
	align-items: center;
	gap: var(--raum-1);
	margin: 0;
}

/* Derselbe Chevron wie überall, nur nach unten: dorthin geht der Dialog. */
.icon-hinunter {
	transform: rotate(90deg);
}

/* Lesezeichen des minimierten Dialogs -------------------------------------
   Fest unten rechts im Fenster, über dem Inhalt und unter jedem Dialog
   (ein offener <dialog> liegt ohnehin in der obersten Ebene). Form wie
   ein Dialog im Kleinen: Fläche, Linie, Radius, Schatten. */

.anmeldemarke {
	position: fixed;
	right: var(--raum-4);
	bottom: var(--raum-4);
	z-index: 60;
	display: flex;
	align-items: stretch;
	margin: 0;
	max-width: min(24rem, calc(100vw - 2 * var(--raum-4)));
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
}

/* Solange das Lesezeichen steht, bekommt der Fuss Platz darunter: was
   ganz unten steht, soll nicht dauerhaft hinter der Marke liegen. */
.hat-anmeldemarke .fuss {
	padding-bottom: 64px;
}

.anmeldemarke-weiter {
	display: inline-flex;
	align-items: center;
	gap: var(--raum-2);
	min-width: 0;
	min-height: var(--feld);
	padding: 0 var(--raum-3);
	background: none;
	border: 0;
	color: var(--text);
	font: inherit;
	font-size: var(--t--1);
	font-weight: 500;
	text-align: left;
	cursor: pointer;
}

.anmeldemarke-weiter:hover {
	color: var(--accent);
}

.anmeldemarke-weiter .icon {
	flex: none;
	color: var(--text-muted);
}

/* Auf schmalen Schirmen kürzt der Titel, statt den Knopf über die
   Fläche zu ziehen. */
.anmeldemarke-text {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.anmeldemarke-weg {
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	padding: 0;
	background: none;
	border: 0;
	border-left: 1px solid var(--border);
	color: var(--text-muted);
	cursor: pointer;
}

.anmeldemarke-weg:hover {
	background: var(--surface-2);
	color: var(--text);
}

/* Ohne JavaScript: der Dialog ist ein Abschnitt ---------------------------
   `<dialog>` ohne `open` ist ausgeblendet und absolut gesetzt — beides
   gilt nur für den Dialogfall. Läuft kein Skript, steht das Formular
   offen am Seitenende; öffnen, schliessen, minimieren und das
   Lesezeichen brauchen den Dialog und führen dann nirgendwohin.

   Die Regeln hingen früher als `<noscript><style>` am Snippet. Das ging
   bei der weichen Navigation schief: der DOMParser liest ohne Skripting,
   und für ihn ist der Inhalt eines `<noscript>` gewöhnliches Markup —
   das Stilblatt wurde beim Einsetzen wirksam und klappte das Formular
   mitten in einer Seite mit JavaScript auf (Befund B94). Die Klasse
   `kein-js` steht am <html> und wird vom Inline-Skript im Kopf entfernt
   (layout.php); nur wo wirklich kein Skript läuft, bleibt sie stehen. */

.kein-js .anmeldedialog {
	display: block;
	position: static;
	width: auto;
	max-width: 520px;
	max-height: none;
	margin: var(--raum-6) 0 0;
}

.kein-js .anmeldedialog .dialog-tasten,
.kein-js .anmeldedialog [data-anmeldung-schliessen],
.kein-js .anmeldedialog .auswahl-knopf,
.kein-js .anmeldemarke,
.kein-js .themenkopf [data-anmeldung-oeffnen] {
	display: none;
}