/* ======================================================================
   Die Hero-Grafik "Fluss": Data Inputs -> CO2-Ledger -> Carbon Metrics
   ----------------------------------------------------------------------
   Drei Spalten, von links nach rechts gelesen und aufgebaut: was ein
   Unternehmen misst, das eine Journal, in das alles gebucht wird, und
   die vier Kennzahlen, die daraus entstehen. Kein Kasten dahinter, kein
   Gruen; die Farbe gehoert allein den vier Ergebnissen.

   Das Ledger ist kein Konto mehr (das T-Konto stand fuer die Bilanz),
   sondern ein Journal wie die Tabelle auf der ICCA-Seite: Zeile fuer
   Zeile eine Buchung, links Debit, rechts Credit.

   Drei Fassungen:
     p1  Haarlinie   -- alle Kaesten und Linien mit derselben feinen Linie
                      (auch Vorschlag 4: dieselbe Grafik, andere Animation)
     p2  Akzent      -- Ledger als Flaeche, Pfeile, Ergebnisse bordeaux gefuellt
     p3  Typografie  -- keine Kaesten; Spaltenkoepfe mit Linie, Ergebnisse
                        als Liste mit bordeauxfarbenem Quadrat
   Die Linien zeichnet uploads/casi-js/casi-herofluss.js.
   ====================================================================== */
.hf-rahmen{container-type:inline-size;width:100%;max-width:720px}
.hf{--hf-t:#0E4D49;--hf-l:#5F7471;--hf-rand:rgba(14,77,73,.24);--hf-strich:#0E4D49;
  --hf-balken:rgba(14,77,73,.26);--hf-a:#8B1538;--hf-block:#EEF2F1;--hf-lage:quer;
  position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr) 40px minmax(0,1.15fr);
  grid-template-rows:auto auto;row-gap:14px;align-items:center;
  font-family:'Mori',system-ui,sans-serif;font-size:15px;line-height:1.3;font-weight:400;
  color:var(--hf-t);text-align:left}
.hf *{box-sizing:border-box}
.hf sub{font-size:.72em;line-height:0;vertical-align:-.25em}
.hf-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hf-svg path{fill:none;stroke:var(--hf-strich);stroke-width:1;stroke-linejoin:round}
.hf-svg .hf-pfeil{stroke-linecap:round}

/* Koepfe ueber den Spalten, auf einer Linie */
.hf-kopf{grid-row:1;align-self:end;font-size:14px;line-height:1.3;color:var(--hf-l)}
.hf-k1{grid-column:1}.hf-k2{grid-column:3}.hf-k3{grid-column:5}

.hf-ein{grid-column:1;grid-row:2;display:grid;gap:12px}
.hf-mitte{grid-column:3;grid-row:2}
.hf-aus{grid-column:5;grid-row:2;display:grid;grid-auto-rows:1fr;gap:10px}

.hf-box{border-radius:8px;padding:12px 14px}
.hf-titel{font-weight:600}
.hf-icon{display:block;width:40px;height:32px;margin-top:10px;color:var(--hf-t)}
.hf .hf-liste{list-style:none;margin:6px 0 0;padding:0;font-size:14px;line-height:1.4;color:var(--hf-l)}
.hf .hf-liste li{margin:0;padding:0;list-style:none}
.hf-st{display:flex;align-items:center}

/* Das Journal: Kopfzeile Debit / Credit, darunter fuenf Buchungen */
.hf-journal{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);
  column-gap:10px;row-gap:10px;align-items:center;margin-top:12px}
.hf-jk{font-size:14px;line-height:1.2;color:var(--hf-l)}
.hf-jlinie{grid-column:1 / -1;height:1px;background:var(--hf-rand);margin:-3px 0 1px}
.hf-j{display:contents}
.hf-t{font-size:14px;line-height:1;color:var(--hf-l)}
.hf-bar{display:block;height:3px;border-radius:2px;width:var(--w,70%);
  background:var(--hf-balken);transform-origin:0 50%}

