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

     1. Vorgehen: vier Stationen an einer Leitung
     1b. Referenz
     2. Vorher/Nachher-Diagramm
     3. Breakpoints
   ======================================================================= */

/* ------------------------------------------------- 1. Vorgehen
   Nachgebaut aus der Vorlage (Vorlage_optimierung_grafik.png). Alles haengt
   an einer einzigen Groesse: der Hoehe eines Schildes (--h). Die
   Verhaeltnisse sind an der Vorlage ausgemessen, Schildhoehe dort 100px:

     Schild        Breite 3,40 h, vollrund (Radius 0,50 h)
     Uebergriff    Das Schild reicht mit seiner runden Kappe (0,50 h) ueber
                   die Leitung hinweg – es endet NICHT an ihr
     Halbscheibe   Radius 0,78 h, flache Seite auf der Leitung, mit
                   DERSELBEN Mitte wie die Schildkappe. Sichtbar bleibt
                   deshalb ein gleichmaessiger Rand von 0,28 h um die Kappe
                   und je eine Nase oben und unten – keine dicke Kugel
     Leitung       Breite 0,11 h, durchgehend, unter den Schildern
     Zeilen        2,37 h von Mitte zu Mitte, also 1,37 h Abstand
     Zeichen       0,68 h gross, Mitte 1,52 h neben der Leitung
     Text          2,60 h breit, 0,67 h vom Schild entfernt, linksbuendig
     Block         6,17 h je Seite, zusammen 12,34 h

   Ab 1000px wechseln die Schilder die Seite (links, rechts, links,
   rechts), darunter haengen alle rechts an einer Leitung nah am Rand.

   Der Ton wandert von neutralem Grau (der Ist-Zustand) ins Markengruen –
   der Fortschritt steckt in der Abstufung selbst, nicht in einer zweiten
   Farbe. Gruen markiert wie ueberall auf der Seite den erreichten
   Zustand. */
.flow{
  --h: clamp(50px, 3rem + 2.6vw, 68px);   /* gestapelt kleiner */
  --r: calc(var(--h) * 0.5);              /* Radius des Schildes */
  --disc: calc(var(--h) * 0.78);          /* Radius der Halbscheibe */
  --pill-col: calc(var(--h) * 2.9);       /* Schild ohne die Kappe */
  --pill-w: calc(var(--h) * 3.4);
  --rail-x: calc(var(--h) * 0.82);        /* gestapelt: Leitung nah am Rand */

  position: relative;
  display: grid;
  row-gap: calc(var(--h) * 0.72);
  max-width: 34rem;
  margin-inline: auto;

  /* Die Leitung ist der HINTERGRUND des Blocks, kein Pseudoelement: nur so
     liegt sie garantiert unter den Schildern. Als absolut gesetztes
     ::before schob Chrome sie trotz z-index ueber die Schilder – der
     Hintergrund eines Elements wird dagegen immer vor seinen positionierten
     Nachkommen gezeichnet. Der Innenabstand gibt ihr den Ueberstand nach
     oben und unten: in der Vorlage laeuft sie aus dem Bild. */
  padding-block: calc(var(--h) * 0.85);
  background: linear-gradient(rgba(34, 34, 35, 0.17), rgba(34, 34, 35, 0.17)) no-repeat;
  background-size: calc(var(--h) * 0.11) 100%;
  background-position-x: calc(var(--rail-x) - var(--h) * 0.055);
}

/* Vier Stufen, die zugleich heller nach dunkler und grauer nach gruener
   laufen – nur ueber den Farbton allein waeren 03 und 04 kaum zu
   unterscheiden. Helligkeit der Schilder 70 / 66 / 62 / 58 %, die
   Scheiben dahinter jeweils rund 18 Punkte tiefer. Alle vier Fuellungen
   tragen die dunkle Schrift mit mindestens 6,4:1 und heben sich zugleich
   vom hellen Seitengrund ab. */
