:root{
  --zl-navy:#0f3d76;
  --zl-gold:#c5b37c;
  --zl-ink:#17191c;
  --zl-muted:#73777c;
  --zl-paper:#fbfaf7;
  --zl-line:rgba(15,61,118,.12);
  --zl-disabled:#d9dcdf;
  --zl-z-size:112px;
  --zl-reader-rail:clamp(148px,12.25vw,190px);
}
*{box-sizing:border-box}
html{background:var(--zl-paper);color:var(--zl-ink);font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;min-height:100vh;background:var(--zl-paper);font-size:17px;line-height:1.62}
body.art-mode{overflow:auto}
button{font:inherit}
[hidden]{display:none!important}

/* Das Z steht ausschließlich auf Karten und behält auf K und B dieselbe Geometrie. */
.z-control{position:fixed;z-index:100;left:34px;top:30px;width:var(--zl-z-size);height:var(--zl-z-size);pointer-events:none}
.z-control button{position:absolute;width:26px;height:26px;padding:0;border:0;background:transparent;display:grid;place-items:center;color:var(--zl-navy);cursor:pointer;pointer-events:auto;opacity:.66;transition:opacity .14s ease,color .14s ease}
.z-control button:hover:not(:disabled),.z-control button:focus-visible:not(:disabled){opacity:1;outline:none}
.z-control button:disabled{color:var(--zl-disabled);opacity:.16;cursor:default;pointer-events:none}
.z-control svg{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.04;stroke-linecap:round;stroke-linejoin:round}
.z-control .z-up{left:50%;top:0;transform:translateX(-50%)}
.z-control .z-right{right:0;top:50%;transform:translateY(-50%)}
.z-control .z-down{left:50%;bottom:0;transform:translateX(-50%)}
.z-control .z-left{left:0;top:50%;transform:translateY(-50%)}
.z-control .z-center{left:50%;top:50%;width:22px;height:22px;transform:translate(-50%,-50%);opacity:1;cursor:pointer;pointer-events:auto}
.z-control .z-center::before{content:"";display:block;width:7px;height:7px;border-radius:50%;background:var(--zl-gold)}
.z-control .z-center:hover::before,.z-control .z-center:focus-visible::before{box-shadow:0 0 0 4px rgba(197,179,124,.10)}
.z-control .z-side{top:50%;width:20px;height:36px;transform:translateY(-50%);opacity:1}
.z-control .z-front{left:25px}
.z-control .z-back{right:25px}
.z-control .z-side:focus-visible{outline:1px solid rgba(197,179,124,.72)!important;outline-offset:1px;border-radius:3px}
.z-control .z-side[aria-pressed="true"]{cursor:default}

.reader-stage{min-height:100vh}

/* Gemeinsame Kopf- und Fußzeilen des Kartenpaars. */
.card-header{position:relative;display:flex;align-items:flex-start;justify-content:space-between;gap:30px;margin:0 0 36px;padding-bottom:14px;border-bottom:1px solid var(--zl-line)}
.card-meta-line{min-width:0;margin:4px 0 0;color:var(--zl-navy);font-size:.69rem;font-weight:520;letter-spacing:.045em;line-height:1.45;text-transform:uppercase}
.card-share{position:relative;flex:0 0 auto}
.card-share-toggle{display:flex;align-items:center;gap:7px;border:0;background:transparent;color:var(--zl-muted);padding:3px 0 4px;cursor:pointer;font-size:.7rem}
.card-share-toggle:hover,.card-share-toggle:focus-visible{color:var(--zl-navy);outline:none}
.card-share-toggle svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.card-share-menu{position:absolute;z-index:30;right:0;top:calc(100% + 7px);min-width:148px;padding:6px;background:#fff;border:1px solid var(--zl-line);box-shadow:0 14px 34px rgba(15,61,118,.09)}
.card-share-menu button{display:block;width:100%;border:0;background:transparent;color:var(--zl-ink);padding:8px 10px;text-align:left;cursor:pointer;font-size:.73rem}
.card-share-menu button:hover,.card-share-menu button:focus-visible{background:var(--zl-paper);color:var(--zl-navy);outline:none}
.card-share-status{position:absolute;right:0;top:calc(100% + 6px);width:max-content;max-width:230px;color:var(--zl-muted);font-size:.64rem;line-height:1.35;text-align:right}
.card-share-menu:not([hidden]) + .card-share-status{display:none}

.card-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;margin-top:64px;padding-top:18px;border-top:1px solid var(--zl-line);color:var(--zl-muted);font-size:.64rem;letter-spacing:.045em}
.card-footer-number{justify-self:start;color:var(--zl-navy)}
.card-footer-logo{position:relative;display:grid;place-items:center;min-width:108px;min-height:23px}
.card-footer-logo img{display:block;width:108px;height:auto}
.card-footer-logo-fallback{color:var(--zl-navy);font-size:.7rem;font-weight:560;letter-spacing:.04em}
.card-footer time{justify-self:end}

