/* ============================================================
   GÄRTNEREI HOHN — DER FILMSTREIFEN
   Die Freilandkultur, als Randnotiz.
   ------------------------------------------------------------
   ⛔ WAS HIER VORHER STAND, WAR EIN FEHLER

   Eine bildschirmfüllende Kamerafahrt: 100svh Bühne, dazu eine
   Spur von 8914 px. Gemessen: Sie fraß 73 % der Seitenhöhe und
   drängte das Produktraster ans Ende. Wer die Tillandsien sehen
   wollte, musste erst neun Bildschirme Zucht durchscrollen.

   Frederic wollte die Zucht "maximal klein" dargestellt haben —
   angedeutet, nicht inszeniert. Also: ein Streifen, den man
   seitlich durchwischt. Er hält niemanden auf.

   ⛔ GLEICHE HÖHE, NATÜRLICHE BREITE

   Neun der Aufnahmen sind Hochformat. Ein Raster mit festem
   Seitenverhältnis müsste sie beschneiden — genau der Fehler,
   den man auf der Seite schon gesehen hat.

   Deshalb: Die Bilder bekommen eine HÖHE und sonst nichts.
   Die Breite ergibt sich aus dem Bild selbst.

       Hochformat  ->  schmale Kachel
       Querformat  ->  breite Kachel

   Kein object-fit, kein aspect-ratio, kein Beschnitt. Der
   Streifen sieht dadurch aus wie ein Kontaktbogen — und das
   ist genau richtig für Aufnahmen aus dem Betrieb.
   ============================================================ */

.streifen {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--hohn-gruen-nacht);
  color: #fff;
  overflow: hidden;               /* die Spur darf nicht die Seite verbreitern */
}

/* --- Kopfzeile: Titel links, Pfeile rechts --- */
.streifen__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}
.streifen__kopf .dach {
  color: var(--hohn-erde-licht);  /* #F2C0B0 auf #1C2621 — gerechnet: 9,60:1 */
  margin-bottom: .35rem;
}
.streifen__kopf h2 {
  color: #fff;
  margin: 0;
}

/* --- Die Pfeile --- */
/* Ohne JS bleiben sie versteckt (hidden im HTML). Wer kein JS hat,
   scrollt den Streifen ganz normal — es fehlt ihm nichts. */
.streifen__pfeile {
  display: flex;
  gap: .5rem;
  flex: 0 0 auto;
}
.streifen__pfeile[hidden] { display: none; }

.streifen__pfeil {
  inline-size: 2.75rem;           /* 44 px — die Mindestgröße für einen Finger */
  block-size: 2.75rem;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.streifen__pfeil:hover:not(:disabled) {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
}
.streifen__pfeil:focus-visible {
  outline: 2px solid var(--hohn-erde-licht);
  outline-offset: 2px;
}
/* Am Ende angekommen: der Pfeil sagt es, statt ins Leere zu klicken. */
.streifen__pfeil:disabled {
  opacity: .3;
  cursor: default;
}

/* --- Die Spur --- */
.streifen__spur {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;  /* proximity, nicht mandatory: mandatory
                                     reißt einem das Scrollen aus der Hand */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.35) transparent;

  /* Der Streifen beginnt am Textrand, läuft aber bis zum Bildschirmrand
     hinaus — sonst wirkt er abgeschnitten statt fortgesetzt. `--rand` ist
     die Innenluft von `.wrap` (02-basis.css, Zeile 85). */
  margin-inline-end: calc(-1 * var(--rand));
  padding-inline-end: var(--rand);
  padding-block-end: .75rem;      /* Platz für die Scrollleiste */
}
.streifen__spur:focus-visible {
  outline: 2px solid var(--hohn-erde-licht);
  outline-offset: 4px;
}

/* Die Scrollleiste selbst — dezent, aber sichtbar. Eine unsichtbare
   Scrollleiste versteckt die Information, dass es weitergeht. */
.streifen__spur::-webkit-scrollbar { block-size: 6px; }
.streifen__spur::-webkit-scrollbar-track { background: rgba(255,255,255,.1); }
.streifen__spur::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.35);
  border-radius: 3px;
}

.streifen__liste {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  inline-size: max-content;       /* die Liste ist so breit wie ihre Bilder */
}

/* --- Eine Kachel --- */
.streifen__bild {
  scroll-snap-align: start;
  flex: 0 0 auto;
  max-inline-size: 88vw;          /* auf dem Handy nie breiter als der Schirm */
}
.streifen__bild figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  block-size: 100%;
}

/* ⛔ HIER STECKT DIE GANZE LOGIK — UND EINE FALLE.

   Vorgegeben wird NUR die Höhe. Die Breite rechnet der Browser
   aus dem Seitenverhältnis des Bildes aus. Der Kasten hat damit
   exakt dasselbe Verhältnis wie das Bild — nichts wird gestaucht,
   nichts abgeschnitten.

   Die Falle: `object-fit` darf hier NICHT gesetzt werden.
   - `none` würde das Bild in Originalgröße in den kleinen Kasten
     legen und alles abschneiden, was nicht hineinpasst.
   - `cover` würde beschneiden, sobald die Verhältnisse abweichen.
   Der Standardwert `fill` ist hier der richtige, weil Kasten und
   Bild dasselbe Verhältnis haben. Also: gar nichts setzen.

   Ebenso KEIN `max-inline-size`. Eine Breitenbegrenzung bei fester
   Höhe verzerrt das Bild. Auf dem schmalsten Handy (360 px) ist die
   Kachel durch die untere Grenze von 11rem höchstens 313 px breit —
   sie passt. */
.streifen__bild img {
  block-size: clamp(11rem, 26vw, 19rem);
  inline-size: auto;
  display: block;
  border-radius: var(--radius);
  background: rgba(255,255,255,.06);   /* Platzhalter, solange es lädt */
}

.streifen__bild figcaption {
  padding-block-start: .8rem;
  max-inline-size: 22rem;
}
.streifen__bild figcaption strong {
  display: block;
  font-size: var(--fs-klein);
  font-weight: 700;
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: var(--hohn-erde-licht);       /* #F2C0B0 auf #1C2621 — gerechnet: 9,60:1 */
  margin-block-end: .2rem;
}
.streifen__bild figcaption span {
  display: block;
  font-size: var(--fs-klein);
  line-height: 1.5;
  color: rgba(255,255,255,.86);        /* ergibt #DFE1E0 — gerechnet: 11,85:1 */
}

/* --- Der Hinweis --- */
.streifen__hinweis {
  margin-block-start: 1.25rem;
  margin-block-end: 0;
  font-size: var(--fs-mikro);
  letter-spacing: var(--sperr-mittel);
  text-transform: uppercase;
  color: rgba(255,255,255,.62);        /* ergibt #A9ADAB — gerechnet: 6,86:1 */
}
.streifen__hinweis span { margin-inline-end: .4rem; }

/* Wer die Pfeile hat, braucht den Wisch-Hinweis nicht mehr —
   das JS blendet ihn dann aus. Sicherheitshalber auch hier: */
.hat-pfeile .streifen__hinweis { display: none; }

/* ------------------------------------------------------------
   BEWEGUNG ABGESTELLT
   ------------------------------------------------------------
   Es gibt hier nichts, was sich von allein bewegt — genau
   deshalb ist dieser Streifen die richtige Lösung. Nur das
   weiche Scrollen wird abgeschaltet: Für manche Menschen ist
   eine gleitende Bewegung genau das Problem.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .streifen__spur { scroll-behavior: auto; }
}
.no-motion .streifen__spur { scroll-behavior: auto; }