/* Werkliste und Detailansicht. Farben, Schrift, Kopfzeile und Knoepfe kommen
   aus stil.css -- hier steht nur, was Tabelle und Detail zusaetzlich
   brauchen. Alle Werte greifen auf die Bedeutungs-Schicht dort zu. */

main.breit { max-width: 1440px; padding: var(--abstand-5) var(--abstand-5) var(--abstand-7); }

.unsichtbar {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Kopf und Filter der Liste ------------------------------------------- */

.listenkopf {
  display: flex;
  align-items: baseline;
  gap: var(--abstand-4);
  margin-bottom: var(--abstand-4);
}
.listenkopf h1 { font-size: var(--gr-gross); font-weight: 700; letter-spacing: -0.03em; }
#zaehler {
  margin: 0;
  font-stretch: var(--schmal);
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.filter {
  display: flex;
  flex-wrap: wrap;
  gap: var(--abstand-3) var(--abstand-4);
  margin-bottom: var(--abstand-5);
  padding-bottom: var(--abstand-5);
  border-bottom: 1px solid var(--rand);
}

.filter label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--gr-klein);
  font-stretch: var(--schmal);
  color: var(--text-leise);
}

.filter select,
.filter input {
  width: auto;
  min-width: 150px;
  min-height: 44px;
  padding: 0 10px;
}
.filter label:first-child select { min-width: 220px; }

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

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

thead th {
  position: sticky;
  top: var(--kopf-hoehe);
  z-index: 2;
  background: var(--grund);
  text-align: left;
  font-size: var(--gr-klein);
  font-stretch: var(--schmal);
  font-weight: 550;
  color: var(--text-leise);
  padding: var(--abstand-2) var(--abstand-3);
  border-bottom: 1px solid var(--rand);
  white-space: nowrap;
}

tbody td {
  padding: var(--abstand-3);
  border-bottom: 1px solid var(--rand);
  vertical-align: middle;
}

tbody tr.anklickbar { cursor: pointer; transition: background-color var(--dauer-kurz); }
tbody tr.anklickbar:hover { background: var(--flaeche-hover); }
tbody tr.anklickbar:focus-visible { outline-offset: -2px; }

.spalte-nr,
.spalte-preis {
  text-align: right;
  /* Gleich breite Ziffern: Preise und Nummern sollen untereinander
     ausgerichtet stehen, sonst ist eine Spalte mit Betraegen nicht
     ueberfliegbar. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Die Inventarnummer steht wie der Bildnummer-Randdruck auf dem Film. */
td.spalte-nr {
  font-stretch: var(--schmal);
  color: var(--text-gedaempft);
  width: 1%;
}

.spalte-bild { width: 136px; padding-left: 0; }

/* Der Abzug: Bild auf Filmgrund, darunter die Nummer als Randdruck. */
.abzug {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  background: var(--bildgrund);
  border-radius: 2px;
}
/* Stärke 560: Bei 400 und schmaler Breite sind die Ziffern so dünn, dass die
   Subpixel-Glättung sie unter Windows bläulich färbt und Serifen vortäuscht. */
.randdruck {
  padding: 2px 8px 5px;
  font-size: var(--gr-klein);
  font-weight: 560;
  font-stretch: 80%;
  font-variant-numeric: tabular-nums;
  color: var(--text-gedaempft);
  line-height: 1.2;
}

/* Verkauft: der rote Punkt, den Galerien auf verkaufte Werke kleben --
   hier auf den Abzug selbst, nicht in eine Formularspalte. */
.abzug.verkauft::after,
.detailbild-rahmen.verkauft::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--markierung);
  box-shadow: 0 0 0 2px var(--bildgrund), 0 2px 4px rgba(0, 0, 0, .5);
}
.detailbild-rahmen.verkauft::after { top: 14px; right: 14px; width: 22px; height: 22px; }

/* Alle Vorschauen im selben Feld auf demselben Grund: Die Zeilen springen
   nicht je Seitenverhaeltnis, und kein Werk sieht durch seinen Hintergrund
   anders aus als das naechste. contain: der Rahmen ist Teil des Werks --
   abschneiden waere falsch. */
.vorschau,
.vorschau-leer {
  display: block;
  width: 112px;
  height: 104px;
  object-fit: contain;
  padding: 6px 6px 0;
}

