/* Alexander Wieselthaler, Fotoblog.
   Leitbild: Fotobuch auf warmem Papier, nicht Galerie-Website.
   Farben, Schriften und Raster sind in DESIGN.md begruendet. */

:root{
  --papier:        oklch(0.945 0.008 82);
  --papier-tief:   oklch(0.915 0.010 80);
  --papier-rand:   oklch(0.885 0.012 78);
  --tinte:         oklch(0.225 0.014 62);
  /* beide Graustufen bewusst dunkel: die hellere Fassung riss WCAG AA (2.9:1). */
  --tinte-weich:   oklch(0.455 0.013 70);
  --tinte-zart:    oklch(0.505 0.012 72);
  --falurot:       oklch(0.455 0.118 32);
  --falurot-hell:  oklch(0.545 0.130 34);
  --nacht:         oklch(0.155 0.012 60);

  --gt: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  --vk: "Vollkorn", ui-serif, Georgia, serif;
  --kurve: cubic-bezier(0.16, 1, 0.3, 1);

  --rand: clamp(1.15rem, 4.5vw, 4.5rem);
  --bahn: min(1360px, 100% - var(--rand) * 2);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body{
  margin:0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--vk);
  font-size: clamp(1rem, 0.94rem + 0.28vw, 1.15rem);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display:block; max-width:100%; height:auto; }

.fehlt{
  padding: 2rem; border: 1px dashed var(--falurot); color: var(--falurot);
  font-family: var(--gt); font-size: 0.85rem; text-align:center;
}

/* ---------- Korn + Vignette ---------------------------------------- */
.korn{ position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.042; mix-blend-mode: multiply; }
.vignette{
  position: fixed; inset: 0; z-index: 89; pointer-events: none;
  background: radial-gradient(125% 105% at 50% 42%, transparent 58%, oklch(0.80 0.020 68 / 0.30) 100%);
}

/* ---------- Kopfleiste --------------------------------------------- */
.leiste{
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.72rem var(--rand);
  background: oklch(0.945 0.008 82 / 0.90);
  backdrop-filter: saturate(1.2) blur(7px);
  border-bottom: 1px solid transparent;
  transform: translateY(-102%);
  transition: transform 0.55s var(--kurve), border-color 0.55s var(--kurve);
}
.leiste.sichtbar{ transform: none; border-bottom-color: var(--papier-rand); }

.leiste-name{
  display:flex; align-items:center; gap: 0.6rem;
  font-family: var(--gt); font-weight: 700; font-size: 0.9rem;
  letter-spacing: -0.015em; color: var(--tinte); text-decoration: none;
  white-space: nowrap; min-width: 0;
}
@media (max-width: 480px){ .leiste-name{ font-size: 0.8rem; gap: 0.45rem; } }

.menu{ display:flex; gap: clamp(0.9rem, 2.2vw, 2rem); align-items:center; }
.menu a{
  font-family: var(--gt); font-weight: 500; font-size: 0.83rem;
  color: var(--tinte-weich); text-decoration: none; padding-block: 0.2rem;
  border-bottom: 1.5px solid transparent;
  transition: color 0.3s var(--kurve), border-color 0.3s var(--kurve);
}
.menu a:hover, .menu a:focus-visible{ color: var(--falurot); border-bottom-color: var(--falurot); }
@media (max-width: 560px){ .menu a:nth-child(n+3){ display:none; } }
@media (max-width: 430px){ .menu a:nth-child(n+2){ display:none; } }

.mark{ flex: none; }
.mark path{ fill: none; stroke: var(--falurot); stroke-width: 1.7; }

/* ---------- Titelseite --------------------------------------------- */
.titel{
  width: var(--bahn); margin-inline: auto;
  padding-top: clamp(4.5rem, 13vh, 9rem);
  padding-bottom: clamp(2rem, 6vh, 4.25rem);
}
.titel-marke{ display:flex; align-items:center; gap: 0.75rem; margin-bottom: clamp(1.5rem, 4vh, 2.75rem); flex-wrap: wrap; }
/* Die fixierte Kopfleiste faehrt erst nach der Titelseite ein. Ohne diese
   Navigation saehe ein Ankommender oben gar keinen Link. */
