/* Reinhard-Fotoalbum v0.17 — keine externen Assets, nur Systemschriften.
   Vorbild ist die CD-ROM: schwarzer Grund, weisse Schrift, sonst nichts. */

:root {
  --grund: #000;
  --schrift: #fff;
  --schrift-leise: #7d7d7d;
  --rand: #2a2a2a;
  --spalte-min: 190px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--grund);
  color: var(--schrift);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.kopf {
  text-align: center;
  padding: 1.6rem 1rem 1.1rem;
}

.kopf h1 {
  margin: 0;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-weight: normal;
  letter-spacing: 0.06em;
}

/* Kapitelauswahl — bleibt bei nur einem Kapitel unsichtbar */
.kapitel {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  padding: 0 1rem 1.2rem;
}

.kapitel button {
  background: transparent;
  border: 1px solid var(--rand);
  color: var(--schrift-leise);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;
}

.kapitel button[aria-pressed="true"] {
  border-color: var(--schrift);
  color: var(--schrift);
}

/* Übersicht — 5 Spalten wie auf der CD, solange der Platz reicht */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--spalte-min), 1fr));
  gap: 4px;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 4px 3rem;
}

/* Am Handy zwei grosse Kacheln pro Reihe: die Übersicht ist das Sprungbrett
   ins Gespräch, sie muss auch mit dem Daumen treffbar bleiben. */
@media (max-width: 560px) {
  :root { --spalte-min: 44%; }
}

.kachel {
  display: block;
  padding: 0;
  border: 0;
  background: #0a0a0a;
  cursor: pointer;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

.kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82);
  transition: filter 0.25s ease;
}

.kachel:hover img,
.kachel:focus-visible img { filter: brightness(1.1); }

.kachel:focus-visible { outline: 2px solid var(--schrift); outline-offset: -2px; }

.hinweis {
  text-align: center;
  color: var(--schrift-leise);
  padding: 1rem;
}

/* ---------- Vollbild ---------- */

.projektor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: #000;
  /* dvh statt vh: sonst schiebt die Adressleiste am Handy das Bild an */
  height: 100vh;
  height: 100dvh;
  width: 100vw;
  width: 100dvw;
  cursor: pointer;
}

.projektor[hidden] { display: none; }

.leinwand {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* IMMER, nicht erst im vergrößerten Zustand: sonst greift am Bildschirmrand
     die Zurück-Geste des Browsers statt zu blättern, und der Wisch nach unten
     löst in Chrome Android „zum Aktualisieren ziehen" aus — die Seite lädt
     neu, statt sich zu schließen. */
  touch-action: none;
  overscroll-behavior: contain;
}

/* Ein Tipp darf dauern (ältere Hände) — genau dort liegt aber die Schwelle des
   nativen Langdrucks. Ohne diese Zeilen erscheint zum Vergrößern zusätzlich
   „Bild kopieren / Sichern" von iOS bzw. das Android-Kontextmenü.
   `touch-action` allein unterdrückt das NICHT. */
.leinwand,
.leinwand .dia {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

.dia {
  position: absolute;
  inset: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.45s ease-in-out;
}

.dia.sichtbar { opacity: 1; }

/* Vergroessert: der Ausschnitt laesst sich ziehen bzw. schieben */
.projektor.vergroessert { cursor: move; }
.projektor:focus { outline: none; }

/* Pfeile: es gibt sie ausschliesslich an Geraeten mit Maus. Tablet und Handy
   blaettern per Wisch — dort bleibt der Schirm restlos dem Foto. */
.pfeil { display: none; }

@media (hover: hover) and (pointer: fine) {
  .pfeil {
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 0 1.2rem;
    color: var(--schrift);
    font-family: inherit;
    font-size: 3rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    text-shadow: 0 0 10px #000;
  }

  .pfeil-links  { left: 0; }
  .pfeil-rechts { right: 0; }

  /* erscheinen, wenn die Maus sich regt — und verschwinden wieder */
  .projektor.regung .pfeil { opacity: 0.45; }
  .projektor.regung .pfeil:hover { opacity: 1; }
}

/* Zähler: nur kurz beim Bildwechsel, kostet keinen Platz */
.zaehler {
  position: absolute;
  right: max(0.9rem, env(safe-area-inset-right));
  bottom: max(0.9rem, env(safe-area-inset-bottom));
  color: var(--schrift-leise);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
  text-shadow: 0 0 6px #000;
}

.zaehler.sichtbar { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .dia, .kachel img, .zaehler { transition: none; }
}