/*
 * Das Aussehen des Archivs.
 *
 * Petrol wie die Ausstellungen-App (#1F6F72 hell / #5FC0BF dunkel), damit App
 * und Archiv erkennbar dasselbe Haus sind. Hell und dunkel folgen dem System —
 * hier steht kein alter WebView davor, sondern ein Browser am großen
 * Bildschirm, also darf `prefers-color-scheme` entscheiden.
 *
 * Der Bildschirm gehört den Bildern: Flächen ruhig, Rahmen dünn, Schrift
 * dunkelgrau statt schwarz. Ein Archiv ist kein Schaufenster.
 */

:root {
  --ton: #1F6F72;
  --ton-leise: #e3f0f0;
  --grund: #fbfaf8;
  --papier: #ffffff;
  --schrift: #23272a;
  --leise: #6d7478;
  --linie: #e2e0dc;
  --schatten: 0 1px 2px rgba(0, 0, 0, .06);
  --warnung: #9B3B2E;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ton: #5FC0BF;
    --ton-leise: #1c2b2c;
    --grund: #14171a;
    --papier: #1b1f22;
    --schrift: #e6e6e3;
    --leise: #969b9e;
    --linie: #2b3033;
    --warnung: #E0806E;
    --schatten: none;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--schrift);
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--ton); text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.6rem; margin: 0 0 .2em; font-weight: 650; }
h2 { font-size: 1.15rem; margin: 2rem 0 .6rem; font-weight: 600; }
main { max-width: 1180px; margin: 0 auto; padding: 1.6rem 1.2rem 5rem; }
.leise { color: var(--leise); }
.leer { color: var(--leise); padding: 3rem 0; }
small { font-size: .82rem; }

/* Der Fuß trägt nur die Fassung — leise, aber auf jeder Seite auffindbar.
   `main` hat unten schon 5rem Luft, deshalb hängt er nicht an der Kante. */
.fussleiste {
  max-width: 1180px; margin: 0 auto; padding: 0 1.2rem 2rem;
  color: var(--leise); font-size: .8rem;
}

/* Alles auf einmal wegwerfen — steht unter der Liste, mit demselben Abstand
   und derselben Zurückhaltung wie der Weg in den Papierkorb. Man soll an dem
   vorbeigescrollt sein, was man wegwirft. */
.leerweg {
  margin: 2.5rem 0 0;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
}
.leerweg .leise { font-size: .8rem; }

/* Der Weg in den Papierkorb. Er steht unter allem, ist grau und hat einen
   Abstand nach oben, den man erst überwinden muss — die Gegenbewegung zu
   einem Löschknopf, der neben „Fertig" liegt. Rot wird er erst unter dem
   Zeiger; als Dauerzustand wäre die Farbe eine Warnung, die man nach dem
   dritten Blatt nicht mehr sieht. */
.loeschweg {
  max-width: 1180px; margin: 2.5rem auto 0; padding: 0 1.2rem;
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .6rem;
}
.loeschweg button {
  font: inherit; font-size: .85rem; padding: .3rem .8rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--papier); color: var(--leise); cursor: pointer;
}
.loeschweg button:hover { color: var(--warnung); border-color: var(--warnung); }
.loeschweg .leise { font-size: .8rem; }

/* ---------- Dach ---------- */

.dach {
  display: flex;
  align-items: center;
  /* Mit Bereichsleiste, Suchschlitz, eigenem Namen und Abmelden wird es auf
     einem schmalen Schirm eng. Umbrechen ist dort die richtige Antwort;
     abgeschnittene Knöpfe jenseits des Randes sind es nicht. */
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: .55rem 1.2rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
  position: sticky;
  top: 0;
  z-index: 10;
}
.marke { font-weight: 700; letter-spacing: .02em; color: var(--schrift); }
.faecher { display: flex; gap: .9rem; flex-wrap: wrap; }
.faecher a { color: var(--leise); padding: .2rem 0; border-bottom: 2px solid transparent; }
.faecher a.hier { color: var(--ton); border-bottom-color: var(--ton); }
.suchschlitz { margin-left: auto; }
.suchschlitz input {
  width: 15rem;
  max-width: 40vw;
  padding: .38rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  color: inherit;
  font: inherit;
}
.abmelden { margin-left: auto; }
/* Zwischen Schlitz und Abmelden steht seit der Leute-Verwaltung noch die
   eigene Leiste — also alles nach dem Schlitz ohne eigenen Auto-Rand. */
.suchschlitz ~ .abmelden { margin-left: 0; }
.abmelden button, .anmeldekasten button {
  font: inherit;
  padding: .38rem .9rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--grund);
  color: var(--leise);
  cursor: pointer;
}
.abmelden button:hover { color: var(--schrift); }

/* ---------- Übersicht ---------- */

.faecherliste { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1.4rem 0; }
.fach {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 13rem;
  padding: 1rem 1.2rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 12px;
  color: var(--schrift);
  box-shadow: var(--schatten);
}
.fach:hover { border-color: var(--ton); text-decoration: none; }
.fach strong { color: var(--ton); font-size: 1.05rem; }
.fach span { color: var(--leise); font-size: .88rem; }
.letzte { list-style: none; padding: 0; margin: 0; }
.letzte li { padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.letzte small { margin-left: .6rem; }

/* ---------- Listen ---------- */

.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.2rem 0;
}
.eintrag {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 12px;
  overflow: hidden;
  color: var(--schrift);
  box-shadow: var(--schatten);
}
.eintrag:hover { border-color: var(--ton); text-decoration: none; }
.eintrag .deck {
  aspect-ratio: 4 / 3;
  background: var(--ton-leise);
  display: block;
  overflow: hidden;
}
.eintrag .deck img { width: 100%; height: 100%; object-fit: cover; display: block; }
.eintrag .wort { display: flex; flex-direction: column; padding: .6rem .8rem .8rem; gap: .1rem; }
.eintrag small { color: var(--leise); }

/* ---------- Blatt ---------- */

.rueckweg { margin: 0 0 .8rem; font-size: .9rem; }
.notiz {
  background: var(--papier);
  border-left: 3px solid var(--ton);
  padding: .7rem 1rem;
  border-radius: 0 8px 8px 0;
  white-space: pre-wrap;
}
.angaben { display: grid; grid-template-columns: max-content 1fr; gap: .15rem 1rem; margin: 1.2rem 0; }
.angaben dt { color: var(--leise); font-size: .85rem; }
.angaben dd { margin: 0; }

/* Die Negativbündel am Kontaktabzug. „Negativ" ist keine Zeile im Baum,
   sondern eine gerechnete Gruppe — sie steht deshalb als Liste da und nicht
   als Angabe. */
.negative { list-style: none; padding: 0; margin: .8rem 0; }
.negative li { padding: .3rem 0; border-bottom: 1px solid var(--linie); }
.negative li:last-child { border-bottom: 0; }
.negative strong { color: var(--leise); font-size: .85rem; font-weight: 500;
                   margin-right: .5rem; }
/* Der Bogen zeigt seine Abzüge als Bilder und nicht als Namensreihe: ein Abzug
   ist ein Bild, und sein Titel daneben sagt weniger als das Bild selbst. Die
   Bündel bleiben — „Negativ" ist eine gerechnete Gruppe, und zwei Abzüge
   desselben Negativs gehören nebeneinander. */
