/* ============================================================
 * KNOWLISTIC ANALYSE · PEP & POWER
 * Bootstrap 5.3 bleibt vollständig für Grid und Layout zuständig.
 * ============================================================ */

.wachapp-analysis-shell {
    --wachapp-analysis-cyan: #21d4fd;
    --wachapp-analysis-blue: #4f7cff;
    --wachapp-analysis-violet: #8b5cf6;
    --wachapp-analysis-magenta: #f451c6;
    --wachapp-analysis-lime: #9be15d;
    --wachapp-analysis-orange: #ff9f43;
    --wachapp-analysis-red: #ff5f6d;
    --wachapp-analysis-panel: rgba(var(--bs-body-bg-rgb), .86);
    --wachapp-analysis-border: rgba(var(--bs-emphasis-color-rgb), .11);
    --wachapp-analysis-shadow: 0 1.25rem 3.75rem rgba(5, 13, 35, .13);
    position: relative;
    isolation: isolate;
    min-height: 100vh;
    overflow: hidden;
    background:
        radial-gradient(circle at 6% 3%, rgba(33, 212, 253, .12), transparent 26rem),
        radial-gradient(circle at 93% 14%, rgba(244, 81, 198, .10), transparent 28rem),
        linear-gradient(180deg, rgba(var(--bs-tertiary-bg-rgb), .72), rgba(var(--bs-body-bg-rgb), 1) 30rem);
}

[data-bs-theme="dark"] .wachapp-analysis-shell {
    --wachapp-analysis-panel: rgba(13, 18, 33, .78);
    --wachapp-analysis-border: rgba(255, 255, 255, .10);
    --wachapp-analysis-shadow: 0 1.6rem 5rem rgba(0, 0, 0, .38);
    background:
        radial-gradient(circle at 8% 3%, rgba(33, 212, 253, .17), transparent 29rem),
        radial-gradient(circle at 94% 13%, rgba(244, 81, 198, .15), transparent 31rem),
        radial-gradient(circle at 55% 48%, rgba(139, 92, 246, .08), transparent 34rem),
        linear-gradient(180deg, #080d19 0, #0d1424 27rem, var(--bs-body-bg) 58rem);
}

.wachapp-analysis-shell::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 42rem;
    content: "";
    pointer-events: none;
    opacity: .42;
    background-image:
        linear-gradient(rgba(var(--bs-emphasis-color-rgb), .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--bs-emphasis-color-rgb), .035) 1px, transparent 1px);
    background-size: 34px 34px;
    mask-image: linear-gradient(to bottom, #000 0, transparent 92%);
}

.wachapp-analysis-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 2rem;
    color: #fff;
    background:
        radial-gradient(circle at 82% 18%, rgba(255, 255, 255, .20), transparent 13rem),
        radial-gradient(circle at 6% 100%, rgba(33, 212, 253, .34), transparent 18rem),
        linear-gradient(125deg, #101a38 0%, #263b88 43%, #7c3aed 76%, #d946b8 112%);
    box-shadow: 0 2rem 5rem rgba(37, 51, 130, .28);
}

.wachapp-analysis-hero::before,
.wachapp-analysis-hero::after {
    position: absolute;
    content: "";
    pointer-events: none;
    border-radius: 50%;
    filter: blur(2px);
}

.wachapp-analysis-hero::before {
    top: -7rem;
    right: -5rem;
    width: 21rem;
    height: 21rem;
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: 0 0 0 2.5rem rgba(255, 255, 255, .035), 0 0 0 5rem rgba(255, 255, 255, .025);
}

.wachapp-analysis-hero::after {
    bottom: -9rem;
    left: 38%;
    width: 18rem;
    height: 18rem;
    background: rgba(33, 212, 253, .12);
}

.wachapp-analysis-hero > * {
    position: relative;
    z-index: 1;
}

.wachapp-analysis-eyebrow,
.wachapp-analysis-section-kicker {
    letter-spacing: .13em;
    text-transform: uppercase;
    font-size: .73rem;
    font-weight: 800;
}

.wachapp-analysis-hero-title {
    max-width: 16ch;
    font-size: clamp(2.25rem, 5.6vw, 5rem);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.wachapp-analysis-hero-copy {
    max-width: 50rem;
    color: rgba(255, 255, 255, .78);
    font-size: clamp(1rem, 1.6vw, 1.2rem);
}

.wachapp-analysis-live-dot {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #9be15d;
    box-shadow: 0 0 0 .3rem rgba(155, 225, 93, .15), 0 0 1.4rem rgba(155, 225, 93, .65);
}

.wachapp-analysis-hero-pill {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .10);
    backdrop-filter: blur(12px);
}

