/* Spezifische Styles für die Inhaltsseiten */
        .content-page {
            display: flex;
            align-items: flex-start;
            max-width: 1200px;
            margin: 30px auto;
            gap: 30px;
        }
        
        /* Sidebar mit Inhaltsverzeichnis */
        .sidebar {
            width: 280px;
            flex-shrink: 0;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 20px;
            align-self: flex-start;
            position: sticky;
            top: 30px;
            max-height: calc(100vh - 60px); /* Beispiel: 100% der Viewporthöhe minus Header/Footer/Abstand */
            overflow-y: auto; /* Ermöglicht vertikales Scrollen, wenn Inhalt die max-height überschreitet */

        }
        
        .sidebar h3 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 10px;
            
        }
        .border_technical {
            border-bottom: 2px solid var(--color-technical);
        }

        .border_applied {
            border-bottom: 2px solid var(--color-applied);
        }
        .border_theoretical {
            border-bottom: 2px solid var(--color-theoretical);
        }
        .border_practical {
            border-bottom: 2px solid var(--color-practical);
        }
        .border_partner {
            border-bottom: 2px solid var(--color-partner);
        }
        .border_lehrplan {
            border-bottom: 2px solid var(--color-lehrplan);
        }
        
        .sidebar-nav {
            list-style-type: none;
            padding: 0;
        }
        
        .sidebar-nav li {
            margin-bottom: 5px;
        }
        
        .sidebar-nav a {
            display: block;
            padding: 8px 10px;
            text-decoration: none;
            color: var(--color-text);
            border-radius: 4px;
            transition: background-color 0.3s;
        }
        
        .sidebar-nav a:hover {
            background-color: #f1f1f1;
        }
        
        .sidebar-nav a.active_technical {
            background-color: var(--color-technical);
            color: white;
            font-weight: bold;
        }
        .sidebar-nav a.active_applied {
            background-color: var(--color-applied);
            color: white;
            font-weight: bold;
        }
        .sidebar-nav a.active_theoretical {
            background-color: var(--color-theoretical);
            color: white;
            font-weight: bold;
        }
        .sidebar-nav a.active_practical {
            background-color: var(--color-practical);
            color: white;
            font-weight: bold;
        }
        .sidebar-nav a.active_partner {
            background-color: var(--color-partner);
            color: white;
            font-weight: bold;
        }
        .sidebar-nav a.active_lehrplan {
            background-color: var(--color-lehrplan);
            color: white;
            font-weight: bold;
        }
/*   NEUE REGELN  */
        /*
=====================================================
-- Blasse Hervorhebung für nicht-aktive Hauptpunkte --
=====================================================
*/

/* Wir machen die Schrift der Hauptpunkte generell fett, um sie von Unterpunkten abzuheben */
.sidebar-nav a[class*="main-item-"] {
    font-weight: bold;
}

.sidebar-nav a.main-item-lehrplan {
    background-color: rgba(0, 103, 105, 0.15); /* Blasses Lehrplan-Grün */
}

.sidebar-nav a.main-item-practical {
    background-color: rgba(177, 175, 255, 0.2); /* Blasses Praktische-Informatik-Lila */
}

.sidebar-nav a.main-item-theoretical {
    background-color: rgba(7, 102, 173, 0.15); /* Blasses Theoretische-Informatik-Blau */
}

.sidebar-nav a.main-item-applied {
    background-color: rgba(123, 201, 255, 0.25); /* Blasses Angewandte-Informatik-Hellblau */
}

.sidebar-nav a.main-item-technical {
    background-color: rgba(82, 37, 70, 0.15); /* Blasses Technische-Informatik-Dunkelrot */
}

.sidebar-nav a.main-item-partner {
    background-color: rgba(192, 229, 220, 0.4); /* Blasses Partner-Mint */
}

/* Wichtig: Der Hover-Effekt soll die blasse Farbe überschreiben */
.sidebar-nav a[class*="main-item-"]:hover {
    background-color: #f1f1f1;
}
/*--------------------*/
        .sidebar-nav .sub-item {
            padding-left: 20px;
            font-size: 0.95em;
        }
        
        /* Hauptinhalt */
        .main-content {
            flex-grow: 1;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            /* Erlaubt dem Hauptinhalts-Container, innerhalb eines Flex-Layouts zu schrumpfen, 
       auch wenn sein Inhalt (der Iframe) zu groß ist. */
    min-width: 0;
        }
        
        /* Abschnitte */
        .section {
            margin-bottom: 40px;
            scroll-margin-top: 40px; /* Für das Scrollen mit anchor-Links */
        }
        
        .section h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            padding-bottom: 8px;
            border-bottom: 2px solid #9b59b6;
        }
        
        .section h3 {
            color: #2c3e50;
            margin: 25px 0 15px;
        }
        
       
        /* Merktexte */
        .info-box {
            background-color: #e8f4fc;
            border-left: 5px solid #3498db;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .warning-box {
            background-color: #fff5e6;
            border-left: 5px solid #f39c12;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
        }
        
        .teacher-box {
            background-color: #eafaf1;
            border-left: 5px solid #2ecc71;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            display: none; /* Standardmäßig ausgeblendet */
        }
        
        /* Bildcontainer */
        .image-container {
            margin: 20px 0;
            text-align: center;
        }
        
        .image-container img {
            max-width: 100%;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .image-container figcaption {
            margin-top: 10px;
            font-size: 0.9em;
            color: #666;
        }
        
       
       
        /* Tabelle 
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }
        
        th, td {
            padding: 12px 15px;
            border: 1px solid #ddd;
            text-align: left;
        }
        
        th {
            background-color: #f8f9fa;
            font-weight: bold;
        }
        
        tr:nth-child(even) {
            background-color: #f8f9fa;
        }
        
        Responsive Design */
        @media (max-width: 768px) {
            .content-page {
                flex-direction: column;
            }
            
            .sidebar {
                width: 100%;
                position: static;
                margin-bottom: 20px;
            }
        }