/* Angelehnt an das alte Theme "fullscreen": dunkel, Fotos im Vordergrund. Nur Systemschriften. */
:root { --bg: #0f0f0f; --fg: #c8c8c8; --dim: #8a8a8a; --hi: #fff; --accent: #e8742c; color-scheme: dark; }
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; color: var(--fg); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--accent); }
a:hover, a:focus-visible { color: var(--hi); }
img { max-width: 100%; height: auto; display: block; }

header.site { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; padding: 1.25rem 16px; }
header.site .brand { color: var(--hi); text-decoration: none; text-transform: uppercase; font-weight: 700; letter-spacing: .06em; }
header.site .tag { color: var(--dim); font-size: .85rem; border-left: 1px solid var(--dim); padding-left: 1rem; }
header.site nav { margin-left: auto; display: flex; gap: 1rem; }
header.site nav a { color: var(--dim); text-decoration: none; }
header.site nav a:hover { color: var(--hi); }
main { padding: 0 16px 3rem; }
footer.site { color: var(--dim); font-size: .8rem; text-align: center; padding: 2rem 16px; }

.year { color: var(--dim); font-weight: 400; font-size: 1rem; letter-spacing: .2em; margin: 2rem 0 .75rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 4px; margin: 1.5rem 0; }
.grid.big { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.tile { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #1a1a1a; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, opacity .4s; opacity: .92; }
.tile:hover img, .tile:focus-visible img { transform: scale(1.04); opacity: 1; }
.tile span { position: absolute; inset: auto 0 0; padding: 2rem .75rem .6rem; color: var(--hi); font-weight: 600;
  background: linear-gradient(transparent, rgba(0,0,0,.8)); }

.post { max-width: 1100px; margin: 0 auto; }
.post > h1, .post > p, .post > .comments, .post > .pager { max-width: 46rem; }
.post h1 { color: var(--hi); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; margin: 1rem 0 .25rem; }
.meta { color: var(--dim); font-size: .85rem; margin-top: 0; }
.center { text-align: center; }
figure { margin: 2rem 0; }
figure img { margin: 0 auto; max-height: 80vh; width: auto; }
figcaption { color: var(--dim); font-size: .9rem; text-align: center; margin-top: .5rem; }
.comments { border-top: 1px solid #2a2a2a; margin-top: 2rem; }
.comments h2 { font-size: 1rem; color: var(--hi); }
.comment p { margin: .2rem 0 1rem; }

.pager { display: flex; justify-content: space-between; gap: 1rem; margin: 2.5rem 0 0; font-size: .9rem; }
.pager a { text-decoration: none; }
.photo { margin: 0 auto; }
.photo img { max-height: calc(100vh - 11rem); }
.photo-nav { max-width: 1100px; margin: 1rem auto 0; align-items: baseline; }
.photo-nav > :nth-child(2) { color: var(--dim); text-align: center; }

@media (max-width: 600px) {
  header.site nav { margin-left: 0; }
  .grid.big { grid-template-columns: 1fr 1fr; }
  .tile span { font-size: .85rem; padding: 1.5rem .5rem .4rem; }
}
@media (prefers-reduced-motion: reduce) { .tile img { transition: none; } }