/* Grund-Einstellungen */
body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #fff;
    color: #333;
    text-align: center;
}

header {
    display: flex;
    flex-direction: column; /* Stapelt Logo und Text untereinander */
    align-items: center;    /* Zentriert beides horizontal */
    margin-top: 20px;       /* Abstand zum oberen Browserrand */
}

.logo-link {
    text-decoration: none; /* Entfernt eventuelle Unterstreichungen */
    display: inline-block; /* Sorgt dafür, dass der Link genau so groß ist wie das Bild */
}

.top-logo {
    width: 150px;           /* Breite deines Logos (anpassen nach Bedarf) */
    height: auto;           /* Proportional skalieren */
    margin-bottom: 10px;    /* Kleiner Abstand zwischen Logo und "Great Again" */
}

header h1 {
    margin-top: 0;          /* Verhindert doppelten Abstand oben */
    margin-bottom: 20px;    /* Abstand zum Bild darunter */
    font-size: 3rem;
    text-transform: uppercase;
}

header h2 {
    margin-top: 0px;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
}

/* Bild-Bereich */
.main-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* Text-Bereich */
.text-section {
    margin: 30px 0;
    font-size: 1.1rem;
    color: #000000;
}

.info-table {
    width: 50%;           /* Tabelle nimmt 80% der Breite ein */
    margin: 20px auto;    /* Zentriert die Tabelle mit Abstand oben/unten */
    border-collapse: collapse; /* Verhindert doppelte Linien */
}

.info-table td {
    border: 0px solid #ddd; /* Graue Trennlinien */
    padding: 12px;          /* Innenabstand der Zellen */
    text-align: left;       /* Text linksbündig in der Tabelle */
}

/* Jede zweite Zeile bekommt einen leichten Grauton (Zebramuster) 
.info-table tr:nth-child(even) {
    background-color: #b01a7a;
}*/

/* 3x3 Raster für Links */
.link-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Spalten */
    gap: 15px; /* Abstand zwischen den Elementen */
    margin-top: 40px;
}

.grid-item {
    /* background: #794699; */
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 0px;
    transition: transform 0.2s;
}

.grid-item:hover {
    background-color: #ed099b;
}

.grid-item a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
}

/* Responsive Anpassung für Handys */
@media (max-width: 600px) {
    .link-grid {
        grid-template-columns: 1fr; /* Nur 1 Spalte auf kleinen Bildschirmen */
    }
}