@charset "utf-8";
/* CSS Document */
:root{
    --grau: #959faa;
	--blau: #0d2a8f;	
	--textschwarz: rgba(0,0,0,0.8);
}

@font-face {
    font-family: 'Good Times';
    src: url('fonts/GoodTimes-Regular.eot');
    src: url('fonts/GoodTimes-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/GoodTimes-Regular.woff2') format('woff2'),
        url('fonts/GoodTimes-Regular.woff') format('woff'),
        url('fonts/GoodTimes-Regular.ttf') format('truetype'),
        url('fonts/GoodTimes-Regular.svg#GoodTimes-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('fonts/Montserrat-Regular.eot');
    src: url('fonts/Montserrat-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Montserrat-Regular.woff2') format('woff2'),
        url('fonts/Montserrat-Regular.woff') format('woff'),
        url('fonts/Montserrat-Regular.ttf') format('truetype'),
        url('fonts/Montserrat-Regular.svg#Montserrat-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
	

html {
            scroll-behavior: smooth;
        }
body{
	color: var(--textschwarz);
	font-family: "Montserrat", Helvetica, Arial, "sans-serif";
	
}
.bg-blue{
	background-color:#0d2a8f;	
	color:#fff;
}
.bg-blue .nav-link{
	color:#fff;
	padding: 10px;
}
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Anwenden der Animation auf ein Element */
.fade-in-element {
    opacity: 0; /* Startwert der Opazität */
    animation: fadeIn 2s ease-in forwards; /* Animation, Dauer, Timing-Funktion, Ausführung */
}

/* 2. Variante*/
.fade-in-transition {
    opacity: 0;
    transition: opacity 3s ease-in; /* Definiert die Übergangsdauer und -art */
}

.fade-in-transition.visible {
    opacity: 1; /* Die Zielopazität, wenn die Klasse 'visible' hinzugefügt wird */
}
/*-------*/

/* 3. Variante: Grundlegendes Styling und Transition */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(20px); /* optional: für einen leichteren "Fade-Up"-Effekt */
    transition: opacity 1s ease-in, transform 1s ease-in;
}

/* Zielzustand, wenn Element sichtbar */
.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}
section .row{
	display: flex;
	align-items: center;
}
h1, h2{
	font-family: "Montserrat";
	color:var(--blau);
}
h1{
	font-size:2.2rem;
	font-weight: bold;
	text-transform: uppercase;
	color:var(--textschwarz);
}
h3{
	font-size: 1.4rem;
	margin-bottom:0;
	color:var(--blau);
}
ul{
	list-style:disc;
	margin-left: 1rem;
}
ul li{
	line-height: 160%;
    margin-bottom: 0.56rem;
}
img{
	width: 100%;
	height: auto;
}
#start img.header{
	width: 800px;
	margin:0 auto;
}
.col-lg-4 img{
	box-shadow: 5px 5px 5px #ccc;
}
.navbar-brand img{
	width: 184px;
	height: auto;
}
.nav-link{
	display: flex;
  align-items: center; 
	font-size: 1.5rem;
}
.nav-link.tel:before{
	content: url("images/Button_Telefon.png");
	padding-right: 0.5rem;
}
.nav-link.mail:before{
	content: url("images/Button_Mail.png");
	padding-right: 0.5rem;
}
.nav-link.instagram:before{
	content: url("images/instagram.png");
	padding-right: 0.5rem;
}

section#start{
	margin-top: 185px;
}
footer #navbarFooterNav{
	display: flex;
}
footer .navbar-nav{
	flex-direction: row;
}

@media (min-width: 992px) {
  footer .navbar-expand-lg {
   
    justify-content: center;
  }
	
}
@media (max-width: 991px) {
  .navbar-brand-container {   
   display: flex;
  }
	ul.d-lg-none{
		list-style: none;
	}
	.navbar-brand img {
  width: 160px;
  height: auto;
}
}
@media (max-width: 767px) {
	.navbar-brand img {
    width: 130px;
    height: auto;
  }
	.nav-link {
  display: flex;
  align-items: center;
  font-size: 1.0rem;
}
	.nav-link.tel:before{
	content:  url( "images/Button_Telefon_35.png");
	padding-right: 0.5rem;
}
.nav-link.mail:before{
	content: url("images/Button_Mail_35.png");
	padding-right: 0.5rem;
}
.nav-link.instagram:before{
	content: url("images/instagram_35.png");
	padding-right: 0.5rem;
}
	h1{
		font-size: 1.4rem;
	}
	ul{
		padding-left: 1rem;
	}
	 ul.d-lg-none {
    list-style:none;
    margin-left: 0;
    padding-left: 0;
	margin-bottom:0;
  }
	section#start {
  margin-top: 125px;
}
}