/* ===== Zeitstrahl „Zweitausend Jahre Friesdorf“ (zeitstrahl.html) =====
   Farben aus dem Hausstil (:root in stil.css), NS-Epoche als dunkles Band. */
:root{--zs-grund:#F2EDE2;--zs-papier:#FBF8F1;--zs-text:#2D3E2F;--zs-leise:#5A6B5C;
  --zs-salbei:#8DA08C;--zs-tief:#6E8270;--zs-gold:#B08D4C;--zs-nacht:#1E2620;
  --zs-nacht-karte:#283229;--zs-nacht-text:#E8E1D0;--zs-rost:#A65A47;--zs-navi:64px}
.zs-held{position:relative;overflow:hidden;background:
  radial-gradient(120% 90% at 85% 10%,rgba(176,141,76,.22),transparent 55%),
  linear-gradient(160deg,#2D3E2F 0%,#3c5240 60%,#4d6450 100%);color:#F2EDE2;
  padding:clamp(3.5rem,8vw,6rem) 1.25rem clamp(3rem,7vw,5rem)}
.zs-held-innen{max-width:860px;margin:0 auto;position:relative;z-index:1}
.zs-held h1{font-family:'Cormorant',Georgia,serif;font-weight:700;font-size:clamp(2.6rem,7vw,5.2rem);
  line-height:1.02;margin:.2em 0 .35em;color:#F2EDE2;text-wrap:balance}
.zs-held h1 .zier{color:#D9BE85}
.zs-kicker{font:600 .78rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--zs-gold);margin:0}
.zs-held .zs-kicker{color:#D9BE85}
.zs-lead{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.6;max-width:62ch;color:#E8E1D0;margin:0}
.zs-lead-klein{font-size:.9rem;color:#B9C5B5;margin-top:1rem}
.zs-held-jahre{position:absolute;inset:auto -2vw -3.2vw auto;display:flex;gap:3vw;pointer-events:none;
  font:700 clamp(6rem,19vw,17rem)/.8 'Cormorant',Georgia,serif;color:transparent;
  -webkit-text-stroke:1px rgba(242,237,226,.16);letter-spacing:-.02em}
.zs-held-jahre span:first-child{opacity:.55}

/* Epochenleiste */
.zs-leiste{position:sticky;top:var(--zs-navi);z-index:40;background:rgba(242,237,226,.94);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid rgba(45,62,47,.12)}
.zs-leiste ol{list-style:none;margin:0 auto;padding:0 .75rem;display:flex;max-width:1240px;overflow-x:auto;scrollbar-width:none}
.zs-leiste ol::-webkit-scrollbar{display:none}
.zs-leiste li{flex:1 0 auto}
.zs-leiste a{display:flex;flex-direction:column;align-items:center;gap:1px;padding:.6rem .7rem .55rem;
  text-decoration:none;color:var(--zs-leise);border-bottom:2px solid transparent;white-space:nowrap;
  transition:color .2s,border-color .2s}
.zs-leiste a:hover,.zs-leiste a:focus-visible{color:var(--zs-text)}
.zs-leiste a.aktiv{color:var(--zs-text);border-bottom-color:var(--zs-gold)}
.zs-l-name{font:600 .82rem/1.2 'Inter',system-ui,sans-serif}
.zs-l-jahre{font:500 .72rem/1.2 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums;opacity:.75}
.zs-leiste a[data-epoche="8"]{color:#7d4436}
.zs-leiste-fortschritt{height:2px;background:transparent}
.zs-leiste-fortschritt span{display:block;height:100%;background:var(--zs-gold);transform-origin:left;transform:scaleX(0)}

/* Bühne: Jahresuhr links, Strom rechts */
.zs-buehne{max-width:1240px;margin:0 auto;padding:2.5rem 1.25rem 3rem;display:grid;
  grid-template-columns:minmax(220px,300px) 1fr;gap:clamp(1.5rem,4vw,3.5rem)}
.zs-uhr{position:sticky;top:calc(var(--zs-navi) + 5.5rem);align-self:start;height:max-content;z-index:5}
.zs-uhr-jahr,.zs-uhr-epoche{transition:color .5s}
.zs-uhr-jahr{overflow:hidden;height:1.05em;font:700 clamp(4.2rem,8vw,7.4rem)/1 'Cormorant',Georgia,serif;
  color:var(--zs-text);font-variant-numeric:lining-nums tabular-nums;letter-spacing:-.02em}
.zs-uhr-jahr span{display:inline-block}
.zs-rollt{animation:zsRoll .45s cubic-bezier(.2,.8,.2,1)}
@keyframes zsRoll{from{transform:translateY(55%);opacity:0}to{transform:none;opacity:1}}
.zs-uhr-epoche{font:600 .8rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--zs-gold);margin-top:.5rem}
body.zs-nacht .zs-uhr-jahr{color:var(--zs-nacht-text)}
body.zs-nacht .zs-uhr-epoche{color:#D9A08F}

.zs-strom{position:relative;padding-left:2.2rem}
.zs-linie{position:absolute;left:.45rem;top:0;bottom:0;width:2px;background:rgba(110,130,112,.28)}
.zs-linie span{position:absolute;inset:0;background:linear-gradient(var(--zs-gold),var(--zs-tief));transform-origin:top;transform:scaleY(0)}

/* Epochen-Köpfe */
.zs-epoche{position:relative;padding:1.5rem 0 1rem;scroll-margin-top:calc(var(--zs-navi) + 4.5rem)}
.zs-epoche-kopf{margin:0 0 1.4rem}
.zs-epoche-kopf h2{font:700 clamp(2rem,4.2vw,3.1rem)/1.05 'Cormorant',Georgia,serif;color:var(--zs-text);margin:.25rem 0 .3rem;text-align:left;text-wrap:balance}
.zs-jahre{font:500 .45em/1 'Inter',system-ui,sans-serif;color:var(--zs-leise);letter-spacing:.02em;vertical-align:middle;margin-left:.4rem;font-variant-numeric:tabular-nums}
.zs-buchtitel{font-style:italic;color:var(--zs-leise);margin:0}
.zs-epoche-kopf::before{content:"";position:absolute;left:-2.2rem;top:2.05rem;width:1.1rem;height:1.1rem;margin-left:-.07rem;
  border-radius:50%;background:var(--zs-grund);border:2px solid var(--zs-gold);box-shadow:0 0 0 5px var(--zs-grund)}

/* NS-Band */
.zs-dunkel{color:var(--zs-nacht-text);margin:2rem -1.25rem 2rem calc(-2.2rem - 1.25rem);
  padding:2.2rem 1.25rem 1.6rem calc(2.2rem + 1.25rem);border-radius:18px;background:var(--zs-nacht);
  box-shadow:0 0 0 100vmax var(--zs-nacht);clip-path:inset(0 -100vmax)}
.zs-dunkel .zs-epoche-kopf h2{color:var(--zs-nacht-text)}
.zs-dunkel .zs-buchtitel,.zs-dunkel .zs-jahre{color:#B6B0A2}
.zs-dunkel .zs-kicker{color:#D9A08F}
.zs-dunkel .zs-epoche-kopf::before{background:var(--zs-nacht);border-color:var(--zs-rost);box-shadow:0 0 0 5px var(--zs-nacht)}
.zs-ns-hinweis{max-width:62ch;margin:1rem 0 0;padding:.8rem 1rem;border-left:2px solid var(--zs-rost);
  background:rgba(255,255,255,.04);color:#D6CFC0;font-size:.95rem;line-height:1.6}

/* Stationen */
.zs-liste{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.zs-station{position:relative}
.zs-station::before{content:"";position:absolute;left:-2.2rem;top:1.15rem;width:.7rem;height:.7rem;margin-left:.12rem;
  border-radius:50%;background:var(--zs-papier);border:2px solid var(--zs-tief);transition:transform .25s,background .25s}
.zs-station:hover::before,.zs-station.offen::before{transform:scale(1.35);background:var(--zs-gold);border-color:var(--zs-gold)}
.zs-station article{background:var(--zs-papier);border:1px solid rgba(45,62,47,.1);border-radius:14px;
  box-shadow:0 1px 2px rgba(45,62,47,.05);transition:box-shadow .3s,transform .3s,border-color .3s}
.zs-station:hover article,.zs-station.offen article{box-shadow:0 14px 34px -14px rgba(45,62,47,.35);border-color:rgba(176,141,76,.45)}
.zs-maus .zs-station:hover article{transform:translateX(4px)}
.zs-kopf{display:grid;grid-template-columns:1fr auto;column-gap:1rem;padding:1rem 1.15rem .9rem}
.zs-kopf > *{grid-column:1}
.zs-daumen{grid-column:2!important;grid-row:1 / span 4;width:92px;height:92px;object-fit:cover;border-radius:10px;
  filter:sepia(.25) saturate(.9);transition:filter .3s;align-self:start}
.zs-station:hover .zs-daumen,.zs-station.offen .zs-daumen{filter:none}
.zs-datum{font:700 1.35rem/1.1 'Cormorant',Georgia,serif;color:var(--zs-gold);margin:0;font-variant-numeric:lining-nums}
.zs-station h3{font:700 1.75rem/1.12 'Cormorant',Georgia,serif;color:var(--zs-text);margin:.15rem 0 .35rem;text-wrap:balance}
.zs-kurz{margin:0;font-size:1rem;line-height:1.6;color:var(--zs-text);max-width:62ch}
.zs-meta{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin:.55rem 0 0;font-size:.75rem;letter-spacing:.04em;color:var(--zs-leise)}
.zs-chip{display:inline-block;padding:.08rem .5rem;border-radius:999px;border:1px solid currentColor;font-size:.72rem;letter-spacing:.03em;color:var(--zs-tief)}
.zs-auf{justify-self:start;margin-top:.6rem;font:600 .8rem/1 'Inter',system-ui,sans-serif;color:var(--zs-tief);
  background:none;border:0;padding:.3rem 0;cursor:pointer;border-bottom:1px solid currentColor}
.zs-auf:focus-visible{outline:2px solid var(--zs-gold);outline-offset:3px}
.zs-maus .zs-auf{opacity:.0;height:0;margin:0;padding:0;overflow:hidden}
.zs-maus .zs-auf:focus-visible{opacity:1;height:auto;padding:.3rem 0;margin-top:.6rem}
.zs-mehr{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1)}
.zs-station.offen .zs-mehr{grid-template-rows:1fr}
.zs-mehr-innen{overflow:hidden;min-height:0}
.zs-mehr-innen > p{margin:0;padding:0 1.15rem 1rem;font-size:.97rem;line-height:1.7;color:var(--zs-leise);max-width:68ch;border-top:1px dashed rgba(45,62,47,.15);padding-top:.85rem;margin:0 0 0}
.zs-abb{margin:0 1.15rem 1.15rem}
.zs-abb img{display:block;width:100%;max-height:440px;object-fit:contain;background:#ebe5d8;border-radius:10px}
.zs-abb figcaption{font-size:.82rem;line-height:1.45;color:var(--zs-leise);margin-top:.45rem}
.zs-abb figcaption span{display:block;font-size:.72rem;opacity:.8}
/* Stationen in der NS-Zeit */
.zs-dunkel .zs-station article{background:var(--zs-nacht-karte);border-color:rgba(232,225,208,.08)}
.zs-dunkel .zs-station h3,.zs-dunkel .zs-kurz{color:var(--zs-nacht-text)}
.zs-dunkel .zs-datum{color:#D9A08F}
.zs-dunkel .zs-meta,.zs-dunkel .zs-chip,.zs-dunkel .zs-auf{color:#B6B0A2}
.zs-dunkel .zs-mehr-innen > p{color:#CFC8B8;border-top-color:rgba(232,225,208,.12)}
.zs-dunkel .zs-station::before{background:var(--zs-nacht);border-color:var(--zs-rost)}
.zs-dunkel .zs-station:hover::before,.zs-dunkel .zs-station.offen::before{background:var(--zs-rost)}
.zs-dunkel .zs-station:hover article,.zs-dunkel .zs-station.offen article{border-color:rgba(166,90,71,.6);box-shadow:0 14px 34px -14px rgba(0,0,0,.6)}
.zs-dunkel .zs-abb img{background:#141a15}
.zs-dunkel .zs-abb figcaption{color:#B6B0A2}
.zs-dunkel .zs-daumen{filter:grayscale(1) contrast(1.05)}
/* Erscheinen */
.zs-weg{opacity:0;transform:translateY(18px)}
.zs-da{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}

/* Schluss */
.zs-schluss{background:var(--zs-grund);padding:4rem 0 3rem;border-top:1px solid rgba(45,62,47,.1)}
.zs-schluss-raster{display:grid;grid-template-columns:1.3fr 1fr;gap:2.5rem;align-items:center}
.zs-schluss .knopf{margin:.3rem .4rem .3rem 0}
.zs-cover{display:flex;gap:1rem;justify-content:center}
.zs-cover img{width:44%;max-width:210px;border-radius:4px;box-shadow:0 18px 30px -12px rgba(45,62,47,.45)}
.zs-cover img:last-child{transform:translateY(1.4rem) rotate(2deg)}
.zs-cover img:first-child{transform:rotate(-2deg)}
.zs-methode{margin-top:3rem;padding:1.4rem 1.5rem;background:var(--zs-papier);border-radius:14px;border:1px solid rgba(45,62,47,.1)}
.zs-methode h3{font:700 1.35rem/1.2 'Cormorant',Georgia,serif;margin:0 0 .4rem;color:var(--zs-text)}
.zs-methode p{margin:0;line-height:1.65;color:var(--zs-leise);max-width:75ch}

/* Schutz & Copyright */
.zs-held,.zs-buehne{-webkit-user-select:none;user-select:none}
.zs-buehne img,.zs-held img,.zs-cover img{-webkit-user-drag:none;-webkit-touch-callout:none}
.zs-buehne img:not(.zs-frei),.zs-abb:not(.zs-frei) img{pointer-events:none}
.zs-auf{-webkit-user-select:none;user-select:none}
.zs-copyright{max-width:1240px;margin:0 auto;padding:0 1.25rem 2.5rem calc(1.25rem + 300px + clamp(1.5rem,4vw,3.5rem));
  font-size:.82rem;line-height:1.55;color:var(--zs-leise)}
.zs-methode h3+p{margin-top:0}
.zs-methode p+h3{margin-top:1.4rem}
.zs-methode p+p{margin-top:.7rem}
.zs-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);opacity:0;z-index:60;pointer-events:none;
  background:#2D3E2F;color:#F2EDE2;font:500 .9rem/1.4 'Inter',system-ui,sans-serif;padding:.7rem 1rem;border-radius:10px;
  box-shadow:0 10px 24px -10px rgba(0,0,0,.5);transition:opacity .25s,transform .25s}
.zs-toast.an{opacity:1;transform:translate(-50%,0)}

/* Handy & Tablet */
@media (max-width:900px){
  .zs-buehne{grid-template-columns:1fr;padding-top:1rem}
  .zs-uhr{position:fixed;top:auto;bottom:14px;right:14px;z-index:45;opacity:0;transition:opacity .3s;pointer-events:none;
    background:rgba(242,237,226,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    padding:.35rem .8rem .4rem;border-radius:12px;box-shadow:0 4px 14px rgba(45,62,47,.12);text-align:right}
  .zs-uhr.zs-an{opacity:1}
  .zs-uhr-jahr{font-size:2rem}
  .zs-uhr-epoche{font-size:.62rem;margin-top:.15rem}
  body.zs-nacht .zs-uhr{background:rgba(40,50,41,.92)}
  .zs-schluss-raster{grid-template-columns:1fr}
  .zs-copyright{padding-left:1.25rem}
}
@media (max-width:600px){
  .zs-strom{padding-left:1.6rem}
  .zs-linie{left:.3rem}
  .zs-station::before{left:-1.6rem;margin-left:-.02rem}
  .zs-epoche-kopf::before{left:-1.6rem;margin-left:-.25rem}
  .zs-dunkel{margin-left:calc(-1.6rem - 1.25rem);padding-left:calc(1.6rem + 1.25rem);border-radius:0}
  .zs-daumen{width:64px;height:64px}
  .zs-kopf{padding:.9rem .95rem .8rem}
  .zs-mehr-innen > p{padding-left:.95rem;padding-right:.95rem}
  .zs-abb{margin:0 .95rem .95rem}
  .zs-l-jahre{display:none}
}
@media (prefers-reduced-motion:reduce){
  .zs-mehr,.zs-station article,.zs-station::before,.zs-uhr-jahr,.zs-daumen{transition:none!important}
  .zs-rollt{animation:none}
  .zs-weg{opacity:1;transform:none}
}
@media print{
  .zs-leiste,.zs-uhr,.zs-auf,.zs-linie,.zs-toast{display:none}
  .zs-abb:not(.zs-frei),.zs-daumen:not(.zs-frei),.zs-cover{display:none}
  .zs-mehr{grid-template-rows:1fr!important}
  .zs-buehne{display:block}
  .zs-dunkel{background:none;color:#000;box-shadow:none}
}