/* =============================================================================
   KE Step Flow Widget — v0.52.0
   Verbundene Prozess-Schritte mit Marker + Connector-Linie. Rein CSS.
   ============================================================================= */

.ke-step-flow {
    --ke-sf-marker-size: 64px;
    --ke-sf-connector-color: #c7d2fe;
    --ke-sf-connector-width: 3px;
    /* Pfeilspitze skaliert proportional zur Linienstärke (geklemmt für sinnvolle Größen). */
    --ke-sf-arrow-size: clamp(10px, calc(var(--ke-sf-connector-width) * 4), 44px);
    /* Effektive Tiefe: Strecke von der Verbindungsstelle (wo die Linie ankommt) bis zur
       Spitze. Dreieck = volle Box (Basis links). Chevron ist offen → die Linie reicht bis
       zur inneren Spitze (~58 % in die Box), also nur ~42 % gelten als „verbraucht". */
    --ke-sf-arrow-depth: var(--ke-sf-arrow-size);
    --ke-sf-gap: 32px;
    display: flex;
}

.ke-step-flow--horizontal {
    flex-direction: row;
}

.ke-step-flow--vertical {
    flex-direction: column;
}

/* ---- Schritt ---- */
.ke-step-flow--horizontal .ke-step-flow__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    padding: 0 12px;
}

.ke-step-flow--vertical .ke-step-flow__step {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    padding-bottom: var(--ke-sf-gap);
}

.ke-step-flow--vertical .ke-step-flow__step:last-child {
    padding-bottom: 0;
}

/* ---- Marker ---- */
.ke-step-flow__marker {
    width: var(--ke-sf-marker-size);
    height: var(--ke-sf-marker-size);
    flex: 0 0 var(--ke-sf-marker-size);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #6366f1;
    color: #ffffff;
    position: relative;
    z-index: 1;
    font-size: calc(var(--ke-sf-marker-size) * 0.32);
    font-weight: 700;
    line-height: 1;
}

.ke-step-flow__marker img {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.ke-step-flow__marker svg {
    width: 45%;
    height: 45%;
}

.ke-sf-marker-circle .ke-step-flow__marker {
    border-radius: 50%;
}

.ke-sf-marker-rounded .ke-step-flow__marker {
    border-radius: 14px;
}

.ke-sf-marker-square .ke-step-flow__marker {
    border-radius: 0;
}

/* ---- Body ---- */
.ke-step-flow--horizontal .ke-step-flow__body {
    margin-top: 16px;
}

.ke-step-flow__title {
    margin: 0 0 6px;
    font-size: 1.1rem;
    line-height: 1.3;
}

.ke-step-flow__desc {
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ---- Connector: horizontal ---- */
.ke-step-flow--horizontal.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(var(--ke-sf-marker-size) / 2);
    left: 50%;
    width: 100%;
    height: var(--ke-sf-connector-width);
    transform: translateY(-50%);
    background: var(--ke-sf-connector-color);
    z-index: 0;
}

/* ---- Connector: vertikal ---- */
.ke-step-flow--vertical.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(var(--ke-sf-marker-size) / 2);
    top: var(--ke-sf-marker-size);
    bottom: 0;
    width: var(--ke-sf-connector-width);
    transform: translateX(-50%);
    background: var(--ke-sf-connector-color);
    z-index: 0;
}

/* ---- Connector-Stil: gestrichelt ---- */
.ke-step-flow--horizontal.ke-step-flow--connector-dashed .ke-step-flow__step:not(:last-child)::after {
    background: none;
    background-image: repeating-linear-gradient(to right, var(--ke-sf-connector-color) 0 9px, transparent 9px 17px);
}

.ke-step-flow--vertical.ke-step-flow--connector-dashed .ke-step-flow__step:not(:last-child)::after {
    background: none;
    background-image: repeating-linear-gradient(to bottom, var(--ke-sf-connector-color) 0 9px, transparent 9px 17px);
}