.raster.abzuege {
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: .7rem; margin: .3rem 0 .8rem;
}
.abzugskachel { display: flex; flex-direction: column; gap: .3rem; color: inherit; }
.abzugskachel:hover { text-decoration: none; }
.abzugskachel:hover .deck { border-color: var(--ton); }
.abzugskachel .deck {
  aspect-ratio: 4 / 3; background: var(--ton-leise); overflow: hidden;
  border: 1px solid var(--linie); border-radius: 8px;
}
.abzugskachel .deck img { width: 100%; height: 100%; object-fit: cover; display: block; }
.abzugskachel .wort { font-size: .88rem; }
.abzugskachel .wort small { color: var(--leise); }

.kachel { margin: 0; }
.kachel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  background: var(--ton-leise);
  cursor: zoom-in;
}
.kachel figcaption { font-size: .82rem; color: var(--leise); padding: .3rem .1rem; }

.abschnitt { margin: 2.4rem 0; }
.abschnitt > header { border-bottom: 1px solid var(--linie); padding-bottom: .4rem; margin-bottom: .9rem; }
.abschnitt h2 { margin: 0; }
.saaltext { color: var(--leise); white-space: pre-wrap; margin: .4rem 0 0; }

.werke { display: flex; flex-direction: column; gap: 1.8rem; }
/* Werkbilder tragen die Spalte, der Saalzettel steht schmal daneben: er ist
   Datenmaterial und kein Bild des Werks. */
.werk { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.2rem; align-items: start; }
.werk + .werk { border-top: 1px solid var(--linie); padding-top: 1.4rem; }
.werk h3 { margin: 0 0 .2rem; font-size: 1rem; }
.werk .karten .kachel img { aspect-ratio: 3 / 4; object-fit: cover; }
@media (max-width: 700px) { .werk { grid-template-columns: 1fr; } .werk .karten { max-width: 13rem; } }

/* ---------- Strecke ---------- */
/*
 * Der Rundgang. Das Bild groß genug zum Wiedererkennen, die Angabe daneben und
 * nicht darunter — sonst schiebt jede Zeile das nächste Bild aus dem Bild, und
 * bei dreihundert Aufnahmen wird das Durchgehen zur Kletterpartie.
 */
.strecke { list-style: none; padding: 0; margin: 1.4rem 0; display: flex; flex-direction: column; gap: 1.8rem; }
.strecke li { display: grid; grid-template-columns: minmax(0, 1fr) 13rem; gap: 1.2rem; align-items: start; }
.strecke img { width: 100%; max-height: 58vh; object-fit: contain; display: block; cursor: zoom-in; }
.strecke .zeile { display: flex; flex-direction: column; gap: .2rem; margin: 0; font-size: .9rem; position: sticky; top: 4.5rem; }
.strecke .uhr { color: var(--ton); font-variant-numeric: tabular-nums; }
.strecke .was { color: var(--schrift); }
.strecke em { color: var(--leise); font-style: italic; }
@media (max-width: 700px) { .strecke li { grid-template-columns: 1fr; } .strecke .zeile { position: static; } }

/* ---------- Suche ---------- */

.treffer { list-style: none; padding: 0; margin: 1.2rem 0; display: flex; flex-direction: column; gap: 1rem; }
.treffer li { display: grid; grid-template-columns: 8rem 1fr; gap: 1rem; align-items: start; }
.treffer .bild { display: block; aspect-ratio: 4 / 3; background: var(--ton-leise); border-radius: 8px; overflow: hidden; }
.treffer .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.treffer small { display: block; }
.fundstelle { margin: .3rem 0 0; font-size: .9rem; color: var(--leise); }
.fundstelle::first-line { line-height: 1.4; }

/* ---------- Bearbeiten ---------- */

.maske { max-width: 44rem; margin: 1.4rem 0; }
.maske fieldset { border: 1px solid var(--linie); border-radius: 10px; padding: .9rem 1rem; margin: 0 0 1rem; }
.maske legend { color: var(--leise); font-size: .85rem; padding: 0 .4rem; }
.feld { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .8rem; }
.feld > span { font-size: .8rem; color: var(--leise); }
.feld input, .feld textarea, .feld select {
  font: inherit;
  padding: .45rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--papier);
  color: var(--schrift);
  width: 100%;
}
.feld textarea { resize: vertical; }
/* Der Speichern-Knopf klebt unten — bei einer Ausstellung mit dreißig Werken
   ist die Maske lang, und ans Ende scrollen zu müssen wäre eine Zumutung. Die
   Leiste darum ist nötig, damit er nicht über den Feldern schwebt. */
.maskenfuss {
  position: sticky;
  bottom: 0;
  padding: .8rem 0;
  background: linear-gradient(to top, var(--grund) 70%, transparent);
}
.maskenfuss button {
  font: inherit;
  padding: .5rem 1.4rem;
  border: 0;
  border-radius: 999px;
  background: var(--ton);
  color: var(--grund);
  cursor: pointer;
}
button.weg {
  font: inherit;
  font-size: .8rem;
  padding: .2rem .6rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--leise);
  cursor: pointer;
}
button.weg:hover { color: #c0392b; border-color: #c0392b; }

/* Ein Listenfeld — eine Zeile je Eintrag, dieselbe Bedienung wie in der App:
   das Wegnehmen steht rechts neben der Zeile (auffindbar statt elegant), das
   Zufügen als gestrichelter Knopf darunter. Ohne Skript fehlen beide und die
   leere Zeile am Ende tut denselben Dienst. */
/* Eine Bezugsquelle ist ein Block aus mehreren Feldern — abgesetzt, damit man
   sieht, welche Adresse zu welchem Laden gehört. */
.objektliste > .beschriftung { font-size: .8rem; color: var(--leise); }
.objektliste .zeilen { display: flex; flex-direction: column; gap: .8rem; }
.objektliste .zeile.block {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .4rem .6rem; padding: .6rem; border: 1px solid var(--linie); border-radius: .4rem;
  position: relative;
}
.objektliste .zeile.block > .feld { margin: 0; }
.objektliste .zeile.block > button.weg {
  position: absolute; top: .3rem; right: .3rem; padding: .2rem .45rem; line-height: 1;
}
.listenfeld > .beschriftung { font-size: .8rem; color: var(--leise); }
.listenfeld .zeilen { display: flex; flex-direction: column; gap: .4rem; }
.listenfeld .zeile { display: flex; gap: .4rem; align-items: center; }
.listenfeld .zeile > .schale-vorschlag, .listenfeld .zeile > input { flex: 1; min-width: 0; }
.listenfeld .zeile > button.weg { flex: 0 0 auto; padding: .3rem .55rem; line-height: 1; }
button.zeilezu {
  align-self: flex-start;
  margin-top: .45rem;
  font: inherit;
  font-size: .85rem;
  padding: .3rem .7rem;
  border: 1px dashed var(--linie);
  border-radius: 8px;
  background: none;
  color: var(--leise);
  cursor: pointer;
}
button.zeilezu:hover { color: var(--ton); border-color: var(--ton); }

/* Die Zäsur zwischen „was der Wein ist" und „wo er herkommt" — dieselbe Zäsur
   wie in der App, damit die Maske nicht als eine lange Liste gelesen wird. */
.maske .zaesur {
  display: flex; align-items: center; gap: .6rem;
  margin: 1.8rem 0 .8rem;
  font-size: .74rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--leise);
}
.maske .zaesur::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
/* Zwei Felder nebeneinander — und bei schmalem Fenster untereinander. Ohne
   das `wrap` quetschten sich fünf Felder auf 44rem zu je acht Zeichen, und
   eine Anschrift ist keine Jahreszahl (deshalb steht sie jetzt für sich). */