.wachapp-analysis-control-panel {
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 1.35rem;
    background: rgba(8, 13, 30, .32);
    backdrop-filter: blur(18px);
}

.wachapp-analysis-control-panel .form-select,
.wachapp-analysis-control-panel .form-check-input {
    border-color: rgba(255, 255, 255, .20);
}

.wachapp-analysis-control-panel .form-select {
    color: #fff;
    background-color: rgba(3, 9, 25, .34);
}

.wachapp-analysis-control-panel .form-select option {
    color: var(--bs-body-color);
    background: var(--bs-body-bg);
}

.wachapp-analysis-reload {
    min-height: 3rem;
    border: 0;
    color: #11172b;
    background: #fff;
    box-shadow: 0 .85rem 2rem rgba(0, 0, 0, .16);
}

.wachapp-analysis-reload:hover,
.wachapp-analysis-reload:focus-visible {
    color: #11172b;
    background: #dffaff;
    transform: translateY(-2px);
}

.wachapp-analysis-section-head {
    position: relative;
    padding-left: 1.15rem;
}

.wachapp-analysis-section-head::before {
    position: absolute;
    top: .2rem;
    bottom: .2rem;
    left: 0;
    width: .28rem;
    content: "";
    border-radius: 999px;
    background: linear-gradient(180deg, var(--wachapp-analysis-cyan), var(--wachapp-analysis-violet));
    box-shadow: 0 0 1.15rem rgba(33, 212, 253, .34);
}

.wachapp-analysis-section-title {
    font-weight: 850;
    letter-spacing: -.035em;
}

.wachapp-analysis-section-copy {
    max-width: 58rem;
}

.wachapp-analysis-glass,
.wachapp-analysis-chart-card,
.wachapp-analysis-kpi,
.wachapp-analysis-note {
    border: 1px solid var(--wachapp-analysis-border);
    background: var(--wachapp-analysis-panel);
    box-shadow: var(--wachapp-analysis-shadow);
    backdrop-filter: blur(18px);
}

.wachapp-analysis-kpi {
    position: relative;
    overflow: hidden;
    min-height: 100%;
    border-radius: 1.4rem;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.wachapp-analysis-kpi::after {
    position: absolute;
    right: -2.8rem;
    bottom: -3.4rem;
    width: 9rem;
    height: 9rem;
    content: "";
    border-radius: 50%;
    opacity: .13;
    background: currentColor;
    filter: blur(4px);
}

.wachapp-analysis-kpi:hover {
    transform: translateY(-4px);
    border-color: rgba(var(--bs-primary-rgb), .28);
    box-shadow: 0 1.4rem 3.8rem rgba(6, 16, 42, .18);
}

.wachapp-analysis-kpi-icon {
    width: 3.35rem;
    height: 3.35rem;
    border: 1px solid currentColor;
    border-radius: 1rem;
    background: color-mix(in srgb, currentColor 13%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
}

.wachapp-analysis-kpi-value {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -.055em;
}

.wachapp-analysis-kpi--cyan { color: var(--wachapp-analysis-cyan); }
.wachapp-analysis-kpi--blue { color: var(--wachapp-analysis-blue); }
.wachapp-analysis-kpi--violet { color: var(--wachapp-analysis-violet); }
.wachapp-analysis-kpi--magenta { color: var(--wachapp-analysis-magenta); }
.wachapp-analysis-kpi--lime { color: #69b934; }
.wachapp-analysis-kpi--orange { color: var(--wachapp-analysis-orange); }
.wachapp-analysis-kpi--red { color: var(--wachapp-analysis-red); }

[data-bs-theme="dark"] .wachapp-analysis-kpi--lime { color: var(--wachapp-analysis-lime); }

.wachapp-analysis-kpi .wachapp-analysis-kpi-label,
.wachapp-analysis-kpi .wachapp-analysis-kpi-description,
.wachapp-analysis-kpi .wachapp-analysis-kpi-help {
    color: var(--bs-body-color);
}

.wachapp-analysis-kpi .wachapp-analysis-kpi-description,
.wachapp-analysis-kpi .wachapp-analysis-kpi-help {
    opacity: .64;
}

.wachapp-analysis-arena {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(139, 92, 246, .22);
    border-radius: 2rem;
    background:
        radial-gradient(circle at 92% 0%, rgba(244, 81, 198, .14), transparent 22rem),
        radial-gradient(circle at 0% 100%, rgba(33, 212, 253, .12), transparent 25rem),
        var(--wachapp-analysis-panel);
    box-shadow: var(--wachapp-analysis-shadow);
}

.wachapp-analysis-arena-mark {
    width: 4.6rem;
    height: 4.6rem;
    color: #fff;
    border-radius: 1.35rem;
    background: linear-gradient(135deg, var(--wachapp-analysis-violet), var(--wachapp-analysis-magenta));
    box-shadow: 0 1rem 2.3rem rgba(139, 92, 246, .28);
}

.wachapp-analysis-chart-card {
    position: relative;
    overflow: hidden;
    border-radius: 1.5rem;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.wachapp-analysis-chart-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--bs-primary-rgb), .25);
}

.wachapp-analysis-chart-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: .22rem;
    content: "";
    background: linear-gradient(90deg, var(--wachapp-analysis-cyan), var(--wachapp-analysis-violet), var(--wachapp-analysis-magenta));
}

