/* Grundschriftgroesse und Tastaturfokus standen bis Design D1 (#197) hier. Beides
   ist nach "wwwroot/css/foundation.css" gewandert: die Wurzelschriftgroesse als feste
   Grundtypografie ohne Sprung bei 768 px, der Fokus als ein einziger, ueberall
   gleicher und ausreichend kontrastreicher Indikator. */

/* Die frueheren Regeln "html { position: relative; min-height: 100% }" und
   "body { margin-bottom: 60px }" gehoerten zum absolut positionierten Fussbereich
   des ASP.NET-Standardtemplates. Er liegt seit Design D6 (#207) im normalen
   Textfluss; beide Regeln haben damit keinen Zweck mehr. */

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* #37: Rueckseiten-Hervorhebung beim Variantensprung (wwwroot/js/catalog-detail.js setzt/entfernt
   diese Klasse anhand des URL-Fragments und der server-gerenderten "data-varianten"-Zuordnung). */
.variantengruppe.hervorgehoben {
  outline: 2px solid var(--noss-akzent);
  outline-offset: 2px;
  background-color: rgba(var(--noss-akzent-rgb), 0.08);
}

/* ==========================================================================
   #119 (Post-Go-Live-Korrekturprogramm #118): Basisdesign fuer Startseite,
   Suchformular und Trefferliste.

   Ausschliesslich eigene, klar benannte Klassen plus die bereits vorhandenen
   Bootstrap-Formularklassen - kein Wechsel des Design-Frameworks, keine
   Ueberschreibung von Bootstrap-Interna, kein zusaetzliches CSS-Paket.
   ========================================================================== */

/* ---- Startseite ---- */

.startseite {
  max-width: 46rem;
  margin-top: 1.5rem;
}

/* Die Einordnung ist Lesetext und traegt deshalb das Lesemass des Fundaments -
   dieselbe Zeilenlaenge wie die Beschreibungen der Detailseite. */
.startseite-einordnung {
  max-width: var(--noss-lesemass);
  font-size: 1.125rem;
  line-height: var(--noss-zeilenhoehe-text);
  color: var(--noss-text-sekundaer);
}

/* Allgemeine Suchzeile (#137): erster Einstieg der Startseite, deshalb vor den
   uebrigen Einstiegen und mit deutlich groesserem Eingabefeld. */
.startseite-suche {
  margin-top: 1.75rem;
}

/* Auf schmalen Bildschirmen umbrechend, sodass der Schalter unter das
   Eingabefeld rutscht statt es unlesbar schmal zu quetschen. */
.startseite-suche-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.startseite-suche-zeile input {
  flex: 1 1 18rem;
}

.startseite-suche-hinweis {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
}

.startseite-suche-beispiel {
  font-family: var(--noss-schrift-mono);
}

/* Die beiden weiterfuehrenden Einstiege stehen nebeneinander und gemeinsam
   zentriert unter dem Suchbereich (#173); auf schmalen Bildschirmen bricht die
   Zeile um, statt die Beschriftungen zu quetschen. */
/* Linksbuendig statt zentriert (Design D6, #207): die Einstiege gehoeren zur
   Suchzeile darueber und beginnen deshalb an derselben Kante. Zentriert wirkten
   sie wie ein eigener, zweiter Aufmacher. */
.startseite-einstiege {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---- Suchformular ---- */

/* Das Formular selbst traegt seit Design D3 (#201) KEINE eigene Flaeche mehr.
   H1 setzt auf Linien und Typografie statt auf gerahmte Kaesten; auf der
   Erweiterten Suche waere der Rahmen ausserdem eine getoente Flaeche um drei
   getoente Flaechen herum. Was das Formular gliedert, sind jetzt die Linie
   unter der Katalognummer und - in der Erweiterten Suche - die drei fachlichen
   Gruppen. */
.suchformular {
  margin-bottom: 2rem;
}

/* Auto-fit statt fester Spaltenzahl: dieselbe Regel ergibt auf schmalen
   Bildschirmen eine einspaltige und auf breiten eine mehrspaltige Anordnung,
   ohne Breakpoint-Kaskade. */
.suchformular-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.suchformular-feld-breit {
  grid-column: 1 / -1;
}

.suchformular-hinweis {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
}

/* Validierungsmeldung eines Suchfeldes (#178). Gleiche Zeilenhoehe wie der
   Hinweis darunter, aber ausdruecklich nicht nur farblich unterschieden:
   die Meldung fuehrt zusaetzlich role="alert" und aria-invalid, damit sie
   ohne Farbwahrnehmung erkennbar bleibt. */
.suchformular-fehler {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--noss-fehler);
}

/* Zusammengehoerige Teileingaben (Jahr, Gewicht, Durchmesser, mehrere
   Legendenfragmente): ein <fieldset> ohne Rahmen, damit die Gruppierung
   fuer Screenreader traegt, ohne die Rasterzelle optisch zu verdoppeln. */
