:root{
  --black:#0a0a0a;
  --ink:#171717;
  --paper:#faf9f6;
  --muted:#777;
  --line:#d9d7d1;
  --max:820px;
  --shadow:0 24px 80px rgba(0,0,0,.09);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:30px}
body{
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:Georgia,"Times New Roman",serif;
  overflow-x:hidden;
}
button{font:inherit}
.section{width:min(var(--max),calc(100% - 28px));margin-inline:auto}

/* Intro */
.intro{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  padding:24px;
  color:#fff;
  background:var(--black);
}
#data-stream{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
}
.intro-shade{
  position:absolute;
  inset:0;
  z-index:2;
  background:radial-gradient(circle at center,rgba(10,10,10,.20),rgba(10,10,10,.72) 65%,#0a0a0a 100%);
}
.intro-content{
  position:relative;
  z-index:3;
  width:min(720px,100%);
  text-align:center;
}
.domain,.decoder,.chapter-label,.binary-names,.chapter-menu,.project-footer dl,.binary-love{
  font-family:"Courier New",monospace;
}
.domain{
  margin:0 0 22px;
  color:#aaa;
  font-size:.72rem;
  letter-spacing:.19em;
  text-transform:uppercase;
}
.intro h1{
  margin:0;
  font-size:clamp(3rem,11vw,7.2rem);
  line-height:.9;
  font-weight:400;
}
.intro-subtitle{
  margin:28px auto 36px;
  color:#bdbdbd;
  font-style:italic;
}
#decode-button{
  padding:14px 22px;
  border:1px solid #666;
  color:#fff;
  background:rgba(10,10,10,.35);
  cursor:pointer;
  transition:.25s ease;
}
#decode-button:hover,#decode-button:focus-visible{
  color:#000;
  background:#fff;
  outline:none;
}
.decoder{
  width:min(440px,100%);
  margin:34px auto 0;
  color:#bbb;
  font-size:.82rem;
}
.decoder-bar{
  height:3px;
  margin:15px 0 10px;
  background:#333;
}
.decoder-bar span{
  display:block;
  width:0;
  height:100%;
  background:#fff;
}


/* Sanfte Schwarzblende von der Landingpage in die Kapitel */
.intro-transition-layer{
  position:fixed;
  inset:0;
  z-index:100;
  width:100%;
  min-height:100svh;
  opacity:1;
  background:#0a0a0a;
  transition:opacity 1.35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;
}
.intro-transition-layer .intro-content,
.intro-transition-layer #data-stream,
.intro-transition-layer .intro-shade{
  transition:opacity .65s ease;
}
.intro-transition-out{opacity:0}
.intro-transition-out .intro-content,
.intro-transition-out #data-stream,
.intro-transition-out .intro-shade{opacity:0}

