/* Wegbegleiter: Gestaltung der drei Anmeldeschritte.
   Schrift: projektweite Inter aus css/global.css (fonts/inter-variable.woff2, wght 100–900), keine eigene Kopie. */

#stepsContainer {
    --aw-css-ready:1;
    display:block;
    min-inline-size:0;
    container-type:inline-size;
    container-name:aw-stage
}

#stepsContainer .aw-product {
    --aw-blue:#48a0d6;
    --aw-pink:#d55a92;
    --aw-green:#7fb14e;
    --aw-yellow:#f59e0b;
    --aw-cream:#fce2b6;
    --aw-ink:#1e293b;
    --aw-muted:#63748b;
    /* Blaue Schrift aus Tokens: 60 % --aw-blue in --aw-ink. Gemessen mind. 4,89:1 auf dem hellsten Hintergrund (WCAG AA 4,5:1);
       65 % läge mit 4,50:1 ohne Reserve auf der Grenze. */
    --aw-blue-ink:color-mix(in srgb,var(--aw-blue) 60%,var(--aw-ink));
    --aw-accent:var(--aw-blue-ink);
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    gap:20px;
    inline-size:100%;
    padding:34px 24px 28px;
    box-sizing:border-box;
    overflow:hidden;
    border-radius:26px;
    background:linear-gradient(155deg,#fff 12%,#fafcfd 70%,#fff 100%);
    color:var(--aw-ink);
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
    font-size:16px;
    line-height:1.55;
    text-align:start;
    color-scheme:light
}

#stepsContainer .aw-product * {
    box-sizing:border-box
}

#stepsContainer .aw-product[data-aw-state="1"] {
    --aw-accent:#9e3767
}

#stepsContainer .aw-product[data-aw-state="2"] {
    --aw-accent:#4e762b
}

#stepsContainer .aw-clouds {
    position:absolute;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1
}

/* Hintergrundwolke vollständig im Modul: Alle Maße hängen an --aw-cloud-w.
   Bezug: Originalbreite 330px bei 382px Spaltenbreite (Viewport 430px abzüglich 2 × 24px Seitenrand). */
#stepsContainer .aw-cloud {
    --aw-cloud-w:min(330px,calc(100cqi*330/382));
    position:absolute;
    inline-size:var(--aw-cloud-w);
    block-size:calc(var(--aw-cloud-w)*180/330);
    border-radius:65% 70% 30% 20%;
    background:rgba(72,160,214,.045);
    inset-inline-end:0;
    inset-block-start:32%;
    transition:transform 1150ms cubic-bezier(.22,1,.36,1)
}

#stepsContainer .aw-cloud::before {
    content:"";
    position:absolute;
    inline-size:calc(var(--aw-cloud-w)*145/330);
    block-size:calc(var(--aw-cloud-w)*145/330);
    background:inherit;
    border-radius:50%;
    inset-inline-start:calc(var(--aw-cloud-w)*35/330);
    inset-block-start:calc(var(--aw-cloud-w)*-64/330)
}

/* Wanderung je Station nur nach links, damit die Wolke am rechten Rand nie angeschnitten wird. */
#stepsContainer .aw-product[data-aw-state="1"] .aw-cloud {
    transform:translate(calc(var(--aw-cloud-w)*-24/330),calc(var(--aw-cloud-w)*-12/330))
}

#stepsContainer .aw-product[data-aw-state="2"] .aw-cloud {
    transform:translate(calc(var(--aw-cloud-w)*-9/330),calc(var(--aw-cloud-w)*20/330))
}

#stepsContainer .aw-intro {
    max-inline-size:430px;
    margin:0 auto;
    color:var(--aw-muted);
    /* 14px bei 382px Spaltenbreite (Viewport 430px), begrenzt auf 13 bis 15px. */
    font-size:clamp(13px,calc(100cqi*14/382),15px);
    line-height:1.6;
    letter-spacing:-.01em;
    text-wrap:balance
}

#stepsContainer .aw-art {
    display:block;
    inline-size:100%;
    block-size:100%;
    overflow:visible
}

#stepsContainer .aw-art .aw-edge {
    stroke:#fff;
    stroke-width:2.6;
    stroke-linejoin:round
}

