/* === Workflow Diagram Animation (mit animate-Trigger) === */
.animate .wf-circle {
    opacity: 0;
    transform: scale(0.5);
    animation: wfPopIn 0.6s ease-out forwards;
}

    .animate .wf-circle:nth-of-type(1) {
        animation-delay: 0.10s;
    }

    .animate .wf-circle:nth-of-type(2) {
        animation-delay: 0.30s;
    }

    .animate .wf-circle:nth-of-type(3) {
        animation-delay: 0.50s;
    }

    .animate .wf-circle:nth-of-type(4) {
        animation-delay: 0.70s;
    }

.animate .wf-line {
    stroke-dasharray: 70;
    stroke-dashoffset: 70;
    animation: wfDrawLine 0.6s ease-out forwards;
}

    .animate .wf-line:nth-of-type(1) {
        animation-delay: 0.20s;
    }

    .animate .wf-line:nth-of-type(2) {
        animation-delay: 0.40s;
    }

    .animate .wf-line:nth-of-type(3) {
        animation-delay: 0.60s;
    }

@keyframes wfPopIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wfDrawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* === Mobile 2-Zeilen-Variante === */
@media (max-width: 36em) {
    .animate .wf-circle {
        animation-duration: 0.5s;
    }

    .animate .wf-line {
        animation-duration: 0.5s;
    }
}

/* === AI Prompt Card Hover Effekt === */
.ai-prompt-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .ai-prompt-card:hover {
        transform: translateY(-0.3125rem);
        box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15);
    }

/* === Fokusrahmen entfernen bei Mausnutzung === */
:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

.hero-background h1:focus {
    outline: none;
    box-shadow: none;
}

/* === Respektiert Systemeinstellung „Bewegung reduzieren“ === */
@media (prefers-reduced-motion: reduce) {
    .animate .wf-circle,
    .animate .wf-line {
        animation: none !important;
        opacity: 1;
        transform: none;
        stroke-dashoffset: 0;
    }
}

/* === Tabellenzeilen-Highlight === */
@keyframes rowFlash {
    0% {
        background-color: rgba(25, 135, 84, 0.18);
    }

    100% {
        background-color: transparent;
    }
}


/* === Row Fade Animation === */
@keyframes rowFade {
    0% {
        outline: 0.125rem solid rgba(25, 135, 84, 0.35);
    }

    100% {
        outline: 0.125rem solid transparent;
    }
}

.row-highlight {
    animation: rowFlash 0.8s ease-out 0s 1, rowFade 3s ease-out 0s 1;
}

/* === Puls-Animation für Aktiv-Badge === */
@keyframes pulseOnce {
    0% {
        transform: scale(0.98);
        box-shadow: 0 0 0 0 rgba(25, 135, 84, 0.3);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 0.5rem rgba(25, 135, 84, 0.0);
    }

    100% {
        transform: scale(1);
    }
}

.badge-pulse {
    animation: pulseOnce 0.6s ease-out 1;
}

/* === Responsive Feintuning für BotVision === */
/* ---------- Ab 992px abwärts ---------- */
@media (max-width: 62em) {
    .sidebar,
    .session-sidebar,
    .diagnosis-panel {
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-top: 0;
        box-shadow: none;
    }

    .content {
        padding-top: calc(var(--topbar-height) + 1rem);
    }

    .hero-background h1 {
        font-size: 2.5rem;
    }

    .hero-background .lead {
        font-size: 1.15rem;
    }
}

/* ---------- Ab 768px abwärts ---------- */
@media (max-width: 48em) {
    .hero-background {
        min-height: 60vh;
        padding: 2rem 1rem;
        text-align: center;
    }

        .hero-background h1 {
            font-size: 2rem;
        }

        .hero-background .lead {
            font-size: 1rem;
        }

        .hero-background .btn {
            display: block;
            width: 100%;
            margin: 0.5rem 0;
        }

    .workflow-diagram svg {
        height: auto;
    }

    .workflow-diagram .wf-circle,
    .workflow-diagram .wf-line {
        transform-origin: center;
    }

    .workflow-diagram .wf-circle {
        r: 1.875rem;
    }
}


/* ---------- Ab 576px abwärts ---------- */
@media (max-width: 36em) {
    .hero-background h1 {
        font-size: 1.75rem;
    }

    .hero-background .lead {
        font-size: 0.95rem;
    }

    .article-card {
        padding: 0.5rem;
    }

    .content {
        padding: 1rem;
    }

    .workflow-diagram svg {
        width: 100%;
        height: auto;
        viewBox: 0 0 18.75rem 31.25rem;
    }

    .workflow-diagram .wf-circle:nth-of-type(1) {
        cx: 4.6875rem;
        cy: 6.25rem;
    }

    .workflow-diagram .wf-circle:nth-of-type(2) {
        cx: 14.0625rem;
        cy: 6.25rem;
    }

    .workflow-diagram .wf-circle:nth-of-type(3) {
        cx: 4.6875rem;
        cy: 18.75rem;
    }

    .workflow-diagram .wf-circle:nth-of-type(4) {
        cx: 14.0625rem;
        cy: 18.75rem;
    }

    .workflow-diagram .wf-line:nth-of-type(1) {
        x1: 7.1875rem;
        y1: 6.25rem;
        x2: 11.5625rem;
        y2: 6.25rem;
    }

    .workflow-diagram .wf-line:nth-of-type(2) {
        display: none;
    }

    .workflow-diagram .wf-line:nth-of-type(3) {
        x1: 7.1875rem;
        y1: 18.75rem;
        x2: 11.5625rem;
        y2: 18.75rem;
    }

    .workflow-diagram text tspan {
        font-size: 0.75rem !important;
    }
}