.titel-menue{ margin-left: auto; display: flex; gap: clamp(0.9rem, 2.2vw, 2rem); }
.titel-menue a{
  font-family: var(--gt); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.02em; color: var(--tinte-weich); text-decoration: none;
  padding-bottom: 0.2rem; border-bottom: 1.5px solid transparent;
  transition: color 0.3s var(--kurve), border-color 0.3s var(--kurve);
}
.titel-menue a:hover, .titel-menue a:focus-visible{ color: var(--falurot); border-bottom-color: var(--falurot); }
.titel-marke span{
  font-family: var(--gt); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--tinte-zart);
}
h1{
  font-family: var(--gt); font-weight: 800;
  font-size: clamp(2.9rem, 11.4vw, 9.6rem);
  line-height: 0.845; letter-spacing: -0.035em; margin: 0; color: var(--tinte);
}
h1 .zeile{ display:block; }
h1 .zeile:last-child{ margin-left: 0.055em; }

.titel-fuss{
  margin-top: clamp(1.35rem, 3.4vh, 2.4rem);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.55rem 1.5rem;
  border-top: 1px solid var(--papier-rand); padding-top: 0.95rem;
}
.titel-fuss p{ margin:0; font-family: var(--gt); font-size: 0.9rem; font-weight: 500; color: var(--tinte-weich); max-width: 46ch; }
.titel-fuss .jahr{ font-family: var(--gt); font-weight: 700; font-size: 0.85rem; color: var(--falurot); letter-spacing: 0.02em; margin-left: auto; }

/* ---------- Bildbausteine ------------------------------------------ */
/* transform-frei, damit die Einblendung (.rv) die Zentrierung nicht ueberschreibt */
.randlos{ width: 100vw; margin-left: calc(50% - 50vw); }
.bahn{ width: var(--bahn); margin-inline: auto; }

figure{ margin: 0; }
/* Kein Bild wird je breiter dargestellt als seine eigene Pixelbreite. Die
   Altbeitraege liefern meist 1200 px; ohne diese Schranke zieht der Browser
   sie auf breiten Schirmen hoch, und das sieht weich aus. */
figure img{ width: 100%; max-width: var(--eigenbreite, 100%); margin-inline: auto; background: var(--papier-tief); }

/* Einzelbild-Beitraege: mittig, in Eigengroesse, mit Luft ringsum. Kommt aus
   Alex' frueherem Tumblr-Strom, ein Foto ohne Kommentar. Randlos war dafuer
   die falsche Geste und technisch eine Hochskalierung. */
.einzeln{ display: flex; justify-content: center; }
.einzeln > figure{ width: 100%; max-width: min(1100px, var(--eigenbreite, 1100px)); }
.einzeln .bu{ justify-content: flex-start; }

.bu{
  display: flex; gap: 0.8rem; align-items: baseline; margin-top: 0.7rem;
  font-family: var(--vk); font-size: 0.87rem; line-height: 1.45; color: var(--tinte-weich);
}
.bu .nr{
  flex: none; font-family: var(--gt); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.04em; color: var(--falurot); padding-top: 0.16em; font-variant-numeric: tabular-nums;
}
.bu p{ margin: 0; max-width: 52ch; }

.paar{ display: grid; gap: clamp(0.85rem, 2vw, 1.7rem); grid-template-columns: 1.45fr 1fr; align-items: start; }
.paar.kipp{ grid-template-columns: 1fr 1.45fr; }
/* Quer + Hoch: 2.25 zu 1 gleicht die Bildhoehen an (3:2 gegen 2:3). */
.paar.hoch-rechts{ grid-template-columns: 2.25fr 1fr; }
.paar.hoch-links { grid-template-columns: 1fr 2.25fr; }
@media (max-width: 700px){
  .paar, .paar.kipp, .paar.hoch-rechts, .paar.hoch-links{
    grid-template-columns: 1fr; gap: clamp(1.6rem, 5vw, 2.2rem);
  }
}

