/* Eine Struktur fuer beide Anwendungsfaelle: die Prozesskette (Titel +
   Unterzeile, Pfeile dazwischen) und die Bildkette (Nummer, Stichworte,
   Hebel-Balken, Fusszeile). Nicht gefuellte Felder werden per :empty
   ausgeblendet - dadurch bleiben bestehende Instanzen unveraendert. */
.gvl-pipe{display:flex;align-items:stretch;gap:30px;flex-wrap:nowrap;}
.gvl-pipe__step{position:relative;flex:1 1 0;min-width:0;min-height:118px;padding:18px 16px;border:1px solid transparent;border-radius:3px;display:flex;flex-direction:column;justify-content:space-between;gap:10px;}
.gvl-pipe--cols-6{display:grid;grid-template-columns:repeat(6,1fr);}
.gvl-pipe--cols-4{display:grid;grid-template-columns:repeat(4,1fr);}
.gvl-pipe--cols-3{display:grid;grid-template-columns:repeat(3,1fr);}

/* Pfeile nur, wenn eingeschaltet */
.gvl-pipe--arrows .gvl-pipe__step + .gvl-pipe__step::before{content:'\2192';position:absolute;left:-22px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:700;line-height:1;color:var(--e-global-color-primary);}

.gvl-pipe__num{font-size:0.6875rem;font-weight:700;letter-spacing:0.1em;line-height:1;font-variant-numeric:tabular-nums;color:var(--e-global-color-primary);}
.gvl-pipe__title{font-size:1rem;font-weight:600;line-height:1.25;}
.gvl-pipe__label{font-size:0.625rem;font-weight:700;letter-spacing:0.1em;line-height:1.3;}
.gvl-pipe--caps .gvl-pipe__label{text-transform:uppercase;}
.gvl-pipe__hb{margin-top:auto;padding-top:8px;font-size:0.625rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;line-height:1.3;color:var(--e-global-color-primary);}
.gvl-pipe__lever{display:flex;align-items:flex-end;height:1.625rem;}
.gvl-pipe__lever i{display:block;width:100%;border-radius:1px;background-color:var(--e-global-color-primary);}
/* Leere Felder verschwinden restlos - kein Leerraum, kein Gap-Beitrag */
.gvl-pipe__num:empty,.gvl-pipe__label:empty,.gvl-pipe__hb:empty,.gvl-pipe__title:empty{display:none;}
.gvl-pipe__step:not([class*='l1']):not([class*='l2']):not([class*='l3']):not([class*='l4']):not([class*='l5']) .gvl-pipe__lever{display:none;}
/* Balkenhoehe = Hebelwirkung */
.gvl-pipe__step.l5 .gvl-pipe__lever i{height:1.625rem;}
.gvl-pipe__step.l4 .gvl-pipe__lever i{height:1.3125rem;}
.gvl-pipe__step.l3 .gvl-pipe__lever i{height:1rem;}
.gvl-pipe__step.l2 .gvl-pipe__lever i{height:0.6875rem;}
.gvl-pipe__step.l1 .gvl-pipe__lever i{height:0.375rem;}

/* --- Variante: dunkel --- */
.gvl-pipe--dark .gvl-pipe__step{border-color:var(--e-global-color-primary);background-color:color-mix(in srgb, var(--e-global-color-primary) 7%, transparent);}
.gvl-pipe--dark .gvl-pipe__step--hl{background-color:color-mix(in srgb, var(--e-global-color-primary) 16%, transparent);}
.gvl-pipe--dark .gvl-pipe__title{color:var(--e-global-color-text);}
.gvl-pipe--dark .gvl-pipe__label{color:var(--e-global-color-primary);}

/* --- Variante: hell --- */
.gvl-pipe--light .gvl-pipe__step{border-color:var(--e-global-color-gvlborderlight);background-color:var(--e-global-color-text);}
.gvl-pipe--light .gvl-pipe__step--hl{background-color:var(--e-global-color-gvlcreme2);}
.gvl-pipe--light .gvl-pipe__title{color:var(--e-global-color-secondary);}
.gvl-pipe--light .gvl-pipe__label{color:var(--e-global-color-gvlgrey2);}

