:root, [data-selected-theme="ri"] {
            --color-background-primary: #FFAAAA;
            --color-background-button: #DD9999;
            --color-background-second: #884444;
            
            --color-text-primary: #FFCCAA;
            --color-text-button: #CCFFAA;
            --color-text-second: #FFAAAA;
            
            --color-background-rt:#330000;
            --color-text-rt:#FFAAAA;
            
            --color-border:#882222;
            
            --color-accent: #AA8888;
        }

        body {
            font-family: sans-serif;
            background-color:#000000;
            margin:3px;
            color: var(--color-text-primary);
            display:flex;
            flex-direction: column;
        }
        
        .h {
            visibility: collapse;
        }

        a, summary, button {
            color: var(--color-text-button);
            background-color:rgba(0,0,0,0);
            border-style:solid;
            border-width:2px;
            border-color:var(--color-border);
            border-radius:3px; 
            text-decoration:none;
            min-height:3vh;
            padding:5px;
            padding-top:0px; 
            padding-bottom:0px;
            margin-top:10px;
            margin-bottom:10px;
            
            white-space: nowrap;
            overflow-wrap: normal;
        }
        
        a:hover, summary:hover, button:hover {
            background-color: var(--color-background-second);
            color: var(--color-text-second);
        }
        
        h1, h2, h3, h4, h5, h6 {
            padding-top:0px;
            padding-bottom:0px;
            
            
            background-color:rgba(255,255,255,0.1);
            border:5px solid hidden;
            border-radius:5px;
            margin:0px;
            
            font-weight:bold;
        }
        
        h1 {
            font-size:2.0em;
            padding-left:0.5%;
        }
        h2 {
            font-size:1.9em;
            padding-left:2%;
            
        }
        h3 {
            font-size:1.8em;
            padding-left:4%;
            
        }
        h4 {
            font-size:1.7em;
            padding-left:6%;
            
        }
        h5 {
            font-size:1.6em;
            padding-left:6.5%;
            
        }
        h6 {
            font-size:1.5em;
            padding-left:7%;
            
        }

        
        block {
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);

            text-decoration:none;
            font-family: Verdana, Geneva, Tahoma, sans-serif;
            display: block;
            text-align: center;
            width: auto;
        }

        nav {
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);
            
            z-index:50;
            
            padding:5px;
            
            position: fixed;
            width:100vw;
            top: 0;
            left: 0;
        }

        nav ul {
            background-color: var(--color-background-primary);
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            
            border:5px solid;
            border-radius:20px;
            
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);
            
        }

        nav li {
            position: relative;
            width:auto;
        }

        nav a {
            color: var(--color-text-button);
            background-color:var(--color-background-button);
            text-decoration: none;
            padding: 5px 10px;
            display: block;
            width:auto;
            
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);
        }

        nav a:hover {
            background-color: var(--color-background-second);
            color: var(--color-text-second);
        }

        nav ul ul {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: rgba(10,10,10,0.1);
            box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
            z-index: 1;
            flex-direction: column;
        }

        nav ul ul li {
            width: 100%;
        }

        nav ul ul a {
            padding: 10px;
        }

        nav ul ul a:hover {
            background-color: #ddd;
        }

        .has-submenu > a::after {
            content: " \21F2";
            margin-left: 5px;
        }

        .has-submenu.open > a::after {
            transform: rotate(90deg);
            transition: transform 0.2s ease;
        }

        .has-submenu.open > ul {
            display: flex;
        }
        
        .motd {
            background-color:var(--color-background-rt);
            position: sticky;
            margin:5px;
            border:5px solid;
            border-radius:20px;
            border-color:rgba(0,0,0,1);
            
            
            
            justify-content: center;
            align-items: center;
            
            top: 0;         /* Fixiert das Element am oberen Rand */
            /*height: 80vh;   Nimmt die volle Bildschirmhöhe ein */
            z-index: 1;
        }
        
        .content {
            display: flex; 
            flex-direction: column; 
            justify-content: space-evenly;
            min-height:90vh;
            width:90vw;
            max-width:800px;
            margin:10px;
            margin-left: auto;
            margin-right:auto;
            padding:10px;
            
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);
            
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            
            position: relative;
            z-index: 10;     /* Höherer Index, um über das sticky-Element zu gleiten */
            min-height: 100vh;
        }
        
        footer {
            display: flex; 
            flex-direction: column; 
            justify-content: space-evenly;
            
            text-align: center;
            
            width:90vw;
            max-width:800px;
            margin:10px;
            margin-left: auto;
            margin-right:auto;
            padding:10px;
            
            background: rgba(255, 255, 255, 0.14);
            border-radius: 16px;
            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
            backdrop-filter: blur(4.8px);
            -webkit-backdrop-filter: blur(4.8px);
            border: 1px solid rgba(255, 255, 255, 0.33);
            
            white-space: normal;
            word-wrap: break-word;
            overflow-wrap: anywhere;
            
            position: relative;
            z-index: 10;     /* Höherer Index, um über das sticky-Element zu gleiten */
            
        }
        
        
        /* Verhindert, dass die Checkboxen auf Desktop stören */
        .sub-toggle-input {
            display: none;
        }
        
        @media (min-width: 801px) {
            /* Auf Desktop brauchen wir keine Klick-Labels, da dort :hover genutzt wird */
            .sub-label {
                display: block;
                cursor: default;
            
                display: block;
                padding: 5px 10px;
                background: var(--color-background-button);
                color: var(--color-text-button);
                border: 2px solid var(--color-border);
                border-radius: 16px; /* Passend zu deinen anderen Links */
                cursor: pointer;
                margin-top: 5px;
                margin-bottom: 5px;
            }
            
            .mobileonly {
                visible:hidden;
                display:fixed;
                top:500;
            }
            
            /* Deine bestehende Hover-Logik für Desktop */
            nav li.has-submenu:hover > ul {
                display: flex;
            }
            
        }
        
        @media (max-width: 800px) {
            nav ul {
                flex-direction: column;
                align-items: center;
            }
            
            nav li {
                width: 100%;
                text-align: center;
            }

            nav ul ul {
                position: relative;
                top: 0;
                left: 0;
                z-index:1001;
            }
            body {
                font-size: 1.2em;
            }
            .motd {
                height:90vh;
            }
            
            /* Die Navigation selbst begrenzen, falls sie zu lang wird */
            nav {
                max-height: 90vh; /* Maximal 90% der Bildschirmhöhe */
                max-width:95vw;
                overflow-y: auto; /* Aktiviert das Scrollen innerhalb der Nav */
                display: flex;
                flex-direction: column;
                z-index:1000;
            }
        
            nav ul#main-menu {
                display: none; 
                flex-direction: column;
                width: 100%;
                /* Wichtig: Auf Mobilgeräten kein festes Layout, damit es wachsen kann */
            }
        
            /* Checkbox-Hack: Menü anzeigen */
            .nav-toggle-input:checked ~ ul#main-menu {
                display: flex;
            }
        
            /* UNTERMENÜS: Hier liegt der Fehler beim "Nicht-Rankommen" */
            nav ul ul {
                position: static;  /* Drückt nachfolgende Punkte nach unten */
                display: none;     /* Standardmäßig zu */
                width: 90%;
                background: rgba(0, 0, 0, 0.2); /* Leicht absetzen */
                border: none;
                border-left: 3px solid var(--color-border); /* Optische Trennung */
                margin: 5px 0;
            }
        
            /* Untermenü anzeigen, wenn der Punkt fokussiert wird oder offen ist */
            .has-submenu:focus-within > ul,
            .has-submenu.open > ul {
                display: flex;
            }
        
            /* Verhindert, dass die Links in der Nav zu klein zum Antippen sind */
            nav a {
                white-space: normal; /* Erlaubt Zeilenumbruch bei langen Links */
                margin-top: 5px;
                margin-bottom: 5px;
            }
            
            /* Verstecke die neuen Untermenü-Checkboxen */
            .sub-toggle-input {
                display: none;
            }
        
            /* Style für die Oberpunkte (Labels), damit sie wie Buttons aussehen */
            .sub-label {
                display: block;
                padding: 5px 10px;
                background: var(--color-background-button);
                color: var(--color-text-button);
                border: 2px solid var(--color-border);
                border-radius: 16px; /* Passend zu deinen anderen Links */
                cursor: pointer;
                margin-top: 5px;
                margin-bottom: 5px;
            }
        
            /* Das eigentliche Aufklappen via Checkbox */
            nav ul ul {
                display: none; /* Standardmäßig zu */
                position: static;
                z-index:1001;
                width: 90%;
                padding-left: 15px; /* Einrücken */
            }
        
            /* Wenn Checkbox aktiv -> zeige nachfolgendes <ul> */
            .sub-toggle-input:checked ~ ul {
                display: flex !important;
                flex-direction: column;
            }
        
            /* Optisches Feedback: Pfeil drehen (optional) */
            .sub-label::after {
                content: " \21F2";
                float: right;
            }
            .sub-toggle-input:checked ~ .sub-label::after {
                transform: rotate(90deg);
                display: inline-block;
            }
            
            /* 1. Das Untermenü muss relativ sein, damit der z-index funktioniert */
            nav ul ul {
                display: none; 
                position: relative; /* Ändern von static auf relative */
                z-index: 1001;      /* Sicherstellen, dass es über dem Label liegt */
                width: 100%;
                padding-left: 15px;
                background: rgba(0, 0, 0, 0.2);
            }
        
            /* 2. Wenn aufgeklappt, z-index erhöhen */
            .sub-toggle-input:checked ~ ul {
                display: flex !important;
                flex-direction: column;
                z-index: 1005; /* Höher als alles andere in der nav */
            }
        
            /* 3. Den ersten Link im Untermenü absichern */
            nav ul ul li:first-child a {
                position: relative;
                z-index: 1010;
            }
            
            /* 4. Verhindern, dass das Label übersteht */
            .sub-label {
                position: relative;
                z-index: 1000;
                margin-bottom: 0px; /* Margin entfernen, stattdessen Padding nutzen */
            }
        }
        
        @media (min-width: 800px) {
            nav {
                position: fixed;
                width:100vw;
                top: 0;
                left: 0;
            }
            .motd {
                padding-top:15vh;
            }
        }
        
        .rt-text {
            color:var(--color-text-rt); 
            font-family: monospace;
            display: flex; 
            flex-direction: column; 
            justify-content: flex-end;
        }
        
        
        @media (min-width: 800px) {
            .rt-text {
                font-size:5px;
            }
            .banner-img {
                max-width:40vw;
            }
        }
        
        @media (max-width: 800px) {
            .rt-text {
                font-size:3px;
            }
            .banner-img {
                max-width:60vw;
            }
        }
        
        @media (max-width: 500px) {
            .rt-text {
                font-size:1.8px;
            }
            .banner-img {
                max-width:60vw;
            }
        }
        
        @media (max-width: 300px) {
            .rt-text {
                font-size:1px;
            }
            .banner-img {
                max-width:70vw;
            }
        }
        .theme-switcher {
            color:inherit;
            background-color: inherit;
            margin:5px;
            padding:10px;
            border: 2px;
            border-color: var(--color-border);
            border-radius:5px;
            text-align: center;
        }
        
        input, textarea {
            color:var(--color-text-second);
            background-color: var(--color-background-second);
            border: 2px;
            border-color:var(--color-border);
            border-radius:2px;
        }
        
        ul {
            padding-left:1px;
        }
        
        table.hit {
            border: none;
            background: transparent;
            margin: 2em auto;
            font-family: sans-serif;
            font-size: 0.9em;
            color: var(--color-text-second);
            text-align: center;
        }
        
        table.hit th,
        table.hit td {
            border: none;
            padding: 2px 8px;
        }
        
        table {
            color:var(--color-text-primary);
            background:transparent;
        }
        
        table.hit th {
            font-weight: normal;
            color: var(--color-text-second);
        }
        @media (max-width: 600px) {
            table.hit {
                font-size: 0.8em;
            }
        }
        
        
        table th {
            border: 4px solid;
        }
        
        table td {
            border: 2px solid;
        }
        
        table td, table th {
            border-radius: 5px;
            padding:8px;
            text-align:center;
            margin:4px;
        }
        

        li {
            margin-top:7px;
            margin-bottom:7px;
            list-style-type: none;
        }
        
        
        #lightbox {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(0,0,0,0.8);
          justify-content: center;
          align-items: center;
          z-index: 1000;
        }
        #lightbox img {
          max-width: 90%;
          max-height: 90%;
          box-shadow: 0 0 20px #000;
          border: 4px solid #fff;
          border-radius: 8px;
        }
        #lightbox span {
          position: absolute;
          top: 20px;
          right: 30px;
          font-size: 30px;
          font-weight: bold;
          color: #fff;
          cursor: pointer;
        }
        
        .fileview {
            border:none;
            border-left:5px solid;
            border-bottom:2px solid;
            border-radius:10px;
            border-color: var(--color-background-second);
            padding-left:5px;
        }
        dialog::backdrop {
            background: rgba(100,50,50,0.5); /* blockiert den Hintergrund visuell */
        }
        


/* Checkbox selbst immer verstecken */
.nav-toggle-input {
    display: none;
}

/* Desktop-Zustand: Button verstecken */
.mobile-nav-button {
    display: none;
}

@media (max-width: 800px) {
    .mobile-nav-button {
        display: block; /* Balken anzeigen */
        cursor: pointer;
        background: var(--color-background-button);
        color: var(--color-text-button);
        border: 2px solid var(--color-border);
        border-radius: 8px;
        padding: 10px;
        text-align: center;
        font-weight: bold;
    }

    /* Das Menü standardmäßig verstecken */
    nav ul#main-menu {
        display: none;
        flex-direction: column;
        width: 100%;
    }

    /* Der Kern des Checkbox-Hacks: 
       Wenn die Checkbox markiert ist (~ bedeutet "folgendes Element"), 
       zeige die Liste an */
    .nav-toggle-input:checked ~ ul#main-menu {
        display: flex;
    }
}