/* --- GRUNDSTYLING --- */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    background-color: #f4f4f4; /* Hellgrauer Hintergrund */
    background-image: url('Bilder/hintergrund.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    /* Du kannst hier alle deine CSS-Regeln für alle Elemente einfügen */
}

/* --- HEADER BEREICH (Kopfzeile) --- */
header {
    background-color: #222; /* Dunkler Hintergrund wie im Beispiel */
    color: rgb(255, 255, 255);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid rgb(25, 0, 255); /* Rote Akzentlinie */
}
header .logo {
    font-size: 24px;
    font-weight: bold;
    color: rgb(219, 64, 64);
}
nav a {
    color: rgb(219, 64, 64);
    text-decoration: none;
    margin-left: 20px;
    padding: 5px;
}

/* --- LAYOUT DER HAUPTINHALTSEITE (3 SPALTEN) --- */
.container {
    display: flex;
    padding: 30px;
    max-width: 1900px; /* Maximale Breite festlegen */
    margin: 0 auto; /* Zentrieren */
}

/* --- LINKER BEREICH (Sidebar Left) --- */
.sidebar-left {
    width: 150px;
    margin-right: 50px;
    background-color: #ccc8c8;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.sidebar-left h3 {
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
    margin-top: 0;
    text-align: center;
    color: rgb(0, 0, 0);
}

/* NEU: ENTFERNT DIE PUNKTE IN DER SIDEBAR! */
.sidebar-left ul {
    list-style-type: none; /* 💥 DIES ENTFERNT DIE PUNKTE */
    padding: 0; /* Entfernt den Standard-Einzug der Liste */
    margin: 0;
    display: block; /* Stellt sicher, dass jedes Element eine neue Zeile beginnt */
    margin-bottom: 10px; /* 💥 Fügt 10 Pixel Abstand unter jedem Button hinzu */
}

/* 1. Grund-Styling für das gesamte Navigationselement */
.nav-button {
    margin-bottom: 10px;
    width: 80px;
    text-align: center;
    /* Entfernt die Standard-Link-Unterstreichung */
    text-decoration: none; 
    
    /* Hintergrundfarbe des Buttons */
    background-color: rgb(219, 64, 64); /* Beispiel: Ein schönes Blau */ 
    
    /* Textfarbe (Schriftfarbe) */
    color: rgb(0, 0, 0); 
    
    /* Abstand um den Text herum (Button-Größe) */
    padding: 10px 20px; 
    
    /* Sorgt dafür, dass Padding und Breite/Höhe funktionieren */
    display: inline-block; 
    
    /* Optionale Abrundung der Ecken */
    border-radius: 5px; 
    
    /* Optionale Schatten für einen 3D-Effekt */
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    
    /* Übergangseffekt für Hover/Active */
    transition: background-color 0.3s, box-shadow 0.3s;
}

/* 2. Styling für den Hover-Effekt (wenn die Maus drüber ist) */
.nav-button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hovern */
    cursor: pointer; /* Zeigt, dass es anklickbar ist */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 3. Styling für den Active-Zustand (wenn geklickt wird) */
.nav-button:active {
    background-color: #003d80; /* Noch dunkler für den "gedrückt"-Effekt */
    box-shadow: none; /* Entfernt den Schatten, um den "gedrückt"-Look zu simulieren */
    transform: translateY(1px); /* Bewegt den Button leicht nach unten */
}

