/* ===================== ALLGEMEINE LAYOUT-STRUKTUR ===================== */
.gridSystem {
    display: grid;
    grid-template-areas:
        "headerPart"
        "middlePart"
        "footerPart";               /* Definiert drei vertikale Bereiche */
    grid-template-columns: 1fr;     /* Eine Spalte, nimmt 100% Breite ein */
    grid-template-rows: auto 1fr auto;  /* Header & Footer passen sich an, mittlerer Teil füllt Rest */
    
    min-height: 100vh;              /* Fallback: 100% der Höhe des Viewports */
    min-height: 100svh;             /* Safari-spezifisches Verhalten für sicheren Viewport */
    min-height: 100dvh;             /* Dynamische Höhe für moderne Browser */
    
    background-color: #f5f5dc;    /* Hellbeiger Hintergrund für den gesamten Seitenbereich */
}

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: #f5f5dc;
}

body {
    font-family: system-ui, serif, "Times New Roman", Times, ; /* Moderne Standardschrift, mit klassischer Fallback-Schrift */
    background-color: #f5f5dc;
}

/* ===================== KOPFZEILE UND NAVIGATION ===================== */

.headerPart {
    grid-area: headerPart;
    background: lightblue;          /* Leichte Farbe zur Unterscheidung vom Rest */
}

.nav-container {
    display: flex;
    align-items: center;
    /* Vertikale Zentrierung von Logo + Titel */
    text-decoration: none;
    gap: 20px;
    /* Abstand zwischen Logo und Text */
    pointer-events: none;
    /* ACHTUNG: macht Navigation nicht klickbar! */
}

.nav-title {
    font-size: 1.5rem;
    margin-left: 20px;
    /* Dynamischer Abstand zum Logo */
    font-family: serif, "Times New Roman", Times, ;
}

.navIconClass {
    width: 140px;
    height: auto;
}

.nav-item .active {
    font-weight: bold;
    color: black;
    text-decoration: underline;
}

.navbar-nav .nav-link {
    font-size: 1.4rem;
    margin-left: 20px;
   
    /* Dynamischer Abstand zwischen Links */
}

/* ===================== INHALTSBEREICH ===================== */

.middlePart {
    grid-area: middlePart;
    background-color: #f5f5dc;      /* Wiederholung der Hintergrundfarbe */
}

figure {
    display: flex;
    justify-content: left;        /* Horizontale Zentrierung */
    align-items: flex-start;        /* Bild & Text oben ausrichten */
    margin: clamp(5px, 3vw, 24px);  /* Dynamischer Außenabstand */
}

figcaption {
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    color: #916b0a;                 /* Warmer Braunton für den Text */
    font-size: 1.41rem;
}

figure img:first-of-type {
    width: 350px; /* Dynamische Breite des Hauptbildes */
     /* min-width: 300px;                Bild wird nicht kleiner als 300px */
    height: auto;
}

    .pictureWithText1 figcaption img:last-of-type,
    .pictureWithText2 figcaption img:last-of-type,
    .pictureWithText3 figcaption img:last-of-type,
    .pictureWithText4 figcaption img:last-of-type {
        width: clamp(400px, 80%, 600px);
        align-self: flex-start;
    }

/* ===================== SPEZIALANORDNUNG BOX 1 & 3 ===================== */
.pictureWithText1 img:first-of-type,
.pictureWithText2 img:first-of-type,
.pictureWithText3 img:first-of-type,
.pictureWithText4 img:first-of-type
 {
    margin-right: 20vw; /* Abstand zum Textblock rechts */
}

/* ===================== UNTERSCHRIFT & DEKORATION ===================== */

.Butterfly_Information_Picture {
    text-align: right;
    font-size: 1.1rem;
    margin-top: 0.5rem;   
  
}

.whiteSpace {
    width: 100vw;
    height: 25px;
    background-color: white;        /* Weißer Puffer zwischen Elementen */
}

/* ===================== FUSSZEILE ===================== */
.footerPart {
    grid-area: footerPart;
    background-color: #CFF4FC;
    padding: 20px;
    text-align: center;
}

.fontSizeImpressumUndDatenschutz {
    font-size: 1.4rem;
}

.footerTextNote {
    font-size: 1.3rem;
}




/* ===================== MEDIA QUERY: BIS 992px (Smartphones/Tablets) ===================== */
@media (min-width: 0px) and (max-width: 991.98px) {

     .navIconClass {
        width: 120px;
        height: auto;
    }

     .nav-title {
        font-size: 1.5rem;
    }

       .navbar-nav .nav-link {
        font-size: 1.5rem;
        text-align: center
    }

    figure {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 10px;
        justify-content: center;
    }

  figcaption {
        display: flex;
        margin-top: 1rem;
        /* Abstand zwischen Bild und Text */
        text-align: left;
        /* Zentriert mehrzeiligen Text im Kasten */
        font-size: 1.41rem;
        color: #916b0a;
        justify-content: center;
        margin-left: 0px;
        width: clamp(350px, 85%, 540px);
        /* min: 300px, ideal: 90% der Elternbreite, max: 700px   */
        font-size: 1.1rem;
    }

    /* 
    figcaption p {
        width: clamp(330px, 60%, 700px);  /* Responsive Breite für Text 
        text-align: left;
       margin-left: 0px;
        line-height: 1.6;
        color: #a96f00;
    }
    */
    
    /* 
    figure img:first-of-type {
        width: clamp(350px, 23%, 500px);
        min-width: 300px;            
        max-width: 100%;
        height: auto;
        object-fit: scale-down;
    }
    */

     figure img:first-of-type {
 
        width: clamp(250px, 20%, 25%);
        /* Min. 200px, Ideal 40%, Max. 400px */
        height: auto;
        /* Behält das Seitenverhältnis des Bildes bei */
        object-fit: scale-down;
        margin-left: 50px;
    }

    .pictureWithText2 figure,
    .pictureWithText4 figure {
        flex-direction: column;
    }

    .pictureWithText1 figcaption img:last-of-type,
    .pictureWithText2 figcaption img:last-of-type,
    .pictureWithText3 figcaption img:last-of-type,
    .pictureWithText4 figcaption img:last-of-type {
        width: clamp(300px, 60%, 500px);
        align-self: center;
    }

    .Butterfly_Information_Picture {
        font-size: 1.0rem;
    }

    .whiteSpace {
        width: 100vw;
        height: 20px;
        background-color: white;
    }

    .fontSizeImpressumUndDatenschutz {
        font-size: 1.2rem;
    }

    .footerTextNote {
        font-size: 1.1rem;
    }


}