/*
Theme Name: thewes xyz
Theme URI: https://yourwebsite.com/theme
Author: Your Name
Author URI: https://yourwebsite.com
Description: This is my first custom theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: <https://www.gnu.org/licenses/gpl-2.0.html>
Text Domain: my-custom-theme
Tags: custom-background
*/
/* Hide scrollbar for Chrome, Safari and Opera */
/* BASISEINSTELLUNGEN */
        html {
            /* Verhindert den äußeren Scrollbalken */
            overflow: hidden; 
            font-size: 16px; 
        }
        html, body {
            font-family: Arial, Helvetica, sans-serif;
            padding: 0;
            margin: 0;
            overflow: hidden; 
        } 
        *, *::before, *::after {
            box-sizing: border-box;
        }

        /* DL/DD Basis-Styling */
        dl {
            padding: 0;
            margin: 0;
            border-top: 2px solid black;
            min-height: 100%;
        } 

        dd { 
            display: none; 
            border-bottom: 2px solid black;
            padding: 0;
            margin: 0;
            background: rgb(255, 255, 255);
        }
        .menu-content{ padding: 0.6rem; }
        .post-content { margin: 0.6rem; }
        .menu-title, .post-title {
            border-bottom: 2px solid black;
            cursor: pointer;
            padding: 0.6rem;
            font-weight: bold;
        }
        .menu-title a, .post-title a { background: red; }


        /* ---------------------------------------------------- */
        /* DESKTOP-LAYOUT (Standard, > 768px) */
        /* ---------------------------------------------------- */

        /* Flex-Container für die Hauptstruktur */
        .container-flex {
            display: flex; 
            height: 100vh; 
            width: 100%; 
        }

        /* Spalten Grundeinstellungen */
        .spalte-a {
            flex-basis: 30%; 
            flex-grow: 0; 
            flex-shrink: 0;
            height: 100vh;
            overflow-y: auto;
            background-color: rgb(230, 230, 230);
        }
        
        /* Wrapper für B & C (70%) */
        .content-wrapper {
            flex-basis: 70%; 
            flex-shrink: 0;
            flex-grow: 0;
            position: relative; 
            height: 100vh;
        }

        /* Gruppen Container (Innerhalb des Wrappers) */
        .content-group {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex; /* Teilt B und C horizontal */
            flex-wrap: nowrap;
        }

        /* Spalten B und C innerhalb der Gruppe */
        .spalte-b, .spalte-c {
            flex-basis: 50%; /* 50% von 70% Gesamtbreite = 35% */
            flex-grow: 0; 
            flex-shrink: 0;
            height: 100vh;
            overflow-y: auto; /* Individuelles Scrollen auf Desktop */
            position: relative; 
            display: block; /* SICHTBAR AUF DESKTOP */
        }
        .spalte-b { background-color: rgb(240, 240, 240); }
        .spalte-c { background-color: rgb(230, 230, rgb(230), 230); padding: 0; }
        
        /* Toggles auf Desktop NICHT SICHTBAR */
        .menu-toggle, .mobile-tab-container { display: none; }


        /* SCROLLBALKEN STYLING (Webkit) */
        .spalte-a::-webkit-scrollbar, .spalte-b::-webkit-scrollbar, .spalte-c::-webkit-scrollbar { width: 8px; }
        .spalte-a::-webkit-scrollbar-track, .spalte-b::-webkit-scrollbar-track, .spalte-c::-webkit-scrollbar-track { background: transparent; }
        .spalte-a::-webkit-scrollbar-thumb, .spalte-b::-webkit-scrollbar-thumb, .spalte-c::-webkit-scrollbar-thumb {
            background-color: black; 
            border-radius: 10px;
            border: 2px solid rgb(230, 230, 230);
        }
        
        /* FARBFELDER IN SPALTE C */
        .color-container { width: 100%; padding: 0; margin: 0; display: flex; flex-direction: column; }
        .color-block { 
            width: 100%; border: 2px solid black; margin: 0; position: relative; border-bottom: none; 
            padding-top: 150%; height: 0; /* Seitenverhältnis */
        }
        .color-block:last-child { border-bottom: 2px solid black; }
        .color-block-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; font-size: 1rem; font-weight: bold; }
        
        /* Post Navigation Styling */
        .post-footer-separator { width: 100%; background-color: rgb(230, 230, 230); margin-top: 10px; padding: 0.6rem; border-top: 2px solid black; text-align: center; }
        .prev-post-link, .next-post-link { text-decoration: none; color: #333; padding: 0 10px; }
        .prev-post-link:hover, .next-post-link:hover { color: #00bcd4; }


        /* ---------------------------------------------------- */
        /* MOBILE-LAYOUT (Media Query, max-width: 768px) */
        /* ---------------------------------------------------- */

        /* NEU: Styling für den Tab-Container */
        .mobile-tab-container {
            display: flex;
            position: fixed;
            top: 40px; 
            left: 0;
            z-index: 106; /* Über Content-Wrapper (99) und unter Menü-A (111) */
            width: 100%;
            height: 40px;
            border-bottom: 2px solid black;
            background: white;
        }
        .content-toggle { /* Dies sind die Tab-Buttons */
            display: flex !important;
            justify-content: center;
            align-items: center;
            flex-grow: 1; /* Beide Buttons gleich breit */
            height: 100%;
            padding: 10px;
            background: #555;
            color: white;
            font-weight: bold;
            text-align: center;
            cursor: pointer;
            border-right: 1px solid black; /* Trennlinie zwischen Tabs */
        }
        .content-toggle:last-child {
            border-right: none;
        }
        .content-toggle.active-tab {
            background: #00bcd4; /* Aktiver Tab-Hintergrund */
        }

        @media (max-width: 768px) {
            
            .container-flex {
                height: 100vh; 
                min-height: 100vh;
                overflow: hidden; 
                flex-direction: column; 
            }

            /* MENU TOGGLE (Hauptmenü A) */
            .menu-toggle {
                display: block; 
                position: fixed;
                top: 0;
                left: 0;
                z-index: 111; 
                width: 100%;
                height: 40px;
                padding: 10px;
                background: #333;
                color: white;
                font-weight: bold;
                text-align: left;
                cursor: pointer;
                border-bottom: 2px solid black;
            }
            
            /* SPALTE A (Menü) - Fixed Overlay */
            .spalte-a {
                position: fixed;
                top: 40px;
                left: 0;
                z-index: 110; 
                width: 100%;
                height: calc(100vh - 40px);
                flex-basis: auto;
                display: none; 
                overflow-y: auto; 
                background-color: rgb(230, 230, 230);
                border-bottom: 2px solid black;
            }
            
            /* WICHTIG: WRAPPER wird zum Scroll-Container für Content */
            .content-wrapper {
                margin-top: 80px; /* Unter BEIDEN Toggles starten */
                flex-basis: 100%; 
                height: calc(100vh - 80px); 
                position: relative; 
                overflow-y: auto; /* SCROLLT DEN GESAMTEN INHALT */
                z-index: 99;
            }

            /* Gruppen (B & C im Flow, gestapelt) */
            .content-group {
                position: relative; 
                flex-direction: column; /* STAPELT B und C */
                height: auto;
                min-height: 100%; 
                /* WICHTIG: Display: flex wird nur von JS gesetzt/entfernt */
            }
            
            /* Spalte C/B sind die Inhalte, die umgeschaltet werden */
            .spalte-c, .spalte-b {
                position: relative; 
                z-index: 90; 
                width: 100%;
                height: auto; 
                overflow-y: visible; 
                display: none; /* Mobile: Anfangs alle Inhalte versteckt (Tab-Logik übernimmt) */
                flex-basis: 100%;
            }
            
            /* Spalte C muss die Border-Bottom behalten */
            .spalte-c {
                border-bottom: 2px solid black;
            }
        }