body {
    font-family: Arial, sans-serif;
    line-height: 1.0;
    margin: 0;
    padding: 0;
    background-color: #eeeeee;
}

header {
    background-color: #a5a5a5;
    color: #eeeeee;
    text-align: center;
    padding: 1em 0;
}

h1 {
    text-align: center; /* Aligns text to the center */
    color: #ffffff;
    }

h2 {
    text-align: center; /* Aligns text to the center */
    color: #555555;
}

h3 {
    text-align: center; /* Aligns text to the center */
    color: #666666;
}


p   {
    line-height:0.9;
    color: #555555;
}

.offset-list {
    margin-left: 35%;
    margin-right: 30%;
}


.section {
    margin-bottom: 20px;
}


ul  {
    line-height:1.9;
    color: #555555;
}


nav ul {
    list-style-type: none;
    margin: 0;
    padding-left: 0;
    color: #eeeeee;
}

nav ul li {
    display: inline;
    margin-right: 20px;
    color: #eeeeee;
}


/* Link color */
nav ul li a {
    color: #eeffee; /* Normal state */
}

/* Hover state */
nav ul li a:hover {
    color: #ddffdd; /* Color when the mouse is over the link */
}

/* Active state */
nav ul li a:active {
    color: #ccffcc; /* Color when the link is being clicked */
}

/* Visited state */
nav ul li a:visited {
    color: #bbffbb; /* Color for visited links */
}


.links a {
    display: inline-block;
    margin: 10px;
    color: #007BFF; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
}

.links .arrow {
    margin-left: 5px;
    color: #000; /* Farbe des Pfeils */
}




main {
    padding: 20px;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 1em 0;
}

.large-image {
    width: 100%; /* or any specific width */
    height: auto; /* maintains aspect ratio */
    display: block; /* to remove any default margin/padding */
}

.circular-image {
    border-radius: 50%; /* This makes the image round */
    width: 150px; /* Set a specific width */
    height: 150px; /* Set a specific height */
    object-fit: cover; /* This ensures the image covers the area without stretching */
}


.cookie-consent-container {
    position: fixed;
    top: 15;
    width: 90%;
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    font-size: 18px;    /* Change this value to the size you want
    display: none; /* Hidden by default */
    border-top: 1px solid #ccc;
}
/* Add more styling as needed */


#acceptCookieConsent {
    background-color: green; /* Background color */
    color: white; /* Text color */
    font-size: 20px;    /* Change this value to the size you want
    /* Add other styling as needed (padding, border, etc.) */
}

#declineCookieConsent {
    background-color: red;
    color: white;
    font-size: 20px;    /* Change this value to the size you want
    /* Add other styling as needed */
}

#acceptCookieConsent:hover,
#declineCookieConsent:hover {
    opacity: 0.6; /* Slight transparency on hover */
    cursor: pointer; /* Changes the cursor to indicate a clickable item */
    }





.image-container {
    position: relative;
    display: inline-block; /* or as needed */
    margin-right: 20px; /* Optional: adds space between images */
}

.name-tooltip {
    visibility: hidden;
    width: 120px; /* Adjust as needed */
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%; /* Position above the image */
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}

.image-container:hover .name-tooltip {
    visibility: visible;
    opacity: 1;
}

.flex-container {
    display: flex;
    flex-direction: row; /* Aligns children in a row */
    justify-content: center; /* Centers items horizontally inside the flex container */
    margin: 0 auto; /* Centers the flex container itself */
    max-width: 80%; /* Or any width you prefer */
}