/* ============================================================
   FILE: css/08-content.css
   VERSION: 3.8
   LAST MODIFIED: March 11, 2026
   DESCRIPTION: ZENTRALE TYPOGRAFIE-STEUERUNG.
                v3.8: „Clean“-Varianten sind jetzt absolut linienfrei.
   ============================================================ */

/* 1. DER HEADER-BEREICH (H1 BALKEN) */
.entry-header {
    position: relative !important;
    margin-bottom: var(--sync-gap) !important;
}

h1.entry-title {
    display: flex !important; /* Umgestellt auf Flex für bessere Zentrierung */
    align-items: center !important;
    width: 100% !important;
    min-height: var(--sync-height-desktop) !important; /* Bleibt fix 36px */

    /* ERLAUBT UMBRUCH */
    line-height: 1.2 !important;
    padding: 5px 15px !important; /* Padding oben/unten statt fixer line-height */

    margin: 0 !important;
    font-family: "Open Sans", sans-serif !important;

    /* SCHRIFT ETWAS KLEINER */
    font-size: 1.3rem !important;

    font-weight: bold !important;
    color: #ffffff !important;
    background-color: var(--primary-color) !important;
    box-shadow: var(--sync-shadow) !important;
    box-sizing: border-box !important;

    /* FIX: Kein Abschneiden mehr auf Desktop */
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Spezialfall: Wenn ein Datum in der H1 steht (News-Detail) */
.entry-header:has(.news-teaser-date) h1.entry-title {
    padding-right: 135px !important;
}

/* 2. H2 ÜBERSCHRIFTEN */
h2,
.h2 {
    font-family: "Open Sans", sans-serif !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    text-shadow: 1px 1px 3px #aaa !important;
    margin: 1.5rem 0 1rem 0 !important;
    display: block !important;
    color: var(--primary-color) !important;
}

/* 3. FLUIDES BILD-STYLING */
.main-image-float,
.module-image-size-limit {
    float: left;
    width: 35% !important;
    min-width: 180px !important;
    max-width: 320px !important;
    margin: 7px 30px 20px 0 !important;
}
.main-image-float img,
.module-image-size-limit img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 4px;
    box-shadow: 3px 3px 5px #666;
}

/* 4. INHALTS-FLUSS & CF */
.cf::after,
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}
.main-content-wrapper {
    margin-top: -7px !important;
    margin-bottom: 2rem;
}
.content-body {
    line-height: 1.6 !important;
    color: var(--text-color) !important;
}

/* 5. ZENTRALE RESPONSIVITÄT */
@media (max-width: 1023px) {
    h1.entry-title {
        font-size: 1.3rem !important;
        white-space: normal !important;
        line-height: 1.3 !important;
        padding: 5px var(--mobile-edge-left) !important;
        min-height: auto !important;
    }
}

@media (max-width: 600px) {
    .main-image-float,
    .module-image-size-limit {
        float: none !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto 20px auto !important;
    }

    h1.entry-title {
        font-size: 1.15rem !important;
        padding: 4px var(--mobile-edge-right) 5px var(--mobile-edge-left) !important;
        line-height: 1.3 !important;
        min-height: auto !important;
        white-space: normal !important;
    }
}

/* 6. BREAKPOINT 390px */
@media (max-width: 390px) {
    h1.entry-title {
        font-size: 1rem !important;
        padding: 4px var(--mobile-edge-small) 5px var(--mobile-edge-small) !important;
    }
}

/* 7. TABELLEN-STYLING (Vier Varianten) */

.entry-content table {
    border-collapse: collapse !important;
    margin: var(--sync-gap) 0;
    font-size: 0.95rem;
}

.entry-content th {
    background-color: var(--primary-color) !important;
    color: #ffffff !important;
    font-weight: bold;
    text-align: left;
    padding: 10px 15px;
    border: none;
}

.entry-content td {
    padding: 10px 15px;
    vertical-align: top;
    color: var(--text-color);
    border: none;
}

/* Variante 1: Komplette Breite mit Rändern */
.entry-content table.table-full-border {
    width: 100% !important;
    border: 1px solid #e0e0e0 !important;
}
.entry-content table.table-full-border td,
.entry-content table.table-full-border th {
    border: 1px solid #e0e0e0 !important;
}

/* Variante 2: Komplette Breite ohne Ränder (Ganz sauber) */
.entry-content table.table-full-clean {
    width: 100% !important;
    border: none !important;
}
.entry-content table.table-full-clean td,
.entry-content table.table-full-clean th,
.entry-content table.table-full-clean tr {
    border: none !important;
}

/* Variante 3: Schmal mit Rändern */
.entry-content table.table-narrow-border {
    width: auto !important;
    min-width: 300px;
    border: 1px solid #e0e0e0 !important;
}
.entry-content table.table-narrow-border td,
.entry-content table.table-narrow-border th {
    border: 1px solid #e0e0e0 !important;
}

/* Variante 4: Schmal ohne Ränder (Ganz sauber) */
.entry-content table.table-narrow-clean {
    width: auto !important;
    min-width: 300px;
    border: none !important;
}
.entry-content table.table-narrow-clean td,
.entry-content table.table-narrow-clean th,
.entry-content table.table-narrow-clean tr {
    border: none !important;
}

/* Mobile Tabellen-Optimierung */
@media (max-width: 600px) {
    .entry-content table {
        width: 100% !important;
        display: block;
        overflow-x: auto;
    }
}