.suchformular-feld-gruppe {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.suchformular-feld-gruppe > legend {
  float: none;
  width: auto;
  font-size: inherit;
}

.suchformular-teilfelder {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.suchformular-teilfeld {
  flex: 1 1 6rem;
  min-width: 0;
}

.suchformular-teilfeld .form-label {
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
}

.suchformular-legendenfeld + .suchformular-legendenfeld {
  margin-top: 0.5rem;
}

/* Die fachliche Kriteriengruppe beider Suchmasken (#188). Sie spannt die volle
   Rasterbreite und traegt darin dasselbe Feldraster wie das Formular selbst,
   sodass fuer die Anordnung ihrer Felder keine zweite Regel noetig ist.

   Die Linie darueber ist die sichtbare Form der Sonderstellung der Katalognummer
   (Design D3, #201): sie steht oben und ausserhalb dieser Gruppe, und die Linie
   sagt genau das - hier beginnt, was eine gesetzte Katalognummer verdraengt.
   Die Aussage haengt nicht an der Linie; der Gruppenhinweis benennt sie im Text. */
.suchformular-kriteriengruppe {
  margin-top: 0.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--noss-linie);
}

.suchformular-kriteriengruppe > .suchformular-felder {
  margin-top: 0.75rem;
}

.suchformular-kriteriengruppe-titel {
  float: none;
  width: auto;
  margin-bottom: 0;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

/* Die drei fachlichen Gruppen der Erweiterten Suche (Design D3, #201, aus H2
   uebernommen): Bestimmung, Stueck, Umschrift.

   Leicht getoent und mit ruhiger Linie - sie sind die einzigen Flaechen beider
   Suchmasken. Die Regel steht bewusst NACH ".suchformular-feld-gruppe": jene
   nimmt einem <fieldset> Rahmen und Innenabstand, damit eine reine
   Zusammenfassung fuer Screenreader die Rasterzelle nicht optisch verdoppelt.
   Hier ist die Gruppierung dagegen ausdruecklich sichtbar gewollt, und bei
   gleicher Spezifitaet entscheidet die spaetere Stelle.

   Die Katalogseite fuehrt diese Gruppen nicht: ihre Filterspalte ist die
   kompakte Ebene und bleibt bei Linien. */
.suchformular-fachgruppe {
  padding: 0.875rem 1rem 1rem;
  border: 1px solid var(--noss-linie);
  border-radius: var(--noss-radius);
  background-color: var(--noss-flaeche);
}

/* Die Gruppe "Bestimmung" traegt eine AUSDRUECKLICHE Spaltenzahl (Issue #213,
   Ownerentscheidung "B1"): Zeile 1 Nominal, Herrscher, Muenzstaette, Zeile 2 Jahr
   und Metall.

   Das ist eine benannte AUSNAHME von der Regel dieses Stylesheets, Raster ueber
   "auto-fit" ohne Breakpoint-Kaskade zu bilden - und sie ist gemessen begruendet.
   Mit "auto-fit, minmax(15rem, 1fr)" ergibt diese Gruppe vier Spalten bei 1440 und
   1280 px, drei bei 1100 px und zwei bei 900 px. Bei vier Spalten steht das Jahr
   allein in der zweiten Zeile - genau der Zustand, den der Owner beanstandet hat.
   Eine Mindestspur, die bei jeder Desktopbreite drei Spalten ergibt, gibt es nicht:
   drei Spalten verlangen bei 1262 px Gruppenbreite eine Spur ueber 303,5 px und bei
   902 px eine unter 290 px. Die Anordnung ist also nur mit einer festen Spaltenzahl
   zusagbar.

   Unterhalb von 992 px faellt die Gruppe auf das gemeinsame Auto-fit-Raster
   zurueck: drei Spalten waeren dort je rund 210 px breit und die Auswahlfelder
   nicht mehr lesbar. Auf schmalen Viewports bleibt es damit bei einer Spalte, und
   die Felder erscheinen in der Dokumentreihenfolge - Metall zuletzt. */
@media (min-width: 992px) {
  .suchformular-fachgruppe-bestimmung > .suchformular-felder {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Der Gruppentitel wird erst im Stylesheet in Grossbuchstaben gesetzt und steht
   im Markup normal geschrieben - ein in Versalien getippter Text wuerde von
   manchen Screenreadern buchstabiert. */
.suchformular-fachgruppe-titel {
  float: none;
  width: auto;
  margin-bottom: 0.75rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--noss-text-sekundaer);
}

/* Optische Zuruecknahme bei gesetzter Katalognummer. Der Browser stellt die
   deaktivierten Steuerelemente bereits eigenstaendig zurueckgenommen dar;
   die zusaetzliche Abblendung bezieht die Feldbeschriftungen und Feldhinweise
   mit ein, damit die Gruppe als GANZES erkennbar nicht ausgewertet wird.

   Abgeblendet wird ausdruecklich nur der FELDBEREICH und nicht das ganze
   <fieldset>: Beschriftung und Exklusivitaetshinweis der Gruppe erklaeren
   gerade diese Zuruecknahme und muessen dabei uneingeschraenkt lesbar bleiben.
   Die Aussage haengt ohnehin nicht an der Abblendung - der Hinweis benennt sie
   im Text, und die Steuerelemente sind tatsaechlich nicht bedienbar. */
.suchformular-kriteriengruppe:disabled > .suchformular-felder {
  opacity: 0.55;
}

/* ---- Globaler Rahmen: Fussbereich (Design D6, #207) ---- */

/* Ruhig gesetzt und im normalen Fluss: eine Linie trennt ihn vom Inhalt, mehr
   braucht er nicht. Der Abstand nach oben haelt ihn vom letzten Inhaltsblock
   fern, ohne ihn an den Seitenrand zu heften. */
.seitenfuss {
  margin-top: 3rem;
  border-top: 1px solid var(--noss-linie);
}

/* Umbrechend statt "white-space: nowrap": auf 375 px stehen Vermerk und
   Verweisgruppe dann untereinander, statt die Seite horizontal zu verbreitern.

   "space-between" statt eines Randes an der Gruppe (Issue #211): auf einer
   gemeinsamen Zeile stehen Vermerk links und Verweise rechts, und beim Umbruch
   beginnt jede Zeile wieder an der linken Kante. Ein "margin-left: auto" an der
   Gruppe haette sie auch in der umgebrochenen Zeile nach rechts gezogen - dort
   steht sie allein, und rechtsbuendig waere sie in der schmalen Ansicht ein
   zweiter, unmotivierter Ausrichtungspunkt. */
.seitenfuss-inhalt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.375rem 1.25rem;
  padding-top: 1rem;
  padding-bottom: 1.5rem;
  font-size: 0.875rem;
}

.seitenfuss-vermerk {
  color: var(--noss-text-tertiaer);
}

/* Die beiden Verweise bleiben als Gruppe beieinander und brechen erst
   INNERHALB der Gruppe um, wenn selbst dafuer die Breite fehlt. */
.seitenfuss-verweise {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem 1.25rem;
}

/* ---- Textseiten: Datenschutz und Projektseite (Issue #211) ---- */

/* Zwei reine Leseseiten. Sie tragen deshalb das Lesemass des Fundaments und
   sonst nichts: keine Flaeche, kein Rahmen, keine Spalten. Die Gliederung
   leisten allein die Ueberschriften und ihre Abstaende.

   Das Lesemass steht auf dem Container und nicht an jedem Absatz: Listen,
   Anschrift und Zitationszeile sollen dieselbe Zeilenlaenge haben wie der
   Fliesstext um sie herum. */
.rechtstext {
  max-width: var(--noss-lesemass);
  margin-top: 1.5rem;
}

/* Serif-Leseton wie die uebrigen zusammenhaengenden Texte der Anwendung
   (Einordnung der Startseite, Beschreibungen der Detailseite). */
.rechtstext p,
.rechtstext li,
.rechtstext address {
  font-family: var(--noss-schrift-serif);
}

/* Die Gliederungsebenen brauchen mehr Luft NACH OBEN als nach unten, damit eine
   Ueberschrift sichtbar zum folgenden Absatz gehoert und nicht zum
   vorangehenden. Die Groessen selbst kommen unveraendert aus dem Fundament. */
.rechtstext h2 {
  margin-top: 2.25rem;
}

.rechtstext h3 {
  margin-top: 1.75rem;
}

.rechtstext h4 {
  margin-top: 1.25rem;
  color: var(--noss-text-sekundaer);
}

.rechtstext p,
.rechtstext ul {
  margin: 0 0 0.75rem;
}

.rechtstext ul {
  padding-left: 1.35rem;
}

.rechtstext li + li {
  margin-top: 0.125rem;
}

/* ---- Einfuehrungstext der Projektseite (Issue #216) ---- */

/* Blocksatz mit deutscher Silbentrennung.

   Beides ueberlaesst die Anwendung dem Browser: "hyphens: auto" trennt nach
   dem Sprachwoerterbuch, das ueber lang="de" am Wurzelelement gilt. Im Text
   steht deshalb KEIN einziges weiches Trennzeichen - ein von Hand gesetztes
   waere eine zweite, nie gepflegte Silbentrennung mitten im Ownerwortlaut.

   Die Trennung gilt auf JEDER Breite, der Blocksatz erst ab 47rem. Grund ist
   die Zeilenlaenge: unterhalb davon bleiben so wenige Woerter je Zeile, dass
   der Ausgleich sichtbare Loecher reisst. Darunter steht der Text deshalb
   linksbuendig - mit Silbentrennung, die dort den Flatterrand glaettet.

   Die Schwelle liegt bewusst hoeher, als es mit Silbentrennung noetig waere.
   Grund ist eine Messung: nicht jeder Browser haelt ein deutsches
   Trennwoerterbuch bereit, und ohne eines bleibt "hyphens: auto" wirkungslos -
   der Blocksatz muss also auch OHNE Trennung ertraeglich bleiben. Ab dieser
   Breite traegt jede Zeile genug Woerter dafuer.

   Der Wert ist ausserdem kein runder Breakpoint: 48rem waere bei der ueblichen
   Grundschriftgroesse genau 768px und laege damit auf einer der vier
   geprueften Breiten. Eine Schwelle, die exakt auf einem Messpunkt sitzt, macht
   die Messung von der Rundung des Browsers abhaengig.

   Die Regel ist bewusst an eine EIGENE Klasse gebunden und nicht an
   ".rechtstext": die Datenschutzseite traegt dieselbe Grundklasse, und ihr
   Satzbild ist keine Frage dieses Auftrags. */
.projekttext p {
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}

@media (min-width: 47rem) {
  .projekttext p {
    text-align: justify;
  }
}

/* Die einleitende Einordnung ist der Lesetext, der die Seite eroeffnet - dieselbe
   Rolle wie auf der Startseite und deshalb dieselbe Auszeichnung. */
.rechtstext-einordnung {
  font-size: 1.125rem;
  color: var(--noss-text-sekundaer);
}

/* Der Browser setzt <address> kursiv. Hier ist es eine Anschrift und keine
   Hervorhebung; die Kursive nimmt ihr nur die Lesbarkeit. */
.rechtstext-anschrift {
  margin: 0 0 0.75rem;
  font-style: normal;
}

/* Die bibliographische Angabe des erschlossenen Bandes traegt die BELEGROLLE -
   dieselbe wie jede Zitation im Quellenblock der Detailseite. Sie ist ein
   Quellennachweis und kein Bedienelement, und sie soll auf beiden Seiten
   gleich aussehen. */
.rechtstext-zitation {
  color: var(--noss-beleg);
}

/* ---- Startseite: Einstieg (Design D6, #207) ---- */

/* Die Startseite fuehrt genau einen Gedanken: hier wird gesucht. Die Suchzeile
   traegt deshalb den groessten Anteil der Flaeche, die Einordnung darueber ist
   Lesetext, und die beiden weiterfuehrenden Einstiege stehen ruhig darunter. */

/* ---- Katalogseite: zweispaltige Arbeitsflaeche (Design D2, #199) ---- */

/* Grundzustand ist eine Spalte: Formular, aktive Kriterien, Treffer - genau die
   Reihenfolge des Markups. Fuer den schmalen Viewport ist damit nichts weiter zu tun,
   und es entsteht kein zweiter Markup-Zweig.

   Die zweite Spalte kommt erst ab 1200 px. Grund ist die verfuegbare Breite und nicht
   der Geraetetyp: der Bootstrap-Container misst zwischen 992 und 1199 px hoechstens
   960 px, davon blieben nach Filterspalte und Abstand rund 608 px fuer die fuenf
   Spalten der Trefferliste - zu wenig. Ab 1200 px sind es rund 790 px, ab 1400 px
   rund 970 px. Zwischen 992 und 1199 px steht die Filterspalte deshalb weiterhin
   ueber den Treffern, waehrend die Trefferliste dort bereits ihre Spalten zeigt. */
.katalog-arbeitsflaeche {
  display: grid;
  gap: 2rem;
}

/* "min-width: 0" an beiden Spalten: eine Rasterspur hat sonst die Inhaltsmindestbreite
   als Untergrenze, und ein einzelner langer Wert koennte die Spalte ueber die
   verfuegbare Breite hinaus aufziehen. */
.katalog-filterspalte,
.katalog-trefferbereich {
  min-width: 0;
}

/* Der Abstand zwischen den Spalten kommt aus "gap"; der Eigenabstand des Formulars
   waere daneben ein zweiter, addierter Abstand. */
.katalog-filterspalte > .suchformular {
  margin-bottom: 0;
}

/* Die Filterspalte ist die KOMPAKTE Ebene (Design D3, #201): dichterer Rhythmus
   und engere Hinweiszeilen als in der Erweiterten Suche, damit alle Kriterien
   ohne langes Blaettern ueberblickbar bleiben. Die Hinweise selbst bleiben
   stehen - sie sind der einzige Ort, an dem ein Benutzer die zulaessigen
   Eingabeformen erfaehrt. */
.katalog-filterspalte .suchformular-felder {
  gap: 0.875rem;
}

.katalog-filterspalte .form-label {
  margin-bottom: 0.25rem;
}

.katalog-filterspalte .suchformular-hinweis {
  line-height: 1.35;
}

@media (min-width: 1200px) {
  .katalog-arbeitsflaeche {
    /* Zielgroesse der Filterspalte: 20rem entspricht 320 px. */
    grid-template-columns: 20rem minmax(0, 1fr);
    align-items: start;
  }

  /* Eine ruhige senkrechte Linie statt einer eigenen Flaeche trennt die
     Filterspalte vom Trefferbereich. Sie endet mit dem Formular, weil die
     Spalten oben ausgerichtet sind - genau das ist gewollt: die Linie begleitet
     die Filter und behauptet keine Spalte, wo keine mehr ist.

     Der Innenabstand liegt INNERHALB der 20rem (border-box), die Zielgroesse
     der Spalte bleibt also unveraendert. */
  .katalog-filterspalte {
    padding-right: 1.75rem;
    border-right: 1px solid var(--noss-linie);
  }
}

/* ---- Aktive Suchkriterien (#188) ---- */

/* Bewusst schlicht: eine Aufzaehlung mit je einem Entfernenlink, kein
   Facetten-/Chip-System. Die spaetere Designphase gestaltet die Darstellung. */
.aktive-kriterien {
  margin-bottom: 1.5rem;
}

.aktive-kriterien-ueberschrift {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

.aktive-kriterien-liste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Bewusst ohne eigene Flaeche (Design D2, #199): unmittelbar darunter steht das
   getoente Kopfband der Trefferliste, und zwei getoente Flaechen uebereinander
   verschmelzen zu einem Block. Die Umrandung allein genuegt, um die Kriterien als
   abgegrenzte Einheiten zu zeigen. */
.aktives-kriterium {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border: 1px solid var(--noss-linie);
  border-radius: var(--noss-radius);
  background-color: var(--noss-papier);
}

.aktives-kriterium-bezeichnung {
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
}

.aktives-kriterium-wert {
  font-weight: 600;
}

.aktives-kriterium-entfernen {
  font-size: 0.8125rem;
}

/* Initialzustand der Erweiterten Suche (#188): ausdruecklich kein "0 Treffer",
   sondern ein neutraler Hinweis in derselben ruhigen Form wie "Keine Treffer". */
.suche-nicht-ausgefuehrt {
  color: var(--noss-text-tertiaer);
}

/* Der Wechsel zwischen kompakter und erweiterter Maske ist ein Navigations-
   link, kein dritter gleichrangiger Schalter - deshalb bewusst als Link
   gestaltet und rechts abgesetzt. */
.suchformular-wechsel {
  margin-left: auto;
  align-self: center;
}

.suchformular-schalter {
  margin-top: 0.5rem;
}

.suchformular-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

/* ---- Trefferliste ---- */

/* Kopfzeile ueber der Liste (Issue #213): links die Trefferzahl, rechts die
   Seitengroesse. Umbrechend und mit "space-between" - auf schmalen Viewports
   stehen beide untereinander und jeweils an der linken Kante, statt die Seite
   waagerecht zu verbreitern. */
.trefferliste-kopfzeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.25rem;
}

.trefferanzahl {
  font-weight: 600;
}

/* Die Seitengroessensteuerung ist eine Darstellungssteuerung und kein
   Suchkriterium - sie ist deshalb bewusst zurueckhaltend gesetzt: kleiner als die
   Trefferzahl daneben und ohne eigene Flaeche. */
.treffer-seitengroesse {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
  font-size: 0.8125rem;
}

.treffer-seitengroesse-bezeichnung {
  color: var(--noss-text-tertiaer);
}

/* Die Werte stehen als Reihe mit einem Mittelpunkt als Trenner. Der Trenner ist
   ein reines Gestaltungszeichen und deshalb ein ::before ohne eigenen Text -
   vorgelesen wird nur der Wert. */
.treffer-seitengroesse-werte {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.5rem;
}

.treffer-seitengroesse-wert + .treffer-seitengroesse-wert::before {
  content: "·";
  margin-right: 0.5rem;
  color: var(--noss-linie-bedienelement);
}

/* Der aktive Wert ist kein Link: er traegt den vollen Textwert und mehr Gewicht,
   aber ausdruecklich KEINE gefuellte Akzentflaeche. Die aktuelle Seitenzahl
   darunter traegt genau die; zwei gleich laute Markierungen unmittelbar
   uebereinander wuerden beide entwerten. */
.treffer-seitengroesse-aktiv {
  font-weight: 600;
  color: var(--noss-text);
}

/* Gemeinsames Spaltenraster von Kopfband und Trefferzeile (Design D2, #199).

   Es steht als eigene Eigenschaft auf dem umschliessenden Bereich, damit Kopf und
   Zeilen dieselbe Definition erben: zwei getrennte "grid-template-columns" waeren
   zwei Wahrheiten, die schon bei der naechsten Aenderung auseinanderlaufen.

   Kopfband und Zeilen sind technisch ZWEI Raster. Deshalb sind die flexiblen Spuren
   ausdruecklich als "minmax(0, Nfr)" geschrieben und nicht als blosses "Nfr": ein
   blosses "fr" hat die Inhaltsmindestbreite als Untergrenze, sodass ein langer Wert
   in einer Zeile deren Spur breiter machen wuerde als dieselbe Spur im Kopfband - die
   Spalten stuenden dann nicht mehr uebereinander. Mit der Untergrenze 0 haengen die
   Spurbreiten allein an der verfuegbaren Breite, die fuer beide Raster gleich ist.

   Die beiden festen Spuren zusammen mit den Abstaenden belegen rund 236 px; der Rest
   verteilt sich auf die drei Textspalten. Das Raster passt damit auch dann in den
   Trefferbereich, wenn links die Filterspalte steht (bei 1200 px rund 790 px). */
.trefferliste-bereich {
  --treffer-spalten: 5rem 6.75rem minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  --treffer-spaltenabstand: 0.75rem;
}

/* Getoentes Kopfband ueber den Trefferzeilen (aus H2 uebernommen). Es benennt die
   Spalten und ist die einzige Stelle, an der die Spaltennamen sichtbar stehen - die
   Zeilen selbst fuehren ihre Beschriftungen nur noch fuer Screenreader.

   Nur im Spaltenlayout sichtbar: auf schmalen Viewports stapeln sich die Angaben, und
   ein Spaltenkopf ohne Spalten waere eine Behauptung ohne Deckung. */
.trefferliste-kopfband {
  display: none;
}

/* Semantisch weiterhin eine Liste (result-list.md "flache, sortierte Liste"),
   optisch eine Zeilenliste ohne Listenpunkte. */
.trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.treffer {
  border: 1px solid var(--noss-linie);
  border-radius: var(--noss-radius);
  background-color: var(--noss-papier);
}

/* Grundzustand ist der schmale Viewport: eine gestapelte Karte statt gequetschter
   Spalten. Die vier Stufen der Hierarchie entstehen allein aus der Markupreihenfolge
   und den Umbruechen unten - Katalognummer, Nominal mit Jahr, Herrscher und
   Muenzstaette in einer Zeile, darunter das Bildpaar. */
.treffer-link {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
  row-gap: 0.25rem;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
}

.treffer-link:hover,
.treffer-link:focus {
  background-color: var(--noss-flaeche);
  border-radius: var(--noss-radius);
}

/* Diese drei beginnen im gestapelten Layout je eine eigene Zeile; Herrscher und
   Muenzstaette bleiben als einzige nebeneinander. */
.treffer-katalognummer,
.treffer-zelle-nominal,
.treffer-abbildungen {
  flex: 0 0 100%;
}

.treffer-katalognummer {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--noss-akzent);
}

/* Eine Zelle des Rasters. "min-width: 0" laesst einen langen Wert innerhalb seiner
   Spalte umbrechen, statt die Spalte zu verbreitern. */
.treffer-zelle {
  min-width: 0;
}

/* Nominal und Jahr stehen nebeneinander in einer Zelle. */
.treffer-zelle-nominal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.5rem;
}

.treffer-zelle-herrscher,
.treffer-zelle-muenzstaette {
  color: var(--noss-text-sekundaer);
}

/* Im gestapelten Layout trennt ein Mittelpunkt Herrscher und Muenzstaette. Er haengt
   am Nachbarschaftsselektor, und die Zelle eines fehlenden Wertes wird gar nicht erst
   ausgegeben - ohne Herrscher entsteht deshalb auch kein fuehrender Punkt. */
.treffer-zelle-herrscher + .treffer-zelle-muenzstaette::before {
  content: "·";
  margin-right: 0.375rem;
  color: var(--noss-text-tertiaer);
}

/* inline-flex: Bezeichnung und Wert einer Angabe bleiben zusammen. */
.treffer-angabe {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.375rem;
}

/* Die Feldbezeichnungen bleiben im Dokument, verlassen aber die sichtbare Flaeche: im
   Spaltenlayout benennt das Kopfband die Spalten, im gestapelten Layout traegt die
   Anordnung selbst die Aussage. Fuer Screenreader bleibt damit jeder Wert unveraendert
   benannt - "display: none" wuerde ihn auch dort entfernen. */
.treffer-bezeichnung {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.treffer-wert {
  white-space: normal;
}

/* Das Jahr steht unmittelbar hinter dem Nominal und ist ihm optisch nachgeordnet: es
   benennt das Stueck mit, fuehrt die Zeile aber nicht an. */
.treffer-jahr {
  color: var(--noss-text-sekundaer);
}

/* Vorschaubilder einer Trefferzeile (#181, ADR-0011).

   Sie sind Orientierungshilfe und nicht der Inhalt des Treffers. Im gestapelten Layout
   stehen sie unter den Textangaben, im Spaltenlayout in ihrer eigenen, etwas breiteren
   Spalte (aus H2 uebernommen). Fehlt eine Abbildung, entsteht gar kein Element - die
   Spalte bleibt dann leer, ohne Platzhalter und ohne leeren Rahmen. */
.treffer-abbildungen {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.25rem;
}

.treffer-abbildung {
  display: block;
  /* Ein kleiner, fuer alle Treffer gleicher Kasten - bewusst KEINE grosse Bildhoehe:
     die Zeile soll textlich fuehren, und gleich hohe Kaesten halten die Zeilen einer
     Liste ruhig. Das Mass folgt der aus H2 uebernommenen Vorgabe von rund 48 px.

     Feste Masse statt blosser Obergrenzen aus zwei Gruenden. Erstens reserviert der
     Browser den Platz schon vor dem Laden, sodass eine Liste mit vielen
     lazy-geladenen Bildern nicht nachtraeglich umspringt. Zweitens klammern
     max-width und max-height ein ersetztes Element mit gesetzten width-/height-
     Attributen UNABHAENGIG voneinander - ein hochformatiges Bild wuerde dabei
     verzerrt. "object-fit: contain" haelt stattdessen das Seitenverhaeltnis und
     laesst den Rest des Kastens frei. */
  width: 3rem;
  height: 3rem;
  object-fit: contain;
  border: 1px solid var(--noss-linie);
  border-radius: var(--noss-radius-klein);
  background-color: var(--noss-papier);
}

/* Spaltenlayout ab der Breite, ab der fuenf Spalten nebeneinander lesbar bleiben.
   Darunter bleibt es bei der gestapelten Karte - eine zusammengedrueckte Tabelle waere
   auf einem Tablet im Hochformat unlesbar. */
@media (min-width: 992px) {
  .trefferliste-kopfband {
    display: grid;
    grid-template-columns: var(--treffer-spalten);
    column-gap: var(--treffer-spaltenabstand);
    align-items: baseline;
    margin-bottom: 0.5rem;
    /* Dieselbe waagerechte Innenabstands- und Rahmenbreite wie eine Trefferzeile,
       sonst begaennen die Spalten des Kopfbandes an einer anderen Stelle. */
    padding: 0.5rem 1rem;
    border: 1px solid var(--noss-linie);
    border-radius: var(--noss-radius);
    background-color: var(--noss-flaeche);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--noss-text-tertiaer);
  }

  .treffer-link {
    display: grid;
    grid-template-columns: var(--treffer-spalten);
    column-gap: var(--treffer-spaltenabstand);
    align-items: center;
  }

  /* Die Bildspalte steht im Markup am Ende - dort, wo sie im gestapelten Layout
     gelesen wird. Hier bekommt jede Zelle ihre Spalte ausdruecklich zugewiesen. Ohne
     diese Zuordnung wuerde eine fehlende Angabe alle nachfolgenden Zellen um eine
     Spalte verschieben.

     Die Zeile wird ebenso ausdruecklich zugewiesen (Codex-Review-Finding PR #200, P2).
     Grund ist das automatische Platzieren: es arbeitet mit einem Cursor, der sich nur
     vorwaerts bewegt. Die Bildzelle steht im Markup nach den Zellen der Spalten 3 bis 5
     und verlangt Spalte 2 - ein Ruecksprung, den der Algorithmus mit einer NEUEN
     Rasterzeile beantwortet. Die Bilder landeten dadurch unter statt neben den
     Textangaben. Mit "grid-row: 1" an allen fuenf Zellen bilden sie wieder eine Zeile. */
  .treffer-katalognummer { grid-column: 1; grid-row: 1; }
  .treffer-abbildungen { grid-column: 2; grid-row: 1; margin-top: 0; }
  .treffer-zelle-nominal { grid-column: 3; grid-row: 1; }
  .treffer-zelle-herrscher { grid-column: 4; grid-row: 1; }
  .treffer-zelle-muenzstaette { grid-column: 5; grid-row: 1; }

  /* Im Spaltenlayout traegt jede Angabe ihre eigene Spalte; der Mittelpunkt zwischen
     Herrscher und Muenzstaette waere dort ein Trenner ohne Zweck. */
  .treffer-zelle-herrscher + .treffer-zelle-muenzstaette::before {
    content: none;
  }
}

.treffer-legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0 1rem 0.75rem;
  font-size: 0.9375rem;
}

