/* Camps — Verwaltung und öffentliches Anmeldeformular.
 *
 * ZWEI WELTEN IN EINEM STYLESHEET. Die Verwaltung sitzt im Rahmen des
 * Portals; das Formular steht allein auf einer Seite, die jemand ohne Konto
 * aufruft. Beide teilen sich portal.css — das Formular soll aussehen wie der
 * Verein und nicht wie ein Fremdkörper.
 */

/* ---------- Verwaltung ---------- */

.camp-zeile .card__header {
	gap: 0.6rem;
	flex-wrap: wrap;
}

.camp-zeile .card__title a {
	color: inherit;
	text-decoration: none;
}

.camp-zeile .card__title a:hover {
	color: var(--accent);
}

/* Die Adresse des Formulars. Sie wird herauskopiert und in ein Rundschreiben
   gesetzt — deshalb steht sie vollständig da und nicht abgeschnitten. */
.camp-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.6rem;
	padding: 0.4rem 0.6rem;
	background: var(--surface-2);
	border-radius: var(--radius);
	font-size: 0.85rem;
}

.camp-link__label {
	font-weight: 600;
	color: var(--text-muted);
}

.camp-link__adresse {
	flex: 1;
	min-width: 0;
	overflow-wrap: anywhere;
	font-size: 0.8rem;
}

/* Die Reiter im Camp. */
.reiter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem;
	margin: 1rem 0 1.25rem;
	border-bottom: 1px solid var(--border);
}