/* ---- Connector-Stil: Pfeilspitze (clip-path-basiert, formbar + rotierbar) ---- */
.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
    content: '';
    position: absolute;
    z-index: 2;
    /* Größe folgt der Linienstärke → dicke Linie = große Spitze. */
    width: var(--ke-sf-arrow-size);
    height: var(--ke-sf-arrow-size);
    background: var(--ke-sf-connector-color);
    /* Default: Dreieck, zeigt nach rechts. Richtung via rotate in den Layout-Regeln. */
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
}
/* Formen (jeweils rechtszeigend definiert; Rotation kommt aus den Layout-Regeln) */
.ke-step-flow--arrow-chevron .ke-step-flow__step:not(:last-child)::before {
    clip-path: polygon(0% 6%, 18% 6%, 100% 50%, 18% 94%, 0% 94%, 58% 50%);
}
/* Chevron ist offen: die Linie läuft bis zur inneren Spitze (x≈58 %), nicht bis zur Box-Kante. */
.ke-step-flow--arrow-chevron {
    --ke-sf-arrow-depth: calc(var(--ke-sf-arrow-size) * 0.42);
}

/* Horizontal: zeigt nach rechts (Pfeilspitze am Linienende beim nächsten Marker). */
.ke-step-flow--horizontal.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
    top: calc(var(--ke-sf-marker-size) / 2);
    left: calc(150% - var(--ke-sf-marker-size) / 2);
    transform: translate(-100%, -50%) rotate(0deg);
}

/* Vertikal: zeigt nach unten. */
.ke-step-flow--vertical.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
    left: calc(var(--ke-sf-marker-size) / 2);
    top: 100%;
    transform: translate(-50%, -100%) rotate(90deg);
}

/* =============================================================================
   v0.59.32 — Label · Hover/Aktiv · Karte · Zickzack · Treppe · Kreis · Link
   ============================================================================= */

/* ---- Schritt-Label (Caption) ---- */
.ke-step-flow__label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6366f1;
    margin-bottom: 4px;
    line-height: 1.2;
}

/* ---- Step als Link: Reset ---- */
a.ke-step-flow__step {
    text-decoration: none;
    color: inherit;
}

