/* Buchwichtel: Grundgestaltung.
   Bewusst schlicht und ohne Rahmenwerk: rund 20 Formularseiten ohne Echtzeitbedarf
   (ADR 3) brauchen kein Baukastensystem. */

:root {
    --tanne: #1f4436;
    --tanne-hell: #2f6350;
    --papier: #fbf9f5;
    --tinte: #23201c;
    --grau: #6d675f;
    --linie: #e0dad0;
    --rot: #8c2f22;
    --rot-hell: #a63a2b;
    --rot-feld: #f8ebe8;
    --gruen-feld: #eaf3ee;
    --gelb-feld: #fdf4e3;
    --gelb-linie: #d9a441;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.6;
    color: var(--tinte);
    background: var(--papier);
}

/* --- Rahmen ------------------------------------------------------------- */

.kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--tanne);
    padding: 0.9rem 1.5rem;
}

.abmelden {
    margin: 0;
}

/* Auf schmalen Bildschirmen umbrechen statt die Kopfzeile zu sprengen. */
.hauptnavigation {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.1rem;
    margin-right: auto;
}

.hauptnavigation a {
    color: var(--papier);
    text-decoration: none;
    font-size: 0.95rem;
}

.hauptnavigation a:hover,
.hauptnavigation a:focus {
    text-decoration: underline;
}

.knopf-schlicht {
    padding: 0.25rem 0.7rem;
    border: 1px solid rgba(251, 249, 245, 0.45);
    border-radius: 4px;
    background: transparent;
    color: var(--papier);
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
}

.knopf-schlicht:hover {
    background: rgba(251, 249, 245, 0.12);
}

.marke {
    color: var(--papier);
    font-weight: 600;
    font-size: 1.15rem;
    letter-spacing: 0.02em;
    text-decoration: none;
}

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 3rem;
}

/*
  Der Rueckweg jeder Seite unterhalb der Einstiege (US-66, R-129). Er steht zwischen
  Kopfzeile und Inhalt und nimmt deshalb dieselbe Spaltenbreite wie `main`; sonst begaenne
  er am Fensterrand und der Inhalt darunter eingerueckt. Etwas kleiner als der Fliesstext:
  Er gehoert zum Rahmen der Seite, nicht zu ihrer Aussage.
*/
.rueckweg {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem 0;
    font-size: 0.9rem;
}

/*
  US-78/R-156: Datenschutzerklaerung und Kleingedrucktes auf jeder Seite. Dieselbe
  Spaltenbreite wie `main`, damit die Trennlinie unter dem Inhalt endet und nicht am
  Fensterrand.
*/
.fusszeile {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-top: 1px solid var(--linie);
    color: var(--grau);
    font-size: 0.85rem;
}

.fusszeile nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.5rem;
}

.fusszeile a {
    color: var(--grau);
}

/* --- Text --------------------------------------------------------------- */

h1 {
    margin: 0 0 0.25rem;
    font-size: 1.9rem;
    color: var(--tanne);
}

h2 {
    margin: 2rem 0 0.75rem;
    font-size: 1.15rem;
    color: var(--tanne);
}

.unterzeile {
    margin: 0 0 2rem;
    color: var(--grau);
}

.anzahl {
    color: var(--grau);
    font-weight: 400;
}

.hinweis {
    color: var(--grau);
    font-size: 0.9rem;
}

.leer {
    color: var(--grau);
    font-style: italic;
}

/* --- Meldungen ---------------------------------------------------------- */

/* US-79: Die Meldungen trugen links einen kraeftigen Balken in der Farbe ihrer Art. Er
   wiederholte, was die Flaeche schon sagt, und liess die Kaesten fremd aussehen. Die
   Hintergrundfarbe bleibt und mit ihr der Unterschied zwischen Erfolg, Fehler und Warnung;
   getragen wird er ohnehin nicht von der Farbe allein, sondern vom Text und von
   role="alert" beziehungsweise role="status". */
.meldung {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    border-radius: 6px;
}

.meldung h2 {
    margin-top: 0;
}

.meldung.erfolg {
    background: var(--gruen-feld);
}

.meldung.fehler {
    background: var(--rot-feld);
}

.meldung.fehler h2 {
    color: var(--rot);
}

.warnung {
    background: var(--gelb-feld);
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
}

/* `R-161`, US-88: die aufklappbaren Fälle im Rückstandskasten. Der Kasten nennt seit dieser
   Story nicht mehr nur die Zahl, sondern auf Verlangen auch, wen sie betrifft. `details` und
   `summary` können das ohne Skript (ADR 51, ADR 67); ohne eigene Regel steht die Zeile aber
   in Textfarbe da und sieht nicht aus, als liesse sie sich anklicken. */
.rueckstand {
    margin: 0.4rem 0;
}

/* `R-163`, US-89: dieselbe Form auf der Ausfallseite für die abgehakten Fälle. Sie stehen
   unter den offenen, zugeklappt und in der Farbe einer Nebensache: Zu tun ist an ihnen
   nichts mehr, nachzulesen schon. */
.erledigte {
    margin: 1.5rem 0 0;
    color: var(--grau);
}

.rueckstand summary,
.erledigte summary {
    cursor: pointer;
}

.faelle {
    margin: 0.5rem 0 0.9rem;
    padding-left: 1.25rem;
}

/* `R-163`, US-89: das Formular hinter einem abgehakten Ausfall, mit dem einen Knopf, der
   ihn zurückholt. Ohne diese Regel setzte der Browser das Formular als Block, und der Knopf
   rutschte auf eine eigene Zeile unter den Text; in einer Liste, in der jeder Fall eine
   Zeile ist, sähe das nach einem zweiten Punkt aus. */