.maske .paar { display: flex; flex-wrap: wrap; gap: .8rem; }
.maske .paar > * { flex: 1 1 12rem; }
.maske .hinweis { margin: -.4rem 0 .9rem; font-size: .85rem; }

/* ---------- Punkt zur Anschrift suchen ----------
 *
 * Der Knopf steht **zwischen** Anschrift und Zahlenpaar, weil er aus dem einen
 * das andere macht. Die Standzeile darunter sagt immer, woran man ist.
 * Kein `display` auf `.ortsuche` — das Attribut `hidden` soll gelten, solange
 * das Skript den Knopf nicht scharf gemacht hat (s. `grund.css`). */
.ortsuche { margin: -.3rem 0 .9rem; }
.ortsuche .ortknopf {
  font: inherit; font-size: .9rem;
  padding: .35rem .9rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--papier); color: var(--schrift); cursor: pointer;
}
.ortsuche .ortknopf:disabled { opacity: .5; cursor: default; }
.ortstand { margin-top: .4rem; font-size: .85rem; display: flex; flex-direction: column; gap: .3rem; align-items: flex-start; }
.ortstand .ortwahl {
  font: inherit; font-size: .85rem; text-align: left;
  display: flex; flex-direction: column; gap: .1rem;
  width: 100%;
  padding: .4rem .6rem;
  border: 1px solid var(--linie); border-radius: 8px;
  background: var(--papier); color: var(--schrift); cursor: pointer;
}
.ortstand .ortwahl:hover { border-color: var(--ton); }
.ortstand .ortzahl { color: var(--leise); font-size: .8rem; font-variant-numeric: tabular-nums; }

/* ---------- Betrachter ----------
 *
 * Der eigene ist weg: seit Etappe 7 zeigt die **Web-Schale** die Bilder groß
 * (`/schale/betrachter.js`, Stil in `grund.css`). Das ist der Zweck der Übung —
 * das Bild soll am PC so aussehen und sich so anfassen lassen wie am Telefon.
 * Hier bleibt nur, was die Seite darum herum braucht.
 */

/* Eine Kachel führt in den Betrachter; das sagt schon der Zeiger. */
.kachel a { display: block; }

/* ---------- Etiketten (Wein) ----------
 *
 * Ein Etikett ist kein Ausschnitt: es wird ganz gezeigt (`contain`), nicht
 * beschnitten wie eine Werkkachel. Und groß — auf dem Rückenetikett steht das
 * Kleingedruckte, das man hier abliest.
 */
.etiketten { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin: 1.2rem 0; }
.etiketten h2 { margin: 0 0 .5rem; font-size: 1rem; }
.etiketten .kachel img {
  aspect-ratio: auto;
  object-fit: contain;
  max-height: 70vh;
  background: var(--grund-2, var(--ton-leise));
}
@media (max-width: 700px) { .etiketten { grid-template-columns: 1fr; } }

/* ---------- Anmelden ---------- */

