/* ====================================================================
   Die Hero-Grafik: das Ledger und die vier Abschluesse
   Dieselbe Sprache wie die Systemgrafik auf der ICCA-Seite, aus der sie
   stammt: Kaesten mit dem kleinen Radius, rechtwinklige Linien in einem
   Pixel, Mori in 15 px, mittig gesetzt.

   Die Richtung ist die der Rechnung: aus dem Ledger werden die vier
   Abschluesse abgeleitet. Jeder Aufbau laeuft darum vom Ledger weg und
   spielt einmal, beim Laden. Danach steht die Grafik still.

   v0  Haarlinie ohne Farbe (erste Fassung, bleibt zum Vergleich)
   v1-v3 stehen auf einer grossen Flaeche wie der ICCA-Block der
   Systemgrafik, mit zweizeiligen Namen wie dort:
   v1  getrennte Felder auf Gruen, das Ledger in Tinte
   v2  die Abschluesse als eine geteilte Spalte, auf Tinte
   v3  getrennte Felder auf Grau, das Ledger gruen, Haarlinien
   ==================================================================== */

/* ---------------------------------------------------------- Anordnung */
.hg-rahmen{container-type:inline-size;width:100%;box-sizing:border-box}
.hg{display:grid;grid-template-columns:minmax(140px,190px) 56px 1px 40px minmax(0,320px);
  grid-template-rows:repeat(4,64px);row-gap:20px;justify-content:center;align-items:center;
  font-family:'Mori',system-ui,sans-serif;font-size:15px;line-height:1.25;font-weight:400;
  color:var(--tinte,#0E4D49)}
.hg sub{font-size:.76em;vertical-align:-.18em;line-height:0}
.hg-ledger,.hg-feld{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  box-sizing:border-box;height:64px;padding:10px 14px;background:#fff;
  border:1px solid var(--strich,#0E4D49);border-radius:var(--rad-klein,8px)}
.hg-ledger{grid-column:1;grid-row:1 / 5}
.hg-stamm{grid-column:2;grid-row:1 / 5;height:0;border-top:1px solid var(--strich,#0E4D49);transform-origin:left center}
.hg-bus{grid-column:3;grid-row:1 / 5;align-self:stretch;margin:32px 0;border-left:1px solid var(--strich,#0E4D49);transform-origin:center}
.hg-ast{grid-column:4;height:0;border-top:1px solid var(--strich,#0E4D49);transform-origin:left center}
.hg-feld{grid-column:5}
.hg-a1,.hg-f1{grid-row:1}
.hg-a2,.hg-f2{grid-row:2}
.hg-a3,.hg-f3{grid-row:3}
.hg-a4,.hg-f4{grid-row:4}

/* Schmal: das Ledger oben, ein Strang links hinunter, die Abschluesse
   zweigen nach rechts ab. Dieselbe Richtung -- vom Ledger weg. */
@container (max-width:400px){
  .hg{grid-template-columns:24px 20px minmax(0,1fr);grid-template-rows:56px repeat(4,56px);
    row-gap:12px;justify-content:stretch}
  .hg-ledger,.hg-feld{height:56px}
  .hg-ledger{grid-column:1 / 4;grid-row:1;justify-self:start;width:min(100%,220px)}
  .hg-stamm{display:none}
  .hg-bus{grid-column:1;grid-row:2 / 6;justify-self:center;margin:-12px 0 28px;transform-origin:top center}
  .hg-ast{grid-column:1 / 3;margin-left:12px}
  .hg-feld{grid-column:3;justify-content:flex-start;text-align:left}
  .hg-a1,.hg-f1{grid-row:2}
  .hg-a2,.hg-f2{grid-row:3}
  .hg-a3,.hg-f3{grid-row:4}
  .hg-a4,.hg-f4{grid-row:5}
}

@keyframes hg-rein{from{opacity:0;transform:translateX(-32px)}to{opacity:1;transform:none}}
@keyframes hg-schub{from{opacity:0;transform:translateX(-56px)}40%{opacity:1}to{opacity:1;transform:none}}
@keyframes hg-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes hg-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes hg-ein{from{opacity:0}to{opacity:1}}
@keyframes hg-auf{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes hg-vorhang{from{clip-path:inset(0 100% 0 0 round 10px)}to{clip-path:inset(0 0 0 0 round 10px)}}
@keyframes hg-spur{from{clip-path:inset(-2px 100% -2px -2px)}to{clip-path:inset(-2px -2px -2px -2px)}}

/* ------------------------------------------ v0: Haarlinie, Schub */
.hg--v0 .hg-ledger{animation:hg-rein .7s cubic-bezier(.22,.9,.24,1) .1s both}
.hg--v0 .hg-stamm{animation:hg-x .35s cubic-bezier(.4,0,.2,1) .55s both}
.hg--v0 .hg-bus{animation:hg-y .4s cubic-bezier(.4,0,.2,1) .85s both}
.hg--v0 .hg-ast{animation:hg-x .3s cubic-bezier(.4,0,.2,1) both}
.hg--v0 .hg-feld{animation:hg-schub 1s cubic-bezier(.22,.9,.24,1) both}
.hg--v0 .hg-a1{animation-delay:1.15s}.hg--v0 .hg-a2{animation-delay:1.27s}
.hg--v0 .hg-a3{animation-delay:1.39s}.hg--v0 .hg-a4{animation-delay:1.51s}
.hg--v0 .hg-f1{animation-delay:1.25s;animation-duration:.9s}.hg--v0 .hg-f2{animation-delay:1.4s;animation-duration:1s}
.hg--v0 .hg-f3{animation-delay:1.55s;animation-duration:1.1s}.hg--v0 .hg-f4{animation-delay:1.7s;animation-duration:1.2s}

.hg--v0 .hg-br{display:none}

/* ====================================================================
   v1-v3: der ICCA-Block
   Eine grosse Flaeche, in der die Grafik steht -- so liest sie sich als
   Bild und nicht als Reihe von Knoepfen. Die Flaeche reicht auf dem
   Bildschirm von der Oberkante der Ueberschrift bis zur Unterkante der
   Knoepfe (siehe Hero-Anordnung unten).

   Farben als Variablen, damit jede Fassung nur ihre Werte setzt:
     --fl   die grosse Flaeche      --li  Linien und Kontur
     --lg   Ledger, Grund           --lt  Ledger, Schrift
     --fg   Abschluss, Grund        --ft  Abschluss, Schrift
     --tr   Trennlinie in der Spalte (v2)

   Der Aufbau ist fuer alle derselbe und laeuft vom Ledger weg: die
   Flaeche, das Ledger, dann die Linie -- sie beschleunigt aus dem
   Ledger, teilt sich in der Mitte und laeuft in den Aesten aus. Wo sie
   ankommt, zeichnet sie den Rahmen des Abschlusses von links nach; dann
   fuellt er sich, dann steht der Name darin. Die inneren Abschluesse
   erreicht sie zuerst, die aeusseren danach. Einmal, beim Laden.
   ==================================================================== */
@keyframes hg-fuellen{from{background-color:transparent}}
@keyframes hg-kontur{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(-2px -2px -2px -2px)}}

.hg-blockig{--fl:#1A9C7E;--li:#fff;--lg:#fff;--lt:var(--tinte,#0E4D49);--fg:#fff;--ft:var(--tinte,#0E4D49);
  --tr:var(--linie,#E1E7E5);
  background:var(--fl);border-radius:var(--rad,10px);padding:32px 28px;animation:hg-ein .5s ease both}
/* Die Flaeche ist selbst der Behaelter der Abfrage; ihr Polster aendert
   darum eine Medienabfrage, nicht die Behaelterabfrage. */
@media (max-width:760px){.hg-blockig{padding:24px 20px}}
.hg-blockig .hg{grid-template-columns:minmax(118px,150px) minmax(28px,52px) 1px minmax(20px,32px) minmax(180px,250px);
  grid-template-rows:repeat(4,60px);row-gap:12px}
.hg-blockig .hg-ledger,.hg-blockig .hg-feld{height:100%;border:0;padding:8px 12px;line-height:1.25;cursor:default}
.hg-blockig .hg-ledger{height:60px;background:var(--lg);color:var(--lt);animation:hg-ein .4s ease .3s both}
.hg-blockig .hg-stamm,.hg-blockig .hg-ast{border-top-color:var(--li)}
.hg-blockig .hg-bus{border-left-color:var(--li);margin:30px 0}

/* Die Linie: ein Zug in drei Teilen */
.hg-blockig .hg-stamm{animation:hg-x .25s cubic-bezier(.5,0,1,1) .65s both}
.hg-blockig .hg-bus{transform-origin:center;animation:hg-y .3s linear .9s both}
.hg-blockig .hg-ast{animation:hg-x .2s cubic-bezier(0,0,.5,1) 1s both}
.hg-blockig .hg-a1,.hg-blockig .hg-a4{animation-delay:1.2s}

/* Die Abschluesse: Rahmen, Fuellung, Name */
.hg-blockig .hg-feld{background:var(--fg);color:var(--ft);isolation:isolate;
  animation:hg-fuellen .3s ease 1.55s both}
.hg-blockig .hg-feld::before{content:"";position:absolute;inset:0;border:1px solid var(--li);
  border-radius:inherit;pointer-events:none;animation:hg-kontur .5s cubic-bezier(.45,0,.2,1) 1.1s both}
.hg-blockig .hg-feld > span{animation:hg-ein .3s ease 1.7s both}
.hg-blockig .hg-f1,.hg-blockig .hg-f4{animation-delay:1.75s}
.hg-blockig .hg-f1::before,.hg-blockig .hg-f4::before{animation-delay:1.3s}
.hg-blockig .hg-f1 > span,.hg-blockig .hg-f4 > span{animation-delay:1.9s}

/* ------------------------------------------ v1: Felder, das Ledger in Tinte
   Wie in der Systemgrafik, getrennte Felder auf Gruen. Das Ledger traegt
   die Tinte, weil alles aus ihm kommt. */
.hg--v1{--lg:var(--tinte,#0E4D49);--lt:#fff}

/* ------------------------------------------ v2: Spalte auf Tinte
   Die vier Abschluesse stossen aneinander wie die Zeilen eines Kontos.
   Die Flaeche in Tinte, das Ledger im ICCA-Gruen. Die Trennlinien
   kommen mit der Fuellung. */
.hg--v2{--fl:var(--tinte,#0E4D49);--lg:#1A9C7E;--lt:#fff}
.hg--v2 .hg{grid-template-rows:repeat(4,64px);row-gap:0}
.hg--v2 .hg-bus{margin:32px 0}
.hg--v2 .hg-feld{border-radius:0}
.hg--v2 .hg-f1{border-radius:var(--rad-klein,8px) var(--rad-klein,8px) 0 0}
.hg--v2 .hg-f4{border-radius:0 0 var(--rad-klein,8px) var(--rad-klein,8px)}
.hg--v2 .hg-f2::before,.hg--v2 .hg-f3::before,.hg--v2 .hg-f4::before{border-top:0}
.hg--v2 .hg-feld::after{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--tr);
  animation:hg-ein .3s ease 1.55s both}
.hg--v2 .hg-f1::after{display:none}
.hg--v2 .hg-f4::after{animation-delay:1.75s}

/* ------------------------------------------ v3: Felder, hell
   Die Flaeche im Grau der Karten, das Ledger gruen, die Abschluesse weiss
   mit Haarlinie in Tinte -- der Rahmen, den die Linie zeichnet, bleibt
   stehen, wie bei den Normen der Systemgrafik. */
.hg--v3{--fl:var(--block,#EEF2F1);--li:var(--tinte,#0E4D49);--lg:#1A9C7E;--lt:#fff}

/* ------------------------------------------ schmal
   Das Ledger oben, der Strang links hinunter, die Abschluesse zweigen
   nach rechts ab und werden der Reihe nach erreicht. Die Namen laufen
   in einer Zeile. */
@container (max-width:400px){
  .hg-blockig .hg-br{display:none}
  .hg-blockig .hg{grid-template-columns:24px 16px minmax(0,1fr);grid-template-rows:repeat(5,54px);row-gap:10px}
  .hg-blockig .hg-ledger{height:54px;width:min(100%,200px)}
  .hg-blockig .hg-bus{margin:-10px 0 27px;transform-origin:top center;animation:hg-y .45s linear .65s both}
  .hg-blockig .hg-ast{margin-left:12px}
  .hg-blockig .hg-a1{animation-delay:.72s}.hg-blockig .hg-a2{animation-delay:.82s}
  .hg-blockig .hg-a3{animation-delay:.93s}.hg-blockig .hg-a4{animation-delay:1.04s}
  .hg-blockig .hg-f1::before{animation-delay:.85s}.hg-blockig .hg-f2::before{animation-delay:.95s}
  .hg-blockig .hg-f3::before{animation-delay:1.06s}.hg-blockig .hg-f4::before{animation-delay:1.17s}
  .hg-blockig .hg-f1,.hg--v2 .hg-f1::after{animation-delay:1.3s}
  .hg-blockig .hg-f2,.hg--v2 .hg-f2::after{animation-delay:1.4s}
  .hg-blockig .hg-f3,.hg--v2 .hg-f3::after{animation-delay:1.51s}
  .hg-blockig .hg-f4,.hg--v2 .hg-f4::after{animation-delay:1.62s}
  .hg-blockig .hg-f1 > span{animation-delay:1.45s}.hg-blockig .hg-f2 > span{animation-delay:1.55s}
  .hg-blockig .hg-f3 > span{animation-delay:1.66s}.hg-blockig .hg-f4 > span{animation-delay:1.77s}
  .hg--v2 .hg{grid-template-rows:70px repeat(4,56px);row-gap:0}
  .hg--v2 .hg-ledger{align-self:start}
  .hg--v2 .hg-bus{margin:-14px 0 28px}
}

/* ====================================================================
   v4-v6: andere Formen, in den Farben von v3
   Grau die Flaeche, gruen das Ledger, weiss mit Haarlinie die
   Abschluesse. Der Aufbau bleibt der von v3: die Linie laeuft aus dem
   Ledger heraus, und wo sie ankommt, zeichnet sie den Rahmen nach --
   jeweils von der Seite her, an der sie ankommt.

   v4  die Form der Systemgrafik: die vier Abschluesse in einer Reihe,
       darunter das Ledger ueber die mittlere Haelfte. Die Linie steigt
       aus dem Ledger auf und teilt sich zu den vieren.
   v5  Kreuz: das Ledger in der Mitte, die Abschluesse nach allen vier
       Seiten. Die Linien laufen gleichzeitig hinaus.
   v6  Konto: der Baum von v3, das Ledger aber als T-Konto gezeichnet,
       mit + und - wie die Konten in der Bilanzgrafik.

   Am Telefon falls v4 und v5 auf den Baum zurueck: fuer Saeulen und
   Kreuz ist die Flaeche dort zu schmal.
   ==================================================================== */
@keyframes hg-kontur-hoch{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(-2px -2px -2px -2px)}}
@keyframes hg-kontur-runter{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-2px -2px -2px -2px)}}
@keyframes hg-kontur-links{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(-2px -2px -2px -2px)}}

.hg--v4,.hg--v5,.hg--v6{--fl:var(--block,#EEF2F1);--li:var(--tinte,#0E4D49);--lg:#1A9C7E;--lt:#fff}

@container (min-width:401px){
  /* ------------------------------------------ v4: die Form der Systemgrafik */
  .hg--v4 .hg{grid-template-columns:repeat(4,minmax(0,138px));grid-template-rows:minmax(72px,auto) 30px 0 34px 64px;
    column-gap:14px;row-gap:0;justify-content:center}
  .hg--v4 .hg-feld{grid-row:1;padding:10px 8px}
  .hg--v4 .hg-f1,.hg--v4 .hg-a1{grid-column:1}.hg--v4 .hg-f2,.hg--v4 .hg-a2{grid-column:2}
  .hg--v4 .hg-f3,.hg--v4 .hg-a3{grid-column:3}.hg--v4 .hg-f4,.hg--v4 .hg-a4{grid-column:4}
  .hg--v4 .hg-feld::before{animation-name:hg-kontur-hoch}
  .hg--v4 .hg-ast{grid-row:2;width:0;height:auto;justify-self:center;align-self:stretch;margin:0;
    border-top:0;border-left:1px solid var(--li);transform-origin:bottom center;animation-name:hg-y}
  .hg--v4 .hg-bus{grid-row:3;grid-column:1 / 5;height:0;align-self:start;border-left:0;
    border-top:1px solid var(--li);margin:0 calc((100% - 42px) / 8);transform-origin:center;animation-name:hg-x}
  .hg--v4 .hg-stamm{grid-row:4;grid-column:1 / 5;width:0;height:auto;justify-self:center;align-self:stretch;
    border-top:0;border-left:1px solid var(--li);transform-origin:bottom center;animation-name:hg-y}
  .hg--v4 .hg-ledger{grid-row:5;grid-column:2 / 4;height:64px}

  /* ------------------------------------------ v5: Kreuz */
  .hg--v5 .hg{grid-template-columns:minmax(0,170px) 36px minmax(130px,170px) 36px minmax(0,170px);
    grid-template-rows:64px 30px 64px 30px 64px;row-gap:0;column-gap:0;justify-content:center}
  .hg--v5 .hg-stamm,.hg--v5 .hg-bus{display:none}
  .hg--v5 .hg-ledger{grid-row:3;grid-column:3;height:64px}
  .hg--v5 .hg-f1{grid-row:1;grid-column:3}
  .hg--v5 .hg-f2{grid-row:3;grid-column:5}
  .hg--v5 .hg-f3{grid-row:5;grid-column:3}
  .hg--v5 .hg-f4{grid-row:3;grid-column:1}
  .hg--v5 .hg-a1,.hg--v5 .hg-a3{grid-column:3;width:0;height:auto;justify-self:center;align-self:stretch;margin:0;
    border-top:0;border-left:1px solid var(--li);animation-name:hg-y}
  .hg--v5 .hg-a1{grid-row:2;transform-origin:bottom center}
  .hg--v5 .hg-a3{grid-row:4;transform-origin:top center}
  .hg--v5 .hg-a2,.hg--v5 .hg-a4{grid-row:3;margin:0}
  .hg--v5 .hg-a2{grid-column:4;transform-origin:left center}
  .hg--v5 .hg-a4{grid-column:2;transform-origin:right center}
  /* alle vier gleich weit weg, also alle zugleich */
  .hg--v5 .hg-ast{animation-duration:.3s;animation-delay:.7s}
  .hg--v5 .hg-a1,.hg--v5 .hg-a4{animation-delay:.7s}
  .hg--v5 .hg-feld::before,.hg--v5 .hg-f1::before,.hg--v5 .hg-f4::before{animation-delay:.95s}
  .hg--v5 .hg-f1::before{animation-name:hg-kontur-hoch}
  .hg--v5 .hg-f3::before{animation-name:hg-kontur-runter}
  .hg--v5 .hg-f4::before{animation-name:hg-kontur-links}
  .hg--v5 .hg-feld,.hg--v5 .hg-f1,.hg--v5 .hg-f4{animation-delay:1.35s}
  .hg--v5 .hg-feld > span,.hg--v5 .hg-f1 > span,.hg--v5 .hg-f4 > span{animation-delay:1.5s}

  /* ------------------------------------------ v6: Konto, breitere erste Spalte */
  .hg--v6 .hg{grid-template-columns:minmax(150px,176px) minmax(28px,52px) 1px minmax(20px,32px) minmax(180px,250px)}
  .hg--v6 .hg-ledger{height:140px}
}
/* Saeulen und Kreuz werden knapp, bevor sie auf den Baum zurueckfallen */
@container (min-width:401px) and (max-width:480px){
  .hg--v4 .hg-feld,.hg--v5 .hg-feld{font-size:13.5px}
}

/* ------------------------------------------ v6: das Konto im Ledger
   Kopf mit + und -, darunter zwei Seiten mit einigen Buchungen. Das Konto
   zeichnet sich selbst, bevor die Linie es verlaesst. */
.hg--v6 .hg-ledger{align-items:stretch;padding:12px 14px}
.hg-konto{display:flex;flex-direction:column;width:100%}
.hg-kkopf{position:relative;display:flex;align-items:baseline;gap:8px;padding-bottom:8px}
.hg-kkopf i{font-style:normal}
.hg-kkopf span{flex:1;text-align:center}
.hg-kstrich{position:absolute;left:0;right:0;bottom:0;border-top:1px solid currentColor;
  transform-origin:left center;animation:hg-x .25s cubic-bezier(.4,0,.2,1) .4s both}
.hg-kbuch{position:relative;flex:1;display:grid;grid-template-columns:1fr 1fr;column-gap:1px;min-height:0}
.hg-kmitte{position:absolute;left:50%;top:0;bottom:0;border-left:1px solid currentColor;
  transform-origin:top center;animation:hg-y .2s cubic-bezier(.4,0,.2,1) .55s both}
.hg-kbuch > div{display:flex;flex-direction:column;gap:9px;padding:11px 12px 0}
.hg-kbuch b{display:block;height:0;border-top:1px solid rgba(255,255,255,.6);animation:hg-ein .2s ease .62s both}
.hg-kbuch > div:first-of-type b:nth-child(2){width:70%}
.hg-kbuch > div:last-child b:first-child{width:80%}

/* Zwischen 1101 und etwa 1170 px steht der Baum schmal neben dem Text;
   dort muss er in dessen Hoehe passen, das Konto wird flacher. */
@media (min-width:1101px){
  @container (max-width:400px){
    .hg--v6 .hg{grid-template-rows:84px repeat(4,48px)!important;row-gap:8px!important}
    .hg--v6 .hg-ledger{height:84px!important}
    .hg--v6 .hg-bus{margin:-8px 0 24px!important}
    .hg--v6 .hg-kbuch > div{gap:6px!important;padding-top:8px!important}
    .hg--v6 .hg-kbuch b:nth-child(3){display:none}
  }
}
@container (max-width:400px){
  .hg--v6 .hg{grid-template-rows:118px repeat(4,54px)}
  .hg--v6 .hg-ledger{height:118px}
  .hg--v6 .hg-kbuch > div{gap:7px;padding-top:9px}
}

/* ====================================================================
   Mit Skript (casi-herografik.js): der Aufbau als eine Linie
   Das Skript zeichnet Linien und Rahmen als einen Strich in einer SVG
   ueber der Grafik und uebernimmt alle Bewegung. Die Stuecke der
   CSS-Fassung bleiben im Satz -- das Skript misst an ihnen --, sind aber
   unsichtbar, und ihre Animationen ruhen.
   ==================================================================== */
.hg-js,.hg-js *,.hg-js *::before,.hg-js *::after{animation:none!important}
.hg-js .hg-stamm,.hg-js .hg-bus,.hg-js .hg-ast{visibility:hidden}
.hg-js .hg-feld::before,.hg-js .hg-feld::after{display:none}
.hg-js .hg{position:relative}
.hg-svg{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:1}
.hg-svg path{fill:none;stroke:var(--li);stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter}

/* ====================================================================
   v7: das Ledger in der Mitte, die Abschluesse ringsum
   Keine Kaesten: nur die Namen, in Mori, und zwischen Ledger und jedem
   Abschluss eine kurze, frei stehende Speiche. Das Ledger teilt die
   Flaeche in vier Viertel; jeder Abschluss bleibt in seinem Viertel und
   schwirrt darin umher, die Speiche dreht sich mit
   (casi-herografik-kreis.js). Farben von v3: Grau die Flaeche, das Ledger
   im ICCA-Gruen, Linien und Namen in Tinte.
   Ohne Skript steht jeder Name still in der Mitte seines Viertels.
   ==================================================================== */
.hg--v7{--fl:var(--block,#EEF2F1);--li:var(--tinte,#0E4D49)}
.hgo{position:relative;width:100%;height:300px;font-family:'Mori',system-ui,sans-serif;
  font-size:15px;line-height:1.25;font-weight:400;color:var(--tinte,#0E4D49)}
.hgo sub{font-size:.76em;vertical-align:-.18em;line-height:0}
.hgo-mitte,.hgo-name{position:absolute;left:50%;top:50%;white-space:nowrap;text-align:center;will-change:transform}
.hgo-mitte{transform:translate(-50%,-50%);font-weight:600;color:#13917C}
.hgo-name{transform:translate(-50%,-50%);padding:3px 8px;background:var(--fl,#EEF2F1);border-radius:4px}
/* Der Name liegt ueber den Speichen und deckt sie ab: kreuzt eine Speiche
   einen anderen Namen, laeuft sie hinter ihm durch, nicht ueber die Schrift. */
.hgo-name[data-viertel="lo"]{left:25%;top:25%}
.hgo-name[data-viertel="ro"]{left:75%;top:25%}
.hgo-name[data-viertel="lu"]{left:25%;top:75%}
.hgo-name[data-viertel="ru"]{left:75%;top:75%}
.hgo-js .hgo-name[data-viertel]{left:50%;top:50%}
.hgo-svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hgo-svg line{stroke:var(--li,#0E4D49);stroke-width:1px;stroke-linecap:butt}
.hgo-br2{display:none}
@container (max-width:400px){
  .hgo{height:320px;font-size:14px}
  .hgo-name{padding:3px 6px}
  .hgo-br2{display:inline}
}

/* Am Telefon beginnt der Strang oben: der Bus waechst von dort. */
@container (max-width:400px){
  .hg-bus{transform-origin:top center}
}
@media (prefers-reduced-motion:reduce){
  .hg-rahmen,.hg > *,.hg > *::before,.hg > * > span{animation:none!important}
}

/* ====================================================================
   Der Hero mit Grafik: der Text als Block links, die Grafik rechts,
   dazwischen Luft. Die Textzeilen behalten ihre Abstaende; die beiden
   leeren Zeilen oben und unten stellen den Block mittig neben die
   Grafik, statt ihn auseinanderzuziehen.
   ==================================================================== */
@media (min-width:1101px){
  .casi-hero.casi-hero-grafik > .e-con-inner{display:grid;
    grid-template-columns:minmax(0,520px) minmax(0,1fr);
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:clamp(48px,8vw,124px);align-items:start}
  .casi-hero-grafik > .e-con-inner > .elementor-element{grid-column:1}
  .casi-hero-grafik > .e-con-inner > .elementor-element:nth-child(1){grid-row:2}
  .casi-hero-grafik > .e-con-inner > .elementor-element:nth-child(2){grid-row:3}
  .casi-hero-grafik > .e-con-inner > .elementor-element:nth-child(3){grid-row:4}
  .casi-hero-grafik > .e-con-inner > .elementor-element:nth-child(4){grid-row:5}
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz{grid-column:2;grid-row:1 / -1;align-self:center;width:100%}
  /* Die grosse Flaeche steht genau neben dem Textblock: oben mit der
     Ueberschrift, unten mit den Knoepfen. Die Grafik sitzt mittig darin. */
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz:has(.hg-blockig){grid-row:2 / 6;align-self:stretch;
    display:flex;flex-direction:column}
  .casi-herografik-platz:has(.hg-blockig) > *,.casi-herografik-platz .elementor-shortcode:has(.hg-blockig){flex:1;display:flex;flex-direction:column}
  .casi-herografik-platz .hg-blockig{flex:1;display:flex;align-items:center;justify-content:center}
}
/* Sobald Text und Grafik nicht mehr nebeneinander passen, steht die
   Grafik oben, ueber der Ueberschrift -- wie bei Catena-X. Sie ist das
   Erste, was man sieht, und der Text folgt darunter. Buendig an der
   linken Kante, in derselben Flucht wie Ueberschrift und Knoepfe. */
@media (max-width:1100px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz{order:-1;margin:0 0 48px;width:100%}
  .hg{justify-content:start}
}
@media (max-width:760px){
  .casi-hero-grafik > .e-con-inner > .casi-herografik-platz{margin-bottom:40px}
}
.casi-hero.casi-hero-grafik.casi-hero-grafik{padding-top:120px!important;padding-bottom:110px!important}
@media (max-width:760px){
  .casi-hero.casi-hero-grafik.casi-hero-grafik{padding-top:72px!important;padding-bottom:72px!important}
}

/* ====================================================================
   Vorschlag 4: keine Grafik -- der ganze Hero als Ueberschrift, mittig
   Die Zeile ICCA steht als Seitentitel in der obersten der sechs Stufen
   (44 px, am Telefon eine Stufe tiefer: 30 px), die Unterzeile bleibt in
   ihrer Stufe (20 px). Die drei Haken laufen nebeneinander, die Knoepfe
   stehen mittig. Die Luft oben und unten ist knapp gehalten, damit das
   Laufband mit den Logos noch im ersten Bild steht.
   ==================================================================== */
.casi-hero.casi-hero-zentriert.casi-hero-zentriert{padding-top:110px!important;padding-bottom:88px!important}
.casi-hero-zentriert > .e-con-inner{text-align:center;align-items:center;--align-items:center}
.casi-hero-zentriert .elementor-widget-heading.casi-hero-kicker .elementor-heading-title{
  font-size:44px;line-height:1.08;letter-spacing:-.005em;text-align:center;text-wrap:balance}
.casi-hero-zentriert .elementor-widget-heading.casi-hero-titel .elementor-heading-title{
  text-align:center;margin-left:auto;margin-right:auto}
.casi-hero-zentriert .casi-haken{text-align:center}
.casi-hero-zentriert .casi-haken p{display:inline-block;margin:0 14px 8px}
.casi-hero-zentriert > .e-con-inner > .e-con{justify-content:center;--justify-content:center}
@media (max-width:760px){
  .casi-hero.casi-hero-zentriert.casi-hero-zentriert{padding-top:64px!important;padding-bottom:56px!important}
  .casi-hero-zentriert .elementor-widget-heading.casi-hero-kicker .elementor-heading-title{font-size:30px}
  .casi-hero-zentriert .casi-haken p{display:block;margin:0 0 8px;padding-left:0}
  .casi-hero-zentriert .casi-haken p::before{position:static;display:inline-block;margin-right:9px;vertical-align:-1px}
}