/* erfurt-foto.de – Ausstellungswand */
/* Schrift: Newsreader (SIL Open Font License), liegt auf dem eigenen Server */
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-400-normal.woff2) format("woff2"); font-weight: 300 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-400-italic.woff2) format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url(/assets/fonts/newsreader-latin-600-normal.woff2) format("woff2"); font-weight: 600 900; font-style: normal; font-display: swap; }
:root {
  --wall: #323d48;          /* Schieferblau */
  --paper: #ffffff;         /* Schilder und Tafeln */
  --mat: #fbfaf7;
  --print: #ffffff;         /* weißer Rand der Fotos */
  --frame: #121212;
  --ink: #f1f0eb;           /* Schrift auf der Wand */
  --muted: #c2c8cf;
  --rule: #55616d;
  --label-ink: #17191c;     /* Schrift auf weißen Schildern */
  --label-muted: #5d6168;
  --label-rule: #d5d5d0;
  --red: #c4161c;
  --gap: clamp(16px, 2.6vw, 36px);
  --sans: "Newsreader", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}


* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--wall);
  color: var(--ink);
  font: 400 17px/1.55 var(--sans);
  font-feature-settings: "kern", "liga";
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { text-decoration-color: var(--red); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--paper); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }

/* Kopf und Fuß */
header.site, footer.site { max-width: 1440px; margin: 0 auto; padding: 22px var(--gap); }
header.site { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px; }
.mark { font-weight: 700; font-size: 19px; letter-spacing: -.01em; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; }
.mark .logo { width: 26px; height: 26px; flex: none; }
.dot { width: 13px; height: 13px; border-radius: 50%; background: var(--red); flex: none; transform: translateY(1px); }
header.site nav { display: flex; gap: 22px; font-size: 15px; }
header.site nav a { text-decoration: none; color: var(--muted); padding: 4px 0; }
header.site nav a:hover, header.site nav a[aria-current] { color: var(--ink); }
header.site nav a[aria-current] { box-shadow: inset 0 -2px 0 var(--ink); }
footer.site { margin-top: 72px; padding-bottom: 40px; border-top: 1px solid var(--rule); font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; }
footer.site p { margin: 14px 0 0; max-width: 62ch; }
footer.site a + a { margin-left: 18px; }

main { max-width: 1440px; margin: 0 auto; padding: 0 var(--gap); }

/* Startseite */
.intro { padding: clamp(48px, 7vw, 104px) 0 clamp(28px, 3.5vw, 48px); max-width: 1100px; scroll-margin-top: 0; }
.intro h1 {
  margin: 0;
  font-size: clamp(24px, 3.2vw, 42px);
  line-height: 1.05;
  letter-spacing: -.025em;
  font-weight: 700;
  max-width: 24ch;
  text-wrap: balance;
}
.lede { font-size: clamp(17px, 1.4vw, 19px); color: var(--muted); max-width: 52ch; margin: 16px 0 0; }
.index { margin-top: clamp(56px, 8vw, 110px); }
.index h2 { font-size: 15px; margin: 0 0 10px; color: var(--muted); font-weight: 400; }
.names { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; font-size: 15px; line-height: 1.9; max-width: 980px; }
.names li:not(:last-child)::after { content: "/"; color: var(--rule); margin: 0 .55em; }
.names a { text-decoration: none; }
.names a:hover { text-decoration: underline; }

.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 64px) var(--gap);
}
@media (min-width: 640px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card a { display: block; text-decoration: none; }
.card .frame { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--print); border: 6px solid var(--print); box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 28px -18px rgba(0,0,0,.45); }
.card .frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.card a:hover .frame img { transform: scale(1.03); }
/* das Werkschild */
.card .label {
  display: inline-flex; flex-direction: column;
  margin: 14px 0 0;
  background: var(--paper);
  padding: 8px 12px 9px;
  min-width: 62%;
  box-shadow: 0 1px 1px rgba(0,0,0,.08);
}
.card .who { font-weight: 700; font-size: 15px; line-height: 1.25; }
.card .count { font-size: 13px; color: var(--muted); }