.flow-step:nth-child(1){ --fill: #acb4b9; --cap-c: #7a8690; }
.flow-step:nth-child(2){ --fill: #99b89d; --cap-c: #5d9265; }
.flow-step:nth-child(3){ --fill: #85b789; --cap-c: #4b8650; }
.flow-step:nth-child(4){ --fill: var(--green); --cap-c: var(--green-deep); }

/* z-index: 1 macht den Schritt zum eigenen Stapelraum – nur deshalb faellt
   die Halbscheibe (z-index: -1) hinter das Schild und nicht hinter den
   Seitengrund. */
.flow-step{
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: calc(var(--h) * 0.22);
  row-gap: calc(var(--h) * 0.18);
  /* das Schild beginnt eine halbe Hoehe VOR der Leitung */
  padding-left: calc(var(--rail-x) - var(--r));
}

.flow-pill{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: var(--h);
  padding-inline: calc(var(--h) * 0.24);
  border-radius: 999px;
  background: var(--fill);
  color: var(--ink);
  font-size: calc(var(--h) * 0.3);
  line-height: 1.1;
}

/* Die Halbscheibe: eine halbe Scheibe mit derselben Mitte wie die runde
   Schildkappe – kein versetzter Kreis. Die flache Seite liegt auf der
   Leitung, gewoelbt wird von der Schildseite weg. */
.flow-pill::after{
  content: "";
  position: absolute;
  z-index: -1;
  top: 50%;
  right: calc(100% - var(--r));
  width: var(--disc);
  height: calc(var(--disc) * 2);
  translate: 0 -50%;
  border-radius: 999px 0 0 999px;
  background: var(--cap-c);
}

/* Die Ziffer steht voll ausgezeichnet: eine Abschwaechung faellt auf den
   hellen Fuellungen unter den Kontrastwert fuer kleine Schrift. Sie hebt
   sich ueber Schriftart und Groesse ab, nicht ueber die Deckkraft. */
.flow-num{
  font-family: var(--hc-mono);
  font-size: 0.56em;
  letter-spacing: 0.06em;
}
.flow-pill h3{
  font-size: 1em;
  font-weight: 700;
  line-height: 1.1;
  hyphens: auto;
}

.flow-icon{ display: block; color: var(--muted); }
.flow-icon svg{
  width: calc(var(--h) * 0.68);
  height: auto;
  aspect-ratio: 1;
  stroke-width: 1.2;
}
/* Das Markenicon ist eine gefuellte Zeichnung, keine Strichzeichnung. Der
   zusaetzliche Strich in derselben Farbe bringt es auf die Linienstaerke
   der drei anderen Icons. */
.flow-icon--gear svg{
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 5;
}

.flow-text{
  grid-column: 1 / -1;
  padding-left: calc(var(--rail-x) + var(--h) * 0.2);
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* ------------------------------------------------- 1b. Referenz
   Die zweite Lead-Zeile ("Unsere Lösung: ...") folgt direkt auf die
   erste – etwas Luft dazwischen, sonst lesen sich beide als ein
   Fliesstext. "Unsere Lösung:" steht in der Akzentfarbe: bewusste
   Ausnahme von der Regel in brand.css (Gruen nur auf Handlungsaufrufen
   & Co.), hier auf Wunsch als Blickfang direkt vor den drei Haken.
   --hc-green-deep statt --hc-green: der Abschnitt ist hell (#referenz
   ohne .section--dark), --hc-green allein schafft auf Weiss nicht die
   4,5:1 fuer Fliesstext (siehe Kontrast-Kommentar zu --hc-green-deep
   weiter unten in dieser Codebasis). */
#referenz .split-text .lead + .lead{ margin-top: 0.9rem; }
#referenz .lead-highlight{ color: var(--hc-green-deep); }

/* Der Referenz-Laptop steht bewusst hier statt in page.css (dieselbe
   Begruendung wie bei .shots--laptop in webservices.css: #referenz kommt
   auch auf webservices.html vor, eine ID-Regel in page.css haette also
   auch dort gegriffen).

   Anders als das Notebook auf webservices.html hat diese Aufnahme
   (mock-arbeitsvorbereitung-notebook.png) keinen eigenen Rand – das
   Geraet fuellt das PNG praktisch randlos (1 bis 1137 von 1138px Hoehe,
   siehe Bounding-Box-Messung). "Etwas groesser, bis buendig mit dem
   letzten Haken" ist damit viel einfacher als beim anderen Notebook:
   kein Ausgleich fuer einen Glow-Rand noetig, bottom:0 legt die
   Bild-Unterkante direkt auf die Geraete-Unterkante.

   Technik trotzdem dieselbe wie bei .shots--laptop (webservices.css):
   .shot--notebook auf position:absolute, damit die vergroesserte
   Aufnahme nicht die Zeilenhoehe (und damit den Abschnitt) aufblaeht;
   aspect-ratio auf .shots-stage liefert stattdessen die Bezugsgroesse.
   Kein Formschatten, kein Bodenschatten, keine Schwebe-Animation – nur
   die Aufnahme, wie gewuenscht. Und kein Smartphone: hier gibt es nur
   das eine Geraet. */
.shots--solo .shot--notebook img{ filter: none; animation: none; }
.shots--solo .shot--notebook::after{ content: none; }

@media (min-width: 860px){
  #referenz .split{ align-items: end; }
  .shots--solo .shots-stage{ aspect-ratio: 1.6; }
  /* Zielgroesse: Geraete-Unterkante = Unterkante der Textspalte (letzter
     Haken), Geraet also so hoch wie die Textspalte (401.7px bei 561.2px
     Spaltenbreite). Die Aufnahme fuellt dafuer schon bei 110.7% Breite
     (statt 100%) genau diese Hoehe – deutlich weniger Zuwachs als beim
     anderen Notebook, weil hier kein Rand mitwaechst. left zentriert den
     Zuwachs symmetrisch: die Spalte steht hier rechts vom Text
     (.split--reverse), ein Wachstum wie bei .shots--laptop (nach links)
     liefe also auf den Text zu statt davon weg. */
  .shots--solo .shot--notebook{
    position: absolute;
    bottom: 0;
    left: -5.35%;
    width: 110.7%;
  }
}

/* "Der Abschnitt soll nicht mitwachsen": analog zu #referenz auf
   webservices.html endet auch hier ein Herauswachsen ueber .shots-stage
   hinaus hart an der Abschnittskante statt weich auszulaufen. Bei 110.7%
   Breite und zentriertem Zuwachs kommt es dazu in der Praxis kaum, aber
   sicher ist sicher. */
#referenz{ overflow: hidden; }

/* ------------------------------------------------- 2. Vorher/Nachher */
.lanes{ width: 100%; }
.lanes svg{ width: 100%; height: auto; display: block; }
/* Die Deckkraft der drei Beschriftungen ist nicht frei gewaehlt: auf dem
   dunklen Abschnitt (--ink, #222223) tragen 0.6 / 0.52 / 0.55 rund
   6,6:1 / 5,3:1 / 5,8:1 und bleiben damit auch klein lesbar. Die
   Rangfolge Bahnname > Symbolnotiz > Bahnnotiz bleibt erhalten. */
.lanes .lane-label{
  font-family: var(--hc-mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  fill: rgba(255, 255, 255, 0.6);
  stroke: none;
}
/* Einzige gruene Stelle der Seite ausserhalb der Handlungsaufrufe: die
   Nachher-Bahn. Hier steht Gruen fuer den erreichten Zustand und ist
   deshalb Bedeutung, keine Dekoration. */
.lanes .lane-label--after{ fill: var(--green); }
.lanes .lane-note{
  font-family: var(--hc-font);
  font-size: 14px;
  fill: rgba(255, 255, 255, 0.52);
  stroke: none;
}
/* Beschriftung direkt an einem Symbol – kleiner und naeher am Objekt */
.lanes .lane-tag{
  font-family: var(--hc-font);
  font-size: 12.5px;
  fill: rgba(255, 255, 255, 0.55);
  stroke: none;
}
.lanes .lane-tag--green{ fill: rgba(134, 194, 136, 0.85); }

/* ------------------------------------------------- 3. Breakpoints
   Ab hier laeuft die Leitung in der Mitte und die Schilder wechseln die
   Seite. Zwei Spalten gehoeren den Schildkoerpern (je 2,90 h), zwei dem,
   was daneben steht (je 3,27 h, hier als 1fr). Die Fuge zwischen Spalte 2
   und 3 liegt genau auf der Leitung, deshalb column-gap: 0 – der Abstand
   steckt in den Innenabstaenden der Nachbarn. Das Schild ist um seine
   Kappe breiter als seine Spalte und ragt damit ueber die Leitung.

   Unter dieser Schwelle reicht die Breite weder fuer das laengste Schild
   in einer Zeile noch fuer eine lesbare Spalte daneben. */
@media (min-width: 1000px){
  .flow{
    --h: clamp(56px, 7.2vw, 92px);
    --rail-x: 50%;
    width: min(100%, calc(var(--h) * 12.34));
    max-width: none;
    row-gap: calc(var(--h) * 1.37);
    background-position-x: center;   /* die Leitung liegt in der Mitte */
  }

  .flow-step{
    grid-template-columns: minmax(0, 1fr) var(--pill-col) var(--pill-col) minmax(0, 1fr);
    column-gap: 0;
    row-gap: 0;
    padding-left: 0;
  }

  .flow-pill,
  .flow-icon,
  .flow-text{ grid-row: 1; }

  .flow-pill{ width: var(--pill-w); }
  .flow-text{ padding-left: 0; font-size: 1rem; }

  /* ungerade: Schild links, Halbscheibe und Zeichen rechts der Leitung */
  .flow-step:nth-child(odd) .flow-pill{ grid-column: 2; justify-self: start; }
  .flow-step:nth-child(odd) .flow-pill::after{
    right: auto;
    left: calc(100% - var(--r));
    border-radius: 0 999px 999px 0;
  }
  .flow-step:nth-child(odd) .flow-icon{
    grid-column: 3;
    justify-self: start;
    margin-left: calc(var(--h) * 1.18);
  }
  .flow-step:nth-child(odd) .flow-text{
    grid-column: 1;
    padding-right: calc(var(--h) * 0.67);
  }

  /* gerade: gespiegelt */
  .flow-step:nth-child(even) .flow-pill{ grid-column: 3; justify-self: end; }
  .flow-step:nth-child(even) .flow-icon{
    grid-column: 2;
    justify-self: end;
    margin-right: calc(var(--h) * 1.18);
  }
  .flow-step:nth-child(even) .flow-text{
    grid-column: 4;
    padding-left: calc(var(--h) * 0.67);
  }
}