/* --------------------------------------------------------------------------
   Sektion 3: USP-Beweis (bis 25.09.2026 Sektion 2)
   Drei Kernaussagen als Bildkarten, kein Fliesstext.
   Mapping: template-parts/usp.php  |  ACF-Repeater 'usp_items'
   Feldgruppe: bild (image), label (text), titel (text), text (textarea),
               link (link) - Icons sind entfallen
   REIHENFOLGE GETAUSCHT, Kundenwunsch vom 25.09.2026: erst "Fuenf Sorten",
   dann "Warum unsere Oele anders schmecken". Die Farben tauschen mit, damit
   Weiss und Grau weiter wechseln - sonst stuenden diese Sektion und
   "Herstellung" als zwei weisse Flaechen untereinander. Die Wellenfront der
   Hero laeuft jetzt in .prod aus, deshalb steht die Pflicht zu --bg-page dort.
   -------------------------------------------------------------------------- */
.usp {
  background: var(--bg-soft);
  padding-block: var(--sp-sektion);
}

.usp__intro {
  max-width: 44rem;
  margin: 0 0 clamp(var(--sp-7), 5vw, var(--sp-8));
}
/* Zweite Zeile in der Primaerschrift. Grafolita ist eine Schreibschrift,
   also muessen Versalien und Sperrung aus der h2 zurueckgesetzt werden.
   Sie laeuft optisch kleiner als die Sans, daher deutlich grosser gesetzt. */


/* Drei gleichwertige Karten. Frueher war die erste hervorgehoben, weil sie
   als einzige blau war - jetzt tragen alle drei den blauen Textblock und die
   Reihenfolge macht die Gewichtung. */
.usp__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(var(--sp-5), 3vw, var(--sp-7));
}

/* Karte: Bild oben, Textblock in Markenblau darunter.
   Was hier weg ist und warum:
   - Die Goldlinie oben. Die Marke arbeitet nicht mit geraden Linien, und
     als einseitige Kante lief sie in der Rundung ohnehin spitz aus.
   - Die Icons. Sie waren generische Strichzeichnungen und trugen die
     Aussage nicht. Ein Foto der abgetrennten Schalen erklaert "Nur der
     Kern" in einem Blick, ein Tropfen-Icon erklaert nichts.
   Der blaue Textblock ist der Ersatz fuer die frueher nur EINE blaue
   Kachel. So tragen alle drei Karten Marke, und die Sektion unterscheidet
   sich weiter von den Produktkarten, die weisse Textblocks haben.
   Ganzflaechig verlinkt: das <a> ist die Karte. */
.usp__item {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte-dunkel);
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
.usp__item:hover,
.usp__item:focus-visible {
  transform: translateY(var(--lift));
  /* Kraeftigere Stufe: der Textblock ist dunkel, unter ihm ist die leichte
     Stufe der weissen Karten nicht zu sehen. */
  box-shadow: var(--shadow-3);
}

.usp__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bg-platzhalter);
}
.usp__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-media) var(--ease-media);
}
.usp__item:hover .usp__media img,
.usp__item:focus-visible .usp__media img { transform: scale(var(--zoom-media)); }

/* Der Textblock traegt die Farbe. flex: 1 haelt die drei Karten gleich
   hoch, obwohl die Texte unterschiedlich lang sind - sonst endet die
   kuerzeste Karte hoeher als die anderen. */
.usp__body {
  flex: 1;
  padding: var(--sp-5);
  background: var(--toem-blau);
  color: var(--on-blau-1);
}
/* Auf Blau gemessen: Gold 7.39, Weiss 14.77, gedaempftes Grau 9.61. */
.usp__body .usp__label { color: var(--toem-gold); }
.usp__body .usp__heading { color: var(--on-blau-1); }
.usp__body .usp__text { color: var(--on-blau-2); }

/* Fokusring: das globale Dunkelgold ist gegen den blauen Block zu schwach. */
.usp__item:focus-visible { outline-color: var(--toem-gold); }

.usp__label {
  font-family: var(--font-body);
  font-size: var(--fs-100);
  font-weight: 500;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--toem-gold);
  margin: 0 0 var(--sp-2);
}
.usp__heading {
  font-family: var(--font-body);
  font-size: var(--fs-400);
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: var(--toem-blau);
  margin: 0 0 var(--sp-3);
}
.usp__text {
  font-size: var(--fs-300);
  color: var(--text-muted);
  margin: 0;
}

@media (max-width: 60rem) {
  .usp__grid { gap: var(--sp-6); }
}