/* =======================================================================
   HeiselConnect – Unterseite "Datenanalyse & Forecasting"
   Nur die seiteneigenen Grafiken. Die Huelle steht in page.css, die
   VOR dieser Datei eingebunden wird.

     0. Hero
     1. Leistungen: vier Saeulen, die von links nach rechts wachsen
     2. Diagramme (hell und dunkel)
     3. Breakpoints
   ======================================================================= */

/* ------------------------------------------------- 0. Hero
   Die Ueberschrift steht ohne Sonderbreite: sie ist jetzt kurz genug
   fuer die 20ch aus page.css.

   Das Auswertungsbild hinter dem Text ---------------------------------
   Vier Karten, gestaffelt in die Tiefe gelegt und als Ganzes schraeg
   gestellt. Weil sie unterschiedlich tief liegen, verschieben sie sich
   beim Kippen gegeneinander – die Tiefe entsteht aus der Perspektive,
   nicht aus gemalten Schatten.

   MASSE: die Wurzel traegt eine fluide Schriftgroesse, alle Masse darin
   stehen in em. Damit skaliert das ganze Bild ueber einen einzigen Wert
   und kann nie in sich verrutschen. Entwurfsraster 86 x 62 em.

   --rx/--ry/--spin setzt datenanalyse.js; ohne JavaScript bleiben die
   Anfangswerte stehen und das Bild steht ruhig da. */
.hero-board{
  position: absolute;
  z-index: -2;
  top: 50%;
  right: -3vw;
  translate: 0 -50%;
  font-size: clamp(5.6px, 0.6vw, 9.4px);
  width: 86em;
  height: 62em;
  perspective: 1500px;
  perspective-origin: 62% 42%;
  pointer-events: none;
  /* links ausblenden: dort steht der Text */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%);
  mask-image: linear-gradient(90deg, transparent, #000 30%);
}

.bd-rig{
  --rx: 0;
  --ry: 0;
  --spin: 0;
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  /* Grundstellung: das Bild liegt schraeg im Raum, der Zeiger kippt es
     nur noch um wenige Grad weiter */
  transform:
    rotateX(calc(7deg + var(--rx) * 1deg))
    rotateY(calc(-17deg + var(--ry) * 1deg))
    rotateZ(-1.6deg);
}

