/* ==========================================================================
   pages/downloads.css
   /downloads/ - Dokumente fuer Geschaeftspartner.

   DIE GUELTIGKEIT STEHT AN JEDER ZEILE. Ein Zertifikat ohne Datum ist fuer
   einen Handelseinkaeufer wertlos, denn genau danach fragt sein Audit. Die
   Daten stecken auf der Liveseite in den Dateinamen
   ("...gueltig-bis-2027-04-30.pdf") und sind dort nirgends zu sehen - man muss
   siebzehn PDF oeffnen, um zu wissen, welches noch gilt.

   FUER WORDPRESS: ACF-Repeater "dokumente" mit datei (Medienfeld), titel und
   gueltig_bis (Datumsfeld). Typ und Groesse kommen aus dem Medienobjekt, nicht
   aus einem Textfeld - sonst pflegt der Kunde sie beim Austausch der Datei
   nicht nach. Fuer gueltig_bis lohnt eine Erinnerung im Backend, sechzig Tage
   vor Ablauf.
   ========================================================================== */

.dlkopf {
  background: var(--bg-page);
  padding-block: var(--sp-sektion) var(--sp-6);
}
.dlkopf__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);
}
.dlkopf__title em {
  font-size: var(--fs-800);
  margin: -0.08em 0 0;
  padding-block: 0.04em 0.06em;
}
.dlkopf__lead {
  max-width: 38rem;
  margin: 0;
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--text-muted);
}

/* --- Gruppen ------------------------------------------------------------ */
.dlgruppe { padding-block: var(--sp-7); }
.dlgruppe--hell { background: var(--bg-page); }
.dlgruppe--grau { background: var(--bg-soft); }
/* ERSTE UND LETZTE GRUPPE TRAGEN DAS SEKTIONSPOLSTER, die dazwischen nicht.
   Zwischen den Gruppen sind 48 px richtig - das ist eine Liste, keine Folge
   von Sektionen. Aussen gilt aber der Seitenrhythmus.

   Die Regel fuer unten stand schon hier, die fuer oben fehlte. Gemessen am
   28.08.2026: nach dem Goldbogen des Seitenkopfs blieben 47 px bis zur ersten
   Rubrik. AN JEDEM ANDEREN BOGEN DES PROJEKTS SIND ES 143 px - auf der
   Startseite, auf /kontakt/, /handel/, /karriere/, der Produktseite und allen
   dreizehn Rezeptseiten. Downloads war der einzige Ausreisser. */
/* NICHT :first-of-type - das zaehlt nach ELEMENTTYP, und die erste <section>
   der Seite ist der Kopf, nicht die erste Gruppe. Die Regel griff deshalb
   nicht; gemessen blieben es 47 px. (Dass :last-of-type unten funktioniert,
   ist Zufall der Reihenfolge - die letzte <section> IST eine Gruppe.) */
.dlkopf + .dlgruppe { padding-top: var(--sp-sektion); }
.dlgruppe:last-of-type { padding-bottom: var(--sp-sektion); }
.dlgruppe__title { margin-bottom: var(--sp-5); font-weight: 600; }

/* DER BOGEN AM FUSS DES SEITENKOPFS, nicht zwischen den Gruppen.
   Auf Wunsch von Thorsten am 28.08.2026 nach oben gerueckt - so sitzt er auch
   auf allen anderen Seiten: am Fuss des Kopfblocks, nicht mitten im Inhalt.

   KEIN MOTIV-HERO. Gemessen: der Seitenkopf ist 400 px hoch, das erste Dokument
   steht bei y632. Ein Bogen-Hero mit Motiv waere 616 px und schoebe das erste
   Dokument auf y848, den Zertifikate-Block auf y1165 - auf einem 900-px-Fenster
   saehe ein Handelseinkaeufer nur den Hero. Dieselbe Rechnung wie bei
   /kontakt/, wo eine Hero die Telefonnummer von y568 auf y1319 geschoben
   haette. Dazu fehlt das Motiv ohnehin: eine Dokumentliste hat kein einzelnes
   Bild, das selbst der Inhalt ist.

   FOLGE FUER DIE BAHNEN: damit der Bogen als Bogen sichtbar ist und nicht nur
   als Goldlinie, muss die Bahn darunter eine andere Farbe tragen. Deshalb
   laeuft "Lieferung und Einkauf" jetzt auf Grau und der Zertifikatsblock auf
   Weiss - vorher war es umgekehrt. Die Bahnen wechseln wie zuvor, nur
   verschoben. --schwung-grund steht auf der Farbe der Bahn DARUNTER, sonst
   reisst der Uebergang. */