.faelle .zurueck {
    display: inline;
    margin-left: 0.4rem;
}

/* --- Listen und Tabellen ------------------------------------------------ */


.liste {
    margin: 0;
    padding-left: 1.25rem;
}

.tabelle {
    width: 100%;
    border-collapse: collapse;
}

.tabelle th,
.tabelle td {
    text-align: left;
    padding: 0.55rem 0.5rem;
    border-bottom: 1px solid var(--linie);
    vertical-align: top;
}

.tabelle th {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--grau);
}

/* US-67: In „Meine Runden" ist die Überschrift der Spalte, nach der geordnet wird, zugleich
   der Umschalter der Richtung. Sie soll eine Überschrift bleiben: In Standardblau und
   Versalien mitten in einer grauen Kopfzeile zieht sie den Blick auf die Sortierung statt auf
   die Liste. Dass sie anklickbar ist, sagen die Unterstreichung und der Doppelpfeil daneben.
   `nowrap` hält den Pfeil in der Zeile des Wortes; ohne ihn steht er allein darunter und
   sieht aus wie ein Zeichen ohne Bezug. */
.tabelle th a {
    color: inherit;
    white-space: nowrap;
}

.tabelle th a:hover,
.tabelle th a:focus {
    color: var(--tanne);
}

/* `R-131`, ADR 83: Der Kasten um jede Tabelle. Er sagt nichts zu als seitliches Blättern,
   und zwar für alle: Auf einem 375 Pixel breiten Fenster stehen 327 Pixel zur Verfügung, und
   schon die Kopfzeile oben legt eine Liste ab drei Spalten darüber, weil sie Versalien mit
   Sperrung setzt und „ANMELDESCHLUSS" nicht umbricht. Ohne den Kasten schiebt die Tabelle die
   ganze Seite zur Seite, samt Kopfzeile. Der Fokusring ist der des Browsers; eine eigene Farbe
   brauchte es dafür nicht. Wachhund: TabellenkastenTest. */
.tabellenkasten {
    overflow-x: auto;
}

/* `R-162`, US-88: der Stand jeder Sendungszeile auch als Farbe. Bis dahin setzte die Vorlage
   auf überfällige Zeilen die Klasse `ueberfaellig`, die es im Stilblatt nie gab; die
   Hervorhebung, die `R-108` verlangt, war in keinem Browser zu sehen (`F-42`). Wachhund:
   VersandstandfarbenTest.

   Grün, gelb, rot und für den vierten Stand nichts: Wo die Versandfrist noch läuft, ist eine
   fehlende Meldung der Normalzustand einer Runde, in der noch gepackt wird. Färbte man auch
   sie, wäre in der Woche vor dem Fest die ganze Liste bunt und keine Farbe sagte mehr etwas.

   Die Farbe ist nie die einzige Auskunft: Was der Stand ist, steht als Wort in seiner
   Spalte. */
.tabelle tbody tr.angekommen {
    background: var(--gruen-feld);
}

.tabelle tbody tr.unterwegs {
    background: var(--gelb-feld);
}

.tabelle tbody tr.auffaellig {
    background: var(--rot-feld);
}

/* Die Tage unter dem Wort. Zurückgenommen, weil sie den Stand erläutern und nicht mit ihm um
   den Blick streiten. Eine eigene Zeile und nicht dieselbe: In der schmalen Standspalte
   brach der Satz ohnehin um, und ein trennender Mittelpunkt landete dann am Zeilenanfang,
   wo er wie ein Aufzählungszeichen aussah. Beim Durchsehen aufgefallen. */
.tage {
    display: block;
    color: var(--grau);
    white-space: nowrap;
}

/* US-33, ADR 83: die Bauform der Kreuztabelle
 in der Zuverlässigkeitsübersicht, eine Spalte
   je Runde. Sie hing bis ADR 83 am Kasten und gehört an die Tabelle, denn auf die übrigen
   Listen passt sie nicht; `th:first-child` liefe dort ohnehin ins Leere, weil ihre erste
   Zelle ein `td` ist.

   Der Name steht als Zeilenkopf da, weil er die Zeile benennt; die Regel für `th` oben
   meint aber Spaltenüberschriften und setzt Versalien, Grau und Kleinschrift. Ein Name in
   Großbuchstaben und in der Farbe einer Beschriftung liest sich nicht wie eine Person.
   Beim seitlichen Blättern bleibt er stehen, sonst weiß beim vierten Jahr niemand mehr,
   wessen Zeile er liest. */
.kreuztabelle th:first-child {
    position: sticky;
    left: 0;
    background: var(--papier);
}

.kreuztabelle tbody th {
    text-transform: none;
    letter-spacing: normal;
    font-size: 1rem;
    color: var(--tinte);
    white-space: nowrap;
}

/* Jedes Feld auf einer Zeile. Umbrechend wurden aus fünf Personen fünf Blöcke von je vier
   Zeilen Höhe, und die Zusammenschau, um die es geht, passte nicht mehr auf den Bildschirm.
   Der Preis ist das seitliche Blättern ab dem dritten Jahr, und den trägt der Kasten. */
.kreuztabelle td {
    white-space: nowrap;
}

/* US-68, `R-130`: Der Name bleibt eine Zeile für sich, damit die Notiz unter ihm steht und
   nicht neben ihm. Sie gehört in die Personenspalte, weil die Kreuztabelle bei mehreren
   Jahren seitwärts blättert; als Spalte am rechten Rand wäre sie genau dann aus dem Blick,
   wenn es etwas zu vergleichen gibt. */
