body {
    background-color: #FFFFFF;
    margin-top: 0px;
    margin-left: 18%;
    margin-right: 18%;
    margin-bottom: 0px;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: #333333;
}
.logo {
    width: 250px;
    margin-top: 60px;
    margin-left: 0px;
    margin-right: 0px;
    margin-bottom: 10px;
}
.line {
    width: 100%;
    height: 1px;
    background-color: #BBBBBB;
}
.readMore {
  display: inline;
}
.readMore summary {
  display: inline-block;
  color: #AAAAAA;
  cursor: pointer;
  font-weight: 100;
  font-style: italic;
  margin-left: 5px;
}
.readMore[open] summary {
  display: none;
}
.part1 {
    width: 100%;
    margin-top: 60px;
}
.header1 {
    font-size: 20px;
    font-weight: 700;
    text-align: center;
}
.header2 {
    font-size: 16px;
    font-weight: 700;
}
.text1 {
    font-size: 16px;
    font-weight: 100;
    text-align: justify;
    display: inline;
}
.text2 {
    font-size: 16px;
    font-weight: 100;
    text-align: center;
}
.pic1 {
    height: auto;
    width: 100%;
    margin: 0px;
    border-radius: 5px;
}
.pic2 {
    height: 150px;
    margin-top: 20px;
    margin-right: 0px;
}
.button1 {
    background-color: #333333;
    color: #FFFFFF;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration: none;
    border-radius: 50px;
    margin-left: auto;
    margin-right: auto;
}



.buttonBox {
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
}
.splitText {
    margin-top: 20px;
}
td {
    width: 45%;
    vertical-align: top;
}
.spaceColumn {
    width: 10%;
}
.dividedTextImage {
    display: flex;
    width: 100%;
    margin-top: -15px;
}
.devidedTexts {
    font-weight: 100;
    font-size: 16px;
    width: 100%;
}
.devidedImages {
    display: block;
    margin-right: 0px;
    margin-left: 50px;
    width: 25%;
}
.openCallLink {
    text-decoration: none;
    font-style: italic;
    color: #777777;
}
.endSpace {
    height: 300px;
}





footer {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: right;
}
.footerLink {
    text-decoration: none;
    color: #777777;
    margin: 10px;
    font-weight: 100;
}
.footerLink:hover {
    cursor: pointer;
    text-decoration: underline;
}





@media (max-width: 768px) {
    /* 1. Remove huge side margins & adjust vertical spacing */
    body {
        margin-left: 20px !important;
        margin-right: 20px !important;
        margin-top: 0px !important;
        margin-bottom: 0px !important;
    }

    /* 2. Scale down the logo appropriately */
    .logo {
        width: 180px !important;
        margin-top: 30px !important;
    }

    /* 3. Bring text structure to readable full-width blocks */
    .part1 {
        margin-top: 60px !important;
    }

    .text1, .devidedTexts {
        text-align: left !important; /* Justified text can create ugly spacing on tiny phone screens */
    }

    /* 4. Convert the side-by-side Table ("Für Kunstbegeisterte" / "Für Künstler") into stacked blocks */
    .splitText, .splitText tbody, .splitText tr, .splitText td {
        display: block !important;
        width: 100% !important;
    }
    
    .spaceColumn {
        display: none !important; /* Remove the horizontal spacer column completely */
    }

    .splitText td:last-child {
        margin-top: 30px !important; /* Creates a clean gap between the two stacked target groups */
    }

    /* 5. Fix the main landscape photo ("galerie.heic") aspect ratio */
    .pic1 {
        height: auto !important; /* Prevents the image from squishing vertically */
        max-height: 250px !important;
        object-fit: cover !important;
    }

    /* 6. Convert the History section ("Die Geschichte des Hauses") from side-by-side to stacked */
    .dividedTextImage {
        display: block !important; /* Changes flexbox to stacked block */
    }

    .devidedImages {
        display: flex !important; /* Make the two historic pictures sit side-by-side beneath the text */
        flex-direction: row !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-left: 0px !important;
        margin-top: 20px !important;
    }

    .pic2 {
        width: 48% !important; /* Force them to split the width perfectly */
        height: auto !important;
        margin-top: 0px !important;
    }

    /* 7. Shrink the massive blank footer space so users don't have to scroll infinitely at the end */
    .endSpace {
        height: 80px !important;
    }

    /* 8. Align the legal links nicely at the bottom */
    footer {
        text-align: center !important;
        margin-bottom: 30px !important;
    }
}