/**
 * Blog Article Styles - CSS-Kompatibilitätslayer
 * 
 * Mapped Bootstrap-Klassen aus DB-Content auf das SEOFUXX Glass-Design.
 * Alle Regeln sind auf .blog-article gescopet, kein Konflikt mit dem Rest der Seite.
 * Kann auch in /adminx geladen werden für CMS-Vorschau.
 * 
 * Verwendet CSS-Variablen aus glass.css und Tailwind-Config-Farben.
 */

/* ========== GRUNDLAGEN ========== */

.blog-article {
        font-size: 1.125rem;
        line-height: 1.9;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.blog-article p,
.blog-article ul,
.blog-article ol {
    margin-bottom: 1.15em;
}

/* ========== TYPOGRAFIE ========== */

/* H1 im Card-Header bereits vorhanden, daher im Content ausblenden */
.blog-article > h1:first-child {
    display: none;
}

/* Display Headings */
.blog-article .display-4 {
    font-size: 2.25rem;
    line-height: 1.2;
}

.blog-article .display-3 {
    font-size: 2.75rem;
    line-height: 1.2;
}

/* Heading helpers */
.blog-article .h3 {
    font-size: 1.5rem;
}

.blog-article .h4 {
    font-size: 1.25rem;
}

.blog-article .h5 {
    font-size: 1.1rem;
}

/* Font weight */
.blog-article .fw-bold {
    font-weight: 700;
}

.blog-article .fw-semibold {
    font-weight: 600;
}

/* Font size */
.blog-article .fs-6 {
    font-size: 0.875rem;
}

/* Lead paragraph */
.blog-article .lead {
    font-size: 1.15rem;
    font-weight: 300;
    line-height: 1.9;
    color: hsl(0 0% 80%);
}

html[data-theme='light'] .blog-article .lead {
    color: hsl(0 0% 30%);
}

/* ========== FARBEN ========== */

.blog-article .text-primary {
    color: hsl(280 70% 55%);
}

.blog-article .text-success {
    color: hsl(142 71% 45%);
}

.blog-article .text-white {
    color: hsl(0 0% 100%);
}

.blog-article .text-decoration-none {
    text-decoration: none;
}

.blog-article .text-decoration-none:hover {
    text-decoration: underline;
    opacity: 0.85;
}

.blog-article .text-decoration-underline {
    text-decoration: underline;
}

/* ========== SPACING ========== */

.blog-article .mb-0 { margin-bottom: 0; }
.blog-article .mb-2 { margin-bottom: 0.5rem; }
.blog-article .mb-3 { margin-bottom: 1rem; }
.blog-article .mb-4 { margin-bottom: 1.5rem; }
.blog-article .mb-5 { margin-bottom: 2.5rem; }
.blog-article .mt-4 { margin-top: 1.5rem; }
.blog-article .mt-12 { margin-top: 3rem; }
.blog-article .my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.blog-article .p-3 { padding: 1rem; }
.blog-article .p-4 { padding: 1.5rem; }

/* ========== SECTIONS ========== */

.blog-article section {
    scroll-margin-top: 5rem;
}

.blog-article section h2 {
    padding-bottom: 0.5rem;
    border-bottom: 1px solid hsl(280 70% 55% / 0.15);
}

/* ========== BADGE ========== */

.blog-article .badge {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 9999px;
    line-height: 1;
}

.blog-article .badge.bg-secondary {
    background: hsl(230 10% 40%);
    color: hsl(0 0% 95%);
}

html[data-theme='light'] .blog-article .badge.bg-secondary {
    background: hsl(230 10% 75%);
    color: hsl(0 0% 20%);
}

/* ========== ALERTS ========== */

.blog-article .alert {
    padding: 1.25rem 1.5rem;
    border-radius: 0.75rem;
    margin-bottom: 1.5rem;
    border: 1px solid transparent;
}

.blog-article .alert.border-0 {
    border: none;
}

.blog-article .alert-heading {
    font-weight: 700;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
}

/* Alert Info */
.blog-article .alert-info {
    background: hsl(200 80% 50% / 0.1);
    border-color: hsl(200 80% 50% / 0.2);
    color: hsl(0 0% 90%);
}

html[data-theme='light'] .blog-article .alert-info {
    background: hsl(200 80% 94%);
    border-color: hsl(200 80% 80%);
    color: hsl(200 50% 25%);
}

/* Alert Success */
.blog-article .alert-success {
    background: hsl(142 71% 45% / 0.1);
    border-color: hsl(142 71% 45% / 0.2);
    color: hsl(0 0% 90%);
}

html[data-theme='light'] .blog-article .alert-success {
    background: hsl(142 71% 94%);
    border-color: hsl(142 71% 80%);
    color: hsl(142 50% 25%);
}

/* Alert Warning */
.blog-article .alert-warning {
    background: hsl(45 100% 50% / 0.1);
    border-color: hsl(45 100% 50% / 0.2);
    color: hsl(0 0% 90%);
}

html[data-theme='light'] .blog-article .alert-warning {
    background: hsl(45 100% 94%);
    border-color: hsl(45 100% 75%);
    color: hsl(45 60% 25%);
}

/* ========== SHADOW ========== */

.blog-article .shadow-sm {
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.15);
}