.kreuztabelle .personenname {
    display: block;
}

/* Die Notiz soll aussehen wie etwas, das der Organisator selbst geschrieben hat, und nicht
   wie ein Stand, den die Anwendung errechnet hat (`R-36`, `R-126`): kleiner als der Name,
   in Fließschrift, und als Eingabefeld erkennbar. Feste Breite und nicht 100 Prozent, weil
   die Zellen der Kreuztabelle nicht umbrechen und sich sonst am eigenen Feld aufzögen. */
.notizfeld {
    display: block;
    width: 14rem;
    margin-top: 0.3rem;
    padding: 0.35rem 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: 400;
    background: #fff;
}

.notizfeld:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

/* `R-126`: Wo es nichts zu liefern gab, steht das ausdrücklich da, und es soll sich vom
   Rest auch unterscheiden lassen, ohne jedes Feld zu lesen. In `--grau` und kursiv, nicht
   in einer Signalfarbe: Es ist kein Hinweis, sondern die Abwesenheit eines Vorgangs. */
.ohne-pflicht {
    color: var(--grau);
    font-style: italic;
}

/* US-76, `R-151`: der Grund eines Ausstiegs, unter dem Stand in derselben Zelle. Kleiner
   und in `--grau`, weil er den Stand erklärt und nicht mit ihm um die Aufmerksamkeit ringt.
   Nicht kursiv, obwohl die Zelle es vorgibt (`.ohne-pflicht`): Was ein Mensch geschrieben
   hat, soll sich von dem unterscheiden, was die Anwendung errechnet.

   Feste Höchstbreite und ein zurückgenommenes `nowrap`, dieselbe Antwort wie beim Notizfeld
   daneben: Die Zellen der Kreuztabelle brechen absichtlich nicht um, und ein Grund von drei
   Sätzen zöge die Spalte sonst über den halben Bildschirm. Beim Durchsehen aufgefallen, im
   Unit-Test nicht sichtbar. */
.ausfallgrund {
    display: block;
    max-width: 14rem;
    margin-top: 0.2rem;
    color: var(--grau);
    font-size: 0.85rem;
    font-style: normal;
    white-space: normal;
    overflow-wrap: break-word;
}

/* US-77, `R-150`: wann gemeldet wurde, unter dem Stand in derselben Zelle. Dieselbe Bauform
   wie beim Ausfallgrund darüber, und aus denselben Gründen: Die Zelle bricht sonst nicht um,
   und eine Angabe, die neben den Stand rutscht, schiebt die nächste Spalte aus dem Bild.

   Kursiv, anders als der Ausfallgrund: Den hat ein Mensch geschrieben, diese Angabe hat die
   Anwendung gemessen, und die beiden sollen sich unterscheiden lassen, ohne dass man sie
   liest. Ohne Signalfarbe und ohne Rahmen (`R-36`, `R-126`): Eine verstrichene Frist ist eine
   Tatsache und keine Warnung. */
.fristtreue {
    display: block;
    max-width: 14rem;
    margin-top: 0.2rem;
    color: var(--grau);
    font-size: 0.85rem;
    font-style: italic;
    white-space: normal;
    overflow-wrap: break-word;
}

/* US-42, `R-103`: was einer Teilnahme zur Freigabe fehlt, benannt statt nur als Strich.
   Ohne Aufzählungszeichen und ohne Einrückung, weil die Zelle schmal ist. In Textfarbe,
   nicht in `--grau`: Diese Zeilen sind der Grund, aus dem jemand noch nicht mitlost. */
.fehlend {
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

/* US-82: Die zwei Standwörter der Teilnahmeübersicht, „freigegeben" und „bereit". Beide
   stehen über ihrem Knopf und nicht daneben; als Inline-Element rutschte „bereit" sonst
   neben „Freigeben" und läse sich wie dessen Beschriftung. */
.stand {
    display: block;
}

/* Vier Beschreibungslisten mit demselben Aufbau: je ein `div` um Begriff und Wert, damit
   das Paar auch beim Umbruch zusammenbleibt. Ohne Regel rückt der Browser jeden Wert unter
   seinen Begriff ein, und aus drei Angaben werden sechs Zeilen. Ein erweiterter Selektor
   statt einer zweiten Regel: Es ist derselbe Aufbau, nur an einer anderen Stelle (ADR 78).
   `.angaben` kam mit US-14 dazu: die Vorlieben, gelesen statt geschrieben. */
.angaben div,
.kontodaten div,
.regeldaten div,
.rundendaten div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 0.75rem;
}

.angaben dt,
.kontodaten dt,
.regeldaten dt,
.rundendaten dt {
    min-width: 10rem;
    font-weight: 600;
}

.angaben dd,
.kontodaten dd,
.regeldaten dd,
.rundendaten dd {
    margin: 0;
}

/* US-79: Der Kasten mit den Terminen der laufenden Runde trug als einziges sichtbares
   Merkmal den farbigen Balken der Meldungen. Ohne ihn stünden die fünf Angaben frei auf der
   Seite. Er bekommt deshalb denselben zarten Rahmen wie die Angabenliste der Einladung. */
.regeldatenkasten {
    border: 1px solid var(--linie);
}

/* US-78: die Beschreibungslisten der Datenschutzerklaerung. Anders als die vier oben steht
   unter jedem Begriff ein ganzer Satz und kein Wert; nebeneinander bliebe dafuer eine
   Spalte von wenigen Zentimetern. Der Begriff steht deshalb ueber seinem Text. */
.erlaeuterungen div + div {
    margin-top: 0.9rem;
}

.erlaeuterungen dt {
    font-weight: 600;
}

.erlaeuterungen dd {
    margin: 0;
}

