/* =====================================================================
   Gemeinsame Regeln für alle Blog-Seiten (Tabellen, Buttons) und
   Mobile-Feinschliff (iPhone & kleine Displays)
   Wird nach style.css geladen. Selektoren mit body.blog-page, damit sie
   die seiteneigenen Inline-Regeln überstimmen.
   Ursache des Abschneidens: body ist ein Flex-Container, <main> bekam
   dadurch die Mindestbreite seines breitesten Inhalts (Tabellen mit
   min-width, nowrap-Elemente) und war breiter als der Bildschirm.
   ===================================================================== */

body.blog-page .blog-container {
    min-width: 0;
    width: 100%;
    max-width: 1120px;
    box-sizing: border-box;
}

body.blog-page .blog-container img,
body.blog-page .blog-container svg,
body.blog-page .blog-container video {
    max-width: 100%;
}

body.blog-page .blog-container h1,
body.blog-page .blog-container h2,
body.blog-page .blog-container h3,
body.blog-page .blog-container p,
body.blog-page .blog-container li {
    overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------
   Vergleichstabelle: ein durchgehender Verlauf über die ganze Kopfzeile,
   Spalten durch feine weiße Linien getrennt. Der Verlauf liegt auf der
   Tabelle selbst (nicht pro Zelle), die Körperzellen sind deckend weiß.
   --------------------------------------------------------------------- */
body.blog-page .compare-table {
    background: linear-gradient(90deg, #445ff2 0%, #cb50f7 100%);
}

body.blog-page .compare-table thead th {
    background: transparent;
    color: #ffffff;
}

body.blog-page .compare-table thead th + th {
    border-left: 1px solid rgba(255, 255, 255, 0.45);
}

body.blog-page .compare-table tbody td {
    background-color: #ffffff;
}

body.blog-page .compare-table tbody td:hover {
    background-color: #f5f0fe;
}

body.blog-page .compare-table tbody th {
    background-color: #f9f7ff;
}

/* Wisch-Hinweis unter der Tabelle (nur Handy) */
body.blog-page .compare-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: -2px 0 14px;
    font-size: 0.78rem;
    color: #64748b;
}

/* ---------------------------------------------------------------------
   Buttons: derselbe Verlauf wie auf /jura-ki (--ai-grad), ohne Wellen-Animation
   --------------------------------------------------------------------- */
body.blog-page .blog-cta-btn,
body.blog-page .blogcase-reveal-btn {
    background: linear-gradient(135deg, #445ff2 0%, #cb50f7 100%);
    background-size: 100% 100%;
    animation: none;
    color: #ffffff;
    border: 0;
    box-shadow: 0 12px 30px rgba(203, 80, 247, 0.35);
    transition: transform 0.25s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.25s ease;
}

body.blog-page .blog-cta-btn:hover,
body.blog-page .blogcase-reveal-btn:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 16px 38px rgba(68, 95, 242, 0.42);
    color: #ffffff;
}

@media (max-width: 600px) {
    body.blog-page .blog-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    body.blog-page .blog-kicker {
        font-size: 0.7rem;
        letter-spacing: 1.2px;
        text-align: center;
        line-height: 1.4;
        max-width: 100%;
    }

    body.blog-page .blog-header h1 {
        font-size: clamp(1.6rem, 7.4vw, 2rem);
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    body.blog-page .blog-subtitle,
    body.blog-page .blog-intro-text {
        text-align: left;
        font-size: 1rem;
    }

    body.blog-page .blog-hero {
        border-radius: 20px;
        margin-bottom: 26px;
    }

    /* Tabellen bleiben ganz und lassen sich seitlich wischen */
    body.blog-page .compare-wrap {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        border-radius: 16px;
    }

    body.blog-page .compare-table {
        min-width: 560px;
        font-size: 0.86rem;
    }

    body.blog-page .compare-table th,
    body.blog-page .compare-table td {
        padding: 10px 12px;
    }

    body.blog-page .compare-table tbody th {
        width: 120px;
    }

    body.blog-page .compare-hint {
        display: flex;
    }

    /* Mindmap-Fenster */
    body.blog-page .bmm-canvas {
        height: 460px;
    }

    body.blog-page .bmm-toolbar {
        max-width: calc(100% - 16px);
    }

    body.blog-page .bmm-window-url {
        max-width: 60%;
    }

    /* Karten und Raster */
    body.blog-page .bento-3col,
    body.blog-page .duel-grid,
    body.blog-page .history-strip,
    body.blog-page .oral-grid {
        grid-template-columns: 1fr;
    }

    body.blog-page .duel-card {
        padding: 20px 16px;
    }

    body.blog-page .v-section {
        margin: 40px 0;
    }

    body.blog-page .v-section-head {
        align-items: flex-start;
    }

    body.blog-page .v-focus-mm-btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
        text-align: center;
    }

    body.blog-page .graphic-section {
        padding: 28px 16px 64px;
    }

    body.blog-page .blogcase-card {
        border-radius: 20px;
    }

    body.blog-page .blog-cta-wrapper {
        padding-left: 18px;
        padding-right: 18px;
    }

    body.blog-page .blog-cta-btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }
}