.vorschau-leer {
  display: grid;
  place-items: center;
  color: var(--text-leise);
  font-size: var(--gr-klein);
  font-stretch: var(--schmal);
  border: 1px dashed var(--rand-bedienung);
  margin: 6px 6px 0;
  width: 100px;
  height: 98px;
}

.spalte-titel { min-width: 180px; }
.titel { font-weight: 650; font-size: var(--gr-text); line-height: 1.3; }
.kuenstler { color: var(--text-gedaempft); margin-top: 2px; }
.technik { color: var(--text-leise); font-size: var(--gr-klein); margin-top: 2px; }

.spalte-mass {
  font-stretch: var(--schmal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--text-gedaempft);
}

.spalte-eingang { white-space: nowrap; font-variant-numeric: tabular-nums; }
.spalte-eingang .herkunft {
  display: flex;
  align-items: center;
  color: var(--text-leise);
  font-size: var(--gr-klein);
  margin-top: 2px;
}

/* Das i fuer den internen Kommentar: sichtbar 22 px, greifbar 44 px (das
   ::after vergroessert die Trefferflaeche, ohne die Zeile hoeher zu
   machen). Neutral, nicht Fettstiftrot -- Rot gehoert in dieser Zeile dem
   Verkauft-Punkt, und ein Kommentar ist keine Markierung. */
.kommentar-knopf {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  margin-left: 12px;
  padding: 0;
  border: 1.5px solid var(--text-gedaempft);
  border-radius: 50%;
  background: transparent;
  color: var(--text-gedaempft);
  cursor: pointer;
  transition: background-color var(--dauer-kurz), color var(--dauer-kurz),
    border-color var(--dauer-kurz);
}
.kommentar-knopf::after { content: ""; position: absolute; inset: -11px; }
.kommentar-knopf svg { width: 14px; height: 14px; }
.kommentar-knopf:hover { color: var(--text); border-color: var(--text); }
.kommentar-knopf[aria-expanded="true"] {
  background: var(--papier);
  border-color: var(--papier);
  color: var(--haupt-text);
}

/* Die Blase: ein Zettel aus Abzugsweiss, der Pfeil zeigt aufs i. Die
   Lage rechnet blase.js; --pfeil-x und data-seite kommen von dort. */
