/* =========================================================================
   galerie.css — die wischbare Bildreihe am Fuß eines Abschnitts

   Entstanden am 05.08.2026 nach dem Teamtermin. Lisa hatte eine Galerie als
   Auflockerung vorgeschlagen, Sarah hat sie begründet: Wer mobil über die
   Navigation direkt zu einem Anker springt, sieht dort sonst nur Textzeilen
   und keinen einzigen Bildanker.

   Sie steht UNTER den Ausklappern, nicht über ihnen — „unten drunter", wie
   Sarah es gesagt hat. Oben schöbe sie die Liste weg, die der eigentliche
   Wegweiser ist; unten schließt sie den Abschnitt ab.

   Eigene Datei, weil das Projekt eine Regel hat (bildnachweis.css:38-43):
   Eine Eigenschaft gehört genau einer Datei. Alles, was `.galerie…` heißt,
   steht hier — und nirgends sonst.

   Das Wischen macht der Browser: overflow-x plus scroll-snap. Kein
   JavaScript, keine Bibliothek. Nichts bewegt sich von allein.
   ========================================================================= */

.galerie {
  /* Keine eigene Breitenbegrenzung: Die Reihe läuft genau so breit wie die
     Ausklapp-Karten darüber, weil sie im selben `.wrap` steht. Das ist
     Sarahs Vorgabe — „die nur so breit läuft, wie auch das Dropdown läuft".

     Nicht mit der Einleitung verwechseln: Die läuft schmaler (44rem), die
     Karten laufen über die vollen 72rem des Umschlags. Maßgeblich sind hier
     die Karten. */
  margin: 1.75rem 0 0;
}

/* --- Wisch-Hinweis ------------------------------------------------------
   13.08.2026, Rückmeldung Christian Silber (kjc8iz): Er hielt die Reihe bei
   500 px für kaputt. Beschlossen als E11 — sichtbarer Hinweis, keine
   Strukturänderung.

   Der Befund dazu, damit niemand am falschen Ende sucht: Der Anschnitt ist
   in Ordnung. Gemessen bei jeder Breite von 320 bis 520 px stehen rund 45 %
   des zweiten Bildes sichtbar da (83 px bei 320, 138 px bei 500). Es fehlt
   nicht der Hinweis, dass etwas abgeschnitten ist — es fehlt die Deutung,
   dass man daran ziehen kann.

   Denn die Behauptung weiter unten in dieser Datei, der Scrollbalken sei
   „hier die einzige Ansage", trägt nicht: Auf macOS ist er ein überlagerter
   Balken und im Ruhezustand unsichtbar. Gemessen ergibt
   `offsetHeight - clientHeight` bei ALLEN geprüften Breiten glatt **0** —
   er belegt keinen Platz und ist ohne Bewegung nicht da. Genau darauf ist
   Christian hereingefallen.

   Bewusst KEIN Verlauf am rechten Rand, obwohl er als Möglichkeit im Raum
   stand: Ein Verlauf macht den Anschnitt hübscher, aber nicht eindeutiger —
   und der Anschnitt war ja nie das Problem. Dazu kommt, dass Christian an
   einem Fenster von 500 px saß, also mit Maus und Tastatur: Für ihn ist
   „wischen" gar nicht die Handlung. Eine Zeile, die beide Wege benennt,
   trifft den Fall; ein Verlauf trifft ihn nicht.                          */

.galerie__hinweis {
  /* Grundstellung: nicht da. Sichtbar wird die Zeile erst, wenn die Reihe
     wirklich überläuft — das entscheidet animationen.js nach Messung, nicht
     eine geratene Breite. Ohne JavaScript bleibt alles wie bisher. */
  display: none;
}

.galerie.is-ueberlauf .galerie__hinweis {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.4rem;
  font-size: var(--font-size-body-xs);
  /* Dieselbe zurückgenommene Schriftfarbe wie die Bildunterschriften
     darunter (.galerie__text). Sie steht auf jedem Bandton über 4,5:1 und
     ist im Projekt bereits nachgerechnet. Kein neuer Ton, kein Blau. */
  color: var(--color-text-muted);
}

/* Der Winkel zeigt in die Richtung, in die es weitergeht. Er steht still:
   ein wippender Pfeil wäre genau die Zappel-Animation, die hier nichts zu
   suchen hat — und er müsste dann unter prefers-reduced-motion wieder
   abgeschaltet werden. Ein ruhendes Zeichen braucht diese Ausnahme nicht. */
.galerie__hinweis-pfeil {
  flex: none;
}