.versetzt{ display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.versetzt > .schmal{ grid-column: 2 / span 5; }
.versetzt > .schmal.rechts{ grid-column: 7 / span 5; }
.versetzt > .breit{ grid-column: 1 / span 9; }
.versetzt > .text{ grid-column: 9 / span 4; }
@media (max-width: 760px){
  .versetzt{ grid-template-columns: 1fr; }
  .versetzt > *{ grid-column: 1 / -1 !important; }
}

.notiz-text{ margin: 0.4rem 0 0; color: var(--tinte-weich); font-size: 0.95rem; }

/* Rhythmus */
.t-eng   { margin-top: clamp(1.1rem, 2.6vw, 2rem); }
.t-mittel{ margin-top: clamp(2.6rem, 7vw, 5.5rem); }
.t-weit  { margin-top: clamp(5rem, 13vw, 10.5rem); }

/* ---------- Fließtext ---------------------------------------------- */
.lauftext{
  width: var(--bahn); margin-inline: auto;
  display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2.5vw, 2rem);
}
.lauftext > div{ grid-column: 3 / span 7; }
@media (max-width: 760px){ .lauftext > div{ grid-column: 1 / -1; } }
.lauftext p{ margin: 0 0 1.05em; max-width: 64ch; }
.lauftext p:last-child{ margin-bottom: 0; }
.gross{ font-size: clamp(1.25rem, 1.02rem + 1.05vw, 1.72rem); line-height: 1.48; color: var(--tinte); }

/* ---------- Serienkopf --------------------------------------------- */
.serie-kopf{ width: var(--bahn); margin-inline: auto; }
.serie-kopf .apparat{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.15rem;
  border-top: 2px solid var(--tinte); padding-top: 0.8rem;
  font-family: var(--gt); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase; color: var(--tinte-weich);
}
.serie-kopf .apparat .rot{ color: var(--falurot); }
h2{
  font-family: var(--gt); font-weight: 800;
  font-size: clamp(2.2rem, 7.4vw, 5.6rem);
  line-height: 0.92; letter-spacing: -0.032em; margin: 0.35em 0 0;
}
.vorspann{
  margin: clamp(1rem, 2.4vw, 1.6rem) 0 0;
  font-size: clamp(1.1rem, 0.98rem + 0.55vw, 1.42rem);
  line-height: 1.5; max-width: 48ch; color: var(--tinte);
}

/* ---------- Archiv -------------------------------------------------- */
.archiv{ background: var(--papier-tief); padding-block: clamp(4rem, 11vw, 8.5rem); margin-top: clamp(5rem, 13vw, 10.5rem); }
.archiv-innen{ width: var(--bahn); margin-inline: auto; }
.archiv h3{ font-family: var(--gt); font-weight: 800; font-size: clamp(1.5rem, 3.6vw, 2.5rem); letter-spacing: -0.025em; margin: 0 0 0.15em; line-height: 1; }
.archiv .hinweis{ margin: 0 0 clamp(2rem, 5vw, 3.2rem); color: var(--tinte-weich); max-width: 50ch; }