.wachapp-analysis-chart-icon {
    width: 2.8rem;
    height: 2.8rem;
    border-radius: .9rem;
    color: var(--wachapp-analysis-blue);
    border: 1px solid color-mix(in srgb, currentColor 24%, transparent);
    background: color-mix(in srgb, currentColor 10%, transparent);
}

.wachapp-analysis-chart-wrap {
    position: relative;
    height: var(--wachapp-chart-height, 340px);
    min-height: 17rem;
}

.wachapp-analysis-chart-wrap canvas {
    max-width: 100%;
}

.wachapp-analysis-download {
    border-color: var(--wachapp-analysis-border);
    background: rgba(var(--bs-body-bg-rgb), .62);
}

.wachapp-analysis-download:hover,
.wachapp-analysis-download:focus-visible {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--wachapp-analysis-blue), var(--wachapp-analysis-violet));
}

.wachapp-analysis-meta-badge {
    border: 1px solid var(--wachapp-analysis-border);
    background: rgba(var(--bs-body-bg-rgb), .58);
    backdrop-filter: blur(10px);
}

.wachapp-analysis-placeholder {
    min-height: 3.35rem;
}

.wachapp-analysis-note {
    border-radius: 1.5rem;
}

.wachapp-analysis-note-icon {
    width: 3.2rem;
    height: 3.2rem;
    color: var(--wachapp-analysis-cyan);
    border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-radius: 1rem;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

.wachapp-chart-mobile-rotate-section {
    display: none;
}

.wachapp-chart-mobile-rotate-icon-wrap {
    width: 3rem;
    height: 3rem;
}

.wachapp-chart-mobile-rotate-icon {
    display: inline-block;
    font-size: 1.75rem;
    line-height: 1;
    transform: rotate(0deg);
    transform-origin: center center;
    will-change: transform;
}

.wachapp-chart-mobile-rotate-section.has-played .wachapp-chart-mobile-rotate-icon {
    transform: rotate(90deg);
}

.wachapp-chart-mobile-rotate-section.is-animating .wachapp-chart-mobile-rotate-icon {
    animation: wachapp-chart-mobile-phone-rotate 2.6s ease-in-out 1 forwards;
}

@keyframes wachapp-chart-mobile-phone-rotate {
    0% { transform: rotate(0deg) scale(1); }
    12% { transform: rotate(-8deg) scale(1.03); }
    32% { transform: rotate(90deg) scale(1.03); }
    72% { transform: rotate(90deg) scale(1); }
    86% { transform: rotate(96deg) scale(1.03); }
    100% { transform: rotate(90deg) scale(1); }
}

@media (max-width: 575.98px) and (orientation: portrait) {
    .wachapp-chart-mobile-rotate-section { display: block; }
}

@media (max-width: 991.98px) {
    .wachapp-analysis-hero { border-radius: 1.45rem; }
    .wachapp-analysis-arena { border-radius: 1.45rem; }
    .wachapp-analysis-chart-wrap { min-height: 15rem; }
}

@media (max-width: 575.98px) {
    .wachapp-analysis-shell { overflow: clip; }
    .wachapp-analysis-hero-title { font-size: clamp(2.15rem, 13vw, 3.3rem); }
    .wachapp-analysis-chart-card .card-body { padding: 1rem !important; }
    .wachapp-analysis-chart-wrap { height: min(var(--wachapp-chart-height, 340px), 68vh); }
    .wachapp-analysis-kpi-value { font-size: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wachapp-analysis-kpi,
    .wachapp-analysis-chart-card,
    .wachapp-analysis-reload { transition: none; }
    .wachapp-analysis-kpi:hover,
    .wachapp-analysis-chart-card:hover,
    .wachapp-analysis-reload:hover { transform: none; }
    .wachapp-chart-mobile-rotate-section.is-animating .wachapp-chart-mobile-rotate-icon { animation: none; }
    .wachapp-chart-mobile-rotate-section.has-played .wachapp-chart-mobile-rotate-icon,
    .wachapp-chart-mobile-rotate-icon { transform: rotate(90deg); }
}


/* ============================================================
 * CHART-LESBARKEIT, FLÄCHENNUTZUNG UND THEME-WECHSEL
 * ============================================================ */

.wachapp-analysis-container {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
}

.wachapp-analysis-chart-head {
    min-height: 5.75rem;
}

@media (min-width: 992px) {
    .wachapp-analysis-chart-head > .d-flex {
        flex: 1 1 22rem;
    }
}

.wachapp-analysis-chart-head .wachapp-analysis-download {
    align-self: flex-start;
}

.wachapp-analysis-chart-wrap--status {
    min-height: 22rem;
}

.wachapp-analysis-chart-wrap canvas {
    display: block;
}

@media (min-width: 1400px) {
    .wachapp-analysis-chart-card .card-body {
        padding: 1.35rem !important;
    }
}

@media (max-width: 1199.98px) {
    .wachapp-analysis-chart-head {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .wachapp-analysis-chart-head .wachapp-analysis-download {
        width: 100%;
    }

    .wachapp-analysis-chart-wrap--status {
        min-height: 24rem;
    }
}

/* ============================================================
 * MEHRSTUFIGER ANALYSE-RUNDGANG
 * ============================================================ */

.wachapp-analysis-stage {
    animation: wachapp-analysis-stage-in .42s ease both;
}

@keyframes wachapp-analysis-stage-in {
    from {
        opacity: 0;
        transform: translateY(.7rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wachapp-analysis-flow-nav {
    position: relative;
}

.wachapp-analysis-flow-nav::before {
    position: absolute;
    top: 50%;
    right: 2rem;
    left: 2rem;
    height: 1px;
    content: "";
    background:
        linear-gradient(
            90deg,
            var(--wachapp-analysis-cyan),
            var(--wachapp-analysis-violet) var(--wachapp-analysis-progress, 0%),
            transparent var(--wachapp-analysis-progress, 0%)
        ),
        var(--wachapp-analysis-border);
    box-shadow: 0 0 1rem color-mix(in srgb, var(--wachapp-analysis-violet) 18%, transparent);
}

[data-analysis-flow-track] {
    scroll-snap-type: x proximity;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

[data-analysis-flow-track]::-webkit-scrollbar {
    display: none;
}

[data-analysis-flow-track] > * {
    scroll-snap-align: center;
}

.wachapp-analysis-flow-step {
    position: relative;
    z-index: 1;
    min-height: 5.2rem;
    overflow: hidden;
    border: 1px solid var(--wachapp-analysis-border);
    border-radius: 1.25rem;
    background: color-mix(in srgb, var(--bs-body-bg) 86%, transparent);
    box-shadow: 0 .8rem 2rem rgba(5, 13, 35, .07);
    backdrop-filter: blur(16px);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.wachapp-analysis-flow-step::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: .2rem;
    content: "";
    opacity: 0;
    background: linear-gradient(90deg, var(--wachapp-analysis-cyan), var(--wachapp-analysis-violet), var(--wachapp-analysis-magenta));
    transition: opacity .2s ease;
}

.wachapp-analysis-flow-step:hover,
.wachapp-analysis-flow-step:focus-visible {
    z-index: 2;
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--wachapp-analysis-blue) 38%, var(--wachapp-analysis-border));
    box-shadow: 0 1rem 2.8rem rgba(5, 13, 35, .13);
}

.wachapp-analysis-flow-step.is-active {
    border-color: color-mix(in srgb, var(--wachapp-analysis-violet) 48%, transparent);
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--wachapp-analysis-magenta) 18%, transparent), transparent 55%),
        color-mix(in srgb, var(--bs-body-bg) 92%, var(--wachapp-analysis-violet) 8%);
    box-shadow: 0 1rem 3rem color-mix(in srgb, var(--wachapp-analysis-violet) 15%, transparent);
}

.wachapp-analysis-flow-step.is-complete {
    border-color: color-mix(in srgb, var(--wachapp-analysis-cyan) 28%, var(--wachapp-analysis-border));
}

.wachapp-analysis-flow-step.is-complete .wachapp-analysis-flow-icon {
    color: var(--wachapp-analysis-violet);
    background: color-mix(in srgb, var(--wachapp-analysis-violet) 12%, var(--bs-body-bg));
}

.wachapp-analysis-flow-step.is-active::after {
    opacity: 1;
}

.wachapp-analysis-flow-icon {
    width: 2.65rem;
    height: 2.65rem;
    border-radius: .9rem;
    color: var(--wachapp-analysis-blue);
    border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
    background: color-mix(in srgb, currentColor 11%, transparent);
}

.wachapp-analysis-flow-step.is-active .wachapp-analysis-flow-icon {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--wachapp-analysis-blue), var(--wachapp-analysis-violet), var(--wachapp-analysis-magenta));
    box-shadow: 0 .7rem 1.5rem color-mix(in srgb, var(--wachapp-analysis-violet) 28%, transparent);
}