.treffer-muenzseite,
.treffer-variante {
  flex: 0 0 auto;
  padding: 0.0625rem 0.375rem;
  border-radius: var(--noss-radius-klein);
  background-color: var(--noss-flaeche);
  font-size: 0.8125rem;
}

/* Der Legendenausschnitt traegt seit Issue #218 dieselbe Legendenrolle wie die
   Detailseite und nicht mehr die Mono-Rolle (Ownerentscheidung 7): es ist
   derselbe Umschriftsatz, und er braucht an beiden Orten dieselbe gesicherte
   Glyphenabdeckung. Mit der Mono-Kette kamen die elf symbolischen Zeichen aus
   den Schriften des Besuchersystems - dort, wo sie fehlen, als Ersatzkaestchen.

   Gemessen kostet die Umstellung ueber alle 23 realen Pruefflaelle bei 1280 px
   2,0 Prozent und bei 375 px 1,1 Prozent Gesamtbreite und KEINE zusaetzliche
   Zeile; die groesste Einzelverschiebung geht in die Gegenrichtung, weil
   Monospace fuer deutschen Kleinbuchstabentext breiter laeuft. Die Scanbarkeit
   der Trefferliste bleibt damit erhalten. */
.treffer-legendenausschnitt {
  font-family: var(--noss-schrift-legende);
}

