/* ===============================
    Informationsblöcke
    Aufbau:
    
    | grüne Säule | Text | grüne Säule |

   =============================== */
.info-section {

    /* Säulen und Text nebeneinander */
    display: flex;


    /* Seitenabstand links/rechts */
    width: calc(100% - 200px);


    /* maximale Breite auf großen Bildschirmen */
    max-width: 1400px;


    /* verhindert Probleme mit Breitenberechnung */
    box-sizing: border-box;


    /* Abstand zwischen mehreren Info-Blöcken */
    margin: 40px auto;


    /* Mindesthöhe eines Blocks */
    min-height: 250px;


    /* Elemente passen sich an gleiche Höhe an */
    align-items: stretch;


    /* Abstand zwischen Säulen und Text */
    gap: 40px;
}


/* ===============================
    Grüne Seitensäulen
    Dekorative Begrenzungen der Textblöcke
   =============================== */

.green-column {

    /* Breite der grünen Säule */
    width: 25px;


    /* Praxis-Farbe */
    background-color: var(--primary-color);


    /* runde Enden oben und unten */
    border-radius: 20px;
}


/* ===============================
    Inhalt innerhalb der Info-Blöcke
   =============================== */

.info-content {

    /* nimmt restliche verfügbare Breite ein */
    flex: 1;


    /* Innenabstand zum Text */
    padding: 40px 60px;


    /* normale Lesbarkeit */
    text-align: left;
}


/* Überschrift der Info-Blöcke */

.info-content h2 {

    /* Praxis-Grün */
    color: var(--primary-color);


    /* Größe der Überschrift */
    font-size: 32px;
}



/* Fließtext der Info-Blöcke */

.info-content p {

    /* angenehme Lesbarkeit */
    font-size: 18px;


    /* Zeilenabstand */
    line-height: 1.6;
}



/* ===============================
    Container für mehrere Info-Blöcke

    Beispiel:

    Block 1

    Block 2

    Block 3

   =============================== */

.info-container {

    width: 100%;


    /* untereinander statt nebeneinander */
    display: flex;


    flex-direction: column;


    /* Abstand zwischen einzelnen Blöcken */
    gap: 50px;


    box-sizing: border-box;
}