/* --- Variante: Bildkette --- */
.gvl-pipe--chain .gvl-pipe__step{border:0;border-top:2px solid var(--e-global-color-primary);border-radius:0;background-color:rgba(255,255,255,0.02);padding:14px 14px 16px;min-height:0;gap:8px;justify-content:flex-start;}
.gvl-pipe--chain .gvl-pipe__title{font-stretch:75%;font-weight:800;font-size:1.25rem;line-height:1.15;color:var(--e-global-color-text);}
.gvl-pipe--chain .gvl-pipe__label{font-size:0.875rem;font-weight:400;letter-spacing:normal;line-height:1.4;text-transform:none;color:var(--e-global-color-gvltextsubtle2, #C9C4B9);}

/* Alle Varianten ausser der Bildkette stapeln erst auf dem Handy. */
@media(max-width:900px){
.gvl-pipe,.gvl-pipe--cols-6,.gvl-pipe--cols-4,.gvl-pipe--cols-3{display:grid;grid-template-columns:1fr;gap:8px;}
.gvl-pipe--arrows .gvl-pipe__step + .gvl-pipe__step::before{display:none;}
}

/* --- Bildkette: Zeilen-Ansicht ab Tablet (<= 1024px) ---
   Sechs Karten nebeneinander sind auf einem Tablet nur noch ~150px breit;
   der Titel bricht dann mehrzeilig um. Das Konzept loest das mit einer
   Listenansicht: Nummer | Titel | Hebel-Balken in EINER Zeile, die
   Stichworte darunter, getrennt durch eine duenne Linie.

   Der Balken zeigt die Hebelwirkung hier ueber die BREITE (100/78/56/34/16 %)
   statt ueber die Hoehe - bei 7px Hoehe waere eine Hoehenstaffelung nicht
   mehr unterscheidbar. Aus demselben Grund wird die Trennlinie dezent:
   waere sie gruen wie auf dem Desktop, ergaebe sie mit dem Balken
   zusammen eine doppelte gruene Kante.

   Das Raster wird ueber grid-column/grid-row gesetzt, nicht ueber die
   DOM-Reihenfolge - im Markup steht der Balken vor der Nummer. */
@media(max-width:1024px){
.gvl-pipe--chain,
.gvl-pipe--chain.gvl-pipe--cols-6,
.gvl-pipe--chain.gvl-pipe--cols-4,
.gvl-pipe--chain.gvl-pipe--cols-3{display:grid;grid-template-columns:1fr;gap:0 !important;}
.gvl-pipe--chain .gvl-pipe__step{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:12px;row-gap:2px;padding:11px 0;min-height:0;border:0;border-top:1px solid rgba(255,255,255,0.13);border-radius:0;background-color:transparent;}
.gvl-pipe--chain .gvl-pipe__num{grid-column:1;grid-row:1;font-size:0.6875rem;line-height:1.2;}
.gvl-pipe--chain .gvl-pipe__title{grid-column:2;grid-row:1;font-size:1.125rem;line-height:1.15;}
.gvl-pipe--chain .gvl-pipe__label{grid-column:2 / 4;grid-row:2;font-size:0.8125rem;line-height:1.4;}
.gvl-pipe--chain .gvl-pipe__hb{display:none;}
.gvl-pipe--chain .gvl-pipe__lever{grid-column:3;grid-row:1;display:flex;justify-content:flex-end;align-items:center;width:74px;height:auto;}
.gvl-pipe--chain .gvl-pipe__step.l5 .gvl-pipe__lever i{height:7px;width:100%;}
.gvl-pipe--chain .gvl-pipe__step.l4 .gvl-pipe__lever i{height:7px;width:78%;}
.gvl-pipe--chain .gvl-pipe__step.l3 .gvl-pipe__lever i{height:7px;width:56%;}
.gvl-pipe--chain .gvl-pipe__step.l2 .gvl-pipe__lever i{height:7px;width:34%;}
.gvl-pipe--chain .gvl-pipe__step.l1 .gvl-pipe__lever i{height:7px;width:16%;}
.gvl-pipe--chain.gvl-pipe--arrows .gvl-pipe__step + .gvl-pipe__step::before{display:none;}
}