/* ==========================================================================
   WECHSELZEILE – abwechselnd Bild und Text, untereinander

   ZUSAMMENGEZOGEN in Runde 66 aus drei Kopien:
     .heweg__schritt  pages/herstellung.css   (Der Weg der Saat, 7 Schritte)
     .unmarke         pages/unternehmen.css   (zwei Marken)
     .unsaeule        pages/unternehmen.css   (vier Saeulen)

   GEMESSEN vor dem Zusammenziehen: Koerper, Titel, Schwungzeile und Text
   trugen in allen drei Kopien dieselben Deklarationen. Liste und Zeile
   ebenfalls, bis auf die Zusaetze, die unten aufgezaehlt sind.

   WAS HIER NICHT HINEINGEHOERT und in den Seitendateien bleibt:
     - die Ziffernkreise auf /herstellung/. Dort folgen die Schritte
       aufeinander, deshalb <ol> mit counter. Marken und Saeulen sind <ul>
       ohne Reihenfolge.
     - die Platzhalterflaeche .heweg__platz.
     - alles Markenspezifische: die Logoplatte, die Vertriebszeile, der
       Websitelink - und die schmalere erste Spalte, die ein Logo braucht
       und ein Foto nicht.
   Der fuenfte Zusammenzug nach knopf, stellenliste, faq, bildband und
   wegekarte.

   ACF/Theme: eine <ul>/<ol> mit <li>, darin zwei Bloecke - Medium und
   Koerper. Ein Wiederholungsfeld (bild, titel, schwung, text) genuegt.
   ========================================================================== */

.wzeile {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(var(--sp-8), 7vw, var(--sp-9));
}

.wzeile__eintrag {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(var(--sp-6), 4vw, var(--sp-8));
  align-items: center;
}
/* Jede zweite Zeile spiegelt: Bild nach rechts. */
.wzeile__eintrag:nth-child(even) .wzeile__media { order: 2; }

.wzeile__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--r-card);
  background: var(--bg-platzhalter);
}
.wzeile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wzeile__body { display: grid; gap: var(--sp-4); align-content: start; }

.wzeile__titel {
  margin: 0;
  font-size: var(--fs-500);
  font-weight: 400;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.wzeile__titel em {
  display: block;
  font-family: var(--font-accent);
  font-style: normal;
  font-size: 1.5em;
  line-height: 1;
  color: var(--toem-gold);
}

.wzeile__text {
  margin: 0;
  max-width: 34rem;
  font-size: var(--fs-300);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

@media (max-width: 56rem) {
  .wzeile__eintrag { grid-template-columns: minmax(0, 1fr); }
  /* Bild immer oben, egal ob gerade oder ungerade - sonst rutscht es bei
     jeder zweiten Zeile unter den Text. */
  .wzeile__eintrag:nth-child(even) .wzeile__media { order: 0; }
}