/* 1. GRUNDSTILE (Farben & Schrift) */
:root {
    --primary: #ca3838;   /* Das Rot aus deinem Logo/deiner Linie */
    --light: #f8fafc;     /* Fast weiß für Text auf dunklem Grund */
    --dark: #0f172a;      /* Dunkles Slate für Text auf hellem Grund */
    --header-bg: #000060; /* Das exakte Dunkelblau deines Headers */
    --body-bg: #000060;   /* Hintergrund der Seite */
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: var(--body-bg);
    margin: 0;
    padding: 0;
    color: var(--light);
    line-height: 1.6;
}

/* 4. LAYOUT / ZWEISPALTIG */
.container {
    display: grid;
    grid-template-columns: 3fr 1fr; /* Hauptteil (75%) und Sidebar (25%) */
    gap: 3rem;
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 20px;
}
.content {
    background-color: #f1f5f9; /* Ein sehr edles, helles Slate-Graublau – weicher als hartes Weiß */
    color: #1e293b;            /* Ein sehr dunkles Anthrazit für perfekte Lesbarkeit der Texte */
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--primary); /* Ein schicker roter Akzentbalken links am Hauptfenster! */
}