/* Erster Contentblock */
.content {
    padding-top: 5%;
    position: relative;
    overflow: hidden;
}

.content img {
    width: 45%; /* Make images responsive */
    height: auto;
    float: right;
}

.content h1 {
    display: inline-block;
    font-size: 2em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    width: 100%; /* Make it full width */
    max-width: 100%; /* Ensure it doesn't overflow */
    overflow: hidden;
    text-align: center;
}

.content p {
    display: block;
    font-family: 'Courier New', Courier, monospace;
    color: #ffffff;
}
.slogan{
    font-size: x-large; 
    color:#42b8fd; 
    text-align: center;
}
@media only screen and (min-width:1024px){
    .content h1 {
        font-size: 4em;
    }
    .sloagn{
        font-size: xxx-large;
    }
}
/* Kontaktbutton */
.buttoncontainer {
    display: block; /* Change to block for responsiveness */
    text-align: center;
    width: 100%;
    height: 6rem; /* Responsive height */
    position: relative;
    overflow: hidden;
}

.buttonocopacity {
    position: absolute;
    background: linear-gradient(90deg, #12111f, #5ce1e6, #12111f);
    width: 100%;
    height: 100%;
    opacity: 15%;
}

.buttoncontent {
    position: absolute;
    width: 100%;
    height: 100%;
}

.contactbutton {
    border-style: none;
    text-align: center;
    cursor: pointer;
    font-size: 2em;
    font-family: 'Courier New', Courier, monospace;
    background: none;
    width: 100%;
    color: #ffffff;
    z-index: 1;
}

.socialmediabutton{
    width: 32px; 
    height:4rem;
    border-style: none;
    align-items: center;
    cursor: pointer;
    background: none;
    z-index: 1;
}
.socialmediabutton img{
    width: 32px; 
    height:32px; 
}
@media only screen and (min-width: 470px){
    .buttoncontainer{
        height: 9rem;
    }
    .contactbutton{
        font-size: 4em;
    }
    .socialmediabutton{
        width: 64px;
    }
    .socialmediabutton img{ 
        width: 64px;
        height: 64px;
    } 
}

/* Zweiter Contentblock */
#floatleft {
    float: left; /* Remove float on smaller screens */
    padding-right: 1%;
    padding-bottom: 0.5%;
    padding-top: 1%;
}

.content h2 {
    padding-top: 2%;
    font-size: 1.5em;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-transform: uppercase;
    text-align: center;
    width: 100%;
}
@media only screen and (min-width:1024px){
    .content h2 {
        font-size: 3em;
    }
}