body {
    background-color: #000;
    margin: 0;
    padding: 0;
    color: #dfdfdf;
    font-family: sans-serif;
    overflow-x: hidden; /* Verhindert horizontales Scrollen auf Handys */
}

#container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    margin-top: -15px;
    background-color: #000;
    box-sizing: border-box;
    border: 2px solid #134275;
}

.logo_container {
    width: 100%;
   /*  padding: 0 10px; */
    box-sizing: border-box;
}

.logo_container img {
    max-width: 100%;
    height: auto;
    display: block;
}

body {
    /* background-image: url(../images/pengstoff-background.jpg); */
    background: linear-gradient(135deg, #0d0d0d 0%, #131139 50%, #080808 100%);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100vh;
    margin: 0;
}



/* Pfeil zum Seitenanfang */
#scroll_to_top_btn {
    position: fixed;

    /*
     * Auf großen Bildschirmen:
     * Abstand zur rechten Kante des maximal 1200px breiten Containers.
     *
     * Auf kleinen Bildschirmen:
     * Immer 15px Abstand vom rechten Fensterrand.
     */
    right: max(15px, calc((100vw - 1200px) / 2 + 15px));
    bottom: 25px;

    width: 0;
    height: 0;

    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid #ff3300;

    cursor: pointer;
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(10px);
    transition:
        opacity 0.35s ease,
        visibility 0.35s ease,
        transform 0.35s ease;
}

/* Wird durch JavaScript aktiviert */
#scroll_to_top_btn.visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Hover-Effekt */
#scroll_to_top_btn:hover {
    transform: scale(1.15);
}

/* Tastatur-Fokus */
#scroll_to_top_btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 5px;
}

/* Bei sehr kleinen Bildschirmen etwas kleiner */
@media screen and (max-width: 480px) {
    #scroll_to_top_btn {
        right: 15px;
        bottom: 20px;
        border-left-width: 14px;
        border-right-width: 14px;
        border-bottom-width: 24px;
    }
}


















.post_date_display {
    font-size: 0.9rem;
    margin-bottom: 8px;
}

.date_label {
    color: #ffffff;
    font-weight: 700;
    font-size: 18px;
}

.date_value {
    color: #3fbfff;
    font-weight: 700;
    font-size: 18px;
}

.time_value {
    color: #ffff00;
    font-weight: 700;
    font-size: 18px;
}

#footer {
    background-color: #000;
    min-height: 40px;
    margin-bottom: 20px;
    border-top: 1px solid #5187ff;
    border-bottom: 1px solid #5187ff;
    clear: both;
    padding: 0 0px;
    box-sizing: border-box;
}

.footer_links {
    /* margin-top: 20px; */
    padding-top: 2px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 14px;
}

.footer_links a {
    color: #ffca00;
    text-decoration: none;
    margin-right: 10px;
    margin-left: 10px;
}

.footer_links a:hover {
    text-decoration: underline;
    color: #ffffff;
}

#footer {
    display: flex;
    align-items: center;
    padding: 10px;
}

.footer_links {
    display: flex;
    align-items: center;
    gap: 15px; /* Abstand zwischen den Elementen */
}

.powered_by {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 20px;
    font-size: 18px;
    color: #00aaff;
    font-weight: 700;
    background-color: #000;
}

.powered_by img {
    height: 26px;
    width: auto;
}



/* =================================================================ata
   MODERNES TOC & MOBILE STICKY BREADCRUMB
   =================================================================== */
/* Passt den Offset beim Anker-Sprung an (bei Bedarf einfach von 50px auf z.B. 40px oder 60px anpassen) */
html {
    scroll-padding-top: 30px; 
}

html {
    scroll-behavior: smooth;scroll-behavior: smooth;
}
/* --- DESKTOP TOC --- */
.desktop_toc_container {
    position: sticky;
    top: 0px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 5px;
    background: #000;
    border: 1px solid #134275;
    /* border-top: 1px solid #ff8100; */
    /* border-bottom: 1px solid #ff8100; */
    /* border-radius: 4px; */
    font-size: 16px;
}

.desktop_toc_container ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.desktop_toc_container li {
    margin-bottom: 8px;
}

.desktop_toc_container a {
    display: block;
    padding: 6px 10px;
    color: #dfdfdf;
    text-decoration: none;
    border-radius: 3px;
    transition: background 0.2s, color 0.2s;
}

.desktop_toc_container a:hover {
    background-color:#591900;
}


.desktop_toc_container a.toc_active {
    background: #4f0101;
    color: #ffffff;
    font-weight: bold;
}

.desktop_toc_container a.toc_near {
    background: rgba(41, 128, 185, 0.3);
    color: #b7f1ff;
}



.desktop_toc_container span.site_name {
    color: #ffbf00;
}

.desktop_toc_container span.separator {
    color: #777;
    margin: 0 5px;
}

.desktop_toc_container span.current_chapter {
    color: #77ff00;
}


/* --- MOBILER STICKY BREADCRUMB & TOC DRAWER --- */
.mobile_toc_bar {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 35px;
    background: #410900;
    border-bottom: 1px solid #a90000;
    color: #fff;
    z-index: 9999;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}

