/* ---  Farbschema
#7887AB 5798F9
#4F628E 297EFC
#2E4272 0D6EFD
#162955 015ADE
#061539 01409D
*/
/*
schönes Gelb: #fed136
*/
/* überschreiben der Bootstrap-Variablen und Import */
$blue:#7887AB;
$yellow:#fed136;
$font-size-base: 0.75rem;
$card-border-color: #061539;
$card-cap-bg: #4F628E;
$card-cap-color: #fff;

$an-header-heigth: 150px;
$an-site-width: 100%;
$padding-section: 40px;

@import "../lib/bootstrap-5.2.3/scss/bootstrap.scss"; 

.navbar-dark .navbar-brand {
    padding-top: 0.08rem;
    /* color: $primary; */
}
  
.nav {
    width: $an-site-width;
}
  
.nav-link {
    font-size: 1.0rem;
    color: #000000;
}
  
.navigation {
    list-style-type: none;
}
  
.navigation-item {
    float: left;
    padding-left: 10px;
    padding-right: 10px;
}
  
body {
    color: #000000;  
    // background-color: #4F628E;
    // background: linear-gradient(to bottom right, #7887AB, #162955);
    background-repeat: no-repeat; 
    height: 100vh;
}
  
.container {
    position: relative;
    /* mit margin: auto zentrieren wir ein Block Element horizontal */
    margin: auto;   
    width: $an-site-width;
}

.home-header {
    background-color: transparent;
    /* padding-bottom: 50px; */
    margin: auto;
  
    background-image: url("../images/space-2638126_640.jpg");
    background-size: cover; 
    background-repeat: no-repeat; 
    height: $an-header-heigth;
    width: $an-site-width;
    border-radius: 8px;
  
    @include media-breakpoint-up(sm) {
      height: $an-header-heigth + 20px;
    }
    @include media-breakpoint-up(md) {
      height: $an-header-heigth + 40px;
    }
    @include media-breakpoint-up(lg) {
      height: $an-header-heigth + 60px;
    }
    @include media-breakpoint-up(xl) {
      height: $an-header-heigth + 80px;
    }
    @include media-breakpoint-up(xxl) {
      height: $an-header-heigth + 100px;
    }
  
    /* font-size: xx-large; */
    /* height: 195px; */
    /* padding-top: 50px; */
}
    
.navbar {
    margin: auto;
    background-color: $blue;
    border-radius: 8px;
    .nav-link:hover {
        color: $yellow;
    }
    .nav-link {
        color: white;
        text-decoration: white;
        //background-color: white;
    }
}

/* CSS für Kontakt.html */
footer{
    padding: 10px;
    background-color: $blue;
    color: white;
    text-align: center;
    position: fixed;
    left: 0; /* Abstand links */
    bottom: 0; /* Abstand unten */
    width: 100%;
    height: 40px;
}

footer > p a{
    color: white;
}

.ancontent {
    padding-top: $padding-section;
    padding-bottom: $padding-section;
}
  
.card {
    border: 2px solid #061539;
}