/* ---------------------------------------------------------- p1 Haarlinie */
.hf--p1{--hf-strich:#C5D4D3}   /* die Linien im Ton der Rahmen -- deckend, damit sich Ueberlagerungen nicht verdunkeln */
.hf--p1 .hf-box{background:#fff;border:1px solid var(--hf-rand)}
.hf--p1 .hf-ledger .hf-titel{text-align:center}
.hf--p1 .hf-st{justify-content:center;text-align:center}

/* ---------------------------------------------------------- p2 Akzent */
.hf--p2{--hf-balken:rgba(14,77,73,.34)}
.hf--p2 .hf-svg path{stroke-width:1.25}
.hf--p2 .hf-in{background:#fff;border:1px solid var(--hf-rand)}
.hf--p2 .hf-ledger{background:var(--hf-block)}
.hf--p2 .hf-ledger .hf-titel{text-align:center}
.hf--p2 .hf-jlinie{background:rgba(14,77,73,.3)}
.hf--p2 .hf-st{background:var(--hf-a);color:#fff;justify-content:center;text-align:center}

/* ---------------------------------------------------------- p3 Typografie */
.hf--p3{--hf-strich:rgba(14,77,73,.5);--hf-balken:rgba(14,77,73,.24);align-items:start}
.hf--p3 .hf-kopf{color:var(--hf-t);font-weight:600;font-size:15px;padding-bottom:9px;
  border-bottom:1px solid var(--hf-t)}
.hf--p3 .hf-box{padding:0;border-radius:0}
.hf--p3 .hf-ein{gap:22px}
.hf--p3 .hf-in:first-child{display:flex;align-items:center;gap:10px}
.hf--p3 .hf-in:first-child .hf-icon{order:-1;margin:0;width:30px;height:24px}
.hf--p3 .hf-journal{margin-top:0}
.hf--p3 .hf-aus{gap:0;grid-auto-rows:auto}
.hf--p3 .hf-st{position:relative;padding:10px 0 10px 18px;border-bottom:1px solid #E1E7E5}
.hf--p3 .hf-st::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;
  margin-top:-3.5px;background:var(--hf-a)}

/* ---------------------------------------------------------- mittlere Breite
   Zwischen 480 und 600 px: engere Luft, das Journal ohne Zeilennummern. */
@container (min-width:480px) and (max-width:599px){
  .hf{grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr) 30px minmax(0,1.15fr)}
  .hf--p1 .hf-box,.hf--p2 .hf-box{padding:10px 12px}
  .hf-journal{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hf-t,.hf-jleer{display:none}
}

/* ---------------------------------------------------------- schmal
   Unter 480 px laeuft der Fluss von oben nach unten: die beiden Eingaben
   nebeneinander, das Ledger mittig darunter, die vier Kennzahlen zu zweit.
   Die Linien laufen dazwischen auf der Mittelachse. */
@container (max-width:479px){
  .hf{--hf-lage:hoch;grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:0;align-items:start}
  .hf-k1,.hf-k2,.hf-k3{grid-column:1;justify-self:start}
  .hf-k1{grid-row:1;margin-bottom:10px}
  .hf-ein{grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:stretch}
  .hf-k2{grid-row:3;margin-top:32px;margin-bottom:12px;justify-self:center;width:min(100%,280px)}
  .hf-mitte{grid-column:1;grid-row:4;justify-self:center;width:min(100%,280px);margin-top:32px}
  .hf-k2 + .hf-mitte{margin-top:0}
  .hf-k3{grid-row:5;margin-top:32px;margin-bottom:12px}
  .hf-aus{grid-column:1;grid-row:6;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px}
  .hf-icon{width:34px;height:27px;margin-top:8px}
  /* p3 bleibt eine Liste: alles untereinander, buendig links; zwischen den
     Abschnitten nur ein kurzer Strich nach unten. */
  .hf--p3 .hf-ein,.hf--p3 .hf-aus{grid-template-columns:minmax(0,1fr);row-gap:16px}
  .hf--p3 .hf-aus{row-gap:0}
  .hf--p3 .hf-kopf,.hf--p3 .hf-mitte{justify-self:stretch;width:auto}
}

/* ======================================================================
   Im Hero: ab 1280 px steht die Grafik rechts neben dem Text, mittig auf
   der Hoehe von Ueberschrift bis Knoepfe. Schmaler steht sie unter den
   Knoepfen: drei Spalten brauchen die Breite, und am Telefon ist die
   Grafik zu hoch, um vor der Ueberschrift zu stehen.
   ====================================================================== */
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf){grid-row:2 / 6;align-self:center}
}
@media (min-width:1101px) and (max-width:1279px){
  .casi-hero.casi-hero-grafik:has(.hf) > .e-con-inner{display:flex;flex-direction:column}
}
@media (max-width:1279px){
  .casi-hero-grafik:has(.hf) > .e-con-inner > .casi-herografik-platz{order:0;margin:56px 0 0;width:100%;align-self:stretch}
}
@media (max-width:760px){
  .casi-hero-grafik:has(.hf) > .e-con-inner > .casi-herografik-platz{margin-top:48px}
}

/* ======================================================================
   Vorschlag 1 im Hero ab 1280 px: die Grafik fuellt das Feld neben dem
   Text genau -- von der Oberkante der Ueberschrift bis zur Unterkante der
   Knoepfe, rechts bis an den Rand des Inhalts. Die Kaesten dehnen sich,
   das Journal verteilt seine Zeilen; die Linien misst das Skript neu.
   ====================================================================== */
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf--p1){grid-row:2 / 6;align-self:stretch}
  .casi-herografik-platz:has(.hf--p1) > .elementor-widget-container,
  .casi-herografik-platz:has(.hf--p1) .elementor-shortcode,
  .casi-herografik-platz .hf-rahmen:has(.hf--p1){height:100%;max-width:none}
  .casi-herografik-platz .hf--p1{height:100%;grid-template-rows:auto minmax(0,1fr);align-items:stretch}
  .casi-herografik-platz .hf--p1 .hf-kopf{align-self:end}
  .casi-herografik-platz .hf--p1 .hf-ein{grid-template-rows:1fr 1fr}
  .casi-herografik-platz .hf--p1 .hf-mitte{display:flex}
  .casi-herografik-platz .hf--p1 .hf-ledger{flex:1;display:flex;flex-direction:column}
  .casi-herografik-platz .hf--p1 .hf-journal{flex:1;grid-template-rows:auto auto repeat(5,minmax(0,1fr))}
}