html[data-theme='light'] .blog-article .shadow-sm {
    box-shadow: 0 2px 8px hsl(0 0% 0% / 0.08);
}

/* ========== BACKGROUNDS ========== */

.blog-article .bg-light {
    background: hsl(230 25% 18% / 0.5);
}

html[data-theme='light'] .blog-article .bg-light {
    background: hsl(0 0% 96%);
}

.blog-article .bg-primary {
    background: hsl(280 70% 55%);
}

.blog-article .bg-warning {
    background: hsl(45 100% 50%);
}

.blog-article .bg-info {
    background: hsl(200 80% 50%);
}

/* Opacity modifiers */
.blog-article .bg-opacity-10 {
    --bg-opacity: 0.1;
}

.blog-article .bg-warning.bg-opacity-10 {
    background: hsl(45 100% 50% / 0.1);
}

.blog-article .bg-info.bg-opacity-10 {
    background: hsl(200 80% 50% / 0.1);
}

.blog-article .bg-white.bg-opacity-20 {
    background: hsl(0 0% 100% / 0.2);
}

.blog-article .bg-gradient {
    background-image: var(--gradient-primary);
}

/* ========== BORDERS ========== */

.blog-article .border-0 {
    border: none;
}

.blog-article .border-start {
    border-left-width: 1px;
    border-left-style: solid;
}

.blog-article .border-4 {
    border-width: 4px;
}

.blog-article .border-start.border-4 {
    border-width: 0;
    border-left-width: 4px;
    border-left-style: solid;
}

.blog-article .border-warning {
    border-color: hsl(45 100% 50%);
}

.blog-article .border-primary {
    border-color: hsl(280 70% 55%);
}

.blog-article .border-success {
    border-color: hsl(142 71% 45%);
}

/* ========== ROUNDED ========== */

.blog-article .rounded-3 {
    border-radius: 0.75rem;
}

/* ========== GRID (row/col) ========== */

.blog-article .row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.blog-article .row > [class*="col-"] {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
}

.blog-article .col-md-6 {
    width: 100%;
}

@media (min-width: 768px) {
    .blog-article .col-md-6 {
        width: 50%;
    }
}

/* ========== CARDS ========== */

.blog-article .card {
    border-radius: 0.75rem;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-article .card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
}

.blog-article .card.border-primary {
    border-color: hsl(280 70% 55% / 0.4);
}

.blog-article .card.border-success {
    border-color: hsl(142 71% 45% / 0.4);
}

.blog-article .card-body {
    padding: 1.5rem;
}

.blog-article .card-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.blog-article .card-text {
    font-size: 0.95rem;
    line-height: 1.7;
}

.blog-article .h-100 {
    height: 100%;
}

/* Gradient-Card: Inline-Style override für Glass-Optik */
.blog-article .card[style*="background"] {
    color: hsl(0 0% 100%);
    border: none;
}

/* ========== LISTS ========== */

.blog-article .list-unstyled {
    list-style: none;
    padding-left: 0;
}

.blog-article ul:not(.list-unstyled) {
    padding-left: 1.5rem;
}

.blog-article ol {
    padding-left: 1.5rem;
}

.blog-article li {
    margin-bottom: 0.4rem;
}

/* ========== LINKS ========== */