.dlkopf {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(min(6.25vw, 6rem) + var(--sp-5));
  --schwung-grund: var(--bg-soft);
}
.dlkopf > .schwung {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
}


/* --- Zertifikate in Sachgruppen ----------------------------------------- */
/* VIERZEHN ZERTIFIKATE IN EINER REIHE WAREN NICHT LESBAR. Erste Fassung hatte
   sie als eine Liste - wer "IFS" oder "Bio" sucht, scannt dann vierzehn gleich
   aussehende Zeilen. Jetzt fuenf Sachgruppen, und weil die Zeilen kurz sind,
   passen sie in ZWEI SPALTEN. Damit ist die Seite von 3091 auf gut die Haelfte
   geschrumpft und die vorher leere rechte Haelfte des Containers ist genutzt.

   Beim Fliesstext waere das falsch - dort begrenzt das Zeilenmass die Breite.
   Hier ist der laengste Eintrag "VLOG ohne Gentechnik e.V.", und eine Spalte
   von 44rem waere zu drei Vierteln leer.

   DIE GRUPPIERUNG IST VON DER AGENTUR und im Markup gekennzeichnet. Die
   Liveseite hat alle vierzehn in einem Block. */
.dlsach {
  display: grid;
  /* ZWEI SPALTEN, fest. auto-fit mit 21rem ergab bei 1440 px drei Spalten -
     Wunsch von Thorsten am 28.08.2026: zwei. Bei fuenf Gruppen sind das drei
     Reihen (2+2+1), und jede Gruppe hat rund 600 px Breite statt 371. Damit
     passen auch lange Namen wie "VLOG ohne Gentechnik e.V." in eine Zeile. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* sp-8 statt sp-6/sp-7: die Rubriken sollen als Rubriken erkennbar sein, und
     dafuer muss der Abstand ZWISCHEN ihnen deutlich groesser sein als der
     Abstand innerhalb einer Liste (dort sp-3 je Zeile). 64 px gegen 12 px ist
     ein klares Verhaeltnis, 32 px waren es nicht. Gemeldet am 28.08.2026. */
  gap: var(--sp-8);
  align-items: start;
}
.dlsach__titel {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-200);
  font-weight: 600;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- Liste -------------------------------------------------------------- */
/* Zeilen mit Haarlinien, keine Kacheln. Siebzehn Dokumente als Karten waeren
   ein Kachelfeld, in dem man den Namen sucht; eine Liste liest man von oben
   nach unten. Dieselbe Entscheidung wie bei den FAQ-Aufklappern. */
