/*
Dark: #172026
Blue: #5fcdd9
Main: #027373
Darkgreen: #04BFAD
Smartgreen: #04bf9d

Neue Farbe: #18fca0

Neues Grün: #93fdc2 ersetzt #18fca0
*/


/* SASS-Variablen */
.accordion-button:not(.collapsed) { background-color: #18fca0; color: #666 }
.accordion-button:focus {
    box-shadow: 0px 0px 10px 0px rgba(61,116,23,1);
}
.accordion-button:not(.collapsed)::after, .accordion-button::after { color: #fff }

/* added.css */
body, html {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #666;
}
main {
	/* color: #51596C; */
}
h1 {
	font-size: 2rem;
}
h2 {
	font-size: 2.25rem;
}
h3 {
	font-size: 2rem;
}
h4 {
	font-size: 1.75rem;
}
h5 {
	font-size: 1.5rem;
}
h6 {
	font-size: 1.5rem;
}
.lead {
	font-size: 1.5rem;
	text-align: justify;
}
p, ul { font-size: 1.1rem; }
@media (max-width: 768px) {
	h1 {
		font-size: 1.25rem;
	}
	h2 {
		font-size: 2rem;
	}
	h3 {
		font-size: 1.7rem;
	}
	h4 {
		font-size: 1.5rem;
	}
	h5 {
		font-size: 1.3rem;
	}
	h6 {
		font-size: 1.1rem;
	}
	.lead {
		font-size: 1.1rem;
	}
}

.logotext {
	font-family: Garamond,serif;
	font-weight: 700;
	font-size: 150%;
	line-height: 80%;
}
.heart-big {
	width: 70px; height: 70px;
}
.heart-small {
	width: 36px; height: 36px;
}

@media (max-width: 768px) {
	.heart-big { width: 40px; height: 40px;	}
	.heart-small { width: 30px; height: 30px;	}
}
a.navbar-brand, a.navbar-brand:visited, a.navbar-brand:hover, a.navbar-brand:active {
	color: #666;
}
a.link-secondary-active, a.link-secondary-active:visited, a.link-secondary-active:hover, a.link-secondary-active:active {
    color: #666 !important;
	font-weight: 500;
}

.navbar .navbar-nav .nav-link {
    padding: 1rem 1.75rem;
}
.hero {
	height: 75vh;
	color: #027373;
    background-image: url(../pics/zweibruecken.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
	background-size: cover;
}
.svg-icon>svg {
    width: 3rem;
    height: 3rem;
}
img, svg {
    vertical-align: middle;
}
.navbar {
	background-color: #18fca0;
}
footer {
	background-color: #172026;
}
.text-main-color {
	color: #04BFAD;
	text-decoration: none;
}
a.text-grey, a.text-grey:hover, a.text-grey:visited, a.text-grey:active { color: #666; }
.btn-outline-main-color {
	--bs-btn-font-weight: 600;
	--bs-btn-color: #18fca0;
	--bs-btn-bg: #fff;
	--bs-btn-border-color: #18fca0;
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: #18fca0;
	--bs-btn-hover-border-color: #18fca0;
	--bs-btn-focus-shadow-rgb: #18fca0;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: #fff;
}
.btn-main-color {
	--bs-btn-font-weight: 600;
	--bs-btn-color: #fff;
	--bs-btn-bg: #027373;
	--bs-btn-border-color: #18fca0;
	--bs-btn-hover-color: #666;
	--bs-btn-hover-bg: #18fca0;
	--bs-btn-hover-border-color: #18fca0;
	--bs-btn-focus-shadow-rgb: #18fca0;
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #fff;
	--bs-btn-active-border-color: #fff;
}
.waves {
    position: relative;
    width: 100%;
    height: 16vh;
    margin-bottom: -7px;
    min-height: 100px;
    max-height: 150px
}
.waves.waves-sm {
    height: 50px;
    min-height: 50px
}
.waves.no-animation .moving-waves>use {
    animation: none
}
.wave-rotate {
    transform: rotate(180deg)
}
.moving-waves>use {
    animation: f 40s cubic-bezier(.55,.5,.45,.5) infinite
}
.moving-waves>use:first-child {
    animation-delay: -2s;
    animation-duration: 11s
}
.moving-waves>use:nth-child(2) {
    animation-delay: -4s;
    animation-duration: 13s
}
.moving-waves>use:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 15s
}
.moving-waves>use:nth-child(4) {
    animation-delay: -4s;
    animation-duration: 20s
}
.moving-waves>use:nth-child(5) {
    animation-delay: -4s;
    animation-duration: 25s
}
.moving-waves>use:nth-child(6) {
    animation-delay: -3s;
    animation-duration: 30s
}
@keyframes f {
    0% {
        transform: translate3d(-90px,0,0)
    }

    to {
        transform: translate3d(85px,0,0)
    }
}
@media (max-width: 768px) {
    .waves {
        height:40px;
        min-height: 40px
    }
}

.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.mb-n7 {
    margin-bottom: -10rem !important;
}

.block1, .block2, .block3, .block4 {
	opacity: 0%;
	transition: opacity 3s;
}
.showme {
	opacity: 100%;
}