.steam-button {
    margin-bottom: 10px;
    width: 120px;
    height: 50px;
    text-align: center;
    text-decoration: none; 
    background-color: rgb(219, 64, 64);
    color: rgb(0, 0, 0); 
    padding: 10px 20px; 
    display: flex; 
    justify-content: center;
    align-items: center;
    border-radius: 5px; 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.steam-button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hovern */
    cursor: pointer; /* Zeigt, dass es anklickbar ist */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.steam-button:active {
    background-color: #003d80; /* Noch dunkler für den "gedrückt"-Effekt */
    box-shadow: none; /* Entfernt den Schatten, um den "gedrückt"-Look zu simulieren */
    transform: translateY(1px); /* Bewegt den Button leicht nach unten */
}

.teamspeak-button {
    margin-bottom: 10px;
    width: 120px;
    height: 50px;
    text-align: center;
    text-decoration: none; 
    background-color: rgb(219, 64, 64);
    color: rgb(0, 0, 0); 
    padding: 10px 20px; 
    display: flex; 
    justify-content: center;
    align-items: center; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.teamspeak-button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hovern */
    cursor: pointer; /* Zeigt, dass es anklickbar ist */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.teamspeak-button:active {
    background-color: #003d80; /* Noch dunkler für den "gedrückt"-Effekt */
    box-shadow: none; /* Entfernt den Schatten, um den "gedrückt"-Look zu simulieren */
    transform: translateY(1px); /* Bewegt den Button leicht nach unten */
}

.teamspeak-lyl-button {
    margin-bottom: 10px;
    width: 120px;
    height: 50px;
    text-align: center;
    text-decoration: none; 
    background-color: rgb(219, 64, 64);
    color: rgb(0, 0, 0); 
    padding: 10px 20px; 
    display: flex; 
    justify-content: center;
    align-items: center; 
    border-radius: 5px; 
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s, box-shadow 0.3s;
}

.teamspeak-lyl-button:hover {
    background-color: #0056b3; /* Dunkleres Blau beim Hovern */
    cursor: pointer; /* Zeigt, dass es anklickbar ist */
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.teamspeak-lyl-button:active {
    background-color: #003d80; /* Noch dunkler für den "gedrückt"-Effekt */
    box-shadow: none; /* Entfernt den Schatten, um den "gedrückt"-Look zu simulieren */
    transform: translateY(1px); /* Bewegt den Button leicht nach unten */
}
/* --- HAUPTINHALT (Main Content) --- */
.main-content {
    flex-grow: 1; /* Nimmt den restlichen Platz ein */
    background-color: #ccc8c8;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    color: #000000;
}
.article-teaser {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 150px;
}
.article-teaser:last-child {
    border-bottom: none;
}
/* --- KORREKTUR: "ÜBER MICH" BEREICH (Bild und Text nebeneinander) --- */

/* 1. Der neue Container, um Bild und Text nebeneinander zu legen */
.about-me-content {
    /* 💥 Flexbox ist der Schlüssel: Stellt Elemente in einer Reihe dar */
    display: flex;
    /* Fügt Abstand zwischen Bild und Text hinzu */
    gap: 20px; 
    /* Stellt sicher, dass das Bild und der Text oben ausgerichtet sind */
    align-items: flex-start; 
}

/* 2. Styling für das Bild */
.profile-image {
    /* Setzt die Breite des Bildes fest, z.B. 150px */
    width: 150px; 
    /* Sorgt dafür, dass die Höhe proportional angepasst wird */
    height: auto; 
    /* Optional: Macht die Ecken weicher */
    border-radius: 5px; 
}

/* 3. Styling für den Text */
.about-me-text {
    /* Nimmt den restlichen verfügbaren Platz im Flex-Container ein */
    flex-grow: 1;
}
/* --- RECHTER BEREICH (Sidebar Right) --- */
.sidebar-right {
    width: 200px;
    margin-left: 50px;
    background-color: #ccc8c8;
    padding: 15px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    text-align: center;
    color: #000000;
}
.sidebar-right .search-box {
    padding: 10px;
    border: 1px solid #ccc;
}
/* CSS für das eingebettete LED-Steuerungs-Fenster */
.iframe-wrapper {
    /* Zentriert den Wrapper horizontal in der main-content Spalte */
    margin: 20px auto; 
    
    /* Setzt die maximale Breite des Fensters */
    max-width: 700px; 
    
    /* Optische Verbesserungen für das "Fenster" */
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    
    /* Innenabstand und Hintergrund, um es abzuheben */
    padding: 10px;
    background-color: #f9f9f9;
}

.iframe-wrapper iframe {
    /* Entfernt den Standard-Rand des Iframe selbst */
    border: none;
    /* Stellt sicher, dass das Iframe die gesamte Breite des Wrappers ausfüllt */
    display: block; 
}