.blog-article a {
    color: hsl(280 70% 65%);
    transition: color 0.2s ease, opacity 0.2s ease;
}

.blog-article a:hover {
    color: hsl(280 70% 75%);
}

html[data-theme='light'] .blog-article a {
    color: hsl(280 70% 45%);
}

html[data-theme='light'] .blog-article a:hover {
    color: hsl(280 70% 35%);
}

.blog-article a.text-white {
    color: hsl(0 0% 100%);
}

.blog-article a.text-white:hover {
    color: hsl(0 0% 90%);
}

/* ========== ACCORDION / FAQ ========== */

.blog-article .accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.blog-article .accordion-item {
    border-radius: 0.75rem;
    overflow: hidden;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
}

.blog-article .accordion-item.border-0 {
    border: 1px solid var(--glass-border);
}

.blog-article .accordion-header {
    margin: 0;
}

.blog-article .accordion-button {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 1rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    text-align: left;
    background: transparent;
    color: hsl(0 0% 90%);
}

html[data-theme='light'] .blog-article .accordion-button {
    color: hsl(0 0% 20%);
}

.blog-article .accordion-button.bg-primary {
    background: hsl(280 70% 55%);
    color: hsl(0 0% 100%);
}

.blog-article .accordion-button.bg-primary:hover {
    background: hsl(280 70% 50%);
}

.blog-article .accordion-button:not(.bg-primary):hover {
    background: hsl(280 70% 55% / 0.1);
}

/* Accordion chevron */
.blog-article .accordion-button::after {
    content: '';
    display: inline-block;
    margin-left: auto;
    width: 1rem;
    height: 1rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

html[data-theme='light'] .blog-article .accordion-button:not(.bg-primary)::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23333333'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
}

.blog-article .accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
}

.blog-article .accordion-collapse {
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.blog-article .accordion-collapse.collapse:not(.show) {
    display: none;
}

.blog-article .accordion-body {
    padding: 1rem 1.25rem;
    line-height: 1.8;
    border-top: 1px solid var(--glass-border);
}

/* ========== TOC (Inhaltsverzeichnis) ========== */

.blog-article .bg-light a {
    display: inline-block;
    padding: 0.25rem 0;
    color: hsl(280 70% 65%);
    transition: color 0.2s ease, padding-left 0.2s ease;
}

.blog-article .bg-light a:hover {
    color: hsl(280 70% 75%);
    padding-left: 0.5rem;
}

html[data-theme='light'] .blog-article .bg-light a {
    color: hsl(280 70% 45%);
}

html[data-theme='light'] .blog-article .bg-light a:hover {
    color: hsl(280 70% 35%);
}

/* ========== FAZIT-SECTION (bg-primary + text-white) ========== */

.blog-article section.bg-primary {
    background: var(--gradient-primary);
    color: hsl(0 0% 100%);
    border-radius: 0.75rem;
}

.blog-article section.bg-primary h2 {
    border-bottom-color: hsl(0 0% 100% / 0.2);
}

.blog-article section.bg-primary p {
    color: hsl(0 0% 95%);
}

.blog-article section.bg-primary a {
    color: hsl(0 0% 100%);
}

/* ========== IMAGES ========== */

.blog-article img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1rem 0;
    border: 1px solid var(--glass-border);
}

/* ========== RESPONSIVE ========== */

@media (max-width: 768px) {
    .blog-article {
        font-size: 1.0625rem;
        line-height: 1.85;
    }

    .blog-article .display-4 {
        font-size: 1.75rem;
    }

    .blog-article .display-3 {
        font-size: 2rem;
    }

    .blog-article .lead {
        font-size: 1rem;
    }

    .blog-article .row {
        flex-direction: column;
    }

    .blog-article .col-md-6 {
        width: 100%;
        margin-bottom: 1rem;
    }

    .blog-article .p-4 {
        padding: 1rem;
    }

    .blog-article section.bg-primary {
        padding: 1rem;
    }
}

/* ========== PRINT ========== */

@media print {
    .blog-article .accordion-collapse.collapse:not(.show) {
        display: block !important;
    }

    .blog-article .bg-primary,
    .blog-article .badge.bg-secondary {
        background: none !important;
        color: inherit !important;
    }

    .blog-article .card {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}