.reiter__punkt {
	border: none;
	background: none;
	padding: 0.55rem 0.9rem;
	font: inherit;
	font-size: 0.9rem;
	color: var(--text-muted);
	cursor: pointer;
	/* Der gewählte Reiter trägt einen Balken und nicht nur eine andere
	   Schriftfarbe: Zwischen fünf Wörtern findet das Auge eine Kante. */
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

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

.reiter__punkt.is-aktiv {
	color: var(--accent);
	border-bottom-color: var(--accent);
	font-weight: 640;
}

.chip--klick {
	cursor: pointer;
	font-family: "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.78rem;
}

.chip--klick:hover {
	border-color: var(--accent);
	color: var(--accent);
}

.chip__weg {
	border: none;
	background: none;
	color: var(--text-muted);
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 0 0 0 0.2rem;
}

.chip__weg:hover {
	color: var(--danger, #dc2626);
}

/* Die Vorschau einer Mail. Umbruchtreu, damit Absätze stehen bleiben —
   der Text wird später genau so verschickt. */
.camp-vorschau {
	margin: 0.5rem 0 0;
	padding: 0.6rem 0.75rem;
	background: var(--surface-2);
	border-radius: var(--radius);
	white-space: pre-wrap;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.5;
	overflow-x: auto;
}

.card--still {
	background: var(--surface-2);
}

.is-warn {
	color: var(--danger, #dc2626);
	font-weight: 600;
}

/* ---------- Das öffentliche Formular ---------- */

/* Es steht allein auf der Seite, ohne Navigation und ohne Kopfleiste. Deshalb
   eine eigene Bühne: mittig, begrenzt, mit Luft. */
body.oeffentlich {
	background: var(--bg);
}

.camp-seite {
	max-width: 46rem;
	margin: 0 auto;
	padding: 2rem 1rem 4rem;
}

.camp-seite__karte {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.5rem;
}

.camp__kopf {
	margin-bottom: 1.5rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--border);
}

.camp__wappen {
	height: 48px;
	width: auto;
	margin-bottom: 0.75rem;
}

.camp__art {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ehc-orange, #be3b0f);
}

.camp__titel {
	margin: 0.15rem 0 0.3rem;
	font-size: 1.6rem;
}

.camp__zeit {
	margin: 0;
	color: var(--text-muted);
}

.camp__text {
	margin: 0.9rem 0 0;
	white-space: pre-wrap;
	line-height: 1.6;
}

.camp-formular fieldset {
	border: none;
	padding: 0;
	margin: 0 0 1.75rem;
}

.camp-formular legend {
	padding: 0;
	margin-bottom: 0.75rem;
	font-size: 1.05rem;
	font-weight: 640;
}

/* Der Absendeknopf steht groß und allein: Er ist das Ende des Formulars, und
   wer ihn sucht, soll ihn nicht suchen müssen. */
.camp-formular__fuss {
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}

.camp-formular__fuss .btn {
	width: 100%;
}

.camp-danke h2 {
	margin-top: 0;
}

/* Die Auswahl eines Camps, wenn keines in der Adresse steht. */
.camp-karte {
	display: block;
	padding: 0.9rem 1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.camp-karte:hover {
	border-color: var(--accent);
}

.camp-karte__art {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--ehc-orange, #be3b0f);
}

.camp-karte__titel {
	font-weight: 640;
	font-size: 1.05rem;
}

.camp-karte__zeit {
	font-size: 0.85rem;
	color: var(--text-muted);
}

@media (max-width: 600px) {
	.camp-seite {
		padding: 1rem 0.75rem 3rem;
	}

	.camp-seite__karte {
		padding: 1rem;
	}
}

/* ---------- Eingrenzung der Teilnehmerliste ---------- */

/*
 * Die Leiste steht über der Liste und nicht in einem Klappfach.
 *
 * Wer den Ablaufplan verschickt, muss sehen können, wer ihn noch nicht hat.
 * Ist die Eingrenzung weggeklappt, sieht man auch nicht, dass gerade
 * eingegrenzt IST — und verschickt an vierzig statt an achtzig Leute.
 */
.filterleiste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.9rem;
}

.filterleiste__label {
	color: var(--text-muted);
	font-size: 0.88rem;
}

.input--sm {
	padding: 0.3rem 0.5rem;
	font-size: 0.85rem;
	width: auto;
}

/* Die Marken der erhaltenen Mails — mehrere je Zeile, deshalb umbrechend.
   Der Rechnungsstand steht genauso da und bekommt trotzdem eine eigene
   Klasse: Die beiden Spalten beantworten verschiedene Fragen, und wer die
   eine umgestaltet, soll die andere nicht mitnehmen. */
.mailmarken,
.rechnungsmarken {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

/* ---------- Kleinteile, die sonst nirgends stehen ---------- */

.section-title {
	margin: 1.75rem 0 0.75rem;
	font-size: 1rem;
	font-weight: 600;
}

.backlink {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
	color: var(--text-muted);
	font-size: 0.88rem;
	text-decoration: none;
}

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

/* Zwei Spalten für „Datenschutz: erteilt am …" — Begriff und Angabe. */
.kv-list {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.3rem 0.9rem;
	margin: 0 0 0.75rem;
	font-size: 0.9rem;
}

.kv {
	display: contents;
}

.kv dt {
	color: var(--text-muted);
}

.kv dd {
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * Eingebaute Formularfelder
 * ------------------------------------------------------------------ */

/* Je Abschnitt eine Überschrift: Eine Liste von fünfzehn Haken ohne
   Zwischenüberschrift findet niemand wieder. */
.feld-abschnitt {
	margin-top: 0.9rem;
}

.feld-abschnitt__kopf {
	display: block;
	font-size: 0.85rem;
	margin-bottom: 0.3rem;
}

/* Zwei Spalten, solange der Platz reicht. */
.feld-abschnitt__liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 0.1rem 1rem;
}

.feld-abschnitt__liste .checkbox {
	margin: 0;
	padding: 0.1rem 0;
}

/* Ein Feld, das bleiben muss, steht blasser da — aber lesbar, und mit dem
   Grund als Hinweis am Zeiger. Ein gesperrter Haken ohne Begründung ist eine
   Zumutung. */
.checkbox.is-fest {
	opacity: 0.7;
	cursor: help;
}

/* Der Hinweistext über dem öffentlichen Formular. Er kommt als HTML von der
   Erlaubnisliste des Dienstes — hier wird nur gesetzt, wie er aussieht. */
.camp-hinweis {
	border-left: 3px solid var(--accent);
	padding: 0.1rem 0 0.1rem 0.8rem;
	margin-bottom: 1.2rem;
}

.camp-hinweis > *:first-child {
	margin-top: 0;
}

.camp-hinweis > *:last-child {
	margin-bottom: 0;
}

.camp-hinweis ul,
.camp-hinweis ol {
	padding-left: 1.2rem;
	margin: 0.4rem 0;
}