#stepsContainer .aw-stations {
    position:absolute;
    inset:0
}

#stepsContainer .aw-station {
    --aw-station-ink:#317ba8;
    --aw-station-fill:rgba(72,160,214,.2);
    position:absolute;
    inset-inline-start:calc(var(--aw-x)/420*100%);
    inset-block-start:calc(var(--aw-y)/386*100%);
    display:grid;
    place-items:center;
    inline-size:44px;
    block-size:44px;
    padding:5px;
    transform:translate(-50%,-50%);
    border:0;
    border-radius:50%;
    background:transparent;
    color:#667a91;
    -webkit-tap-highlight-color:transparent
}

#stepsContainer .aw-station[data-aw-step="1"] {
    --aw-station-ink:#9e3767;
    --aw-station-fill:rgba(213,90,146,.2)
}

#stepsContainer .aw-station[data-aw-step="2"] {
    --aw-station-ink:#4e762b;
    --aw-station-fill:rgba(127,177,78,.23)
}

#stepsContainer .aw-station[data-aw-mark="current"] .aw-node {
    color:var(--aw-station-ink)
}

#stepsContainer .aw-station[data-aw-mark="current"] .aw-label {
    color:var(--aw-station-ink)
}

@media (hover:hover) {
    #stepsContainer .aw-station:hover .aw-node {
        transform:translateY(-2px)
    }
}

#stepsContainer .aw-station:active .aw-node {
    transform:scale(.94)
}

#stepsContainer .aw-copy-panel p {
    margin:0;
    color:#526277;
    font-size:clamp(15px,4cqw,16px);
    line-height:1.6;
    letter-spacing:-.01em
}

#stepsContainer .aw-product button,#stepsContainer .aw-product a {
    font-family:inherit;
    -webkit-tap-highlight-color:transparent
}

#stepsContainer .aw-actions {
    display:grid;
    grid-template-columns:minmax(0,1fr) 70px;
    /* Button und FAQ als Paar: gleiche Höhe über die gemeinsame Rasterzeile. */
    align-items:stretch;
    gap:18px;
    margin-block-start:7px
}

/* Entscheidung Anis (2026-10-04): getöntes Glas statt rgba(255,255,255,.15). Auf dem Sektionsgrund #F8FAFC
   wäre der Token-Wert unsichtbar; Button pink, FAQ blau getönt, beide mit blur(12px), ohne Rahmen und Glow. */
#stepsContainer .aw-cta {
    --aw-cta-h:62px;
    --aw-cap:40px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    min-inline-size:0;
    min-block-size:var(--aw-cta-h);
    /* Pfeil-Kapsel mit gleichem Abstand nach oben, unten und rechts. */
    padding-block:calc((var(--aw-cta-h) - var(--aw-cap))/2);
    padding-inline:22px calc((var(--aw-cta-h) - var(--aw-cap))/2);
    border:0;
    border-radius:20px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    background:linear-gradient(110deg,rgba(255,255,255,.5),rgba(213,90,146,.1));
    color:#b93876;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    overflow:hidden;
    transition:transform 500ms cubic-bezier(.22,1,.36,1),translate 700ms cubic-bezier(.22,1,.36,1),opacity 450ms ease;
    text-decoration:none
}

@media (hover:hover) {
    #stepsContainer .aw-cta:hover {
        transform:translateY(-2px)
    }
}

#stepsContainer .aw-cta:active {
    transform:translateY(1px)
}

#stepsContainer .aw-cta-label {
    display:inline-block;
    white-space:nowrap
}

#stepsContainer .aw-cta-label span {
    display:inline-block;
    white-space:pre
}

/* Liquid-Hover; auf Touch und Tastatur gleichwertig über :focus-visible. */
@media (hover:hover) {
    #stepsContainer .aw-cta:hover .aw-cta-label span {
        animation:aw-liquid-letter 650ms cubic-bezier(.22,1,.36,1) both;
        animation-delay:calc(var(--aw-i)*18ms)
    }
}

#stepsContainer .aw-cta:focus-visible .aw-cta-label span {
    animation:aw-liquid-letter 650ms cubic-bezier(.22,1,.36,1) both;
    animation-delay:calc(var(--aw-i)*18ms)
}

