/* CSS Document */
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");

h1, h2 {
    font-size: 1.8em;
    line-height: 90%;
    font-weight: bold;
    padding: 0.5em 16.66vw 0.25em 0;        
}

h2 { padding-right: 8.33vw; }

h4 { margin: 1.25em 0 0 0; font-weight: bold;}

a { color: #6ef0cf; text-decoration: none; }

#footer a {
    color: #000;
    text-decoration: underline;
}

/*
.navbar {
    position: absolute;
    top: 1px;
    right: 1px;
}
*/

.me-auto {
  margin-right: inherit !important;
  margin-left: auto;
}

.bg-light {
    transition: background-color 0.3s ease-in-out; 
    background-color: transparent !important;
}

.navbar-light .navbar-nav .nav-link {
    color: #000000;
}

.navbar-light .navbar-nav .nav-link:hover {
    color: #000000;
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link.active {
    color: #000000;
    text-decoration: underline;
}

.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
  color: rgba(59, 196, 170, 0.7);
}

.navbar-toggler {
    border: solid 2px #000000;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-light .navbar-toggler {
    border-color: #000000;
}

/*
.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28110, 240, 207, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
} */

.navbar-collapse {
  background: #6ef0cf; 
  padding-left: 20px;
  margin-left: calc(100% - 150px);
}

.absatz {
    margin-top: 3em;
}

.social_icons .bi { color: #6ef0cf; }

.row > .video_wraper {
    padding: 0px;
    min-height: 500px;
    position: relative;       /* damit Overlay sich daran orientiert */
    display: inline-block;    /* oder block, je nach Layout */
    width: 100%;              /* falls volle Breite gewünscht */    
}

.video_wraper video {
    width: 100%;
    height: 100%;
    object-fit: cover;  
    display: block;    
}

.video_overlay {
    position: absolute;
    width: 100%;
    padding: 0;    
    
    bottom: 0;                /* Unterkante an Unterkante von .video_wraper */
    left: 0;
    z-index: 2;               /* liegt über dem Video */
}

.video_overlay img {
    max-width: 100%; 
    padding: 0;
    margin: 0;
}

.right_padding {
    padding-right: 8.33vw;
}

.bg_mint {
    background-color: #6ef0cf;
}

#portfolio_header img {
    width: 100%;
}

.funktion {
  font-size: 0.70em;
  margin-top: -0.15em;
  display: block;
}

section#storydocks {
    scroll-margin-top: 80px;
}

section#work_with_us, section#team, section#portfolio {
    scroll-margin-top: 60px;
}

@media (min-width: 768px) {
    h1, h2 { font-size: 3em; }
}

@media (min-width: 992px) {
    h1, h2 { font-size: 5em; /* von 6em auf 5em geändert */}
    p { font-size: 1.25em; }
    
    .navbar-collapse {
      background: transparent; 
      padding-left: 20px;
      margin-left: inherit;
    }    
}

@media (min-width: 1400px) {
    h1, h2 { font-size: 6em; /* von 9em auf 6 geändert */}
    p { font-size: 1.5em; }    
}