/* =========================================================
   Beiträge – Gestaltung & Layout
   ---------------------------------------------------------
   Zweck:
   Enthält Formatierungen für Blogbeiträge, Überschriften,
   Kategorien, Fußnoten, Listen und Blogübersichten.
   ========================================================= */


/* ---------------------------------------------
   ÜBERSCHRIFTEN IN BEITRÄGEN
   ---------------------------------------------
   - Zentriert Überschriften innerhalb von Beiträgen
   - Einheitliche Farben, Abstände und Gewichtungen
   - Unterscheidung zwischen H2, H3, H4
------------------------------------------------ */
.post-area > article .content-inner h2,
.post-area > article .content-inner h3,
.post-area > article .content-inner h4 {
    text-align: center;
    font-weight: 600;
    color: #54ae31;
    margin-bottom: 15px;
    margin-top: 20px;
}

.post-area > article .content-inner h2 { font-size: 35px; }
.post-area > article .content-inner h3 { font-size: 30px; }
.post-area > article .content-inner h4 { font-size: 25px; }


/* ---------------------------------------------
   ÜBERSCHRIFTEN IN LISTEN
   ---------------------------------------------
   - Überschriften in nummerierten Listen formatieren
   - Listenziffern (Marker) farblich hervorheben
------------------------------------------------ */
.post-area > article .content-inner ol > li > h3,
.post-area > article .content-inner ol > li > h4 {
    text-align: left;
    color: #54ae31;
}

.post-area > article .content-inner ol > li:has(> h3)::marker,
.post-area > article .content-inner ol > li:has(> h4)::marker {
    color: #54ae31;
    font-weight: 600;
}

.post-area > article .content-inner ol > li:has(> h3)::marker { font-size: 30px; }
.post-area > article .content-inner ol > li:has(> h4)::marker { font-size: 25px; }

.post-area > article .content-inner ol:has(> li > h3),
.post-area > article .content-inner ol:has(> li > h4) {
    margin-bottom: 0px !important;
}


/* ---------------------------------------------
   ABSÄTZE UND LISTEN
   ---------------------------------------------
   - Einheitliche Textausrichtung
   - Abstände und Schriftgrößen für bessere Lesbarkeit
------------------------------------------------ */
.post-area > article .content-inner p {
    text-align: justify;
}

.post-area > article .content-inner ol > li {
    padding: 5px 20px;
    text-align: justify;
}

.post-area > article .content-inner sup {
    font-size: 14px;
}


/* ---------------------------------------------
   KATEGORIE-BUTTONS
   ---------------------------------------------
   - Stil für Kategorie-Links über Beiträgen
   - Grüner Rahmen mit Hover-Effekt
------------------------------------------------ */
.meta-category a {
    border: 2px solid #54ae31 !important;
    color: #54ae31 !important;
    background-color: transparent !important;
    padding: 5px 10px;
}

.meta-category a:hover {
    color: white !important;
    background-color: #54ae31 !important;
}


/* ---------------------------------------------
   FUSSNOTEN / QUELLENANGABEN
   ---------------------------------------------
   - Tabelle für Fußnoten/Referenzen
   - Einheitliche Typografie und Abstände
------------------------------------------------ */
.fussnoten {
    border: 0 !important;
    border-collapse: collapse;
    width: 100%;
    margin-left: 10px !important;
    margin-top: 20px !important;
}

.fussnoten tr, 
.fussnoten td {
    border: 0 !important;
    padding: 0 !important;
    background: none !important;
    text-align: left !important;
    font-size: 14pt !important;
}

.fussnoten .reference {
    width: 5%;
    min-width: 40px !important;
    vertical-align: top;
}

.fussnoten .content { width: 85%; }

.fussnoten .line {
    border: none;
    border-top: 2px solid #e33;
    margin: 8px 0;
    width: 100%;
}


/* ---------------------------------------------
   RESPONSIVE ANPASSUNGEN
   ---------------------------------------------
   - Kleinere Schriftgrößen für mobile Geräte
------------------------------------------------ */
@media (max-width: 768px) {
    .fussnoten tr, 
    .fussnoten td {
        font-size: 12pt !important;
    }
}


