/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* Hallmark · macrostructure: Narrative Workflow (Stationen in der Zeit) · tone: ruhig, archivarisch · anchor hue: Hausrot
   nav: Hauskopf · footer: Hausfuß · theme: POLKA (gesperrt) · enrichment: Standbilder der eigenen Dokumentationen */
#inhalt{ --zl-grund:var(--papier); --zl-linie:var(--papier-3); --zl-tinte:var(--tinte); --zl-tinte-2:var(--tinte-2);
  --zl-grau:var(--grau); --zl-akzent:var(--rot); --zl-film:#141110 }
.zl{ background:var(--zl-grund); color:var(--zl-tinte); padding-bottom:var(--s6) }
html[data-theme="dark"] #inhalt{ --zl-grund:#141110; --zl-linie:#3a332e; --zl-tinte:#f1efea; --zl-tinte-2:#cdc7bf; --zl-grau:#a49c93; --zl-akzent:#f0c4c2 }
html[data-theme="dark"] body{ background:#141110 }
html, body{ overflow-x:clip }
.zl :is(a):focus-visible{ outline:3px solid var(--zl-akzent); outline-offset:2px }
.zl .krumen{ padding-top:var(--s3); color:var(--zl-grau) }
.zl .krumen a{ color:var(--zl-grau) }
.zl .krumen a:hover{ color:var(--zl-akzent) }
.zl .krumen [aria-current]{ color:var(--zl-tinte) }

.zl-vorspann{ font-family:var(--schrift-display); font-weight:500; font-size:clamp(1.35rem,2.5vw,1.85rem); line-height:1.35; max-width:32ch; margin:var(--s4) 0 var(--s5) }

.zl-gitter{ display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); gap:var(--s5); align-items:start }

/* Register: läuft auf breiten Schirmen mit und zeigt die aktuelle Station */
.zl-register{ position:sticky; top:calc(67px + var(--s3)); min-width:0 }
.zl-register h2{ font-family:var(--schrift-ui); font-size:13px; font-weight:700; margin:0 0 var(--s1); color:var(--zl-grau) }
.zl-register ol{ list-style:none; margin:0; padding:0; border-top:1px solid var(--zl-linie) }
.zl-register a{ display:flex; align-items:center; min-height:44px; padding:6px 0; border-bottom:1px solid var(--zl-linie); text-decoration:none; white-space:nowrap;
  font-size:15px; font-variant-numeric:tabular-nums; color:var(--zl-tinte-2); transition:color var(--takt) }
.zl-register a:hover{ color:var(--zl-akzent) }
.zl-register a[aria-current="true"]{ color:var(--zl-akzent); font-weight:700 }

.zl-station{ padding-block:0 var(--s5); margin-bottom:var(--s5); border-bottom:1px solid var(--zl-linie); scroll-margin-top:calc(67px + var(--s3)); min-width:0 }
.zl-station:last-of-type{ border-bottom:0; margin-bottom:0; padding-bottom:var(--s4) }
.zl-jahr{ display:block; font-family:var(--schrift-display); font-weight:900; font-size:clamp(3rem,8.4vw,6.6rem); line-height:1; letter-spacing:-.01em;
  font-variant-numeric:lining-nums; color:var(--zl-akzent); overflow-wrap:anywhere; min-width:0 }
.zl-station h2{ font-family:var(--schrift-display); font-weight:800; font-size:clamp(1.45rem,2.6vw,1.95rem); line-height:1.2; margin:var(--s2) 0 10px; overflow-wrap:anywhere }
.zl-station p{ margin:0 0 var(--s2); max-width:62ch; font-size:17px; line-height:1.65 }
.zl-station p a{ color:var(--zl-akzent); text-underline-offset:3px }

/* Weiter zu Film und Porträt */
.zl-filme{ list-style:none; margin:var(--s3) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:var(--s3) }
.zl-filme a{ display:block; min-width:0; text-decoration:none; color:inherit }
.zl-filme img{ display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; background:var(--zl-film) }
.zl-filme b{ display:block; margin-top:10px; font-size:15px; line-height:1.35 }
.zl-filme span{ display:block; margin-top:2px; font-size:13px; color:var(--zl-grau) }
.zl-filme a:hover b{ text-decoration:underline; text-underline-offset:4px }
.zl-person{ margin:var(--s2) 0 0; font-size:15px }
.zl-person a{ color:var(--zl-akzent); text-underline-offset:3px; font-weight:600 }

.zl-hinweis{ max-width:62ch; margin:0 0 var(--s4); padding-left:var(--s2); border-left:3px solid var(--zl-akzent); font-size:15px; line-height:1.6; color:var(--zl-tinte-2) }
.zl-quellen h2, .zl-mehr h2{ font-family:var(--schrift-display); font-weight:800; font-size:1.35rem; margin:0 0 10px }
.zl-quellen ol{ margin:0 0 var(--s4); padding-left:1.2em; font-size:14px; line-height:1.6; color:var(--zl-tinte-2) }
.zl-mehr{ padding-top:var(--s3); border-top:1px solid var(--zl-linie) }
.zl-mehr ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr)); column-gap:var(--s3) }
.zl-mehr li{ border-bottom:1px solid var(--zl-linie) }
.zl-mehr a, .zl-mehr span{ display:flex; align-items:center; min-height:48px; text-decoration:none; color:var(--zl-tinte); font-weight:600; white-space:nowrap; transition:color var(--takt) }
.zl-mehr a:hover{ color:var(--zl-akzent) }
.zl-mehr span{ color:var(--zl-grau); font-weight:400 }

@media (max-width:900px){
  .zl-gitter{ grid-template-columns:minmax(0,1fr); gap:var(--s4) }
  .zl-register{ position:static }
  .zl-register ol{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:var(--s3); border-top:0 }
  .zl-register li{ border-top:0 }
}
@media (prefers-reduced-motion:reduce){
  .zl-register a, .zl-mehr a{ transition:none }
}