/* Bildarchiv Rhein-Hunsrück — Testversion.
   Anmutung nach gallery.jessyin.world: Weiß, eine lockere Wand kleiner
   Bilder in ihrem eigenen Seitenverhältnis, eine kleine Kopfzeile.
   Schriften: General Sans (Überschriften, Versalien) und Gambetta (Text),
   beide Fontshare, selbst gehostet. */

@font-face{font-family:"General Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("schriften/GeneralSans-Semibold.a41291516086.woff2") format("woff2")}
@font-face{font-family:"Gambetta";font-weight:400;font-style:normal;font-display:swap;
  src:url("schriften/Gambetta-Regular.6c655b13748e.woff2") format("woff2")}
@font-face{font-family:"Gambetta";font-weight:400;font-style:italic;font-display:swap;
  src:url("schriften/Gambetta-Italic.23d29ed594a6.woff2") format("woff2")}

:root{
  --grund:#fff; --tinte:#141414; --leise:#666; --linie:#e2e2e2; --flaeche:#f3f3f1;
  --rand:clamp(16px, 3vw, 40px);
  --kopf:"General Sans", "Helvetica Neue", Arial, sans-serif;
  --text:"Gambetta", Georgia, "Times New Roman", serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;padding:0 var(--rand) 64px;background:var(--grund);color:var(--tinte);
  font:400 16px/1.5 var(--text)}
img{max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--tinte);outline-offset:3px}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap}
.sprung{position:absolute;left:var(--rand);top:-60px;background:var(--tinte);color:var(--grund);
  padding:8px 14px;font:600 12px/1 var(--kopf);z-index:5}
.sprung:focus{top:8px}

/* ---------- Kopfzeile ---------- */
/* Die Kopfzeile darf umbrechen: Bei 320 px (oder 400 % Vergrößerung)
   rutscht die Suche unter den Titel, statt die Seite seitlich zu schieben
   (WCAG 1.4.10, gefunden in der Prüfung). */
