/* --------------------------------------------------------------------------
   Sektion 7: Handel  -  NICHT MEHR AUF DER STARTSEITE
   Das Markup ist weiter unten im Dokument auskommentiert aufgehoben. Diese
   Regeln bleiben stehen, weil der Bereich eine eigene Unterseite unter
   /handel/ bekommt und dort darauf aufsetzt. Auf der Startseite greifen sie
   derzeit ins Leere.
   Sektion 7: Handel / B2B
   STATISCH. Neu - auf der Bestandsseite fehlt dieser Bereich komplett.
   Laut Projektwissen "muss nicht gross sein, muss existieren": deshalb
   kein Bild, sondern drei konkrete Wege (Kontakt, Datenblaetter, Gebinde).
   Mapping: template-parts/handel.php, Inhalte in ACF-Options.
   OFFEN (Projektwissen): welche Datenblaetter, welcher Vertriebskontakt?
   Die Karten sind Struktur, die Inhalte muessen vom Kunden kommen.
   -------------------------------------------------------------------------- */
.b2b {
  background: var(--bg-soft);
  padding-block: var(--sp-sektion);
}

.b2b__head {
  /* 48 statt 44rem. "Sie brauchen groessere Mengen?" braucht in Ofelia
     Regular bei 44px gemessene 751px, bei 44rem standen nur 704px zur
     Verfuegung - die erste Zeile brach um und die Ueberschrift war 194px
     hoch, wo alle anderen 144px haben. Die uebrigen Sektionskoepfe bleiben
     bei ihren Breiten: sie stehen teils neben einem Link oder einem Bild,
     eine gemeinsame Breite waere dort falsch. */
  max-width: 48rem;
  margin: 0 0 clamp(var(--sp-7), 5vw, var(--sp-8));
}
.b2b__label {
  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-4);
}

/* Drei Wege. Karten mit Goldkante oben wie in der USP-Sektion, damit die
   Seite eine erkennbare Formensprache behaelt. */
.b2b__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: clamp(var(--sp-5), 3vw, var(--sp-6));
}
@media (max-width: 56rem) {
  .b2b__grid { grid-template-columns: 1fr; }
}

.b2b__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--surface);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: var(--shadow-karte);
  transition: transform var(--dur-hover) var(--ease-hover),
              box-shadow var(--dur-hover) var(--ease-hover);
}
/* Goldband oben statt border-top, siehe .prod__card::before. */
.b2b__card::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--toem-gold);
}
/* Frueher wechselte hier die Flaechenfarbe. Die Karte hat kein Bild,
   also traegt der Schatten samt Anheben die Reaktion - dieselbe Sprache
   wie bei Produkt- und Rezeptkarten, statt eines dritten Mechanismus. */
a.b2b__card:hover,
a.b2b__card:focus-visible {
  transform: translateY(var(--lift));
  box-shadow: var(--shadow-2);
}

.b2b__icon {
  width: var(--zeichen-xl); height: var(--zeichen-xl);
  margin-bottom: var(--sp-4);
  color: var(--toem-blau);
}
.b2b__icon svg { width: 100%; height: 100%; }

.b2b__card h3 {
  font-size: var(--fs-400);
  font-weight: 700;
  color: var(--toem-blau);
  margin: 0 0 var(--sp-2);
}
.b2b__card p {
  font-size: var(--fs-300);
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
}
.b2b__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: auto;
  font-size: var(--fs-200);
  font-weight: 500;
  color: var(--toem-blau);
}
.b2b__cta svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline);
  transition: transform var(--dur-hover) var(--ease-hover);
}
a.b2b__card:hover .b2b__cta svg,
a.b2b__card:focus-visible .b2b__cta svg { transform: translateX(3px); }
/* Die Karten sitzen auf weissem Grund, TOEM-Gold haelt dort 1.9:1.
   Deshalb der dunklere Token. */
a.b2b__card:hover .b2b__cta,
a.b2b__card:focus-visible .b2b__cta { color: var(--toem-gold); }