.wachapp-analysis-flow-number {
    color: var(--wachapp-analysis-blue);
    letter-spacing: .12em;
}

.wachapp-analysis-flow-card {
    position: relative;
    overflow: hidden;
    min-height: 10rem;
    border: 1px solid var(--wachapp-analysis-border);
    border-radius: 1.5rem;
    background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent);
    box-shadow: var(--wachapp-analysis-shadow);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.wachapp-analysis-flow-card:hover,
.wachapp-analysis-flow-card:focus-visible {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--wachapp-analysis-violet) 35%, var(--wachapp-analysis-border));
}

.wachapp-analysis-flow-card.is-next {
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--wachapp-analysis-magenta) 17%, transparent), transparent 52%),
        linear-gradient(135deg, color-mix(in srgb, var(--bs-body-bg) 92%, var(--wachapp-analysis-blue) 8%), color-mix(in srgb, var(--bs-body-bg) 92%, var(--wachapp-analysis-violet) 8%));
}

.wachapp-analysis-flow-card.is-muted {
    box-shadow: none;
    opacity: .78;
}

.wachapp-analysis-flow-card-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 1rem;
    color: #fff;
    background: linear-gradient(135deg, var(--wachapp-analysis-blue), var(--wachapp-analysis-violet));
    box-shadow: 0 .8rem 1.8rem color-mix(in srgb, var(--wachapp-analysis-violet) 25%, transparent);
}