.mobile_toc_crumb {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.mobile_toc_crumb span.site_name {
    color: #ffbf00;
}

.mobile_toc_crumb span.separator {
    color: #777;
    margin: 0 5px;
}

.mobile_toc_crumb span.current_chapter {
    color: #dfdfdf;
}

.desktop_toc_container span.category_name {
    color: #ff8c00; /* Eigene Farbe für die Kategorie (z.B. kräftiges Orange) */
    font-weight: bold;
}

.desktop_toc_container span.nav_arrow {
    color: #777;
    margin: 0 6px;
}

/* Ausklapp-Menü für Mobil */
.mobile_toc_drawer {
    display: none;
    position: fixed;
    top: 35px;
    left: 0;
    width: 100%;
    max-height: 60vh;
    overflow-y: auto;
    background: #1a1a1a;
    border-bottom: 2px solid #cc2929;
    z-index: 9998;
    padding: 15px;
    box-sizing: border-box;
}

.mobile_toc_drawer ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile_toc_drawer li {
    margin-bottom: 10px;
}

.mobile_toc_drawer a {
    display: block;
    padding: 8px 12px;
    color: #dfdfdf;
    text-decoration: none;
    background: #252525;
    border-radius: 3px;
}

.mobile_toc_drawer a.toc_active {
    background: #cc2929;
    color: #fff;
}


.desktop_toc_container span.category_name,
.mobile_toc_bar span.category_name {
    color: #ff8c00; /* Oder den genauen Farbwert, den deine Beschreibung/Desc hat */
}

/* Luft für die Hierarchie */
.desktop_toc_container span.nav_arrow, 
.desktop_toc_container span.separator {
    margin: 0 10px; /* Hier kannst du die 10px auf 15px erhöhen, wenn es noch luftiger sein soll */
}

.mobile_toc_bar span.nav_arrow, 
.mobile_toc_bar span.separator {
    margin: 0 8px; /* Für mobil etwas weniger, damit es nicht umbricht */
}


/* --- BASIS-STYLING FÜR MOBILE (Hochformat / Standard) --- */
#mobile_toc_bar .mobile_toc_crumb {
    display: flex;
    flex-wrap: nowrap; /* Hält alles stur in einer Zeile im Hochformat */
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* Jedes Element darf im Hochformat nicht umbrechen */
#mobile_toc_bar .category_name,
#mobile_toc_bar .nav_arrow,
#mobile_toc_bar .site_name,
#mobile_toc_bar .separator,
#mobile_toc_bar .current_chapter {
    white-space: nowrap;
}

/* Wenn das Kapitel im Hochformat zu lang wird, greift automatisch der Punkt-Punkt-Punkt (...) */
#mobile_toc_bar .current_chapter {
    overflow: hidden;
    text-overflow: ellipsis;
}


/* --- QUERFORMAT-MODUS (Landscape auf Handy / mehr Platz) --- */
@media screen and (orientation: landscape) {
    #mobile_toc_bar .mobile_toc_crumb {
        flex-wrap: nowrap; /* Garantiert eine durchgehende High-End-Zeile */
    }
    
    #mobile_toc_bar .current_chapter {
        max-width: none; /* Gibt dem Kapitel im Querformat die volle Bandbreite */
        overflow: visible;
        text-overflow: clip;
    }
}


/* --- MEDIA QUERY FÜR MOBILE ANSICHT --- */
@media (max-width: 768px) {
    .mobile_toc_bar {
        display: flex;
    }
    /* Optional: Desktop TOC auf Mobile komplett verstecken, da wir den Drawer nutzen */
    .desktop_toc_container {
        display: none;
    }
    /* Schiebt den Container unter die fixierte mobile TOC-Leiste, damit das Logo nicht verdeckt wird */
    #container {
        padding-top: 18px;
    }
}











/* Responsives Footer-Verhalten auf Handys */
@media screen and (max-width: 320px) {
    #container {
        margin-top: 0;
    }
    #footer {
        padding: 5px;
    }
    .footer_links {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        font-size: 12px;
    }
    .footer_links a {
        margin: 0;
    }
    .powered_by {
        margin-left: 0;
        font-size: 14px;
        justify-content: center;
    }
    .powered_by img {
        height: 20px;
    }
}

@media screen and (min-width: 321px) and (max-width: 480px) {
    #container {
        margin-top: 0;
    }
    #footer {
        padding: 8px;
    }
    .footer_links {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        font-size: 13px;
    }
    .footer_links a {
        margin: 0;
    }
    .powered_by {
        margin-left: 0;
        font-size: 15px;
        justify-content: center;
    }
    .powered_by img {
        height: 22px;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    #container {
        margin-top: 0;
    }
    .footer_links {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .powered_by {
        margin-left: auto;
    }
}



@media screen and (min-width: 769px) and (max-width: 1024px) {
    .footer_links {
        justify-content: flex-start;
    }
    .powered_by {
        margin-left: auto;
    }
}