.liste{ border-top: 1px solid var(--papier-rand); }
.eintrag{
  display: grid; grid-template-columns: 3.2rem 1fr auto; gap: 0.6rem 1.2rem; align-items: baseline;
  padding: clamp(0.85rem, 2vw, 1.35rem) 0; border-bottom: 1px solid var(--papier-rand);
  text-decoration: none; color: inherit;
  transition: background-color 0.35s var(--kurve), padding-left 0.35s var(--kurve);
}
.eintrag:hover, .eintrag:focus-visible{ background: oklch(0.945 0.008 82 / 0.75); padding-left: 0.7rem; }
.eintrag .nr{ font-family: var(--gt); font-weight: 700; font-size: 0.75rem; color: var(--falurot); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.eintrag .titel-txt{ font-family: var(--gt); font-weight: 600; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.45rem); letter-spacing: -0.018em; }
.eintrag .ort{ display:block; font-family: var(--vk); font-weight: 400; font-size: 0.86rem; color: var(--tinte-weich); margin-top: 0.15rem; letter-spacing: 0; }
.eintrag .jahr{ font-family: var(--gt); font-weight: 500; font-size: 0.85rem; color: var(--tinte-zart); font-variant-numeric: tabular-nums; white-space: nowrap; }

.archiv-mehr{ margin: clamp(1.6rem, 4vw, 2.6rem) 0 0; }
.archiv-mehr a{
  font-family: var(--gt); font-weight: 700; font-size: clamp(0.95rem, 0.9rem + 0.3vw, 1.15rem);
  color: var(--falurot); text-decoration: none;
  border-bottom: 2px solid oklch(0.455 0.118 32 / 0.35); padding-bottom: 2px;
  transition: border-color 0.3s var(--kurve);
}
.archiv-mehr a:hover, .archiv-mehr a:focus-visible{ border-bottom-color: var(--falurot); }

/* ---------- Archivseite ---------------------------------------------- */
.archiv-seite{ width: var(--bahn); margin-inline: auto; padding-top: clamp(5rem, 14vh, 9rem); }
/* Auf der Archivseite hat die Liste schon einen eigenen Kopf, der grosse
   Abstand von der Startseite waere hier nur ein Loch. */
.archiv-seite + .archiv{ margin-top: clamp(2rem, 5vw, 3.5rem); }
.archiv-seite .apparat{
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.15rem; align-items: baseline;
  border-top: 2px solid var(--tinte); padding-top: 0.8rem;
  font-family: var(--gt); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.055em; text-transform: uppercase; color: var(--tinte-weich);
}
.archiv-seite .apparat .rot{ color: var(--falurot); }
.archiv-seite h2{ margin: 0.35em 0 0; }

.jahrsprung{
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}
.jahrsprung a{
  display: inline-flex; align-items: baseline; gap: 0.4rem;
  font-family: var(--gt); font-weight: 600; font-size: 0.9rem;
  color: var(--tinte); text-decoration: none;
  padding: 0.4rem 0.7rem; border: 1px solid var(--papier-rand); border-radius: 2px;
  font-variant-numeric: tabular-nums;
  transition: border-color 0.25s var(--kurve), color 0.25s var(--kurve), background-color 0.25s var(--kurve);
}
.jahrsprung a span{ font-size: 0.72rem; font-weight: 500; color: var(--tinte-zart); }
.jahrsprung a:hover, .jahrsprung a:focus-visible{
  border-color: var(--falurot); color: var(--falurot); background: oklch(0.945 0.008 82 / 0.6);
}
.jahrsprung a:hover span, .jahrsprung a:focus-visible span{ color: var(--falurot); }

.jahr-block{ scroll-margin-top: 4.5rem; }
.jahr-block + .jahr-block{ margin-top: clamp(2.6rem, 7vw, 5rem); }
.jahr-kopf{
  display: flex; align-items: baseline; gap: 0.9rem;
  font-family: var(--gt); font-weight: 800;
  font-size: clamp(1.6rem, 4.5vw, 3rem); letter-spacing: -0.03em;
  margin: 0 0 0.6rem; line-height: 1; color: var(--tinte);
  font-variant-numeric: tabular-nums;
}
.jahr-kopf span{
  font-size: 0.78rem; font-weight: 500; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--tinte-weich);
}

