/* ==========================================================================
   pages/handel.css
   Der Handelszweig: /handel/, /handel/gebinde/ und /handel/kontakt/.

   DIE STARTSEITE HAT DIESEN ZWEIG SCHON DEFINIERT. In der Sektion b2b stehen
   drei Karten mit ihren Zielen, und der Vorspann nennt die Zielgruppen:
     "Wir liefern an Lebensmitteleinzelhandel, Grosskuechen und Industrie -
      von der 500-ml-Flasche bis zum Container."
     /handel/kontakt/  "Vertrieb direkt", ein Ansprechpartner, KEIN Formular
     /downloads/       Datenblaetter und Zertifikate
     /handel/gebinde/  "Flasche, Kanister, IBC oder Tankwagen"
   Diese Vorgaben sind der Rahmen, nicht mein Entwurf.

   ALLE DREI SEITEN SIND INFOSEITEN nach der Hero-Regel: keine hat ein
   einzelnes Motiv, das selbst der Inhalt ist. Der Bogen kommt als
   Trennbaustein am Fuss des Kopfblocks, wie auf /downloads/.

   .stkarte fuer die Wege in die Nachbarseiten kommt aus pages/karriere.css -
   dieselbe Wiederverwendung wie auf /unternehmen/historie/. Im Theme wird
   daraus ein Template-Part.
   ========================================================================== */