/* Unscharfer Treffer (#139): dieselbe zurueckhaltende Auszeichnung wie der
   Hinweis auf weitere Fundstellen - eine Zusatzangabe, kein Alarm. Bewusst
   Text und nicht nur Farbe. */
.treffer-abweichung {
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
  white-space: nowrap;
}

.treffer-weitere-fundstellen {
  color: var(--noss-text-tertiaer);
  font-size: 0.8125rem;
}

/* ---- Seitennavigation ---- */

/* Die Navigation erscheint seit #291 zweimal um dieselbe Liste. Gemeinsam ist
   alles Sichtbare - es ist EINE Komponente an zwei Stellen und ausdruecklich keine
   zweite Gestaltung. Verschieden sind nur die Abstaende: jede Platzierung traegt
   den Abstand zu der Seite, an der die Liste liegt. Die Reihe umbricht an beiden
   Stellen, statt schmale Viewports horizontal ueberlaufen zu lassen. */
.trefferlisten-seitennavigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

/* Oben: den Abstand nach oben tragen bereits die Kopfzeile und deren
   Absatzabstand; noetig ist nur der Abstand zur unmittelbar folgenden Liste. */
.trefferlisten-seitennavigation-oben {
  margin-bottom: 0.75rem;
}

/* Unten: unveraenderter Abstand zur darueberliegenden Liste. */
.trefferlisten-seitennavigation-unten {
  margin-top: 1.25rem;
}

.seitennavigation-seite,
.seitennavigation-aktuelle-seite {
  min-width: 2.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--noss-linie);
  border-radius: 0.25rem;
  text-align: center;
  text-decoration: none;
}

.seitennavigation-aktuelle-seite {
  border-color: var(--noss-akzent);
  background-color: var(--noss-akzent);
  color: var(--noss-text-auf-akzent);
  font-weight: 600;
}

/* ---- Detailseite: Basislayout ----
   Nur Abstaende und Beschreibungslisten-Ausrichtung; die fachliche Struktur der
   Detailseite (variantenbezogene Nachweise, Legenden je Gruppe) wird ausdruecklich
   NICHT hier, sondern in #120 geaendert. */

.katalogeintrag-kopf dl {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) 1fr;
  column-gap: 1.5rem;
  row-gap: 0.375rem;
  margin-bottom: 0;
}