.wachapp-analysis-next-label {
    color: var(--wachapp-analysis-magenta);
    letter-spacing: .12em;
}

.wachapp-analysis-kpi-placeholder-icon {
    height: 3.4rem;
}

.wachapp-analysis-chart-wrap--compact,
.wachapp-analysis-placeholder--compact {
    height: 18rem;
}

.wachapp-analysis-chart-wrap--medium,
.wachapp-analysis-placeholder--medium {
    height: 21rem;
}

.wachapp-analysis-chart-wrap--large,
.wachapp-analysis-placeholder--large {
    height: 25rem;
}

.wachapp-analysis-chart-wrap--wide,
.wachapp-analysis-placeholder--wide {
    height: 28rem;
}

.wachapp-analysis-placeholder--compact,
.wachapp-analysis-placeholder--medium,
.wachapp-analysis-placeholder--large,
.wachapp-analysis-placeholder--wide {
    display: block;
}

.wachapp-analysis-public .wachapp-analysis-flow-step,
.wachapp-analysis-public .wachapp-analysis-flow-card {
    backdrop-filter: blur(12px);
}

@media (max-width: 1199.98px) {
    .wachapp-analysis-flow-nav::before {
        display: none;
    }

    .wachapp-analysis-flow-step {
        min-height: 4.9rem;
    }
}