/* ---- Hover & aktiver Schritt ---- */
.ke-step-flow__marker {
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.ke-step-flow--hover .ke-step-flow__step:hover .ke-step-flow__marker {
    transform: scale(1.08);
}
.ke-step-flow--hover.ke-step-flow--cards .ke-step-flow__step {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ke-step-flow--hover.ke-step-flow--cards .ke-step-flow__step:hover {
    transform: translateY(-4px);
}

/* ---- Karten-Layout ---- */
.ke-step-flow--cards .ke-step-flow__step {
    /* Per-Karte (--ke-sf-card-color) > global (--ke-sf-card-bg) > Default. */
    background: var(--ke-sf-card-color, var(--ke-sf-card-bg, #ffffff));
    box-sizing: border-box;
}

/* Echter Abstand zwischen den Karten (Horizontal + Vertikal) via --ke-sf-gap. */
.ke-step-flow--cards {
    gap: var(--ke-sf-gap);
}
/* Vertikal: per-Step-padding-bottom im Karten-Modus neutralisieren (gap übernimmt). */
.ke-step-flow--cards.ke-step-flow--vertical .ke-step-flow__step {
    padding-bottom: 0;
}

/* Connector bei Karten: in der LÜCKE zwischen den Karten statt über der Karte.
   Höhere Spezifität als die Basis-Connector-Regeln → überschreibt deren Position. */
/* Horizontal: waagrechte Linie in der Gap (mittig auf Kartenhöhe). */
.ke-step-flow--cards.ke-step-flow--horizontal.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    /* Beidseitig um --ke-sf-connector-inset eingerückt → berührt die Karten nicht. */
    left: calc(100% + var(--ke-sf-connector-inset, 0px));
    width: max(0px, calc(var(--ke-sf-gap) - 2 * var(--ke-sf-connector-inset, 0px)));
    height: var(--ke-sf-connector-width);
    transform: translateY(-50%);
    background: var(--ke-sf-connector-color);
}
.ke-step-flow--cards.ke-step-flow--horizontal.ke-step-flow--connector-dashed .ke-step-flow__step:not(:last-child)::after {
    background: none;
    background-image: repeating-linear-gradient(to right, var(--ke-sf-connector-color) 0 9px, transparent 9px 17px);
}
/* Pfeilspitze am Gap-Ende, zeigt zur nächsten Karte. */
.ke-step-flow--cards.ke-step-flow--horizontal.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
    top: 50%;
    /* Box-Rechtskante (Spitze) sitzt um --ke-sf-connector-inset vor der nächsten Karte. */
    left: calc(100% + var(--ke-sf-gap) - var(--ke-sf-connector-inset, 0px));
    transform: translate(-100%, -50%) rotate(0deg);
}
/* Bei aktivem Pfeil endet die Linie an der Pfeilbasis statt darunter durchzulaufen
   → Linie + Spitze stoßen sauber aneinander (skaliert mit Stärke + Abstand). */
.ke-step-flow--cards.ke-step-flow--horizontal.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::after {
    width: max(0px, calc(var(--ke-sf-gap) - 2 * var(--ke-sf-connector-inset, 0px) - var(--ke-sf-arrow-depth)));
}
/* Vertikal: senkrechte Linie in der Gap (mittig). */
.ke-step-flow--cards.ke-step-flow--vertical.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: calc(100% + var(--ke-sf-connector-inset, 0px));
    width: var(--ke-sf-connector-width);
    height: max(0px, calc(var(--ke-sf-gap) - 2 * var(--ke-sf-connector-inset, 0px)));
    transform: translateX(-50%);
    background: var(--ke-sf-connector-color);
}
.ke-step-flow--cards.ke-step-flow--vertical.ke-step-flow--connector-dashed .ke-step-flow__step:not(:last-child)::after {
    background: none;
    background-image: repeating-linear-gradient(to bottom, var(--ke-sf-connector-color) 0 9px, transparent 9px 17px);
}
.ke-step-flow--cards.ke-step-flow--vertical.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
    left: 50%;
    top: calc(100% + var(--ke-sf-gap) - var(--ke-sf-connector-inset, 0px));
    transform: translate(-50%, -100%) rotate(90deg);
}
/* Linie endet an der Pfeilbasis (analog horizontal). */
.ke-step-flow--cards.ke-step-flow--vertical.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::after {
    height: max(0px, calc(var(--ke-sf-gap) - 2 * var(--ke-sf-connector-inset, 0px) - var(--ke-sf-arrow-depth)));
}