.kopf{position:sticky;top:0;z-index:3;display:flex;flex-wrap:wrap;align-items:center;
  gap:8px 16px;min-height:60px;margin:0 calc(-1 * var(--rand));padding:20px var(--rand) 12px;
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
/* Der Titel steht auf derselben senkrechten Linie wie die Bilder — derselbe
   Rand wie die Wand (Micha, 19.09.2026). */
.marke{margin-left:clamp(0px, 2.5vw, 48px);
  font:600 12px/1.2 var(--kopf);letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;white-space:nowrap}
.suche{margin:0 0 0 auto;flex:0 1 15rem;min-width:7rem;display:flex;align-items:center;
  position:relative}
.leeren{position:absolute;left:0;top:50%;transform:translateY(-50%);width:28px;height:28px;
  padding:0;border:0;background:none;cursor:pointer;font:400 19px/1 var(--text);color:var(--tinte)}
/* Das Suchfeld bleibt bei 16 px: Darunter vergrößert Safari auf dem
   iPhone die ganze Seite, sobald man hineintippt. */
.suche input{width:100%;font:400 16px/1.2 var(--text);color:var(--tinte);
  border:0;border-bottom:1px solid #8a8a8a;border-radius:0;background:transparent;
  padding:6px 2px 6px 28px;-webkit-appearance:none;appearance:none;
  text-align:right;
  /* Feste Höhe: Safari auf dem iPhone gibt Suchfeldern sonst eine eigene,
     und die Größen-Zeichen daneben säßen nicht mehr mittig (Micha,
     18.09.2026). */
  box-sizing:border-box;height:32px;line-height:19px;margin:0}   /* „Suchen" rechtsbündig (Micha, 18.09.2026) */
.suche input::placeholder{color:var(--leise);font-style:italic}
.suche input:focus{outline:none;border-bottom:2px solid var(--tinte);margin-bottom:-1px}
.suche input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Die Zeile über der Wand: links, was gerade gilt, rechts die Ansicht. */
/* Bündig mit der Wand darunter — derselbe Seitenrand. */
.zeile{display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px clamp(0px, 2.5vw, 48px) 53px}
/* Drei feine Zeichen statt eines Kastens: grau, das aktive dunkel — wie
   der Zeitstrahl darüber (Micha, 18.09.2026). */
.ansicht{display:flex;gap:2px;margin-left:-6px}
.ansicht button{width:32px;height:32px;padding:6px;border:0;border-radius:8px;background:none;
  color:#8a8a8a;cursor:pointer}
.ansicht button svg{display:block;width:20px;height:20px;fill:currentColor}
.ansicht button:hover{color:var(--tinte)}
.ansicht button[aria-pressed="true"]{color:var(--tinte);background:var(--flaeche)}

/* ---------- Zeitstrahl ----------
   Vier Wörter auf einer dünnen Linie, ruhig, in der Textschrift — keine
   Knöpfe, keine Pillen (Micha, 18.09.2026). Die aktive Epoche steht
   dunkel, ihr Punkt auf der Linie ist gefüllt. */
/* Der Zeitstrahl steht in der Mitte (Micha, 18.09.2026). */
.filter{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;
  gap:16px 40px;margin-top:18px}
.zeitstrahl{display:flex;justify-content:space-between;gap:12px;flex:1 1 20rem;max-width:34rem;
  border-bottom:1px solid var(--linie)}
.zeitstrahl button{position:relative;border:0;background:none;cursor:pointer;
  padding:4px 0 12px;font:400 14px/1.2 var(--text);color:var(--leise);white-space:nowrap}
.zeitstrahl button::after{content:"";position:absolute;left:50%;bottom:-4px;width:7px;height:7px;
  margin-left:-4px;border-radius:50%;background:var(--grund);border:1px solid #9a9a9a}
.zeitstrahl button:hover{color:var(--tinte)}
.zeitstrahl button[aria-pressed="true"]{color:var(--tinte)}
.zeitstrahl button[aria-pressed="true"]::after{background:var(--tinte);border-color:var(--tinte)}
.zeitstrahl button:disabled{opacity:.35;cursor:default}
.leer{color:var(--leise);font-style:italic}

/* ---------- Die Wand ---------- */
/* Ein Raster in Zeilen (Michas Vorbild, 18.09.2026): alle Bilder gleich
   breit, **oben bündig**, jedes in seinem eigenen Seitenverhältnis — nichts
   wird beschnitten, die Zeile ist so hoch wie ihr höchstes Bild. Zwischen
   den Zeilen mehr Luft als zwischen den Bildern, und Rand zu den Seiten. */
.wand{list-style:none;margin:0 clamp(0px, 2.5vw, 48px);padding:0;display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(138px, 9.8vw, 196px), 1fr));
  column-gap:clamp(14px, 1.4vw, 24px);row-gap:clamp(28px, 3.4vw, 56px);align-items:start}
/* Hochformate werden nicht beschnitten, sondern höchstens 4:5 hoch
   gezeigt und dafür schmaler, mittig in ihrer Spalte. So enden alle
   Hochformate unten auf derselben Linie, und ein sehr hohes Foto zieht
   die Zeile nicht in die Länge (Micha, 18.09.2026). Beschnitten wird im
   Archiv nichts: Der Rand gehört bei Karten und Postkarten zum Dokument. */
.kachel{margin:0;container-type:inline-size}
.wand:not([data-ansicht="gross"]) .kachel img{width:auto;max-width:100%;max-height:125cqw;
  margin:0 auto}
.wand[data-ansicht="dicht"]{grid-template-columns:repeat(auto-fill, minmax(clamp(72px, 5.5vw, 110px), 1fr));
  column-gap:clamp(10px, 1vw, 16px);row-gap:clamp(18px, 2vw, 32px)}
/* Groß: ein Bild je Zeile, mittig, so breit wie es gut lesbar bleibt —
   und nie höher als der Bildschirm. */
.wand[data-ansicht="gross"]{display:block;max-width:980px;margin:0 auto}
.wand[data-ansicht="gross"] .kachel{margin-bottom:clamp(28px, 5vw, 64px)}
.wand[data-ansicht="gross"] img{width:auto;max-width:100%;max-height:85vh;max-height:85svh;
  margin:0 auto}
.kachel[hidden]{display:none}
.kachel a{display:block;text-decoration:none}
.kachel img{display:block;width:100%;height:auto;background:var(--farbe, var(--flaeche));
  transition:opacity .2s}
.kachel a:hover img{opacity:.88}

/* ---------- Ein Bild ---------- */
.bildseite{display:grid;grid-template-columns:minmax(0, 1.7fr) minmax(17rem, 1fr);
  gap:clamp(24px, 5vw, 80px);align-items:start;padding-top:12px}
.gross{margin:0;display:flex;justify-content:center;touch-action:pan-y}
/* Die Bildfläche ist so groß wie das Bild; ihre linke Hälfte führt zurück,
   die rechte weiter. Der Mauszeiger zeigt die Richtung. */
.bildflaeche{position:relative;max-width:100%}
.halb{position:absolute;top:0;bottom:0;width:50%;-webkit-tap-highlight-color:transparent}
.halb-vor{left:0;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' fill-opacity='.9'/%3E%3Cpath d='M18 9l-7 7 7 7' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, w-resize}
.halb-nach{right:0;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='16' cy='16' r='15' fill='white' fill-opacity='.9'/%3E%3Cpath d='M14 9l7 7-7 7' fill='none' stroke='%23141414' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, e-resize}
.gross img{display:block;width:auto;height:auto;max-height:calc(100vh - 110px);
  max-height:calc(100svh - 110px);background:var(--flaeche)}
/* Am Laptop stehen „Voriges / Nächstes Bild" immer an derselben Stelle:
   Die Spalte ist so hoch wie der Platz fürs Bild, die Pfeile sitzen an
   ihrem Fuß — gleich, wie lang der Text ist. Gemessen am längsten Text
   der 50 (Micha, 18.09.2026). */
.angaben{position:sticky;top:84px;max-width:30rem;display:flex;flex-direction:column;
  min-height:calc(100vh - 110px);min-height:calc(100svh - 110px)}
.angaben .blaettern{margin-top:auto}
.angaben h1{margin:0 0 14px;font:600 clamp(19px, 2.2vw, 25px)/1.2 var(--kopf);
  letter-spacing:.02em;text-transform:uppercase}
.angaben .text{margin:0 0 20px}
.angaben dl{margin:0 0 20px;display:grid;grid-template-columns:auto 1fr;gap:6px 14px;
  align-items:baseline}
.angaben dt{font:600 10px/1.4 var(--kopf);letter-spacing:.1em;text-transform:uppercase;
  color:var(--leise)}
.angaben dd{margin:0;font-variant-numeric:tabular-nums}
.schlagworte{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.schlagworte a{display:inline-block;padding:5px 12px;border:1px solid var(--linie);
  border-radius:999px;font-size:14px;line-height:1.2;text-decoration:none}
.schlagworte a:hover{border-color:var(--tinte)}
.blaettern{display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:28px;padding-top:16px;border-top:1px solid var(--linie);font-size:14px}
.blaettern a{text-decoration:none}
.blaettern a:hover{text-decoration:underline}
.stelle{font:600 10px/1 var(--kopf);letter-spacing:.1em;color:var(--leise)}

@media (max-width:760px){
  .wand{margin:0;grid-template-columns:repeat(3, 1fr);column-gap:10px;row-gap:22px}
  .wand[data-ansicht="dicht"]{grid-template-columns:repeat(4, 1fr);column-gap:6px;row-gap:14px}
  /* Oben am Handy mehr Luft (Micha, 18.09.2026). */
  .kopf{gap:17px 12px;padding-block:30px 12px}
  .marke{font-size:11px;margin-left:0}
  .suche{flex:0 1 12rem;margin-right:-5px}
  .filter{gap:12px;margin-top:26px}
  .zeile{margin:32px 0 46px}
  .zeitstrahl{flex-basis:100%}
  .zeitstrahl button{font-size:13px}
  .bildseite{grid-template-columns:1fr;gap:20px;padding-top:4px}
  .gross{margin:0 calc(-1 * var(--rand))}
  .gross img{width:100%;max-height:75vh;max-height:75svh;object-fit:contain}
  .bildflaeche{width:100%}
  .angaben{position:static;min-height:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}