.kommentar-blase {
  position: fixed;
  z-index: 30;
  max-width: min(320px, calc(100vw - 16px));
  padding: var(--abstand-3) var(--abstand-4);
  border-radius: var(--ecke);
  background: var(--papier);
  color: var(--haupt-text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .6);
  animation: blaseAuf .14s var(--ausklang);
}
.kommentar-blase p {
  margin: 0;
  max-height: 40vh;
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.45;
  /* Zeilenumbrueche aus dem Kommentarfeld bleiben stehen. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.kommentar-blase::before {
  content: "";
  position: absolute;
  left: var(--pfeil-x, 50%);
  width: 12px;
  height: 12px;
  background: var(--papier);
  transform: translateX(-50%) rotate(45deg);
}
.kommentar-blase[data-seite="unten"]::before { top: -6px; }
.kommentar-blase[data-seite="oben"]::before { bottom: -6px; }
.kommentar-blase[data-seite="oben"] { animation-name: blaseAufOben; }
@keyframes blaseAuf { from { opacity: 0; transform: translateY(-4px); } }
@keyframes blaseAufOben { from { opacity: 0; transform: translateY(4px); } }

/* Am Handy steht der Eingang rechtsbuendig in der Karte -- das i rueckt mit. */
@media (max-width: 760px) {
  .spalte-eingang .herkunft { justify-content: flex-end; }
}

.leer { color: var(--text-leise); }

.leerzeile td { padding: var(--abstand-7) var(--abstand-3); border-bottom: 0; }
.leerzeile p { margin: 0 0 var(--abstand-3); color: var(--text-gedaempft); font-size: var(--gr-mittel); }

/* --- Aenderbare Zellen -------------------------------------------------- */

.preisfeld {
  width: 100%;
  min-width: 96px;
  min-height: 44px;
  padding: 4px 8px;
  font: inherit;
  /* 16px, sonst zoomt iOS beim Hineintippen die ganze Seite -- in einer
     breiten Tabelle verliert man danach die Spalte aus dem Blick. */
  font-size: 16px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  background: transparent;
  /* Immer als Feld erkennbar: Fruehere Fassungen zeigten den Rahmen erst
     beim Ueberfahren -- auf Tablet und Handy gibt es kein Ueberfahren, die
     Felder waren dort unsichtbar. Eine Grundlinie genuegt, ein voller
     Rahmen je Zelle machte die Tabelle unruhig. */
  border: 0;
  border-bottom: 1px dashed var(--rand-bedienung);
  border-radius: 0;
}
.preisfeld:hover { border-bottom-style: solid; border-bottom-color: var(--text-leise); }
.preisfeld:focus {
  background: var(--feld-grund);
  border-bottom: 2px solid var(--markierung);
  outline: none;
}
.preisfeld:focus-visible { outline: none; }

.spalte-status { white-space: nowrap; }

.statusmarke {
  display: inline-flex;
  align-items: center;
  gap: var(--abstand-2);
  min-height: 44px;
  padding: 0 var(--abstand-2);
  cursor: pointer;
  color: var(--text-leise);
  border-radius: var(--ecke);
}
.statusmarke:hover { color: var(--text-gedaempft); }

.statusmarke.verkauft { color: var(--text); font-weight: 600; }

/* Rueckmeldung in der Zelle, nicht am Seitenanfang. */
td.laeuft { opacity: .55; }

td.gespeichert { animation: kurzBestaetigt 1.4s var(--ausklang); }
@keyframes kurzBestaetigt {
  0%, 35% { background: rgba(242, 242, 240, .14); }
  100% { background: transparent; }
}

td.schiefgegangen { background: var(--markierung-grund); }

.zellfehler {
  margin-top: 4px;
  font-size: var(--gr-klein);
  font-weight: 600;
  color: var(--text);
  text-align: left;
  /* Der Grund darf die Spalte nicht sprengen; lieber umbrechen. */
  white-space: normal;
  max-width: 180px;
}

/* Mittlere Breiten: die Tabelle scrollt in ihrem eigenen Kasten, statt die
   ganze Seite zu verschieben. */
@media (max-width: 1180px) {
  .tabellenrahmen { overflow-x: auto; }
  thead th { top: 0; }
  .spalte-aussen { display: none; }
}

/* Handy: jede Zeile als Karte. Die Tabelle bleibt Tabelle im Code --
   Lesehilfen bekommen weiterhin Zeilen und Spalten. */
@media (max-width: 760px) {
  main.breit { padding: var(--abstand-4) var(--abstand-4) var(--abstand-7); }
  .listenkopf h1 { font-size: var(--gr-titel); }
  .filter { gap: var(--abstand-3); }
  .filter label { flex: 1 1 140px; }
  .filter select, .filter input,
  .filter label:first-child select { min-width: 0; width: 100%; }

  .tabellenrahmen { overflow: visible; }
  table, tbody { display: block; }
  thead { display: none; }

  tbody tr.anklickbar {
    display: grid;
    grid-template-columns: 96px 1fr 1fr 1fr;
    grid-template-areas:
      "bild titel titel titel"
      "bild mass  mass  mass"
      "p1   p2    p3    p3"
      "status status eingang eingang";
    gap: var(--abstand-2) var(--abstand-3);
    padding: var(--abstand-4) 0;
    border-bottom: 1px solid var(--rand);
  }
  tbody tr.anklickbar > td { display: block; padding: 0; border: 0; }
  /* Nach Klassen statt Spaltennummern: Eine neue Spalte verschiebt sonst
     stillschweigend jede Zuordnung. */
  tbody tr.anklickbar > .spalte-bild { grid-area: bild; }
  tbody tr.anklickbar > .spalte-titel { grid-area: titel; }
  tbody tr.anklickbar > .spalte-mass { grid-area: mass; align-self: end; }
  tbody tr.anklickbar > .spalte-aussen { display: none; }
  tbody tr.anklickbar > [data-name="Blatt"] { grid-area: p1; }
  tbody tr.anklickbar > [data-name="Gerahmt"] { grid-area: p2; }
  tbody tr.anklickbar > [data-name="Mindest"] { grid-area: p3; }
  tbody tr.anklickbar > .spalte-status { grid-area: status; }
  tbody tr.anklickbar > .spalte-eingang { grid-area: eingang; text-align: right; }

  .spalte-bild { width: auto; }
  .vorschau { width: 96px; height: 90px; }
  .vorschau-leer { width: 84px; height: 84px; }
  .spalte-titel { min-width: 0; }

  /* Ohne Tabellenkopf traegt jede Preiszelle ihren Namen selbst. */
  td.spalte-preis { text-align: left; }
  td.spalte-preis::before {
    content: attr(data-name);
    display: block;
    font-size: var(--gr-klein);
    font-stretch: var(--schmal);
    color: var(--text-leise);
  }
  .preisfeld { min-width: 0; text-align: left; padding-left: 0; }
  .leerzeile, .leerzeile td { display: block; }
}

/* --- Detailansicht eines Werks ------------------------------------------ */

main.detail { max-width: 1320px; padding: var(--abstand-5) var(--abstand-4) 0; }

.werkkopf { margin-bottom: var(--abstand-4); }
#werk-titel {
  font-size: var(--gr-titel);
  letter-spacing: -0.02em;
  margin: 0 0 2px;
}
#werk-kuenstler { margin: 0; color: var(--text-gedaempft); font-size: var(--gr-mittel); }