.invite { margin-top: clamp(40px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.invite p { margin: 0; font-size: clamp(20px, 2.2vw, 28px); letter-spacing: -.015em; font-weight: 700; max-width: 26ch; }
.button { display: inline-block; background: var(--ink); color: var(--wall); text-decoration: none; padding: 12px 20px; font-weight: 700; font-size: 15px; }
.button:hover { background: var(--red); color: #fff; }

/* Ausstellung */
.show { display: grid; gap: var(--gap); padding-top: clamp(16px, 3vw, 40px); }
@media (min-width: 900px) {
  .show { grid-template-columns: minmax(280px, 340px) minmax(0, 1fr); align-items: start; }
  .placard { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow: auto; }
}
.placard { background: var(--paper); padding: 24px 24px 22px; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 28px -18px rgba(0,0,0,.5); }
.placard .kicker { margin: 0 0 22px; font-size: 14px; }
.placard .kicker a { color: var(--muted); }
.placard h1 { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em; font-weight: 700; overflow-wrap: anywhere; }
.placard .count { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.bio { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.bio p { margin: 0 0 .7em; overflow-wrap: anywhere; }
.sibling { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rule); font-size: 14px; font-weight: 700; }
.sibling a { text-decoration: none; line-height: 1.3; }
.sibling a:hover { text-decoration: underline; }
.sibling span { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.sibling a[rel=next] { text-align: right; }

.gallery { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gap); }
@media (min-width: 1200px) { .gallery { columns: 3; } }
@media (max-width: 420px) { .gallery { columns: 1; } }
.gallery li { break-inside: avoid; margin: 0 0 var(--gap); }
.gallery a { display: block; box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 14px 28px -18px rgba(0,0,0,.45); background: var(--print); border: 6px solid var(--print); cursor: zoom-in; }
.gallery img { width: 100%; }

/* Textseiten */
.text { max-width: 68ch; padding-top: clamp(28px, 5vw, 64px); }
.text h1 { font-size: clamp(32px, 4.6vw, 56px); line-height: 1; letter-spacing: -.03em; margin: 0 0 28px; }
.text h2 { font-size: 22px; letter-spacing: -.01em; margin: 40px 0 10px; }
.text h3 { font-size: 17px; margin: 26px 0 6px; }
.text p, .text li { max-width: 66ch; }
.text ul { padding-left: 1.2em; }
.text .note { background: var(--paper); padding: 16px 20px; }

/* Bildansicht */
.lb { position: fixed; inset: 0; z-index: 50; background: #0f1012; color: #ecebe8; display: grid; grid-template-rows: 1fr auto; }
.lb[hidden] { display: none; }
.lb figure { margin: 0; display: grid; place-items: center; min-height: 0; padding: 56px 64px 8px; }
.lb img { max-width: 100%; max-height: calc(100vh - 140px); width: auto; height: auto; border: 10px solid var(--print); background: var(--print); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
@media (max-width: 640px) { .lb img { border-width: 6px; } }
.lb .bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px 18px; font-size: 14px; }
.lb .bar .cap { color: #b9bbbf; }
.lb button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 10px; }
.lb .close { position: absolute; top: 8px; right: 10px; font-size: 15px; }
.lb .prev, .lb .next { position: absolute; top: 50%; transform: translateY(-50%); font-size: 34px; line-height: 1; padding: 18px 14px; }
.lb .prev { left: 4px; }
.lb .next { right: 4px; }
.lb button:hover { color: #fff; }
@media (max-width: 640px) {
  .lb figure { padding: 52px 8px 4px; }
  .lb .prev, .lb .next { top: auto; bottom: 6px; transform: none; font-size: 28px; }
  .lb .prev { left: 50%; margin-left: -64px; }
  .lb .next { right: 50%; margin-right: -64px; }
  .lb .bar { padding-bottom: 64px; }
}
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}
.text h1.spaced { margin-top: 72px; }

/* ============ Auftakt der Startseite ============ */
body.home header.site {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  max-width: none; color: #f2f1ee;
}
body.home header.site nav a { color: rgba(242,241,238,.72); }
body.home header.site nav a:hover { color: #fff; }
body.home header.site nav a[aria-current] { box-shadow: none; }

.opening {
  position: relative;
  height: 100vh; height: 100svh; min-height: 560px;
  background: #141517;
  color: #f2f1ee;
  overflow: hidden;
  isolation: isolate;
}
.stage { position: absolute; inset: 0; }
.float {
  position: absolute; display: block; z-index: 3;
  will-change: transform;
  text-decoration: none; color: var(--ink);
}
.float .pic {
  display: block; position: relative; aspect-ratio: 4 / 3;
  opacity: 0; transform: translateY(40px) scale(.94);
  transition: opacity 1.1s cubic-bezier(.2,.7,.2,1), transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.opening.ready .float .pic { opacity: 1; transform: none; }
.float img { width: 100%; height: 100%; object-fit: cover; box-shadow: 0 30px 60px -20px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4); }
.float .tag {
  position: absolute; left: 0; top: 100%; margin-top: 10px;
  background: var(--paper); color: var(--ink);
  font-size: 13px; font-weight: 700; padding: 5px 9px; white-space: nowrap;
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s;
}
.float:hover .tag, .float:focus-visible .tag { opacity: 1; transform: none; }
.float:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
/* Ebenen: hinten gedämpft, vorn groß */
.f7, .f8, .f9 { z-index: 1; }
.f7 img, .f8 img, .f9 img { filter: brightness(.55) saturate(.8); }
.f7:hover img, .f8:hover img, .f9:hover img { filter: none; }
/* Formate der Rahmen */
.f2 .pic, .f4 .pic, .f8 .pic { aspect-ratio: 4 / 5; }
.f3 .pic, .f6 .pic, .f7 .pic { aspect-ratio: 3 / 2; }
.f9 .pic { aspect-ratio: 1; }
/* Positionen */
.f1 { left: 3%;  top: 13%; width: 17vw; }
.f2 { left: 21%; top: 66%; width: 13vw; }
.f3 { left: 75%; top: 10%; width: 19vw; }
.f4 { left: 83%; top: 57%; width: 14vw; }
.f5 { left: 4%;  top: 60%; width: 12vw; }
.f6 { left: 61%; top: 74%; width: 13vw; }
.f7 { left: 41%; top: 4%;  width: 10vw; }
.f8 { left: 46%; top: 77%; width: 8vw; }
.f9 { left: 24%; top: 22%; width: 8vw; }
.float.f1 .pic { transition-delay: .05s; } .float.f2 .pic { transition-delay: .35s; }
.float.f3 .pic { transition-delay: .15s; } .float.f4 .pic { transition-delay: .45s; }
.float.f5 .pic { transition-delay: .25s; } .float.f6 .pic { transition-delay: .55s; }
.float.f7 .pic, .float.f8 .pic, .float.f9 .pic { transition-delay: 0s; }

.opening-text {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 16px;
  pointer-events: none;
}
.opening-text > * { pointer-events: auto; }
.wordmark {
  margin: 0; display: inline-flex; align-items: center; gap: .14em;
  font-size: clamp(46px, 10.5vw, 168px); font-weight: 700; letter-spacing: -.05em; line-height: 1;
  text-shadow: 0 4px 40px rgba(0,0,0,.55);
  opacity: 0; transform: translateY(16px);
  transition: opacity 1.2s ease .2s, transform 1.4s cubic-bezier(.2,.7,.2,1) .2s;
}
.wordmark .logo { width: .72em; height: .72em; margin-right: .1em; flex: none; transform: translateY(.04em); }
.claim { margin: 18px 0 30px; font-size: clamp(16px, 1.5vw, 20px); color: rgba(242,241,238,.8); max-width: 34ch; text-shadow: 0 2px 20px rgba(0,0,0,.8);
  opacity: 0; transition: opacity 1.2s ease .6s; }
.enter {
  color: #f2f1ee; text-decoration: none; font-weight: 700; font-size: 15px;
  border: 1px solid rgba(242,241,238,.6); padding: 12px 22px;
  background: rgba(20,21,23,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 1.2s ease .8s, background .2s, border-color .2s;
}
.enter:hover { background: var(--red); border-color: var(--red); }
.opening.ready .wordmark { opacity: 1; transform: none; }
.opening.ready .claim, .opening.ready .enter { opacity: 1; }
/* ohne JavaScript alles sofort zeigen */
.opening:not(.js) .float .pic, .opening:not(.js) .wordmark, .opening:not(.js) .claim, .opening:not(.js) .enter { opacity: 1; transform: none; }

@media (max-width: 700px) {
  .f1 { left: -6%; top: 18%; width: 40vw; }
  .f3 { left: 64%; top: 15%; width: 40vw; }
  .f5 { left: -8%; top: 67%; width: 38vw; }
  .f4 { left: 68%; top: 65%; width: 40vw; }
  .f7 { left: 35%; top: 13%; width: 26vw; }
  .f2 { left: 30%; top: 81%; width: 36vw; }
  .f6, .f8, .f9 { display: none; }
  .float .tag { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .float .pic, .wordmark, .claim, .enter { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Passepartout für die Bilder im Auftakt der Startseite */
.float .pic {
  background: #f3f2ee;
  padding: 6%;
  border: 3px solid #0e0e0f;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8), 0 2px 6px rgba(0,0,0,.5);
}
.float img { box-shadow: 0 0 0 1px rgba(0,0,0,.18); }
@media (max-width: 700px) { .float .pic { border-width: 2px; } }

/* Einleitung: Text links, Foto des Tages rechts, darunter "Neu dabei" */
.intro { max-width: none; display: grid; gap: 32px 48px; }
@media (min-width: 900px) {
  .intro { grid-template-columns: minmax(0, 1fr) minmax(280px, 460px); align-items: end; }
}
.daily { margin: 0; justify-self: end; width: fit-content; max-width: min(100%, 460px); }
.daily a { display: block; }
.daily .pp {
  display: block; background: var(--print); border: 6px solid var(--print);
  box-shadow: 0 1px 2px rgba(0,0,0,.12), 0 30px 50px -24px rgba(0,0,0,.5);
}
/* das Foto behält sein Format: Querformat bis 460 px breit, Hochformat bis 520 px hoch */
.daily img { width: auto; height: auto; max-width: 100%; max-height: min(62vh, 520px); }
@media (max-width: 899px) { .daily { justify-self: start; } }
.daily .lbl { display: inline-flex; flex-direction: column; margin-top: 14px; background: var(--paper); padding: 8px 12px 9px; box-shadow: 0 1px 1px rgba(0,0,0,.08); }
.daily .lbl b { font-size: 15px; }
.daily .lbl span { font-size: 13px; color: var(--muted); }
.newrow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 15px; }
.newrow .k { color: var(--muted); }
.newrow a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; }
.newrow a:hover { text-decoration: underline; }
.newrow img { width: 44px; height: 44px; object-fit: cover; border: 2px solid var(--print); box-shadow: 0 1px 2px rgba(0,0,0,.15), 0 6px 12px -6px rgba(0,0,0,.4); }

/* weiße Schilder und Tafeln auf der dunklen Wand: dunkle Schrift */
.placard, .card .label, .daily .lbl, .text .note, .skip, .float .tag { color: var(--label-ink); }
.placard .kicker a, .placard .sibling span, .daily .lbl span, .placard .count { color: var(--label-muted); }
.bio, .sibling { border-color: var(--label-rule); }
.placard a:hover, .card .label:hover { text-decoration-color: var(--red); }

/* Typografie mit Newsreader: Text normal, Titel und Logo halbfett */
body { font-size: 18px; line-height: 1.6; }
.wordmark, .mark, .intro h1, .placard h1, .text h1, .text h2, .text h3, .index h2,
.card .who, .daily .lbl b, .invite p, .newrow a, .sibling, .button, .enter, .float .tag { font-weight: 600; }
.wordmark { letter-spacing: -.025em; }
.mark { letter-spacing: -.01em; font-size: 21px; }
.intro h1, .placard h1, .text h1 { letter-spacing: -.015em; }
header.site nav { font-size: 16.5px; }
.card .who { font-size: 17px; }
.daily .lbl b { font-size: 17px; }
.daily .lbl span, .placard .kicker, .sibling span { font-size: 14.5px; }
.bio { font-size: 16.5px; }
.sibling { font-size: 15.5px; }
.newrow { font-size: 16.5px; }
.names { font-size: 16.5px; }
footer.site { font-size: 15px; }
.claim { font-size: clamp(17px, 1.6vw, 21px); }