/* Body */
* {padding:0px;margin:0px;}
body {display: flex;flex-direction: column;min-height: 100vh;margin: 0;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;}
.abstand-body {flex: 0 0 10px}
.content {flex: 1;}
.m_logo {flex: 0 1 45%;}

/* Menü */
.m_menue {flex: 0 1 55%;text-align:right;display: flex;align-items: center;justify-content: flex-end;}
.menu {list-style-type: none; padding: 0;margin: 0;display: flex;flex-direction: row;justify-content: flex-end;align-items: center;overflow: hidden;z-index: 1000;}
.menu li {margin: 0 2px;font-size:0.9em;}
.menu a {text-decoration: none;color: white;padding: 5px 9px;border-radius: 50px;transition: background-color 0.3s, color 0.3s;display: block;text-align: center;}
.menu a:hover {color: #638698;background-color: rgba(0, 0, 0, 0.5);}
.menu-toggle {display: none;cursor: pointer;position: relative;right: 10px;top: 0;transform: none;width: 30px;height: 30px;}
.menu-toggle div {width: 25px;height: 3px;background-color: white;margin: 4px 0;transition: 0.4s;}
.menu-toggle.open div:nth-child(1) {transform: rotate(45deg) translate(5px, 5px);}
.menu-toggle.open div:nth-child(2) {opacity: 0;}
.menu-toggle.open div:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}

/* Anpassung bei Browsergröße */
@media (max-width: 768px)
{
.abstand-body {flex: 0 0 8px;}
.m_logo {flex: 0 1 70%;}
.m_menue {flex: 0 1 30%;text-align:right;display: flex;align-items: center;justify-content: flex-end;}
.menu {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 70px; /* Anpassung der Position um 10 Pixel nach oben */
    left: 0;
    width: 100%;
    background-color: #004652;
}
.menu-toggle {display: block;}
}
@media (min-width: 1080px)
{
.menu li {margin: 0 5px;font-size:1.1em;}
}


::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 105, 123, 0.5); /* 50% transparent */
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 70, 82, 0.5); /* 50% transparent */
}

/* Überschrift - Unterseiten */
.custom-heading		{display: flex;align-items: center;font-family: Arial, sans-serif;font-size: 1em;justify-content: center;}
.slash			{color: #002f37;font-weight: bold;margin: 0 0.01em;opacity: 0;}
.slash.big		{font-size: 2.6em;}
.slash.small		{font-size: 1.7em;}
.slash.tiny		{font-size: 1.3em;}
.heading-text		{color: #007c93;font-size: 1.1em;margin: 0 0.8em;opacity: 0;animation: fadeIn 1s ease forwards;animation-delay: 1.1s;}
.from-right		{animation: slideInRight 0.5s ease forwards;animation-delay: 0s;}
.from-left.first	{animation: slideInLeft 0.5s ease forwards;animation-delay: 0.25s;}
.from-left.second	{animation: slideInLeft 0.5s ease forwards;animation-delay: 0.5s;}
.from-left-reverse	{animation: slideInFromRight 1s cubic-bezier(0.85, 0, 0.2, 1) forwards;animation-delay: 0s;}
.from-right-reverse.first {animation: slideInFromHalfLeft 0.7s cubic-bezier(0.85, 0, 0.2, 1) forwards;animation-delay: 0.25s;}
.from-right-reverse.second {animation: slideInRight 0.5s ease forwards;animation-delay: 0.5s;}
.line.colored		{background: #007c93;width: 10px;height: 2em;opacity: 0;}
.from-far-left		{animation: flyLeftToRight 2s linear forwards;}
.from-far-right		{animation: flyRightToLeft 2s linear forwards;}
@keyframes slideInRight {from { transform: translateX(40px); opacity: 0; } to { transform: translateX(0); opacity: 1; }}
@keyframes slideInLeft	{from { transform: translateX(-40px); opacity: 0; } to { transform: translateX(0); opacity: 1; }}
@keyframes slideInFromHalfLeft {from { transform: translateX(-50vw); opacity: 0; } to { transform: translateX(0); opacity: 1; }}
@keyframes fadeIn	{from { opacity: 0; } to { opacity: 1; }}
@keyframes slideInFromRight {from { transform: translateX(25vw); opacity: 0;} to { transform: translateX(0); opacity: 1; }}
@keyframes flyLeftToRight {0% { transform: translateX(-100vw); opacity: 1;} 100% { transform: translateX(100vw); opacity: 0; }}
@keyframes flyRightToLeft {0% { transform: translateX(100vw); opacity: 1; } 100% { transform: translateX(-100vw); opacity: 0; }}
.custom-heading-wrapper {overflow-x: hidden;width: 100%;}