.detailbild-rahmen {
  position: relative;
  display: grid;
  place-items: center;
  padding: var(--abstand-5) var(--abstand-5) var(--abstand-6);
  background: var(--bildgrund);
  border-radius: var(--ecke);
  margin-bottom: var(--abstand-3);
}

/* Die Inventarnummer als Randdruck in der unteren Kante des Abzugs. */
.detailbild-rahmen .randdruck {
  position: absolute;
  left: var(--abstand-5);
  bottom: 6px;
  padding: 0;
  font-size: var(--gr-text);
}

.detailbild {
  display: block;
  max-width: 100%;
  max-height: 52vh;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55);
}

.foto-aktionen { display: flex; gap: var(--abstand-3); margin: 0 0 var(--abstand-5); }
.foto-aktionen .knopf { flex: 1; min-height: 44px; font-size: 0.9375rem; }

/* Breite Bildschirme: Bild links und haftend, Felder rechts. Ein
   Kunstkatalog, der sein Werk 320 Punkte hoch zeigt, verschenkt den Platz,
   den ein Laptop hat. */
@media (min-width: 1000px) {
  #werkform {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(380px, 1fr);
    gap: var(--abstand-7);
    align-items: start;
  }
  .bildspalte {
    position: sticky;
    top: calc(var(--kopf-hoehe) + var(--abstand-5));
  }
  .detailbild { max-height: calc(100vh - var(--kopf-hoehe) - 320px); }
  /* Die Leiste liegt nur ueber der Feldspalte -- ueber beide Spalten
     gelegt, verdeckte sie "Ecken korrigieren" und "Foto austauschen".
     Linke Spalte = (Breite - Abstand) * 1,15 / 2,15, plus der Abstand. */
  .detail .leiste.haftend { margin-left: calc((100% - 48px) * 0.5349 + 48px); }
}

#werkform fieldset {
  border: 0;
  border-top: 1px solid var(--rand);
  margin: 0;
  padding: var(--abstand-4) 0 var(--abstand-5);
  min-width: 0;
}
.feldspalte > fieldset:first-child { border-top: 0; padding-top: 0; }

#werkform legend {
  padding: 0;
  margin-bottom: var(--abstand-2);
  font-weight: 650;
  font-size: var(--gr-mittel);
  color: var(--text);
  float: left;
  width: 100%;
}
#werkform legend + * { clear: both; }

#werkform label {
  display: flex;
  align-items: center;
  gap: var(--abstand-3);
  margin: var(--abstand-2) 0;
  color: var(--text-gedaempft);
}

/* Feste Breite fuer die Beschriftung: Ohne sie beginnt jedes Eingabefeld an
   einer anderen Stelle ("Kuenstler" gegen "Entstehungsjahr"), und die linke
   Feldkante franst ueber das ganze Formular aus.

   Drei Spalten statt flex: Der Beschriftungstext ist ein blosser Textknoten
   und wird vom Grid als eigenes Element behandelt -- damit landen Text, Feld
   und die Einheit ("mm", "EUR") verlaesslich in je einer Spalte. Labels ohne
   Einheit lassen die dritte Spalte leer, sie ist dann null breit. */