/* Pfeil-Kapsel: Kreis aus --aw-cap; Schaft und Spitze zusammen optisch mittig.
   Die Spitze des um 45° gedrehten Quadrats liegt um --aw-head·√2/2 rechts von seiner Mitte. */
#stepsContainer .aw-arrow {
    --aw-shaft:16px;
    --aw-head:8px;
    display:block;
    position:relative;
    inline-size:var(--aw-cap);
    block-size:var(--aw-cap);
    flex:none;
    border-radius:50%;
    background:rgba(255,255,255,.7);
    transition:transform 550ms cubic-bezier(.22,1,.36,1),scale 600ms cubic-bezier(.34,1.56,.64,1),opacity 300ms ease
}

#stepsContainer .aw-arrow::before {
    content:"";
    position:absolute;
    inset-inline-start:calc((var(--aw-cap) - var(--aw-shaft))/2);
    inset-block-start:calc((var(--aw-cap) - 1px)/2);
    inline-size:var(--aw-shaft);
    block-size:1px;
    background:currentColor
}

#stepsContainer .aw-arrow::after {
    content:"";
    position:absolute;
    inset-inline-start:calc((var(--aw-cap) + var(--aw-shaft))/2 - var(--aw-head)*sqrt(2)/2 - var(--aw-head)/2);
    inset-block-start:calc((var(--aw-cap) - var(--aw-head))/2);
    inline-size:var(--aw-head);
    block-size:var(--aw-head);
    box-sizing:border-box;
    border-block-start:1px solid currentColor;
    border-inline-end:1px solid currentColor;
    transform:rotate(45deg)
}

@media (hover:hover) {
    #stepsContainer .aw-cta:hover .aw-arrow {
        transform:translateX(4px)
    }
}

#stepsContainer .aw-cta:focus-visible .aw-arrow,#stepsContainer .aw-cta:active .aw-arrow {
    transform:translateX(4px)
}

#stepsContainer .aw-faq {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:2px;
    min-block-size:58px;
    padding:4px;
    background:linear-gradient(110deg,rgba(255,255,255,.5),rgba(72,160,214,.1));
    border:0;
    border-radius:20px;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    text-decoration:none;
    color:var(--aw-blue-ink);
    transition:transform 500ms cubic-bezier(.22,1,.36,1),translate 700ms cubic-bezier(.22,1,.36,1) 120ms,opacity 450ms ease 120ms
}

@media (hover:hover) {
    #stepsContainer .aw-faq:hover {
        transform:translateY(-2px)
    }
}

#stepsContainer .aw-faq:active {
    transform:translateY(1px)
}

#stepsContainer .aw-faq strong {
    font-size:12px;
    font-weight:800;
    line-height:1.35
}

#stepsContainer .aw-faq span {
    font-size:12px;
    line-height:1.45;
    /* Farbe des Absatztexts: auf der blauen Glastönung erreicht --aw-muted nur 4,18:1. */
    color:#526277;
    text-align:center
}

#stepsContainer .aw-reassurance {
    text-align:center;
    margin:-12px 0 0;
    color:var(--aw-muted);
    font-size:12px;
    line-height:1.5;
    /* Unter ca. 340px Spaltenbreite zweizeilig: gleich lange Zeilen statt eines einzelnen Worts in Zeile 2. */
    text-wrap:balance;
    transition:translate 700ms cubic-bezier(.22,1,.36,1) 240ms,opacity 450ms ease 240ms
}

/* Gestaffelte Einblendung: Button, Buchstaben, Pfeil-Kapsel, FAQ, Hinweis. JS setzt data-aw-enter;
   ohne JS bleibt alles sichtbar. Nur opacity, translate und scale; einmalige Übergänge, kein perfObs nötig. */
#stepsContainer .aw-cta-label span {
    transition:opacity 400ms ease calc(80ms + var(--aw-i)*22ms),translate 600ms cubic-bezier(.22,1,.36,1) calc(80ms + var(--aw-i)*22ms)
}

#stepsContainer .aw-arrow {
    transition-delay:0ms,380ms,380ms
}

#stepsContainer .aw-product[data-aw-enter="out"] :is(.aw-cta,.aw-faq,.aw-reassurance) {
    opacity:0;
    translate:0 14px
}