.dlliste {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
/* Nur die einspaltige erste Gruppe braucht eine Breitengrenze. In den
   Sachgruppen gibt die Spalte sie vor. */
/* ZWEISPALTIG WIE DIE ZERTIFIKATE, Wunsch von Thorsten am 28.08.2026. Die
   Liste selbst wird zum Gitter, die Zeilen laufen von links nach rechts und
   dann in die naechste Reihe - die Lesefolge bleibt also die des Markups.
   Bei drei Dokumenten steht das dritte allein in der zweiten Reihe; dieselbe
   ausgefranste letzte Reihe wie im Zertifikatsgitter. */
/* UEBERALL ZWEISPALTIG, NICHT NACH FARBE (25.09.2026). Die Regel hing bis
   dahin an .dlgruppe--grau: graue Bahnen zweispaltig, weisse einspaltig, und
   Untergruppen auf Grau ergaben zwei mal zwei = vier Spalten. Auf /downloads/
   fiel das nicht auf, weil dort jede Gruppe zufaellig "ihre" Farbe hatte; auf
   /gs1-packshots/ mit sechs wechselnden Gruppen schon. Thorsten: "ueberall
   2-spaltig". Jetzt entscheidet der Aufbau: eine flache Liste hat zwei
   Spalten, in Untergruppen (die selbst zu zweit nebeneinander stehen) hat
   jede Liste eine. */
.dlliste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--sp-8);
  border-top: none;
}
.dlliste li { border-top: 1px solid var(--line); }
.dlliste li { border-bottom: 1px solid var(--line); }
.dlsach .dlliste {
  display: block;
  border-top: 1px solid var(--line);
}
.dlsach .dlliste li { border-top: none; }
.dldok {
  display: grid;
  /* Drei Spalten: Dateityp, Text, Download-Zeichen. Der TYP STEHT VORN, weil er
     sagt, was man bekommt, bevor man klickt - und weil eine Spalte am
     Zeilenanfang eine Scankante ergibt. Aus der Metazeile ist er dafuer
     entfallen, sie ist damit kuerzer: "108 KB" statt "PDF · 108 KB".
     Heute sind alle siebzehn Dateien PDF. Die Spalte lohnt trotzdem: im Theme
     kommt der Typ aus dem Medienobjekt, und sobald eine DOCX oder ZIP dazu
     kommt, sieht man den Unterschied an der Stelle, an der man ihn sucht. */
  /* ERSTE SPALTE AUS DEM TOKEN plus dem Abstand, den .dldok__typ als
     padding-right traegt. Vorher standen 2.75rem hier und 2.25rem an der
     Plakette - zwei Werte, die zusammenpassen MUESSEN, aber unabhaengig
     voneinander waren. Gemessen: die Spalte liess 32 px Inhalt frei, und
     max-width:100% aus base.css hat die Plakette still darauf beschnitten.
     Sie war also nie so gross, wie ihre Regel sagte. */
  grid-template-columns: calc(var(--zeichen-xl) + var(--sp-3)) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  /* sp-3 statt sp-4: bei siebzehn Zeilen sind 8 px je Zeile 136 px Hoehe. */
  padding: var(--sp-3) 0;
  transition: color var(--dur-hover) var(--ease-hover);
}
.dldok:hover { color: var(--toem-gold); }
/* DAS DATEIZEICHEN AM ZEILENANFANG. Erste Fassung stand hier als Wort "PDF" -
   Wunsch von Thorsten war ein Icon. Es ist dasselbe Blatt mit Eselsohr, das die
   B2B-Karte "Datenblaetter" auf der Startseite benutzt; damit spricht die
   Website eine Sprache.

   DER TYP BLEIBT ALS TEXT, nur unsichtbar (.visually-hidden im Markup): ein
   Icon allein sagt "Datei", nicht "PDF". Vorher stand der Typ in der
   Metazeile und wurde vorgelesen - diese Information darf nicht verloren
   gehen, nur weil sie optisch zum Bild wird.
   Beim naechsten Dateityp tauscht die Vorlage Glyph UND Text; beides kommt im
   Theme aus dem Medienobjekt. */
.dldok__typ {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: var(--sp-3);
  color: var(--text-muted);
}
/* 2,25rem statt 1,375: die Buchstaben im Blatt muessen lesbar sein. Bei 22 px
   Zeichenhoehe waeren sie fuenf Pixel hoch. Bei 36 px sind es gemessen neun -
   das traegt. Die Zeile ist 73 px hoch, das Zeichen passt. */
.dldok__typ svg { width: var(--zeichen-xl); height: var(--zeichen-xl); flex: none; }
/* Das gefuellte Feld traegt MARKENBLAU mit weisser Schrift - dieselbe Paarung
   wie die aktive Filterpille. Die ueblichen Vorlagen zeigen es rot; Rot ist
   keine Farbe dieses Systems, und siebzehn rote Marken wuerden die Seite
   dominieren. Das Feld faerbt sich beim Hover NICHT mit: weisse Schrift auf
   Gold haelt 1.79:1. Die Reaktion traegt das Blatt ueber currentColor.
   Die Schriftgroesse steht in Nutzereinheiten des viewBox (24 x 24) und
   skaliert damit mit dem Zeichen. */
.dldok__typ svg .dlblatt__feld { fill: var(--toem-blau); }
.dldok__typ svg .dlblatt__typ {
  font-family: var(--font-body);
  font-size: 6.4px;
  font-weight: 700;
  letter-spacing: -0.02em;
  fill: var(--text-on-dark);
}
.dldok:hover .dldok__typ { color: var(--toem-gold); }

/* min-width: 0 REICHT NICHT. Es erlaubt dem Kasten, schmaler als sein Inhalt
   zu werden - die Spur DARIN richtet sich aber weiter nach der kleinsten
   unteilbaren Breite des Textes. GEMESSEN bei 320 px blieben Name und
   Metazeile bei 167 px in einer 144-px-Zelle, obwohl der Kasten 144 war.
   Erst grid-template-columns: minmax(0, 1fr) bindet die Spur an die Zelle;
   dann greift das overflow-wrap am Namen und der Text bricht. */
