/* Globale Stile & Variablen */
:root {
    --primary-blue: #0a74da; /* Ein sattes Blau */
    --dark-bg: #121212;      /* Sehr dunkles Grau / Fast Schwarz */
    --card-bg: #1e1e1e;      /* Dunkelgrau für Karten */
    --silver-text: #e0e0e0;  /* Helles Silber für Text */
    --light-silver: #f0f0f0; /* Sehr helles Silber für Akzente */
    --border-color: #333333; /* Dezente Border-Farbe */

    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--dark-bg);
    color: var(--silver-text);
    line-height: 1.6;
    font-size: 16px; /* Gute Basisgröße für Lesbarkeit */
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 0;
}

h1, h2, h3 {
    font-family: var(--font-secondary);
    font-weight: 700;
    color: var(--light-silver);
    margin-bottom: 0.8em;
}

h1 {
    font-size: 2.8rem;
}

h2 {
    font-size: 2.2rem;
    text-align: center;
    margin-bottom: 1.5em;
    color: var(--primary-blue);
}

h3 {
    font-size: 1.5rem;
    color: var(--primary-blue);
}

p {
    margin-bottom: 1em;
    font-size: 1rem; /* Angepasst für bessere Lesbarkeit */
}

a {
    color: var(--primary-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--light-silver);
}

/* Header */
header {
    background-color: var(--card-bg);
    padding: 30px 0;
    text-align: center;
    border-bottom: 3px solid var(--primary-blue);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

header .subtitle {
    font-size: 1.2rem;
    color: var(--silver-text);
}

/* Portal Grid */
#portal {
    padding: 40px 0;
}

.portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.portal-item {
    background-color: var(--card-bg);
    padding: 30px 25px;
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* Sorgt dafür, dass Inhalt oben beginnt */
}

.portal-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 116, 218, 0.3); /* Blauer Schatten beim Hover */
    border-color: var(--primary-blue);
}

