/* =============================================
   KATEGORIE-LAYOUT: LINKE/RECHTE SPALTEN & LISTEN (MEINS)
   ============================================= */

 /* Container für beide Spalten */
.fixed-columns {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    width: 100%;
}

.fixed-right {
    width: 100%; /* Volle Breite auf Handy */
}

/* Basis-Stile für Überschriften und Text */
.head {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 4px;
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    margin: 0 0 6px;
    line-height: 1.2;
}

.head a {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    text-decoration: none;
}

.head a.text {
    color: #333;
}

.head a.count-link {
    color: #666;
    font-size: 0.8em;
}

.text {
    font-size: 0.85em;
    color: #555;
    line-height: 1.2;
    margin: 0 0 4px;
    display: block;
}

.text a {
    color: #0066cc;
    text-decoration: none;
}

.text a:hover {
    text-decoration: underline;
}

/* Listen-Stile (linker und rechter Bereich) */
.indented-list {
    list-style: none;
    padding-left: 0.6em;
    margin: 0 0 6px;
}

.indented-list li {
    margin-bottom: 4px;
}

/* Rechter Bereich: Container für Kategorien */
.category-templates-container {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.category-template-column {
    flex: 1 1 calc(33.33% - 6px);
    min-width: 0;
}

/* =============================================
   HANDY (ab 600px): LINKE SPALTEN RAUS
   ============================================= */
@media (max-width: 600px) {
    .fixed-left {
        display: none !important;
    }
}

/* =============================================
   TABLET (ab 600px): BEIDE SPALTEN NEBENEINANDER
   ============================================= */
@media (min-width: 600px) and (max-width: 1023px) {
    .fixed-columns {
        flex-wrap: nowrap;
        gap: 12px;
    }

    .fixed-left {
        display: block;
        flex: 0 0 48%;
        min-width: 0;
    }

    .fixed-right {
        flex: 0 0 52%;
        min-width: 0;
        margin-left: -70px;
    }

    .head {
        font-size: 1em;
    }

    .text {
        font-size: 0.9em;
    }
}

/* =============================================
   DESKTOP (ab 1024px): MEHR ABSTAND & GRÖSSERE SCHRIFT
   ============================================= */
@media (min-width: 1024px) {
    .fixed-columns {
        gap: 20px;
        flex-wrap: nowrap; /* Verhindert Umbruch! */
        display: flex; /* Sicherstellen, dass Flexbox aktiv ist */
    }
    body .fixed-columns .fixed-left {
        display: block; /* oder flex, falls nötig */
        flex: 0 0 40%; /* 40% Breite, wie in deiner Struktur vorgesehen */
        min-width: 0; /* Verhindert Überlauf */
         margin-left: 0px !important;
    }
    .fixed-right {
        flex: 0 0 60%;
        min-width: 0;
    }
    
    .head {
        font-size: 1.2em;
    }

    .head a.count-link {
        font-size: 0.9em;
    }

    .text {
        font-size: 1em;
    }

    .category-template-column {
        gap: 15px;
    }

    .indented-list {
        padding-left: 1em;
    }
}

/* =============================================
   SPEZIFISCHE STILE FÜR DIE SHORTCODES
   ============================================= */
.category-content {
    width: 100%;
}

.category-template-column ul.indented-list {
    padding-left: 0.8em;
}

.category-template-column li {
    margin-bottom: 5px;
}

/* Mobile: Anzahl noch kleiner */
@media (max-width: 600px) {
    .head a.count-link {
        font-size: 0.7em;
    }
}

/* Abstände im Header reduzieren */
header.ast-custom-header .wp-block-group {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    margin-bottom: 0 !important;
}

/* Abstand zwischen Header und Content reduzieren */
header.ast-custom-header {
    margin-bottom: 0 !important;
}

/* Mandalas horizontal zentrieren */
header.ast-custom-header .wp-block-column[style*="66.66"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Die Tabelle mit den Mandalas zentrieren */
header.ast-custom-header .wp-block-column[style*="66.66"] table {
    margin: 0 auto;
}

/* Tabelle rechts (33.33%) vertikal zentrieren */
header.ast-custom-header .wp-block-column[style*="33.33"] {
    display: flex;
    align-items: center;
}

/* Beide Spalten auf gleiche Höhe */
header.ast-custom-header .wp-block-columns {
    display: flex;
    align-items: center;
}