/* ==========================================================================
   Grundeinstellungen
   ========================================================================== */

/*
 * Entfernt die Standardabstände aller Elemente und verwendet überall
 * das einheitliche Box-Modell „border-box“.
 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* ==========================================================================
   Allgemeine Seiteneinstellungen
   ========================================================================== */

/* Grundlegende Darstellung der gesamten Seite */
body {
    min-height: 100vh;
    background-color: #ffffff;
    color: #1f1f1f;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}


/* ==========================================================================
   Oberer Seitenbereich
   ========================================================================== */

/* Dunkler Balken am oberen Rand der Seite */
.topbar {
    height: 50px;
    background-color: #1f1f1f;
}


/* ==========================================================================
   Hauptinhalt
   ========================================================================== */

/* Begrenzt die Inhaltsbreite und zentriert den Hauptinhalt */
.page {
    max-width: 1200px;
    margin-right: auto;
    margin-left: auto;
}


/* ==========================================================================
   Hero-Bereich
   ========================================================================== */

/* Abstand zwischen dem oberen Balken und dem Hero-Bild */
.hero {
    margin-top: 40px;
}

/* Darstellung des Hero-Bildes */
.hero img {
    display: block;
    width: 100%;
    height: auto;
}


/* ==========================================================================
   Highlights
   ========================================================================== */

/*
 * Bereich für ausgewählte Inhalte unterhalb des Hero-Bildes.
 * Die untere Linie schließt den Bereich optisch ab.
 */
.highlights {
    margin-top: 60px;
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid #d9d9d9;
}

/*
 * Zweispaltiger Aufbau eines Highlight-Artikels:
 * links das Bild, rechts Überschrift und Text.
 */
.highlights article {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: start;
    column-gap: 40px;
}

/* Darstellung der Bilder innerhalb der Highlight-Artikel */
.highlights article img {
    display: block;
    width: 100%;
    height: auto;
}

/* Textbereich innerhalb eines Highlight-Artikels */
.highlights article > div {
    min-width: 0;
}

/*
 * Eigene Zeilenhöhe für die Überschrift.
 * Dadurch beginnt sie optisch näher an der Oberkante des Bildes.
 */
.highlights article h2 {
    margin: 0 0 24px;
    font-size: 30px;
    line-height: 1;
}

/* Abstand zwischen aufeinanderfolgenden Textabsätzen */
.highlights article p + p {
    margin-top: 18px;
}