/* ---- Tags / Badges ---- */
.ke-step-flow__tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;   /* Badges standardmäßig zentriert */
    gap: 6px;
    margin-top: 10px;
}
.ke-step-flow__tag {
    display: inline-block;
    padding: 3px 10px;
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: var(--ke-sf-tag-radius, 999px);
    background: var(--ke-sf-tag-bg, #eef2ff);
    color: var(--ke-sf-tag-color, #4338ca);
}

/* ---- Zickzack (Marker auf Mittellinie, Body abwechselnd oben/unten) ---- */
.ke-step-flow--zigzag {
    flex-direction: row;
    align-items: center;
    gap: var(--ke-sf-gap);
}
.ke-step-flow--zigzag .ke-step-flow__step {
    flex: 1;
    position: relative;
    min-height: 240px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ke-step-flow--zigzag .ke-step-flow__body {
    position: absolute;
    left: 12px;
    right: 12px;
    text-align: center;
}
.ke-step-flow--zigzag .ke-step-flow__step:nth-child(odd) .ke-step-flow__body {
    bottom: calc(50% + var(--ke-sf-marker-size) / 2 + 16px);
}
.ke-step-flow--zigzag .ke-step-flow__step:nth-child(even) .ke-step-flow__body {
    top: calc(50% + var(--ke-sf-marker-size) / 2 + 16px);
}
.ke-step-flow--zigzag.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    /* überbrückt zusätzlich den gap zum nächsten Schritt */
    width: calc(100% + var(--ke-sf-gap));
    height: var(--ke-sf-connector-width);
    transform: translateY(-50%);
    background: var(--ke-sf-connector-color);
    z-index: 0;
}
.ke-step-flow--zigzag.ke-step-flow--connector-dashed .ke-step-flow__step:not(:last-child)::after {
    background: none;
    background-image: repeating-linear-gradient(to right, var(--ke-sf-connector-color) 0 9px, transparent 9px 17px);
}

/* ---- Treppe (versetzt) ---- */
.ke-step-flow--treppe {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ke-sf-gap);
}
/* Richtung „nach rechts oben": erster Schritt links unten, weitere nach oben rechts */
.ke-step-flow--treppe.ke-step-flow--treppe-up {
    flex-direction: column-reverse;
}
.ke-step-flow--treppe .ke-step-flow__step {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    margin-left: calc(var(--ke-sf-indent, 60px) * var(--ke-sf-step-index, 0));
}

/* ---- Kreis (statisch rund angeordnet) ---- */
.ke-step-flow--kreis {
    --ke-sf-radius: 180px;
    position: relative;
    display: block;
    width: calc(var(--ke-sf-radius) * 2 + var(--ke-sf-marker-size));
    height: calc(var(--ke-sf-radius) * 2 + var(--ke-sf-marker-size));
    margin: 0 auto;
}
.ke-step-flow--kreis .ke-step-flow__step {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150px;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%)
               rotate(var(--ke-sf-angle, 0deg))
               translateY(calc(-1 * var(--ke-sf-radius)))
               rotate(calc(-1 * var(--ke-sf-angle, 0deg)));
}
.ke-step-flow--kreis .ke-step-flow__body {
    margin-top: 10px;
}
.ke-step-flow--kreis .ke-step-flow__desc {
    display: none;            /* im Kreis nur Marker + Titel (Platz) */
}
/* dezenter Ring durch die Marker-Mitten (= „Verbindungslinie") */
.ke-step-flow--kreis.ke-step-flow--connector::before {
    content: '';
    position: absolute;
    inset: calc(var(--ke-sf-marker-size) / 2);
    border-radius: 50%;
    border: var(--ke-sf-connector-width) dashed var(--ke-sf-connector-color);
    pointer-events: none;
}

/* ---- Mobile: Horizontal-Layout zu Stapel ---- */
@media (max-width: 767px) {
    .ke-step-flow--horizontal {
        flex-direction: column;
    }
    .ke-step-flow--horizontal .ke-step-flow__step {
        flex: none;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        padding: 0 0 var(--ke-sf-gap) 0;
    }
    .ke-step-flow--horizontal .ke-step-flow__body {
        margin-top: 0;
    }
    /* Horizontale Connector-Linie auf Mobile ausblenden */
    .ke-step-flow--horizontal.ke-step-flow--connector .ke-step-flow__step:not(:last-child)::after,
    .ke-step-flow--horizontal.ke-step-flow--connector-arrow .ke-step-flow__step:not(:last-child)::before {
        display: none;
    }

    /* Zickzack/Treppe/Kreis auf Mobile → einfacher vertikaler Stapel */
    .ke-step-flow--zigzag,
    .ke-step-flow--treppe {
        flex-direction: column;
        align-items: stretch;
    }
    .ke-step-flow--zigzag .ke-step-flow__step,
    .ke-step-flow--treppe .ke-step-flow__step {
        min-height: 0;
        margin-left: 0;
        flex-direction: row;
        align-items: flex-start;
        justify-content: flex-start;
        text-align: left;
        gap: 20px;
        padding: 0 0 var(--ke-sf-gap) 0;
    }
    .ke-step-flow--zigzag .ke-step-flow__body {
        position: static;
        text-align: left;
    }
    .ke-step-flow--zigzag .ke-step-flow__step::after { display: none; }

    /* Kreis → linearer Stapel (feste Kreisgröße/Transforms aufheben) */
    .ke-step-flow--kreis {
        width: auto;
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .ke-step-flow--kreis .ke-step-flow__step {
        position: static;
        width: auto;
        transform: none;
        flex-direction: row;
        align-items: flex-start;
        text-align: left;
        gap: 20px;
        padding-bottom: var(--ke-sf-gap);
    }
    .ke-step-flow--kreis .ke-step-flow__desc { display: block; }
    .ke-step-flow--kreis.ke-step-flow--connector::before { display: none; }
}