/* X1/X4/X5/X7: nur Runtime-Verbraucher; native Atomic-Klassen bleiben im Kit. Aktualisiert 28.10. */

/* Schrift Geist (SIL OFL 1.1, Google Fonts v5), selbst gehostet mit OFL.txt in uploads/danielman-fonts/geist/:
   variable Gewichtsachse 100–900, echte Kursive, Subsets latin und latin-ext. Native Font-Variable schrift = Geist;
   in Elementor als Systemschrift registriert (2026-10-23-danielman-frontend.php). Kein Google-CDN (28.10.). */
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Geist"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-italic-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:"Geist"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-italic-latin.woff2") format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ← → fehlen in Googles Latin-Subset; eigener Geist-Schnitt nur mit diesen zwei Zeichen (sonst Fallback-Pfeil). */
@font-face { font-family:"Geist"; font-style:normal; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-pfeile.woff2") format("woff2"); unicode-range:U+2190, U+2192; }
@font-face { font-family:"Geist"; font-style:italic; font-weight:100 900; font-display:swap; src:url("/wp-content/uploads/danielman-fonts/geist/geist-italic-pfeile.woff2") format("woff2"); unicode-range:U+2190, U+2192; }

/* Großbild-Skala „zurückhaltend“ (Johannes, Labor 28.10.; Formeln in 01_WORKING/labor/README.md „Skalenformeln“).
   Dokumentierte Runtime-Ausnahme: native Size-Variablen brauchen die Pro-Lizenz (Feature size-variable);
   bis dahin hält diese Datei die Skala an EINER Stelle. Bis 1440 px gelten exakt die Figma-/Kitwerte.
   Darüber linear bis 3072, dann gehalten: f = (vw − 1440)/1632 ∈ [0, 1], hier als Länge --dm-wf (0px … 1px).
   Typo-Einheit tu = 1 + 0,25·f (Schriften, Zeilenhöhen in em, Abstände in Textgruppen als Vielfache von typo-16);
   Raum-Einheit su = 1 + 0,5·f (rand/spalte/abschnitt/block/element/eng, native Variablen, erst über 1440 überschrieben).
   Jeder Wert = Basis + Zuwachs·f, z. B. typo-15 = 0,9375rem + 15·0,25·f. Entfernen, sobald native Size-Variablen pflegbar sind. */
html:root {
  --dm-wf: clamp(0px, (100vw - 1440px) / 1632, 1px);
  --typo-13: calc(0.8125rem + 3.25 * var(--dm-wf));
  --typo-14: calc(0.875rem + 3.5 * var(--dm-wf));
  --typo-15: calc(0.9375rem + 3.75 * var(--dm-wf));
  --typo-16: calc(1rem + 4 * var(--dm-wf));
  --typo-18: calc(1.125rem + 4.5 * var(--dm-wf));
  --typo-28: calc(1.75rem + 7 * var(--dm-wf));
  --typo-32: calc(2rem + 8 * var(--dm-wf));
  /* Eine Bildhöhe für Bildfolgen (Werk-, Ausstellungsansichten, Chronik): min(760 su, 80svh), Laborkritik P2-6. */
  --dm-bild-max-h: min(calc(47.5rem + 380 * var(--dm-wf)), 80svh);
}
@media (min-width: 1441px) {
  html:root {
    --rand: calc(2.5rem + 20 * var(--dm-wf));
    --spalte: calc(1.5rem + 12 * var(--dm-wf));
    --abschnitt: calc(8rem + 64 * var(--dm-wf));
    --block: calc(4rem + 32 * var(--dm-wf));
    --element: calc(1.5rem + 12 * var(--dm-wf));
    --eng: calc(0.5rem + 4 * var(--dm-wf));
    /* Footer innen oben = unten, hält Header:Footer bei 2:1 (Q23 a, 29.10.). */
    --fuss-innen: calc(0.875rem + 7 * var(--dm-wf));
  }
}
/* Seitengerüst: Footer sitzt ohne Höhenrechnung unten (ersetzt calc(100svh - Headerhöhe) auf Home, Kontakt, 404).
   Kurze Seiten füllen genau den Bildschirm (Q24 a); die WP-Adminleiste wird abgezogen, sonst 32/46 px Überlauf.
   html-Präfix schlägt das gleichlautende ASE-Snippet 212 („100vh minimum height“), das später inline lädt. */
/* I2-E3 (W2, 31.10.): Platz der klassischen Bildlaufleiste immer freihalten, damit nichts seitlich springt, wenn sie erscheint
   (Startwerk 7,5 px, sobald die Wand kommt; Kopf/Fuß gleich breit auf kurzen und langen Seiten). Overlay-Leisten (Handy, macOS) unberührt.
   overflow-y:auto am html ist nötig: sonst übernimmt der Viewport den Overflow vom body (overflow-x: clip, Theme) und Chrome ignoriert
   den Gutter am html. Scrollverhalten bleibt gleich (html-Overflow geht an den Viewport, body schneidet weiter waagrecht ab). */
html { overflow-y:auto; scrollbar-gutter:stable; }
/* B-07 (04.11.): Die Spur der Bildlaufleiste (Chrome, Edge unter Windows) trägt das warme Papier statt kühlem Weiß; Breite und Lage bleiben. */
html { scrollbar-color:#B9B7B1 #F5F4F0; }
body { display:flex; flex-direction:column; min-height:100svh; }
html body.admin-bar:not(.elementor-editor-active) { min-height:calc(100svh - var(--wp-admin--admin-bar--height, 0px)); }
html:has(> body.admin-bar:not(.elementor-editor-active)) { min-height:calc(100% - var(--wp-admin--admin-bar--height, 0px)); }
/* Wartungsseite: Vorlage 299 füllt den Platz zwischen Header und Footer über die Theme-Hüllen (main > .page-content > .elementor);
   ersetzt die frühere min-height 100vh der Vorlage, die Header + Footer zusätzlich scrollbar machte. */
body.elementor-maintenance-mode > main.site-main,
body.elementor-maintenance-mode > main.site-main > .page-content,
body.elementor-maintenance-mode > main.site-main > .page-content > .elementor { display:flex; flex-direction:column; flex:1 0 auto; }
body.elementor-maintenance-mode > main.site-main > .page-content > .elementor > .e-con { flex:1 0 auto; }
body > [data-elementor-type]:not([data-elementor-type="header"]):not([data-elementor-type="footer"]) { flex:1 0 auto; }

/* Filterleisten Werke und Ausstellungen: Brücke der Klasse filter (Shortcode-Ausgabe). Wie Labor/Figma:
   Labelspalte = eine Rasterspalte der vollen Inhaltsbreite (cqw), Zeilen im Abstand eng, Optionen 24 tu auseinander;
   inaktiv text-leise, aktiv text mit 1 px Unterstrich. html body schlägt die Kit-Linkfarbe (.elementor-kit-1925 a). */
.dm-filterleiste, .dm-ausstellung-filter { container-type:inline-size; display:flex; justify-content:space-between; align-items:baseline; gap:var(--spalte); margin:var(--element) 0 var(--block); }
.dm-filterdetails { flex:1; }
.dm-filterdetails summary { display:none; }
.dm-filtergruppen { display:flex; flex-direction:column; gap:var(--eng); }
.dm-filtergruppen nav, .dm-ausstellung-filter nav { display:flex; align-items:baseline; gap:var(--spalte); }
.dm-filtergruppen nav>.label, .dm-ausstellung-filter nav>.label { flex:0 0 calc((100cqw - 11 * var(--spalte)) / 12); }
.dm-filtergruppen nav>div, .dm-ausstellung-filter nav>div { display:flex; flex-wrap:wrap; gap:4px calc(var(--typo-16) * 1.5); }
/* B-03 (04.11.): Firefox und WebKit rechnen die Beschriftungsspalte nicht in die Zeilenbreite, „Messen“ brach sonst allein um */
.dm-ausstellung-filter nav { flex:1 1 auto; min-width:0; }
html body :is(.dm-filterleiste, .dm-ausstellung-filter) a { color:var(--text-leise, #6A6862); text-decoration:none; display:inline-block; min-height:24px; }
html body :is(.dm-filterleiste, .dm-ausstellung-filter) a:is(.dm-aktiv, [aria-current]) { color:var(--text, #1A1A18); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.dm-ansicht { display:flex; flex-direction:column; align-items:flex-end; gap:var(--eng); flex-shrink:0; }
.dm-ansicht p { margin:0; }
.dm-ansicht .filter, .dm-ausstellung-filter>.filter, .dm-ansicht [aria-hidden] { color:var(--text-leise, #6A6862); }
/* Werkseite: Bezugszeilen (Ausstellungen, Publikationen) aus [dm_werk_bezuege] reihen sich ins native Zeilenraster ein;
   die Hüllen des Shortcode-Widgets (Klasse dm-contents) werden layoutneutral. Links wie die aktive Filterzeile. */
.dm-contents, .dm-contents > .elementor-widget-container, .dm-contents .elementor-shortcode { display:contents; }
html body .dm-bezug a { color:inherit; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.dm-werknavigation { border-top:1px solid var(--linie, #DDDBD5); display:flex; justify-content:space-between; gap:var(--spalte); padding-top:var(--element); margin-top:var(--abschnitt); }
.dm-werknavigation a { display:flex; flex-direction:column; gap:2px; max-width:calc(50% - var(--spalte) / 2); text-decoration:none; color:var(--text-leise, #6A6862); transition:color var(--dm-kurz, 200ms) var(--dm-blende, ease); }
.dm-werknavigation a:last-child { text-align:right; }
/* WN-1 (03.11.): dezent wie leise Links (Farbe auf text in kurz); „Nächstes“ steht auch allein rechts */
.dm-werknavigation a[rel="next"] { margin-left:auto; text-align:right; align-items:flex-end; }
.dm-werknavigation a[hidden] { display:none; }
.dm-werknavigation .werktitel { color:inherit; }
@media (hover:hover) { .dm-werknavigation a:hover { color:var(--text, #1A1A18); } }
.dm-werknavigation a:focus-visible { color:var(--text, #1A1A18); }
@media (prefers-reduced-motion: reduce) { .dm-werknavigation a { transition:none; } }
.dm-weitere { margin-top:var(--block); }
.dm-weitere h2 { margin:0 0 var(--element); font-size:var(--typo-15); line-height:1.4667em; font-weight:510; }
.dm-weitere-raster { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--spalte); }
.dm-bildfolge { display:flex; flex-direction:column; gap:var(--block); margin-top:var(--block); }
.dm-bildfolge figure { margin:0; }
/* Bildfolgen linksbündig in natürlicher Proportion, Höhe über --dm-bild-max-h; das Werk bleibt vollständig. */
.dm-bildfolge img { display:block; width:auto; max-width:100%; height:auto; max-height:var(--dm-bild-max-h); }
.dm-bildfolge figcaption { margin-top:var(--eng); }
/* Maßleiste dezent in text-leise; unter 768 ausgeblendet (Figma mobil ohne Maßleiste). */
.dm-massleiste { display:flex; flex-direction:column; gap:var(--eng); color:var(--text-leise, #6A6862); }
.dm-massleiste[hidden] { display:none; }
#dm-hauptbild { position:relative; }
#dm-hauptbild>.elementor-widget-shortcode:not(.dm-credit-widget) { position:absolute; bottom:0; left:0; width:auto; }
/* Bildcredit des Hauptbilds (B2, 03.11.; Shortcode-Widget mit Klasse dm-credit-widget in 1999/2306): hängt unter der Bildkante,
   bündig mit der linken Bildkante (Maßleisten-Spur), ohne Bild und Wandschild zu verschieben (Schild bleibt unten bündig mit dem
   Bild, Kameraziel unverändert). Ohne Credit leer. Platz: Zeilenabstand des Rasters (Desktop 64 px, mobil 40 px). */
#dm-hauptbild>.dm-credit-widget { position:absolute; top:100%; left:0; right:0; padding-inline-start:inherit; }
.dm-sprunglink { position:absolute; top:4px; left:20px; padding:8px 12px; background:var(--grund,#F5F4F0); color:var(--text,#1A1A18); transform:translateY(-200%); z-index:10000; }
.dm-sprunglink:focus { transform:translateY(0); outline:2px solid currentColor; }
.dm-masslinie { display:block; width:1px; height:var(--dm-massleiste); background:var(--linie, #DDDBD5); position:relative; }
.dm-masslinie::before,.dm-masslinie::after { content:''; width:8px; height:1px; position:absolute; left:-3px; background:currentColor; }
.dm-masslinie::after { bottom:0; }
/* Querformate stapeln: Selektor muss die native Klassenregel .elementor .werklayout schlagen (Audit P6). */
body.dm-werk-querformat .elementor .werklayout { grid-template-columns:1fr; row-gap:var(--block); }
body.dm-werk-querformat .elementor .wandschild { justify-self:start; grid-column:auto; width:100%; max-width:calc(var(--typo-16) * 27.25); }
/* R5-08 (04.11.) Teil 1: Das gestapelte Schild beginnt an der linken Bildkante. Wert wie das Polster der Maßleisten-Spur (#dm-hauptbild, Vorlage 1999/2306: 44 bis 66 px);
   ändert sich die Spur, hier nachziehen. Unter 768 keine Spur. */
@media (min-width:768px) { body.dm-werk-querformat .elementor .wandschild { margin-inline-start:calc(2.75rem + 22 * var(--dm-wf)); } }
/* Maßleisten-Spur: seit B2 (03.11., R2-11) immer reserviert, damit das Bild auf jeder Werkseite an derselben Kante beginnt und
   beim Vor/Zurück nicht seitlich springt (vorher nur mit Maßleiste, Kritik P2-B: Bild bei 40 bzw. 84 px). Wandschild: die Spuren
   der Klasse werklayout stehen auf breiten Fenstern auseinander, das Schild schließt an der rechten Inhaltskante ab. */
@media (min-width:1025px) { body:not(.dm-werk-querformat) .elementor .werklayout { justify-content:space-between; } }
/* NR-03, NR-07 (04.11.): Werkbild bis 1024 px richtet sich nach dem Fenster: nie höher als das Fenster unter dem Kopf (vorher fest 600 px, am Handy quer 210 px zu hoch);
   Tablet hochkant nutzt die Höhe (vorher 44 bis 50 %); niedrige Fenster geben Querformaten dieselbe Höhe statt nur 110 px. Dieselben Werte in kamera.css (Fläche vor dem Laden). */
@media (max-width:1024px) { #dm-hauptbild img { max-height:min(37.5rem, calc(100svh - 96px)); } }
/* B3 (04.11.): Tablet hochkant stapelt alle Formate wie das Querformat: Bild über die Breite, Schild darunter, Maßleiste bleibt. Die Spalte 7fr gab Hochformaten nur gut die halbe Breite.
   Höhe wie beim gestapelten Querformat: der Werktitel steht noch im ersten Bildschirm. Dieselbe Höhe in kamera.css (Fläche vor dem Laden). fit-content: die Hülle bleibt so breit wie das Bild (Fläche, Credit). */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
 body:not(.dm-werk-querformat) .elementor .werklayout { grid-template-columns:minmax(0,1fr); row-gap:var(--block); }
 body:not(.dm-werk-querformat) #dm-hauptbild { width:fit-content; max-width:100%; }
 body:not(.dm-werk-querformat) #dm-hauptbild img { max-width:100%; max-height:calc(100svh - 17.5rem); }
 body:not(.dm-werk-querformat) .elementor .wandschild { justify-self:start; grid-column:auto; width:100%; max-width:calc(var(--typo-16) * 27.25); margin-inline-start:calc(2.75rem + 22 * var(--dm-wf)); }
}
/* NR-06 (04.11.): Tablet: Ist das Schild höher als das Bild, bleibt das Bild oben; Beschriftung über dem Wert, damit Technik und Ausstellung nicht über fünf Zeilen laufen. */
@media (min-width:768px) and (max-width:1024px) and (orientation:landscape) {
 body:not(.dm-werk-querformat) #dm-hauptbild { align-self:start; }
 body:not(.dm-werk-querformat) .elementor .wandschild .datenzeile { grid-template-columns:minmax(0,1fr); row-gap:2px; }
}
/* Home B: Wandfläche mindestens eine Fensterhöhe unter dem Kopf, der Footer beginnt unter der Falz (Kritik P1-A). */
main:has(.dm-masswand) { min-height:var(--dm-wand-flaeche, auto); }
body.dm-werk-querformat #dm-hauptbild { width:100%; }
/* Querformat gestapelt: volle Breite statt Spurdeckel; Höhe so, dass der Werktitel unter dem Bild im ersten Bildschirm steht
   (Kopf + Bild + Abstand block + Titelzeile; Tablet-Review P3-2, gilt ab 768 auf allen Breiten). */
body.dm-werk-querformat #dm-hauptbild img { max-width:100%; }
@media (min-width:768px) { body.dm-werk-querformat #dm-hauptbild img { max-height:min(var(--dm-bild-max-h), calc(100svh - 17.5rem - 140 * var(--dm-wf))); } }
@media (max-width:1024px) and (max-height:500px) { body.dm-werk-querformat #dm-hauptbild img { max-height:calc(100svh - 96px); } }
/* R5-08 Teil 2: Ab 2200 px Fensterbreite stehen Querformate bis 1,95 wie Hochformate: Schild rechts unten, alles im ersten Bildschirm, beim Blättern kein Sprung.
   Spuren und Bildhöhe wie die Werkvorlage (Klasse werklayout, kamera.css). Die Breitengrenze hält die Mindestlücke zum Schild; 1,25 × block lässt Platz für den Rollbalken.
   Panoramen und Fenster unter 2200 px bleiben gestapelt; dort wäre ein verkleinertes Bild der schlechtere Tausch. */
@media (min-width:2200px) {
 body.dm-werk-quer-neben .elementor .werklayout { grid-template-columns:max-content minmax(var(--block), calc(22.5rem + 180 * var(--dm-wf))) calc(var(--typo-16) * 27.25); justify-content:space-between; }
 body.dm-werk-quer-neben #dm-hauptbild { width:auto; }
 body.dm-werk-quer-neben .elementor .wandschild { grid-column:3; margin-inline-start:0; }
 body.dm-werk-quer-neben #dm-hauptbild img { max-height:min(var(--dm-bild-max-h), calc(100svh - 13.75rem - 110 * var(--dm-wf))); max-width:calc(100vw - 2 * var(--rand) - 2.75rem - 22 * var(--dm-wf) - var(--typo-16) * 27.25 - var(--block) * 1.25); }
}
/* E-1 Vergleich ?hochformat=neu (BU-1 a, 04.11.; ?hochformat=alt zurück, html[data-dm-hochformat], Kopfskript): Ab 2200 px hängt ein Hochformat mittig wie an einer Wand, auf der Achse der Strecke;
   das Schild steht im Abstand abschnitt neben dem Bild statt an der rechten Kante. Hülle und Bildgröße wie bisher; der negative Rand nimmt die Maßleisten-Spur (Wert wie R5-08 Teil 1) aus der Mittelung.
   Die rechte Spur ist nie schmaler als Abstand + Schild: Reicht der Platz nicht, weicht das Bild nach links aus. Die feste Bildhöhe (Wert wie kamera.css) gibt der Spalte schon vor dem Laden die spätere Breite. */
@media (min-width:2200px) {
 html[data-dm-hochformat="neu"] body.dm-werk-hochformat .elementor .werklayout { grid-template-columns:minmax(0,1fr) max-content minmax(calc(var(--abschnitt) + var(--typo-16) * 27.25),1fr); justify-content:stretch; }
 html[data-dm-hochformat="neu"] body.dm-werk-hochformat #dm-hauptbild { grid-column:2; margin-inline-start:calc(-2.75rem - 22 * var(--dm-wf)); }
 html[data-dm-hochformat="neu"] body.dm-werk-hochformat #dm-hauptbild img { width:auto; height:min(var(--dm-bild-max-h), calc(100svh - 13.75rem - 110 * var(--dm-wf))); }
 html[data-dm-hochformat="neu"] body.dm-werk-hochformat .elementor .wandschild { grid-column:3; justify-self:start; width:calc(var(--typo-16) * 27.25); margin-inline-start:var(--abschnitt); }
}
.dm-filterleiste a:focus-visible,.dm-werknavigation a:focus-visible { outline:2px solid currentColor; outline-offset:2px; }
/* Aktiver Bereich: 1 px Unterstrich wie Figma; Selektor über dem Atomic-Link-Reset. */
body header nav a[aria-current="page"], body header .navigation a[aria-current="page"] { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.elementor-popup-modal .navigation-mobilmenue a { display:flex; align-items:center; min-height:44px; }
.elementor-popup-modal .navigation-mobilmenue a[aria-current="page"] { color:var(--text,#1A1A18); text-decoration:underline; text-underline-offset:4px; }
.elementor-widget-loop-grid .elementor-pagination { font:var(--typo-14)/1.4286em var(--schrift,"Geist"),sans-serif; color:var(--text,#1A1A18); margin-top:var(--block); }
.elementor-widget-loop-grid .elementor-pagination a { color:inherit; min-width:32px; min-height:44px; display:inline-flex; align-items:center; justify-content:center; }
.elementor-widget-loop-grid .elementor-pagination .current { text-decoration:underline; text-underline-offset:4px; }
/* Brücken der Klassen filter (15/24) und label (13/18) für Shortcode-Ausgaben. */
.dm-filterleiste,.dm-ausstellung-filter { font-size:var(--typo-15); line-height:1.6em; }
.dm-filterleiste .label,.dm-ausstellung-filter .label { font-size:var(--typo-13); line-height:1.3846em; color:var(--text-leise,#6A6862); }
/* Ausstellungsliste über die volle Inhaltsbreite wie Labor, Zeilen auf gemeinsamer Grundlinie. */
.dm-ausstellung { border-top:1px solid var(--linie,#DDDBD5); scroll-margin-top:32px; }
.dm-ausstellung h2 { font-size:var(--typo-16); line-height:1.625em; font-weight:400; margin:0; }
.dm-ausstellung p { margin:0; }
.dm-ausstellung .angabe { font-size:var(--typo-14); line-height:1.4286em; color:var(--text-leise,#6A6862); }
.dm-ausstellung a { color:inherit; text-decoration:none; }
/* UX-09 (01.11.): Zeilen mit Bild stehen im selben Spaltenraster wie die Textzeilen (Jahr, Titel, Ort, Typ); das Bild folgt darunter
   in der Titelspalte bis höchstens zum rechten Rand, fest 3:2 bis 55 % der Fensterhöhe (Breite ≤ 82,5svh, Laborkritik P1-1), linksbündig.
   Vorher (Figma 36:1112): Bild in den Spalten 1–6, Schild ab Spalte 8 unten bündig. */
.dm-ausstellung-zeile>.dm-ausstellung-foto { grid-column:3 / 13; display:block; align-self:start; margin:calc(var(--typo-16) * .75) 0 calc(var(--element) - var(--typo-16) * .75); }
.dm-ausstellung-bild img { display:block; width:min(100%, 82.5svh); height:auto; aspect-ratio:3/2; object-fit:cover; }
/* Textzeile im 12er-Raster wie Labor: Jahr 1–2, Titel 3–6, Ort 7–10, Typ 11–12. */
.dm-ausstellung-zeile { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--spalte); align-items:baseline; padding:calc(var(--typo-16) * .75) 0; }
.dm-ausstellung-zeile>:nth-child(1) { grid-column:1 / 3; }
.dm-ausstellung-zeile>:nth-child(2) { grid-column:3 / 7; }
.dm-ausstellung-zeile>:nth-child(3) { grid-column:7 / 11; }
.dm-ausstellung-zeile>:nth-child(4) { grid-column:11 / 13; }
/* R2-19 (04.11.): Folgezeilen eines Jahres zeigen es nicht noch einmal; beschnitten statt versteckt, damit es vorlesbar bleibt und die Grundlinie trägt. */
.dm-jahr-gleich { clip-path:inset(50%); white-space:nowrap; }
/* B2 (04.11.): Ausstellungen ohne Jahr stehen abgesetzt am Listenende, sonst läsen sie sich als das letzte Jahr. Abstand wie zwischen den Rubriken: block, Tablet 48, mobil 40. */
.dm-ausstellung-ohne-jahr:not(:first-child) { margin-top:var(--block); }
@media(min-width:768px) and (max-width:1024px) { .dm-ausstellung-ohne-jahr:not(:first-child) { margin-top:3rem; } }
/* Angaben der Ausstellungsseite wie datenzeile: Haarlinie oben und unter jeder Zeile, Polster 12 tu, Labelspalte 91,33 tu. */
.dm-ausstellung-angaben { margin:0; border-top:1px solid var(--linie,#DDDBD5); }
.dm-ausstellung-angaben>div { display:grid; grid-template-columns:calc(var(--typo-16) * 5.7083) minmax(0,1fr); column-gap:var(--spalte); align-items:baseline; border-bottom:1px solid var(--linie,#DDDBD5); padding:calc(var(--typo-16) * .75) 0; }
.dm-ausstellung-angaben dt { font-size:var(--typo-13); line-height:1.3846em; font-weight:430; color:var(--text-leise,#6A6862); }
.dm-ausstellung-angaben dd { margin:0; font-size:var(--typo-16); line-height:1.625em; }
.dm-credit { font-size:var(--typo-14); line-height:1.4286em; color:var(--text-leise,#6A6862); margin-top:var(--eng); }
/* Ausstellungs-Detail C (Template 2002, Bauplan 28.10.): Folge ohne Breitendeckel; jedes Bild samt Unterschrift ganz im Fenster
   (100svh − 2 × element − 60 tu wie Labor), Hochformate ungeschnitten links; mobil 80svh. Unterschrift in Textfarbe, Credit leise. */
body.single-ausstellung .dm-bildfolge { margin-top:0; }
body.single-ausstellung .dm-bildfolge figure { display:flex; flex-direction:column; gap:var(--eng); align-items:flex-start; }
body.single-ausstellung .dm-bildfolge img { --dm-h:calc(100svh - 2 * var(--element) - var(--typo-16) * 3.75); max-height:var(--dm-h); }
/* Breite aus Höhe × Seitenverhältnis (--dm-ar aus [dm_werk_galerie alle="1"]): steht vor dem Laden fest, gleich dem Ergebnis von width:auto. */
body.single-ausstellung .dm-bildfolge img[style*="--dm-ar"] { width:min(100%, calc(var(--dm-h) * var(--dm-ar))); }
body.single-ausstellung .dm-bildfolge figcaption { display:flex; flex-direction:column; margin-top:0; font-style:normal; }
.dm-bildfolge .dm-unterschrift { color:var(--text,#1A1A18); }
/* Ausstellungstext im klassischen Pro-Widget „Beitragsinhalt“ (2002, nicht neu anlegbar, ohne Atomic-Klassen): Rolle `text` 16/26 tu
   wie Labor, mobil 17/27; kein Absatzabstand am Ende. Dokumentierte Runtime-Ausnahme, die Typo-Skala läuft ohnehin über --typo-*. */
body.single-ausstellung .elementor-widget-theme-post-content { font-size:var(--typo-16); line-height:1.625em; }
body.single-ausstellung .elementor-widget-theme-post-content p { margin:0 0 1em; }
body.single-ausstellung .elementor-widget-theme-post-content p:last-child { margin-bottom:0; }
@media(max-width:767px) { body.single-ausstellung .elementor-widget-theme-post-content { font-size:17px; line-height:27px; } }
.dm-link { color:inherit; text-decoration:underline; text-decoration-color:var(--linie,#DDDBD5); text-decoration-thickness:1px; text-underline-offset:calc(var(--typo-16) * .25); }
.dm-link:hover { text-decoration-color:currentColor; }
@media(max-width:767px) { body.single-ausstellung .dm-bildfolge img { --dm-h:80svh; } .dm-ausstellung-angaben>div { grid-template-columns:1fr; row-gap:4px; padding:10px 0; } }
/* Ausstellungs-Detail B3 d (Johannes 30.10., Motion-README „B2 Raumfoto“): das erste Raumfoto ist das Kameraziel und steht samt
   Unterschrift im ersten Fenster: Fenster − Adminleiste − Kopf (Vorlage 1997: block · 1,125 + typo-16 · 1,5) − Zurück (2,75rem + element)
   − Polster der Bildspalte (typo-16 · 0,5) − eng − zwei Unterschriftzeilen − block. Kopf geändert: Formel nachziehen. */
@media(min-width:768px) {
 body.single-ausstellung .dm-bildfolge>figure:first-child img { --dm-h:calc(100svh - var(--wp-admin--admin-bar--height, 0px) - var(--block) * 2.125 - var(--typo-16) * 2 - 2.75rem - var(--element) - var(--eng) - var(--typo-14) * 2.8572); }
}
/* Kernzeile „Ort · Laufzeit · Typ“ aus [dm_ausstellung_angaben]: nur mobil sichtbar (B4 a). */
.dm-kernzeile { display:none; }
.dm-kernzeile span { display:block; } /* R5-09 a (04.11.): je Angabe eine Zeile ohne Trenner; vorher endete eine Zeile auf „·“ (UX-14, R2-14) */
.dm-kernzeile .dm-leise { color:var(--text-leise,#6A6862); }
/* B4 a mobil: Titel, Kernzeile, erstes Foto, Text, weitere Daten, übrige Fotos. Die Reihenfolge liegt quer zu den Containern
   „Spalte“ und „Bilder“ (Raster mit ID dm-ausstellung, Vorlage 2002); deren Hüllen lösen sich mit display:contents auf, order sortiert.
   Dokumentierte Runtime-Ausnahme: nativ nur mit doppeltem Widget abbildbar. Kernzeile ersetzt die Zeilen data-kern ohne Doppelung;
   enthält die Liste sonst nichts, entfällt sie. Fotohöhe: Abzug für Kopf, Zurück, zwei Titel-, drei Kern- und drei Unterschriftzeilen. */
@media(max-width:767px) {
 #dm-ausstellung { display:flex; flex-direction:column; align-items:stretch; gap:0; }
 #dm-ausstellung>header, #dm-ausstellung>header>div, #dm-ausstellung>div, #dm-ausstellung .elementor-widget-shortcode,
 #dm-ausstellung .elementor-widget-shortcode>.elementor-widget-container, #dm-ausstellung .elementor-shortcode, #dm-ausstellung .dm-bildfolge { display:contents; }
 #dm-ausstellung h1 { order:1; }
 #dm-ausstellung .dm-kernzeile { order:2; display:block; margin:4px 0 0; }
 #dm-ausstellung .dm-bildfolge>figure:first-child { order:3; margin-top:16px; }
 #dm-ausstellung .dm-bildfolge>figure:first-child img { --dm-h:calc(100svh - var(--wp-admin--admin-bar--height, 0px) - 22.75rem); }
 #dm-ausstellung .elementor-widget-theme-post-content { order:4; margin-top:40px; }
 #dm-ausstellung .dm-ausstellung-angaben { order:5; margin-top:24px; }
 #dm-ausstellung .dm-bildfolge>figure:not(:first-child) { order:6; margin-top:40px; }
 #dm-ausstellung .dm-ausstellung-angaben>[data-kern] { display:none; }
 #dm-ausstellung .dm-ausstellung-angaben:not(:has(>div:not([data-kern]))) { display:none; }
}
.dm-bildfolge figcaption { font-size:var(--typo-14); line-height:1.4286em; color:var(--text-leise,#6A6862); }
@media(max-width:1024px) { .dm-weitere-raster { grid-template-columns:repeat(3,minmax(0,1fr)); } }
/* Klasse biografie-rubrik (Kontakt, Chronik): Marke/Titel und erste Textzeile auf einer Grundlinie wie Labor (align-items: first baseline;
   Laborkritik P1-3, Kontakt weicht damit von Figma 37:2588 oben bündig ab). Dokumentierte Runtime-Ausnahme: Atomic align-items kennt kein baseline. */
@media(min-width:768px) { .elementor .biografie-rubrik { align-items:first baseline; } }
/* Publikationen (1988, Klasse pub-zeile): die ISBN steht im Absatz als <span> und bricht nicht mitten in der Nummer um (Labor .pub-isbn).
   Dokumentierte Runtime-Ausnahme: Atomic kennt kein white-space pro Wort, Inline-Styles entfernt der Absatz. */
.elementor .pub-zeile .angabe span { white-space:nowrap; }
/* NR-04 (04.11.): „Datenschutz“ bricht in der schmalen Titelspalte nicht mitten im Wort (Seite 3; EN und Impressum passen). Es ragt in den Spaltenabstand, nicht in den Text. */
@media (min-width:768px) and (max-width:900px) { html body.page-id-3 main h1 { min-width:max-content; font-size:1.875rem !important; } }
@media (max-width:1279px) { body.dm-titel-langwort #dm-ausstellung h1 { font-size:1.5rem; } }
/* NR-09 (04.11.): Bei 1024/1025 wurde die linke Spalte der Ausstellung schmaler, obwohl das Fenster wächst; bis 1279 bleibt die Teilung 5/7 des Tablets. */
@media (min-width:1025px) and (max-width:1279px) { #dm-ausstellung > :first-child { grid-column:1 / 6; } #dm-ausstellung > :nth-child(2) { grid-column:6 / 13; } }
/* NR-10 (04.11.): Kontakt Tablet: Spalten bis zum rechten Rand, die Galerie bricht nicht mehr um. Dokumentierte Runtime-Ausnahme zur Vorlage. */
@media (min-width:768px) and (max-width:1024px) { html body #inhalt:has(form) > :nth-child(2) { grid-column:4 / span 4; } html body #inhalt:has(form) > :nth-child(3) { grid-column:8 / span 5; } html body #inhalt:has(form) > :last-child { grid-column:4 / span 9; } }
/* NR-12 (04.11.): Vor/Zurück: Titel ohne einzelnes Restwort. */
.dm-werknavigation .werktitel { text-wrap:balance; }
/* NR-18 (04.11.): Fuß bei 768 einzeilig wie ab 801; der engere Abstand der Links reicht dafür auch mit Rollbalken. */
@media (min-width:768px) and (max-width:800px) { html body [data-elementor-type="footer"] .elementor-element-111c34aa { gap:14px; } }
/* Tablet: Abstand Filter → Raster = block-tablet (48) wie Labor/Figma 64:2940. */
@media(min-width:768px) and (max-width:1024px) { .dm-filterleiste, .dm-ausstellung-filter { margin-bottom:3rem; } }
/* Tablet wie Figma 64:2940: Ausstellungszeile in acht festen Spalten, Jahr 1, Titel 2–3, Ort 4–6, Typ 7–8 (Tablet-Review P2-5). */
@media(min-width:768px) and (max-width:1024px) {
 .dm-ausstellung-zeile { grid-template-columns:repeat(8,minmax(0,1fr)); }
 .dm-ausstellung-zeile>:nth-child(1) { grid-column:1 / 2; }
 .dm-ausstellung-zeile>:nth-child(2) { grid-column:2 / 4; }
 .dm-ausstellung-zeile>:nth-child(3) { grid-column:4 / 7; }
 .dm-ausstellung-zeile>:nth-child(4) { grid-column:7 / 9; }
 .dm-ausstellung-zeile>.dm-ausstellung-foto { grid-column:2 / 9; }
}
/* Touch (DESIGN.md Accessibility): Trefferfläche ≥ 44 px über Padding, sichtbare Größe und Lage bleiben (Tablet-Review P2-1).
   Dokumentierte Runtime-Ausnahme: Atomic-Klassen tragen keine Pointer-Media-Queries. Header-Links sind inline, Filterlinks Block. */
@media (pointer:coarse) {
 html body header :is(.navigation, .wortmarke) a[href] { padding-block:13px; } /* [href] schlägt den Atomic-Reset .elementor .e-default-a */
 html body :is(.dm-filtergruppen, .dm-ansicht, .dm-ausstellung-filter) a { padding-block:10px; margin-block:-10px; }
 .dm-filtergruppen { row-gap:20px; }
 /* NR-05 (04.11.): auch Sprache, Fuß, Zurück, Weiter, Links im Fließtext und Listentitel. Inline ändert das Polster die Lage nicht (13 px);
    Kopf und Rücklinks sind Blöcke, dort genau 44 px (10 px), sonst wüchse der Kopf über 72 px. Das Suchfeld wächst unsichtbar nach oben. */
 html body [data-elementor-type="header"] a.navigation[href] { padding-block:10px; }
 html body [data-elementor-type="footer"] a[href], html body main .navigation > a[href], html body main p.text > a[href], html body a.dm-link, html body .dm-ausstellung h2 > a[href] { padding-block:13px; }
 html body main p[data-dm-kamera-zurueck] > a[href] { padding-block:10px; }
 html body .dm-wv #dm-wv-q { min-height:44px; margin-top:-9px; padding-top:calc(9px + 2px); }
 /* E3 (04.11., Johannes PA-2 a): kurze Wörter und der „Filter“-Knopf der Zeitleiste (28 px hoch bei 768). Eine unsichtbare Fläche mittig ums Wort,
    mindestens 44 × 44 px; längere Wörter und das Layout bleiben unberührt. Bei knappem Abstand liegt das spätere Wort oben. */
 html body :is(:is(.dm-filtergruppen, .dm-ansicht, .dm-ausstellung-filter, .wv-kompakt) :is(a, button), .dm-filterdetails summary, [data-elementor-type="header"] :is(.navigation > a[href], a.navigation[href]), #danny-menu .dm-mobile-menu__links a) { position:relative; }
 html body :is(:is(.dm-filtergruppen, .dm-ansicht, .dm-ausstellung-filter, .wv-kompakt) :is(a, button), .dm-filterdetails summary, [data-elementor-type="header"] :is(.navigation > a[href], a.navigation[href]), #danny-menu .dm-mobile-menu__links a)::after { content:""; position:absolute; left:50%; top:50%; width:max(100%, 44px); height:max(100%, 44px); translate:-50% -50%; }
 /* Listentitel sind Inline und können umbrechen: dort seitliches Polster, das der Gegenrand aufhebt („x/y/z“ 40 px) */
 html body .dm-ausstellung h2 > a[href] { padding-inline:4px; margin-inline:-4px; }
}
@media(max-width:767px) {
 .dm-massleiste, #dm-hauptbild>.elementor-widget-shortcode:not(.dm-credit-widget) { display:none; }
 .dm-ausstellung-filter { margin:24px 0 40px; flex-wrap:wrap; }
 .dm-ausstellung-filter nav { display:block; }
 .dm-ausstellung-filter nav>div { gap:4px 16px; }
 html body .dm-ausstellung-filter a { min-height:44px; padding-top:10px; }
 .dm-ausstellung-zeile { grid-template-columns:48px 1fr; gap:4px 12px; padding:16px 0; }
 .dm-ausstellung-zeile>:nth-child(1) { grid-column:1; }
 .dm-ausstellung-zeile>:nth-child(n+2) { grid-column:2; }
 .dm-ausstellung-zeile>.dm-ausstellung-foto { margin:8px 0 8px; }
 /* B2: Die Jahresspalte ist 48 px schmal; das Wort steht in eigener Zeile über dem Titel. */
 .dm-ausstellung-ohne-jahr>:nth-child(1) { grid-column:1 / -1; }
 .dm-ausstellung-ohne-jahr:not(:first-child) { margin-top:40px; }
 .dm-ausstellung-bild img { width:100%; }
 .dm-filterleiste { margin:24px 0 40px; gap:16px; }
 /* Mobilfilter: kein Browser-Marker, Filter und Ansicht auf einer Grundlinie (Figma 37:1302). */
 .dm-filterdetails summary { display:block; list-style:none; min-height:44px; cursor:pointer; }
 .dm-filterdetails summary::-webkit-details-marker { display:none; }
 .dm-filtergruppen nav { display:block; margin-top:8px; }
 .dm-filtergruppen nav>div { gap:4px 16px; }
 html body .dm-filtergruppen a, html body .dm-ansicht nav a { min-height:44px; padding-top:10px; }
 .dm-ansicht { flex-direction:row; align-items:baseline; }
 .dm-weitere-raster { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .dm-werknavigation { margin-top:72px; }
 .dm-bildfolge { gap:40px; margin-top:40px; }
 body.dm-werk-querformat .elementor .werklayout { row-gap:40px; }
}


.dm-lokalhinweis { margin-top:1rem; }

/* Geist je Größe (Labor [data-font="geist"], „kleine Texte: normal“): 13 px +30, 14 px +20, 15 px +10 auf 400 bzw. 500,
   Laufweite klein +0,004 em. Dokumentierte Runtime-Ausnahme: Atomic font-weight kennt nur 100er-Stufen (style-schema enum).
   Grundgewichte und Laufweiten stehen nativ in den Klassen; hier zusätzlich für Shortcode-Brücken ohne Klassen-CSS (28.10.). */
html .elementor :is(.navigation, .filter, .werktitel), .dm-filterleiste, .dm-ausstellung-filter { font-weight:410; letter-spacing:0.004em; }
html .elementor .zwischentitel, .dm-weitere h2 { font-weight:510; letter-spacing:0.004em; }
html .elementor .angabe, .elementor-widget-loop-grid .elementor-pagination, .dm-credit, .dm-bildfolge figcaption { font-weight:420; letter-spacing:0.004em; }
html .elementor .label, .dm-filterleiste .label, .dm-ausstellung-filter .label, .dm-ausstellung-angaben dt { font-weight:430; letter-spacing:0.004em; }

/* ===== Bewegungssystem (P2-C, 01.11.2026; DESIGN.md „Bewegungssystem“) und Nutzerdurchgang UX1 =====
   Eine Welt mit Kamera (runtime/kamera) und Werkverzeichnis (runtime/werkverzeichnis): drei Dauern, zwei Kurven, ein Weg.
   kurz = Zustand unter dem Zeiger, Bild nach dem Laden, Kopf, Menüfläche; mittel = Erscheinen und Ankommen; lang = Kamera, Ansichtswechsel, Fuß.
   kurve = alles, was sich bewegt (Kamera B1 c); blende = Deckkraft und Farbe (Werkverzeichnis-Einblendung). Kein Bounce, kein Parallax.
   Ohne JS und bei reduzierter Bewegung steht alles sofort; versteckt wird nur, was die Skripte selbst markieren. */
:root { --dm-kurz: 200ms; --dm-mittel: 400ms; --dm-lang: 600ms; --dm-kurve: cubic-bezier(.2, .7, .2, 1); --dm-blende: cubic-bezier(.2, 0, 0, 1); --dm-weg: 6px; }

/* UX-02: Ersatzschrift mit Geists Maßen (aus Arial, im Browser an Geist gemessen: Laufweite, Ober- und Unterlänge), damit bis zum
   Laden von Geist keine Serife erscheint und nichts umbricht. Geist wird im Kopf vorgeladen (PHP). Die native Variable schrift und
   die Kit-Typografie bekommen den Stapel; Elementor-Klassen bleiben unverändert. */
@font-face { font-family: "Geist Ersatz"; font-style: normal; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 101.8%; ascent-override: 99.2%; descent-override: 29.5%; line-gap-override: 0%; }
@font-face { font-family: "Geist Ersatz"; font-style: italic; src: local("Arial Italic"), local("Arial-ItalicMT"), local("Helvetica Oblique"); size-adjust: 100%; ascent-override: 101%; descent-override: 30%; line-gap-override: 0%; }
html:root, html body[class] {
  --schrift: "Geist", "Geist Ersatz", "Helvetica Neue", Arial, sans-serif;
  --e-global-typography-primary-font-family: "Geist", "Geist Ersatz", "Helvetica Neue", Arial;
  --e-global-typography-secondary-font-family: "Geist", "Geist Ersatz", "Helvetica Neue", Arial;
  --e-global-typography-text-font-family: "Geist", "Geist Ersatz", "Helvetica Neue", Arial;
  --e-global-typography-accent-font-family: "Geist", "Geist Ersatz", "Helvetica Neue", Arial;
}

/* Seitenwechsel ohne Bildflug: dokumentübergreifende View Transition. Opt-in nur bei erlaubter Bewegung; die Gestaltung gilt nur unter
   html[data-dm-seite], das das Kopfskript für die Dauer setzt, außer bei einem Kameraflug (html[data-dm-kamera]).
   UX-01: Der Kopf steht ohne Überblendung (alte Ebene aus, neue sofort), kein Doppelbild; das erste Bild der neuen Seite wartet im PHP
   per rel=expect, bis der Kopf ganz geparst ist. Der Seiteninhalt samt Fuß blendet in kurz aus, der neue kommt nach 100 ms in mittel an. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
html[data-dm-seite] [data-elementor-type="header"] { view-transition-name: dm-kopf; }
html[data-dm-seite] #wpadminbar { view-transition-name: dm-adminleiste; }
html[data-dm-seite]::view-transition { background: var(--grund, #F5F4F0); }
html[data-dm-seite]::view-transition-group(root) { animation: none; }
html[data-dm-seite]::view-transition-old(root) { mix-blend-mode: normal; animation: dm-aus var(--dm-kurz) var(--dm-blende) both; }
html[data-dm-seite]::view-transition-new(root) { mix-blend-mode: normal; animation: dm-ein var(--dm-mittel) var(--dm-blende) 100ms both, dm-ankommen var(--dm-mittel) var(--dm-kurve) 100ms both; }
html[data-dm-seite]::view-transition-group(dm-kopf), html[data-dm-seite]::view-transition-group(dm-adminleiste) { animation: none; z-index: 3; }
html[data-dm-seite]::view-transition-old(dm-kopf), html[data-dm-seite]::view-transition-old(dm-adminleiste) { display: none; }
html[data-dm-seite]::view-transition-new(dm-kopf), html[data-dm-seite]::view-transition-new(dm-adminleiste) { mix-blend-mode: normal; animation: none; }
@keyframes dm-aus { to { opacity: 0; } }
@keyframes dm-ein { from { opacity: 0; } }
@keyframes dm-ankommen { from { translate: 0 var(--dm-weg); } }

/* UX-06: Kopf beim Hochscrollen (Frontend-JS setzt html[data-dm-kopf="da"|"weg"]; nicht auf der Startseite, nicht in Wand und Horizont).
   Klebt unter der Adminleiste, fährt in kurz mit der Kurve weg und wieder herein. Schnittstelle: --dm-kopf-h, --dm-kopf-sicht. */
body.admin-bar { --dm-kopf-oben: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { body.admin-bar { --dm-kopf-oben: 0px; } }
html[data-dm-kopf] body > [data-elementor-type="header"] { position: sticky; top: var(--dm-kopf-oben, 0px); z-index: 40; background: var(--grund, #F5F4F0); }
html[data-dm-kopf="weg"] body > [data-elementor-type="header"] { translate: 0 calc(-100% - var(--dm-kopf-oben, 0px) - 2px); }
/* Johannes 03.11.: Beim Runterscrollen von oben klebt der Kopf nicht, er läuft mit der Seite aus dem Bild (frei); erst wenn er ganz
   draußen ist, wird er unsichtbar zu „weg“ (still: ohne Bewegung). Hochscrollen holt ihn wie bisher (da). ?kopfzug=alt zeigt den Stand davor. */
html[data-dm-kopf="frei"] body > [data-elementor-type="header"] { position: relative; top: auto; }
html[data-dm-kopf="weg"][data-dm-kopf-still] body > [data-elementor-type="header"] { transition: none !important; }
/* D-1 (03.11.): feine Linie an der Unterkante des klebenden Kopfs, erst wenn Inhalt darunter liegt (JS: html[data-dm-kopf-linie];
   Vergleich ohne Linie: ?kopf=ohne-linie). Fährt mit dem Kopf weg; Deckkraft in kurz/blende, bei reduzierter Bewegung sofort. */
html[data-dm-kopf] body > [data-elementor-type="header"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--linie, #DDDBD5); opacity: 0; pointer-events: none; }
html[data-dm-kopf][data-dm-kopf-linie] body > [data-elementor-type="header"]::after { opacity: 1; }
/* Werke Raster/Index: Johannes 03.11.: auch mit angedockter kompakter Filterzeile bleibt die Kopflinie, Kopf und Zeile sind getrennt.
   ?leiste=alt: die Zeile trägt die einzige Linie (Stand davor). */
html[data-dm-leiste-alt][data-dm-kopf][data-dm-kopf-linie][data-wv-kompakt] body > [data-elementor-type="header"]::after { opacity: 0; transition: none !important; }
/* B2 (03.11.): Wechsel zwischen Kopflinie und Zeilenlinie ohne Überblendung (vorher blendete die Linie unter dem gehenden Kopf ein
   und unter dem kommenden aus: „flackert“); weggefahren wechselt sie ohnehin unsichtbar. */
html[data-dm-kopf="weg"] body > [data-elementor-type="header"]::after { transition: none !important; }
/* Startseite (Wand, ohne klebendes Kopfverhalten): die Linie steht, solange Wandbilder unter den Kopf laufen (Werkverzeichnis setzt
   html[data-wv-kopflinie]: Nachbarn sichtbar und Wand über der Bühnenoberkante; im Überblick aus). Mit der Linie entfällt der alte
   24-px-Verlauf oben an der Bühne (Johannes 03.11.); ?kopf=ohne-linie (html[data-dm-kopf-ohne-linie], Kopfskript) zeigt den alten
   Stand: Verlauf, keine Linie. */
html[data-wv-kopflinie]:not([data-dm-kopf-ohne-linie]) .dm-wv .wv-buehne::before { display: none; }
html[data-dm-kopf-ohne-linie] body > [data-elementor-type="header"]::after { display: none; }
html[data-wv-kopflinie] body > [data-elementor-type="header"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--linie, #DDDBD5); opacity: 0; pointer-events: none; }
html[data-wv-kopflinie="an"] body > [data-elementor-type="header"]::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { html[data-wv-kopflinie] body > [data-elementor-type="header"]::after { transition: opacity var(--dm-kurz) var(--dm-blende); } }
@media (prefers-reduced-motion: no-preference) { html[data-dm-kopf] body > [data-elementor-type="header"]::after { transition: opacity var(--dm-kurz) var(--dm-blende); } }
@media print { html body > [data-elementor-type="header"]::after { display: none; } }
@media (prefers-reduced-motion: no-preference) { html[data-dm-kopf] body > [data-elementor-type="header"] { transition: translate var(--dm-kurz) var(--dm-kurve); } }
/* Ausstellungs-Detail: die klebende linke Spalte (Raster #dm-ausstellung, Abstand element) rückt unter den eingeblendeten Kopf. */
html[data-dm-kopf="da"] #dm-ausstellung > header { top: calc(var(--element) + var(--dm-kopf-oben, 0px) + var(--dm-kopf-h, 0px)); }
@media (prefers-reduced-motion: no-preference) { html[data-dm-kopf] #dm-ausstellung > header { transition: top var(--dm-kurz) var(--dm-kurve); } }

/* Erscheinen beim Scrollen: Listenzeilen, Chronik-Rubriken und Bildfolgen unterhalb des ersten Fensters (Auswahl im Skript). */
@media (prefers-reduced-motion: no-preference) {
  [data-dm-erscheinen] { transition: opacity var(--dm-mittel) var(--dm-blende), translate var(--dm-mittel) var(--dm-kurve); }
  [data-dm-erscheinen="wartet"] { opacity: .01; translate: 0 var(--dm-weg); }
}
/* UX-04: Inhaltsbilder (Ausstellungsliste, Ausstellung, Vita) stehen bis zum Laden als Fläche in ihrer Bildfarbe (PHP: style bzw.
   #dm-bildfarben) und blenden dann in kurz ein, wie die Werkverzeichnis-Bilder. Beginn bei 1 % Deckkraft (LCP zählt das erste Zeichnen).
   Nur mit Kopfskript (html[data-dm-bilder]), nie während eines Kameraflugs und nie am Kameraziel. */
@media (prefers-reduced-motion: no-preference) {
  html[data-dm-bilder]:not([data-dm-kamera]) :is(.dm-ausstellung-foto, body.single-ausstellung .dm-bildfolge, .biografie-rubrik) img:not([data-dm-da]):not([data-dm-kamera-ziel]) { opacity: .01; }
  :is(.dm-ausstellung-foto, body.single-ausstellung .dm-bildfolge, .biografie-rubrik) img { transition: opacity var(--dm-kurz) var(--dm-blende); }
}
@media print { [data-dm-erscheinen], html[data-dm-bilder] img { opacity: 1 !important; translate: none !important; } }

/* Zeigen und Fokus. Unterstrich als Zustand (aktiv = 1 px Unterstrich, DESIGN.md): Links in Textfarbe (Kopfmenü samt Sprache und „Menü“,
   Ausstellungstitel) tragen ihn unsichtbar und blenden ihn beim Zeigen in kurz ein; der aktive Menüpunkt bleibt unberührt.
   Leise Links (Fuß, Vita-Sprungmarken, Filter) wechseln wie bisher auf Textfarbe, jetzt in kurz. Fokus bleibt sofort sichtbar (2 px). */
html body [data-elementor-type="header"] :is(.navigation > a[href]:not([aria-current]), a.navigation[href]),
html body .dm-ausstellung h2 > a[href] {
  text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 4px;
}
/* LK-1 a (Johannes 04.11.): Links im Fließtext (Kontakt, Ausstellungsangaben, Seite „nicht gefunden“) tragen den Unterstrich dauerhaft in `linie`,
   auch ohne Zeiger; beim Zeigen wird er Textfarbe. Wie .dm-link und die Rechtsseiten. Menü, Fuß und Filter bleiben. */
html body main p.text > a.e-paragraph-link-base[href], html body .dm-ausstellung-angaben a.dm-link {
  text-decoration-line: underline; text-decoration-color: var(--linie, #DDDBD5); text-decoration-thickness: 1px; text-underline-offset: calc(var(--typo-16) * .25);
}
@media (hover: hover) {
  html body [data-elementor-type="header"] :is(.navigation > a[href]:not([aria-current]), a.navigation[href]):hover,
  html body .dm-ausstellung h2 > a[href]:hover, html body .dm-ausstellung-bild:has(> a[href]:hover) h2 > a[href],
  html body main p.text > a.e-paragraph-link-base[href]:hover, html body .dm-ausstellung-angaben a.dm-link:hover { text-decoration-color: currentColor; }
}
@media (prefers-reduced-motion: no-preference) {
  :where([data-elementor-type="header"], [data-elementor-type="footer"], main, #danny-menu) a[href]:not(:where(.dm-wv a)) {
    transition: color var(--dm-kurz) var(--dm-blende), text-decoration-color var(--dm-kurz) var(--dm-blende);
  }
}
/* VI-1 a: Sprungziele der Vita landen mit Abstand zum Fensterrand. */
#biografie, #lebenslauf, #sammlungen { scroll-margin-top: var(--block); }
/* UX-13, N-2 (04.11.): kein blauer Tipp-Kasten auf Touch, seitenweit (die Eigenschaft erbt); der Tastaturfokus bleibt davon unberührt.
   In Kopf und Menü eigener Druckzustand (Deckkraft). */
html { -webkit-tap-highlight-color: transparent; }
:is(#danny-menu, [data-elementor-type="header"]) :is(a, button):active { opacity: .6; }

/* Mobilmenü (#danny-menu, natives dialog; UX-13): Fläche blendet in kurz ein und aus, die Einträge kommen in mittel um einen Weg
   gestaffelt an. Elternbereich aktiv: Frontend-JS setzt aria-current. */
@media (prefers-reduced-motion: no-preference) {
  #danny-menu, #danny-menu::backdrop { transition: opacity var(--dm-kurz) var(--dm-blende), display var(--dm-kurz) allow-discrete, overlay var(--dm-kurz) allow-discrete; }
  #danny-menu:not([open]), #danny-menu:not([open])::backdrop { opacity: 0; }
  @starting-style { #danny-menu[open], #danny-menu[open]::backdrop { opacity: 0; } }
  /* R2-13 (B2, 03.11.): Einträge erst, wenn die Fläche deckt (120 ms ≈ volle Deckung in kurz/blende), sonst lagen sie ~100 ms
     doppelt belichtet über dem Seitentext; beim Schließen sofort weg, danach blendet nur die Fläche aus. */
  #danny-menu[open] .dm-mobile-menu__links > li { animation: dm-ein var(--dm-mittel) var(--dm-blende) both, dm-ankommen var(--dm-mittel) var(--dm-kurve) both; animation-delay: 120ms; }
  #danny-menu[open] .dm-mobile-menu__links > li:nth-child(2) { animation-delay: 160ms; }
  #danny-menu[open] .dm-mobile-menu__links > li:nth-child(3) { animation-delay: 200ms; }
  #danny-menu[open] .dm-mobile-menu__links > li:nth-child(4) { animation-delay: 240ms; }
  #danny-menu[open] .dm-mobile-menu__links > li:nth-child(5) { animation-delay: 280ms; }
  #danny-menu[open] .dm-mobile-menu__links > li:nth-child(n+6) { animation-delay: 320ms; }
  #danny-menu:not([open]) .dm-mobile-menu__links { visibility: hidden; }
}
/* D-4 (03.11.): Bilder nicht per Langdruck (iOS) sichern oder herausziehen; Kontextmenü sperrt das Frontend-JS */
body:not(.elementor-editor-active) img { -webkit-touch-callout: none; -webkit-user-drag: none; user-drag: none; }

/* ===== B2 (03.11.2026) ===== */
/* Kopf optisch mittig und eine Stufe niedriger (Johannes 03.11.): Vorlage 1997/2304 hält 32 px oben und 40 px unten um eine
   versalmittige Zeile (Logo und Menü ±0,5 px), die Schrift saß deshalb 8 px zu hoch; jetzt oben und unten --element (24 px bis
   1440, darüber mitwachsend), 1440: 96 → 72 px wie mobil. Hier statt in der Vorlage, solange 1997 bei einem anderen Writer liegt
   und damit ?kopf=hoch (html[data-dm-kopf-hoehe="hoch"], Kopfskript) den alten Kopf zum Vergleich zeigt; ?kopf=niedrig zurück.
   Mobil (bis 767) unverändert 72 px, schon mittig (14 px um die 44-px-Tippzeile). Alle Abhängigen messen die Kopfhöhe (--dm-kopf-h,
   Werkverzeichnis), nichts rechnet mit 96 px. */
@media (min-width: 768px) {
  html:not([data-dm-kopf-hoehe="hoch"]) body > [data-elementor-type="header"] > .e-con { padding-block: var(--element, 1.5rem); }
}
/* R2-03: Seitenwechsel aus gescrollter Seite. Der neue Kopf ist in den ersten 40 bis 70 ms noch nicht klebend und damit ohne
   Hintergrund (html[data-dm-kopf] setzt erst das Frontend-JS); seine Gruppe lag durchsichtig über dem alten Inhalt, und der Text
   unter dem alten Kopf wurde sichtbar (wirkte wie ein Sprung um die Kopfhöhe). Die Kopfgruppe trägt deshalb die Grundfarbe. */
html[data-dm-seite]::view-transition-group(dm-kopf) { background: var(--grund, #F5F4F0); }

/* R2-05 / Idee A: Faden. Nach dem Klick auf einen Link zu einer anderen Seite zeichnet sich an der Kopfunterkante sofort eine feine
   Linie von links (Frontend-JS: #dm-faden, Lage aus dem Kopf). Bis 60 % in lang/kurve, dann langsam weiter; die neue Seite bringt
   keinen Faden mit. Bei reduzierter Bewegung steht die Linie sofort ganz da (nur Farbwechsel). Gewählter Menüpunkt: Unterstrich. */
#dm-faden { position: fixed; left: 0; right: 0; height: 1px; z-index: 45; background: var(--text, #1A1A18); transform-origin: 0 50%; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  #dm-faden { animation: dm-faden 4s both, dm-ein var(--dm-kurz) var(--dm-blende) both; }
}
@keyframes dm-faden {
  from { scale: 0 1; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
  15% { scale: .6 1; animation-timing-function: cubic-bezier(0, 0, .2, 1); }
  to { scale: .9 1; }
}
html body [data-elementor-type="header"] a[data-dm-gewaehlt], html body #danny-menu a[data-dm-gewaehlt] { text-decoration-line: underline; text-decoration-color: currentColor; text-decoration-thickness: 1px; text-underline-offset: 4px; }
@media print { #dm-faden { display: none; } }

/* R2-16: Publikationszeilen mit Lesespalte (~68 Zeichen wie Fließtext); die ISBN (eigene Spanne mit geschütztem Leerzeichen) bricht nicht. */
.pub-zeile p { max-width: 68ch; }
.pub-zeile p.angabe > span { white-space: nowrap; }

/* FS-1 (Vergleich, Johannes): Werkseite unten. Heute: Linie über Vor/Zurück (128 px unter dem Werk) und 128 px tiefer die Fußlinie.
   ?fuss=a|b|c wählt eine Variante für den Tab (sessionStorage dm-fuss), ?fuss=aus zurück; nur auf Seiten mit Werknavigation
   (Frontend-JS setzt html[data-dm-fuss]). a: eine Linie über der Navigation, Fuß ohne Linie direkt darunter. b: Navigation ohne
   Linie direkt über der Fußlinie. c: Navigation einzeilig im Fuß, unter der Fußlinie, über Copyright und Links. Abstände block/element. */
/* Johannes 03.11.: b ist Standard (ohne Schalter); ?fuss=alt zeigt den Stand davor, ?fuss=aus löscht die Wahl. */
html:not([data-dm-fuss="alt"]) .dm-werknavigation { margin-top: var(--block, 4rem); }
html[data-dm-fuss="a"] .dm-werknavigation { padding-bottom: var(--element, 1.5rem); }
html[data-dm-fuss="a"] [data-elementor-type="footer"] > .seitenrahmen { margin-top: 0; }
html[data-dm-fuss="a"] [data-elementor-type="footer"] > .seitenrahmen > .e-con:first-child { border-top-color: transparent; }
html:is([data-dm-fuss="b"], :not([data-dm-fuss])) .dm-werknavigation { border-top: 0; padding-top: 0; }
html:is([data-dm-fuss="b"], :not([data-dm-fuss])) body:has(.dm-werknavigation) [data-elementor-type="footer"] > .seitenrahmen { margin-top: var(--element, 1.5rem); }
html[data-dm-fuss="c"] [data-elementor-type="footer"] > .seitenrahmen { margin-top: var(--block, 4rem); }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--linie, #DDDBD5); }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation + .e-con { border-top-color: transparent; }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation { align-items: baseline; }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation a { flex-direction: row; align-items: baseline; gap: .5em; }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation .angabe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation a[rel="prev"]::before { content: "←"; }
html[data-dm-fuss="c"] [data-elementor-type="footer"] .dm-werknavigation a[rel="next"]::after { content: "→"; }
@media (max-width: 767px) { html:not([data-dm-fuss="alt"]) .dm-werknavigation { margin-top: var(--element, 1.5rem); } }