.galerie__spur {
  display: flex;
  gap: 0.75rem;

  /* Der eigentliche Kniff: waagerecht scrollbar, mit Einrasten. `proximity`
     statt `mandatory` — mandatory reißt die Reihe bei jedem kleinen Wischen
     hart auf das nächste Bild und fühlt sich am Telefon zickig an. */
  overflow-x: auto;
  scroll-snap-type: x proximity;

  /* Auf iOS läuft die Reihe sonst am Rand aus, statt sanft zu bremsen. */
  -webkit-overflow-scrolling: touch;

  /* Etwas Luft, damit der Fokusring des Behälters nicht an den Bildern
     klebt, und Platz für den Schatten der Karten. */
  padding: 0.25rem 0.25rem 0.5rem;
  margin: 0;
  list-style: none;

  /* Die Bildreihe hat keinen sichtbaren Anfang und kein Ende — der
     Scrollbalken ist hier die einzige Ansage, dass es weitergeht. Er bleibt
     deshalb sichtbar, nur schmal. Ihn ganz zu verstecken wäre die
     modischere, aber schlechtere Lösung: Am Schreibtisch, wo niemand wischt,
     wäre die Reihe dann nicht als scrollbar erkennbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--color-taupe) transparent;
}

.galerie__spur:focus-visible {
  /* Der globale Fokusring des Projekts, hier mit etwas Abstand, damit er den
     Rahmen des ersten Bildes nicht berührt. */
  outline: 2px solid var(--color-moss);
  outline-offset: 3px;
  border-radius: var(--border-radius);
}

.galerie__feld {
  /* Feste Breite, damit immer ein Stück des nächsten Bildes hervorschaut —
     das ist die Einladung zum Weiterwischen. Ohne diesen Anschnitt sieht die
     Reihe aus wie ein einzelnes Bild und niemand kommt auf die Idee, dass es
     weitergeht.

     Mobil zwei Drittel der Breite, ab 48rem ein festes Maß: dann stehen
     knapp drei Bilder nebeneinander, wie vom Team gewünscht („eine
     Dreier-Galerie oder eine Zweier"). */
  flex: 0 0 68%;
  scroll-snap-align: start;
}

@media (min-width: 48rem) {
  .galerie__feld {
    /* Am Schreibtisch teilen sich die Bilder die Breite gleichmäßig auf,
       statt eine feste Größe zu behalten. Bei den üblichen zwei bis drei
       Bildern stehen sie damit nebeneinander und füllen die Kartenbreite —
       genau die „Dreier-Galerie oder Zweier", die das Team beschrieben hat.
       Gewischt werden muss dann gar nicht mehr; das bleibt der Fall fürs
       Telefon. Erst ab fünf Bildern wird es hier eng, deshalb ist im Panel
       bei fünf Schluss. */
    flex: 1 1 14rem;
  }
}

.galerie__figur {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.galerie__bild {
  display: block;
  width: 100%;
  /* Einheitliches Format, sonst steht die Reihe treppenförmig da: Hochkant-
     und Querformate liegen im Material gemischt vor. 4:3 verträgt beide
     halbwegs; der Zuschnitt folgt dem im Panel gepflegten Fokuspunkt, wo
     einer gesetzt ist. */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--border-radius);
  background: var(--color-ivory);

  /* Am Schreibtisch wischt man die Reihe mit gedrückter Maustaste. Ohne
     diese Zeile greift der Browser jedoch sein eigenes Bild-Ziehen ab:
     Statt die Reihe zu schieben, zieht man das Foto als Datei aus der
     Seite heraus — es hängt dann als Geisterbild am Zeiger und die
     Galerie rührt sich nicht. Carlo am 05.08.2026: „als würde ich die
     Datei greifen".

     `-webkit-user-drag` deckt Chrome und Safari ab, Firefox hört auf
     das Attribut `draggable="false"` im Markup (galerie.php). Beides
     zusammen, sonst bleibt je ein Browser übrig.

     Was ausdrücklich BLEIBT: Rechtsklick und „Bild speichern unter",
     die Tastaturbedienung der Reihe und ihr Fokusring. Deshalb hier
     auch kein `user-select: none` am Behälter — das nähme nur die
     Möglichkeit, die Bildunterschriften zu markieren, und löst das
     Ziehen kein Stück. */
  -webkit-user-drag: none;
  user-drag: none;
}

.galerie__text {
  /* Kein Kasten, keine Fläche — die Zeile steht unter dem Bild und soll die
     Reihe nicht schwerer machen, als sie sein darf. */
  margin-top: 0.4rem;
  font-size: var(--font-size-body-xs);
  line-height: 1.35;
  color: var(--color-text-muted);
}

.galerie__ort {
  display: block;
  font-weight: 700;
  color: var(--color-ink);
}

.galerie__bezug {
  display: block;
}

.galerie__quelle {
  display: block;
  /* Der Urhebernachweis ist Pflicht, aber nicht die Botschaft — deshalb eine
     Spur zurückgenommen. Der Kontrast bleibt über 4,5:1 (color-text-muted
     auf Elfenbein), das ist nachgemessen und darf nicht weiter sinken. */
  opacity: 0.85;
}

/* Wer Bewegung abgeschaltet hat, bekommt keine — auch nicht das weiche
   Nachlaufen beim Einrasten. Das Wischen selbst bleibt natürlich. */
@media (prefers-reduced-motion: reduce) {
  .galerie__spur {
    scroll-behavior: auto;
  }
}