.la {color:DarkOrange; font-style: italic;}
.de {color:green; font-style: italic;}
.gr {color:red; font-style: italic;}
.he {color:blue; font-style: italic;}
.it {color:teal; font-style: italic;}

li {
margin-top: 4px; 
margin-bottom: 4px; 
}
ul {
list-style: none; /* Entfernt den Kreis komplett */
padding-left: 0;/* Optional: Entfernt den leeren Platz, den der Kreis links verbraucht hat */
margin: 0;/* Optional: Setzt Außenabstände zurück */
}
body{
padding: 0 20px;
background-color: WhiteSmoke;
border-width:1px;
border-style:solid;
border-color:silver;
width: 100%;/* Nutzt auf kleinen Bildschirmen die volle Breite */
max-width: 800px;/* Begrenzt die maximale Breite auf großen Bildschirmen */
margin: 0 auto; /* Zentriert die gesamte Seite horizontal */
box-sizing: border-box; /* Verhindert Layout-Probleme durch Innenabstände */
}

h1 {color: green;font-size: 1.5rem;font-weight:600;}
h2 {color: darkblue;font-size: 1.2rem;font-weight:600;}
h3 {color: blue;font-size: 1.0rem;font-weight:500;}
i {color: darkblue;font-size: 1.0rem;font-weight:500;}

.wa {word-spacing: 1em;}

a:link {
color: black;
text-decoration: none; 
transition: color 0.2s ease;
font-weight: bold; 
font-style: normal;
}
a:visited {
color: black;
}

a:focus {
outline: 2px solid #ff9900; /* Sichtbarer Rahmen beim Tabben */
background-color: #fff8e1;/* Leichter Hintergrund zur Erkennung */
}
/* 4. Maus-Hover-Effekt auf der ganzen Website */
a:hover {
color: maroon;/* Wechselt zu Rot bei Mauskontakt */
text-decoration: underline; /* Entfernt die Unterstreichung beim Hovern */
}
/* 5. Zustand im Moment des Klicks */
a:active {
color: #000000;/* Wird kurzzeitig Schwarz beim Klicken */
}

table {border-collapse: collapse;}
th[scope="row"] {
vertical-align: top;font-weight: normal; /* Hebt die Fettschrift auf */
text-align: left;/* Richtet den Text linksbündig aus (optional) */
color: teal;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
/* Optional: Innenabstand für bessere Lesbarkeit */
padding: 8px; }

td {color:FireBrick;vertical-align: top;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;

/* Optional: Innenabstand für bessere Lesbarkeit */
padding: 8px; }

:root {
color-scheme: light dark;
}

/* Grundgestaltung der Hauptnavigation */
.navigation ul {
list-style: none;
padding: 0;
margin: 0;
background-color: WhiteSmoke;
}

.navigation > ul > li {
display: inline-block; /* Nebeneinander anordnen */
position: relative;/* Wichtig für die absolute Positionierung des Untermenüs */
}

.navigation a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}

.navigation a:hover {
background-color: white;
}

/* 1. UNTERMENÜ STANDARDMÄSSIG VERSTECKEN */
.dropdown-content {
display: none; /* Unsichtbar machen */
position: absolute;/* Löst das Untermenü aus dem normalen Textfluss */
top: 100%; /* Positioniert es direkt unter dem Hauptpunkt */
left: 0;
background-color: #444;
min-width: 160px;
z-index: 1;/* Liegt über anderen Inhalten */
}

/* Unterpunkte untereinander anzeigen */
.dropdown-content li {
display: block;
}

/* 2. AUSKLAPP-EFFEKT BEI HOVER */
.dropdown:hover .dropdown-content {
display: block;/* Wird sichtbar, wenn die Maus auf .dropdown zeigt */
}