/* ======================================================================
   Vorschlag 4 (data-anim="kugeln"): die Ebene mit dem Icon und den
   wachsenden Kaesten ueber der Grafik. Bis das Skript loslegt, sind die
   echten Kaesten verborgen und nur das Icon steht da.
   ====================================================================== */
.hf-kugeln{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:2}
.hf-kugeln svg{position:absolute;left:0;top:0;overflow:visible}
.hf-kugeln circle{transform-box:fill-box;transform-origin:center}
/* 2b: die Knotenpunkte fliegen unter Karten und Nabe (die stehen auf Ebene 1) */
.hf-kugeln.hf-kugeln-unten{z-index:0}
.hf-geist{position:absolute;box-sizing:border-box;border:1px solid;border-radius:8px;will-change:width,height,transform}
.hf.hf-wartet .hf-kopf,.hf.hf-wartet .hf-box,.hf.hf-wartet .hf-svg{opacity:0}

/* ======================================================================
   Vorschlag 2: die Nabe. Dasselbe Raster und dieselben Kanten wie
   Vorschlag 1; links vier Eingaenge, rechts vier Kennzahlen, jede Karte
   mit Linienzeichen, in der Mitte das Ledger als Kreis. Die Speichen
   zieht das Skript vom Rand der Karten zum Rand des Kreises.
   ====================================================================== */