.anmeldeseite { display: flex; min-height: 100vh; align-items: center; justify-content: center; }
.anmeldekasten {
  width: min(22rem, 92vw);
  padding: 2rem;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: 14px;
  box-shadow: var(--schatten);
}
.anmeldekasten h1 { color: var(--ton); margin-bottom: 1.2rem; }
.anmeldekasten label { display: flex; flex-direction: column; gap: .25rem; margin-bottom: .9rem; font-size: .85rem; color: var(--leise); }
.anmeldekasten input {
  padding: .5rem .7rem;
  border: 1px solid var(--linie);
  border-radius: 8px;
  background: var(--grund);
  color: var(--schrift);
  font: inherit;
}
.anmeldekasten button { width: 100%; padding: .55rem; color: var(--schrift); }
.fehler { color: #c0392b; font-size: .9rem; }
@media (prefers-color-scheme: dark) { .fehler { color: #ff8a7a; } }

/* Ein Kartenfeld — beim Wein die Anbaugebiete, bei den Motiven die Punkte.
   Höhe fest, sonst hat es keine: ein Kasten ohne Inhalt ist null hoch, und
   Leaflet zeichnet in nichts hinein. `isolation` gegen den Stapelkontext —
   ohne sie legt sich die Karte über offene Blätter. */
.kartenfeld {
  height: min(70vh, 32rem); margin: 1rem 0; border-radius: .5rem;
  border: 1px solid var(--linie); overflow: hidden; isolation: isolate;
}
.kartenfeld .leaflet-container { background: var(--grund) }
.ohnegebiet { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem }
.nebenweg {
  font-size: .55em; font-weight: 400; vertical-align: middle; margin-left: .6rem;
  padding: .15em .55em; border: 1px solid var(--linie); border-radius: 1em;
  text-decoration: none; color: var(--ton);
}
/* Der zweite Name einer Traube — leiser als sie selbst, damit klar ist, dass er
   zu ihr gehört und nicht das nächste Feld ist. */
.auch { color: var(--leise); font-size: .92em }
/* Der Pfeil zur Wikipedia — leise, weil er eine Zugabe zur Rebsorte ist und
   nicht ihr Hauptmerkmal, aber mit Grifffläche: ein Zeichen von der Größe des
   Zeichens ist auch am PC schwer zu treffen. */
a.wp {
  color: var(--leise); text-decoration: none; font-size: .85em;
  padding: .1em .3em; border-radius: .25em;
}
a.wp:hover, a.wp:focus-visible { color: var(--ton); background: var(--ton-leise) }

/* ---------- Die Weinkarte: Umschalter und Legende --------------------------
   Die Legende ist die Beschriftung der Karte — auf den Flächen selbst wären
   454 Namen auf keiner Zoomstufe lesbar. Deshalb steht sie still darunter und
   ist durchsuchbar. */
.kartenleiste {
  display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; margin: .8rem 0;
}
.umschalter { display: flex; border: 1px solid var(--linie); border-radius: 1em; overflow: hidden }
.umschalter button {
  border: 0; background: none; color: var(--schrift); font: inherit; font-size: .9rem;
  padding: .3em 1em; cursor: pointer;
}
.umschalter button.an { background: var(--ton); color: var(--papier) }
.kartenleiste input[type=search] {
  flex: 1 1 12rem; max-width: 20rem; font: inherit; font-size: .9rem;
  padding: .3em .7em; border: 1px solid var(--linie); border-radius: 1em;
  background: var(--papier); color: var(--schrift);
}
/* Eine Spalte, nicht mehrere: die Lagen stehen eingerückt unter ihrem Gebiet,
   und in zwei Spalten stünde das Kind neben einem fremden Vater. */
.legende {
  list-style: none; padding: 0; margin: .6rem 0 0;
  max-height: 22rem; overflow-y: auto;
}
.legendenzeile {
  display: flex; align-items: center; gap: .55rem; width: 100%;
  border: 0; background: none; color: var(--schrift); font: inherit; font-size: .92rem;
  padding: .3em .2em; cursor: pointer; text-align: left; text-decoration: none;
}
.legendenzeile:hover, .legendenzeile:focus-visible { background: var(--ton-leise) }
.legendenzeile .tupfen {
  flex: none; width: 1.1rem; height: .85rem; border-radius: 2px;
  border: 1.5px solid var(--linie); background: transparent;
}
/* Nichts abschneiden: lieber umbrechen. Die Namen sind ohnehin um den des
   Vaters gekürzt, und was dann noch lang ist, darf zwei Zeilen brauchen. */
.legendenname { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere }
.legendenzahl { flex: none; color: var(--leise); font-variant-numeric: tabular-nums }
/* Nicht verortet: der Tupfen bleibt leer, der Name steht schräg — die Zeile
   führt dann zu den Flaschen statt auf die Karte. */
.legendenzeile.fehlt .legendenname { font-style: italic; color: var(--leise) }
/* Ein Weingut ist keine Fläche, sondern ein Punkt — der Tupfen ist rund und
   trägt dieselben Farben wie der Punkt auf der Karte. Eine Legende zeigt das
   Zeichen, das da draußen steht. */
.legendenzeile .tupfen.punkt { width: .85rem; border-radius: 50% }
/* Die Überschrift über einer Gruppe von Treffern — sie steht nur beim Suchen. */
.legendengruppe {
  padding: .45rem .2rem .1rem; font-size: .78rem; color: var(--leise);
  text-transform: uppercase; letter-spacing: .06em;
}
/* Gewählt: die Gegend, auf die zuletzt gezeigt wurde — sie ist es, die „Nur
   diese" allein stehen lässt. */
.legendenzeile.gewaehlt { background: var(--ton-leise) }
.legendenzeile.gewaehlt .legendenname { font-weight: 600 }
.alleinknopf {
  font: inherit; font-size: .9rem; padding: .3em 1em; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 1em;
  background: var(--papier); color: var(--schrift);
}
.alleinknopf.an { background: var(--ton); border-color: var(--ton); color: var(--papier) }
.alleinknopf[disabled] { opacity: .5; cursor: default }

/* Aufgeklappt: das Gebiet, dessen Lagen gerade auf der Karte liegen. */
.legendenzeile.offen .legendenname { font-weight: 600 }
.legendenzeile.offen .tupfen { outline: 1.5px solid currentColor; outline-offset: 1px }

/* --- Dunkelkammer: Reiter nach Art und dichte Zeilenliste -----------------
   Dieser Bereich führt vier Arten Eintrag nebeneinander, drei davon ohne Bild.
   Das Raster des Kerns zeigte dort nur leere Deckflächen; gebraucht wird eine
   Liste, in der man einen Kurznamen findet. Die Klassen sind bewusst allgemein
   benannt — ein zweiter Bereich mit Arten wird sie mitbenutzen. */

.reiter { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.2rem; }
.reiter a {
  display: inline-flex; align-items: baseline; gap: .4rem;
  padding: .3rem .7rem; border: 1px solid var(--linie); border-radius: 999px;
  text-decoration: none; color: var(--schrift); font-size: .92rem;
}
.reiter a small { color: var(--leise); font-variant-numeric: tabular-nums; }
.reiter a:hover { border-color: var(--ton); }
/* Der gewählte Reiter trägt die Farbe des Archivs, nicht nur eine Umrandung —
   eine Umrandung allein ist auf einem kleinen Schirm nicht zu unterscheiden. */
.reiter a.hier { background: var(--ton); border-color: var(--ton); color: #fff; }
.reiter a.hier small { color: rgba(255, 255, 255, .75); }

ul.zeilen { list-style: none; margin: 0; padding: 0; }
ul.zeilen > li { border-top: 1px solid var(--linie); }
ul.zeilen > li:last-child { border-bottom: 1px solid var(--linie); }
ul.zeilen > li > a {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem .2rem; text-decoration: none; color: inherit;
}
ul.zeilen > li > a:hover { background: var(--papier); }
ul.zeilen .wort { display: flex; flex-direction: column; min-width: 0; }
ul.zeilen .wort small { font-size: .82rem; color: var(--leise); }
ul.zeilen .mini {
  width: 3rem; height: 2.2rem; object-fit: cover; border-radius: 4px;
  background: var(--linie); flex: none;
}
/* Wo ein Bild ist, ist es die Auskunft (Etappe 11 b). Am Abzug und am
   Kontaktabzug sagt das Foto mehr als jede Zeile daneben — der Daumennagel von
   3 rem war auf Übersicht gebaut und zeigte nichts. Am Rezept und am Material
   bleibt es bei der dichten Zeile: dort gibt es kein Bild. */
ul.zeilen.mitbild .mini { width: 8rem; height: 6rem; border-radius: 6px; }
ul.zeilen.mitbild .mini.leer { display: block; background: var(--ton-leise); }
ul.zeilen.mitbild > li > a { padding: .5rem .2rem; gap: 1rem; }
@media (max-width: 30rem) {
  ul.zeilen.mitbild .mini { width: 5rem; height: 3.8rem; }
}

/* Die Jahrgänge (Etappe 11 c). `display: list-item` und **nicht** flex — ein
   flex-Summary verliert in Chrome sein Dreieck, und der Jahrgang stünde als
   tote Überschrift da. Dieselbe Falle wie bei den Rezeptfamilien darunter. */
details.jahrgang > summary {
  display: list-item; list-style-position: outside;
  margin-left: 1.1rem; padding: .7rem .2rem .3rem; cursor: pointer;
  border-top: 1px solid var(--linie);
}
details.jahrgang:first-of-type > summary { border-top: none; }
details.jahrgang > summary::marker { color: var(--leise); }
details.jahrgang > summary .wort {
  display: inline-flex; align-items: baseline; gap: .5rem;
}
details.jahrgang > summary strong { font-size: 1.05rem; }
details.jahrgang > summary small { font-size: .85rem; color: var(--leise); }
details.jahrgang > summary:hover { background: var(--papier); }
details.jahrgang[open] { margin-bottom: 1rem; }

/* Der zweite Reiterrang (Material nach Fach). Kleiner und ohne Farbe, damit
   die Ebene darüber die Hauptordnung bleibt. */
.reiter.unter { margin-top: -.7rem; font-size: .88rem; }
.reiter.unter a { padding: .2rem .55rem; font-size: .85rem; }

/* Abzüge und Kontaktabzüge nebeneinander — der Wunsch, für den es die
   Webansicht überhaupt gibt: am großen Schirm ist Platz, den das Telefon nicht
   hat. Unter 60 rem stapeln die beiden Spalten, dann ist es wieder eine Liste. */
.doppelt { display: grid; grid-template-columns: 1fr 1fr; gap: 0 2rem; }
.doppelt > section { min-width: 0; }
.doppelt h2 { margin-top: 0; }
.doppelt h2 small { color: var(--leise); font-weight: 400; }
@media (max-width: 60rem) { .doppelt { grid-template-columns: 1fr; } }

/* Die Rezeptfamilien: eine Zeile je Familie, aufklappbar ohne Skript. */
.familien { list-style: none; margin: 0; padding: 0; }
.familien > li { border-top: 1px solid var(--linie); }
.familien > li:last-child { border-bottom: 1px solid var(--linie); }
/* `display: list-item` und **nicht** flex: ein flex-Summary verliert in
   Chrome sein Dreieck, und dann steht die Familie als tote Überschrift da —
   niemand käme darauf, dass sie sich aufklappen lässt. Das Innere trägt
   deshalb ein eigenes Element. */
.familien summary {
  display: list-item; list-style-position: outside;
  margin-left: 1.1rem; padding: .6rem .2rem; cursor: pointer;
}
.familien summary::marker { color: var(--leise); }
.familien summary .wort { display: inline-flex; flex-direction: column; gap: .1rem; }
.familien summary small { font-size: .82rem; color: var(--leise); }
.familien summary:hover { background: var(--papier); }
/* Auf dieselbe Kante wie ein Familienname: die Einrückung des Aufklappers
   kommt von seinem Dreieck, und ohne diesen Ausgleich stünden die Namen der
   Familien und die der einzelnen Rezepte um 1,3 rem versetzt untereinander. */
.familien li.einzeln > a {
  display: block; padding: .6rem .2rem .6rem 1.3rem;
  text-decoration: none; color: inherit;
}
.familien li.einzeln > a:hover { background: var(--papier); }
.familien li.einzeln .wort { display: flex; flex-direction: column; gap: .1rem; }
.familien li.einzeln small { font-size: .82rem; color: var(--leise); }
.familien ul.zeilen { margin: 0 0 .4rem 2.4rem; }
.familien ul.zeilen > li:first-child { border-top: 0; }
.familien ul.zeilen > li:last-child { border-bottom: 0; }

/* ---------- Bereiche im Bild (Dunkelkammer § 5.7) -------------------------
 * Der Umriss kommt aus `/schale/bereiche.js` — dieselbe Datei wie am Telefon,
 * damit das Overlay am PC nicht woanders liegt. Hier nur der Rahmen darum.
 */
.kachel a.mitBereichen { position: relative }
.bereichsliste { list-style: none; margin: .4rem 0 .6rem; padding: 0 }
.bereichsliste li {
  display: flex; align-items: center; gap: .6rem; padding: .35rem 0;
  border-bottom: 1px solid var(--linie);
}
.bereichsliste li:last-child { border-bottom: 0 }
.bereichsliste .was { flex: 1; min-width: 0 }
.bereichsliste .zahl { font-variant-numeric: tabular-nums }
.bereichsliste li.knapp { opacity: .7 }
.bereichsliste .warnung { font-size: .8rem; color: var(--warnung) }
.bereichsliste .nr {
  display: inline-block; min-width: 1.4rem; height: 1.4rem; line-height: 1.4rem;
  text-align: center; border-radius: 999px; border: 1px solid currentColor;
  font-size: .78rem; font-variant-numeric: tabular-nums;
}
.bereichsliste .nr.mehr { color: #B87A00 }
.bereichsliste .nr.weniger { color: #1F6F9E }

/* ---------- Leute: Zugänge verwalten -------------------------------------
 * Eine Tabelle und kein Kachelfeld: hier zählt der Vergleich Zeile für Zeile
 * (wer hat welchen Bereich, wer kommt womit herein), und den macht eine
 * Tabelle besser als alles andere.
 */
.ichleiste { display: flex; gap: .9rem; align-items: center; }
.ichleiste a { color: var(--leise); padding: .2rem 0; border-bottom: 2px solid transparent; }
.ichleiste a.hier { color: var(--ton); border-bottom-color: var(--ton); }
.ichleiste .wername { color: var(--ton); }

.ausleitung { max-width: 46rem; margin-top: -.4rem; }

.meldung { padding: .6rem .9rem; border-radius: 8px; border: 1px solid var(--linie); }
.meldung.gut { background: var(--ton-leise); border-color: var(--ton); }
.meldung.schlecht { color: var(--warnung); border-color: var(--warnung); }

.tokenkasten {
  border: 1px solid var(--ton); border-radius: 10px;
  padding: .9rem 1.1rem; background: var(--ton-leise); margin: 1rem 0 1.6rem;
}
.tokenkasten h2 { margin-top: 0; }
.tokenkasten .token {
  display: block; overflow-wrap: anywhere; user-select: all;
  font-size: 1.05rem; padding: .6rem .8rem; margin: .6rem 0;
  background: var(--papier); border: 1px solid var(--linie); border-radius: 8px;
}

.leuteliste { width: 100%; border-collapse: collapse; margin: 1rem 0 2rem; }
.leuteliste th, .leuteliste td {
  text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--linie);
  vertical-align: top;
}
.leuteliste th { font-size: .82rem; color: var(--leise); font-weight: 600; }
.marke-verwalter {
  display: inline-block; margin-top: .2rem; padding: .05rem .5rem;
  border-radius: 999px; background: var(--ton-leise); color: var(--ton);
  font-size: .74rem;
}
.bereichswahl { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
.bereichswahl legend { font-size: .82rem; color: var(--leise); }
.kaestchen { display: flex; align-items: center; gap: .35rem; font-size: .9rem; }
/* Die Zelle bleibt eine Zelle — `display:flex` darauf nähme ihr das
   Tabellenverhalten, und die Trennlinie der Zeile bräche vor der letzten
   Spalte ab. Gestapelt wird deshalb innen. */
.handgriffe form { display: flex; gap: .35rem; }
.handgriffe form + form { margin-top: .45rem; }
.handgriffe button, .leise-knopf {
  font: inherit; font-size: .85rem; padding: .3rem .7rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--grund); color: inherit; cursor: pointer;
}
.handgriffe .pwzeile input {
  font: inherit; font-size: .85rem; padding: .3rem .6rem; min-width: 0; width: 9rem;
  border: 1px solid var(--linie); border-radius: 999px;
  background: var(--grund); color: inherit;
}
.handgriffe .warnknopf { color: var(--warnung); border-color: var(--warnung); }

.neuesleuteformular { display: grid; gap: .9rem; max-width: 34rem; }
.neuesleuteformular button {
  font: inherit; padding: .45rem 1.1rem; justify-self: start;
  border: 1px solid var(--ton); border-radius: 999px;
  background: var(--ton); color: var(--papier); cursor: pointer;
}

/* Die Zeitstempel am Blatt — eingeklappt, weil sie Buchhaltung sind und nicht
   Inhalt. Sie standen bis zum 2026-08-28 gleichberechtigt zwischen Kategorie
   und Ort, in voller ISO-Länge; bei vier Stück je Eintrag war das mehr Technik
   als Aussage (Fund des Users am Fundus).

   `display: list-item` und **nicht** flex — ein flex-Summary verliert in
   Chrome sein Dreieck und stünde als tote Überschrift da. Dieselbe Falle wie
   bei den Jahrgängen oben. */
details.technik > summary {
  display: list-item; list-style-position: outside;
  margin-left: 1.1rem; padding: .3rem .2rem; cursor: pointer;
  color: var(--leise); font-size: .85rem;
}
details.technik > summary::marker { color: var(--leise); }
details.technik > summary:hover { color: var(--schrift); }
/* Enger als die Angaben oben: hier wird nachgeschlagen, nicht gelesen. */
details.technik .angaben { margin: .3rem 0 .8rem; font-size: .88rem; }

/* ---------- Die Motivkarte ------------------------------------------------
   Der Pin trägt seine Aussage in der Farbe: offen in der Dringlichkeit,
   fotografiert blass. Im Lichtbetrieb schlägt die Lichtart die Dringlichkeit
   — wer den Schieber anfasst, fragt gerade nach dem Licht.

   Drei Lichtfarben und nicht „gut/schlecht": Gegenlicht ist kein Fehler,
   sondern eine Absicht. Die Karte sagt, wie die Sonne steht, und überlässt das
   Urteil dem, der hinfährt. */
.motivpin {
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--papier); box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  background: var(--ton);
}
.motivpin.d1 { background: #7f9aa3 }   /* irgendwann */
.motivpin.d2 { background: #1F6F72 }   /* bald       */
.motivpin.d3 { background: #D55E00 }   /* dringend   */
/* Fotografiert: hohl statt farbig. Es ist erledigt, nicht wichtig. */
.motivpin.fertig { background: transparent; border-color: var(--leise) }

.motivpin.licht-front { background: #E8B923 }
.motivpin.licht-streif { background: #0072B2 }
.motivpin.licht-gegen { background: #8E5273 }
.motivpin.licht-nacht { background: #3b4048 }
/* Die goldene Stunde bekommt einen Ring, keine eigene Farbe: sie sagt etwas
   über die Tageszeit und nicht über die Lichtrichtung — beides nebeneinander,
   nicht das eine statt des anderen. */
.motivpin.gold { box-shadow: 0 0 0 3px rgba(232, 185, 35, .55) }

.motivstrahl { stroke: var(--ton) }
.sonnenstrahl { stroke: #E8B923 }

.motivkarteninhalt strong { display: block; margin-bottom: .2rem }
.motivkarteninhalt .leise { font-size: .85em; line-height: 1.45 }
.motivkarteninhalt a { display: inline-block; margin-top: .4rem }

.lichtleiste {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .7rem .8rem; margin-bottom: .8rem;
  border: 1px solid var(--linie); border-radius: .5rem; background: var(--papier);
}
.lichtzeile { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap }
.lichtzeile input[type=range] { flex: 1 1 14rem; min-width: 10rem }
.lichtschalter { display: flex; align-items: center; gap: .4rem; font-weight: 600 }
.lichtwort { font-variant-numeric: tabular-nums; font-size: 1.1rem; min-width: 3.5em }
/* Die Auswahl steht auch abgeschaltet da, damit man sieht, dass es sie gibt
   — und woran sie hängt (Memory `ui-neue-funktion-sichtbarer-weg`). */
.kartenleiste select { padding: .3rem .5rem; border: 1px solid var(--linie);
  border-radius: .4rem; background: var(--papier); color: var(--schrift) }
.kartenleiste select[disabled] { opacity: .5 }
.legendenzeile.fertig .legendenname { color: var(--leise) }
/* Die zwei Abschnitte der Motivliste. Das Fotografierte bleibt sichtbar und
   rückt nur nach hinten — es ist der Beleg, dass die Liste funktioniert hat. */
/* `teilkopf` und nicht `abschnitt`: der Name gehört den Abschnitten der
   Ausstellungen, und diese Regel machte dort bis zum 2026-09-24 jeden
   Saaltext fett und nahm den Abschnitten den Abstand. */
.teilkopf { font-size: 1rem; margin: 1.4rem 0 .6rem; font-weight: 600 }
.teilkopf .leise { font-weight: 400; margin-left: .4rem }
.raster.gedaempft .eintrag { opacity: .62 }
.raster.gedaempft .eintrag:hover, .raster.gedaempft .eintrag:focus-visible { opacity: 1 }

/* Das Blatt eines Motivs: kleine Karte, Lichtband, Logbuch. */
.kartenfeld.klein { height: min(40vh, 20rem) }
.genauigkeitskreis { stroke: var(--ton); fill: var(--ton) }
.marken { display: flex; flex-wrap: wrap; gap: .35rem; margin: .4rem 0 }
/* `themenmarke` und nicht `marke`: `.marke` ist das Wort „Archiv“ im Dach,
   und das stand mit dieser Regel als kleine Pille da. */
.themenmarke {
  font-size: .8rem; padding: .15em .6em; border-radius: 1em;
  background: var(--ton-leise); color: var(--schrift);
}
.lichttag .teilkopf { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap }
.lichttag input[type=date] {
  font-size: .85rem; font-weight: 400; padding: .2rem .4rem;
  border: 1px solid var(--linie); border-radius: .3rem;
  background: var(--papier); color: var(--schrift);
}
/* Ein Tag vor und zurück, ohne den Kalender aufzumachen. */
.tagwahl { display: inline-flex; align-items: center; gap: .3rem; font-weight: 400 }
.tagwahl button {
  font-size: .95rem; line-height: 1; padding: .3rem .55rem;
  border: 1px solid var(--linie); border-radius: .3rem;
  background: var(--papier); color: var(--schrift); cursor: pointer;
}
.tagwahl button:hover { border-color: var(--ton) }

/* Der Tag als Streifen von Mitternacht bis Mitternacht. Die Breite trägt die
   Aussage, deshalb kein Abstand zwischen den Stücken — eine Lücke wäre eine
   Zeit, in der nichts ist.

   Band, Achse und Jetzt-Marke sitzen in EINEM Kasten mit `position: relative`:
   sie teilen sich dieselbe Prozentskala, sonst zeigte die Marke daneben. */
.lichtskala { position: relative; margin: 2rem 0 .2rem }   /* Platz für die Jetzt-Fahne */
.lichtband {
  display: flex; height: 2.4rem;
  border: 1px solid var(--linie); border-radius: .3rem; overflow: hidden;
}
.lichtstueck {
  height: 100%; display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
/* Die Beschriftung im Stück. Der Schatten ist kein Schmuck: das Gelb der
   Vorderlicht-Stunden und das Violett des Gegenlichts sind so verschieden
   hell, dass eine einzige Schriftfarbe auf einem von beiden untergeht. */
.lichtstueck span {
  font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap;
  padding: 0 .3rem; text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}
.lichtstueck.licht-front span { color: #3a2b00; text-shadow: none }
.lichtstueck.licht-front { background: #E8B923 }
.lichtstueck.licht-streif { background: #0072B2 }
.lichtstueck.licht-gegen { background: #8E5273 }
.lichtstueck.licht-nacht { background: #262a30 }

/* Goldene und blaue Stunde als **Schraffur**, nicht als Filter.
   `filter: saturate(1.5)` war der erste Versuch und ist nichts wert: neben
   der ungefilterten Fläche sieht man den Unterschied nur, wenn man ihn sucht,
   und in der Legende ließe er sich gar nicht zeigen. Die Streifen sagen
   außerdem das Richtige — die Tageszeit kommt zur Lichtrichtung dazu, sie
   ersetzt sie nicht. */
.lichtstueck.gold, .tupfen:not(.motivpin).gold {
  background-image: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, .55) 0 3px, rgba(255, 255, 255, 0) 3px 7px);
}
.lichtstueck.blau, .tupfen:not(.motivpin).blau {
  background-image: repeating-linear-gradient(45deg,
    rgba(0, 0, 0, .38) 0 3px, rgba(0, 0, 0, 0) 3px 7px);
}

/* Die Stundenachse. Der Strich gehört zur Zahl und steht über ihr — er ist
   es, der auf die Stelle im Band zeigt; die Zahl allein schwebte darunter. */
.lichtachse { position: relative; height: 1.15rem; margin-top: 1px }
.lichtstunde {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: .72rem; color: var(--leise); font-variant-numeric: tabular-nums;
  padding-top: .3rem;
}
.lichtstunde::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 1px; height: .25rem;
  background: var(--linie);
}

/* Jetzt. Reicht absichtlich über das Band hinaus bis in die Achse — sonst
   wäre nicht zu sehen, auf welche Stunde er zeigt. */
.lichtjetzt {
  position: absolute; top: -.25rem; height: 2.9rem; width: 2px;
  background: var(--schrift); pointer-events: none;
}
.lichtjetzt::after {
  content: attr(data-uhr);
  position: absolute; top: -1.05rem; left: 50%; transform: translateX(-50%);
  font-size: .68rem; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--papier);
  background: var(--schrift); padding: .05rem .3rem; border-radius: .2rem;
}

/* Die Spannen untereinander und in der Reihenfolge des Tages. Nebeneinander
   umbrechend stand 19:35 über 07:15, und der Tag las sich rückwärts. */
.lichtzeiten { list-style: none; padding: 0; margin: .5rem 0 1rem;
  display: flex; flex-direction: column; gap: .25rem; font-size: .9rem }
.lichtzeiten li { display: flex; align-items: center; gap: .5rem }
.lichtzeiten strong { font-variant-numeric: tabular-nums; min-width: 7.5em }
.lichtzeiten li.gold strong { color: #9B6C00 }
@media (prefers-color-scheme: dark) {
  .lichtzeiten li.gold strong { color: #E8B923 }
  /* Im Dunkeln verschwindet das Nachtstück im Seitengrund, und mit ihm der
     Anfang und das Ende des Bandes — man sieht dann nicht mehr, worauf sich
     die Stundenachse bezieht. Derselbe Ton wie der Nachtpin auf der Karte. */
  .lichtstueck.licht-nacht, .tupfen:not(.motivpin).licht-nacht { background-color: #4a515c }
}
/* Derselbe Tupfen wie im Schlüssel — er ist das Band, in dem die Zeile liegt. */
.tupfen:not(.motivpin) {
  width: 13px; height: 13px; flex: none; border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .25); background: var(--leise);
}
.tupfen:not(.motivpin).licht-front { background-color: #E8B923 }
.tupfen:not(.motivpin).licht-streif { background-color: #0072B2 }
.tupfen:not(.motivpin).licht-gegen { background-color: #8E5273 }
.tupfen:not(.motivpin).licht-nacht { background-color: #262a30 }
.logbuch { list-style: none; padding: 0; margin: .4rem 0 1rem }
.logbuch li { padding: .35rem 0; border-bottom: 1px solid var(--linie) }
.logbuch .leise { font-variant-numeric: tabular-nums; margin-right: .5rem }
.logbuch.aufnahmen { list-style: decimal; padding-left: 1.6rem }
.logbuch.aufnahmen .leise { margin: 0 0 0 .5rem }
/* Der Farbschlüssel der Lichtarten. Steht nur im Lichtbetrieb da — solange die
   Punkte nach Dringlichkeit gefärbt sind, erklärte er das Falsche. */
.lichtschluessel {
  list-style: none; padding: 0; margin: .2rem 0 0;
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; font-size: .85rem;
  color: var(--leise);
}
.lichtschluessel li { display: flex; align-items: center; gap: .4rem }
.lichtschluessel .tupfen.motivpin { width: 13px; height: 13px; flex: none }
.lichttag .lichtschluessel { margin-top: .5rem }

/* ---------- Rudern: die Auswertung ------------------------------------
   Die einzige Seite mit `main.breit`: Diagramme gewinnen durch Breite,
   Fließtext nicht. Die Farben der Größen sind die der Ruderdaten-App, damit
   dieselbe Kurve am PC und am Telefon dieselbe Farbe hat. */
main.breit { max-width: 2000px; }
main.rudern {
  --r-distanz: #2a78d6; --r-dauer: #1baf7a; --r-kcal: #e34948;
  --r-zuege: #eb6834; --r-spm: #4a3aa7; --r-tempo: #008300; --r-einheiten: #1F6F72;
}
@media (prefers-color-scheme: dark) {
  main.rudern {
    --r-distanz: #3987e5; --r-dauer: #23c98c; --r-kcal: #e66767;
    --r-zuege: #f07a44; --r-spm: #9085e9; --r-tempo: #3fbf52; --r-einheiten: #5FC0BF;
  }
}
.rudern .erklaerung { margin-top: -.3rem; }
.zeitraum { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 .3rem; }
.zeitraum button {
  font: inherit; font-size: .9rem; padding: .3rem .9rem; border-radius: 999px;
  border: 1px solid var(--linie); background: var(--papier); color: var(--schrift); cursor: pointer;
}
.zeitraum button[aria-pressed="true"] { background: var(--ton); border-color: var(--ton); color: var(--papier); }

.kacheln, .rekorde { display: grid; gap: .8rem; margin: 1rem 0; }
.kacheln { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.rekorde { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.zahlkachel, .rekord {
  display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem;
  background: var(--papier); border: 1px solid var(--linie); border-radius: .6rem;
  box-shadow: var(--schatten);
}
/* `zahlkachel` und nicht `kachel`: `.kachel` ist die Bildkachel des Kerns,
   und die trug mit diesen Regeln bis zum 2026-09-24 auf jedem Blatt einen
   Petrolstrich und einen Rahmen um jedes Bild. */
.zahlkachel { border-top: 3px solid var(--kachelfarbe, var(--ton)); }
.zahlkachel small, .rekord small { color: var(--leise); font-size: .8rem; }
.zahlkachel strong { font-size: 1.55rem; font-weight: 650; font-variant-numeric: tabular-nums; }
.rekord { color: inherit; }
.rekord:hover { text-decoration: none; border-color: var(--ton); }
.rekord strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }

/* Drei nebeneinander auf dem großen Bildschirm, zwei auf dem Laptop, eins
   auf dem Telefon — die Breite entscheidet, nicht eine feste Zahl. */
.diagramme { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); }
.diagramm {
  background: var(--papier); border: 1px solid var(--linie); border-radius: .6rem;
  padding: .8rem 1rem .6rem; box-shadow: var(--schatten);
}
.diagramm .kopf { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .4rem; }
.diagramm .punkt { width: .65rem; height: .65rem; border-radius: 50%; align-self: center; }
.diagramm .flaeche { position: relative; height: 16rem; }

.einheitentabelle { overflow-x: auto; background: var(--papier); border: 1px solid var(--linie); border-radius: .6rem; }
.einheitentabelle table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.einheitentabelle th, .einheitentabelle td { padding: .4rem .8rem; text-align: left; white-space: nowrap; }
.einheitentabelle th { position: sticky; top: 0; background: var(--papier); color: var(--leise);
  font-weight: 600; font-size: .8rem; border-bottom: 1px solid var(--linie); }
.einheitentabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.einheitentabelle td.notizzelle { white-space: normal; color: var(--leise); min-width: 12rem; }
.einheitentabelle tr[data-weg] { cursor: pointer; }
.einheitentabelle tr[data-weg]:hover td { background: var(--ton-leise); }
.einheitentabelle tr.monatszeile td { background: var(--grund); font-weight: 600; border-top: 1px solid var(--linie);
  padding-top: .7rem; }

/* Das Blatt einer Einheit: die Zahlen groß, wie auf dem Display. */
.einheitzahlen { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  max-width: 60rem; margin: 1.2rem 0; }

/* ---------- Kerben am Planfilm (Dunkelkammer) -----------------------------
 * Dieselbe Form wie in der App: die Kante als Streifen in Schriftfarbe, darunter
 * Name und Herkunft. Am großen Schirm nebeneinander, soweit Platz ist — man
 * vergleicht Kanten, und das geht besser, wenn mehrere zugleich zu sehen sind. */
.kerbenliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
  gap: .2rem 1.5rem; align-items: start }
.kerbenliste > h2, .kerbenliste > p { grid-column: 1 / -1; margin-bottom: 0 }
.kerbe { padding: .45rem 0 .55rem; border-bottom: 1px solid var(--linie) }
.kerbenbild { color: var(--schrift); max-width: 22rem }
.kerbenbild .kante { display: block; width: 100%; height: auto; fill: currentColor }
.kerbenname { margin-top: .3rem; font-weight: 600 }

/* Der Kerben-Editor (aus der Schale, `kerbenEditor`): oben die ganze Kante,
   darunter zehn Stellen und die siebzehn Formen. Die gewählte Stelle und die
   Form, die dort steht, tragen die Farbe — so sieht man, wo man ist. */
.kerbeneditor { display: grid; gap: .5rem; margin: .3rem 0 .4rem }
.kerbeneditor > .kerbenbild { max-width: 22rem }
.kerbenstellen { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; max-width: 22rem }
.kerbenformen { display: grid; grid-template-columns: repeat(auto-fill, minmax(2.7rem, 1fr)); gap: .3rem }
.kerbenstelle, .kerbenform {
  padding: .3rem .15rem; border: 1px solid var(--linie); border-radius: .35rem;
  background: var(--papier); color: var(--schrift); line-height: 0; min-height: 2.2rem }
.kerbenstelle svg, .kerbenform svg { width: 100%; height: auto; fill: currentColor }
.kerbenstelle[aria-pressed="true"], .kerbenform[aria-pressed="true"] {
  border-color: var(--ton); box-shadow: 0 0 0 1px var(--ton); color: var(--ton) }
.kerbenunten { display: flex; justify-content: space-between; align-items: center; gap: .5rem }
.kerbenhinweis { color: var(--leise); font-size: .9em }
.kerbenvorlagen { display: grid; gap: .35rem; border-top: 1px solid var(--linie); padding-top: .5rem }
.kerbenvorlage { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; align-items: center }
.kerbenvorlage .kerbenbild { grid-column: 1 / -1; max-width: 22rem }
.kerbeneditor .verweis { background: none; border: 0; padding: 0; color: var(--ton);
  text-decoration: underline; cursor: pointer; font: inherit }

/* Neues Material (Etappe 11 h): ein Knopf, der wie der Speichern-Knopf aussieht,
   aber ein Verweis ist — er führt auf ein Formular, er schickt nichts ab. */
a.knopf { display: inline-block; padding: .4rem 1.1rem; border-radius: 999px;
  background: var(--ton); color: var(--grund); text-decoration: none }
.sortenwahl { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem 1.1rem }
.sortenwahl legend { padding: 0; margin-bottom: .3rem; color: var(--leise); font-size: .9rem }
.sortenwahl label { display: inline-flex; gap: .35rem; align-items: center }

/* Datenblätter am Material: die Liste, dann die zwei Wege hinein — Datei und
   Adresse — nebeneinander, soweit der Schirm reicht. */
.datenblaetter { list-style: none; padding: 0; margin: .2rem 0 1rem }
.datenblaetter li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem;
  padding: .45rem 0; border-bottom: 1px solid var(--linie) }
.datenblaetter li > small { flex: 1 1 12rem; overflow-wrap: anywhere }
.datenblattknoepfe { display: inline-flex; gap: .4rem }
.datenblattknoepfe form { margin: 0 }
.datenblattknoepfe button { font: inherit; font-size: .8rem; padding: .2rem .6rem;
  border: 1px solid var(--linie); border-radius: 999px; background: none;
  color: var(--leise); cursor: pointer }
.datenblattknoepfe button:hover { color: var(--ton); border-color: var(--ton) }
.datenblattablage { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0 1.5rem }
.datenblattform .maskenfuss { position: static; background: none; padding-top: .2rem }
.datenblattform.drueber { outline: 2px dashed var(--ton); outline-offset: 4px; border-radius: 6px }

/* Ein Datenblatt an mehreren Materialien: die Auswahl klappt auf, damit die
   Liste aller Materialien nicht jedes Blatt verlängert. */
.auchan { margin: .2rem 0 .4rem; font-size: .9rem }
.auchan summary { cursor: pointer; color: var(--ton) }
.auchan fieldset { border: 0; padding: .2rem 0; margin: 0; display: flex; flex-wrap: wrap; gap: .15rem 1rem }
.auchan legend { color: var(--leise); font-size: .8rem; padding: 0; width: 100% }
.auchan label { display: inline-flex; gap: .3rem; align-items: center }
.auchan-liste a { color: inherit }
form.anhaengen { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .4rem; margin: 0 }
form.anhaengen .auchan { flex: 1 1 auto; margin: 0 }
form.anhaengen > button { font: inherit; font-size: .8rem; padding: .2rem .6rem; border: 1px solid var(--linie);
  border-radius: 999px; background: none; color: var(--leise); cursor: pointer }
form.anhaengen:not(:has(details[open])) > button { display: none }
.umbenennen { flex: 1 1 100%; font-size: .9rem }
.umbenennen summary { cursor: pointer; color: var(--ton); display: inline }
.umbenennen form { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .3rem 0 }
.umbenennen input { flex: 1 1 14rem; min-width: 0; font: inherit; padding: .3rem .5rem;
  border: 1px solid var(--linie); border-radius: .4rem; background: var(--papier); color: var(--schrift) }
.umbenennen button { font: inherit; font-size: .85rem; padding: .25rem .8rem; border: 0; border-radius: 999px;
  background: var(--ton); color: var(--grund); cursor: pointer }
/* Die Sprache eines Datenblatts, als Kürzel neben dem Titel. */
abbr.sprache { font-size: .7rem; letter-spacing: .04em; text-decoration: none;
  padding: .05rem .35rem; border: 1px solid var(--linie); border-radius: .3rem; color: var(--leise) }
.umbenennen .feld { display: inline-flex; gap: .3rem; align-items: center; margin: 0 }
.umbenennen .feld span { font-size: .8rem; color: var(--leise) }