/* --- Gemeinsamer Seitenkopf --------------------------------------------- */
.hakopf {
  position: relative;
  overflow: hidden;
  background: var(--bg-page);
  padding-block: var(--sp-sektion) var(--sp-6);
  padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-5));
  --schwung-grund: var(--bg-soft);
}
.hakopf > .schwung { position: absolute; left: 0; right: 0; bottom: -1px; }
.hakopf__title {
  margin: 0 0 var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-600);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--toem-blau);
}
.hakopf__title em {
  font-size: var(--fs-800);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
.hakopf__lead {
  max-width: 38rem;
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.hakopf__zurueck {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 2.5rem;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-200);
  font-weight: 600;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.hakopf__zurueck:hover,
.hakopf__zurueck:focus-visible { color: var(--toem-gold); }
.hakopf__zurueck svg {
  width: var(--zeichen-inline); height: var(--zeichen-inline); flex: none;
}

/* Alle Sektionstitel dieses Zweigs laufen OHNE Schwungzeile und deshalb auf
   Gewicht 600 - Regel in components/sektionstitel.css: Stimmungsseiten
   bekommen die Schreibschrift je Sektion, Funktionsseiten nur an der H1. Ein
   Einkaeufer arbeitet hier, er wird nicht beworben. */
.hazg__title,
.haarg__title,
.hawege__title,
.gbliste__title,
.gbpasst__title,
.hkwege__title,
.hkbereit__title { font-weight: 600; margin-bottom: var(--sp-4); }

/* --- Zielgruppen -------------------------------------------------------- */
/* DREI BLOECKE, NICHT DREI TABS. Auf /kontakt/ sind die Zielgruppen Tabs, weil
   dort jede einen vollstaendigen Block mit Formular traegt und die Seite sonst
   dreimal so lang waere. Hier ist es umgekehrt: ein Einkaeufer soll die drei
   Gruppen NEBENEINANDER sehen und erkennen, in welche er gehoert - hinter
   einem Tab findet er das nicht. */
.hazg { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.hazg__grid {
  display: grid;
  /* min(19rem, 100%) statt 19rem: eine Spalte darf nie mehr fordern, als der
     Behaelter hergibt. Bei 320 px blieben nach dem Seitenpolster 280 px
     uebrig, die Spalte bestand aber auf 304 - gemessen 4 px Querscroll.
     Oberhalb von 344 px Fensterbreite gewinnt 19rem, dort aendert sich
     nichts. Kein Media Query noetig. */
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: var(--sp-5);
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}
/* KACHELN EINER ZEILE AUF GEMEINSAME ZEILEN, 15.09.2026.
   GEMESSEN: in zwei Nachbarkacheln ist ein Textblock unterschiedlich hoch -
   ein zweizeiliger Vorspann gegen einen einzeiligen -, und alles darunter
   rutscht mit. Auf /handel/ waren es 24 px, auf 768 bis 1440 px.
   SUBGRID STATT MINDESTHOEHEN. Eine Mindesthoehe muesste raten, wie viele
   Zeilen der laengste Text auf der schmalsten Spalte braucht, und waere beim
   naechsten Kundentext wieder falsch. Mit subgrid teilen sich alle Kacheln
   einer Zeile dieselben Zeilen, egal was drinsteht.
   Wo subgrid fehlt, bleibt es beim heutigen Verhalten - schlechter wird es
   nicht. Dieselbe Ueberlegung wie bei der Labelspalte der Filterleiste. */
@supports (grid-template-rows: subgrid) {
  .hazg__grid { grid-template-rows: repeat(4, auto); }
  .hazg__grid > .hazgkarte { grid-row: span 4; grid-template-rows: subgrid; }
}

.hazgkarte {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  align-content: start;
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-karte);
}
.hazgkarte__titel {
  margin: 0;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.hazgkarte__lead {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
.hazgkarte__liste {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  list-style: none;
}
.hazgkarte__liste li { display: grid; gap: 0.15rem; }
.hazgkarte__liste b {
  font-size: var(--fs-200);
  font-weight: 700;
  color: var(--toem-blau);
}
.hazgkarte__liste span {
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Argumente ---------------------------------------------------------- */
.haarg { background: var(--bg-page); padding-block: var(--sp-sektion); }
.haarg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-6) var(--sp-7);
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}
/* KEIN TRENNSTRICH MEHR, dafuer ein Zeichen. Gemeldet am 28.08.2026 fuer
   diese Seite und zugleich fuer die Vorteile auf der Karriereseite: die
   Goldlinie ueber jedem Punkt reiht Kaesten auf, ohne zu sagen, worum es geht.
   Ein Zeichen sagt es auf einen Blick.
   Damit gilt fuer die ganze Website: KEINE Goldlinie ueber Aufzaehlungspunkten.
   Wo eine Aufzaehlung optisch gegliedert werden soll, traegt sie Zeichen. */
/* DIESELBE AUSRICHTUNG WIE BEI DEN ZIELGRUPPENKARTEN. GEMESSEN auf
   /handel/gebinde/ bei 1024 px: ein zweizeiliger Titel schob den Text
   seiner Spalte 26 px nach unten, waehrend der Nachbar oben stand. */
@supports (grid-template-rows: subgrid) {
  .gbpasst__grid { grid-template-rows: repeat(3, auto); }
  .gbpasst__grid > .haargument { grid-row: span 3; grid-template-rows: subgrid; }
}

.haargument {
  display: grid;
  /* Siehe .kavorteil in pages/karriere.css: ohne align-content wandert die
     ueberschuessige Hoehe in die Zeichenzeile. Gemessen 8,3 px Versatz. */
  align-content: start;
  gap: var(--sp-2);
}
.haargument__icon {
  display: inline-flex;
  margin-bottom: var(--sp-1);
  color: var(--toem-gold);
}
.haargument__icon svg { width: var(--zeichen-gross); height: var(--zeichen-gross); }
.haargument__titel {
  margin: 0;
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
}
.haargument__text {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Gebindeliste ------------------------------------------------------- */
/* Eine Zeile je Gebindeart, Bild links. Keine Kacheln: die vier Arten
   unterscheiden sich in mehreren Angaben (Groessen, Einheit, fuer wen, ab
   wann), und die stehen in einer Zeile lesbar untereinander - in einer Kachel
   waeren es vier Kurztexte ohne Bezug. */
.gbliste { background: var(--bg-soft); padding-block: var(--sp-sektion); }
.gbliste__grid { display: grid; gap: var(--sp-5); }
.gbart {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  gap: var(--sp-5) var(--sp-6);
  align-items: center;
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-karte);
}
/* PLATZHALTER, kein Foto. Es gibt keine Gebindefotos, und ein fremdes Foto
   waere irrefuehrend. Die Strichzeichnung sagt, was gemeint ist, und die
   Flaeche in --bg-platzhalter sagt, dass hier ein Bild fehlt. */
.gbart__bild {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--sp-2);
  aspect-ratio: 4 / 3;
  background: var(--bg-platzhalter);
  border-radius: var(--r-md);
  color: var(--toem-blau);
}
/* 2,5rem statt 3,5: mit einer festen Kontur von 1,5 px wirkt ein 56 px
   grosses Zeichen duenn - die Kontur skaliert jetzt nicht mehr mit. 40 px
   halten das Verhaeltnis. */
.gbart__bild svg { width: var(--zeichen-flaeche); height: var(--zeichen-flaeche); opacity: 0.55; }
/* DIE MARKE STEHT SICHTBAR IM BILD. Erste Fassung hatte sie nur als aria-label
   am Rahmen - fuer Sehende sah die Flaeche damit wie eine fertige graue Kachel
   mit Icon aus, nicht wie eine offene Stelle. Ein Platzhalter, den man nicht
   als Platzhalter erkennt, ist keiner. */
.gbart__marke {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.gbart__titel {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-500);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
.gbart__daten {
  display: grid;
  /* 11rem STATT 9rem. Mit 9rem passten bei 1024 px vier Spalten a 156 px in
     die Zeile, und "VERPACKUNGSEINHEIT" ist als ein Wort 173 px breit - die
     Etikette musste also getrennt werden ("VERPACKUNGSEIN-HEIT"), was bei
     einer gesperrten Versalzeile schlecht aussieht. Mit 11rem sind es drei
     Spalten a 213 px und das Wort steht wieder in einer Zeile. Oberhalb von
     rund 1200 px aendert sich nichts, dort war ohnehin Platz. */
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--sp-4);
  margin: 0;
}
/* align-content: start UND margin: 0 an den Absaetzen. Beides noetig:
   - ohne align-content strecken sich die beiden Zeilen auf die Hoehe der
     hoechsten Spalte und stehen weit auseinander;
   - die Angaben sind <p> und tragen sonst den Standardrand des Browsers von
     16 px. Im Gitter kollabiert der nicht - derselbe Fehler wie damals bei
     .form__feld auf der Kontaktseite, dort waren es gemessen 48 px zwischen
     zwei Feldern statt 16. */
.gbart__daten > div {
  display: grid;
  align-content: start;
  gap: var(--sp-1);
  /* min-width: 0 gegen die Voreinstellung auto im Raster, hyphens gegen die
     langen Hauptwoerter dieser Seite. GEMESSEN bei 1024 px:
     "Lebensmitteleinzelhandel" brauchte 190 px in einer 156-px-Spalte und
     lief in die Nachbarspalte. */
  min-width: 0;
  hyphens: auto;
}
.gbart__daten p { margin: 0; }
.gbart__was {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.gbart__wert { font-size: var(--fs-300); font-weight: 600; color: var(--toem-blau); }
/* Geschaetzte Angabe. Kursiv und in der leiseren Farbe, damit sie sich vom
   belegten Wert unterscheidet - und mit einem Titel, der es ausspricht. */
.gbart__wert--offen { font-weight: 400; font-style: italic; color: var(--text-muted); }

/* --- Was wann passt ----------------------------------------------------- */
.gbpasst { background: var(--bg-page); padding-block: var(--sp-sektion); }
.gbpasst__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-6) var(--sp-7);
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}

/* --- Hinweisblock ------------------------------------------------------- */
/* Fuer Angaben, die der Kunde liefern muss. Steht ausdruecklich als offener
   Punkt auf der Seite, nicht als leere Stelle. */
.gbfehlt {
  max-width: 44rem;
  margin: var(--sp-6) 0 0;
  padding: var(--sp-5);
  background: var(--bg-soft);
  border-radius: var(--r-card);
}
.gbfehlt__titel {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-300);
  font-weight: 700;
  color: var(--toem-blau);
}
.gbfehlt p {
  margin: 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Kontaktseite ------------------------------------------------------- */
.hkwege { background: var(--bg-soft); padding-block: var(--sp-8); }
.hkwege__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.hkkarte {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-karte);
}
.hkkarte__fuer {
  font-size: var(--fs-100);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}