.portal-item-icon {
    font-size: 3rem; /* Größe der Icons */
    color: var(--primary-blue);
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.portal-item:hover .portal-item-icon {
    color: var(--light-silver);
}

.portal-item h3 {
    margin-bottom: 10px;
}

.portal-item p {
    font-size: 0.95rem;
    color: var(--silver-text);
    flex-grow: 1; /* Stellt sicher, dass der p-Tag den verfügbaren Platz einnimmt, um die Kartenhöhe auszugleichen */
}

/* Footer */
footer {
    background-color: var(--card-bg);
    color: var(--silver-text);
    text-align: center;
    padding: 25px 0;
    margin-top: 40px;
    border-top: 1px solid var(--border-color);
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    h1 {
        font-size: 2.2rem;
    }
    h2 {
        font-size: 1.8rem;
    }
    .portal-grid {
        grid-template-columns: 1fr; /* Einspaltig auf kleineren Bildschirmen */
    }
    .portal-item {
        padding: 25px 20px;
    }
}

@media (max-width: 480px) {
    header {
        padding: 20px 0;
    }
    h1 {
        font-size: 1.8rem;
    }
    .subtitle {
        font-size: 1rem;
    }
    .portal-item h3 {
        font-size: 1.3rem;
    }
    .portal-item p {
        font-size: 0.9rem;
    }
    .portal-item-icon {
        font-size: 2.5rem;
    }
}
/* Globale Stile & Variablen */
:root {
    --primary-blue: #0a74da; /* Ein sattes Blau */
    --dark-bg: #121212;      /* Sehr dunkles Grau / Fast Schwarz */
    --card-bg: #1e1e1e;      /* Dunkelgrau für Karten */
    --silver-text: #e0e0e0;  /* Helles Silber für Text */
    --light-silver: #f0f0f0; /* Sehr helles Silber für Akzente */
    --border-color: #333333; /* Dezente Border-Farbe */

    --font-primary: 'Open Sans', sans-serif;
    --font-secondary: 'Roboto', sans-serif;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background-color: var(--dark-bg);
    color: var(--silver-text);
    line-height: 1.6;
    font-size: 16px;
    /* NEU: Blauer Rand um die gesamte Seite */
    border: 4px solid var(--primary-blue);
    /* NEU: Etwas Abstand zwischen dem Rand und dem Inhalt */
    padding: 15px; /* Sie können diesen Wert anpassen */
    /* Optional: Verhindern, dass der Body selbst scrollt, falls der Inhalt mal zu breit wird wegen des Paddings + Borders auf kleineren Screens, obwohl box-sizing das meiste abfängt. */
    /* overflow-x: hidden; */ /* Nur aktivieren, wenn es Probleme gibt */
}

.container {
    width: 90%; /* Behält Flexibilität auf kleineren Screens */
    max-width: 1400px; /* GEÄNDERT: Maximale Breite erhöht */
    margin: 0 auto;
    padding: 20px 0; /* Vertikales Padding für Sektionen beibehalten */
}

/* ... (Rest des CSS bleibt gleich) ... */

/* Header */
header {
    background-color: var(--card-bg);
    padding: 30px 0;
    text-align: center;
    border-bottom: 3px solid var(--primary-blue); /* Dieser Rand bleibt für den Header bestehen */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    /* WICHTIG: Wenn der Body jetzt Padding hat, muss der Header ggf. angepasst werden,
       damit sein Hintergrund bis zu den Kanten des Body-Paddings reicht, falls gewünscht.
       Aktuell würde der Header-Hintergrund *innerhalb* des Body-Paddings beginnen.
       Wenn der Header-Hintergrund bis zum blauen Body-Rand gehen soll,
       müsste man ihn aus dem .container nehmen oder das Body-Padding anders handhaben.
       Für einen einfachen Rahmen um die *gesamte sichtbare Seite* ist die aktuelle Lösung gut.
    */
}

/* ... (Rest des CSS bleibt gleich) ... */

/* Footer */
footer {
    background-color: var(--card-bg);
    color: var(--silver-text);
    text-align: center;
    padding: 25px 0;
    margin-top: 40px; /* Behält Abstand zum Hauptinhalt */
    border-top: 1px solid var(--border-color);
    /* Analog zum Header: Der Footer-Hintergrund beginnt innerhalb des Body-Paddings. */
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    body {
        padding: 10px; /* Optional: Body-Padding auf kleineren Screens reduzieren */
        border-width: 3px; /* Optional: Randbreite auf kleineren Screens reduzieren */
    }
    /* ... (Rest der Media Queries bleibt gleich) ... */
}

@media (max-width: 480px) {
    body {
        padding: 5px; /* Optional: Body-Padding auf sehr kleinen Screens weiter reduzieren */
        border-width: 2px; /* Optional: Randbreite weiter reduzieren */
    }
    /* ... (Rest der Media Queries bleibt gleich) ... */
}
/* style.css - Ergänzungen für Unterseiten */
.content-page {
    padding-top: 30px; /* Etwas Abstand nach oben */
    padding-bottom: 30px; /* Etwas Abstand nach unten */
    background-color: var(--card-bg); /* Optional: Gleicher Hintergrund wie Karten */
    border-radius: 8px; /* Optional: Abgerundete Ecken, passend zu den Karten */
    padding: 30px; /* Innenabstand für den Inhaltsblock */
    margin-top: 20px; /* Abstand zum Header */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); /* Optional: Leichter Schatten */
}

.content-page h2 {
    text-align: left; /* Überschrift linksbündig auf Inhaltsseiten */
    margin-bottom: 1em;
    color: var(--primary-blue); /* Behält die Akzentfarbe */
    border-bottom: 2px solid var(--border-color); /* Dezente Trennlinie */
    padding-bottom: 0.5em;
}

.content-page p {
    margin-bottom: 1.2em; /* Etwas mehr Abstand zwischen Absätzen */
    font-size: 1.05rem; /* Leicht größere Schrift für bessere Lesbarkeit von längeren Texten */
    color: var(--silver-text);
}

.content-page ul, .content-page ol {
    margin-left: 20px;
    margin-bottom: 1.2em;
    color: var(--silver-text);
}
.content-page li {
    margin-bottom: 0.5em;
}

.content-page img.content-image { /* Für Bilder, die Sie später einfügen */
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-top: 15px;
    margin-bottom: 15px;
    display: block; /* Zentriert Bilder, wenn margin auto verwendet wird */
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.back-to-portal {
    margin-top: 40px;
    text-align: center;
}

.back-to-portal a {
    display: inline-block;
    padding: 12px 25px;
    background-color: var(--primary-blue);
    color: var(--light-silver);
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.back-to-portal a:hover {
    background-color: var(--silver-text);
    color: var(--dark-bg);
    transform: translateY(-2px);
}