/* Navigation */
.chapter-menu{
  position:fixed;
  z-index:40;
  left:22px;
  top:50%;
  display:grid;
  gap:10px;
  transform:translateY(-50%);
}
.chapter-menu a{
  display:flex;
  align-items:center;
  gap:10px;
  color:#999;
  text-decoration:none;
  font-size:.68rem;
  letter-spacing:.08em;
}
.chapter-menu a span{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  border:1px solid #ccc;
  border-radius:50%;
  background:rgba(250,249,246,.92);
}
.chapter-menu a em{
  opacity:0;
  font-style:normal;
  white-space:nowrap;
  transform:translateX(-6px);
  transition:.25s ease;
}
.chapter-menu a:hover em,.chapter-menu a.active em{opacity:1;transform:none}
.chapter-menu a.active span{color:#fff;background:var(--ink);border-color:var(--ink)}

.scroll-track{
  position:fixed;
  z-index:45;
  right:18px;
  top:12vh;
  width:3px;
  height:76vh;
  overflow:hidden;
  border-radius:99px;
  background:#dedcd7;
}
.scroll-track span{
  display:block;
  width:100%;
  height:0;
  border-radius:99px;
  background:var(--ink);
}

/* Story */
.opening{
  min-height:100vh;
  display:grid;
  place-items:center;
  text-align:center;
  font-size:clamp(1.45rem,4vw,2.6rem);
  line-height:1.55;
}
.letter-section{
  padding:0;
}
.letter-section-label{
  margin:0 0 28px;
  text-align:center;
}
.letter{
  padding:clamp(28px,7vw,76px);
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.letter header,.chapter header{text-align:center}
.chapter-label{
  margin:0 0 20px;
  color:var(--muted);
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.binary-names{color:#888;font-size:clamp(.62rem,2.2vw,.84rem);line-height:1.8}
.letter h2,.chapter h2,.bridge h2{font-weight:400}
.letter h2{margin:24px 0 10px;font-size:clamp(2.6rem,9vw,5rem);line-height:.95}
.subtitle{max-width:620px;margin:auto;color:var(--muted);font-style:italic;line-height:1.65}
.dual-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:46px 0;
  font-family:"Courier New",monospace;
}
.dual-divider::before,.dual-divider::after{content:"";width:100px;height:1px;background:var(--line)}
.letter-body{font-size:clamp(1.05rem,2.4vw,1.24rem);line-height:1.85}
.letter-body p{margin:0 0 1.55em}
.triplet,.highlight{text-align:center}
.triplet{font-size:1.18em;line-height:1.9}
.highlight{font-size:1.22em;font-style:italic}
.letter footer{margin-top:54px;padding-top:28px;border-top:1px solid var(--line);text-align:center}
.signatures{font-size:1.25rem;font-weight:700}
.bridge{min-height:75vh;display:grid;place-content:center;text-align:center}
.bridge p{color:var(--muted);font-style:italic}
.bridge h2{max-width:680px;margin:16px auto 0;font-size:clamp(2rem,6vw,4.2rem)}
.chapter{padding:80px 0}
.chapter h2{margin:0;font-size:clamp(2.4rem,8vw,5rem)}
.chapter figure{margin:48px 0 0}
.chapter img{display:block;width:100%;max-height:78vh;object-fit:contain;background:#e7e7e7;box-shadow:var(--shadow)}
.chapter figcaption{max-width:620px;margin:18px auto 0;color:var(--muted);text-align:center;font-style:italic;line-height:1.6}
.teaser{min-height:70vh;display:grid;place-content:center;text-align:center;border-top:1px solid var(--line)}
.teaser .date,.teaser>p:last-child{color:var(--muted)}
.project-footer{padding:70px 0 50px;text-align:center;border-top:1px solid var(--line)}
.project-footer-title{margin:0;font-size:1rem}
.project-footer-status{margin:14px 0 28px;color:var(--muted);font-style:italic}
.project-footer-dates{font-family:"Courier New",monospace;color:#999;font-size:.68rem;letter-spacing:.08em;line-height:1.8}
.project-footer-dates p{margin:0}
.subpage-footer{width:100%;margin-top:100px;padding-bottom:0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.visible{opacity:1;transform:none}

@media(max-width:980px){
  .chapter-menu{left:8px}
  .chapter-menu a em{display:none}
  .scroll-track{right:8px}
}
@media(max-width:560px){
  .letter{padding:30px 21px}
  .chapter-menu{
    top:auto;
    bottom:12px;
    left:50%;
    display:flex;
    padding:7px 9px;
    transform:translateX(-50%);
    border:1px solid #ddd;
    border-radius:999px;
    background:rgba(250,249,246,.94);
  }
  .chapter-menu a{gap:0}
  .scroll-track{right:4px;top:8vh;height:84vh;width:2px}
}

/* JGA-Auswahl */
.jga-selection header > p:last-child{
  max-width:560px;
  margin:18px auto 0;
  color:var(--muted);
  font-style:italic;
}
.jga-choices{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin-top:52px;
}
.jga-choice{
  min-height:290px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:34px;
  border:1px solid var(--line);
  color:var(--ink);
  background:#fff;
  box-shadow:0 14px 44px rgba(0,0,0,.05);
  text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.jga-choice:hover,.jga-choice:focus-visible{
  transform:translateY(-6px);
  border-color:#aaa;
  box-shadow:var(--shadow);
  outline:none;
}
.jga-choice-binary,.jga-choice-link{
  font-family:"Courier New",monospace;
}
.jga-choice-binary{
  color:#999;
  font-size:clamp(.58rem,1.3vw,.72rem);
  line-height:1.6;
  letter-spacing:.08em;
  overflow-wrap:anywhere;
}
.jga-choice-title{
  font-size:clamp(2.8rem,7vw,5rem);
  line-height:1;
}
.jga-choice-link{
  color:var(--muted);
  font-size:.75rem;
  letter-spacing:.08em;
}

/* JGA-Unterseiten */
.subpage{
  min-height:100vh;
  padding:56px 20px 90px;
}
.subpage-shell{
  width:min(var(--max),100%);
  margin:auto;
}
.back-link{
  display:inline-block;
  margin-bottom:70px;
  color:var(--muted);
  font-family:"Courier New",monospace;
  font-size:.72rem;
  letter-spacing:.08em;
  text-decoration:none;
}
.back-link:hover,.back-link:focus-visible{color:var(--ink)}
.jga-detail-header{text-align:center}
.jga-detail-header h1{
  margin:14px 0 18px;
  font-size:clamp(2.8rem,8vw,5.6rem);
  line-height:.98;
  font-weight:400;
}
.jga-detail-header .date{color:var(--muted);font-style:italic}
.jga-summary{
  max-width:680px;
  margin:70px auto;
  font-size:clamp(1.08rem,2.5vw,1.28rem);
  line-height:1.85;
}
.jga-gallery{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}
.jga-gallery figure{margin:0}
.jga-gallery img{
  display:block;
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#e7e7e7;
}
.jga-gallery figcaption{
  margin-top:10px;
  color:var(--muted);
  font-size:.9rem;
  font-style:italic;
}
.placeholder-frame{
  min-height:280px;
  display:grid;
  place-items:center;
  border:1px dashed #bbb;
  color:#999;
  background:#f4f3ef;
  text-align:center;
  font-family:"Courier New",monospace;
  font-size:.75rem;
  line-height:1.6;
}
@media(max-width:700px){
  .jga-choices,.jga-gallery{grid-template-columns:1fr}
  .jga-choice{min-height:240px}
}

/* Erzählseite: Toms Junggesellenabschied */
.jga-story{
  width:min(700px,100%);
  margin:78px auto 0;
}
.jga-story-section{
  padding:56px 0;
  border-top:1px solid var(--line);
}
.jga-story-section:first-child{
  padding-top:0;
  border-top:0;
}
.jga-story-section h2{
  margin:0 0 22px;
  font-size:clamp(2rem,5vw,3.4rem);
  line-height:1.08;
  font-weight:400;
}
.jga-story-section p{
  margin:0;
  font-size:clamp(1.04rem,2.2vw,1.18rem);
  line-height:1.85;
}
.jga-story-section p + p{margin-top:20px}
.jga-story-lead{
  color:var(--muted);
  font-style:italic;
}
.jga-artifact-section{
  width:min(960px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.jga-artifact-copy{
  width:min(700px,100%);
  margin:0 auto 38px;
}
.artifact-label{
  margin-bottom:14px!important;
  color:#999;
  font-family:"Courier New",monospace;
  font-size:.7rem!important;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.jga-artifact{
  width:min(760px,100%);
  margin:0 auto;
}
.jga-artifact img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
}
.jga-artifact figcaption{
  margin-top:14px;
  color:var(--muted);
  text-align:center;
  font-size:.9rem;
  font-style:italic;
}
@media(max-width:560px){
  .jga-detail-header h1 br{display:none}
  .jga-story{margin-top:58px}
  .jga-story-section{padding:42px 0}
  .jga-artifact-section{width:100%}
}

/* Evas JGA – fotografische Erzählseite */
.eva-jga-page{padding-top:56px}
.eva-hero{padding:14px 0 38px}
.jga-page-lead{
  max-width:560px;
  margin:34px auto 0;
  color:var(--muted);
  font-size:clamp(1.1rem,2.5vw,1.35rem);
  line-height:1.7;
  font-style:italic;
}
.eva-story{margin-top:36px}
.eva-story-block{
  padding:92px 0;
  border-top:1px solid var(--line);
}
.eva-story-block:first-child{border-top:0}
.eva-copy{width:min(680px,100%);margin:0 auto 46px}
.story-index{
  margin:0 0 18px!important;
  color:#999;
  font-family:"Courier New",monospace;
  font-size:.68rem!important;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.eva-copy h2{
  margin:0 0 24px;
  font-size:clamp(2.15rem,6vw,4rem);
  line-height:1.06;
  font-weight:400;
}
.eva-copy p{
  margin:0;
  font-size:clamp(1.04rem,2.2vw,1.18rem);
  line-height:1.85;
}
.eva-copy p + p{margin-top:20px}
.eva-photo{margin:0}
.eva-photo a{display:block;color:inherit}
.eva-photo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  background:#e9e7e1;
  transition:transform .5s ease,filter .5s ease;
}
.eva-photo a:hover img,.eva-photo a:focus-visible img{transform:scale(1.012);filter:contrast(1.025)}
.eva-photo a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.eva-photo figcaption{
  margin-top:13px;
  color:var(--muted);
  text-align:center;
  font-size:.9rem;
  line-height:1.6;
  font-style:italic;
}
.eva-photo-hero{
  width:min(620px,100%);
  margin:0 auto;
}
.eva-photo-hero img{aspect-ratio:4/5;object-position:center 30%;box-shadow:var(--shadow)}
.eva-photo-grid{
  display:grid;
  gap:18px;
}
.eva-photo-grid-brunch{grid-template-columns:1.35fr .8fr}
.eva-photo-grid-brunch .eva-photo-wide{grid-row:span 2}
.eva-photo-grid-brunch img{aspect-ratio:4/5}
.eva-photo-grid-brunch .eva-photo-wide img{aspect-ratio:auto;min-height:100%}
.eva-photo-composition{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
}
.eva-photo-composition .eva-photo-main{grid-row:span 2}
.eva-photo-composition img{aspect-ratio:4/5}
.eva-photo-composition .eva-photo-main img{aspect-ratio:auto;min-height:100%}
.eva-photo-grid-bar{grid-template-columns:.72fr 1.28fr}
.eva-photo-grid-bar img{aspect-ratio:4/3}
.eva-photo-grid-bar .eva-photo-tall img{aspect-ratio:3/4}
.eva-photo-grid-bar .eva-photo-feature{grid-row:span 1}
.eva-photo-grid-bar .eva-photo-feature img{aspect-ratio:4/3}
.eva-photo-finale{
  width:min(900px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.eva-photo-finale img{aspect-ratio:16/10;box-shadow:var(--shadow)}
.eva-end-line{
  max-width:650px;
  margin:48px auto 0;
  text-align:center;
  font-size:clamp(1.35rem,3.4vw,2rem);
  line-height:1.55;
  font-style:italic;
}
@media(max-width:700px){
  .eva-story-block{padding:68px 0}
  .eva-copy{margin-bottom:34px}
  .eva-photo-grid-brunch,.eva-photo-composition,.eva-photo-grid-bar{grid-template-columns:1fr}
  .eva-photo-grid-brunch .eva-photo-wide,.eva-photo-composition .eva-photo-main{grid-row:auto}
  .eva-photo-grid-brunch img,.eva-photo-grid-brunch .eva-photo-wide img,
  .eva-photo-composition img,.eva-photo-composition .eva-photo-main img{aspect-ratio:4/5;min-height:0}
  .eva-photo-grid-bar img,.eva-photo-grid-bar .eva-photo-tall img,.eva-photo-grid-bar .eva-photo-feature img{aspect-ratio:4/5}
  .eva-photo-finale{width:100%;margin-left:0;transform:none}
  .eva-photo-finale img{aspect-ratio:4/3}
}

/* Toms JGA – fotografische Erzählseite */
.tom-jga-page{padding-top:56px}
.tom-hero{padding:14px 0 38px}
.tom-story{margin-top:36px}
.tom-story-block{
  padding:92px 0;
  border-top:1px solid var(--line);
}
.tom-story-block:first-child{border-top:0}
.tom-photo-pair{
  display:grid;
  grid-template-columns:.82fr 1.18fr;
  gap:18px;
  align-items:center;
}
.tom-photo-pair img{aspect-ratio:4/3}
.tom-photo-pair .tom-photo-tall img{aspect-ratio:3/4}
.tom-photo-wide{
  width:min(960px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.tom-photo-wide img{aspect-ratio:16/10;box-shadow:var(--shadow)}
.tom-museum-composition{
  display:grid;
  grid-template-columns:1.22fr .78fr;
  gap:18px;
}
.tom-museum-composition .tom-museum-main{grid-row:span 2}
.tom-museum-composition img{aspect-ratio:4/3}
.tom-museum-composition .tom-museum-main img{height:100%;min-height:100%;aspect-ratio:auto}
.tom-burger-photo img{aspect-ratio:3/4}
.tom-rooftop-artifact{
  display:grid;
  grid-template-columns:.78fr 1.22fr;
  gap:36px;
  align-items:center;
  width:min(980px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.tom-rooftop-photo img{aspect-ratio:3/4;box-shadow:var(--shadow)}
.tom-artifact{width:100%}
.tom-artifact .artifact-label{text-align:center}
.tom-artifact a{display:block;color:inherit}
.tom-artifact img{transition:transform .5s ease,filter .5s ease}
.tom-artifact a:hover img,.tom-artifact a:focus-visible img{transform:scale(1.012);filter:contrast(1.025)}
.tom-artifact a:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.tom-finale-photo{
  width:min(900px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.tom-finale-photo img{aspect-ratio:16/10;box-shadow:var(--shadow)}
@media(max-width:700px){
  .tom-story-block{padding:68px 0}
  .tom-photo-pair,.tom-museum-composition,.tom-rooftop-artifact{grid-template-columns:1fr}
  .tom-photo-pair img,.tom-photo-pair .tom-photo-tall img{aspect-ratio:4/5}
  .tom-photo-wide,.tom-rooftop-artifact,.tom-finale-photo{width:100%;margin-left:0;transform:none}
  .tom-photo-wide img,.tom-finale-photo img{aspect-ratio:4/3}
  .tom-museum-composition .tom-museum-main{grid-row:auto}
  .tom-museum-composition img,.tom-museum-composition .tom-museum-main img,.tom-burger-photo img{aspect-ratio:4/5;min-height:0}
  .tom-rooftop-artifact{gap:52px}
}



/* Kompakterer Einstieg unter der ersten Überschrift der JGA-Seiten */
.eva-story-block:first-child,
.tom-story-block:first-child{
  padding-top:42px;
}
.eva-story,
.tom-story{
  margin-top:20px;
}

/* Erweiterbare Erinnerungsgalerien */
.memory-gallery-section{
  padding:92px 0;
  border-top:1px solid var(--line);
}
.memory-gallery-intro{width:min(680px,100%);margin:0 auto 38px;text-align:center}
.memory-gallery-intro h2{
  margin:0 0 22px;
  font-size:clamp(2.15rem,6vw,4rem);
  line-height:1.06;
  font-weight:400;
}
.memory-gallery-intro p:last-child{
  margin:0;
  color:var(--muted);
  font-size:clamp(1.04rem,2.2vw,1.18rem);
  line-height:1.8;
}
.memory-gallery-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.memory-gallery-panel summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:24px 4px;
  cursor:pointer;
  list-style:none;
  font-family:"Courier New",monospace;
  font-size:.76rem;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.memory-gallery-panel summary::-webkit-details-marker{display:none}
.memory-gallery-panel summary::after{content:"+";font-size:1.35rem;font-weight:300}
.memory-gallery-panel[open] summary::after{content:"–"}
.memory-gallery-status{
  padding:26px 0 34px;
  color:var(--muted);
  text-align:center;
  font-style:italic;
  line-height:1.7;
}
.memory-gallery{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:6px 0 34px;
}
.memory-gallery:empty{display:none}
.memory-gallery-item{margin:0;overflow:hidden;background:#e9e7e1}
.memory-gallery-item button{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.memory-gallery-item.is-video button{cursor:pointer}
.memory-gallery-item img{
  display:block;
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  transition:transform .45s ease,filter .45s ease;
}
.memory-gallery-item:nth-child(5n+1) img,.memory-gallery-item:nth-child(5n+4) img{aspect-ratio:4/5}
.memory-gallery-item button:hover img,.memory-gallery-item button:focus-visible img{transform:scale(1.025);filter:contrast(1.03)}
.memory-gallery-item.is-video img{filter:brightness(.78)}
.memory-gallery-item.is-video button:hover img,
.memory-gallery-item.is-video button:focus-visible img{filter:brightness(.7) contrast(1.04)}
.memory-gallery-play{
  position:absolute;
  top:50%;
  left:50%;
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  padding-left:4px;
  border:1px solid rgba(255,255,255,.8);
  border-radius:50%;
  background:rgba(15,15,15,.58);
  color:#fff;
  font-size:1.15rem;
  line-height:1;
  transform:translate(-50%,-50%);
  box-shadow:0 8px 24px rgba(0,0,0,.24);
  transition:background .3s ease,transform .3s ease;
}
.memory-gallery-item button:hover .memory-gallery-play,
.memory-gallery-item button:focus-visible .memory-gallery-play{
  background:rgba(15,15,15,.78);
  transform:translate(-50%,-50%) scale(1.06);
}
.memory-gallery-item button:focus-visible{outline:2px solid var(--ink);outline-offset:-4px}
.gallery-lightbox{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  grid-template-columns:minmax(46px,90px) minmax(0,1fr) minmax(46px,90px);
  place-items:center;
  padding:34px 12px;
  background:rgba(15,15,15,.94);
}
.gallery-lightbox[hidden]{display:none}
.gallery-lightbox figure{margin:0;max-width:min(1100px,100%);max-height:calc(100vh - 68px);text-align:center}
.gallery-lightbox img,
.gallery-lightbox video{
  display:block;
  max-width:100%;
  max-height:calc(100vh - 120px);
  margin:auto;
  object-fit:contain;
}
.gallery-lightbox video{
  width:min(100%,1100px);
  background:#000;
}
.gallery-lightbox img[hidden],
.gallery-lightbox video[hidden]{display:none}
.gallery-lightbox figcaption{min-height:24px;margin-top:12px;color:#ddd;font-size:.9rem;line-height:1.5}
.gallery-lightbox-close,.gallery-lightbox-nav{border:0;background:transparent;color:#fff;cursor:pointer}
.gallery-lightbox-close{position:absolute;top:14px;right:20px;font-size:2.25rem;line-height:1}
.gallery-lightbox-nav{font-size:1.8rem;padding:16px}
.gallery-lightbox-prev{grid-column:1}.gallery-lightbox figure{grid-column:2}.gallery-lightbox-next{grid-column:3}
body.gallery-open{overflow:hidden}
@media(max-width:700px){
  .memory-gallery-section{padding:68px 0}
  .memory-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .gallery-lightbox{grid-template-columns:45px minmax(0,1fr) 45px;padding:44px 4px 18px}
  .gallery-lightbox-nav{font-size:1.35rem;padding:8px}
  .memory-gallery-play{width:50px;height:50px;font-size:1rem}
}


/* Archivzugang nach der Entschlüsselung */
.archive-access{
  width:min(560px,100%);
  margin:38px auto 0;
  padding:30px clamp(20px,5vw,38px);
  border:1px solid rgba(255,255,255,.26);
  background:rgba(10,10,10,.64);
  backdrop-filter:blur(8px);
  text-align:left;
}
.archive-access-label{
  margin:0 0 12px;
  color:#aaa;
  font-family:"Courier New",monospace;
  font-size:.7rem;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.archive-access h2{margin:0 0 12px;font-size:clamp(1.7rem,5vw,2.5rem);font-weight:400;line-height:1.08}
.archive-access>p:not(.archive-access-label){margin:0;color:#bdbdbd;line-height:1.65}
.archive-access form{margin-top:26px}
.archive-access label{display:block;margin-bottom:9px;color:#bdbdbd;font-family:"Courier New",monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.archive-access-row{display:grid;grid-template-columns:1fr auto;gap:10px}
.archive-access input{
  min-width:0;
  padding:13px 14px;
  border:1px solid #555;
  border-radius:0;
  color:#fff;
  background:rgba(0,0,0,.3);
  font:inherit;
}
.archive-access input:focus{outline:1px solid #fff;outline-offset:2px}
.archive-access button{padding:13px 18px;border:1px solid #777;color:#fff;background:transparent;cursor:pointer;transition:.25s ease}
.archive-access button:hover,.archive-access button:focus-visible{color:#000;background:#fff;outline:none}
.archive-access-message{min-height:1.4em;margin:12px 0 0!important;color:#c8c8c8!important;font-size:.88rem}
.archive-access.shake{animation:archive-shake .32s ease}
@keyframes archive-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media(max-width:560px){.archive-access-row{grid-template-columns:1fr}.archive-access button{width:100%}}

/* Ruhiger Feinschliff für die JGA-Erzählseiten */
.eva-story-block,.tom-story-block{padding-top:clamp(88px,12vw,142px);padding-bottom:clamp(88px,12vw,142px)}
.eva-story-block+ .eva-story-block,.tom-story-block+ .tom-story-block{border-top:1px solid rgba(217,215,209,.72)}
.subpage-reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s ease}
.subpage-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .subpage-reveal{opacity:1;transform:none;transition:none}
  .archive-access.shake{animation:none}
}


.chapter-header{max-width:680px;margin:0 auto 54px;text-align:center;}
.chapter-header h2{margin:0;font-size:clamp(2.4rem,8vw,5rem);font-weight:400;line-height:1.05;}
.chapter-header p{
  margin:18px auto 0;
  max-width:620px;
  color:var(--muted);
  font-style:italic;
  line-height:1.75;
  font-size:clamp(1rem,2vw,1.05rem);
}
.letter{margin-bottom:120px;}


/* Ruhige Brief-Entschlüsselung beim ersten Sichtbarwerden */
.letter{
  position:relative;
  overflow:hidden;
}

/* Klartext bleibt zunächst unsichtbar und wird nach einer kurzen Ruhephase
   gleichzeitig mit dem verblassenden Binärcode eingeblendet. */
.letter > :not(.binary-letter-overlay){
  transition:opacity 4.2s cubic-bezier(.25,.1,.25,1) .6s;
}

.letter-awaiting-decode > :not(.binary-letter-overlay){
  opacity:0;
}

.binary-letter-overlay{
  position:absolute;
  inset:0;
  z-index:3;
  padding:clamp(28px,7vw,76px);
  overflow:hidden;
  color:#343434;
  background:#fff;
  font-family:"Courier New",monospace;
  font-size:clamp(.58rem,1.3vw,.78rem);
  line-height:1.72;
  letter-spacing:.045em;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  opacity:1;
  transition:opacity 3.8s cubic-bezier(.25,.1,.25,1) .5s;
}

.letter.is-decrypting .binary-letter-overlay{
  opacity:.04;
}

.letter.is-decrypting > :not(.binary-letter-overlay),
.letter.is-decoded > :not(.binary-letter-overlay){
  opacity:1;
}

.letter.is-decoded .binary-letter-overlay{opacity:.04}

@media(max-width:560px){
  .binary-letter-overlay{padding:30px 21px;font-size:.56rem;line-height:1.62}
}

@media(prefers-reduced-motion:reduce){
  .letter > :not(.binary-letter-overlay),
  .binary-letter-overlay{transition:none!important}
}


/* Zentraler Zugang zum privaten Erinnerungsarchiv */
.archive-modal{
  position:fixed;
  inset:0;
  z-index:1200;
  display:grid;
  place-items:center;
  padding:20px;
}
.archive-modal[hidden]{display:none!important}
.archive-modal-backdrop{
  position:absolute;
  inset:0;
  background:rgba(5,5,5,.88);
  backdrop-filter:blur(6px);
}
.archive-access-modal{
  position:relative;
  z-index:1;
  width:min(620px,100%);
  margin:0;
  padding:clamp(28px,6vw,48px);
  color:#fff;
  background:#0d0d0d;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 34px 100px rgba(0,0,0,.48);
}
.archive-access-modal h2{font-size:clamp(1.9rem,5vw,3rem)}
.archive-modal-close{
  position:absolute;
  top:10px;
  right:14px;
  padding:6px 9px!important;
  border:0!important;
  color:#aaa!important;
  background:transparent!important;
  font-size:1.8rem;
  line-height:1;
}
.archive-modal-close:hover,.archive-modal-close:focus-visible{color:#fff!important}
.archive-unlock-progress{margin-top:18px}
.archive-unlock-bar{height:3px;background:#333}
.archive-unlock-bar span{display:block;width:0;height:100%;background:#fff;transition:width .12s linear}
.archive-unlock-progress p{margin:9px 0 0;color:#aaa;font-family:"Courier New",monospace;font-size:.72rem;text-align:right}
.archive-access button:disabled,.archive-access input:disabled{opacity:.55;cursor:default}
body.archive-modal-open{overflow:hidden}

/* === Landingpage-Feinschliff === */
.intro h1{
  animation:intro-title-in .9s cubic-bezier(.22,1,.36,1) both;
}

.intro-subtitle{
  opacity:0;
  transform:translateY(8px);
  animation:intro-copy-in .9s cubic-bezier(.22,1,.36,1) .7s forwards;
}

#decode-button{
  opacity:0;
  transform:translateY(8px);
  animation:intro-copy-in .9s cubic-bezier(.22,1,.36,1) 1.3s forwards;
}

@keyframes intro-title-in{
  from{opacity:0;transform:translateY(5px)}
  to{opacity:1;transform:none}
}

@keyframes intro-copy-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  .intro h1,
  .intro-subtitle,
  #decode-button{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* === Brief vollständig zentrieren === */
.letter{
  text-align:center;
}

.letter header,
.letter-body,
.letter footer{
  text-align:center;
}

.letter-body p{
  width:min(100%,700px);
  margin-left:auto;
  margin-right:auto;
}

.letter .subtitle{
  margin-left:auto;
  margin-right:auto;
}

/* === Ruhiges Einblenden auf der Landingpage === */
.intro-subtitle{
  opacity:0;
  transform:none;
  animation:landing-fade-in 2.2s ease .9s forwards;
}

#decode-button{
  opacity:0;
  transform:none;
  animation:landing-fade-in 2.2s ease 2s forwards;
}

@keyframes landing-fade-in{
  from{opacity:0}
  to{opacity:1}
}

/* === Einheitliche Kapitelabstände und Trenner === */
.chapter{
  position:relative;
  padding:140px 0;
  border-top:0;
}

.chapter::before{
  content:"";
  display:block;
  width:90px;
  height:1px;
  margin:0 auto 70px;
  background:var(--line);
}

/* Keine zusätzliche Linie vor dem ersten Briefkapitel */
.letter-section::before{
  display:none;
}

/* Die bisherigen langen Linien der Teaser entfernen */
.teaser{
  border-top:0;
}

/* Genügend Luft zwischen Brief und dem nächsten Kapitel */
.letter{
  margin-bottom:170px;
}

@media(max-width:560px){
  .chapter{
    padding:105px 0;
  }

  .chapter::before{
    width:72px;
    margin-bottom:54px;
  }

  .letter{
    margin-bottom:125px;
  }
}

@media(prefers-reduced-motion:reduce){
  .intro-subtitle,
  #decode-button{
    opacity:1;
    transform:none;
    animation:none;
  }
}

/* === Kapitel 03: Das Standesamt === */
.standesamt-entry{
  display:grid;
  justify-items:center;
  text-align:center;
}
.standesamt-entry h2{line-height:1.04}
.standesamt-entry > p:not(.chapter-label):last-of-type{
  max-width:560px;
  margin:24px auto 0;
  color:var(--muted);
  font-style:italic;
  line-height:1.7;
}
.standesamt-entry-link{
  width:min(540px,100%);
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:space-between;
  gap:42px;
  margin-top:38px;
  padding:32px 34px;
  border:1px solid var(--line);
  color:var(--ink);
  background:#fff;
  box-shadow:0 14px 44px rgba(0,0,0,.05);
  text-align:left;
  text-decoration:none;
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease;
}
.standesamt-entry-date{
  color:var(--ink);
  font-size:clamp(2rem,5vw,3.25rem);
  font-style:normal;
  line-height:1.05;
  letter-spacing:0;
}
.standesamt-entry-action{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-family:"Courier New",monospace;
  font-size:.78rem;
  letter-spacing:.08em;
}
.standesamt-entry-link:hover,.standesamt-entry-link:focus-visible{
  border-color:#aaa;
  box-shadow:var(--shadow);
  transform:translateY(-5px);
  outline:none;
}
.standesamt-entry-arrow{
  color:var(--muted);
  font-size:1.05rem;
  transition:transform .35s ease;
}
.standesamt-entry-link:hover .standesamt-entry-arrow,
.standesamt-entry-link:focus-visible .standesamt-entry-arrow{transform:translateX(4px)}
@media(max-width:700px){
  .standesamt-entry-link{
    min-height:190px;
    padding:28px;
  }
}

.standesamt-page{padding-top:56px}
.standesamt-hero{padding:14px 0 46px}
.standesamt-bouquet{
  width:min(620px,100%);
  margin:16px auto 0;
}
.standesamt-bouquet img{
  aspect-ratio:4/5;
  object-position:center 46%;
  box-shadow:var(--shadow);
}
.standesamt-story{margin-top:68px}
.standesamt-story-block{
  padding:clamp(130px,16vw,190px) 0;
  border-top:1px solid rgba(217,215,209,.72);
}
.standesamt-story-block:first-child{
  padding-top:82px;
  border-top:0;
}
.standesamt-story-block .eva-copy{margin-bottom:64px}
.standesamt-photo-wide,
.standesamt-photo-cinema,
.standesamt-home-photo{
  width:min(960px,calc(100vw - 40px));
  margin-left:50%;
  transform:translateX(-50%);
}
.standesamt-photo-wide img,
.standesamt-photo-cinema img,
.standesamt-home-photo img{
  aspect-ratio:16/10;
  box-shadow:var(--shadow);
}
.standesamt-couple-grid{
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:48px;
  align-items:center;
}
.standesamt-photo-portrait{
  width:min(420px,82%);
  margin-inline:auto;
}
.standesamt-photo-portrait img{aspect-ratio:3/4}
.standesamt-photo-couple img{
  aspect-ratio:4/3;
  box-shadow:var(--shadow);
}
.standesamt-rathaus-photo{
  width:min(820px,100%);
  margin-inline:auto;
}
.standesamt-rathaus-photo img{
  aspect-ratio:4/3;
  box-shadow:var(--shadow);
}
.standesamt-toast-copy{margin-top:clamp(64px,9vw,100px)}
.standesamt-home-photo img{aspect-ratio:16/9}
.standesamt-evening-grid{
  display:grid;
  grid-template-columns:.68fr 1.32fr;
  gap:48px;
  align-items:center;
  margin-top:64px;
}
.standesamt-pizza-photo{
  width:min(420px,90%);
  margin-inline:auto;
}
.standesamt-pizza-photo img{aspect-ratio:3/4}
.standesamt-evening-photo img{
  aspect-ratio:4/3;
  box-shadow:var(--shadow);
}
.standesamt-finale-copy{margin-top:76px!important;margin-bottom:0!important}

@media(max-width:700px){
  .standesamt-story{margin-top:56px}
  .standesamt-story-block{padding:112px 0}
  .standesamt-story-block:first-child{padding-top:72px}
  .standesamt-story-block .eva-copy{margin-bottom:50px}
  .standesamt-photo-wide,
  .standesamt-photo-cinema,
  .standesamt-home-photo{
    width:100%;
    margin-left:0;
    transform:none;
  }
  .standesamt-photo-wide img,
  .standesamt-photo-cinema img,
  .standesamt-home-photo img{aspect-ratio:4/3}
  .standesamt-couple-grid,
  .standesamt-evening-grid{grid-template-columns:1fr}
  .standesamt-couple-grid{gap:56px}
  .standesamt-photo-portrait{width:min(420px,82%)}
  .standesamt-evening-grid{gap:56px;margin-top:56px}
  .standesamt-pizza-photo{width:min(420px,82%)}
  .standesamt-finale-copy{margin-top:64px!important}
}