#stepsContainer .aw-product[data-aw-enter="out"] .aw-cta-label span {
    opacity:0;
    translate:0 6px
}

#stepsContainer .aw-product[data-aw-enter="out"] .aw-arrow {
    opacity:0;
    scale:.6
}

#stepsContainer .aw-status {
    position:absolute;
    inline-size:1px;
    block-size:1px;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap
}

@keyframes aw-liquid-letter {
    0% {
        transform:translateY(0)
    }
    36% {
        transform:translateY(-3px)
    }
    100% {
        transform:translateY(0)
    }
}

@container aw-stage (max-width:359px) {
    #stepsContainer .aw-product {
        padding:28px 20px 25px;
        gap:20px
    }
    #stepsContainer .aw-actions {
        gap:9px;
        grid-template-columns:minmax(0,1fr) 64px
    }
    #stepsContainer .aw-cta {
        padding-inline-start:14px;
        letter-spacing:.06em
    }
}

@container aw-stage (min-width:620px) {
    #stepsContainer .aw-product {
        padding:40px 38px 30px;
        gap:24px
    }
    #stepsContainer .aw-actions {
        gap:22px;
        grid-template-columns:minmax(0,1fr) 75px;
        margin-block-start:2px
    }
    #stepsContainer .aw-cta {
        --aw-cta-h:66px;
        padding-inline-start:27px
    }
}

@media(prefers-reduced-motion:reduce) {
    #stepsContainer .aw-product *,#stepsContainer .aw-product *::before,#stepsContainer .aw-product *::after {
        animation:none!important;
        transition:none!important
    }
    #stepsContainer .aw-product[data-aw-enter] :is(.aw-cta,.aw-faq,.aw-reassurance,.aw-cta-label span,.aw-arrow) {
        opacity:1;
        translate:none;
        scale:none
    }
}

#stepsContainer .aw-body {
    display:grid;
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto auto;
    gap:18px;
    align-items:start;
    position:relative
}

#stepsContainer .aw-scene {
    grid-column:1;
    grid-row:1;
    position:relative;
    isolation:isolate;
    inline-size:100%;
    max-inline-size:430px;
    margin-inline:auto;
    aspect-ratio:420/366
}

#stepsContainer .aw-station {
    inset-block-start:calc((var(--aw-y) - 20)/366*100%);
    --aw-station-soft:#edf4f9;
    --aw-station-active:#d8eaf5;
    --aw-station-passive:#496f89;
    --aw-station-ink:#28688f
}

#stepsContainer .aw-station[data-aw-step="1"] {
    --aw-station-soft:#faf0f5;
    --aw-station-active:#f2dce7;
    --aw-station-passive:#815d76
}

#stepsContainer .aw-station[data-aw-step="2"] {
    --aw-station-soft:#f4f7f0;
    --aw-station-active:#e4edd8;
    --aw-station-passive:#61734f;
    --aw-station-ink:#456a26
}

#stepsContainer .aw-node {
    display:grid;
    place-items:center;
    inline-size:clamp(28px,8.5cqw,34px);
    block-size:clamp(28px,8.5cqw,34px);
    border-radius:50%;
    background:linear-gradient(145deg,rgba(255,255,255,.98),var(--aw-station-soft));
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:var(--aw-station-passive);
    box-shadow:0 2px 7px rgba(30,41,59,.08);
    font-size:12px;
    line-height:1.2;
    font-weight:750;
    transition:transform 500ms cubic-bezier(.22,1,.36,1),background-color 350ms ease,box-shadow 350ms ease
}

#stepsContainer .aw-station[data-aw-mark="current"] .aw-node {
    color:var(--aw-station-ink);
    font-weight:850;
    box-shadow:0 3px 10px rgba(30,41,59,.09)
}

/* Aktive Füllung als eigene Ebene: Sie blendet per opacity ein, sobald die gegangene Strecke die Station berührt. */
#stepsContainer .aw-node {
    position:relative;
    isolation:isolate
}

#stepsContainer .aw-node::before {
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    border-radius:inherit;
    background:linear-gradient(145deg,rgba(255,255,255,.55),var(--aw-station-active));
    opacity:0;
    transition:opacity 320ms ease
}

