/* Schriftart lokal laden */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Grundlayout */
* { box-sizing: border-box; }

body { 
    font-family: 'JetBrains Mono', monospace; 
    margin: 0; 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    min-height: 100vh;
    background-color: #ffffff;
    color: #333;
    line-height: 1.6;
}

/* Responsive Navigation */
nav { 
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Bricht auf kleinen Handys automatisch um */
    padding: 20px 10px;
    gap: 15px;
}

nav a { 
    text-decoration: none; 
    color: #333; 
    font-weight: bold;
    font-size: 0.9rem;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background 0.3s;
}

nav a:hover { background-color: #f0f0f0; color: #007bff; }

/* Inhaltsbereich */
.container { 
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertikale Zentrierung */
    align-items: center;
    width: 100%;
    max-width: 900px; /* Begrenzung auf großen Bildschirmen */
    padding: 40px 20px;
    text-align: center;
}

.logo { 
    width: 100%;
    max-width: 300px; /* Logo wird nie breiter als 300px */
    height: auto; 
    margin-bottom: 30px; 
}

h1 { font-size: calc(1.5rem + 1vw); margin-bottom: 20px; } /* Schrift wächst leicht mit */
p { font-size: 1rem; max-width: 600px; }

/* Mobile Optimierung */
@media (max-width: 480px) {
    nav { gap: 5px; }
    nav a { font-size: 0.8rem; padding: 5px; }
    .container { justify-content: flex-start; margin-top: 50px; }
}