.dldok__text {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-1);
  min-width: 0;
}
.dldok__name {
  font-size: var(--fs-300);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: currentColor;
  /* DOKUMENTNAMEN SIND NICHT VERHANDELBAR. Sie kommen aus der Mediathek und
     koennen alles sein - GEMESSEN bei 320 px liefen "Einkaufsbedingungen
     Raps konv." 13 px und "TÖM Verhaltenskodex/Code of Conduct" 23 px aus
     ihrer 144 px breiten Spalte, quer ueber die Dateigroesse daneben.
     hyphens trennt, was sich trennen laesst; overflow-wrap faengt den Rest
     (lange Namen ohne Trennstelle, Adressen, Kennungen). */
  hyphens: auto;
  overflow-wrap: break-word;
}
/* Typ, Groesse, Gueltigkeit. Der Trennpunkt kommt aus dem CSS, damit ein
   Screenreader nicht "PDF Punkt 269 KB" liest. */
.dldok__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-3);
  font-size: var(--fs-200);
  color: var(--text-muted);
}
.dldok__meta i {
  width: 3px; height: 3px;
  flex: none;
  border-radius: 50%;
  background: var(--c-grau-300);
}
/* LAEUFT BALD AB: ausgezeichnet ueber SCHRIFTDICKE UND WORTLAUT, nicht ueber
   Farbe. Im Farbsystem gibt es keine Warnfarbe, und eine zu erfinden waere
   eine Markenentscheidung. Ausserdem darf eine Warnung ohnehin nicht allein an
   der Farbe haengen - der Text sagt es selbst ("laeuft in 13 Tagen ab").
   Der Ton ist --text-body statt --text-muted: dunkler als die uebrigen
   Angaben, ohne eine neue Farbe zu brauchen. */
.dldok__frist {
  font-weight: 600;
  color: var(--text-body);
}
/* Ohne hinterlegte Gueltigkeit. Steht ausdruecklich da, weil eine leere Stelle
   aussieht, als liefe das Zertifikat nie ab. */
.dldok__ohne { font-style: italic; }
.dldok__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  color: var(--toem-blau);
}
.dldok:hover .dldok__icon { color: var(--toem-gold); }
.dldok__icon svg { width: var(--zeichen-klein); height: var(--zeichen-klein); }

/* --- Hinweis ------------------------------------------------------------ */
.dlhinweis {
  max-width: 46rem;
  margin: var(--sp-6) 0 0;
  font-size: var(--fs-200);
  line-height: var(--lh-body);
  color: var(--text-muted);
}
/* Der Link im Hinweis war nicht als Link ausgezeichnet: er erbte die
   Fliesstextfarbe und lief auf Gewicht 400 ohne Hover. Gemeldet am 28.08.2026.
   Nach der Projektregel werden Textlinks ueber SCHRIFTDICKE und FARBE
   gekennzeichnet, nicht ueber eine Linie - 600 gegen 400 im Fliesstext,
   Markenblau als Farbe, Gold beim Hover. */
.dlhinweis a {
  color: var(--toem-blau);
  font-weight: 600;
  transition: color var(--dur) var(--ease);
}
.dlhinweis a:hover,
.dlhinweis a:focus-visible { color: var(--toem-gold); }

/* EINSPALTIG AB HIER. GEMESSEN: die zweispaltige graue Gruppe lief bei
   360 px um 85 px und bei 414 px um 58 px aus dem Fenster. Ab 560 px passt
   sie; 38rem (608 px) laesst Reserve. Der Selektor traegt .dlgruppe--grau
   mit, sonst gewinnt die Grundregel mit ihrer hoeheren Spezifitaet. */
@media (max-width: 38rem) {
  .dlliste { grid-template-columns: minmax(0, 1fr); }
  /* ZWEITES zweispaltiges Raster in dieser Datei. Beim ersten Durchgang
     uebersehen: nach dem Umbruch von .dlliste blieben immer noch 38 px
     Ueberhang bei 414 px, und die Kette fuehrte hierher. Die Sachgruppen
     stehen zweispaltig, jede Spalte 155 px, darin ein dreispaltiges
     Dokumentenraster - die Textspalte blieb 19 px breit. */
  .dlsach { grid-template-columns: minmax(0, 1fr); }
}