/* =============================================================================
   Dyck Food GmbH — fluss.css
   Das Absatzwege-Diagramm auf index.html: zwei Etikettenspalten unter einem
   gemeinsamen Kopf, verbunden durch die gruene Schiene. Rein statisch, kein
   Skript; alle Werte kommen aus den Tokens in site.css.
   ========================================================================== */

.fluss { margin: 0; display: grid; gap: var(--f4); }

/* --- Ursprung: der gemeinsame Kopf beider Wege --------------------------- */
.fluss-ursprung {
  display: grid; gap: var(--f1); justify-items: center; text-align: center;
  padding: var(--f3) var(--f4);
  border-radius: var(--r-2);
  background: var(--petrol); color: var(--text-invers);
  box-shadow: var(--hebung-2);
}
/* site.css faerbt h3 mit --text-ueber = derselbe Petrolton wie der Grund (1,00:1). */
.fluss-ursprung h3 {
  margin: 0; font-size: var(--t-2);
  font-variation-settings: "wght" 660, "wdth" var(--wdth-schmal);
  color: var(--text-invers);
}
.fluss-ursprung p { margin: 0; max-width: 48ch; font-size: var(--t-klein); color: #EAF3EC; }

/* --- Die beiden Bahnen --------------------------------------------------- */
.fluss-bahnen { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--f4); }
@media (min-width: 48em) { .fluss-bahnen { grid-template-columns: 1fr 1fr; } }
.fluss-bahnen > li { margin: 0; }

.fluss-bahn {
  height: 100%; display: grid; gap: var(--f2); align-content: start;
  padding: var(--f3);
  border-radius: var(--r-2);
  background: var(--grund-0);
  box-shadow: var(--kante-hair), var(--hebung-1);
}
.fluss-bahn-titel {
  margin: 0; font-size: var(--t-1);
  font-variation-settings: "wght" 640, "wdth" 88;
  color: var(--text-ueber);
}
.fluss-bahn-titel .fluss-etikett {
  display: block;
  font: 700 var(--t-kicker)/1.4 var(--font-body);
  font-variation-settings: "wght" 700, "wdth" var(--wdth-etikett);
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--text-gedaempft);
}

/* Die Kette: Schiene zwischen den Knoten (nicht unter dem letzten), das
   Segment vor der Endstation laeuft aus. */
.fluss-kette { list-style: none; margin: 0; padding: 0; position: relative; display: grid; }
.fluss-kette > li { margin: 0; position: relative; padding-left: 2rem; padding-block: var(--f1); }
.fluss-kette > li:not(:last-child)::after {
  content: ""; position: absolute; left: .5rem; top: 1.8rem; bottom: -1.4rem; width: 2px;
  border-radius: var(--r-pill); background: var(--gruen);
}
.fluss-kette > li:nth-last-child(2)::after { background: linear-gradient(var(--gruen), var(--rand-dekor)); }
/* Der Knotenpunkt auf der Schiene */
.fluss-kette > li::before {
  content: ""; position: absolute; left: .125rem; top: 1.05rem; width: .75rem; height: .75rem;
  border-radius: 50%; background: var(--gruen); box-shadow: 0 0 0 4px var(--grund-0);
}

.fluss-knoten {
  display: block; text-align: left; padding: .45rem .75rem; margin-left: -.75rem;
  color: var(--text-ueber);
  font: 600 var(--t-0)/1.35 var(--font-body);
  font-variation-settings: "wght" 640, "wdth" 90;
}
.fluss-ziel { color: var(--tinte); }   /* das Ende einer Kette hat Gewicht */
.fluss-bahn-fuss { margin: var(--f2) 0 0; }

/* --- Randbedingungen ----------------------------------------------------- */
@media (forced-colors: active) {
  .fluss-ursprung, .fluss-bahn { border: 1px solid CanvasText; }
  .fluss-kette > li:not(:last-child)::after,
  .fluss-kette > li::before { forced-color-adjust: none; background: CanvasText; }
}
@media print {
  .fluss-ursprung, .fluss-bahn { box-shadow: none; border: 1px solid #00343B; }
}