/* === Responsive Feintuning für BotVision === */

/* ---------- Ab 992px abwärts (Tablets im Querformat) ---------- */
@media (max-width: 62em) {
    /* Layout-Anpassungen */
    .layout-main {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .sidebar-panel {
        display: none;
    }

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

    .sidebar,
    .session-sidebar,
    .diagnosis-panel {
        max-width: 100%;
        width: 100%;
        height: auto;
        margin-top: 0;
        box-shadow: none;
    }

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

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

/* ---------- Ab 768px abwärts (Tablets hochkant & große Smartphones) ---------- */
@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-Diagramm in zwei Zeilen umbrechen */
.workflow-diagram svg {
    height: auto;
}

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

/* Optional: kleinere Kreise */
.workflow-diagram .wf-circle {
    r: 1.875rem;
}

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

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

    /* Feature- und UseCase-Cards mit weniger Padding */
    .article-card {
        padding: 0.5rem;
    }

    /* Content-Bereich auf Smartphones enger */
    .content {
        padding: 1rem;
    }

    /* Workflow-Diagramm vertikal in 2 Zeilen anordnen */
    .workflow-diagram svg {
        width: 100%;
        height: auto;
        viewBox: 0 0 18.75rem 31.25rem;
    }

    /* Kreise in zwei Zeilen */
    .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;
    }

    /* Linien anpassen */
    .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;
    }

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