.hf--nabe{--hf-strich:#C5D4D3;align-items:stretch}
.hf--nabe .hf-ein,.hf--nabe .hf-aus{display:grid;grid-auto-rows:minmax(0,1fr);gap:10px}
.hf--nabe .hf-box{background:#fff;border:1px solid var(--hf-rand);display:flex;align-items:center;gap:12px;padding:8px 12px;min-height:0}
.hf--nabe .hf-nw{white-space:nowrap}
.hf--nabe .hf-zeichen{flex:none;width:26px;height:26px;fill:none;stroke:var(--hf-t);stroke-width:1.35;stroke-linejoin:round}
.hf--nabe .hf-st .hf-zeichen{stroke:var(--hf-a)}
.hf--nabe .hf-mitte{display:flex;align-items:center;justify-content:center;position:relative;z-index:1}
.hf--nabe .hf-ledger{width:100%;max-width:190px;aspect-ratio:1;border-radius:50%;padding:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.hf--nabe .hf-ledger .hf-titel{font-weight:600}
.hf--nabe .hf-led{width:40%;max-width:60px;aspect-ratio:1;margin-top:12px;fill:none;stroke:var(--hf-t);
  stroke-width:.85;stroke-linecap:round;stroke-linejoin:round}
.hf--nabe .hf-led .vorn{fill:#fff}
.hf--nabe .hf-svg .hf-knoten{fill:var(--hf-t);stroke:none}
.hf--nabe .hf-ein,.hf--nabe .hf-aus{position:relative;z-index:1}
@container (max-width:479px){
  .hf--nabe .hf-ein,.hf--nabe .hf-aus{row-gap:10px}
  .hf--nabe .hf-ledger{max-width:170px}
}
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf--nabe){grid-row:2 / 6;align-self:stretch}
  .casi-herografik-platz:has(.hf--nabe) > .elementor-widget-container,
  .casi-herografik-platz:has(.hf--nabe) .elementor-shortcode,
  .casi-herografik-platz .hf-rahmen:has(.hf--nabe){height:100%;max-width:none}
  .casi-herografik-platz .hf--nabe{height:100%;grid-template-rows:auto minmax(0,1fr)}
  .casi-herografik-platz .hf--nabe .hf-kopf{align-self:end}
}

/* Die Nabe: beide Seiten exakt gleich breit -- beide Spalten aus derselben
   Rechnung, nicht aus Anteilen, die der Browser beim Runden verschieden
   verteilen koennte. Die Mitte behaelt ihre Breite, die Aussenkanten bleiben
   die von Vorschlag 1. */
.hf--nabe{--hf-seite:calc((100% - 80px) * .34127);grid-template-columns:var(--hf-seite) 40px minmax(0,1fr) 40px var(--hf-seite)}
@container (min-width:480px) and (max-width:599px){
  .hf--nabe{--hf-seite:calc((100% - 60px) * .34127);grid-template-columns:var(--hf-seite) 30px minmax(0,1fr) 30px var(--hf-seite)}
}
@container (max-width:479px){
  .hf--nabe{grid-template-columns:minmax(0,1fr)}
}
/* Keine Karte darf ihre Spalte sprengen. "Net CO2-" bleibt zusammen und steht
   in der ersten Zeile; umgebrochen wird nur nach dem Bindestrich. */
@container (min-width:480px){
  .hf--nabe .hf-ein,.hf--nabe .hf-aus{grid-template-columns:minmax(0,1fr)}
}
.hf--nabe .hf-box{min-width:0}

/* ======================================================================
   Vorschlag 3: die Stroeme (Fassung B). Dieselbe Grundflaeche wie 1 und 2 --
   Kopfzeile, drei Spalten, beide Seiten exakt gleich breit. Keine Karten:
   Begriffe mit schmalen Knoten, das Ledger als dunkler Balken, dazwischen die
   Baender (gezogen von uploads/casi-js/casi-herostroeme.js).
   ====================================================================== */
.s3{--t:#0E4D49;--l:#5F7471;--a:#8B1538;--seite:calc((100% - 80px) * .34127);
  position:relative;height:100%;display:grid;
  grid-template-columns:var(--seite) 40px minmax(0,1fr) 40px var(--seite);
  grid-template-rows:auto minmax(0,1fr);row-gap:14px;
  font-family:'Mori',system-ui,sans-serif;font-size:15px;line-height:1.3;font-weight:400;color:var(--t);text-align:left}
.s3 *{box-sizing:border-box}
.s3 sub{font-size:.72em;line-height:0;vertical-align:-.25em}
.s3 .nw{white-space:nowrap}
.s3-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.s3-kopf{grid-row:1;align-self:end;font-size:14px;line-height:1.3;color:var(--l)}
.s3-k1{grid-column:1}.s3-k2{grid-column:3;justify-self:center}.s3-k3{grid-column:5}
.s3-ein,.s3-aus{grid-row:2;display:grid;grid-template-rows:repeat(4,minmax(56px,1fr));grid-template-columns:minmax(0,1fr);
  gap:10px;position:relative;z-index:1}
.s3-ein{grid-column:1}.s3-aus{grid-column:5}
.s3-box{position:relative;display:flex;align-items:center;min-width:0;min-height:0}
.s3-ein .s3-box{justify-content:flex-end;text-align:right;padding-right:16px}
.s3-aus .s3-box{padding-left:16px}
.s3-box .knoten{position:absolute;top:15%;bottom:15%;width:4px;border-radius:2px;background:var(--t)}
.s3-ein .knoten{right:0}
.s3-aus .knoten{left:0;background:var(--a)}
.s3-mitte{grid-column:3;grid-row:2;position:relative;z-index:1;display:flex;justify-content:center}
.s3-led{width:16px;border-radius:3px;background:var(--t);transform-origin:50% 0}
.s3-deck{position:absolute;background:#fff;z-index:2;transform-origin:100% 50%;pointer-events:none}
@container (max-width:479px){
  .s3{--seite:calc((100% - 40px) * .36);grid-template-columns:var(--seite) 20px minmax(0,1fr) 20px var(--seite);font-size:14px}
  .s3-ein .s3-box{padding-right:12px}
  .s3-aus .s3-box{padding-left:12px}
}
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.s3){grid-row:2 / 6;align-self:stretch}
  .casi-herografik-platz:has(.s3) > .elementor-widget-container,
  .casi-herografik-platz:has(.s3) .elementor-shortcode,
  .casi-herografik-platz .hf-rahmen:has(.s3){height:100%;max-width:none}
}
@media (min-width:1101px) and (max-width:1279px){
  .casi-hero.casi-hero-grafik:has(.s3) > .e-con-inner{display:flex;flex-direction:column}
}
@media (max-width:1279px){
  .casi-hero-grafik:has(.s3) > .e-con-inner > .casi-herografik-platz{order:0;margin:56px 0 0;width:100%;align-self:stretch}
}
@media (max-width:760px){
  .casi-hero-grafik:has(.s3) > .e-con-inner > .casi-herografik-platz{margin-top:48px}
}

/* Handy: die Grafik steht ueber dem Textblock -- wie ein Titelbild, bei allen
   Vorschlaegen (1, 1b, 2, 2b, 3). */
@media (max-width:760px){
  .casi-hero-grafik:has(.hf) > .e-con-inner > .casi-herografik-platz,
  .casi-hero-grafik:has(.s3) > .e-con-inner > .casi-herografik-platz{order:-1;margin:0 0 48px}
}

/* ======================================================================
   Vorschlag 4 (zweite Runde, nach Gunther und Christoph): Anordnung wie 1b --
   links drei Eingaenge in Grau, in der Mitte das Ledger dunkelgruen, rechts
   die vier Berichte bordeaux. Ledger und Berichte fuellen sich beim Hover wie
   der Knopf "Get in touch". Die Grafik ist so breit wie der Text links und
   steht rechtsbuendig. Aufbau aus dem C, langsamer.
   Die Fassungen der Vorschauen 4b-4j schalten Klassen hf--f-*.
   ====================================================================== */
.hf--vier{--hf-seite:calc((100% - 80px) * .34127);
  grid-template-columns:var(--hf-seite) 40px minmax(0,1fr) 40px var(--hf-seite);
  grid-template-rows:minmax(0,1fr);align-items:stretch}
.hf--vier .hf-ein,.hf--vier .hf-mitte,.hf--vier .hf-aus{grid-row:1}
.hf--vier .hf-ein{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));gap:12px}
.hf--vier .hf-aus{grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
.hf--vier .hf-mitte{display:grid;grid-template-rows:repeat(3,minmax(0,1fr));row-gap:12px}
.hf--vier .hf-ledger{grid-row:2}
.hf--vier .hf-box{display:flex;align-items:center;justify-content:flex-start;text-align:left;gap:12px;
  padding:8px 12px;min-width:0;min-height:0;color:var(--hf-t);text-decoration:none;
  transition:background-color .2s,color .2s,border-color .2s}
.hf--vier .hf-marke{flex:none;display:flex;align-items:center;justify-content:center;
  transition:background-color .2s,border-color .2s}
.hf--vier .hf-nw{white-space:nowrap}
.hf--vier .hf-zeichen{display:block;width:28px;height:28px;fill:none;stroke:var(--hf-t);stroke-width:1.35;
  stroke-linejoin:round;stroke-linecap:round;transition:stroke .2s}
/* Grau -- Gruen -- Rot */
.hf--vier .hf-ledger{border-color:var(--hf-t)}
.hf--vier .hf-st{border-color:var(--hf-a);color:var(--hf-a)}
.hf--vier .hf-st .hf-zeichen{stroke:var(--hf-a)}
@media (hover:hover){
  .hf--vier .hf-ledger:hover{background:var(--hf-t);color:#fff}
  .hf--vier .hf-st:hover{background:var(--hf-a);color:#fff}
  .hf--vier .hf-ledger:hover .hf-zeichen,.hf--vier .hf-st:hover .hf-zeichen{stroke:#fff}
}
.hf--vier a.hf-box{cursor:pointer}
.hf--vier a.hf-box:focus-visible{outline:2px solid var(--hf-t);outline-offset:2px}
.hf--vier a.hf-st:focus-visible{outline-color:var(--hf-a)}
/* 520 px (neben dem Text): engere Luft, damit das Ledger in einer Zeile bleibt */
@container (min-width:480px) and (max-width:599px){
  .hf--vier{--hf-seite:calc((100% - 52px) * .33);grid-template-columns:var(--hf-seite) 26px minmax(0,1fr) 26px var(--hf-seite)}
  .hf--vier .hf-box{padding:8px 10px;gap:10px}
}
@container (max-width:479px){
  .hf--vier{grid-template-columns:minmax(0,1fr);grid-template-rows:none;align-items:start}
  .hf--vier .hf-ein{grid-row:1;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto;column-gap:10px}
  .hf--vier .hf-ein .hf-box{flex-direction:column;align-items:flex-start;gap:8px;padding:10px}
  .hf--vier .hf-mitte{grid-row:2;display:flex;justify-content:center;width:100%;margin-top:40px}
  .hf--vier .hf-ledger{width:min(100%,220px)}
  .hf--vier .hf-aus{grid-row:3;margin-top:40px;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto;column-gap:28px}
}
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf--vier){justify-self:end;width:100%;max-width:520px}
  .casi-herografik-platz .hf--vier{grid-template-rows:minmax(0,1fr)}
  .casi-herografik-platz .hf--vier .hf-ein{grid-template-rows:repeat(3,minmax(0,1fr))}
  .casi-herografik-platz .hf--vier .hf-mitte{display:grid}
  .casi-herografik-platz .hf--vier .hf-ledger{flex:none;flex-direction:row}
}

/* ---------- 4c symbole: runde Marken statt Kaesten; die Kugeln werden Kreise */
.hf--f-symbole .hf-box{background:none;border:0;border-radius:0;padding:0;gap:10px}
.hf--f-symbole .hf-marke{width:48px;height:48px;border-radius:50%;border:1px solid var(--hf-rand);background:#fff}
.hf--f-symbole .hf-marke .hf-zeichen{width:24px;height:24px}
.hf--f-symbole .hf-in{flex-direction:row-reverse;text-align:right}
.hf--f-symbole .hf-st .hf-marke{border-color:var(--hf-a)}
.hf--f-symbole .hf-ledger{flex-direction:column;justify-content:center;position:relative}
.hf--f-symbole .hf-ledger .hf-marke{width:64px;height:64px;border-color:var(--hf-t)}
.hf--f-symbole .hf-ledger .hf-zeichen{width:30px;height:30px}
.hf--f-symbole .hf-ledger .hf-titel{position:absolute;left:-24px;right:-24px;top:calc(50% + 42px);text-align:center}
@media (hover:hover){
  .hf--f-symbole .hf-ledger:hover,.hf--f-symbole .hf-st:hover{background:none}
  .hf--f-symbole .hf-ledger:hover{color:var(--hf-t)}
  .hf--f-symbole .hf-st:hover{color:var(--hf-a)}
  .hf--f-symbole .hf-ledger:hover .hf-marke{background:var(--hf-t)}
  .hf--f-symbole .hf-st:hover .hf-marke{background:var(--hf-a)}
}
@container (max-width:479px){
  .hf--f-symbole .hf-ein{align-items:stretch}
  .hf--f-symbole .hf-ein .hf-box{flex-direction:column-reverse;justify-content:flex-start;align-items:center;text-align:center;padding:0;gap:10px}
  .hf--f-symbole .hf-ledger{width:auto;flex-direction:row}
  .hf--f-symbole .hf-ledger .hf-titel{left:calc(100% + 12px);right:auto;top:50%;transform:translateY(-50%);white-space:nowrap}
  .hf--f-symbole .hf-aus{row-gap:16px}
  .hf--f-symbole .hf-aus .hf-st:nth-child(odd){flex-direction:row-reverse;text-align:right}
}
@media (min-width:1280px){
  .casi-herografik-platz .hf--vier.hf--f-symbole .hf-ledger{flex-direction:column}
}

/* ---------- 4d symmetrie: vier Eingaenge wie die vier Berichte */
.hf--f-symmetrie .hf-ein{grid-template-rows:repeat(4,minmax(0,1fr));gap:10px}
@media (min-width:1280px){
  .casi-herografik-platz .hf--vier.hf--f-symmetrie .hf-ein{grid-template-rows:repeat(4,minmax(0,1fr))}
}
@container (max-width:479px){
  .hf--f-symmetrie .hf-ein{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto;column-gap:28px;row-gap:10px}
  .hf--f-symmetrie .hf-ein .hf-box{flex-direction:row;align-items:center;gap:12px;padding:8px 12px}
}

/* ---------- 4e dateien: die Zeichen der Berichte in einer Datei */
.hf--f-dateien .hf-st .hf-zeichen{width:30px;height:30px}
.hf--f-dateien .hf-st .innen{transform:translate(6.4px,9.6px) scale(.47)}
.hf--f-dateien .hf-st .innen *{vector-effect:non-scaling-stroke;stroke-width:1.2}

/* ---------- 4f flaechen: gefuellte Kaesten */
.hf--f-flaechen .hf-in{background:#EEF2F1;border-color:#EEF2F1}
.hf--f-flaechen .hf-ledger{background:var(--hf-t);color:#fff}
.hf--f-flaechen .hf-ledger .hf-zeichen{stroke:#fff}
.hf--f-flaechen .hf-st{background:#F6EBEF;border-color:#F6EBEF}
@media (hover:hover){
  .hf--f-flaechen .hf-ledger:hover{background:#fff;color:var(--hf-t)}
  .hf--f-flaechen .hf-ledger:hover .hf-zeichen{stroke:var(--hf-t)}
  .hf--f-flaechen .hf-st:hover{background:var(--hf-a);border-color:var(--hf-a)}
}

/* ---------- 4g pfade: Hover zeigt den Weg -- ein Eingang laeuft durch das Ledger
   in alle Berichte, ein Bericht speist sich aus allen Eingaengen */
.hf--f-pfade .hf-svg path{transition:stroke .2s,opacity .2s}
@media (hover:hover){
  .hf--f-pfade .hf-in:hover{border-color:var(--hf-t)}
  .hf--f-pfade:has(.hf-box:hover) .hf-svg path{opacity:.3}
  .hf--f-pfade:has(.hf-ledger:hover) .hf-svg path,
  .hf--f-pfade:has(.hf-in:hover) .hf-svg path[data-k^="s"],
  .hf--f-pfade:has(.hf-st:hover) .hf-svg path[data-k^="e"]{opacity:1}
  .hf--f-pfade:has(.hf-ledger:hover) .hf-svg path[data-k^="e"],
  .hf--f-pfade:has(.hf-st:hover) .hf-svg path[data-k^="e"]{stroke:var(--hf-t)}
  .hf--f-pfade:has(.hf-ledger:hover) .hf-svg path[data-k^="s"],
  .hf--f-pfade:has(.hf-in:hover) .hf-svg path[data-k^="s"]{stroke:var(--hf-a)}
  .hf--f-pfade:has(.hf-in:nth-child(1):hover) .hf-svg path[data-k="e0"],
  .hf--f-pfade:has(.hf-in:nth-child(2):hover) .hf-svg path[data-k="e1"],
  .hf--f-pfade:has(.hf-in:nth-child(3):hover) .hf-svg path[data-k="e2"],
  .hf--f-pfade:has(.hf-in:nth-child(4):hover) .hf-svg path[data-k="e3"]{opacity:1;stroke:var(--hf-t)}
  .hf--f-pfade:has(.hf-st:nth-child(1):hover) .hf-svg path[data-k="s0"],
  .hf--f-pfade:has(.hf-st:nth-child(2):hover) .hf-svg path[data-k="s1"],
  .hf--f-pfade:has(.hf-st:nth-child(3):hover) .hf-svg path[data-k="s2"],
  .hf--f-pfade:has(.hf-st:nth-child(4):hover) .hf-svg path[data-k="s3"]{opacity:1;stroke:var(--hf-a)}
}

/* ---------- 4i kompakt: kleinere Schrift (14 px) und Zeichen, nur so hoch wie noetig,
   mittig neben dem Text */
.hf--f-kompakt{font-size:14px}
.hf--f-kompakt .hf-box{padding:6px 10px;gap:8px;min-height:44px}
.hf--f-kompakt .hf-zeichen{width:24px;height:24px}
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf--f-kompakt){align-self:center}
  .casi-herografik-platz:has(.hf--f-kompakt) > .elementor-widget-container,
  .casi-herografik-platz:has(.hf--f-kompakt) .elementor-shortcode,
  .casi-herografik-platz .hf-rahmen:has(.hf--f-kompakt),
  .casi-herografik-platz .hf--vier.hf--f-kompakt{height:auto}
}

/* ---------- 4j linienfarbe: hinein gruen, hinaus bordeaux (deckend, ohne Verdunkeln) */
.hf--f-linienfarbe .hf-svg path[data-k^="e"]{stroke:#93AFAD}
.hf--f-linienfarbe .hf-svg path[data-k^="s"]{stroke:#CB96A6}

/* ======================================================================
   Vorschlag 5 (5a-5c): 4h in der Groesse, Schrift und Zeichen wie 4a,
   Zeichen aus 4a mit dem Flow-Zeichen aus 4g, Pfade beim Hover wie 4f.
   In Ruhe hell, beim Hover dunkel.
   5a  Ledger weiss mit Rand, beim Hover gruen
   5b  Ledger hell gruen getoent, beim Hover gruen
   5c  Ledger immer gruen -- der dunkle Anker in der Mitte
   ====================================================================== */

/* ---------- knapp: nur so hoch wie noetig, mittig neben dem Text (wie 4h);
   Schrift 15 px und Zeichen 28 px bleiben. Damit die Grafik trotzdem so gross
   wird wie 4h (520 x 304 px), sitzen die Kaesten enger: Innenabstand und
   Zeilenabstand wie in 4h bzw. etwas knapper. */
.hf--f-knapp .hf-box{padding:6px 10px;gap:8px;min-height:44px;line-height:1.2}
@media (min-width:1280px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hf--f-knapp){align-self:center}
  .casi-herografik-platz:has(.hf--f-knapp) > .elementor-widget-container,
  .casi-herografik-platz:has(.hf--f-knapp) .elementor-shortcode,
  .casi-herografik-platz .hf-rahmen:has(.hf--f-knapp),
  .casi-herografik-platz .hf--vier.hf--f-knapp{height:auto}
  .casi-herografik-platz .hf--vier.hf--f-knapp{min-height:304px}
}

/* ---------- hell: Linien hinein hellgruen, hinaus hellrot; Berichte rosa getoent.
   Beim Hover werden der Weg und der Kasten dunkel. */
.hf--f-hell .hf-svg path{transition:stroke .2s,opacity .2s}
.hf--f-hell .hf-svg path[data-k^="e"]{stroke:#93AFAD}
.hf--f-hell .hf-svg path[data-k^="s"]{stroke:#CB96A6}
.hf--f-hell .hf-st{background:#F6EBEF;border-color:#F6EBEF}
@media (hover:hover){
  .hf--f-hell .hf-in:hover{background:#EEF2F1;border-color:#EEF2F1}
  .hf--f-hell .hf-st:hover{background:var(--hf-a);border-color:var(--hf-a);color:#fff}
  .hf--f-hell .hf-ledger:hover{background:var(--hf-t);border-color:var(--hf-t);color:#fff}
  .hf--f-hell .hf-ledger:hover .hf-zeichen,.hf--f-hell .hf-st:hover .hf-zeichen{stroke:#fff}
}

/* ---------- 5b ledger-hell: das Ledger im Grau der Seite (--block, wie die Felder
   und Karten und der Hover der Eingaenge) -- keine eigene Farbe */
.hf--f-ledger-hell .hf-ledger{background:var(--block);border-color:var(--block)}

/* ---------- 5c ledger-anker: das Ledger immer gruen gefuellt */
.hf--f-ledger-anker .hf-ledger{background:var(--hf-t);border-color:var(--hf-t);color:#fff}
.hf--f-ledger-anker .hf-ledger .hf-zeichen{stroke:#fff}