/* Ruhige Hierarchie (Design D4, #203): die Beschriftung ordnet ein, der WERT fuehrt. Deshalb steht
   die Beschriftung klein und zurueckgenommen und nicht in derselben Groesse wie ihr Wert. */
.katalogeintrag-kopf dt {
  padding-top: 0.1875rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

.katalogeintrag-kopf dd {
  margin: 0;
}

.katalogeintrag-kopf dd > ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 575.98px) {
  .katalogeintrag-kopf dl {
    grid-template-columns: 1fr;
    row-gap: 0.125rem;
  }

  .katalogeintrag-kopf dd {
    margin-bottom: 0.5rem;
  }

}

/* ".variantenbezogene-nachweise" ist hier mit Issue #133 entfallen - der Block,
   den die Klasse benannte, existiert seit #120 nicht mehr im Markup. */
.muenzseite,
.quellenbeleg {
  margin-top: 1.75rem;
}

.variantengruppen {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.variantengruppe {
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--noss-linie);
}

.variantengruppe > p {
  margin-bottom: 0.25rem;
}

.variantengruppe > p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   #120: Detailseiten-Layout fuer die variantenbezogenen Nachweise und die
   Gruppenlegende. Ergaenzt das mit #119 eingefuehrte Basislayout; die
   Variantengruppen sind damit keine rohe Bullet-Liste mehr, sondern klar
   abgegrenzte Bloecke mit Variantenkopf und darunter liegendem Inhalt.
   ========================================================================== */

.variantengruppe {
  padding: 0.75rem 1rem;
  border: 1px solid var(--noss-linie);
  border-left: 3px solid var(--noss-akzent);
  border-radius: 0.375rem;
  background-color: var(--noss-papier);
}

/* Variantenkopf: kleiner, ruhiger Kopf statt einer optisch dominanten Zeile -
   der eigentliche Inhalt (Legende, Nachweise) soll fuehren. */
/* Die Variantenkennungen fuehren die Fassungszeile (Design D5, #206): sie sind die
   fachliche Identitaet der Fassung. Die Benennung "Variante" ordnet nur ein und
   steht deshalb klein davor. */
.variantenkennungen {
  margin-bottom: 0.5rem;
  font-size: 0.9375rem;
  color: var(--noss-text-sekundaer);
}

.variantenkennungen-werte {
  font-weight: 600;
  color: var(--noss-text);
}

/* Gemeinsame ruhige Beschriftung der Fassungszeilen (Design D5, #206). Sie
   ersetzt die zuvor fett gesetzten Labels "Beschreibung:" und "Legende:": eine
   Beschriftung ordnet ein und soll den Text, den sie benennt, nicht uebertoenen.
   Der Doppelpunkt entfaellt mit der Fettung - die Zuordnung traegt jetzt die
   Typografie. */
.fassung-label {
  margin-right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

/* ==========================================================================
   Legendentext (Design D5, #206)
   --------------------------------------------------------------------------
   Der transkribierte Umschriftsatz. Er traegt die eigene Schriftrolle des
   Fundaments; welche Schrift diese Rolle aufloest, entscheidet ausschliesslich
   "--noss-schrift-legende" in foundation.css.

   "overflow-wrap: anywhere" statt des globalen "break-word": eine Umschrift
   kann sehr lange Abschnitte ohne Leerzeichen enthalten, und nur "anywhere"
   senkt auch die Mindestbreite des Elements - sonst zwaenge ein einzelner
   langer Abschnitt die Seite in einen horizontalen Scroll.
   ========================================================================== */

.legendentext {
  font-family: var(--noss-schrift-legende);
  overflow-wrap: anywhere;
}

/* Der Zeilentrenner des gedruckten Umschriftsatzes - Stufe 1 (Design D5, #206).

   Das Zeichen "|" BLEIBT im Text: kein <br>, kein Ersatzsymbol, keine
   Entfernung. Was sich aendert, ist ausschliesslich seine Darstellung -
   zusaetzlicher Weissraum aus dem Stylesheet (kein Leerzeichen im Text) und
   eine gedeckte Farbe. Kopierter Text bleibt dadurch zeichengleich zum
   fachlichen Legendentext. */
.legende-trenner {
  margin: 0 0.35em;
  color: var(--noss-text-tertiaer);
}

/* Redaktionelle Einschuebe treten optisch zurueck, bleiben aber vollstaendig im
   Text stehen - einschliesslich ihrer Klammern. Bewusst nur eine gedeckte
   Farbe und keine Verkleinerung: der Einschub ist Bestandteil der Lesart und
   soll lesbar bleiben. */
.legende-einschub {
  color: var(--noss-text-sekundaer);
}

/* Der eine erklaerende Satz vor beiden Muenzseiten (Design D5, #206): eine
   Einordnung, keine Warnung. */
.muenzseiten-hinweis {
  margin: 1.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--noss-text-tertiaer);
}

.variantengruppe-legende,
.variantengruppe-beschreibung {
  margin-bottom: 0.375rem;
}

/* Lesemass der Beschreibungen (Design D4, #203). "--noss-lesemass" entspricht rund 68 bis 76 Zeichen
   je Zeile - das Mass, bei dem das Auge den Zeilenanfang zuverlaessig wiederfindet. Es gilt nur fuer
   zusammenhaengenden Fliesstext; Beschriftungen, Masse und Legenden bleiben unberuehrt. */
.eintrags-beschreibung,
.variantengruppe-beschreibung {
  max-width: var(--noss-lesemass);
}

/* ==========================================================================
   Gedruckter Rueckverweis einer Muenzseite (ADR-0012)
   --------------------------------------------------------------------------
   Zwei Ebenen, die die Gestaltung auseinanderhalten muss: oberhalb steht die
   redaktionell aufgeloeste Lesefassung als Beschreibung, hier der woertliche
   Text des Drucks. Die Belegzeile traegt deshalb dieselbe zurueckgenommene
   Rolle wie die uebrigen Belegangaben der Seite - kleiner, in der
   Sekundaerfarbe, mit dem einrueckenden Pfeil, der sie sichtbar unter die
   Beschreibung stellt, statt sie in sie hineinzuschreiben.

   Die Unterscheidung haengt NICHT an der Farbe: das Zitat traegt
   Anfuehrungszeichen und die Serifenrolle des Quellentextes, die Beschriftung
   benennt beide Ebenen im Klartext.
   ========================================================================== */
.rueckverweis-zeile {
  max-width: var(--noss-lesemass);
  margin: 0 0 0.75rem;
  padding-left: 1.15rem;
  position: relative;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--noss-text-sekundaer);
}

/* Der Pfeil ist reine Auszeichnung und wird deshalb nicht vorgelesen: die
   Zeile sagt selbst, worauf sie sich bezieht. */
.rueckverweis-zeile::before {
  content: "↳";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--noss-text-tertiaer);
}

/* Der gedruckte Wortlaut in der Schriftrolle des Quellentextes. <q> setzt die
   Anfuehrungszeichen selbst; sie werden hier ausdruecklich auf die deutschen
   Formen festgelegt, statt sich auf die Vorgabe des Browsers zu verlassen. */
.rueckverweis-zitat {
  font-family: var(--noss-schrift-serif);
  font-style: italic;
  quotes: "„" "“" "‚" "‘";
}

.rueckverweis-ziel {
  white-space: nowrap;
}

/* Die Lade traegt dieselbe Bedienrolle wie die Quellenerlaeuterungen aus
   Issue #244: eine gepunktete Unterlinie statt einer Bedienflaeche, damit ein
   Quellennachweis nicht aussieht wie ein primaeres Steuerelement. Anders als
   dort steht der Inhalt im Textfluss und nicht in einer schwebenden Box - er
   ist laenger, kann eine achtgliedrige Liste tragen und wuerde als Box auf
   schmaler Anzeige den halben Bildschirm verdecken. */
.rueckverweis-lade {
  max-width: var(--noss-lesemass);
  margin: 0 0 1rem;
  padding-left: 1.15rem;
  border-left: 2px solid var(--noss-linie);
}

.rueckverweis-lade-titel {
  display: inline-block;
  cursor: pointer;
  list-style: none;
  font-size: 0.8125rem;
  color: var(--noss-text-sekundaer);
  text-decoration: underline dotted var(--noss-linie-bedienelement);
  text-underline-offset: 0.15em;
}

.rueckverweis-lade-titel::-webkit-details-marker {
  display: none;
}

/* Das Aufklappzeichen steht im ::before und nicht im Markup: es ist eine
   Zustandsanzeige der Darstellung, kein Text. Der Zustand selbst wird
   Screenreadern bereits von <details> gemeldet. */
.rueckverweis-lade-titel::before {
  content: "▸";
  margin-right: 0.3em;
  color: var(--noss-text-tertiaer);
  text-decoration: none;
}

.rueckverweis-lade[open] > .rueckverweis-lade-titel::before {
  content: "▾";
  margin-right: 0.3em;
}

.rueckverweis-lade[open] > .rueckverweis-lade-titel {
  text-decoration-style: solid;
}

.rueckverweis-lade-inhalt {
  padding-top: 0.6rem;
  font-size: 0.875rem;
}