/* Gegangene Station: halbe Füllung, Ziffer in Stationsfarbe; die aktuelle Station trägt die volle Füllung. */
#stepsContainer .aw-station[data-aw-mark="passed"] .aw-node {
    color:var(--aw-station-ink)
}

#stepsContainer .aw-station[data-aw-mark="passed"] .aw-node::before {
    opacity:.5
}

#stepsContainer .aw-station[data-aw-mark="current"] .aw-node::before {
    opacity:1
}

/* Ankunft: Die Station federt einmal, wenn die Strecke sie erreicht (scale, unabhängig vom Hover-transform). */
#stepsContainer .aw-station[data-aw-pop="true"] .aw-node {
    animation:aw-station-arrive 560ms cubic-bezier(.22,1,.36,1)
}

@keyframes aw-station-arrive {
    0% {
        scale:1
    }
    38% {
        scale:1.12
    }
    100% {
        scale:1
    }
}

#stepsContainer .aw-label {
    position:absolute;
    inset-inline-start:50%;
    inset-block-start:calc(100% + 6px);
    /* Optische Mitte: Das Wort steht unter der Station, der Pfeil (gap 5px + 4px) hängt rechts daneben. */
    transform:translateX(calc(-50% + (5px + 4px)/2));
    display:inline-flex;
    align-items:center;
    gap:5px;
    white-space:nowrap;
    color:#586b80;
    font-size:11px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:-.025em
}

#stepsContainer .aw-label::after {
    content:"";
    display:block;
    inline-size:4px;
    block-size:4px;
    border-block-start:1px solid currentColor;
    border-inline-end:1px solid currentColor;
    transform:rotate(45deg);
    opacity:.65;
    transition:translate 350ms cubic-bezier(.22,1,.36,1)
}

@media (hover:hover) {
    #stepsContainer .aw-station:hover .aw-label::after {
        translate:2px 0
    }
}

#stepsContainer .aw-copy-stack {
    grid-column:1;
    grid-row:1/span 2;
    display:grid;
    grid-template-rows:subgrid;
    align-items:start;
    min-inline-size:0;
    pointer-events:none
}

#stepsContainer .aw-copy-panel {
    grid-column:1;
    grid-row:1/span 2;
    display:grid;
    grid-template-rows:subgrid;
    min-inline-size:0;
    opacity:0;
    pointer-events:none;
    transform:translateY(7px);
    /* Nacheinander statt übereinander: Der alte Text ist nach --aw-copy-out weg, erst dann blendet der neue ein. */
    --aw-copy-out:160ms;
    transition:opacity var(--aw-copy-out) ease,transform 600ms cubic-bezier(.22,1,.36,1)
}

#stepsContainer .aw-copy-panel.is-current {
    opacity:1;
    pointer-events:none;
    transform:translateY(0);
    transition:opacity 280ms ease var(--aw-copy-out),transform 600ms cubic-bezier(.22,1,.36,1) var(--aw-copy-out)
}

#stepsContainer .aw-copy-head {
    grid-row:1;
    align-self:start;
    display:block;
    inline-size:40%;
    margin-block:19% 0;
    margin-inline:55% 0;
    min-inline-size:0;
    opacity:0;
    transform:translateY(5px);
    transition:opacity 180ms ease,transform 480ms cubic-bezier(.22,1,.36,1)
}

#stepsContainer .aw-copy-panel.is-current .aw-copy-head {
    opacity:1;
    transform:translateY(0);
    transition:opacity 280ms ease,transform 480ms cubic-bezier(.22,1,.36,1)
}

#stepsContainer .aw-copy-panel p {
    grid-row:2;
    align-self:start;
    pointer-events:auto
}

#stepsContainer .aw-countline {
    margin:0 0 7px;
    color:var(--aw-accent);
    font-size:11px;
    line-height:1.45;
    font-weight:800;
    letter-spacing:.065em;
    text-transform:uppercase
}

#stepsContainer .aw-copy-panel h3 {
    margin:0;
    font-size:clamp(22px,5.7cqw,28px);
    line-height:1.1;
    letter-spacing:-.042em;
    font-weight:780;
    color:var(--aw-ink)
}