#werkform label:not(.haken) {
  display: grid;
  grid-template-columns: 136px 1fr auto;
  align-items: center;
}

#werkform label > input:not([type="checkbox"]),
#werkform label > select,
#werkform label > textarea {
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
}

/* Ein Feld ohne eigene Beschriftung (die steht in der legend) fuellt die
   ganze Breite -- sonst landet sein einziges Kind in der schmalen
   Beschriftungsspalte. */
#werkform label.voll { grid-template-columns: 1fr; }

#werkform textarea { min-height: 96px; resize: vertical; line-height: 1.5; }

#werkform label.haken {
  min-height: 44px;
  color: var(--text);
  cursor: pointer;
}

.einheit {
  flex: none;
  min-width: 2ch;
  color: var(--text-leise);
  font-size: var(--gr-klein);
  font-stretch: var(--schmal);
}

.masspaar { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--abstand-5); }

.hinweis.klein { font-size: var(--gr-klein); margin: 0 0 var(--abstand-2); max-width: 60ch; }

/* Schmale Bildschirme: Beschriftung ueber dem Feld. Neben dem Feld blieben
   bei 390 Punkten Breite fuer den Inhalt keine 200 Punkte. */
@media (max-width: 640px) {
  #werkform label:not(.haken) {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    font-size: 0.9375rem;
  }
  #werkform label:not(.haken) > input,
  #werkform label:not(.haken) > select,
  #werkform label:not(.haken) > textarea { grid-column: 1; }
  #werkform label:not(.haken) > .einheit { grid-column: 2; grid-row: 2; }
  .masspaar { grid-template-columns: 1fr 1fr; gap: 0 var(--abstand-3); }
  .foto-aktionen .knopf { padding: 0 var(--abstand-2); }
}

/* Deutlicher Abstand zu den Feldern darueber -- eine destruktive Aktion
   soll nicht neben "Speichern" wirken wie ein weiteres Formularfeld. */
.gefahrenzone {
  margin: var(--abstand-6) 0 var(--abstand-5);
  padding-top: var(--abstand-5);
  border-top: 1px solid var(--rand);
}

/* Die Rueckmeldung steht in der Leiste, nicht am Seitenanfang: Wer unten
   auf Speichern drueckt, schaut nach unten. Eine Meldung ausserhalb des
   Blickfelds laesst einen funktionierenden Knopf tot aussehen. */
.leiste.haftend p {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 0.875rem;
  color: var(--text-leise);
}
.leiste.haftend .knopf { flex: 0 1 180px; }
.leiste.haftend #meldung.offen { color: var(--text); font-weight: 600; }

/* Am Handy steht die Rueckmeldung ueber den Knoepfen statt zwischen ihnen
   eingeklemmt -- neben zwei Knoepfen blieben ihr keine 80 Punkte. */
@media (max-width: 640px) {
  .leiste.haftend { flex-wrap: wrap; row-gap: var(--abstand-2); }
  .leiste.haftend p { flex-basis: 100%; }
  .leiste.haftend .knopf { flex: 1 1 0; }
}
.leiste.haftend #meldung.offen::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--markierung);
  vertical-align: 1px;
}

/* Overlay fuer Ecken korrigieren / Foto austauschen -- ueberdeckt die Seite
   vollstaendig, damit "Uebernehmen" im Blickfeld der Handlung liegt. */
.foto-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: var(--grund);
  display: flex;
  flex-direction: column;
  padding: var(--abstand-4);
  padding-bottom: calc(var(--abstand-4) + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.foto-overlay-ansicht {
  display: flex;
  flex-direction: column;
  gap: var(--abstand-3);
  flex: 1;
  min-height: 0;
}

.foto-overlay #ecken-flaeche { flex: 1; height: auto; min-height: 300px; margin-inline: 0; border-radius: var(--ecke); }
.foto-overlay .leiste.haftend { margin-top: 0; }

#foto-overlay-vorschau-bild {
  background: var(--bildgrund);
  border-radius: var(--ecke);
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
#foto-overlay-vorschau-bild img { max-width: 100%; max-height: 100%; }