.rueckverweis-feld {
  margin: 0 0 0.5rem;
}

.rueckverweis-kette-titel {
  margin-bottom: 0.25rem;
}

/* Die Kette bleibt eine geordnete Liste - die Nummerierung IST die Aussage
   ueber die Reihenfolge und wird deshalb nicht durch eine eigene Zaehlung
   ersetzt. Der Innenabstand traegt die Ziffern; ohne ihn stuenden sie
   ausserhalb des eingerueckten Bereichs. */
.rueckverweis-kette {
  margin: 0;
  padding-left: 1.6rem;
  font-size: 0.8125rem;
}

.rueckverweis-kette li {
  margin-bottom: 0.15rem;
}

.rueckverweis-kette li:last-child {
  margin-bottom: 0;
}

/* Die Ursprungsmarke ist Text und keine Farbmarkierung: sie muss auch ohne
   Farbwahrnehmung und im Vorlesetext ankommen. */
.rueckverweis-ursprung {
  margin-left: 0.4rem;
  font-size: 0.75rem;
  color: var(--noss-text-tertiaer);
}

/* Issue #176: einmalige Legendenueberschrift ueber der Variantenliste, wenn eine
   Muenzseite mehrere Gruppenlegenden zeigt. Ruhige, den Variantenbloecken
   vorangestellte Benennung - sie ersetzt dort das zuvor je Gruppe wiederholte
   Label "Legende:" und darf die Bloecke selbst nicht optisch dominieren. */
.variantengruppen-legende-ueberschrift {
  margin-bottom: 0.375rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

/* Die Regeln fuer .variantengruppe-nachweise, .variante-nachweise,
   .variante-nachweis und .variante-nachweis-kennung sind mit Issue #133
   entfallen: variantenbezogene Sammlungsnachweise und Katalogangaben werden auf
   der Detailseite nicht mehr dargestellt (Owner-Abnahme 2026-08-30). Kein
   Markup erzeugt diese Klassen noch. */

.variante-mass {
  margin-top: 0.375rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--noss-text-sekundaer);
}

/* ==========================================================================
   #121 (ADR-0008): Quellenabbildung je Muenzseite. Die Scan-Ausschnitte stehen
   seit der Owner-Entscheidung regionGranularity=one-box-per-entry-side im
   jeweiligen Vorder-/Rueckseitenbereich. Bei einem Seitenumbruch im Druck
   besitzt eine Muenzseite zwei Segmente - sie erscheinen als kleine, nach
   Sequenz geordnete Galerie.

   Die Ausschnitte sind sehr breite, flache Zeilenbilder (Legendenzeilen eines
   Buchsatzes). max-width haelt sie deshalb in der Spalte, und der Container
   scrollt NICHT horizontal - die Seite selbst darf keinen Horizontalscroll
   bekommen (#119).
   ========================================================================== */

.muenzseite-quellenabbildung {
  margin-top: 1.25rem;
}

.muenzseite-quellenabbildung > h3 {
  font-size: 1rem;
  color: var(--noss-text-sekundaer);
  margin-bottom: 0.5rem;
}

.scan-ausschnitte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.scan-ausschnitt {
  padding: 0.5rem;
  border: 1px solid var(--noss-linie);
  border-radius: 0.375rem;
  background-color: var(--noss-papier);
}

.scan-ausschnitt-bild {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Die Zuordnung eines Ausschnitts traegt seit Issue #211 nur noch den
   Variantenbezug; Quellenangabe, Seitenzeile und Originalseitenzugang stehen im
   Quellenblock. Sie bleibt eine umbrechende Zeile, weil ein Ausschnitt spaeter
   wieder mehr als eine Zuordnungsangabe tragen kann. */
.scan-ausschnitt-zuordnung {
  margin-top: 0.5rem;
  margin-bottom: 0;
  font-size: 0.9375rem;
  color: var(--noss-text-sekundaer);
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.875rem;
}

/* ==========================================================================
   Quellenblock der Detailseite (Design D4, #203)
   --------------------------------------------------------------------------
   Eine leicht getoente Feld-Wert-Gruppe mit drei Feldern: Katalogeintrag,
   Abbildung und Nachweise (Feldfolge nach Issue #211). Sie ist die einzige
   getoente Flaeche der Detailseite - der Rest bleibt bei Linien und Typografie.

   Die Zitationen tragen die Belegrolle des Fundaments (Kupfer): eine Zitation
   ist ein Quellennachweis und kein Bedienelement. Die Zugaenge zum Digitalisat
   stehen seit #211 unmittelbar dahinter, bleiben aber Links und damit im Akzent
   - sie sind bedienbar. Genau diese Rollentrennung ist der Grund, aus dem die
   Zitationszeile selbst nicht zur Linkflaeche geworden ist.
   ========================================================================== */

.quellenblock {
  margin-top: 1.75rem;
  padding: 1rem 1.25rem 1.125rem;
  border: 1px solid var(--noss-linie);
  border-radius: var(--noss-radius);
  background-color: var(--noss-flaeche);
}

.quellenblock-titel {
  margin-bottom: 0.75rem;
  font-family: var(--noss-schrift-sans);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

/* Dasselbe Feld-Wert-Raster wie im Kopfbereich - eine zweite Anordnung fuer
   dieselbe Aussageform waere eine zweite Wahrheit. */
.quellenblock-felder {
  display: grid;
  grid-template-columns: minmax(7rem, max-content) minmax(0, 1fr);
  column-gap: 1.5rem;
  row-gap: 0.5rem;
  margin: 0;
}

.quellenblock-feld {
  padding-top: 0.1875rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--noss-text-tertiaer);
}

.quellenblock-wert {
  margin: 0;
  min-width: 0;
}

/* Jede Angabe steht in einer eigenen Zeile: mehrere Fundstellen sind mehrere
   Angaben und keine Aufzaehlung in einem Satz.

   Innerhalb der Zeile bleiben Zitation und Zugaenge auf derselben Grundlinie und
   brechen erst um, wenn die Breite nicht reicht (Issue #211) - auf 375 px rutscht
   der Zugang dann unter die Zitation, statt die Seite zu verbreitern. */
.quellenblock-angabe {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
}

.quellenblock-angabe + .quellenblock-angabe {
  margin-top: 0.375rem;
}

/* Die Zitation traegt die BELEGROLLE des Fundaments und ist bewusst kein
   Bedienelement - sie wird auch nicht zur Linkflaeche (Ownerentscheidung "Q2"). */
.quellenblock-zitation {
  color: var(--noss-beleg);
}

/* Der Zugang zum Digitalisat ist bedienbar und traegt deshalb die Akzentrolle.
   Kleiner gesetzt als die Zitation: er ist der kurze Weg zum Original, nicht die
   Aussage der Zeile. */
.quellenblock-zugang {
  flex: 0 0 auto;
  font-size: 0.8125rem;
}

/* Sammlungsnachweise und Katalogangaben bleiben unterscheidbar benannt: eine
   Sammlungsangabe ist kein Katalogverweis. */
.quellenblock-nachweisart {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--noss-text-tertiaer);
}

.quellenblock-nachweise {
  margin: 0 0 0.5rem;
  padding-left: 1.1rem;
}

.quellenblock-nachweise:last-child {
  margin-bottom: 0;
}

/* Ein gefuehrter Quellenstamm wird zu einer Erlaeuterung geoeffnet (Ownerentscheidung
   2026-09-08, Issue #244).

   Er soll weiterhin wie ein Quellennachweis wirken und NICHT wie ein primaeres
   Bedienelement - dieselbe Rollentrennung, die im Quellenblock schon zwischen
   Zitation und Zugang gilt. Deshalb keine Buttonflaeche, keine Akzentfarbe und kein
   Aufklappzeichen, sondern ausschliesslich eine gepunktete Unterlinie: sie zeigt
   "hier steht mehr", ohne den Belegtext in ein Steuerelement zu verwandeln. */
.quellenwert {
  /* inline-block statt inline: nur so ist der Bezugsrahmen fuer die absolut
     positionierte Box ein zusammenhaengendes Rechteck. Ein inline-Kasten kann ueber
     zwei Zeilen brechen, und die Box haenge dann an der falschen Haelfte. */
  display: inline-block;
  position: relative;
}

.quellenwert-stamm {
  display: inline;
  cursor: pointer;
  text-decoration: underline dotted var(--noss-linie-bedienelement);
  text-underline-offset: 0.15em;

  /* Das Aufklappzeichen des Browsers entfaellt in beiden Schreibweisen: es machte aus
     dem Quellenwert optisch eine Liste. */
  list-style: none;
}

.quellenwert-stamm::-webkit-details-marker {
  display: none;
}

.quellenwert[open] > .quellenwert-stamm {
  text-decoration-style: solid;
}

/* Die Erlaeuterung haengt unmittelbar am angeklickten Wert und ist bewusst KEIN
   Modalfenster: sie gehoert zu diesem einen Nachweis, nicht zur Seite.

   Sie liegt absolut, damit der Textfluss der Nachweisliste beim Oeffnen nicht
   umbricht. Die Breite ist nach oben durch den Sichtbereich begrenzt; die
   Feinausrichtung, wenn die Box sonst rechts hinauslaufen wuerde, uebernimmt
   source-reference.js ueber die Eigenschaft --quellenwert-verschiebung. */
