/* Daniel Man · Werkverzeichnis [dm_werkverzeichnis]. Begrenzte Runtime-Ausnahme wie Home 7C: Kamera, Hängung, Ansichtswechsel.
   Typografie, Farben und Abstände konsumieren das Wand-System (Variablen, globale Klassen werktitel, angabe, zwischentitel,
   seitenrahmen, werkkarte, bildzone; Filterleiste aus 2026-10-23-danielman-frontend.css). Die :where()-Regeln sind nur
   Rückfallwerte mit geringerer Spezifität als die nativen Klassen. Präfixe wv- und dm-wv-. Keine Akzentfarbe, keine Radien. */
.dm-wv { position: relative; display: flow-root; isolation: isolate; width: 100%; max-width: 100%; min-width: 0; color: var(--text, #1A1A18); font-family: var(--schrift, "Geist"), sans-serif; }
.dm-wv *, .dm-wv *::before, .dm-wv *::after { box-sizing: border-box; }
.dm-wv-sr, .dm-wv-js .dm-wv .wv-werkliste { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.dm-wv [hidden] { display: none !important; }
.dm-wv .wv-lineal { position: fixed; left: 0; top: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }
.dm-wv .wv-lineal-l { height: 100lvh; }
.dm-wv :where(.seitenrahmen) { width: 100%; padding-inline: var(--rand, 40px); }
@media (max-width: 1024px) { .dm-wv :where(.seitenrahmen) { padding-inline: var(--rand-tablet, 32px); } }
@media (max-width: 767px) { .dm-wv :where(.seitenrahmen) { padding-inline: var(--rand-mobil, 20px); } }
.dm-wv :where(.werktitel) { font-size: var(--typo-15, .9375rem); line-height: 1.4667em; font-style: italic; font-weight: 410; letter-spacing: .004em; color: var(--text, #1A1A18); }
.dm-wv :where(.angabe) { font-size: var(--typo-14, .875rem); line-height: 1.4286em; font-weight: 420; letter-spacing: .004em; color: var(--text-leise, #6A6862); }
.dm-wv :where(.zwischentitel) { font-size: var(--typo-15, .9375rem); line-height: 1.4667em; font-weight: 510; letter-spacing: .004em; margin: 0; }
.dm-wv a { color: inherit; text-decoration: none; }
.dm-wv a:focus-visible, .dm-wv button:focus-visible { outline: 2px solid var(--fokus, #1A1A18); outline-offset: 2px; }

/* Text erscheint nach dem Bild (Bewegungssprache „Kamera“) */
/* Bewegungswerte auf die Rollen des Systems (R2-12, B2 03.11.): kurz/mittel/lang, kurve für Weg, blende für Deckkraft und Farbe */
.dm-wv .wv-text { transition: opacity var(--dm-kurz, 200ms) var(--dm-blende, cubic-bezier(.2, 0, 0, 1)); }
.dm-wv[data-flug-text] .wv-ansicht .wv-text { opacity: 0; transition: none; }
/* N-6 (04.11.): Im Index kommen Linien und Text zusammen (Zeitpunkt im Skript, fliegen); vorher stand rund 200 ms eine leere Tabelle. */
.dm-wv .wv-indexgruppe ul, .dm-wv .wv-indexzeile { transition: border-color var(--dm-kurz, 200ms) var(--dm-blende, cubic-bezier(.2, 0, 0, 1)); }
.dm-wv[data-flug-text] .wv-ansicht :is(.wv-indexgruppe ul, .wv-indexzeile) { border-color: transparent; transition: none; }
.dm-wv[data-flug] .wv-ansicht img { visibility: hidden; }
/* Raster und Index (P1): noch nicht geladenes Bild nach dem Laden der Seite eingefügt; Platz steht (width/height), es blendet
   nach dem Laden ein (Skript), statt halb übertragen zeilenweise zu erscheinen */
.dm-wv img[data-wv-blende] { opacity: 0; }
/* D1 hybrid (Handybreite): die neue Wand blendet als eine Ebene ein und zeigt ihre Bilder; verborgen sind nur die Werke, die
   einzeln hereinfliegen. Die alte Wand geht als feste Ebene (.wv-ebene) über der neuen Ansicht. */
.dm-wv[data-flug-ebene] .wv-wandwerk[data-wv-fliegt] img { visibility: hidden; }
/* Im Flug tragen die Flugbilder die Werke; die Bildfarbe (Platzhalter, P1) der neuen Wand erscheint erst danach */
.dm-wv[data-flug] .wv-wandwerk, .dm-wv[data-flug-ebene] .wv-wandwerk[data-wv-fliegt] { background: none; }
/* N-1 (04.11.): Im Kameraflug fliegt das benannte Bild (kamera.js, benennen) als eigene Ebene; sein Halter bliebe mit der Bildfarbe in der
   Seite stehen und erschiene als zweite Platte neben dem Flugbild. Nur das Flugziel: Nachbarn und langsames Laden behalten den Platzhalter.
   !important wegen des Inline-Werts der Zeitleiste (zeigeStufe). */
html[data-dm-kamera] .dm-wv :is(.wv-wandwerk, .wv-hz-bild):has(img[style*="view-transition-name"]) { background: none !important; }
.dm-wv .wv-ebene { position: fixed; z-index: 3; overflow: hidden; pointer-events: none; }

/* ---------- Bedienung: Filterleiste wie bisher, ergänzt um Suche, Feinjahre und Größe ---------- */
.dm-wv[data-modus="home"] .wv-bedienung { display: none; }
.dm-wv .dm-filtergruppen > .wv-suchreihe { display: flex; align-items: baseline; gap: var(--spalte, 24px); }
.dm-wv .wv-suchreihe > .label { flex: 0 0 calc((100cqw - 11 * var(--spalte, 24px)) / 12); }
.dm-wv .wv-suche { display: flex; align-items: baseline; flex: 0 1 calc((100cqw - 11 * var(--spalte, 24px)) / 12 * 5 + 4 * var(--spalte, 24px)); min-width: 0; margin: 0; }
.dm-wv .wv-suche input[type="search"] {
  flex: 1 1 auto; min-width: 0; width: 100%; margin: 0; font: inherit; color: var(--text, #1A1A18); background: transparent; box-shadow: none;
  border: 0; border-bottom: 1px solid var(--text-leise, #6A6862); border-radius: 0; padding: 4px 0 6px; -webkit-appearance: none; appearance: none;
}
.dm-wv .wv-suche input[type="search"]::placeholder { color: var(--text-leise, #6A6862); opacity: 1; }
.dm-wv .wv-suche input[type="search"]:hover, .dm-wv .wv-suche input[type="search"]:focus { border-bottom-color: var(--text, #1A1A18); outline: none; }
/* B-02 (04.11.): Fokus ist die verstärkte Linie, kein Kasten; das Polster gleicht das zweite Pixel aus, nichts springt.
   Durchsichtiger Rahmen: im Modus erzwungener Farben (Windows) zeichnet der Browser ihn, dort bleibt der Fokus deutlich. */
.dm-wv .wv-suche input[type="search"]:focus-visible { outline: 2px solid transparent; border-bottom: 2px solid var(--fokus, #1A1A18); padding-bottom: 5px; }
/* B-01 (04.11.): iOS zoomt in Felder unter 16 px hinein */
@media (pointer: coarse) { .dm-wv .wv-suche input[type="search"] { font-size: 16px; } }
/* B-06 (04.11.): Löschzeichen im Ton der Bedienung statt Browserblau (Chrome) oder Rücktaste (WebKit); Firefox zeigt keines, dort „Suche löschen“. Am Finger breitere Fläche, das Kreuz bleibt rechts. */
.dm-wv .wv-suche input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; margin-inline-start: 8px; cursor: pointer; background: var(--text-leise, #6A6862);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") right center / 14px 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 2.5l9 9M11.5 2.5l-9 9' stroke='%23000' stroke-width='1.2' fill='none'/%3E%3C/svg%3E") right center / 14px 14px no-repeat; }
.dm-wv .wv-suche input[type="search"]::-webkit-search-cancel-button:hover { background: var(--text, #1A1A18); }
@media (pointer: coarse) { .dm-wv .wv-suche input[type="search"]::-webkit-search-cancel-button { width: 44px; height: 24px; margin-inline-start: 0; } }
/* Ohne Treffer bei der übrigen Auswahl: blass, nicht wählbar */
html body .dm-wv .dm-filterleiste :is(a, span).wv-leer { color: color-mix(in srgb, var(--text-leise, #6A6862) 45%, var(--grund, #F5F4F0)); cursor: default; text-decoration: none; }
html body .dm-wv .dm-filterleiste a.wv-leer .wv-info { color: inherit; }
html body .dm-wv .dm-filterleiste a:not(.dm-aktiv):not(.wv-leer):hover { color: var(--text, #1A1A18); }
/* Jahrzehnt offen (eines seiner Jahre gewählt) oder gezeigt (Zeiger/Fokus): dunkel, ohne Unterstrich */
html body .dm-wv .dm-filterleiste a:is(.wv-offen, .wv-gezeigt) { color: var(--text, #1A1A18); }
.dm-wv .wv-feinreihe > div { min-height: calc(var(--typo-15, .9375rem) * 1.6); padding-left: var(--wv-einzug, 0px); }
.dm-wv .wv-info { color: var(--text-leise, #6A6862); }
html body .dm-wv .dm-filterleiste a.dm-aktiv .wv-info { text-decoration: none; }
.dm-wv .dm-ansicht .wv-treffer, .dm-wv .dm-ansicht .wv-hinweis { color: var(--text-leise, #6A6862); text-align: right; }
html body .dm-wv .dm-ansicht .wv-zuruecksetzen { color: var(--text-leise, #6A6862); }
html body .dm-wv .dm-ansicht .wv-zuruecksetzen:hover { color: var(--text, #1A1A18); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .dm-wv .dm-filtergruppen > .wv-suchreihe { display: block; margin-top: 8px; }
  .dm-wv .wv-suche input[type="search"] { min-height: 44px; }
  .dm-wv .wv-feinreihe > .label { display: none; }
  .dm-wv .wv-feinreihe > div { padding-left: 0; }
  /* Mobil: „Filter“ links und Ansichtswahl rechts auf einer Grundlinie, Trefferzahl und Zurücksetzen darunter rechts;
     geöffnete Filterzeilen stehen in voller Breite dazwischen. */
  .dm-wv .dm-filterleiste { position: relative; display: block; }
  html body .dm-wv .dm-filterdetails summary { display: inline-block; min-height: 44px; padding-top: 10px; padding-right: 16px; }
  .dm-wv .dm-ansicht { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; column-gap: 16px; row-gap: 0; }
  .dm-wv .dm-ansicht > nav { position: absolute; top: 0; right: 0; }
}
/* Mobil zeichnet Chrome /werke/ mitunter, bevor das Modulskript die Filterleiste zuklappt (Server-Markup: open); bis dahin
   bleiben die Filtergruppen verborgen, sonst springt die Ansicht beim Zuklappen um rund 360 px (H1, CLS 0,02 bis 0,31) */
@media (max-width: 767px) { .dm-wv-js .dm-wv:not(.wv-bereit) .dm-filterdetails > .dm-filtergruppen { display: none; } }
/* Touch: die Live-Regel zieht Filterlinks um 10 px nach oben (größere Trefferfläche); die Ansichtswahl folgt der Grundlinie von „Filter“ */
@media (max-width: 767px) and (pointer: coarse) {
  .dm-wv .dm-ansicht > nav { top: 10px; }
  .dm-wv .dm-ansicht > p { margin: 0; }
}

/* R5-07 (04.11.): Wo „Filter“ als Knopf steht (Handy, Zeitleiste), steht die Anzahl daneben: „Filter · 363 Werke“, die Ansichten rechts.
   Bei aktivem Filter bleibt sie rechts über „Zurücksetzen“. Offene Leiste: Anzahl auf der Grundlinie von „Jahr“ (Suchzeile ist 7 px höher
   als die Ansichtszeile: Innenabstand unten und Linie des Felds, unabhängig von der Schriftskala). */
.dm-wv .wv-filter-n { display: none; color: var(--text-leise, #6A6862); }
.dm-wv .wv-filter-n::before { content: "\00a0·\00a0"; }
.dm-wv .wv-bedienung:focus { outline: none; }
@media (max-width: 767px) {
  /* WE-1: vier Ansichten brauchen mobil den Platz der Anzahl; Filter bleibt links. */
  .dm-wv .dm-ansicht:not(:has(.wv-reset:not([hidden]))) .wv-treffer { display: none; }
}
@media (min-width: 768px) {
  .dm-wv .dm-ansicht .wv-treffer { margin-top: 7px; }
  :is(.dm-wv.wv-filter-kompakt, .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit)) .wv-filter-n:not(:empty) { display: inline; }
  :is(.dm-wv.wv-filter-kompakt, .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit)) .dm-ansicht .wv-treffer { margin-top: 0; }
  :is(.dm-wv.wv-filter-kompakt, .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit)) .dm-ansicht:not(:has(.wv-reset:not([hidden]))) .wv-treffer { display: none; }
  /* Der Umschalter springt beim Wechsel Raster → Zeitleiste nicht: „Filter“ steht auf der Grundlinie der Suchzeile (Innenabstand oben des Felds) */
  html body :is(.dm-wv.wv-filter-kompakt, .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit)) .dm-filterdetails summary { padding-top: 4px; }
}

/* Ansichtswahl vor den Filtern in der Tab-Reihenfolge (UX1, 01.11.): im Markup steht .dm-ansicht jetzt zuerst, sichtbar bleibt
   sie rechts (Desktop) bzw. unter „Filter“ (Handy, Spalte statt Block, gleiche Abstände) */
.dm-wv .dm-filterleiste > .dm-ansicht { order: 1; }
/* N-8 (04.11.): Zeichnet der Browser, solange nur die Ansichtswahl im Dokument steht, bleibt sie schon rechts. Danach nimmt der Filterblock (flex: 1) den Platz, der Rand wirkt nicht mehr. */
@media (min-width: 768px) { .dm-wv .dm-filterleiste > .dm-ansicht { margin-inline-start: auto; } .dm-wv .dm-filterleiste { position: relative; } }   /* relative: Bezug für das Abbild der Filterzeilen (N-5, Skript) */
@media (max-width: 767px) { .dm-wv .dm-filterleiste { display: flex; flex-direction: column; row-gap: 0; } }

/* Kompakte Zeile (UX-06, 01.11.): tief in Raster und Index beim Hochscrollen oben, unter dem gerade sichtbaren Kopf
   (Schnittstelle des globalen Kopfverhaltens, P2-C: --dm-kopf-oben = Adminleiste, mobil 0; --dm-kopf-sicht = sichtbare Kopfhöhe oder 0) */
/* B2 (03.11., Johannes „Kopflinie durchsichtig“): Die Zeile hängt fest unter der Kopfstelle und fährt mit derselben Bewegung wie der
   Kopf (translate, kurz/kurve) hinter ihm herein und hinaus, immer deckend. Vorher stand sie per top sofort unter dem noch
   hereinfahrenden Kopf (bis 46 px Spalt mit Bildern) und blendete beim Gehen halbtransparent aus. */
/* Spalt (B2, Johannes 03.11.): Bei unrunder Kopfhöhe (über 1440 px Breite) und DPR 1,25/1,5 fiel die Kante auf eine halbe
   Gerätezeile; durch sie schienen die Bildoberkanten als farbiger Strich. Die Zeile liegt deshalb 1 px unter dem Kopf (er deckt sie,
   z-index 20 über 19), oben 1 px mehr Innenabstand: Schrift und Unterkante bleiben, wo sie waren. */
.dm-wv .wv-kompakt { position: fixed; left: 0; right: 0; top: calc(var(--dm-kopf-oben, 0px) + var(--dm-kopf-h, 0px) - 1px); z-index: 19; display: flex; align-items: baseline; gap: 12px;
  padding-block: 11px 10px; background: var(--grund, #F5F4F0); border-bottom: 1px solid var(--linie, #DDDBD5); translate: 0 calc(-100% - var(--dm-kopf-h, 0px) - 2px); transition: translate var(--dm-kurz, 200ms) var(--dm-kurve, cubic-bezier(.2,.7,.2,1)); }
.dm-wv .wv-kompakt.ist-da { translate: none; }
@starting-style { .dm-wv .wv-kompakt.ist-da { translate: 0 calc(-100% - var(--dm-kopf-h, 0px) - 2px); } }
/* R5-03 (04.11.): dieselbe Zeile, dieselben Maße wie die Bedienleiste oben (Schrift wie .dm-filterleiste, Ansichten als Textfluss) */
.dm-wv .wv-kompakt { font-size: var(--typo-15, .9375rem); line-height: 1.6em; font-weight: 410; letter-spacing: .004em; }
.dm-wv .wv-kompakt > nav { display: block; }
.dm-wv .wv-kompakt-trenner { margin-inline: -8px; }
html body .dm-wv .wv-kompakt a, html body .dm-wv .wv-kompakt .wv-kompakt-n, .dm-wv .wv-kompakt [aria-hidden] { color: var(--text-leise, #6A6862); text-decoration: none; }
html body .dm-wv .wv-kompakt a:is(.dm-aktiv, [aria-current]), html body .dm-wv .wv-kompakt a:hover { color: var(--text, #1A1A18); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dm-wv .wv-kompakt-filter { appearance: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; font: inherit; color: var(--text, #1A1A18); cursor: pointer; min-height: 24px; }
.dm-wv .wv-kompakt-filter:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; background: none; color: var(--text, #1A1A18); }
.dm-wv .wv-kompakt > nav { margin-left: auto; }   /* Johannes 03.11.: Ansichten rechts, wie in der Bedienleiste oben */
/* ?leiste=alt: Stand davor (Filter · Ansichten, Anzahl rechts ohne Trenner) */
html[data-dm-leiste-alt] .dm-wv .wv-kompakt > nav { margin-left: 0; order: 1; }
html[data-dm-leiste-alt] .dm-wv .wv-kompakt-n { margin-left: auto; order: 2; }
@media (max-width: 767px) { .dm-wv .wv-kompakt { gap: 8px; } .dm-wv .wv-kompakt-trenner { margin-inline: -4px; } .dm-wv .wv-kompakt .wv-kompakt-weg { display: none; } html body .dm-wv .wv-kompakt :is(a, button) { min-height: 44px; display: inline-flex; align-items: center; } .dm-wv .wv-kompakt { padding-block: 1px 0; } }

/* ---------- Raster: Werkkarte (feste Bildzone, Werk vollständig unten links) ---------- */
.dm-wv .wv-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--wv-zg) var(--wv-sp); }
.dm-wv .wv-raster > li { margin: 0; min-width: 0; }
.dm-wv .wv-raster .werkkarte { display: flex; flex-direction: column; min-width: 0; }
.dm-wv .wv-raster :where(.bildzone) { position: relative; display: flex; align-items: flex-end; aspect-ratio: 322 / 320; max-height: 46svh; }
.dm-wv .wv-raster .bildzone img { position: absolute; left: 0; bottom: 0; display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; background: no-repeat 0 0 / 100% 100%; }
.dm-wv .wv-raster .werktitel { margin-top: .5rem; overflow-wrap: anywhere; }
.dm-wv .wv-raster .werkkarte:is(:hover, :focus-visible) .werktitel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* B-08 (04.11.): Der Tastaturfokus umfasst das Werk, nicht die ganze Spalte mit leerem Rahmen daneben: 2 px im Abstand 2 px wie überall, Titel unterstrichen (wie beim Zeigen).
   Die Karte gibt solange ihre Zeichengrenze auf (content-visibility schnitte den Rand am Bild ab). Durchsichtiger Rahmen am Link: bei erzwungenen Farben zeichnet ihn der Browser. */
.dm-wv .wv-raster .werkkarte:focus-visible { outline: 2px solid transparent; content-visibility: visible; }
.dm-wv .wv-raster .werkkarte:focus-visible img { outline: 2px solid var(--fokus, #1A1A18); outline-offset: 2px; }
@media (min-width: 2200px) { .dm-wv .wv-raster { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1024px) { .dm-wv .wv-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .dm-wv .wv-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dm-wv .wv-raster :where(.bildzone) { aspect-ratio: 167 / 180; } }
/* Karten außerhalb des Fensters setzt der Browser nicht (Laden, Ansichtswechsel). Geschätzte Höhe wie oben: Bildzone aus
   Spaltenbreite und Format, darunter Titel und Datierung in je einer Zeile; nach dem ersten Zeichnen gilt die echte Höhe.
   content-visibility steht auf dem Link selbst, damit sein Fokusrahmen nicht abgeschnitten wird.
   Abstandhalter (Fix C): ein noch ungefüllter Abschnitt ist eine Zeile über alle Spalten mit genau der Höhe seiner Reihen
   aus derselben Schätzung (--wv-kh) und demselben Zeilenabstand (--wv-zg); --wv-reihen setzt das Skript. */
.dm-wv .wv-raster { container-type: inline-size; --wv-n: 4; --wv-sp: var(--spalte, 24px); --wv-zg: var(--block, 64px); --wv-bz: 320 / 322;
  --wv-kh: calc(min((100cqw - (var(--wv-n) - 1) * var(--wv-sp)) / var(--wv-n) * var(--wv-bz), 46svh) + 50px + 12 * var(--dm-wf, 0px)); }
.dm-wv .wv-raster .werkkarte { content-visibility: auto; contain-intrinsic-block-size: auto var(--wv-kh); }
.dm-wv .wv-raster > .wv-abstand { grid-column: 1 / -1; height: calc(var(--wv-reihen, 1) * (var(--wv-kh) + var(--wv-zg)) - var(--wv-zg)); }
@media (min-width: 2200px) { .dm-wv .wv-raster { --wv-n: 5; } }
@media (max-width: 1024px) { .dm-wv .wv-raster { --wv-n: 3; --wv-zg: 48px; } }
@media (max-width: 767px) { .dm-wv .wv-raster { --wv-n: 2; --wv-sp: 16px; --wv-zg: 32px; --wv-bz: 180 / 167; } }
/* Eigene Gruppe der Wandarbeiten und Installationen (M1 c) am Ende des Rasters, ruhige Zwischenüberschrift wie die Indexjahre */
.dm-wv .wv-rastergruppe { margin-top: var(--block, 64px); }
.dm-wv .wv-rastergruppe > .zwischentitel { padding-bottom: var(--element, 16px); }

/* ---------- Index: nach Jahren, Zeilen im 12er-Raster mit Haarlinien, kleine Abbildung vor dem Titel (A10 a) ---------- */
/* Zeilen außerhalb des Fensters: geschätzte Inhaltshöhe --wv-zi (Abbildung bzw. mobil drei Textzeilen), dazu Innenabstand
   --wv-zp und Haarlinie; Fix C korrigiert die Schätzung auf die Inhaltshöhe (vorher 62 statt 49 px, mobil 114 statt 97 px).
   Ein ungefüllter Abschnitt (Abstandhalter) ist so hoch wie seine Zeilen. */
.dm-wv .wv-index { display: flex; flex-direction: column; gap: var(--block, 64px); --wv-zi: calc(36px + 9 * var(--dm-wf, 0px)); --wv-zp: calc(var(--typo-16, 1rem) * .375); }
.dm-wv .wv-index .wv-abstand { height: calc(var(--wv-reihen, 1) * (var(--wv-zi) + 2 * var(--wv-zp) + 1px)); }
.dm-wv .wv-indexgruppe .zwischentitel { padding-bottom: var(--eng, 8px); }
.dm-wv .wv-indexgruppe ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie, #DDDBD5); }
.dm-wv .wv-indexgruppe li { margin: 0; }
.dm-wv .wv-indexzeile { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--spalte, 24px); align-items: center; padding-block: var(--wv-zp); border-bottom: 1px solid var(--linie, #DDDBD5);
  content-visibility: auto; contain-intrinsic-block-size: auto var(--wv-zi); }
.dm-wv .wv-indexzeile > * { min-width: 0; overflow-wrap: anywhere; }
.dm-wv .wv-titelzelle { grid-column: 1 / 6; display: flex; align-items: center; gap: calc(var(--typo-16, 1rem)); }
.dm-wv .wv-indexzeile > [data-spalte="Datierung"] { grid-column: 6 / 8; }
.dm-wv .wv-indexzeile > [data-spalte="Technik"] { grid-column: 8 / 11; }
.dm-wv .wv-indexzeile > [data-spalte="Maße"] { grid-column: 11 / 13; }
.dm-wv .wv-mini { position: relative; flex: 0 0 calc(36px + 9 * var(--dm-wf, 0px)); height: calc(36px + 9 * var(--dm-wf, 0px)); }
.dm-wv .wv-mini img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: left center; }
.dm-wv .wv-indexzeile:hover .werktitel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media (max-width: 767px) {
  .dm-wv .wv-index { --wv-zi: 58px; --wv-zp: 8px; }   /* R5-05: Abbildungszeile und Maße; die Datierung steht nur, wenn sie abweicht */
  .dm-wv .wv-indexzeile { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
  .dm-wv .wv-indexzeile > * { grid-column: 1 !important; }
  .dm-wv .wv-indexzeile > [data-spalte] { padding-left: calc(36px + 16px); }
  .dm-wv .wv-indexzeile > [data-spalte="Technik"] { display: none; }
  .dm-wv .wv-indexzeile > [data-spalte]:empty { display: none; }
}
.dm-wv .wv-leer-hinweis p { margin: 0; }
html body .dm-wv .wv-leer-hinweis a { margin-left: .5em; color: var(--text, #1A1A18); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------- Wand ---------- */
.dm-wv .wv-wand { position: relative; }
.dm-wv .wv-scrollbox { position: relative; display: flow-root; }
.dm-wv .wv-buehne { position: relative; height: var(--wv-h, 70svh); overflow: clip; background: var(--grund, #F5F4F0); touch-action: pan-y pinch-zoom; }
.dm-wv .wv-wand[data-modus="home"]:not([data-ruhig]) .wv-buehne { position: sticky; top: var(--wv-top, 0px); }
/* Werke-Wand (P2-A): zwei Finger zoomen die Wand selbst (Skript), nicht die Seite; ein Finger scrollt die Seite weiter */
.dm-wv .wv-wand[data-modus="katalog"]:not([data-ruhig]) .wv-buehne { touch-action: pan-y; }
.dm-wv .wv-sicht { position: absolute; inset: 0; overflow: hidden; }
/* Weiche Ränder (H1): oben unter dem Kopf und unten am Fensterrand laufen die Werke in einem kurzen Verlauf in Wandfarbe aus
   statt an einer harten Kante. Zwei feste Flächen über der bewegten Wand (billiger als mask-image, das die Ebene in jedem
   Zoombild neu maskieren müsste). Der Überblick hält oben und unten mindestens diesen Abstand (OBEN/UNTEN im Skript). */
.dm-wv .wv-buehne::before, .dm-wv .wv-buehne::after { content: ""; position: absolute; left: 0; right: 0; z-index: 1; height: 24px; pointer-events: none; }
.dm-wv .wv-buehne::before { top: 0; background: linear-gradient(var(--grund, #F5F4F0), color-mix(in srgb, var(--grund, #F5F4F0) 0%, transparent)); }
.dm-wv .wv-buehne::after { bottom: 0; background: linear-gradient(color-mix(in srgb, var(--grund, #F5F4F0) 0%, transparent), var(--grund, #F5F4F0)); }
/* B2 (03.11., Johannes): oben feine Linie statt Verlauf, nur solange Werke über die Oberkante ragen (Skript: data-wv-oben); auf der
   Startseite zeichnet sie der Kopf (globales Frontend), dort entfällt dieses ::before. ?kopf=ohne-linie (html[data-dm-kopf-ohne-linie])
   zeigt den alten Verlauf. Unten bleibt der Verlauf zum Fensterrand. */
html:not([data-dm-kopf-ohne-linie]) .dm-wv .wv-buehne[data-wv-oben]::before { height: 1px; background: var(--linie, #DDDBD5); opacity: 0; }
html:not([data-dm-kopf-ohne-linie]) .dm-wv .wv-buehne[data-wv-oben="an"]::before { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { html:not([data-dm-kopf-ohne-linie]) .dm-wv .wv-buehne[data-wv-oben]::before { transition: opacity var(--dm-kurz, 200ms) var(--dm-blende, cubic-bezier(.2, 0, 0, 1)); } }
.dm-wv .wv-flaeche { position: absolute; left: 0; top: 0; margin: 0; padding: 0; list-style: none; transform-origin: 0 0; will-change: transform; }
.dm-wv .wv-wandwerk { position: absolute; left: 0; top: 0; margin: 0; padding: 0; }
/* Platzhalter (P1): bis das Bild da ist, steht an seiner Stelle die Hauptfarbe des Werks (--wv-f aus der Projektion), sonst
   ein leiser Ton der Wand. Das Bild deckt die Fläche danach genau; keine Animation, kein Weichzeichner. */
.dm-wv .wv-wandwerk { background: var(--wv-f, color-mix(in srgb, var(--text, #1A1A18) 7%, var(--grund, #F5F4F0))); }
/* Schleier (D2): am Anfang der Kamerafahrt deckt eine Fläche in Wandfarbe die Nachbarwerke, das Startwerk liegt darüber.
   Das Skript setzt nur seine Deckkraft (ein Element statt einer geerbten Variable auf rund 800).
   Größe und Lage setzt das Skript per transform (1 × 1 px skaliert), damit das Wachsen der Hängung kein Layoutsprung ist. */
.dm-wv .wv-schleier { position: absolute; left: 0; top: 0; z-index: 1; width: 1px; height: 1px; margin: 0; padding: 0; list-style: none; transform-origin: 0 0; background: var(--grund, #F5F4F0); pointer-events: none; }
.dm-wv .wv-wandwerk.wv-anker { z-index: 2; }
/* Fast deckender Schleier (ab 90 %, H1): er selbst fängt Zeiger und Klicks ab, die Nachbarn darunter sind nicht bedienbar */
.dm-wv .wv-schleier.wv-deckt { pointer-events: auto; cursor: default; }
.dm-wv .wv-wandwerk > a { display: block; width: 100%; height: 100%; }
.dm-wv .wv-wandwerk img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.dm-wv .wv-wandwerk img:not([src]) { visibility: hidden; }
/* Fokus auf der Wand (R2-09, B2 03.11.): bildschirmfest 2 px Ring mit 2 px Abstand wie überall (DESIGN.md). Ein Umriss wird vor dem
   Skalieren auf ganze Pixel gerundet (2 px / 4,6 → 1 px → mit der Wand 4,6 px); Schatten werden nicht gerundet. Der transparente
   Umriss bleibt für erzwungene Farben (dort zeichnet das System ihn). */
.dm-wv .wv-wandwerk a:focus-visible { outline: 2px solid transparent; outline-offset: 0;
  box-shadow: 0 0 0 calc(2px / var(--wv-z, 1)) var(--grund, #F5F4F0), 0 0 0 calc(4px / var(--wv-z, 1)) var(--fokus, #1A1A18); }
/* Bezug zur Bildunterschrift (R2-10, 04.11.): unter dem gezeigten Werk 1 px Linie in Textfarbe, 4 px Abstand, bildschirmfest wie der Fokusrahmen
   (Schatten werden beim Skalieren nicht gerundet); Bewegungssystem „Zustand unter dem Zeiger“. Das Bild selbst reagiert nicht. */
.dm-wv .wv-wandwerk[data-wv-gezeigt]::after { content: ""; position: absolute; left: calc(.5px / var(--wv-z, 1)); right: calc(.5px / var(--wv-z, 1)); top: 100%; margin-top: calc(4.5px / var(--wv-z, 1)); height: 0; box-shadow: 0 0 0 calc(.5px / var(--wv-z, 1)) var(--text, #1A1A18); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) { .dm-wv .wv-wandwerk[data-wv-gezeigt]::after { animation: wv-linie var(--dm-kurz, 200ms) var(--dm-blende, cubic-bezier(.2, 0, 0, 1)) both; } }
@keyframes wv-linie { from { opacity: 0; } }
/* I8 c: Lupe nur auf Werken, die der Klick heranholt */
.dm-wv .wv-buehne[data-heran] .wv-wandwerk a { cursor: zoom-in; }
.dm-wv .wv-buehne[data-heran] .wv-wandwerk a[data-gross] { cursor: pointer; }
/* Ziehen (P2-A, Aufgabe 8): hineingezoomt zeigt die freie Wand eine Hand, beim Ziehen die greifende; keine Textauswahl */
.dm-wv .wv-buehne[data-zieh] { cursor: grab; -webkit-user-select: none; user-select: none; }
.dm-wv .wv-buehne[data-zieht], .dm-wv .wv-buehne[data-zieht] * { cursor: grabbing !important; }
.dm-wv .wv-schild { position: absolute; left: 0; top: 0; z-index: 2; max-width: min(27rem, calc(100% - 24px)); background: var(--grund, #F5F4F0); padding: 2px 10px 6px 0; overflow-wrap: anywhere; }
.dm-wv .wv-schild a { display: flex; flex-direction: column; min-height: 44px; }
.dm-wv .wv-schild a:is(:hover, :focus-visible) .werktitel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* „Zurück zum Überblick“ (H1): nicht mehr sichtbar, nur für Tastatur und Screenreader; erscheint, solange er den Tastaturfokus
   hat. Zurück geht sonst über Klick auf die freie Wand, Escape oder Scrollen. */
.dm-wv .wv-ueberblick { position: absolute; right: var(--rand, 40px); bottom: 6px; z-index: 3; min-height: 44px; margin: 0; padding: 10px 0; appearance: none; background: none; border: 0; border-radius: 0; box-shadow: none; cursor: pointer;
  font: inherit; font-size: var(--typo-15, .9375rem); line-height: 1.6; font-weight: 410; letter-spacing: .004em; color: var(--text-leise, #6A6862); }
.dm-wv .wv-ueberblick:not(:focus-visible) { width: 1px; height: 1px; min-height: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.dm-wv .wv-ueberblick:hover, .dm-wv .wv-ueberblick:focus-visible { color: var(--text, #1A1A18); background: none; }
@media (max-width: 1024px) { .dm-wv .wv-ueberblick { right: var(--rand-tablet, 32px); } }
@media (max-width: 767px) { .dm-wv .wv-ueberblick { right: var(--rand-mobil, 20px); } }

/* Kopf auf der Startseite: klebt während der Kamerafahrt (unter einer festen Adminleiste), läuft danach mit der Bühne weg */
.dm-wv-kopf { position: sticky !important; top: var(--dm-wv-admin, 0px); z-index: 20; background: var(--grund, #F5F4F0); translate: 0 var(--dm-wv-kopf-y, 0px); }
/* Fuß auf der Startseite: liegt über dem leeren Bühnenrest, kompakter Abstand nach der letzten Reihe (wie Home 7C) */
.dm-wv-fuss { position: relative; z-index: 1; background: var(--grund, #F5F4F0); }
.dm-wv-fuss.elementor > .seitenrahmen { margin-block-start: 24px; }
/* Experiment ?fuss=einfahren (W1): in der Wand liegt der Fuß fest unter dem Fenster und fährt am Ende des Scrollwegs mit der
   Kamerakurve über die Wand ein; die Wand bleibt stehen. Inhalt und Aufbau des Fußes bleiben unverändert (Vorlage 1995). */
.dm-wv-fuss-einfahren { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0 !important; background: var(--grund, #F5F4F0); translate: 0 100%; transition: translate 600ms cubic-bezier(.2,.7,.2,1); }
.dm-wv-fuss-einfahren.dm-wv-fuss-da { translate: 0 0; }
/* I2-E2 (W2): bis das Modul den Fuß gebunden hat, liegt er wie eingefahren-versteckt unter dem Fenster (kein Aufblitzen) */
html.dm-wv-fuss-vorab :is(footer[data-elementor-type="footer"], .elementor-location-footer) { position: fixed !important; left: 0; right: 0; bottom: 0; z-index: 25; margin: 0 !important; translate: 0 100%; }
.dm-wv-fuss-einfahren.elementor > .seitenrahmen { margin-block-start: 24px; }
/* ?fuss=ueber (FU-1 a): der Fuß liegt auf der Wand; seine Kante läuft wie der Bühnenrand in 24 px Wandfarbe aus, statt Werke hart zu schneiden */
.dm-wv-fuss-ueber::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: linear-gradient(to top, var(--grund, #F5F4F0), transparent); pointer-events: none; }

/* ---------- Horizont (H1, aus Labor Z1): ein Werk groß mit Wandschild, darunter der Zeitstreifen ---------- */
.dm-wv .wv-hz { display: flex; flex-direction: column; height: var(--wv-hz-h, 70svh); user-select: none; -webkit-user-select: none; }
.dm-wv .wv-hz-werk { flex: 1 1 auto; min-height: 0; margin: 0; padding-top: var(--element, 16px); display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; column-gap: 48px;
  transition: opacity 400ms cubic-bezier(.2, 0, 0, 1); }
.dm-wv .wv-hz-werk.ist-weg { opacity: 0; transition-duration: 200ms; }
/* ZL-1: die ganze Bühne wischt waagerecht (Skript); senkrecht scrollt und zwei Finger zoomen der Browser. Touch-action schneidet sich mit den Vorfahren, deshalb überall pinch-zoom. Gezoomt schiebt der Browser frei. */
.dm-wv .wv-hz-flaeche { touch-action: pan-y pinch-zoom; }
.dm-wv .wv-hz-flaeche.wv-hz-zoom, .dm-wv .wv-hz-flaeche.wv-hz-zoom * { touch-action: auto; }
.dm-wv .wv-hz-bild { grid-column: 2; display: block; touch-action: pan-y pinch-zoom; -webkit-touch-callout: none; }
.dm-wv .wv-hz-bild img { display: block; max-width: none; -webkit-user-drag: none; }
.dm-wv .wv-hz-bild:focus-visible { outline-offset: 4px; }
/* Im Flug in den Horizont keine Bildfarbe am Ziel (P2-A): das Werk flog sonst über eine schon stehende Farbfläche; nach der
   Landung blendet sie ein (Skript, 250 ms). Blättern im Horizont bleibt wie bisher. */
.dm-wv[data-flug] .wv-hz-bild { background-color: transparent !important; }
.dm-wv .wv-hz-schild { grid-column: 3; justify-self: start; width: 240px; max-width: 100%; margin: 0; overflow-wrap: anywhere; }
.dm-wv .wv-hz-schild a { display: flex; flex-direction: column; min-height: 44px; }
.dm-wv .wv-hz-schild .werktitel { margin-bottom: 2px; }
/* R2-15 (B2): wie Wandschild und Raster nur der Titel kursiv, Angaben aufrecht (figcaption erbte sonst kursiv) */
.dm-wv .wv-hz-schild { font-style: normal; }
.dm-wv .wv-hz-schild a:is(:hover, :focus-visible) .werktitel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
/* Zeitstreifen: je Werk ein Strich, Höhe = Wandhöhe im Verhältnis zum höchsten Werk der Auswahl; ohne Maße oder raumbezogen
   drei leise Punkte über der Grundlinie (nicht maßstäblich, weder „klein“ noch „groß“). Langer Streifen (Handy): Striche
   3 px mit 1 px Abstand, der Streifen läuft mit dem Werk im Blick mit (Skript setzt transform). */
.dm-wv .wv-hz-leiste { position: relative; flex: 0 0 auto; margin-top: 40px; margin-bottom: 8px; padding-top: 4px; cursor: ew-resize; touch-action: pan-y pinch-zoom; outline-offset: 4px; overflow-x: clip; }
/* Langer Streifen: an beiden Rändern läuft er weich aus (feste Flächen in Wandfarbe, der Fokusrahmen bleibt sichtbar) */
.dm-wv .wv-hz-leiste.ist-lang::before, .dm-wv .wv-hz-leiste.ist-lang::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: 1; width: 16px; pointer-events: none; }
.dm-wv .wv-hz-leiste.ist-lang::before { left: 0; background: linear-gradient(90deg, var(--grund, #F5F4F0), color-mix(in srgb, var(--grund, #F5F4F0) 0%, transparent)); }
.dm-wv .wv-hz-leiste.ist-lang::after { right: 0; background: linear-gradient(270deg, var(--grund, #F5F4F0), color-mix(in srgb, var(--grund, #F5F4F0) 0%, transparent)); }
.dm-wv .wv-hz-band { position: relative; transition: transform 400ms cubic-bezier(.2, .7, .2, 1); }
.dm-wv .wv-hz-leiste.ist-gezogen .wv-hz-band { transition: none; }
.dm-wv .wv-hz-striche { display: flex; align-items: flex-end; justify-content: space-between; gap: 1px; height: 48px; }
.dm-wv .wv-hz-striche span { --f: var(--linie, #DDDBD5); flex: 1 1 0; min-width: 0; max-width: 12px; height: max(2px, calc(var(--h) * 100%)); background: var(--f); transition: background-color 200ms cubic-bezier(.2, 0, 0, 1); }
.dm-wv .wv-hz-band.ist-lang .wv-hz-striche { justify-content: flex-start; }
.dm-wv .wv-hz-band.ist-lang .wv-hz-striche span { flex: 0 0 3px; max-width: none; }
.dm-wv .wv-hz-striche span.wv-hz-ohne { height: 10px; background: linear-gradient(transparent 50%, var(--f) 0) 0 100% / 100% 4px; }
.dm-wv .wv-hz-striche span.ist-ueber { --f: var(--text-leise, #6A6862); }
/* Der aktive Strich wird sofort dunkel (auch beim schnellen Spulen), nur das Loslassen klingt nach */
.dm-wv .wv-hz-striche span.ist-aktiv { --f: var(--text, #1A1A18); transition: none; }
.dm-wv .wv-hz-band.ist-lang .wv-hz-striche span.ist-aktiv { outline: 1px solid var(--text, #1A1A18); }
.dm-wv .wv-hz-jahre { position: relative; height: 18px; margin-top: 8px; }
.dm-wv .wv-hz-jahre span { position: absolute; top: 0; white-space: nowrap; color: var(--text-leise, #6A6862); transition: color 200ms cubic-bezier(.2, 0, 0, 1); }
.dm-wv .wv-hz-jahre span.ist-jahr { color: var(--text, #1A1A18); }
.dm-wv .wv-hz-jahre span.ist-raus { visibility: hidden; }
/* Experiment D-3 Zeitleiste (?ansicht=zeitleiste, 03.11.): jedes Jahr ein Abschnitt mit 6 px Luft davor, eine Marke unter dem
   ersten Strich und, wo Platz ist, eine Jahreszahl, die zum ersten Werk des Jahres springt (Zeigen wie leise Links: Farbe auf text in kurz) */
.dm-wv .wv-hz-zeit .wv-hz-striche span.wv-hz-neu { margin-left: 6px; }
.dm-wv .wv-hz-zeit .wv-hz-jahre { height: 30px; margin-top: 0; }
.dm-wv .wv-hz-zeit .wv-hz-jahre span { padding: 10px 8px 4px 0; cursor: pointer; transition-duration: 200ms; }
/* Marke unter dem ersten Strich jedes Jahres, auch wo die Jahreszahl aus Platzgründen fehlt */
.dm-wv .wv-hz-zeit .wv-hz-striche span.wv-hz-j { position: relative; overflow: visible; }
.dm-wv .wv-hz-zeit .wv-hz-striche span.wv-hz-j::before { content: ""; position: absolute; left: 0; top: 100%; width: 1px; height: 6px; background: var(--text-leise, #6A6862); }
@media (hover: hover) { .dm-wv .wv-hz-zeit .wv-hz-jahre span:hover { color: var(--text, #1A1A18); } }
/* Beim Hineinfliegen wachsen die Striche aus der Grundlinie. Alle Striche stehen auf derselben Grundlinie (flex-end) und wachsen
   gleich: eine Animation am Streifen statt 325 einzelner (P1, L-06: sparte bei 4× CPU rund 80 ms Stilarbeit im Wechsel) */
.dm-wv .wv-hz-ein .wv-hz-striche { animation: wv-hz-wachsen 400ms cubic-bezier(.2, .7, .2, 1) 200ms both; transform-origin: 50% 100%; }
@keyframes wv-hz-wachsen { from { transform: scaleY(0); } }
/* NR-01 (04.11.): auch Tablet hochkant (gleiche Bedingung GESTAPELT im Skript) */
@media (max-width: 767px), (max-width: 1024px) and (orientation: portrait) {
  .dm-wv .wv-hz-werk { padding-top: 16px; grid-template-columns: minmax(0, 1fr); align-content: end; row-gap: 12px; }
  .dm-wv .wv-hz-bild, .dm-wv .wv-hz-schild { grid-column: 1; justify-self: start; }
  .dm-wv .wv-hz-schild { width: auto; }
  .dm-wv .wv-hz-leiste { margin-top: 20px; padding-block: 4px 6px; }
  .dm-wv .wv-hz-striche { height: 44px; }
}
.dm-wv .wv-hz-still :is(.wv-hz-werk, .wv-hz-band, .wv-hz-striche, .wv-hz-striche span, .wv-hz-jahre span) { transition: none; animation: none; }

/* ---------- Kameraflug zwischen den Ansichten ---------- */
.wv-flug { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
/* ---------- Intro der Startseite (I1 b „Schärfe“, I2): nur beim ersten Laden oder Neuladen (Kopfskript im PHP) ----------
   Kopf: nur die Kinder des Elementor-Kopf-Templates blenden ein (der Kopf selbst trägt Sticky und translate der Scrollkamera).
   Das Wandschild des Startwerks wartet, bis das Bild scharf ist (werkverzeichnis.js setzt data-wv-intro-schild). */
html[data-wv-intro] :is(header[data-elementor-type="header"], .elementor-location-header) > * { animation: dm-wv-kopf-ein 700ms cubic-bezier(.2,.7,.2,1) 150ms both; }
@keyframes dm-wv-kopf-ein { from { opacity: 0; translate: 0 -6px; } }
html[data-wv-intro]:not([data-wv-intro-schild]) .dm-wv .wv-schild { opacity: 0; }
html[data-wv-intro-schild="ein"] .dm-wv .wv-schild { animation: dm-wv-schild-ein 520ms cubic-bezier(.2,.7,.2,1) both; }
@keyframes dm-wv-schild-ein { from { opacity: 0; translate: 0 5px; } }

/* ---------- Wandschild a „Bildunterschrift“ (I1-S a, I2): Zeigen, Fokus und Heranholen in der Wand ----------
   Eine Zeile Titel, Datierung, Maße an fester Stelle unten links in der Bühne, im Abstand UNTEN unter der Wand (Skript) und
   über dem eingefahrenen Fuß (--wv-fh, fährt mit derselben Kurve). Ohne Fläche, fängt keinen Zeiger ab, für Screenreader
   verborgen (die Werklinks tragen dieselben Angaben). Das Startwerk behält beim Einstieg sein Schild am Werk (I1-S b). */
.dm-wv .wv-zeile { position: absolute; left: var(--wv-rand, 40px); right: var(--wv-rand, 40px); bottom: 8px; z-index: 2; display: flex; flex-wrap: wrap; align-items: baseline; min-width: 0; margin: 0; white-space: normal; pointer-events: none; transition: translate 600ms cubic-bezier(.2,.7,.2,1); }
.dm-wv.wv-fuss-da .wv-zeile { translate: 0 calc(-1 * var(--wv-fh, 0px)); }
.dm-wv .wv-zeile .werktitel { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dm-wv .wv-zeile .angabe { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.dm-wv .wv-zeile .angabe::before { content: ",\00a0"; }
.dm-wv .wv-zeile .angabe:empty { display: none; }

/* ---------- Horizont: Filterzeilen zugeklappt (H1-b, I2; seit R5-07 auf allen Fensterhöhen) ----------
   Bis 1100 px Fensterhöhe bekäme das große Werk mit offener Filterleiste nur 38 bis 48 % der Höhe (gemessen 1280 × 720 bis
   2000 × 1100); zugeklappt gewinnt es 75 bis 95 px. „Filter“ öffnet und schließt (details/summary, Zustand für Screenreader
   nativ); Trefferzahl und Zurücksetzen bleiben sichtbar. Am Handy galt das Zuklappen schon für alle Ansichten. */
@media (min-width: 768px) {
  html body :is(.dm-wv.wv-filter-kompakt, .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit)) .dm-filterdetails summary { display: inline-block; list-style: none; min-height: 24px; cursor: pointer; margin-bottom: 0; }
  html body .dm-wv.wv-filter-kompakt .dm-filterdetails summary::-webkit-details-marker { display: none; }
  html body .dm-wv.wv-filter-kompakt .dm-filterdetails[open] summary { margin-bottom: 8px; }
  /* Zu ist zu, auch wenn ein anderes Skript details.open setzt (das Seitenskript 2026-10-23-danielman-frontend.js öffnet die
     Leiste am Desktop am Dokumentende; ohne diese Regel ging sie dort für einen Frame auf, CLS 0,096 bei 1440 × 900) */
  html body .dm-wv.wv-filter-kompakt:not(.wv-filter-offen) .dm-filterdetails > .dm-filtergruppen { display: none; }
}
/* Bis das Modulskript läuft, sind die Filterzeilen im Horizont dieser Höhen schon zu (kein Zuklappen nach dem ersten Zeichnen) */
@media (min-width: 768px) { .dm-wv-js .dm-wv[data-ansicht="horizont"]:not(.wv-bereit) .dm-filterdetails > .dm-filtergruppen { display: none; } }

.wv-flug img { position: absolute; display: block; max-width: none; margin: 0; object-fit: fill; transform-origin: 0 0; will-change: transform, opacity; }

/* ---------- Ohne JavaScript: lesbare Werkliste der Startseite; die Wand braucht das Skript ---------- */
.dm-wv .wv-werkliste { padding-block: var(--block, 64px); }
.dm-wv .wv-werkliste ul { list-style: none; margin: 0; padding: 0; columns: 2 20rem; column-gap: var(--spalte, 24px); }
.dm-wv .wv-werkliste li { break-inside: avoid; margin: 0; }
/* Mit JavaScript nur für Screenreader: außerhalb des Fensters und ohne Spalten, damit der Browser die 325 Links beim Laden
   nicht setzt (content-visibility; das kostete sonst rund 100 ms des ersten Layouts bei 4× CPU). Lesbar und fokussierbar bleibt sie. */
.dm-wv-js .dm-wv .wv-werkliste { left: -200vw; top: 0; }
.dm-wv-js .dm-wv .wv-werkliste ul { columns: auto; content-visibility: auto; contain-intrinsic-size: auto 1px auto 1px; }
.dm-wv .wv-werkliste a { display: inline-block; padding-block: 6px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dm-wv-js .dm-wv:is([data-ansicht="wand"], [data-ansicht="horizont"]) .wv-grundstock { display: none; }
.dm-wv-editor { padding-block: var(--block, 64px); }

@media (prefers-reduced-motion: reduce) {
  .dm-wv .wv-text { transition: none; }
  .dm-wv .wv-flaeche { will-change: auto; }
  .dm-wv-kopf { translate: none; }
  .dm-wv-fuss-einfahren { transition: none; }
  .dm-wv .wv-zeile { transition: none; }
  .dm-wv .wv-kompakt { transition: none; }
  html[data-wv-intro] :is(header[data-elementor-type="header"], .elementor-location-header) > *, html[data-wv-intro-schild] .dm-wv .wv-schild { animation: none; opacity: 1; }
  .dm-wv :is(.wv-hz-werk, .wv-hz-band, .wv-hz-striche span, .wv-hz-jahre span) { transition: none; }
  .dm-wv .wv-hz-ein .wv-hz-striche { animation: none; }
}