style.css

/* Reset */
html, body {
    margin: 0;
    padding: 0;
}

/* Header */
header {
    width: 100%;
    text-align: center;
}

header img {
    max-width: 200px;
    height: auto;
}

/* Captions */
.caption {
    text-align: center;
    font-size: 0.9em;
    margin-top: 5px;
}

/* Kleine Caption */
.small-text {
    font-size: 0.7em;  /* nur diese Caption kleiner */
}

/* Bildreihen */
.image-row {
    width: 100%;               /* volle Breite */
    display: flex;
    justify-content: center;   /* horizontal zentrieren */
    gap: 20px;
    margin-top: 20px;
}

/* Box für Bild + Caption */
.image-box {
    text-align: center;        /* Bild + Caption zentrieren */
    margin: 10px;              /* Abstand zu anderen Boxen */
  }

/* Große Bilder (z.B. K2L) */
.image-box.large-image img {
    max-width: 400px;          /* Bild etwas kleiner als Original */
    width: 100%;
    height: auto;
    display: block;            /* für margin auto & Zentrierung */
    margin: 0 auto;
}

/* Kleine Bilder (z.B. Logos) */
.image-box.small-image img {
    max-width: 150px;           /* Logos kleiner */
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Captions für kleine Bilder */
.image-box.small-image .caption {
    font-size: 0.75em; /* kleiner Text */
    margin-top: 5px;
}

/* Captions für große Bilder */
.image-box.large-image .caption {
    font-size: 0.9em;
    margin-top: 5px;
}