.quellenwert-erlaeuterung {
  position: absolute;
  z-index: 20;
  top: calc(100% + 0.35rem);
  left: 0;
  transform: translateX(var(--quellenwert-verschiebung, 0px));
  display: block;

  /* Ausdruecklich hier und nicht bloss aus dem globalen Reset von Bootstrap
     uebernommen (Codex-Review-Finding P2 auf PR #245): mit "content-box"
     begrenzte die Maximalbreite nur den INHALT, und Innenabstand plus Rahmen
     kaemen zur Gesamtbreite hinzu - die Box waere dann breiter als die Spanne
     zwischen den vorgesehenen Raendern, und source-reference.js koennte nicht
     mehr beide Raender einhalten. Der Befund selbst greift nicht, weil
     Bootstrap-Reboot "box-sizing: border-box" global setzt und vor dieser Datei
     geladen wird (gemessen: die Gesamtbreite haelt die Spanne exakt ein). Aber
     genau darauf soll die zugesicherte Darstellung nicht angewiesen sein: sie
     haengt sonst an einem fremden Reset, dessen Wegfall sie stillschweigend
     brechen wuerde. */
  box-sizing: border-box;
  width: max-content;
  max-width: min(30rem, calc(100vw - 2rem));
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--noss-linie-bedienelement);
  border-radius: 3px;
  background: var(--noss-papier);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--noss-text);
  text-align: left;
  white-space: normal;
}

.quellenwert-rubrik {
  display: block;
  font-size: 0.75rem;
  color: var(--noss-text-tertiaer);
}

.quellenwert-angabe {
  display: block;
}

.quellenwert-rubrik + .quellenwert-angabe {
  margin-bottom: 0.35rem;
}

.quellenwert-angabe:last-child {
  margin-bottom: 0;
}

/* Der Quellenblock stapelt bei derselben Breite wie der Kopfbereich: beide tragen
   dieselbe Feld-Wert-Logik und sollen sich nicht unterschiedlich verhalten.

   Die Abfrage steht hier und nicht im gemeinsamen Media-Block weiter oben: die
   Grundregeln dieses Abschnitts stehen SPAETER in der Datei und wuerden eine dort
   formulierte Ausnahme bei gleicher Spezifitaet wieder ueberschreiben. Die Regel
   gehoert zu ihrem Abschnitt. */
@media (max-width: 575.98px) {
  .quellenblock-felder {
    grid-template-columns: 1fr;
    row-gap: 0.125rem;
  }

  .quellenblock-wert {
    margin-bottom: 0.5rem;
  }

  .quellenblock-wert:last-child {
    margin-bottom: 0;
  }
}

/* ==========================================================================
   Muenzabbildungen von den Tafeln (ADR-0011)
   --------------------------------------------------------------------------
   Eigener Bereich vor Legende/Beschreibung, strikt getrennt von den
   Scan-Ausschnitten des Quellenbelegbereichs: eine Abbildung zeigt das Stueck
   selbst, ein Ausschnitt belegt den Beschreibungstext.

   Vorder- und Rueckseite stehen NEBENEINANDER (detail-page.md, Abschnitt
   "Abbildungen von den Tafeln"). Anders als die Scan-Ausschnitte - sehr breite,
   flache Zeilenbilder - sind Muenzbilder annaehernd quadratisch und passen
   deshalb zu zweit in die Spalte. "flex-wrap: wrap" laesst sie auf schmalen
   Viewports untereinander umbrechen, statt die Seite horizontal scrollen zu
   lassen (#119); eine feste Spaltenzahl haette das erzwungen.

   Fehlt eine Muenzseite, entfaellt ihr <li> vollstaendig - kein leerer Platz,
   der wie ein fehlgeschlagenes Bild aussieht.
   ========================================================================== */

.muenzabbildungen {
  margin-top: 1.75rem;
}

.muenzabbildung-gruppe + .muenzabbildung-gruppe {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--noss-linie);
}

.muenzabbildung-variante {
  font-size: 1rem;
  color: var(--noss-text-sekundaer);
  margin-bottom: 0.5rem;
}

/* Die gedruckte Tafelbezeichnung ist eine QUELLENANGABE und keine gefuehrte Variante
   (ADR-0011, Fall "quellenseitig gekennzeichnet"). Sie steht deshalb UNTER dem jeweiligen
   Bild - nicht als Ueberschrift der Gruppe - und wird zurueckhaltend gesetzt, damit sie
   nicht als Variantenkennung oder Katalognummer gelesen wird. */
.muenzabbildung-tafelbezeichnung {
  display: block;
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--noss-text-sekundaer);
}

.muenzabbildung-seiten {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.muenzabbildung-seite {
  /* Grundbreite fuer zwei Spalten; darunter bricht die Liste um. Kein fester
     Pixelwert, damit die Abbildung der Spaltenbreite folgt. */
  flex: 1 1 14rem;
  min-width: 0;
}

.muenzabbildung-seitenbezeichnung {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--noss-text-sekundaer);
  margin: 0 0 0.375rem;
}

.muenzabbildung {
  margin: 0;
  padding: 0.5rem;
  border: 1px solid var(--noss-linie);
  border-radius: 0.375rem;
  background-color: var(--noss-papier);
}

.muenzabbildung + .muenzabbildung {
  margin-top: 0.5rem;
}

/* Gleich grosse Bildfelder (Design D4, #203): Vorder- und Rueckseite belegen denselben Kasten,
   unabhaengig von den Abmessungen der jeweiligen Bilddatei.

   Das ist eine fachliche Zusage und keine Kosmetik. Die Ausschnitte der Tafel sind unterschiedlich
   gross gerastert; wuerde man sie in ihren Originalmassen nebeneinander stellen, laese sich das als
   Groessenverhaeltnis der beiden Muenzseiten - und damit als Massstab - missverstehen. Ein Massstab
   ist aus den Tafelscans NICHT ableitbar.

   "object-fit: contain" haelt dabei das Seitenverhaeltnis jedes Bildes: der Kasten ist gleich gross,
   das Bild darin wird nicht verzerrt und nicht beschnitten. */
.muenzabbildung-bild {
  display: block;
  width: 100%;
  height: 16rem;
  object-fit: contain;
}

/* Bildunterschrift einer Muenzabbildung. Sie traegt seit Issue #211 nur noch die
   gedruckte Tafelbeschriftung des quellenseitig gekennzeichneten Falls; Zitation
   und Tafelzugang stehen im Quellenblock. Die Regel fuer die zuvor hier
   gefuehrte Quellenangabe ist mit ihr entfallen. */
.muenzabbildung-beschriftung {
  margin-top: 0.5rem;
  font-size: 0.9375rem;
}

.muenzabbildung-einseitig {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  color: var(--noss-text-sekundaer);
}


/* ==========================================================================
   Projektstatusuebersicht der Katalogbaende (Issue #216)
   --------------------------------------------------------------------------
   Oeffentliche Statusinformation auf "/ueber-das-projekt". Sie schliesst an das
   Fundament an und fuehrt ausdruecklich KEINE Dashboard-Anmutung: keine
   Badge-Pillen, keine Karten, keine Schatten, keine Rundungen ausser den
   beiden Radien des Fundaments.

   Getragen wird die Gliederung von ruhigen Linien und Abstaenden. Farbe kommt
   ausschliesslich aus den Statusrollen des Fundaments; ein Farbliteral steht
   hier nirgends.

   Die Uebersicht ist ausdruecklich fuer WACHSTUM gebaut: sie ist eine
   einspaltige Liste ohne Tabelle und ohne feste Spaltenbreiten. Auch bei zehn
   oder zwanzig Baenden bleibt sie damit lesbar, und auf schmalen Geraeten
   entsteht kein horizontaler Ueberlauf.
   ========================================================================== */

/* Der Abschnitt steht als eigener Block NEBEN dem Lesetext und nicht in ihm.

   Das ist keine Formalie: die Regeln des Lesetextcontainers sind spezifischer
   (".rechtstext p") als die Klassen hier und wuerden Abstaende und Einzuege
   dieses Abschnitts ueberschreiben. Getrennt gibt es fuer jede Regel genau
   einen Ort.

   Das Lesemass gilt trotzdem: die Statuszeilen sollen dieselbe Zeilenlaenge
   haben wie der Text darueber und auf einem breiten Bildschirm nicht
   auseinanderlaufen. Der Abstand nach oben ist groesser als der uebliche
   Ueberschriftenabstand - hier endet der Lesetext und beginnt ein anderer
   Inhaltstyp. */
.projektstatus {
  max-width: var(--noss-lesemass);
  margin-top: 3rem;
}

.projektstatus-titel {
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--noss-linie);
}

.projektstatus-komplex {
  margin-top: 2rem;
}

.projektstatus-komplex-titel {
  margin-bottom: 0.75rem;
}

/* Die Bandliste traegt keine Aufzaehlungszeichen: jeder Eintrag ist eine
   eigene Zeile mit eigener Trennlinie, und ein zusaetzlicher Punkt davor waere
   eine zweite Gliederungsebene ohne Aussage. */