.hkkarte__name {
  margin: 0;
  font-size: var(--fs-400);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--toem-blau);
}
/* Solange kein Name vorliegt: als offene Angabe gekennzeichnet, nicht als
   erfundener Name. Die Startseite verspricht "ein Ansprechpartner ... ohne
   Umweg ueber ein Formular" - das braucht Namen und Durchwahl. */
.hkkarte__name--offen { font-weight: 400; font-style: italic; color: var(--text-muted); }
.hkkarte__rolle { font-size: var(--fs-200); color: var(--text-muted); }
.hkkarte__weg {
  display: grid;
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hkkarte__weg a {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--toem-blau);
  transition: color var(--dur) var(--ease);
}
.hkkarte__weg a:hover,
.hkkarte__weg a:focus-visible { color: var(--toem-gold); }

.hkbereit { background: var(--bg-page); padding-block: var(--sp-8) var(--sp-sektion); }
.hkbereit__liste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: var(--sp-5);
  max-width: 58rem;
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}
.hkbereit__liste li {
  display: grid;
  gap: var(--sp-1);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}
.hkbereit__liste b { font-size: var(--fs-300); font-weight: 700; color: var(--toem-blau); }
.hkbereit__liste span { font-size: var(--fs-200); color: var(--text-muted); }

/* --- Wege in die Nachbarseiten ------------------------------------------ */
.hawege { background: var(--bg-page); padding-block: var(--sp-sektion); }
.hawege__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: var(--sp-4);
  /* 64 px, NICHT 32. Die Startseite setzt zwischen Textblock und Raster
     62 px (.usp__intro traegt margin-bottom: var(--sp-8)); hier waren es
     gemessen 24 px, weil 32 px margin-top mit den 16 px Titelabstand
     kollabieren. Weniger als die Haelfte der Referenz. */
  margin-top: var(--sp-8);
}

/* EINSPALTIG AB HIER. GEMESSEN: die Gebindekarte lief bei 360 px um 98 px
   und bei 414 px um 44 px aus dem Fenster, weil die 12rem-Bildspalte stehen
   blieb. Ab 480 px passt sie; 38rem (608 px) laesst Reserve. */
@media (max-width: 38rem) {
  .gbart { grid-template-columns: minmax(0, 1fr); }
}

/* TREFFERFLAECHE 44 px auf Touchbreiten, nachgezogen am 10.09.2026 beim
   responsiven Durchgang. Gemessen war dieser Zuruecklink 40 px hoch; die
   Projektregel verlangt 44. Dasselbe Muster gibt es viermal im Projekt
   (rzkopf, stdkopf, hakopf, bwkopf) - im Theme wird daraus ein Bauteil, hier
   steht der Wert vorerst viermal. Nur auf Touchbreiten, wie bei der Fusszeile
   und den Eingabefeldern; dieselbe Grenze von 64rem. */
@media (max-width: 64rem) {
  .hakopf__zurueck { min-height: 2.75rem; }
}