body {
    font-family: Arial, sans-serif;
    margin: 20px;
    background-color: black;
    color: white;
}

a:visited {
    color: white;
}

header {
    text-align: center;
    margin-bottom: 20px;
}

footer {
    text-align: center;
    margin-top: 20px;
}

.index-grid {
    display: grid;
    /* 3 Zeilen: Issues (1.), About (2.), Credits (3.) */
    grid-template-rows: auto auto auto;
    /* Spalten: Flexibel, aber mindestens 300px */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    /* Grid-Areas definieren */
    grid-template-areas:
    "issues issues"   /* Issues spannt über beide Spalten (Zeile 1) */
    "about about"     /* About spannt über beide Spalten (Zeile 2) */
    "credits credits"; /* Credits spannt über beide Spalten (Zeile 3) */
    gap: 30px; /* Abstand zwischen den Sections */
    max-width: 1200px; /* Optional: Maximale Breite für große Bildschirme */
    margin: 0 auto; /* Zentrieren */
}

/* Zuweisung der Grid-Areas */
#issues  { grid-area: issues; }
#about   { grid-area: about; }
#credits { grid-area: credits; }

/* About: Absätze in Spalten aufteilen */
#about {
    column-count: auto;
    column-width: 300px; /* Mindestbreite pro Spalte */
    column-gap: 25px; /* Abstand zwischen den Spalten */
    /* column-rule: 1px solid #eee; /* Trennlinie zwischen Spalten */
}

#about h2 {
    margin-top: 0;
}

/* About: Absätze sollen sich anpassen */
#about p {
    max-width: 65ch; /* Optimale Zeilenlänge */
    text-align: left;
    break-inside: avoid;
}

/* Credits: Kompakter */
#credits {
    font-size: 0.9em;
}

#issues {
    font-size: 18px;
}

/* Responsive Anpassung für kleine Bildschirme */
@media (max-width: 800px) {
    .index-grid {
        grid-template-columns: 1fr; /* Nur eine Spalte */
        grid-template-areas:
      "issues"
      "about"
      "credits";
    }

    /* About: Spalten auf 1 reduzieren */
    #about {
        column-count: 1;
    }
}

.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.page-preview {
    width: 100%;
    height: auto;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.2s; /* widen if hovered */
}

.page-preview:hover {
    transform: scale(1.1); /* widen if hovered */
}

/* Lightbox-styles */
.lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Navigation-Buttons */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(0, 0, 0, 0.8);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    color: white;
    font-size: 30px;
    background: none;
    border: none;
    cursor: pointer;
}