.intro {
    margin-left: 5px;
    margin-right: 5px;
    padding: 5px;
    border: 1px solid #fff;
}

/* ============================================================
   RESPONSIVE DESIGN (MOBILGERÄTE BIS 600px)
   ============================================================ */

@media (max-width: 600px) {

    /* 1. SCHRIFTGRÖSSEN (TYPOGRAPHY) */
    body, p, li {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    h1 {
        font-size: 24px !important;
        margin-bottom: 15px !important;
        line-height: 1.2 !important;
    }

    h2 {
        font-size: 20px !important;
        margin-bottom: 12px !important;
    }

    h3 {
        font-size: 18px !important;
    }

    /* 2. BILD-ANPASSUNG (DEINE KLASSE) */
    .img-left-flow {
        float: none !important;
        width: 100% !important;
        margin: 5px !important;
        display: block !important;
    }

    /* 3. GLOBALE ABSTÄNDE (PADDINGS & MARGINS) 
       Reduziert die "Luft" an den Seiten für mehr Platz auf dem Display */
    .container, .section, .module, article, main, .item-page, .ck-section, .ck-column {
        padding-left: 10px !important;
        padding-right: 10px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Abstände zwischen Absätzen und Überschriften vereinheitlichen */
    p, h1, h2, h3 {
        margin-top: 10px !important;
        margin-bottom: 10px !important;
    }

    /* Verhindert horizontales Scrollen durch zu breite Elemente */
    * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/* ============================================================
   DESKTOP KLASSEN (AB 601px)
   ============================================================ */

.img-left-flow {
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
    margin-top: 10px;
    width: 30%;  
    max-width: 100%; 
    height: auto;
}