.projektstatus-baende {
  margin: 0;
  padding: 0;
  list-style: none;
}

.projektstatus-band + .projektstatus-band {
  margin-top: 0.25rem;
  padding-top: 0.25rem;
  border-top: 1px solid var(--noss-linie);
}

/* Die Bandzeile ist zugleich das <summary> des Aufklappelements.

   Der native Marker des Browsers wird ersetzt und nicht behalten: er steht bei
   "display: list-item" VOR der ersten Zeilenbox, und der Zeileninhalt ist eine
   Flexzeile - der Marker landete damit allein auf einer eigenen Zeile ueber dem
   Bandtitel. Das eigene Zeichen liegt statt dessen als erstes Flexelement in
   derselben Zeile.

   Es traegt ausdruecklich KEINE Information: den Auf-/Zuklappzustand meldet
   <details>/<summary> selbst an die Hilfstechnik. Wo der Browser es beherrscht,
   erhaelt das Zeichen deshalb einen leeren Alternativtext und verschwindet aus
   dem Barrierefreiheitsbaum; wo nicht, bleibt es sichtbar und wird hoechstens
   zusaetzlich vorgelesen. */
.projektstatus-band-kopf {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 0;
  cursor: pointer;
  list-style: none;
}

.projektstatus-band-kopf::-webkit-details-marker {
  display: none;
}

/* Das Zeichen ist deutlich groesser als der Text daneben und traegt eine eigene
   Flaeche: die ganze Bandzeile ist zwar bedienbar, aber der Indikator ist die
   Stelle, auf die ein Benutzer zielt. Mit 1,5rem Breite und der Zeilenpolsterung
   darueber und darunter kommt die Zeile auf gut 44 px Hoehe und erfuellt damit
   die Mindestgroesse eines Bedienziels (WCAG 2.2, Erfolgskriterium 2.5.8)
   ueberall mit Abstand.

   "line-height: 1" haelt das Zeichen trotz seiner Groesse auf der Grundlinie der
   Zeile; ohne sie schoebe es die ganze Zeile auseinander. */
.projektstatus-band-kopf::before {
  content: "▸";
  flex: 0 0 1.5rem;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--noss-text-sekundaer);
}

@supports (content: "x" / "") {
  .projektstatus-band-kopf::before {
    content: "▸" / "";
  }
}

/* Geschlossen weist das Zeichen nach rechts, geoeffnet nach unten - die
   gelaeufige Richtungssprache eines Aufklappers. Getragen wird der Zustand
   trotzdem von <details>/<summary> selbst; das Zeichen ist reine Verstaerkung. */
.projektstatus-band-details[open] > .projektstatus-band-kopf::before {
  content: "▾";
}

@supports (content: "x" / "") {
  .projektstatus-band-details[open] > .projektstatus-band-kopf::before {
    content: "▾" / "";
  }
}

/* Ein Band ohne begonnene Arbeit hat nichts aufzuklappen. Seine Zeile ist
   deshalb kein Bedienelement - kein Zeiger, kein Zeichen - behaelt aber dessen
   Platz, damit die Liste eine gemeinsame Fluchtlinie hat. */
.projektstatus-band-kopf--fest {
  cursor: default;
}

.projektstatus-band-kopf--fest::before {
  content: "";
}

@supports (content: "x" / "") {
  .projektstatus-band-kopf--fest::before {
    content: "" / "";
  }
}

/* Werk und Gesamtstatus teilen die Restbreite. "min-width: 0" erlaubt dem
   Flexelement, schmaler zu werden als sein laengstes Wort es verlangt, und
   verhindert damit den horizontalen Ueberlauf auf schmalen Geraeten. */
.projektstatus-band-zeile {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  min-width: 0;
}

/* Autor, Titel und Jahr bilden eine Gruppe und brechen INNERHALB dieser Gruppe
   um. Der Titel darf dabei ueber mehrere Zeilen laufen; "min-width: 0" erlaubt
   dem Flexelement, schmaler zu werden als sein laengstes Wort es verlangt, und
   verhindert damit den horizontalen Ueberlauf auf schmalen Geraeten. */
.projektstatus-werk {
  flex: 1 1 18rem;
  min-width: 0;
}

.projektstatus-autor {
  color: var(--noss-text-sekundaer);
}

.projektstatus-autor::after {
  content: ": ";
}

.projektstatus-buchtitel {
  font-family: var(--noss-schrift-serif);
}

.projektstatus-jahr {
  color: var(--noss-text-sekundaer);
  white-space: nowrap;
}

.projektstatus-jahr::before {
  content: "(";
}

.projektstatus-jahr::after {
  content: ")";
}

/* Der Gesamtstatus steht rechts und faellt ueber Farbe und Schriftgroesse auf -
   ausdruecklich NICHT ueber eine Fettung und nicht ueber eine Badge-Flaeche. */
.projektstatus-gesamt {
  flex: 0 0 auto;
  font-size: 0.875rem;
  letter-spacing: 0.02em;
}

.projektstatus-gesamt--fertig {
  color: var(--noss-status-fertig);
}

.projektstatus-gesamt--arbeit {
  color: var(--noss-status-arbeit);
}

.projektstatus-gesamt--pruefung {
  color: var(--noss-status-pruefung);
}

.projektstatus-gesamt--neutral {
  color: var(--noss-status-neutral);
}

.projektstatus-gesamt--gesperrt {
  color: var(--noss-status-gesperrt);
}

/* Der Statushinweis qualifiziert den Gesamtstatus und steht deshalb immer
   sichtbar unter der Bandzeile - auch bei zugeklappten Details. */
.projektstatus-band-hinweis {
  margin: 0 0 0.5rem;
  padding-left: 2rem;
  font-family: var(--noss-schrift-serif);
  font-size: 0.9375rem;
  color: var(--noss-text-sekundaer);
}

/* ---- Bearbeitungsschritte ---- */

.projektstatus-schritte {
  margin: 0.25rem 0 0.75rem;
  padding: 0 0 0 2rem;
  list-style: none;
}

.projektstatus-schritt + .projektstatus-schritt {
  margin-top: 0.625rem;
}

.projektstatus-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 0.5rem;
}

/* Das Symbol ist eine feste, schmale Spalte, damit die Schrittbezeichnungen
   untereinander fluchten. */
.projektstatus-symbol {
  flex: 0 0 1rem;
}

.projektstatus-symbol--fertig {
  color: var(--noss-status-fertig);
}

.projektstatus-symbol--arbeit {
  color: var(--noss-status-arbeit);
}

.projektstatus-symbol--pruefung {
  color: var(--noss-status-pruefung);
}

.projektstatus-schrittname {
  min-width: 0;
}

.projektstatus-zustand {
  font-size: 0.875rem;
}

.projektstatus-zustand--fertig {
  color: var(--noss-status-fertig);
}

.projektstatus-zustand--arbeit {
  color: var(--noss-status-arbeit);
}

.projektstatus-zustand--pruefung {
  color: var(--noss-status-pruefung);
}

/* Die Zahlen tragen die Sansrolle: sie sind Messwerte und kein Lesetext, und
   die Ziffern sollen untereinander gleich breit stehen. */
.projektstatus-zahlen {
  font-family: var(--noss-schrift-sans);
  font-variant-numeric: tabular-nums;
  font-size: 0.875rem;
  color: var(--noss-text-sekundaer);
}

/* Der Hinweis gehoert zu seinem Schritt und ruecken deshalb hinter dessen
   Symbolspalte ein - Symbolbreite plus Abstand. */
.projektstatus-schritthinweis {
  margin: 0.125rem 0 0 1.5rem;
  font-family: var(--noss-schrift-serif);
  font-size: 0.875rem;
  color: var(--noss-text-tertiaer);
}

/* Der Fortschrittsbalken.

   "appearance: none" ist noetig, weil <progress> sonst die Systemdarstellung
   des Betriebssystems erhaelt und die Rollen des Fundaments ignorierte. Spur
   und Fuellung werden deshalb je Browserfamilie gesetzt; die Werte selbst
   stehen an genau einer Stelle im Fundament.

   Bewusst schmal, ohne Rundung und ohne Verlauf: der Balken verstaerkt eine
   Zahl, die unmittelbar daneben steht. */
/* Die Breite zieht den eigenen linken Einzug ab. "width: 100%" waere die
   Breite des Elternelements OHNE den Rand und liefe auf schmalen Geraeten um
   genau diesen Einzug ueber den rechten Seitenrand hinaus. */
.projektstatus-balken {
  display: block;
  width: calc(100% - 1.5rem);
  max-width: 22rem;
  height: var(--noss-fortschritt-hoehe);
  margin: 0.3125rem 0 0 1.5rem;
  appearance: none;
  border: 0;
  background-color: var(--noss-fortschritt-spur);
  color: var(--noss-fortschritt-wert);
}

.projektstatus-balken::-webkit-progress-bar {
  background-color: var(--noss-fortschritt-spur);
}

.projektstatus-balken::-webkit-progress-value {
  background-color: var(--noss-fortschritt-wert);
}

.projektstatus-balken::-moz-progress-bar {
  background-color: var(--noss-fortschritt-wert);
}