/* ---------------------------------------------
   TAGS UND SCHLAGWÖRTER
   ---------------------------------------------
   - Gestaltung der Tag-Cloud und Beitrags-Tags
   - Einheitliches Design mit grünen Akzenten
------------------------------------------------ */
#sidebar .widget .tagcloud a, 
.post-area .content-inner > .post-tags a, 
.widget .tagcloud a {
    background-color: #54ae31;
    padding: 5px 17px;
    border-radius: 25px 2px 25px 2px;
    margin: 10px;
}

.post-area .content-inner > .post-tags h4 { display: none; }

.post-area .content-inner > .post-tags {
    text-align: center;
    margin-top: 20px;
}


/* ---------------------------------------------
   NEUESTE BLOGBEITRÄGE AUF STARTSEITE
   ---------------------------------------------
   - Karten-Stil mit Schatten und abgerundeten Ecken
   - Anpassung der Kategorie-Darstellung und Pfeilbutton
------------------------------------------------ */
.blog-recent div.post {
    border-radius: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.blog-recent div.inner-wrap span.meta-category a {
    text-align: center;
    width: 97%;
    display: block;
}

.blog-recent .post-featured-img img {
    width: 100%;
    margin: 0 auto;
    border-radius: 0;
}

.blog-recent .entire-meta-link { display: block; }

.blog-recent[data-style*=classic_enhanced] .inner-wrap, 
.masonry.classic_enhanced .masonry-blog-item .inner-wrap {
    box-shadow: none !important;
    border-radius: 20px;
}

.blog-recent[data-style*="classic_enhanced"] .entire-meta-link, 
.blog-recent[data-style="material"] .entire-meta-link {
    position: relative;
    margin: 10px 10px 0 0;
    left: 0;
    display: none !important;
    width: 60px;
    z-index: 101;
    height: 45px;
    background-color: #54AE31;
    background-image: url('https://aoel.wimmer-it-services.de/wp-content/uploads/icons/pfeil.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 35px;
    float: right;
    border-radius: 20px 0 20px 0;
}


/* ---------------------------------------------
   KATEGORIE-POSITIONIERUNG
   ---------------------------------------------
   - Steuert Position und Anzeige mehrerer Kategorien
   - Zeigt max. 7 Kategorien an, restliche werden ausgeblendet
------------------------------------------------ */
.blog-recent[data-style*=classic_enhanced] .meta-category a:not(:first-child),
.masonry.classic_enhanced .posts-container article .meta-category a:not(:first-child) {
    display: block;
}

/* Verschiebung der Kategorien 2–7 */
.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(2),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(2) { margin-top: -100px !important; }

.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(3),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(3) { margin-top: -155px !important; }

.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(4),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(4) { margin-top: -210px !important; }

.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(5),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(5) { margin-top: -265px !important; }

.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(6),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(6) { margin-top: -320px !important; }

.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(7),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(7) { margin-top: -375px !important; }

/* Kategorien ab der achten ausblenden */
.blog-recent[data-style*=classic_enhanced] .meta-category a:nth-child(n+8),
.masonry.classic_enhanced .posts-container article .meta-category a:nth-child(n+8) {
    display: none !important;
}


/* ---------------------------------------------
   ARTIKEL-INHALT STIL
   ---------------------------------------------
   - Innenabstände der Artikel-Container anpassen
------------------------------------------------ */
.blog-recent[data-style*=classic_enhanced] .article-content-wrap, 
.masonry.classic_enhanced .masonry-blog-item .article-content-wrap { 
    padding: 5%;
}


/* ---------------------------------------------
   KATEGORIE-DESIGN FÜR BEITRÄGE MIT BILD
   ---------------------------------------------
   - Kategorien auf Beiträgen mit Vorschaubild hervorheben
   - Weißer Hintergrund, abgerundete linke Ecken
------------------------------------------------ */
.blog-recent[data-style*=classic_enhanced] .has-post-thumbnail .meta-category a, 
.blog-recent[data-style*=classic_enhanced] .meta-category a, 
.masonry.classic_enhanced .posts-container .has-post-thumbnail .meta-category a {
    /* Ausrichtung */
    position: relative;
    top: -17px !important;
    right: 0 !important;
    left: 0 !important;
    margin-bottom: 0;
    margin-top: -45px;
    padding: 10px 30px !important;
    
    /* Größe und Position */
    width: auto;
    margin-right: 0;
    float: right;
    
    /* Schrift */
    text-align: center;
    font-size: 12pt;
    color: black !important;

    /* Rand und Hintergrund */
    border: 2px solid white !important;
    background-color: white !important;
    border-radius: 20px 0 0 20px;
}