.kontodaten {
    margin: 1rem 0 0;
}

/* Die Termine der Regelseite stehen im grünen Block und brauchen keinen eigenen Abstand. */
.regeldaten {
    margin: 0;
}

/* US-64: Budget und Termine stehen in einer Karte, die ihren Abstand schon mitbringt. */
.rundendaten {
    margin: 0;
}

.marke-fehlt {
    display: inline-block;
    margin: 0 0.35rem 0.25rem 0;
    padding: 0.1rem 0.5rem;
    background: var(--rot-feld);
    color: var(--rot);
    border-radius: 999px;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* R-18: Unvertraeglichkeiten. Dieselbe Form wie .marke-fehlt, aber weder kleiner noch
   blasser als der Fliesstext: Eine uebersehene Allergie ist ein Gesundheitsrisiko, und
   die Regel verlangt die Angaben hervorgehoben.

   Papier als Flaeche und eine kraeftige Linie, damit derselbe Chip auf beiden Gruenden
   traegt: im gelben Warnblock (wichtelkind.html) hebt ihn die Flaeche ab, auf Papier
   (person.html) die Linie. Bis zum 09.08.2026 trugen diese Chips `marke`, die Klasse der
   Wortmarke, und standen damit in Papierfarbe auf hellem Grund. */
.marke-allergen {
    display: inline-block;
    margin: 0 0.35rem 0.25rem 0;
    padding: 0.1rem 0.6rem;
    background: var(--papier);
    color: var(--tinte);
    border: 1px solid var(--gelb-linie);
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: nowrap;
}

/* US-53: die laufende Runde in der Uebersicht. Dieselbe Form wie .marke-fehlt, aber in
   Gruen: das eine weist auf eine Luecke hin, das andere nur darauf, welche Runde gerade
   dran ist. */
.abzeichen {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.5rem;
    background: var(--gruen-feld);
    color: var(--tanne);
    border-radius: 999px;
    font-size: 0.82rem;
    white-space: nowrap;
}

/* --- Aktion ------------------------------------------------------------- */

.aktion {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--linie);
}

.knopf {
    padding: 0.65rem 1.4rem;
    border: none;
    border-radius: 5px;
    background: var(--tanne);
    color: var(--papier);
    font-size: 1rem;
    font-family: inherit;
    cursor: pointer;
}

.knopf:hover {
    background: var(--tanne-hell);
}

/* US-79: Ein Verweis, der aussieht wie ein Knopf. Gedacht für den einen Weg, den eine
   Seite empfiehlt, wenn dahinter kein Formular steckt, sondern nur die nächste Seite.
   Ohne diese Regel bliebe der Verweis blau und unterstrichen auf grünem Grund. */
a.knopf {
    display: inline-block;
    color: var(--papier);
    text-decoration: none;
}

/* Für Handlungen, die niemand zurückholen kann. Steht nach `.knopf`, weil beide gleich
   stark binden und sonst das Tannengrün gewinnt. Die Papierfarbe der Schrift bleibt und
   trägt auf beiden Rottönen (7,8:1 ruhend, 6,1:1 unter dem Zeiger). */
.knopf-gefahr {
    background: var(--rot);
}

.knopf-gefahr:hover {
    background: var(--rot-hell);
}


/* US-80: Der Kasten vor einer Entscheidung, die nichts zurücknimmt. Er trägt die
   Warnfarbe der Anwendung und die normale Schriftfarbe: Bis zum Lektorat stand der Satz
   „Das lässt sich nicht rückgängig machen" in gedämpftem Grau, weil der Kasten die Klasse
   `hinweis` mitbrachte, also die Farbe der Nebensache. Rötlich statt gelb, weil Gelb in
   dieser Anwendung dem Hinweis gehört und hier etwas gelöscht wird. */
.warnkasten {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--rot);
    border-radius: 6px;
    background: var(--rot-feld);
    color: var(--tinte);
}

.warnkasten p {
    margin: 0.4rem 0;
}

.warnkasten p:first-child {
    margin-top: 0;
}

.warnkasten p:last-child {
    margin-bottom: 0;
}
/* Das Häkchen vor einer Löschung. Kästchen und Satz stehen nebeneinander, und der Satz
   läuft bei schmalem Fenster nicht unter das Kästchen, sondern bleibt eingerückt.

   Achtung bei einem Verweis im Satz: Jedes Kind eines Flex-Kastens wird eine eigene Spalte,
   und ein Satz mit einem `<a>` darin zerfällt in drei. Er gehört dann in ein `<span>`,
   siehe `registrieren.html`. */
.ankreuzfeld {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}

/* US-80: Ankreuzfelder in einer Liste stehen enger beieinander als ein einzelnes vor
   einem Knopf. Sechs Allergene mit dem vollen Abstand dazwischen fuellten den halben
   Bildschirm und sahen aus wie sechs Fragen statt einer. */
fieldset .ankreuzfeld {
    margin-bottom: 0.35rem;
}

.gesperrt {
    margin: 0;
    padding: 0.85rem 1.1rem;
    background: #f2efe9;
    border-radius: 5px;
    color: var(--grau);
}

/* --- Ausschlusspaare ---------------------------------------------------- */

.pfeil {
    margin: 0 0.35rem;
    color: var(--grau);
}

.knopf-schlicht.dunkel {
    border-color: var(--linie);
    color: var(--grau);
}

.knopf-schlicht.dunkel:hover {
    background: var(--rot-feld);
    border-color: var(--rot);
    color: var(--rot);
}

.paarformular .feld {
    margin-bottom: 1rem;
}