/* K — kompakter Bild-/Titelblock; danach fließt der gesamte Inhalt natürlich. */
.event-page{width:calc(100% - 2 * var(--zl-reader-rail));max-width:1020px;margin:0 auto;padding:var(--zl-reader-rail) 0 112px}
.event-hero{display:grid;grid-template-columns:minmax(210px,30%) minmax(0,1fr);gap:clamp(36px,5vw,72px);align-items:start}
.event-hero--text-only{display:block}
.event-hero--text-only .event-hero-copy{max-width:780px;margin-left:auto}
.event-title{margin:0;color:var(--zl-navy);font-size:clamp(2.35rem,4.55vw,4.25rem);font-weight:500;line-height:.99;letter-spacing:-.052em;text-wrap:balance}
.event-date{margin:18px 0 0;color:var(--zl-muted);font-size:.78rem}
.event-lead{margin:27px 0 0;font-size:1.07rem;line-height:1.6}
.event-summary{margin:0 0 30px;font-size:1.02rem;line-height:1.65}
.event-art{min-width:0;margin:0}
.event-image-link,.event-caption-link,.to-art{appearance:none;border:0;background:transparent;color:inherit;padding:0;text-align:left;cursor:pointer}
.event-image-link{display:block;width:100%}
.event-image-link img{display:block;width:100%;height:auto;max-height:310px;object-fit:contain;object-position:center;background:#f3f1eb}
.event-caption-link{display:block;width:100%;padding:11px 0 0;color:var(--zl-muted);font-size:.65rem;line-height:1.42}
.event-caption-link:hover,.event-caption-link:focus-visible{color:var(--zl-navy);outline:none}
.to-art{margin-top:12px;color:var(--zl-navy);font-size:.72rem;border-bottom:1px solid rgba(15,61,118,.18);padding-bottom:2px}
.to-art:hover,.to-art:focus-visible{border-bottom-color:var(--zl-gold);outline:none}
.event-body{width:min(100%,720px);margin:58px 0 0 auto}
.event-section{padding:29px 0;border-top:1px solid var(--zl-line)}
.event-section h2,.art-section h2{margin:0 0 11px;color:var(--zl-navy);font-size:.98rem;font-weight:560}
.event-section p,.art-section p{margin:0 0 1em}
.event-section p:last-child,.art-section p:last-child{margin-bottom:0}
.reader-source-list{margin:0;padding:0;list-style:none}
.reader-source-list li{margin:.46em 0;overflow-wrap:anywhere}
.reader-source-list a{color:var(--zl-navy);text-decoration-color:rgba(15,61,118,.24);text-underline-offset:3px}
.reader-source-list a:hover,.reader-source-list a:focus-visible{text-decoration-color:var(--zl-gold);outline:none}

/* B — Bild links, Text rechts; der gesamte Karteninhalt scrollt natürlich. */
.art-close{position:fixed;z-index:110;right:var(--zl-reader-rail);top:28px;transform:translateX(-100%);width:38px;height:38px;padding:0;border:0;background:transparent;color:var(--zl-navy);font-size:1.55rem;font-weight:300;line-height:1;cursor:pointer;opacity:.55;transition:opacity .14s ease}
.art-close:hover,.art-close:focus-visible{opacity:1;outline:none}
.art-page{width:calc(100% - 2 * var(--zl-reader-rail));max-width:1320px;min-height:100vh;margin:0 auto;overflow:visible;padding:var(--zl-reader-rail) 0 112px}
.art-layout{display:grid;grid-template-columns:minmax(300px,46%) minmax(0,1fr);gap:clamp(38px,5vw,76px);align-items:start}
.art-image-fixed{min-width:0;margin:0;display:flex;align-items:flex-start;justify-content:center;overflow:visible}
.art-image-fixed img{display:block;max-width:100%;width:auto;height:auto;max-height:none;object-fit:contain;object-position:center top;background:#f3f1eb}
.art-text{min-width:0;overflow:visible;padding:0}
.art-page[data-has-image="false"] .art-layout{display:block;max-width:850px;margin:0 auto}
.art-page[data-has-image="false"] .art-text{width:100%;margin:0}
.art-text .card-header{margin-bottom:31px}
.art-title{margin:0;color:var(--zl-navy);font-size:clamp(2rem,3.5vw,3.2rem);font-weight:500;line-height:1.03;letter-spacing:-.045em;text-wrap:balance}
.art-byline{margin:15px 0 0;color:var(--zl-muted);font-size:.82rem}
.art-caption{margin:25px 0 0;padding-top:17px;border-top:1px solid var(--zl-line);color:var(--zl-muted);font-size:.7rem;line-height:1.5}
.art-caption strong{color:var(--zl-ink);font-weight:520}
.art-section{max-width:720px;padding:27px 0;border-top:1px solid var(--zl-line)}
.art-section:first-of-type{margin-top:31px}

@media(max-width:900px){
  :root{--zl-z-size:98px;--zl-reader-rail:128px}
  body{font-size:16.5px}
  .z-control{left:22px;top:22px}
  .z-control .z-front{left:18px}
  .z-control .z-back{right:18px}
  .event-page{width:calc(100% - 2 * var(--zl-reader-rail));padding-top:var(--zl-reader-rail)}
  .event-hero{grid-template-columns:minmax(180px,29%) minmax(0,1fr);gap:34px}
  .event-title{font-size:clamp(2.1rem,5.5vw,3.25rem)}
  .art-layout{grid-template-columns:minmax(220px,40%) minmax(0,1fr);gap:32px}
  .art-close{right:var(--zl-reader-rail);top:20px}
}

/* Handy: K und B laufen ohne verschachtelte Scrollbereiche. */
@media(max-width:680px){
  body{font-size:16px}
  body.art-mode{overflow:auto}
  .z-control{left:12px;top:12px;transform:scale(.76);transform-origin:top left}
  .event-page{width:auto;margin:0;padding:104px 20px 76px}
  .card-header{gap:18px;margin-bottom:30px}
  .card-meta-line{font-size:.62rem}
  .card-share-toggle span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .event-hero,.event-hero--text-only{display:block}
  .event-art{width:min(72vw,300px);margin:0 0 32px}
  .event-title{font-size:clamp(2.15rem,11vw,3.15rem)}
  .event-body{width:auto;margin-top:48px}
  .event-image-link img{max-height:none}
  .card-footer{gap:12px;margin-top:52px}
  .card-footer-logo{min-width:82px}.card-footer-logo img{width:82px}
  .art-close{right:14px;top:13px;transform:none}
  .art-page{width:auto;height:auto;margin:0;overflow:visible;padding:104px 20px 76px}
  .art-page[data-orientation="portrait"] .art-layout,.art-page[data-orientation="landscape"] .art-layout{display:block;height:auto}
  .art-image-fixed,.art-page[data-orientation="portrait"] .art-image-fixed,.art-page[data-orientation="landscape"] .art-image-fixed{display:block;overflow:visible;padding:0;margin:0 0 34px}
  .art-image-fixed img{width:100%;height:auto;max-height:none;object-fit:contain}
  .art-text,.art-page[data-orientation="landscape"] .art-text{width:auto;height:auto;overflow:visible;margin:0;padding:0}
  .art-page[data-has-image="false"] .art-text{width:auto;height:auto;padding:0}
  .art-title{font-size:clamp(2.05rem,10vw,2.9rem)}
}

@media print{
  @page{margin:14mm}
  html,body{background:#fff;font-size:10.5pt}
  body.art-mode{overflow:visible}
  .timeline-view,.z-control,.art-close,.card-share{display:none!important}
  .reader-stage,.reader-stage[hidden]{display:block!important;min-height:0}
  #eventPage[hidden],#artPage[hidden]{display:block!important}
  #artPage:empty{display:none!important}
  .event-page{width:100%;max-width:none;margin:0;padding:0;break-after:page}
  .event-hero{grid-template-columns:28% 1fr;gap:12mm}
  .event-image-link img{max-height:72mm}
  .event-title{font-size:30pt}
  .event-body{width:72%;margin-top:13mm}
  .art-page{height:auto;overflow:visible;padding:0;break-before:page}
  .art-layout,.art-page[data-orientation="portrait"] .art-layout,.art-page[data-orientation="landscape"] .art-layout{display:block;height:auto}
  .art-image-fixed,.art-page[data-orientation="portrait"] .art-image-fixed,.art-page[data-orientation="landscape"] .art-image-fixed{height:108mm;margin:0 0 11mm;padding:0;overflow:hidden}
  .art-image-fixed img{max-height:100%;max-width:100%}
  .art-text,.art-page[data-orientation="landscape"] .art-text{width:100%;height:auto;overflow:visible;margin:0;padding:0}
  .art-title{font-size:25pt}
  .card-footer{break-inside:avoid}
  a{color:inherit}
}

@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