/* Zweite Titelzeile: Steht der Titel in der Szene neben dem Bogen, beginnt "Eingewöhnung" in einer eigenen Zeile.
   Unter 360px und ab 620px Spaltenbreite steht der Titel frei und bleibt einzeilig (siehe Ende der Datei). */
#stepsContainer .aw-title-line {
    display:block
}

#stepsContainer .aw-copy-panel[data-aw-panel="1"] .aw-copy-head {
    inline-size:58%;
    margin-block-start:0;
    margin-inline-start:0
}

#stepsContainer .aw-copy-panel[data-aw-panel="2"] .aw-copy-head {
    inline-size:58%;
    margin-block-start:7%;
    margin-inline-start:0
}

@container aw-stage (max-width:359px) {
    #stepsContainer .aw-body {
        grid-template-rows:auto auto;
        gap:17px
    }
    #stepsContainer .aw-copy-stack {
        grid-row:2;
        display:grid;
        grid-template-rows:none
    }
    #stepsContainer .aw-copy-panel {
        grid-area:1/1;
        display:block
    }
    #stepsContainer .aw-copy-panel[data-aw-panel] .aw-copy-head {
        inline-size:100%;
        margin:0 0 12px
    }
    #stepsContainer .aw-countline {
        margin-block-end:6px
    }
    #stepsContainer .aw-copy-panel h3 {
        font-size:clamp(24px,7cqw,28px)
    }
}

@container aw-stage (min-width:620px) {
    #stepsContainer .aw-body {
        grid-template-columns:minmax(0,1.17fr) minmax(0,.98fr);
        grid-template-rows:auto;
        gap:22px;
        align-items:center
    }
    #stepsContainer .aw-scene {
        grid-column:1;
        grid-row:1;
        max-inline-size:none
    }
    #stepsContainer .aw-copy-stack {
        grid-column:2;
        grid-row:1;
        grid-template-rows:none;
        align-self:center
    }
    #stepsContainer .aw-copy-panel {
        grid-area:1/1;
        display:block
    }
    #stepsContainer .aw-copy-panel[data-aw-panel] .aw-copy-head {
        inline-size:100%;
        margin:0 0 16px
    }
    #stepsContainer .aw-countline {
        margin-block-end:9px
    }
    #stepsContainer .aw-copy-panel h3 {
        font-size:clamp(26px,4cqw,28px)
    }
}

#stepsContainer .aw-product {
    --aw-caption-exit:180ms;
    --aw-caption-clearance:6px;
    --aw-section-gap:18px;
    --aw-body-gap:10px;
    gap:var(--aw-section-gap)
}

#stepsContainer .aw-body {
    gap:var(--aw-body-gap)
}

#stepsContainer .aw-copy-head {
    transition:opacity var(--aw-caption-exit) ease,transform 480ms cubic-bezier(.22,1,.36,1)
}

#stepsContainer .aw-product[data-aw-caption-ready="false"] .aw-copy-head {
    opacity:0;
    transform:translateY(5px)
}

@container aw-stage (max-width:359px) {
    #stepsContainer .aw-product {
        --aw-body-gap:14px
    }
}

@container aw-stage (min-width:620px) {
    #stepsContainer .aw-product {
        --aw-section-gap:20px;
        --aw-body-gap:22px
    }
}

/* Einbau in die bestehende Startseiten-Spalte; Originalüberschrift bleibt außerhalb. */
#stepsContainer .aw-product {
    padding:0;
    border-radius:0;
    background:none
}

#stepsContainer .aw-intro {
    max-inline-size:none;
    margin:0
}

#stepsContainer .aw-station,#stepsContainer .aw-cta,#stepsContainer .aw-faq {
    cursor:pointer
}

#stepsContainer .aw-station:focus-visible,#stepsContainer .aw-cta:focus-visible,#stepsContainer .aw-faq:focus-visible {
    outline:2px solid currentColor;
    outline-offset:4px
}

#stepsContainer .aw-cta:focus-visible,#stepsContainer .aw-faq:focus-visible {
    outline-offset:-4px
}

@container aw-stage (max-width:359px) {
    #stepsContainer .aw-title-line {
        display:inline
    }
}

@container aw-stage (min-width:620px) {
    #stepsContainer .aw-title-line {
        display:inline
    }
}