@media (max-width: 575.98px) {
    .wachapp-analysis-chart-wrap--compact,
    .wachapp-analysis-placeholder--compact {
        height: min(18rem, 62vh);
    }

    .wachapp-analysis-chart-wrap--medium,
    .wachapp-analysis-placeholder--medium {
        height: min(21rem, 68vh);
    }

    .wachapp-analysis-chart-wrap--large,
    .wachapp-analysis-placeholder--large,
    .wachapp-analysis-chart-wrap--wide,
    .wachapp-analysis-placeholder--wide {
        height: min(25rem, 76vh);
    }

    .wachapp-analysis-flow-card {
        min-height: 8.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wachapp-analysis-stage {
        animation: none;
    }

    .wachapp-analysis-flow-step,
    .wachapp-analysis-flow-card {
        transition: none;
    }
}

/* ============================================================
 * RESPONSIVE RHYTHMUS UND GESCHMEIDIGER STATIONSWECHSEL
 * ============================================================ */

.wachapp-analysis-shell.is-flow-loading {
    cursor: progress;
}

.wachapp-analysis-shell.is-flow-loading [data-analysis-flow-link] {
    pointer-events: none;
}

.wachapp-analysis-shell.is-flow-leaving {
    opacity: 0;
    transition: opacity .13s ease;
}

.wachapp-analysis-shell.is-flow-entering {
    animation: wachapp-analysis-shell-enter .38s ease both;
}

.wachapp-analysis-shell.is-flow-entering .wachapp-analysis-hero,
.wachapp-analysis-shell.is-flow-entering .wachapp-analysis-flow-nav {
    animation: wachapp-analysis-panel-slide .46s cubic-bezier(.2, .82, .2, 1) both;
}

.wachapp-analysis-shell.is-flow-entering .wachapp-analysis-flow-nav {
    animation-delay: .035s;
}

.wachapp-analysis-shell.is-flow-entering.is-flow-backward .wachapp-analysis-hero,
.wachapp-analysis-shell.is-flow-entering.is-flow-backward .wachapp-analysis-flow-nav {
    animation-name: wachapp-analysis-panel-slide-backward;
}

.wachapp-analysis-shell.is-flow-entering .wachapp-analysis-stage {
    animation: wachapp-analysis-stage-flow-in .42s .07s ease both;
}

.wachapp-analysis-shell::after {
    position: fixed;
    z-index: 1080;
    top: max(var(--safe-area-inset-top, env(safe-area-inset-top, 0px)), 0px);
    right: 0;
    left: 0;
    height: .22rem;
    content: "";
    pointer-events: none;
    opacity: 0;
    transform: scaleX(.12);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--wachapp-analysis-cyan), var(--wachapp-analysis-violet), var(--wachapp-analysis-magenta));
    box-shadow: 0 0 1.2rem color-mix(in srgb, var(--wachapp-analysis-violet) 52%, transparent);
    transition: opacity .16s ease, transform .4s cubic-bezier(.2, .8, .2, 1);
}

.wachapp-analysis-shell.is-flow-loading::after {
    opacity: 1;
    transform: scaleX(.82);
}