/* die Ebene dahinter: ein Raster und ein weicher heller Schein */
.bd-plane{
  position: absolute;
  inset: -6em -4em -4em -6em;
  transform: translateZ(-9em);
  border-radius: 3em;
  background:
    radial-gradient(58% 52% at 66% 30%, rgba(116, 180, 118, 0.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4.4em),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.05) 0 1px, transparent 1px 4.4em);
  -webkit-mask-image: radial-gradient(70% 62% at 55% 45%, #000 40%, transparent 78%);
  mask-image: radial-gradient(70% 62% at 55% 45%, #000 40%, transparent 78%);
}

/* --- die Karte als Bauteil --- */
.bd-card{
  position: absolute;
  margin: 0;
  padding: 1.6em 1.8em 1.8em;
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 1.8em;
  background:
    linear-gradient(160deg, rgba(255,255,255,0.075), rgba(255,255,255,0.022) 46%, rgba(255,255,255,0.05));
  box-shadow: 0 3em 6em rgba(0, 0, 0, 0.5);
  overflow: hidden;
  /* bewusst KEIN backdrop-filter: ein solches Element wird zum eigenen
     Bezugsrahmen und flacht die 3D-Ebene um sich herum ab – die Karten
     lägen dann alle auf derselben Tiefe. */
}
/* eine helle Kante oben – dieselbe Lichtrichtung wie im Verlauf */
.bd-card::before{
  content: "";
  position: absolute;
  left: 1.6em;
  right: 1.6em;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

.bd-card figcaption{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1em;
  font-family: var(--hc-mono);
  font-size: 1.15em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
}
.bd-card figcaption i{ font-style: normal; color: rgba(255, 255, 255, 0.3); }

/* --- Karte 1: Verlauf und Prognose --- */
.bd-trend{
  left: 0;
  top: 9em;
  width: 52em;
  height: 34em;
  transform: translateZ(0);
}
.bd-area{
  position: absolute;
  left: 0;
  right: 0;
  top: 5.4em;
  width: 100%;
  height: 17em;
}
.bd-grid-h{ stroke: rgba(255,255,255,0.06); stroke-width: 1; }
/* der Keil rechts: die Bandbreite waechst mit dem Abstand zum Jetzt */
.bd-fan{ fill: rgba(116, 180, 118, 0.19); stroke: none; }
.bd-fill{ stroke: none; }
/* Das Hintergrundbild zeichnet durchgehend neutral. Gemessen und
   gerechnet trennen sich hier ueber Strich und Helligkeit: gemessen
   gedaempft durchgezogen, gerechnet hell gestrichelt. */
.bd-past{ stroke: rgba(255,255,255,0.5); stroke-width: 2.2; }
.bd-split{ stroke: rgba(255,255,255,0.22); stroke-width: 1; stroke-dasharray: 4 5; }
.bd-fut{
  stroke: var(--hc-green-light);
  stroke-width: 2.2;
  stroke-dasharray: 7 5;
}
.bd-now{
  fill: #dff0df;
  stroke: none;
  /* der Punkt pulst ueber transform statt ueber r: den Radius als
     CSS-Eigenschaft kennt nicht jeder Browser */
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* die Saeulen darunter: sie atmen versetzt, damit die Karte lebt */
.bd-bars{
  position: absolute;
  left: 1.8em;
  right: 1.8em;
  bottom: 1.8em;
  height: 8.6em;
  display: flex;
  align-items: flex-end;
  gap: 0.7em;
}
.bd-bars i{
  flex: 1;
  height: var(--h);
  border-radius: 0.4em 0.4em 0.2em 0.2em;
  background: linear-gradient(180deg, var(--hc-green), rgba(78, 143, 104, 0.35));
  transform-origin: 50% 100%;
}
.bd-bars i:nth-child(n+8){ background: linear-gradient(180deg, var(--hc-green-light), rgba(116, 180, 118, 0.4)); }

/* ein heller Streifen wandert ueber die Karte – dasselbe Motiv wie der
   Durchlauf auf der Prozessseite */
.bd-sweep{
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,0.07) 50%, transparent 58%);
  translate: -100% 0;
}

/* --- Karte 2: der Ring --- */
.bd-donut{
  left: 45em;
  top: 0;
  width: 34em;
  height: 34em;
  transform: translateZ(5.5em);
}
.bd-ring{
  position: relative;
  width: 20em;
  height: 20em;
  margin: 1.1em auto 0;
}
.bd-ring svg{ width: 100%; height: 100%; display: block; }
.bd-track{ fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 15; }

/* Die Kreise sind gestrichelt gezeichnet: Umfang 263.9, jedes Stueck
   traegt seinen Anteil als Strichlaenge und faengt dort an, wo das
   vorige aufgehoert hat. Ein Rest von rund 2 laesst die Fuge stehen. */
.bd-arcs{
  transform-box: view-box;
  transform-origin: 50% 50%;
  /* -90deg: der erste Anteil beginnt oben, nicht rechts */
  transform: rotate(calc(-90deg + var(--spin) * 1deg));
}
.bd-arc{
  fill: none;
  stroke-width: 15;
  stroke-linecap: butt;
}
/* die vier Anteile unterscheiden sich ueber die Helligkeit, nicht ueber
   die Farbe – dieselbe Stufung liegt unten in der Legende */
.bd-arc--1{ stroke: #A2D6A0; stroke-dasharray: 98 263.9;  stroke-dashoffset: 0; }
.bd-arc--2{ stroke: #74B476; stroke-dasharray: 69 263.9;  stroke-dashoffset: -100.3; }
.bd-arc--3{ stroke: #4E8F68; stroke-dasharray: 48 263.9;  stroke-dashoffset: -171.5; }
.bd-arc--4{ stroke: #2D6554; stroke-dasharray: 40 263.9;  stroke-dashoffset: -221.7; }

.bd-ring-mid{
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  margin: 0;
  line-height: 1;
}
.bd-ring-mid b{ font-size: 5.4em; font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.bd-ring-mid i{
  font-style: normal;
  font-family: var(--hc-mono);
  font-size: 1.3em;
  letter-spacing: 0.2em;
  color: var(--hc-green-light);
  margin-top: 0.6em;
}

/* zwei Spalten in Wunschbreite, mittig gesetzt – auf 1fr 1fr stuenden die
   vier Eintraege quer ueber die Karte verteilt */
.bd-legend{
  display: grid;
  grid-template-columns: repeat(2, max-content);
  justify-content: center;
  gap: 0.55em 2em;
  margin-top: 1.5em;
  font-size: 1.15em;
  color: rgba(255, 255, 255, 0.46);
}
.bd-legend li{ display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.bd-legend i{ width: 0.9em; height: 0.9em; border-radius: 0.25em; flex: none; }
.bd-legend li:nth-child(1) i{ background: #A2D6A0; }
.bd-legend li:nth-child(2) i{ background: #74B476; }
.bd-legend li:nth-child(3) i{ background: #4E8F68; }
.bd-legend li:nth-child(4) i{ background: #2D6554; }

/* --- Karte 3: eine Kennzahl mit Balken --- */
.bd-kpi{
  left: 30em;
  top: 40em;
  width: 27em;
  height: 17em;
  transform: translateZ(3em);
}
.bd-kpi-val{
  margin: 0.7em 0 0;
  font-size: 4.4em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  letter-spacing: -0.02em;
}
.bd-kpi-val i{ font-style: normal; font-size: 0.5em; color: var(--hc-green-light); }
.bd-meter{
  margin-top: 1.6em;
  height: 0.7em;
  border-radius: 0.5em;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.bd-meter span{
  display: block;
  width: 78%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--hc-green), var(--hc-green-light));
  transform-origin: 0 50%;
}

/* --- Karte 4: eine kleine Reihe --- */
.bd-mini{
  left: 61em;
  top: 42em;
  width: 25em;
  height: 15em;
  transform: translateZ(8em);
}
.bd-mini svg{
  position: absolute;
  left: 1.8em;
  right: 1.8em;
  bottom: 1.8em;
  width: calc(100% - 3.6em);
  height: 6.6em;
}
.bd-spark{
  fill: none;
  stroke: var(--hc-green-light);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 240;
}

/* --- Bewegung ---------------------------------------------------------
   Alles Wiederkehrende laeuft ueber CSS; JavaScript setzt nur die
   Drehung des Rings und die Neigung. */
@media (prefers-reduced-motion: no-preference){
  /* KEIN transition auf .bd-rig: die Neigung wird in datenanalyse.js
     Bild fuer Bild weich nachgezogen. Ein Uebergang darueber wuerde ihr
     nur hinterherlaufen. */
  .bd-bars i{ animation: bdBreathe 4.6s var(--ease) infinite; }
  .bd-bars i:nth-child(2){ animation-delay: -0.5s; }
  .bd-bars i:nth-child(3){ animation-delay: -1.1s; }
  .bd-bars i:nth-child(4){ animation-delay: -1.7s; }
  .bd-bars i:nth-child(5){ animation-delay: -2.3s; }
  .bd-bars i:nth-child(6){ animation-delay: -2.9s; }
  .bd-bars i:nth-child(7){ animation-delay: -3.4s; }
  .bd-bars i:nth-child(8){ animation-delay: -3.9s; }
  .bd-bars i:nth-child(9){ animation-delay: -4.3s; }
  .bd-bars i:nth-child(10){ animation-delay: -0.8s; }

  .bd-sweep{ animation: bdSweep 9s linear infinite; }
  .bd-now{ animation: bdPulse 2.6s var(--ease) infinite; }
  .bd-fut{ animation: bdDash 3.4s linear infinite; }
  .bd-spark{ animation: bdDraw 7s var(--ease) infinite; }
  .bd-meter span{ animation: bdFill 6.5s var(--ease) infinite; }
}

@keyframes bdBreathe{
  0%, 100% { transform: scaleY(0.9); }
  50%      { transform: scaleY(1); }
}
@keyframes bdSweep{
  0%, 62%  { translate: -100% 0; }
  100%     { translate: 100% 0; }
}
@keyframes bdPulse{
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.45); opacity: 0.6; }
}
@keyframes bdDash{ to { stroke-dashoffset: -24; } }
@keyframes bdDraw{
  0%       { stroke-dashoffset: 240; }
  55%, 100%{ stroke-dashoffset: 0; }
}
@keyframes bdFill{
  0%, 100% { transform: scaleX(0.86); }
  50%      { transform: scaleX(1); }
}

/* ------------------------------------------------- 1. Leistungen
   Die vier Bausteine stehen ab 1000px als Saeulen nebeneinander und
   werden nach rechts hoeher: von der reinen Datenbasis bis zur Planung.
   Der Weg steckt damit in der Form – die Hilfslinien dahinter machen
   daraus ein Diagramm statt einer Kachelreihe.

   Darunter waere die Staffelung nur noch Zufall: dort sind es normale
   Karten mit einer Kante, deren Grauton dieselbe Stufung durchlaeuft. */
.rise{ position: relative; }

/* Grautoene statt Farbe: von hell (Datenbasis) ins dunkle (Planung).
   Die Stufung bleibt, die Farbe traegt sie nicht mehr. */
.rise-col:nth-child(1){ --c: #A2D6A0; --c-deep: #6EAE74; --c-ink: #3f7a4b; }
.rise-col:nth-child(2){ --c: #74B476; --c-deep: #4E8F68; --c-ink: #35704f; }
.rise-col:nth-child(3){ --c: #4E8F68; --c-deep: #337058; --c-ink: #2c6248; }
.rise-col:nth-child(4){ --c: #2D6554; --c-deep: #22514E; --c-ink: #23564a; }

.rise-grid{ display: none; }

.rise-list{ display: grid; gap: 1rem; }

.rise-col{
  position: relative;
  padding: 1.5rem 1.4rem 1.6rem;
  background: #fff;
  border: 1px solid var(--hair);
  border-radius: 18px;
  overflow: hidden;
}
/* die Kante – dieselbe Stufung, die oben die Saeulenhoehe traegt */
.rise-col::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, var(--c), var(--c-deep));
}

.rise-icon{ display: block; color: var(--c-ink); }
.rise-icon svg{ width: 32px; height: 32px; stroke-width: 1.6; }

.rise-col h3{
  margin-top: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
  line-height: 1.2;
}
.rise-col p{
  margin-top: 0.55rem;
  color: var(--muted);
  font-size: 0.99rem;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ------------------------------------------------- 2. Diagramme
   Zwei gezeichnete Auswertungen, beide im festen Entwurfsraster
   640 x 400. Sie sind bewusst keine Bilder: so bleiben Linien auf jedem
   Bildschirm scharf und die Beschriftung durchsuchbar.

   Die Farben stehen an Gruppen (<g>), nicht an jeder Form: fill und
   stroke werden in SVG vererbt. Nur dort, wo Text und Flaeche in
   derselben Gruppe liegen, greifen die Regeln direkt am <text>. */
.chart{
  width: 100%;
  border-radius: var(--radius);
  padding: clamp(0.7rem, 1.6vw, 1.3rem);
}
.chart svg{ width: 100%; height: auto; display: block; }

.chart--light{
  background: #fff;
  border: 1px solid var(--hair);
  box-shadow: var(--shadow);
}
.chart--dark{
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--hair-dark);
}

/* --- gemeinsame Bauteile --- */
.chart-grid{ stroke-width: 1; fill: none; }
.chart-axis{ stroke-width: 1.4; fill: none; }
.chart-split{ stroke-width: 1.4; stroke-dasharray: 4 5; fill: none; }

.chart-label{
  font-family: var(--hc-mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  stroke: none;
}
.chart-note{
  font-family: var(--hc-font);
  font-size: 14px;
  stroke: none;
}

/* --- helles Diagramm: Modelltest und Prognose --- */
.chart--light .chart-grid{ stroke: rgba(34, 34, 35, 0.10); }
.chart--light .chart-axis{ stroke: rgba(34, 34, 35, 0.26); }
.chart--light .chart-split{ stroke: rgba(34, 34, 35, 0.30); }
/* Die Deckkraft ist nicht frei gewaehlt: 0.62 auf Weiss traegt rund
   4,5:1 und bleibt damit auch fuer die 14/15px-Beschriftung lesbar. */
.chart--light .chart-label{ fill: rgba(34, 34, 35, 0.62); }
.chart--light .chart-note{ fill: rgba(34, 34, 35, 0.62); }
/* die beiden Beschriftungen rechts der Trennlinie stehen dunkler, nicht
   farbig – die Betonung kommt aus dem Kontrast (rund 8,3:1) */
.chart--light .chart-label--strong,
.chart--light .chart-note--strong{ fill: var(--green-deep); }

/* Bandbreite und Modellkurve gehoeren zusammen: sie sind die eine Reihe,
   die auf dieser Seite Gruen tragen darf */
.chart-band{ stroke: none; }
.chart-band--wide{ fill: rgba(116, 180, 118, 0.17); }
.chart-band--tight{ fill: rgba(116, 180, 118, 0.28); }

.chart-actual{
  fill: none;
  stroke: #2c2c2e;
  stroke-width: 2.4;
}
.chart-dot{ fill: #2c2c2e; stroke: none; }

/* gestrichelt, weil gerechnet und nicht gemessen */
.chart-model{
  fill: none;
  stroke: var(--green-deep);
  stroke-width: 2.4;
  stroke-dasharray: 8 5;
}

/* --- dunkles Diagramm: Plan, Ist und Forecast --- */
.chart--dark .chart-grid{ stroke: rgba(255, 255, 255, 0.09); }
.chart--dark .chart-axis{ stroke: rgba(255, 255, 255, 0.26); }
.chart--dark .chart-split{ stroke: rgba(255, 255, 255, 0.28); }

/* Plan und Ist unterscheiden sich ueber die Form (offen/gefuellt), nicht
   ueber Farbe. Gruen traegt allein der Forecast samt seiner Spannweite –
   die beiden stehen in der Legende auch als ein Eintrag. */
.bar-plan{ fill: none; stroke: rgba(255, 255, 255, 0.40); stroke-width: 1.6; }
.bar-ist{ fill: rgba(255, 255, 255, 0.78); stroke: none; }
.bar-fc{ fill: rgba(116, 180, 118, 0.30); stroke: var(--green); stroke-width: 1.6; }
.bar-whisker{ fill: none; stroke: var(--hc-green-light); stroke-width: 1.8; }

.chart-month text{
  font-family: var(--hc-mono);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-anchor: middle;
  /* 0.52 statt 0.42: auf der Kartenflaeche des dunklen Abschnitts traegt
     der Ton damit rund 4,9:1 und bleibt fuer 13px Versalien lesbar */
  fill: rgba(255, 255, 255, 0.52);
  stroke: none;
}
.chart-legend text{
  font-family: var(--hc-font);
  font-size: 14px;
  fill: rgba(255, 255, 255, 0.62);
  stroke: none;
}

/* ------------------------------------------------- 3. Breakpoints */

/* Unter 1080px steht der Text nicht mehr neben, sondern auf dem Bild.
   Es rueckt dann nach oben rechts, wird kleiner und tritt deutlich
   zurueck – aus dem Blickfang wird eine Struktur im Hintergrund. */
@media (max-width: 1079.98px){
  .hero-board{
    /* weiter senkrecht mittig: an der Oberkante des Heros wuerde der
       Ring angeschnitten, und ein halber Ring liest sich als Fehler */
    top: 46%;
    right: -14vw;
    translate: 0 -50%;
    font-size: clamp(4.6px, 0.86vw, 7.6px);
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(78% 78% at 72% 30%, #000 30%, transparent 76%);
    mask-image: radial-gradient(78% 78% at 72% 30%, #000 30%, transparent 76%);
  }
  .bd-rig{
    transform:
      rotateX(calc(9deg + var(--rx) * 1deg))
      rotateY(calc(-13deg + var(--ry) * 1deg))
      rotateZ(-1.2deg);
  }
}

/* --------------------------------------------------------------------
   Auf dem Telefon: das Bild hochkant auf eigener Buehne

   Frueher war es hier schlicht ausgeblendet - im Querformat waeren die
   Karten fingernagelgross gewesen. In der hochkanten Bauform des Heros
   (page.css, .hero--portrait) bekommt es dagegen die volle Breite und
   fast die ganze Buehnenhoehe. Dafuer sind die vier Karten neu gesetzt:
   der Verlauf oben ueber die ganze Breite, darunter Ring und die beiden
   Kennzahlen - ein Entwurfsraster von 44 x 53 em statt 86 x 62 em.

   Die Neigung im Raum bleibt, faellt aber flacher aus: bei 17 Grad
   Drehung wuerde die rechte Kartenspalte auf so schmaler Flaeche aus
   dem Bild laufen.
   -------------------------------------------------------------------- */
@media (max-width: 719.98px){
  .hero--portrait .hero-board{
    /* Position, Groesse und Fluss setzt page.css (die Buehne ist dort ein
       Flex-Element). Hier steht nur, wie das Bild darin sitzt. */
    display: grid;
    place-items: center;
    overflow: hidden;
    opacity: 0.62;
    perspective: 900px;
    perspective-origin: 50% 44%;
    /* Ein einziger Wert traegt das ganze Bild (Entwurfsraster 44 x 53 em).
       Er richtet sich nach dem knapperen von beidem: der Bildschirmbreite
       oder der geschaetzten Buehnenhoehe aus page.css. Die Schaetzung ist
       bewusst knapp - lieber etwas kleiner als angeschnitten. */
    font-size: clamp(4px, min(calc((100vw - 40px) / 44), calc(var(--hero-stage) / 56)), 11px);
  }

  .hero--portrait .bd-rig{
    position: relative;
    inset: auto;
    width: 44em;
    height: 53em;
    transform:
      rotateX(calc(6deg + var(--rx) * 0.6deg))
      rotateY(calc(-6deg + var(--ry) * 0.6deg))
      rotateZ(-0.8deg);
  }

  .hero--portrait .bd-plane{ inset: -3em -2.5em; border-radius: 2em; }

  .hero--portrait .bd-card{ padding: 1.3em 1.5em 1.5em; border-radius: 1.5em; }

  /* Verlauf und Prognose: oben ueber die ganze Breite */
  .hero--portrait .bd-trend{
    left: 0; top: 0; width: 44em; height: 26em;
    transform: translateZ(0);
  }
  .hero--portrait .bd-area{ top: 4.6em; height: 12.4em; }
  .hero--portrait .bd-bars{ left: 1.5em; right: 1.5em; bottom: 1.5em; height: 6em; gap: 0.5em; }

  /* der Ring: darunter links, kleiner - die Legende bleibt lesbar */
  .hero--portrait .bd-donut{
    left: 0; top: 29em; width: 24em; height: 24em;
    transform: translateZ(2em);
  }
  .hero--portrait .bd-ring{ width: 13.5em; height: 13.5em; margin-top: 0.8em; }

  /* die beiden Kennzahlen: rechts daneben, uebereinander */
  .hero--portrait .bd-kpi{
    left: 26em; top: 29em; width: 18em; height: 11em;
    transform: translateZ(1.2em);
  }
  .hero--portrait .bd-kpi-val{ margin-top: 0.5em; font-size: 3.4em; }
  .hero--portrait .bd-meter{ margin-top: 1em; }

  .hero--portrait .bd-mini{
    left: 26em; top: 42em; width: 18em; height: 11em;
    transform: translateZ(2.6em);
  }
  .hero--portrait .bd-mini svg{ left: 1.5em; right: 1.5em; bottom: 1.5em; width: calc(100% - 3em); height: 5em; }
}

/* Auf der Buehne laeuft alles Wiederkehrende langsamer: das Bild steht
   dort gross und ungedimmt im Blick, in Desktop-Tempo waere es unruhig. */
@media (max-width: 719.98px) and (prefers-reduced-motion: no-preference){
  .hero--portrait .bd-bars i{ animation-duration: 7s; }
  .hero--portrait .bd-sweep{ animation-duration: 14s; }
  .hero--portrait .bd-now{ animation-duration: 4s; }
  .hero--portrait .bd-fut{ animation-duration: 5.4s; }
  .hero--portrait .bd-spark{ animation-duration: 11s; }
  .hero--portrait .bd-meter span{ animation-duration: 10s; }
}

/* Ohne die hochkante Bauform traegt das Bild auf dem Telefon nichts bei:
   die Karten waeren fingernagelgross und kosten nur Rechenzeit. */
@media (max-width: 700px){
  .hero:not(.hero--portrait) .hero-board{ display: none; }
}


@media (min-width: 1000px){
  /* Ab hier ist genug Breite da, dass die Beschriftung in die kuerzeste
     Saeule passt – erst dann traegt die Staffelung. Die Hoehen sind
     Anteile von --rise-h; die letzte Saeule gibt die Hoehe des Kastens
     vor, die Grundlinie liegt deshalb immer exakt an ihrem Fuss. */
  .rise{ --rise-h: clamp(340px, 30vw, 440px); }

  .rise-grid{
    display: block;
    position: absolute;
    inset: 0;
    pointer-events: none;
  }
  .rise-grid i{
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--hair);
  }
  .rise-grid i:nth-child(1){ top: 0; }
  .rise-grid i:nth-child(2){ top: 33.33%; }
  .rise-grid i:nth-child(3){ top: 66.66%; }
  .rise-grid i:nth-child(4){ bottom: 0; height: 2px; background: rgba(34, 34, 35, 0.26); }

  .rise-list{
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
    gap: clamp(0.9rem, 1.4vw, 1.5rem);
  }

  .rise-col{
    min-height: calc(var(--rise-h) * var(--h));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    border: 0;
    border-radius: 20px 20px 0 0;
    padding: 1.7rem 1.5rem 1.8rem;
    background: linear-gradient(180deg, #fafbfa, #fff 55%);
    box-shadow: 0 18px 34px rgba(20, 26, 21, 0.09), 0 1px 0 var(--hair) inset;
  }
  /* die Kante legt sich als Kappe oben auf die Saeule */
  .rise-col::before{
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    width: auto;
    height: 5px;
    background: linear-gradient(90deg, var(--c), var(--c-deep));
  }

  .rise-col:nth-child(1){ --h: 0.72; }
  .rise-col:nth-child(2){ --h: 0.81; }
  .rise-col:nth-child(3){ --h: 0.90; }
  .rise-col:nth-child(4){ --h: 1; }

  .rise-col p{ font-size: 0.95rem; }
}