.paarformular label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.paarformular select,
.paarformular input {
    width: 100%;
    max-width: 24rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.paarformular select:focus,
.paarformular input:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

.freiwillig {
    font-weight: 400;
    color: var(--grau);
}

.tabelle td a + a {
    margin-left: 0.9rem;
}

/* --- Gruppen und Runden ------------------------------------------------- */

.karte {
    margin: 1.25rem 0;
    padding: 1.1rem 1.3rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 7px;
}

.karte h2 {
    margin-top: 0;
}

/* US-80: Eine Überschrift, die eine Nebensache benennt. Der Widerrufskasten trug dieselbe
   Größe wie die Abschnitte der Seite und sah dadurch aus wie ein Angebot; er ist aber die
   Ausnahme, die die wenigsten brauchen. Kleiner gesetzt, nicht versteckt: Wer widerrufen
   will, findet ihn, und die Gliederung bleibt für Vorleseprogramme, wie sie war. */
h2.dezent {
    font-size: 1.05rem;
}

.beschreibung {
    margin: 0 0 0.5rem;
}

.kennzahlen {
    margin: 0 0 0.75rem;
    color: var(--grau);
    font-size: 0.9rem;
}

/* `.ausfall` ist derselbe Aufklappblock, steht aber in einer Tabellenzelle statt in einer
   Karte (`teilnahmen.html`). Ohne die Regel war „Ausgefallen?" ein schwarzer Satz ohne
   Zeiger: aufklappbar, aber nicht als aufklappbar zu erkennen. */
.karte details,
.ausfall,
.umbau {
    margin: 0.75rem 0;
}

/* US-76, `R-151`: das Feld für den Grund im Aufklapper. Ohne eigene Regel bekommt es die
   Standardbreite des Browsers, rund zwanzig Zeichen, und schon der Platzhalter passt nicht
   hinein; wer einen Satz schreiben soll, muss ihn sehen können. Die Höchstbreite hält es
   davon ab, die Spalte der Teilnahmentabelle aufzuziehen. Beim Durchsehen aufgefallen. */
.ausfall input[type="text"] {
    display: block;
    width: 100%;
    max-width: 22rem;
    margin: 0.4rem 0 0.7rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}

.ausfall input[type="text"]:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

.karte summary,
.ausfall summary,
.umbau summary {
    cursor: pointer;
    color: var(--tanne-hell);
    font-size: 0.9rem;
}

/*
  US-91: der Aufklapper zum Tausch einer Zuordnung. Er steht wie `.ausfall` in einer
  Tabellenzelle, aber in einer eigenen Zeile über alle sechs Spalten; in der letzten Spalte
  war das Formular rund hundert Pixel breit, und jeder Satz brach über fünf Zeilen um.
  Beim Durchsehen aufgefallen, kein Test sah es.

  Das `:not(.ankreuzfeld)` ist tragend: Ohne es gewänne `display: block` gegen die Flexbox
  des Ankreuzfelds, und Kästchen und Satz stünden untereinander statt nebeneinander (F-17).
*/
.umbau form > label:not(.ankreuzfeld),
.umbau form > input,
.umbau form > button {
    display: block;
}

.umbau input[type="text"] {
    width: 100%;
    max-width: 28rem;
    margin: 0.4rem 0 0.9rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 0.95rem;
    font-family: inherit;
    background: #fff;
}

.umbau input[type="text"]:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

.karte details .paarformular {
    margin-top: 0.9rem;
    padding-left: 0.9rem;
    border-left: 2px solid var(--linie);
}

/*
  F-17: Ein Formular in einer Karte hatte keine Regel. Beschriftung, Eingabefeld, Kästchen
  und Knopf sind von Haus aus Zeilenelemente und standen deshalb nebeneinander; bei schmalem
  Fenster schob sich der Knopf über den Text daneben. Bestand aus `US-37`, aufgefallen erst,
  als in `ausfaelle.html` darüber der Grund des Ausfalls hinzukam.

  Die Regel gilt der Karte und nicht dieser einen Seite: Jedes Formular, das mehr trägt als
  einen Knopf, braucht dasselbe. Direkte Kinder, damit sie nicht in ein `.paarformular` oder
  ein `.ankreuzfeld` hineinreicht, die ihre eigene Bauform mitbringen.

  Die Klasse `.formular` traegt dieselben Regeln fuer Formulare, die nicht in einer Karte
  stehen (F-30). Sie greift auch durch Absaetze hindurch: Auf der Versandseite steht jedes
  Feld samt Beschriftung in einem eigenen `<p>`, und ein Kind-Kombinator liesse genau die
  Seite zerfallen, wegen der es die Klasse gibt.
*/
.karte form > label,
.karte form > input,
.karte form > button,
.formular label,
.formular input,
.formular button {
    display: block;
}

.karte form > label,
.formular label {
    margin-top: 0.9rem;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* F-43: Jeder Feldtyp, der Text entgegennimmt, und nicht nur `text`. Die Regel stand hier
   allein auf `input[type="text"]` und traf damit weder ein Passwort- noch ein E-Mail-Feld;
   auf der Seite mit den Zugangsdaten standen drei Passwortfelder so da, wie der Browser sie
   von sich aus zeichnet. Aufgezaehlt und nicht ueber `:not(...)` ausgeschlossen: Eine
   Negativliste hebt die Spezifitaet, und danach gewaenne diese Regel gegen die
   Sonderregeln einzelner Seiten. `EingabefelderGestaltetTest` haelt die Liste gegen die
   Feldtypen, die in den Vorlagen wirklich vorkommen. */
.karte form > input[type="text"],
.karte form > input[type="password"],
.karte form > input[type="email"],
.karte form > input[type="number"],
.karte form > input[type="date"],
.karte form > input[type="url"],
.formular input[type="text"],
.formular input[type="password"],
.formular input[type="email"],
.formular input[type="number"],
.formular input[type="date"],
.formular input[type="url"] {
    width: 100%;
    max-width: 24rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.karte form > input[type="text"]:focus,
.karte form > input[type="password"]:focus,
.karte form > input[type="email"]:focus,
.karte form > input[type="number"]:focus,
.karte form > input[type="date"]:focus,
.karte form > input[type="url"]:focus,
.formular input[type="text"]:focus,
.formular input[type="password"]:focus,
.formular input[type="email"]:focus,
.formular input[type="number"]:focus,
.formular input[type="date"]:focus,
.formular input[type="url"]:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

/* Das Kästchen bleibt neben seinem Satz: `.ankreuzfeld` setzt beide in eine Zeile, und
   `display: block` am Label darüber nähme ihr genau das. */
.karte form > label.ankreuzfeld,
.formular label.ankreuzfeld {
    display: flex;
    margin-top: 1.1rem;
    font-weight: 400;
}

.karte form > button,
.formular button {
    margin-top: 1.1rem;
}

/*
  US-89: das zweite Formular in einer Ausfallkarte, für Notiz und Erledigt-Vermerk
  (`R-163`). Beim Durchsehen aufgefallen, kein Test sah es: Ohne diese Linie floss es in
  das Formular zum Verbinden hinein, und aus Feld, Knopf, Feld, Knopf wurde auf dem
  Bildschirm ein einziges langes Formular. Wer die Absprache eingetragen hätte und dann
  auf „Speichern" ginge, verlöre sie.

  Der Geschwisterselektor ist tragend und keine Vorsicht: Steht kein Formular davor, weil
  sich hier nichts verbinden lässt (`R-47`), trennt die Linie nichts und hinge frei unter
  der Kette. Auch das war erst auf dem Bildschirm zu sehen.
*/
.karte form + form.vermerk {
    margin-top: 1.6rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--linie);
}

/*
  Die offene Kette auf der Ausfallseite: Vorwichtel, Ausgefallener, Nachbeschenkter in ihrer
  Richtung. Sie bricht um, statt die Karte aufzuziehen; auf einem schmalen Fenster stehen die
  drei Namen dann untereinander und behalten ihre Reihenfolge.
*/
.kette {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.kette > span {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem 0.6rem;
}

.verweise {
    margin: 0.5rem 0 0;
}

/*
  US-84: Der letzte Weg im eigenen Bereich, die Kontoloeschung. Sie steht in derselben
  schlichten Liste wie die uebrigen und wird nur abgesetzt, damit sie nicht zwischen
  Lieferadresse und Zugangsdaten mitrutscht. Gewarnt wird auf der Seite selbst; ein roter
  Verweis waere eine Warnung vor dem Lesen.
*/
.verweise.letzter-weg {
    margin-top: 2.5rem;
}

/* --- Mein Bereich ------------------------------------------------------- */

/*
  US-96: Der eigene Bereich zeigt seit dieser Story den Steckbrief und daneben die Wege
  (R-166). Auf schmalen Bildschirmen bleibt es bei einer Spalte, und die Wege stehen oben,
  weil sie im Quelltext zuerst kommen: Wer den Bereich oeffnet, um irgendwohin zu
  gelangen, soll dafuer nicht am eigenen Steckbrief vorbeiscrollen.
*/
.mein-bereich {
    display: grid;
    gap: 1.5rem;
}

.bereich-wege {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.bereich-wege .verweise {
    margin: 0;
}

/* Der Abstand zwischen Wegen und Angaben steht im `gap` und nicht zusaetzlich im ersten
   Element darin: `h2` bringt 2rem von oben mit, und nebeneinander begaennen die beiden
   Spalten dann auf verschiedenen Hoehen. Gemeint ist nur der erste Pfad nach unten, und
   genau den trifft `:first-child`. */
.bereich-angaben :first-child {
    margin-top: 0;
}

/* Hier steht der Wert UNTER seinem Begriff und nicht daneben, anders als auf den Seiten,
   von denen die Fragmente kommen. Der Grund ist die schmalere Spalte: Von zehn Angaben
   passt die Haelfte in eine Zeile und die andere nicht, und eine Liste, die halb umbricht,
   liest sich wie zwei Listen. */
.bereich-angaben .angaben div {
    display: block;
    margin-bottom: 0.5rem;
}

/* Der Stand einer Angabe neben ihrem Verweis, in der Farbe der Nebensache. Die fehlende
   Angabe traegt daneben `.marke-fehlt` und faellt damit auf; dass etwas da ist, ist die
   Regel und braucht kein Signal. */
.stand-wort {
    color: var(--grau);
    font-size: 0.9rem;
}

/* Der Knopf am leeren Steckbrief. Ohne die Trennlinie von `.aktion`: Er schliesst hier
   nichts ab, sondern faengt an. */
.bereich-aufruf {
    margin: 1.25rem 0 0;
}

/*
  Ab dieser Breite stehen die Wege neben den Angaben und nicht ueber ihnen. Die Marke
  liegt bei 40rem und nicht hoeher: `main` ist auf 46rem begrenzt, darueber waechst nichts
  mehr, und zwei Spalten in 40rem lassen der schmalen noch genug fuer "noch nicht
  hinterlegt" in einer Zeile.

  Die Spalten sind ueber `grid-column` gesetzt und nicht ueber die Quelltextreihenfolge:
  Vorgelesen wird weiterhin zuerst die Wegeliste, und das ist auch dort die richtige
  Reihenfolge.
*/
@media (min-width: 40rem) {
    /* `.mit-angaben` traegt nur der Bereich, in dem links auch etwas steht: Der
       Organisator hat keinen Steckbrief (R-26), und seine Wegeliste allein in der rechten
       Spalte liesse die halbe Seite leer. */
    .mein-bereich.mit-angaben {
        grid-template-columns: 1fr 12rem;
        gap: 2.5rem;
        align-items: start;
    }

    .mit-angaben .bereich-wege {
        grid-column: 2;
        grid-row: 1;
    }

    .mit-angaben .bereich-angaben {
        grid-column: 1;
        grid-row: 1;
    }
}

/*
  Die Wege einer Runde auf ihrer Verwaltungsseite (US-60, R-119). Neun Verweise
  nebeneinander brauchen einen Umbruch und Luft dazwischen; ohne beides kleben sie
  aneinander und lassen sich auf einem schmalen Fenster nicht treffen.
*/
.wegeleiste {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.4rem;
    margin: 1.25rem 0;
    padding: 0.9rem 1.3rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 7px;
}

/*
  US-94: Die zweite Adresse für den Notfall. Der Knopf, der sie wieder wegnimmt, steht in
  einem eigenen Formular unter dem, das sie einträgt. Ohne diese Zeile sitzen beide zwei
  Pixel voneinander entfernt, und der schlichte liest sich wie die zweite Zeile des grünen.
  Derselbe Fall wie in `.aktion form + form` darunter, nur an einer anderen Stelle.
*/
.notfalladresse form + form {
    margin-top: 1.5rem;
}

/*
  Stehen mehrere Handlungen untereinander (laufende Runde, Absage, Archivierung), braucht
  jede Luft: Ohne sie sitzt der naechste Knopf direkt unter dem vorigen Hinweis und wirkt,
  als gehoere er dazu.
*/
.aktion form + form {
    margin-top: 1.75rem;
}

.termine {
    margin: 1.5rem 0;
    padding: 1rem 1.2rem;
    border: 1px solid var(--linie);
    border-radius: 7px;
}

.termine legend {
    padding: 0 0.5rem;
    font-weight: 600;
    color: var(--tanne);
}

/* US-79: Als Liste stehen Begriff und Wert sonst untereinander, und zwei Angaben brauchen
   vier Zeilen. Nebeneinander sind es zwei. Gilt nur für die Liste, nicht für das Formular
   in `runde/anlegen.html`, das denselben Kasten benutzt. */
dl.termine {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.4rem 0.6rem;
}

dl.termine dd {
    margin: 0;
}

.feldhinweis {
    display: block;
    margin-top: 0.25rem;
    color: var(--grau);
    font-size: 0.82rem;
}

/* US-14: Freitextfelder, die eine ganze Zeile brauchen. Ein `textarea` ohne Regel ist so
   breit, wie sein `cols`-Standard vorgibt, nämlich rund 168 Pixel, und steht neben seiner
   Beschriftung. Bei 375 Pixeln bleibt daneben kaum Platz, und je länger die Beschriftung,
   desto schmaler wird das Feld: "Sammelleidenschaft und Hobbys" drückte es auf 157 Pixel.
   Für ein Feld, in das 500 Zeichen passen sollen, ist das keine Grundlage. Die Beschriftung
   rückt deshalb darüber und das Feld auf die volle Breite. Die Klasse trägt auch das
   Freitextfeld der Unverträglichkeiten: Zwei Bauformen auf derselben Seite wären auffälliger
   als beide Gruppen zusammen. */
.feldblock label {
    display: block;
    margin-bottom: 0.25rem;
}

/* F-31: Ein `textarea` und ein `select` erben die Schrift nicht, sie bringen die des
   Betriebssystems mit, und das ist bei Textfeldern eine Schreibmaschinenschrift. Auf den
   Steckbriefseiten stand jede eingetragene Vorliebe deshalb da wie Quelltext. Die Regel
   gilt allen Freitextfeldern der Anwendung und nicht nur denen, an denen es aufgefallen
   ist. */
textarea,
select {
    font-family: inherit;
    font-size: 1rem;
}

.feldblock textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/* US-80: Überschrift und der Wechsel in eine zweite Ansicht derselben Seite stehen in
   einer Zeile, der Wechsel rechts. Als eigene Zeile darunter stand er mitten im Leseweg
   und sah aus wie ein Satz, der seinen Absatz verloren hat. Umbruch erlaubt: Auf schmalen
   Bildschirmen rutscht der Verweis unter die Überschrift, statt sie zu quetschen. */
.seitenkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
}

.seitenkopf > .verweise {
    margin: 0;
}

/* --- Anmeldung ---------------------------------------------------------- */

.anmeldung {
    max-width: 22rem;
    margin: 4rem auto;
}

.anmeldung h1 {
    margin-bottom: 0;
}

.anmeldung .unterzeile {
    margin-bottom: 2rem;
}

.anmeldung label {
    display: block;
    margin: 1rem 0 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Das Häkchen fürs Kleingedruckte (US-74). Ohne diese Zeile gilt die Regel darüber: Das
   Kästchen stünde über seinem Satz statt daneben, und der Satz sähe aus wie die
   Beschriftung eines Eingabefeldes. */
.anmeldung label.ankreuzfeld {
    display: flex;
    margin: 1.4rem 0 0;
    font-size: 0.95rem;
    font-weight: 400;
}

/* Die Regel für die Eingabefelder darüber setzt `width: 100%`, und sie trifft auch das
   Kästchen: Es beansprucht dann ein Drittel der Zeile, gezeichnet wird davon nur ein
   kleines Quadrat, und der Satz daneben bricht viermal um. */
.anmeldung label.ankreuzfeld input {
    width: auto;
    padding: 0;
}

.anmeldung input {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.anmeldung input:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

.anmeldung .knopf {
    width: 100%;
    margin-top: 1.5rem;
}

.anmeldung .meldung {
    padding: 0.75rem 1rem;
    font-size: 0.92rem;
}

/* --- Notfallschluessel (US-44) ------------------------------------------ */

.schluesselkasten {
    margin: 2rem 0;
    padding: 1.25rem;
    border: 2px solid var(--tanne);
    border-radius: 6px;
    background: var(--papier);
}

.schluesselkasten h2 {
    margin-top: 0;
}

/* Der Schluessel wird von Hand abgeschrieben: gross, mit festem Zeichenabstand und
   Luft zwischen den Zeichen, damit sich beim Abtippen nichts verliest. */
.schluessel {
    margin: 1.25rem 0;
    padding: 1rem;
    border-radius: 4px;
    background: #fff;
    border: 1px dashed var(--linie);
    font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 1.35rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-align: center;
    /* Auf schmalen Bildschirmen umbrechen statt seitlich verschwinden. */
    overflow-wrap: anywhere;
}

/* --- Mein Wichtelkind (US-17) -------------------------------------------- */

.beschenkter-name {
    margin: 0.3rem 0 0;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--tanne);
}

/* Die Anschrift steht zum Abschreiben da - Zeilenumbrueche wie auf dem Paket. */
address {
    margin: 0.3rem 0 0;
    padding: 0.8rem 1rem;
    background: #fff;
    border: 1px solid var(--linie);
    border-radius: 7px;
    font-style: normal;
    line-height: 1.5;
}

/* --- Rundmail (US-61) ---------------------------------------------------- */

/* Die Teilnehmerliste ist zugleich das Empfaengerfeld: schmale Spalte fuer das
   Kaestchen, damit Name und Adresse dort stehen bleiben, wo sie vorher standen. */
.rundmail .tabelle th:first-child,
.rundmail .tabelle td:first-child {
    width: 3.5rem;
}

/* Kein `display` auf dieser Klasse: Ohne das Skript traegt sie `hidden`, und eine
   Anzeigeregel hier setzte sich darueber hinweg (ADR 74). `white-space` genuegt, damit
   Kaestchen und Beschriftung in einer Zeile bleiben. */
.alle-umschalten {
    white-space: nowrap;
}

.alle-umschalten label {
    margin-left: 0.3rem;
}

.rundmail h3 {
    margin: 1.4rem 0 0.2rem;
    font-size: 1.05rem;
}

.rundmail .feld {
    margin-bottom: 1rem;
}

.rundmail .feld label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.rundmail input[type="text"],
.rundmail textarea {
    width: 100%;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--linie);
    border-radius: 5px;
    font-size: 1rem;
    font-family: inherit;
    background: #fff;
}

.rundmail textarea {
    resize: vertical;
    line-height: 1.5;
}

.rundmail input[type="text"]:focus,
.rundmail textarea:focus {
    outline: 2px solid var(--tanne-hell);
    outline-offset: 1px;
}

/* --- Vorlagen fuer die Rundmail (US-62) ---------------------------------- */

/* Die Auswahl steht ueber der Teilnehmerliste, weil Laden die Seite neu laedt und
   angehakte Kaestchen dabei frei werden (ADR 75). Sie braucht Luft nach unten, sonst
   klebt sie an der Kopfzeile der Tabelle. */
.vorlagen {
    margin-bottom: 1.2rem;
}

/* Das Formular der Vorlagenseite traegt dieselbe Klasse wie das Versandformular und
   braucht deshalb keine eigenen Regeln: Was dort geschrieben wird, steht spaeter hier,
   und zwei verschieden breite Felder fuer denselben Betreff waeren ein Unterschied
   ohne Grund. */

/* US-90: die Zelle mit den beiden Wegen einer Vorlagenzeile. Das Formular um den
   Löschknopf ist von Haus aus ein Block und schöbe „Löschen" unter „Ändern"; hier stehen
   zwei gleichrangige Wege nebeneinander, und untereinander sähen sie aus wie eine Liste. */
.zeilenwege {
    display: flex;
    align-items: baseline;
    gap: 0.9rem;
}

/* US-90: der Weg aus dem Änderungsmodus heraus. Er steht neben dem Speichern-Knopf und
   ist bewusst kein zweiter Knopf: Abbrechen ändert nichts, und zwei gleich aussehende
   Knöpfe nebeneinander liessen offen, welcher der gemeinte ist. */
.abbrechen {
    margin-left: 1.1rem;
    font-size: 0.9rem;
}

/* --- Nur fuer Bildschirmleser -------------------------------------------- */

/* Für Text, der vorgelesen, aber nicht gezeigt werden soll: die `<caption>` einer Tabelle,
   über der bereits eine Überschrift steht. Wer die Tabelle sieht, weiß aus der Überschrift,
   worum es geht; wer sie sich vorlesen lässt, hört zuerst die Zeilen und dann erst irgendwann
   den Zusammenhang.
   `display: none` und `visibility: hidden` taugen dafür nicht, sie nehmen den Text auch dem
   Bildschirmleser. Der Ausschnitt bleibt im Dokument, hat aber keine Fläche mehr. */
.visuell-versteckt {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Beim Ausdrucken zaehlt nur der Schluessel selbst. */
@media print {
    .kopfzeile,
    .fusszeile,
    .rueckweg,
    .verweise,
    form {
        display: none;
    }
}