@keyframes wachapp-analysis-shell-enter {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes wachapp-analysis-panel-slide {
    from {
        opacity: 0;
        transform: translate3d(1.4rem, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wachapp-analysis-panel-slide-backward {
    from {
        opacity: 0;
        transform: translate3d(-1.4rem, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes wachapp-analysis-stage-flow-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Der Layer bleibt außerhalb des ausgetauschten <main> bestehen. */
.wachapp-analysis-transition-layer {
    position: fixed;
    z-index: 1095;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:
        max(1rem, var(--safe-area-inset-top, env(safe-area-inset-top, 0px)))
        max(1rem, var(--safe-area-inset-right, env(safe-area-inset-right, 0px)))
        max(1rem, var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)))
        max(1rem, var(--safe-area-inset-left, env(safe-area-inset-left, 0px)));
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    touch-action: none;
    background:
        radial-gradient(circle at 50% 42%, rgba(139, 92, 246, .18), transparent 22rem),
        linear-gradient(var(--bs-body-bg), var(--bs-body-bg));
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.wachapp-analysis-transition-layer.is-visible {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    transition: opacity .16s ease;
}

.wachapp-analysis-transition-card {
    display: flex;
    width: min(92vw, 27rem);
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    padding: 1.65rem 1.5rem;
    border: 1px solid rgba(var(--bs-emphasis-color-rgb), .12);
    border-radius: 1.75rem;
    background:
        radial-gradient(circle at 50% 0, rgba(33, 212, 253, .12), transparent 60%),
        rgba(var(--bs-body-bg-rgb), .96);
    box-shadow: 0 1.75rem 5rem rgba(7, 12, 31, .24);
    transform: translate3d(0, .75rem, 0) scale(.97);
    transition: transform .3s cubic-bezier(.2, .82, .2, 1);
}

.wachapp-analysis-transition-layer.is-visible .wachapp-analysis-transition-card {
    transform: translate3d(0, 0, 0) scale(1);
}

.wachapp-analysis-crystal-wrap {
    position: relative;
    display: flex;
    width: 5.25rem;
    height: 5.25rem;
    align-items: center;
    justify-content: center;
}

.wachapp-analysis-crystal-wrap::before {
    position: absolute;
    left: 50%;
    bottom: -.15rem;
    width: 4.8rem;
    height: 2.4rem;
    content: "";
    background: radial-gradient(ellipse, rgba(79, 124, 255, .32), rgba(79, 124, 255, .12) 48%, transparent 76%);
    transform: translateX(-50%);
    pointer-events: none;
}

.wachapp-analysis-crystal {
    position: relative;
    z-index: 2;
    width: 3.6rem;
    height: 4.25rem;
    will-change: transform;
    backface-visibility: hidden;
    animation: wachapp-analysis-crystal-float 1.35s ease-in-out infinite;
}

/* Gradient und Clip bewegen sich filterfrei; der Glow liegt statisch im Wrap. */
.wachapp-analysis-crystal::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    clip-path: polygon(50% 0, 94% 30%, 76% 84%, 50% 100%, 24% 84%, 6% 30%);
    background:
        linear-gradient(135deg, rgba(255, 255, 255, .92) 0 18%, transparent 19%),
        conic-gradient(from 210deg, #21d4fd, #4f7cff, #8b5cf6, #f451c6, #21d4fd);
    box-shadow: inset 0 0 1.2rem rgba(255, 255, 255, .42);
}

.wachapp-analysis-crystal::before {
    position: absolute;
    inset: 12% 17% 19%;
    z-index: 1;
    content: "";
    clip-path: polygon(50% 0, 100% 35%, 68% 100%, 32% 100%, 0 35%);
    opacity: .72;
    background: linear-gradient(145deg, rgba(255, 255, 255, .85), rgba(255, 255, 255, .04) 55%);
}

.wachapp-analysis-crystal-orbit {
    position: absolute;
    inset: .15rem;
    z-index: 1;
    border: 1px solid rgba(139, 92, 246, .28);
    border-radius: 50%;
    animation: wachapp-analysis-crystal-orbit 1.7s linear infinite;
}

.wachapp-analysis-crystal-orbit::before,
.wachapp-analysis-crystal-orbit::after {
    position: absolute;
    width: .58rem;
    height: .58rem;
    content: "";
    border-radius: 50%;
    background: #21d4fd;
    box-shadow: 0 0 1rem rgba(33, 212, 253, .8);
}

.wachapp-analysis-crystal-orbit::before {
    top: -.29rem;
    left: calc(50% - .29rem);
}

.wachapp-analysis-crystal-orbit::after {
    right: .15rem;
    bottom: .35rem;
    background: #f451c6;
    box-shadow: 0 0 1rem rgba(244, 81, 198, .75);
}

.wachapp-analysis-transition-kicker {
    margin-bottom: .35rem;
    color: #8b5cf6;
    letter-spacing: .13em;
}

@keyframes wachapp-analysis-crystal-float {
    0%,
    100% {
        transform: translate3d(0, -.18rem, 0) rotate(-2deg);
    }

    50% {
        transform: translate3d(0, .28rem, 0) rotate(2deg);
    }
}

@keyframes wachapp-analysis-crystal-orbit {
    to { transform: rotate(360deg); }
}

@media (max-width: 991.98px) {
    .wachapp-analysis-chart-head {
        min-height: 0;
        margin-bottom: 1.25rem !important;
    }

    .wachapp-analysis-chart-head > .d-flex {
        flex: 0 1 auto;
    }

    .wachapp-analysis-chart-card,
    .wachapp-analysis-chart-card .card-body {
        height: auto !important;
        min-height: 0;
    }

    .wachapp-analysis-chart-card .card-body {
        display: block;
    }

    .wachapp-analysis-chart-wrap {
        min-height: 0;
    }
}

@media (max-width: 575.98px) {
    .wachapp-analysis-shell {
        padding-top: 1rem !important;
        padding-bottom: 1.5rem !important;
    }

    .wachapp-analysis-container {
        padding-right: .75rem !important;
        padding-left: .75rem !important;
    }

    .wachapp-analysis-hero {
        padding: 1.2rem !important;
        margin-bottom: 1rem !important;
        border-radius: 1.3rem;
    }

    .wachapp-analysis-hero .row {
        --bs-gutter-y: 1.35rem;
    }

    .wachapp-analysis-hero-pill {
        max-width: 100%;
        margin-bottom: 1.15rem !important;
    }

    .wachapp-analysis-hero-title {
        max-width: 100%;
        margin-bottom: 1.15rem !important;
        font-size: clamp(2rem, 10.5vw, 3rem);
        line-height: 1;
        letter-spacing: -.045em;
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
    }

    .wachapp-analysis-hero-copy {
        font-size: .98rem;
        line-height: 1.55;
    }

    .wachapp-analysis-control-panel {
        padding: .9rem !important;
        border-radius: 1.1rem;
    }

    .wachapp-analysis-flow-nav {
        margin-bottom: 1rem !important;
    }

    .wachapp-analysis-flow-step {
        min-height: 4.45rem;
        padding: .75rem !important;
        border-radius: 1rem;
    }

    .wachapp-analysis-flow-icon {
        width: 2.35rem;
        height: 2.35rem;
    }

    .wachapp-analysis-stage .row {
        --bs-gutter-y: 1rem;
    }

    .wachapp-analysis-section-head {
        margin-bottom: 1.15rem !important;
        padding-left: .85rem;
    }

    .wachapp-analysis-section-title {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
        overflow-wrap: anywhere;
    }

    .wachapp-analysis-chart-card {
        border-radius: 1.2rem;
    }

    .wachapp-analysis-chart-card .card-body {
        padding: .9rem !important;
    }

    .wachapp-analysis-chart-head {
        gap: .9rem !important;
        margin-bottom: 1rem !important;
    }

    .wachapp-analysis-chart-head > .d-flex {
        gap: .75rem !important;
    }

    .wachapp-analysis-chart-icon {
        width: 2.45rem;
        height: 2.45rem;
        border-radius: .75rem;
    }

    .wachapp-analysis-chart-head h3 {
        line-height: 1.12;
        overflow-wrap: anywhere;
    }

    .wachapp-analysis-chart-head p {
        line-height: 1.45;
    }

    .wachapp-analysis-chart-head .wachapp-analysis-download {
        width: 100%;
        min-height: 2.55rem;
        margin-top: .15rem;
    }

    .wachapp-analysis-chart-wrap--compact,
    .wachapp-analysis-placeholder--compact {
        height: min(15.5rem, 52vh);
    }

    .wachapp-analysis-chart-wrap--medium,
    .wachapp-analysis-placeholder--medium {
        height: min(18rem, 58vh);
    }

    .wachapp-analysis-chart-wrap--large,
    .wachapp-analysis-placeholder--large,
    .wachapp-analysis-chart-wrap--wide,
    .wachapp-analysis-placeholder--wide {
        height: min(20rem, 64vh);
    }

    .wachapp-analysis-chart-wrap--status {
        min-height: 0;
        height: min(20rem, 64vh);
    }

    .wachapp-analysis-flow-footer {
        margin-top: 1.25rem !important;
    }

    .wachapp-analysis-flow-card {
        min-height: 0;
        padding: 1rem !important;
        border-radius: 1.15rem;
    }

    .wachapp-analysis-transition-card {
        width: min(88vw, 23rem);
        padding: 1.35rem 1.15rem;
        border-radius: 1.45rem;
    }

    .wachapp-analysis-crystal-wrap {
        width: 4.6rem;
        height: 4.6rem;
    }

    .wachapp-analysis-crystal {
        width: 3.15rem;
        height: 3.75rem;
    }
}

@media (max-width: 380px) {
    .wachapp-analysis-hero-title {
        font-size: clamp(1.85rem, 10vw, 2.55rem);
    }

    .wachapp-analysis-flow-step {
        gap: .6rem !important;
    }

    .wachapp-analysis-flow-step .fw-bold {
        font-size: .9rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wachapp-analysis-shell,
    .wachapp-analysis-shell.is-flow-leaving,
    .wachapp-analysis-shell.is-flow-entering {
        animation: none;
        transition: none;
        transform: none;
    }

    .wachapp-analysis-shell::after {
        transition: none;
    }

    .wachapp-analysis-shell.is-flow-entering .wachapp-analysis-hero,
    .wachapp-analysis-shell.is-flow-entering .wachapp-analysis-flow-nav,
    .wachapp-analysis-shell.is-flow-entering .wachapp-analysis-stage,
    .wachapp-analysis-crystal,
    .wachapp-analysis-crystal-orbit {
        animation: none;
        transform: none;
    }

    .wachapp-analysis-transition-layer,
    .wachapp-analysis-transition-card {
        transition: none;
    }
}