/* Layout-Bausteine: Inhaltsbreite, Hauptbereich, Abschnitte. */
.inhaltsbreite {
    width: 100%;
    max-width: var(--inhalt-breite);
    margin-inline: auto;
    padding-inline: var(--abstand-mittel);
}

.inhalt {
    flex: 1 0 auto;
    padding-block: var(--abstand-gross);
}

.abschnitt {
    margin-bottom: var(--abstand-gross);
}

.abschnitt__titel {
    margin-bottom: var(--abstand-mittel);
    padding-bottom: var(--abstand-klein);
    border-bottom: 2px solid var(--farbe-rahmen);
}

/* Zweispaltiges Raster, das auf schmalen Bildschirmen umbricht. */
.raster-zwei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--abstand-gross);
}

.raster-drei {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--abstand-mittel);
}