/* ---------- Fuß ----------------------------------------------------- */
footer{ width: var(--bahn); margin-inline: auto; padding-block: clamp(3.5rem, 9vw, 6.5rem); }
.fuss-oben{ display:flex; flex-wrap:wrap; gap: 1.5rem 3rem; align-items: flex-end; justify-content: space-between; }
.fuss-name{ font-family: var(--gt); font-weight: 800; font-size: clamp(1.6rem, 5vw, 3.1rem); letter-spacing: -0.03em; line-height: 0.95; margin:0; }
.fuss-links{ display:flex; flex-wrap:wrap; gap: 0.4rem 1.4rem; }
.fuss-links a{ font-family: var(--gt); font-size: 0.88rem; font-weight: 500; color: var(--tinte-weich); text-decoration: none; border-bottom: 1.5px solid var(--papier-rand); padding-bottom: 1px; transition: color 0.3s var(--kurve), border-color 0.3s var(--kurve); }
.fuss-links a:hover, .fuss-links a:focus-visible{ color: var(--falurot); border-bottom-color: var(--falurot); }
.fuss-unten{ margin-top: clamp(2rem, 5vw, 3.2rem); padding-top: 1rem; border-top: 1px solid var(--papier-rand); display:flex; flex-wrap:wrap; gap:0.5rem 1.5rem; justify-content: space-between; font-family: var(--gt); font-size: 0.76rem; color: var(--tinte-zart); }

/* ---------- Aufblenden ---------------------------------------------- */
.rv{ opacity: 0; transform: translate3d(0, 26px, 0); }
.rv.in{ opacity: 1; transform: none; transition: opacity 1.05s var(--kurve), transform 1.05s var(--kurve); }

/* ---------- Lupe ------------------------------------------------------ */
.lupe{
  position: fixed; inset: 0; z-index: 100;
  background: oklch(0.155 0.012 60 / 0.975);
  display: grid; grid-template-rows: 1fr auto;
  padding: clamp(0.75rem, 2.5vw, 2rem);
  opacity: 0; visibility: hidden;
  transition: opacity 0.4s var(--kurve), visibility 0.4s;
}
.lupe.auf{ opacity: 1; visibility: visible; }
/* height:100% + object-fit statt max-height:100%: die prozentuale Maximalhoehe
   loest gegen eine 1fr-Rasterzeile nicht zuverlaessig auf. */
.lupe-bild{ min-height: 0; overflow: hidden; }
.lupe-bild img{ width: 100%; height: 100%; object-fit: contain; }
.lupe-bu{
  display:flex; gap: 0.9rem; align-items: baseline; justify-content:center;
  padding-top: 0.9rem; color: oklch(0.80 0.010 70);
  font-family: var(--vk); font-size: 0.88rem; text-align:center;
}
.lupe-bu .nr{ font-family: var(--gt); font-weight:700; font-size:0.72rem; color: var(--falurot-hell); letter-spacing:0.04em; }
.lupe button{
  position: absolute; background: none; border: 0; cursor: pointer;
  color: oklch(0.86 0.010 70); font-family: var(--gt); font-size: 1.5rem; line-height:1;
  padding: 0.7rem 0.9rem; border-radius: 2px;
  transition: color 0.25s var(--kurve), background-color 0.25s var(--kurve);
}
.lupe button:hover, .lupe button:focus-visible{ color: var(--papier); background: oklch(1 0 0 / 0.09); }
.lupe .zu{ top: clamp(0.4rem,1.5vw,1rem); right: clamp(0.4rem,1.5vw,1rem); font-size: 1.35rem; }
.lupe .vor{ left: clamp(0.2rem,1vw,0.8rem); top: 50%; transform: translateY(-50%); }
.lupe .zurueck{ right: clamp(0.2rem,1vw,0.8rem); top: 50%; transform: translateY(-50%); }

figure.zoom img{ cursor: zoom-in; }

:focus-visible{ outline: 2px solid var(--falurot); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .rv{ opacity:1; transform:none; }
}