/* Daniel Man – Werkseite „Strecke“ (D7, 03.11.2026). Richtung D „Abstand“ mit A-Tafeln (29.10.), Labor
   01_WORKING/labor/werkseite-beispiele (Ansatz Strecke) und experimente/strecke (Regeln 1–11).
   Nur Verbraucher der vorhandenen Variablen: Raum (rand, spalte, abschnitt, block, element, eng), Farbe (text, text-leise, linie),
   Typo-Skala „zurückhaltend“ (--dm-wf: 0 bis 1440, darüber bis 3072 linear; Schrift ×1,25). Keine eigenen Farben, Schatten, Radien.
   Bewegung: das Erscheinen beim Scrollen des globalen Frontends (data-dm-erscheinen, mittel/blende/kurve/weg); hier keine eigene. */

.dm-strecke {
  --ws-luft: var(--block, 4rem);
  --ws-bild-h: calc(100svh - 2 * var(--ws-luft) - 2.5rem);   /* Bildhöhe einer Tafel: Fenster minus Luft und Unterschrift */
  margin-top: var(--abschnitt, 8rem);
  color: var(--text, #1A1A18);
}
.dm-strecke figure { margin: 0; }
.dm-strecke img { display: block; max-width: 100%; height: auto; }

/* Angaben: Unterschrift, Quelle, Nachweis (Typo 14 leise, wie .angabe) */
.dm-strecke .ws-angabe { margin: 0; font-style: normal; font-size: var(--typo-14, .875rem); line-height: 1.4286em; font-weight: 420; letter-spacing: .004em; color: var(--text-leise, #6A6862); }
.dm-strecke figure > figcaption.ws-angabe { margin-top: var(--eng, .5rem); }
.dm-strecke .ws-verweis, .dm-strecke .ws-werktext a { color: inherit; text-decoration: underline; text-decoration-color: var(--linie, #DDDBD5); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.dm-strecke .ws-angabe .ws-verweis { color: var(--text, #1A1A18); }
@media (hover: hover) {
  .dm-strecke .ws-verweis:hover, .dm-strecke .ws-werktext a:hover { text-decoration-color: currentColor; }
}
.dm-strecke a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* Tafel: etwa bildschirmhoch, Inhalt mittig (Regel 7) */
.dm-strecke .ws-tafel { box-sizing: border-box; min-height: 100svh; padding: var(--ws-luft) 0; display: flex; flex-direction: column; justify-content: center; align-items: center; }

/* 1 Lesetafel: Werktext ruhig am Anfang, Lesemaß 40 rem */
.dm-strecke .ws-lesen { min-height: 0; padding: 0 0 var(--abschnitt, 8rem); }
.dm-strecke .ws-werktext { width: 100%; max-width: calc(40rem + 160 * var(--dm-wf, 0px)); font-size: calc(1.25rem + 5 * var(--dm-wf, 0px)); line-height: 1.6em; letter-spacing: -.005em; text-wrap: pretty; }
.dm-strecke .ws-werktext p { margin: 0; }
.dm-strecke .ws-werktext p + p, .dm-strecke .ws-werktext > * + * { margin-top: 1em; }
.dm-strecke .ws-werktext ul, .dm-strecke .ws-werktext ol { margin: 0; padding-left: 1.2em; }
/* Blockzitat im Werktext selbst (ZT-1: kein Auszug in eine Zitattafel): etwas größer, öffnendes Zeichen hängt, Quelle leise darunter */
.dm-strecke .ws-werktext blockquote { margin: 1.5em 0; padding: 0; border: 0; font-size: 1.1em; line-height: 1.5em; quotes: "„" "“"; }
.dm-strecke .ws-werktext:lang(en) blockquote { quotes: "\201C" "\201D";   /* B2: Escape war beim Schreiben zu U+0081 + C/D zerfallen (Kaestchen auf EN) */ }
.dm-strecke .ws-werktext blockquote > p:first-child { position: relative; }
.dm-strecke .ws-werktext blockquote > p:first-child::before { content: open-quote; position: absolute; right: 100%; padding-right: .06em; }
.dm-strecke .ws-werktext blockquote > p:last-of-type::after { content: close-quote; }
.dm-strecke .ws-werktext blockquote cite { display: block; margin-top: var(--eng, .5rem); font-style: normal; font-size: var(--typo-14, .875rem); line-height: 1.4286em; color: var(--text-leise, #6A6862); }

/* 2 Ansichten: eine Reihe gleich hoch auf gemeinsamer Unterkante. flex-grow = Seitenverhältnis teilt die Breite so,
   dass alle Bilder gleich hoch sind; die Reihe ist höchstens so breit, dass sie in die Tafel passt. Nie beschnitten. */
.dm-strecke .ws-reihe { display: flex; align-items: flex-start; justify-content: center; gap: var(--spalte, 1.5rem);
  width: min(100%, calc(var(--ws-bild-h) * var(--ws-summe) + (var(--ws-n) - 1) * var(--spalte, 1.5rem))); }
.dm-strecke .ws-bild { flex: var(--ws-ar) 1 0; min-width: 0; }
.dm-strecke .ws-bild img { width: 100%; aspect-ratio: var(--ws-ar); }

/* 3 Zitat: groß in Geist, öffnendes Zeichen hängt links (Regel 6), Größe nach Länge in drei Stufen */
.dm-strecke .ws-zitat { min-height: 64svh; display: grid; grid-template-columns: 1fr 10fr 1fr; align-content: center; align-items: start; }
.dm-strecke .ws-zitat > * { grid-column: 2; }
.dm-strecke .ws-zitat blockquote { margin: 0; padding: 0; border: 0; font-weight: 400; letter-spacing: -.02em; quotes: "„" "“"; }
.dm-strecke .ws-zitat:lang(en) blockquote { quotes: "\201C" "\201D"; }
.dm-strecke .ws-zitat blockquote p { margin: 0; position: relative; text-wrap: pretty; }
.dm-strecke .ws-zitat blockquote p::before { content: open-quote; position: absolute; right: 100%; padding-right: .06em; }
.dm-strecke .ws-zitat blockquote p::after { content: close-quote; }
.dm-strecke .ws-zitat--kurz blockquote { font-size: calc(6rem + 24 * var(--dm-wf, 0px)); line-height: 1.02; }
.dm-strecke .ws-zitat--mittel blockquote { font-size: calc(3.75rem + 15 * var(--dm-wf, 0px)); line-height: 1.08; max-width: 22ch; }
.dm-strecke .ws-zitat--lang blockquote { font-size: calc(2.125rem + 8.5 * var(--dm-wf, 0px)); line-height: 1.25; max-width: 34ch; }
.dm-strecke .ws-zitat figcaption { margin-top: var(--element, 1.5rem); max-width: 40rem; }

/* 4 Ausstellung mit Raumfoto: so groß wie die Tafel erlaubt, Titel verlinkt */
.dm-strecke .ws-ausstellung figure { width: min(100%, calc(var(--ws-bild-h) * var(--ws-ar))); }
.dm-strecke .ws-ausstellung img { width: 100%; aspect-ratio: var(--ws-ar); }

/* 5 Serie als Wand: echte Größenverhältnisse, gemeinsame Unterkante, eine Reihe. Maßstab: der größere von
   „höchstes Werk = Wandhöhe“ und „Reihe = Tafelbreite“ wird nie überschritten (100cqw = Breite der Tafel). */
.dm-strecke .ws-serie { min-height: 0; padding: var(--abschnitt, 8rem) 0; align-items: stretch; container-type: inline-size; }
.dm-strecke .ws-serienkopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spalte, 1.5rem); margin-bottom: var(--block, 4rem); }
.dm-strecke .ws-serientitel { margin: 0; font-size: calc(2.5rem + 10 * var(--dm-wf, 0px)); line-height: 1.2; font-weight: 400; letter-spacing: -.015em; }
.dm-strecke .ws-mehr { flex: none; font-size: var(--typo-15, .9375rem); line-height: 1.6em; }
.dm-strecke .ws-wand { --ws-luecke: var(--spalte, 1.5rem); --ws-wand-h: min(calc(20rem + 160 * var(--dm-wf, 0px)), 45svh);
  --ws-s: min(calc(var(--ws-wand-h) / var(--ws-hmax)), calc((100cqw - (var(--ws-n) - 1) * var(--ws-luecke)) / var(--ws-bsum)));
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: flex-end; justify-content: center; gap: var(--ws-luecke); }
.dm-strecke .ws-wand li { flex: none; margin: 0; }
.dm-strecke .ws-wand a, .dm-strecke .ws-wand span { display: block; }
.dm-strecke .ws-wand img { height: calc(var(--ws-h) * var(--ws-s)); width: auto; max-width: none; aspect-ratio: var(--ws-ar); }
.dm-strecke .ws-wand .ws-ist img { outline: 1px solid var(--text, #1A1A18); outline-offset: 6px; }
.dm-strecke .ws-wandzeile { margin-top: var(--element, 1.5rem); max-width: 70rem; }
.dm-strecke .ws-wandzeile .ws-werk { font-style: italic; }
.dm-strecke .ws-wandzeile .ws-ist { color: var(--text, #1A1A18); }

/* 6 Bildnachweis gesammelt, am Ende der Strecke */
.dm-strecke .ws-nachweis { padding-top: var(--block, 4rem); }

/* Tablet */
@media (max-width: 1024px) {
  .dm-strecke .ws-zitat--kurz blockquote { font-size: 4.5rem; }
  .dm-strecke .ws-zitat--mittel blockquote { font-size: 2.875rem; }
}

/* Tablet hochkant (B3, 04.11.): Tafeln ohne Mindesthöhe, Ansichten untereinander statt halb breit; sonst stünde das mittig gesetzte Bild unter einem halben leeren Schirm.
   Die Bildhöhe bleibt auf die Tafelhöhe begrenzt, Zitate behalten Raum. */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .dm-strecke .ws-tafel { min-height: 0; }
  .dm-strecke .ws-zitat { min-height: 40svh; }
  .dm-strecke .ws-reihe { flex-direction: column; align-items: center; width: 100%; }
  .dm-strecke .ws-bild { flex: none; width: min(100%, calc(var(--ws-bild-h) * var(--ws-ar))); }
}

/* Mobil: Tafeln ohne Mindesthöhe, Bilder volle Breite untereinander, Zitate behalten Raum, Serie als Wischreihe */
@media (max-width: 767px) {
  .dm-strecke { --ws-luft: var(--block, 2.5rem); margin-top: 72px; }
  .dm-strecke .ws-tafel { min-height: 0; padding: var(--ws-luft) 0; }
  .dm-strecke .ws-lesen { padding: 0 0 var(--ws-luft); }
  .dm-strecke .ws-werktext { font-size: 1.125rem; line-height: 1.6em; }
  .dm-strecke .ws-reihe { flex-direction: column; width: 100%; gap: var(--ws-luft); }
  .dm-strecke .ws-bild { flex: none; width: 100%; }
  .dm-strecke .ws-zitat { min-height: 56svh; grid-template-columns: 1.1rem 1fr; }
  .dm-strecke .ws-zitat > * { grid-column: 2; }
  .dm-strecke .ws-zitat--kurz blockquote { font-size: 2.5rem; }
  .dm-strecke .ws-zitat--mittel blockquote { font-size: 1.8125rem; }
  .dm-strecke .ws-zitat--lang blockquote { font-size: 1.3125rem; line-height: 1.35; }
  .dm-strecke .ws-ausstellung figure { width: 100%; }
  .dm-strecke .ws-serie { padding: var(--ws-luft) 0; }
  .dm-strecke .ws-serienkopf { display: block; margin-bottom: var(--element, 1.5rem); }
  .dm-strecke .ws-serientitel { font-size: 1.625rem; line-height: 1.25; }
  .dm-strecke .ws-mehr { display: inline-block; margin-top: 8px; }
  .dm-strecke .ws-wand { --ws-wand-h: 150px; --ws-s: calc(var(--ws-wand-h) / var(--ws-hmax)); --ws-luecke: 14px;
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; padding: 8px 8px 12px; margin: 0 -8px; scrollbar-width: thin; }
}

@media print {
  .dm-strecke .ws-tafel, .dm-strecke .ws-zitat { min-height: 0; break-inside: avoid; }
}