/*
  Prozess-Schrittfolge: nummerierte Ablaufdarstellung. Verbindungslinie
  zwischen den Kreisen ist reines CSS (:not(:last-child)::after), horizontal
  ab dem groesseren Breakpoint, darunter gestapelt mit vertikaler Linie.
*/@layer komponenten{.prozess-schrittfolge{container-type:inline-size;padding-block:var(--space-12)}.prozess-schrittfolge__titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-2xl);font-weight:var(--weight-normal);color:var(--farbe-text);text-align:center;margin:0}.prozess-schrittfolge__untertitel{margin-block-start:var(--space-3);font-size:var(--text-base);color:var(--farbe-text-gedaempft);text-align:center;max-width:36rem;margin-inline:auto}.prozess-schrittfolge__buehne{position:relative;margin-block-start:var(--space-10)}/* Verbindungspfad -- unsichtbar/ungenutzt auf der gestapelten Mobil-Ansicht
     (dort gibt es keine horizontale Reihe, die er verbinden koennte), erst ab
     dem 48rem-Breakpoint sichtbar hinter der Liste positioniert. */.prozess-schrittfolge__pfad{display:none;position:absolute;top:1.75rem;left:2rem;right:2rem;width:calc(100% - 4rem);height:5.5rem;color:var(--farbe-akzent);pointer-events:none}.prozess-schrittfolge__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-8)}.prozess-schrittfolge__schritt{position:relative;z-index:1;text-align:center;padding-inline-start:0}.prozess-schrittfolge__nummer{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;width:3.5rem;height:3.5rem;margin-inline:auto;border-radius:var(--radius-full);background:var(--farbe-akzent);color:var(--farbe-auf-akzent);font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-xl);font-weight:var(--weight-bold)}/* Piktogramm ersetzt die reine Ziffer als primaeren Inhalt (Lotti-Audit
     Punkt 1: "pro Schritt ein kleines Piktogramm, das die Handlung zeigt").
     Die Ziffer bleibt als kleines Badge unten rechts am Kreis erhalten --
     Reihenfolge/Ablauf-Charakter geht so nicht verloren, nur die reine
     Zahlen-Liste weicht einer Illustration. Schritte ohne 'iconName' zeigen
     unveraendert nur die grosse Ziffer (additiv, kein Layout-Bruch). */.prozess-schrittfolge__icon{display:block;width:1.75rem;height:1.75rem}.prozess-schrittfolge__icon svg{width:100%;height:100%;display:block}.prozess-schrittfolge__nummer:has(.prozess-schrittfolge__icon) .prozess-schrittfolge__ziffer{position:absolute;inset-block-end:-0.25rem;inset-inline-end:-0.25rem;display:flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:var(--radius-full);background:var(--farbe-grund);color:var(--farbe-akzent);border:1.5px solid var(--farbe-akzent);font-size:0.65rem}.prozess-schrittfolge__schritt-titel{margin-block-start:var(--space-4);font-size:var(--text-lg);font-weight:var(--weight-semibold);color:var(--farbe-text)}.prozess-schrittfolge__schritt-text{margin-block-start:var(--space-2);font-size:var(--text-sm);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft)}@container (min-width: 48rem){.prozess-schrittfolge__pfad{display:block}.prozess-schrittfolge__liste{flex-direction:row;align-items:flex-start;gap:var(--space-6)}.prozess-schrittfolge__schritt{flex:1}}}