/*
Theme Name: NaluSpot
Author: Aaliyah Sarauer 
*/

/*RESET*/
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/**************** RESET ENDE *******************/
* {
    box-sizing: border-box;
}

h3 {
    color: #566B86;
    font-weight: bold;
    text-align: center;
    padding-top: 0.2em;
    padding-bottom: 0.2em;
    font-size: 1.5em;
    line-height: 28px;
}


/*VIDEO*/
.video {
    height: 500px;
    position: relative;
    overflow: hidden;
    margin-top: 5em;
}

.video > a > video {
    width: 100vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media screen and (min-width: 280px) and (max-width: 450px) {
      .video {
            height: 300px;
             margin-top: 1em;
    }
    
    .video-wrapper {
        height: 350px;
    }
    
}

@media screen and (min-width: 450px) and (max-width: 750px) {
   .video {
         margin-top: 4em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    
    h3 {
        font-size: 1.5em;
    }
}

.gross {
    color: #566B86;
}

body {
    font-family: "Apple Chancery", cursive;
    overflow-x: hidden;
}

@media screen and (max-width: 480px) {
    body {
        overflow-x: hidden;
    }
}

.start {
    display: flex;
    justify-content: center;
}

.start h1 {
    align-self: center;
    padding-left: 0;
    padding-top: 0;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .start h1 {
        padding-left: 0;
    }
}

@media screen and (max-width: 480px) {
    .start h1 {
        font-size: 3em;
    }
}

h1 {
    color: #566B86;
    font-size: 4em;
    padding-top: 4em;
    padding-left: 10em;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    h1 {
        padding-left: 2em;
        padding-top: 3em;
    }
}

.finnen-capture {
    padding-top: 2em;
    padding-bottom: 1em;
    text-align: center;
    padding-left: 0;
}

@media screen and (max-width: 480px) {
    .finnen-capture {
        font-size: 3em;
    }
}

h2 {
    font-size: 3em;
    grid-column: 2;
    grid-row: 1;
    padding-top: 2em;
    text-align: center;
    color: #566B86;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    h2 {
        font-size: 2em;
    }
}

p {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    color: #566B86;
}

li a {
    color: #566B86;
    text-decoration: none;
}

li a:visited {
    color: #566B86;
    text-decoration: none;
}

li a:hover {
    text-decoration: underline;
}

button {
    width: 4em;
}

button a {
    color: white;
    text-decoration: none;
}

#finnen-button {
    margin-top: 1em;
    margin-left: 1em;
    width: 5em;
}

.finne1-details {
    width: 5em;
    margin-left: 10em;
}

#finne1-details-button {
    width: 7em;
    color: white;
    font-weight: 700;
    font-size: 24px;
    text-decoration: none;
    /*    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;*/
    text-align: center;
}

@media screen and (max-width: 480px) {
    #finne1-details-button {
        font-size: 24px;
        display: block;
        margin: auto;
/*        padding: 1em;*/
/*        margin-left: 2em;*/
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    #finne1-details-button {
        font-size: 24px;
    }
}

/*
.anfrage-button-container {
    width: 6em;
    margin: auto;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border: 2px solid #566B86;
    border-radius: 5px;
    cursor: pointer;
    color: #566B86;
    font-size: 24px;
    padding: 10px 1em;
    transition: all 0.3s;
    margin-top: 0.5em;
    font-weight: 700;
}
*/

/*
@media screen and (max-width: 480px) {
  .anfrage-button-container {
    padding-bottom: 3em;
    width: 100%;
    margin: auto;
  }
}
@media screen and (min-width: 480px) and (max-width: 1380px) {
  .anfrage-button-container {
    align-self: flex-start;
    margin-left: 2em;
  }
}
*/

.back {
    border-radius: 5px;
    border: 2px solid #566B86;
    cursor: pointer;
    color: #566B86;
    font-size: 24px;
    padding-bottom: 4px !important;
    padding-top: 4px;
    transition: all 0.3s;
    margin-top: 44px;
    font-weight: 700;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background-color: white;
    margin-left: 2.6em;
    width: 6em;
}

.back span {
    display: block;
    text-align: center;
    position: relative;
    color: #566B86;
    z-index: 1;
    transition: 1s;
    font-family: "Apple Chancery", cursive;
    font-weight: bold;
}

.back .wave {
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    width: 100%;
    height: 100%;
    background: #CBF7FC;
    transition: 1s;
}

.back .wave::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    height: 22px;
    background-image: url(assets/imgs/wave-nalu.png);
    animation: animate 0.5s linear infinite;
}

.back:hover .wave {
    top: 0;
}

.back:hover span {
    color: #566B86;
}

.back a {
    color: white;
    text-decoration: none;
}

@media screen and (max-width: 480px) {
    .back {
        display: none;
    }
}

.links {
    border-radius: 5px;
    border: 2px solid #ffffff;
    cursor: pointer;
    color: #ffffff;
    font-size: 24px;
    padding-bottom: 10px !important;
    padding: 10px 1em;
    transition: all 0.3s;
    margin-top: -4px;
    font-weight: 700;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    background-color: #566B86;
}


.links span {
    display: block;
    text-align: center;
    position: relative;
/*    color: #566B86;*/
    color: #ffffff;
    z-index: 1;
    transition: 1s;
    font-family: "Apple Chancery", cursive;
    font-weight: bold;
}

.links .wave {
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    width: 100%;
    height: 100%;
    background: #CBF7FC;
    transition: 1s;
}

.links .wave::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    height: 22px;
    background-image: url("assets/imgs/wave-nalu.png");
    animation: animate 0.5s linear infinite;
}

.links:hover .wave {
    top: 0;
}

.links:hover span {
    color: #566B86;
}





#finne1-details-button:hover {
    color: #566B86;
}

header nav {
    background-color: #CBF7FC;
    position: fixed;
    width: 100%;
    z-index: 100;
    height: 6em;
    box-shadow: 0px 3px 6px #00000029;
}

header nav img {
    width: 8em;
    position: absolute;
    top: 0;
    left: 1em;
}

@media screen and (max-width: 480px) {
    header nav img {
        width: 3em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    header nav img {
        width: 6em;
    }
}

header nav ul {
    display: flex;
    justify-content: flex-end;
}

@media screen and (max-width: 480px) {
    header nav ul {
        display: block;
        text-align: left;
        font-size: 1.2em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    header nav ul {
        display: block;
        text-align: left;
        font-size: 1.5em;
    }
}

header nav ul li {
    padding: 2em;
    font-size: 1.2em;
    cursor: pointer;
    font-weight: 700;
}

@media screen and (max-width: 480px) {
    header nav ul li {
        padding-top: 0.1em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    header nav ul li {
        padding-top: 0.2em;
        margin-left: 40%;
    }
}

@media screen and (max-width: 480px) {
    header nav ul li:first-child {
        padding-top: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    header nav ul li:first-child {
        padding-top: 2em;
    }
}

header nav ul ul {
    display: none;
    height: auto;
    position: absolute;
    width: 6em;
}

@media screen and (max-width: 480px) {
    header nav ul ul {
        position: static;
        display: block;
        width: auto;
        font-size: 1em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    header nav ul ul {
        position: static;
        display: block;
        right: 0;
        width: auto;
        font-size: 1em;
    }
}

.menu-finnen:hover {
    text-decoration: none;
}

.topmenu li:hover ul,
.topmenu li:focus-within ul {
    display: block;
    animation: fadeIn 0.5s ease-in;
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {

    .topmenu li:hover ul,
    .topmenu li:focus-within ul {
        animation: none;
    }
}

.topmenu > li > ul li {
    background-color: #c2e8ec;
    width: 6em;
    text-align: center;
    z-index: 2;
    position: relative;
    display: block;
}

@media screen and (max-width: 480px) {
    .topmenu > li > ul li {
        width: auto;
        margin-left: -4em;
        padding-left: 4em;
        position: static;
        font-size: 0.8em;
        margin-right: 0;
        background-color: #D5EFF2;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .topmenu > li > ul li {
        width: auto;
        margin-left: -12em;
        position: static;
        font-size: 0.8em;
        margin-right: 0;
        background-color: #D5EFF2;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .topmenu > li > ul li {
        margin-left: -20em;
    }
}

.topmenu > li > ul li:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border: 0;
    padding-top: 1em;
}

.topmenu > li > ul li:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 0;
}

.topmenu > li > ul li a {
    display: block;
    z-index: 40;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        height: 0;
    }

    50% {
        height: auto;
    }

    100% {
        opacity: 1;
    }
}

.drop-down li,
.sub-menu li {
    font-size: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
}

.burger-menu {
    width: 2em;
    display: none;
}

@media screen and (max-width: 480px) {
    .burger-menu {
        display: block;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .burger-menu {
        display: block;
    }
}

.main-header-action {
    display: none;
}

@media screen and (max-width: 480px) {
    .main-header-action {
        background-color: #D5EFF2;
        position: fixed;
        display: flex;
        padding-left: 2em;
        padding-top: 1em;
        padding-bottom: 1em;
        padding-right: 2em;
        justify-content: space-between;
        width: 100%;
        z-index: 100;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .main-header-action {
        background-color: #D5EFF2;
        position: fixed;
        display: flex;
        padding-left: 2em;
        padding-top: 1em;
        padding-bottom: 1em;
        padding-right: 2em;
        justify-content: space-between;
        width: 100%;
        z-index: 100;
    }
}

.main-header-action a {
    color: #955823;
    text-decoration: none;
    padding: 0;
}

.button-open-menu {
    background-color: transparent;
}

.button-close-navigation {
    display: none;
}

@media screen and (max-width: 480px) {
    .button-close-navigation {
        left: 16em;
        width: 6em;
        height: 7em;
        display: block;
    }

    .button-open-menu {
        position: relative;
        top: 0.5em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .button-close-navigation {
        width: 100%;
        height: 7em;
        display: block;
    }
}

.button-close-navigation img {
    display: none;
}

@media screen and (max-width: 480px) {
    .button-close-navigation img {
        display: block;
        width: 2em;
        top: 0.5em;
        left: calc(100% - 3em);
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .button-close-navigation img {
        display: block;
        top: 1em;
        width: 3em;
        left: calc(100% - 4em);
        float: right;
    }
}

.menu-logo {
    width: 4em;
}

/*
@media screen and (max-width: 480px) {
    .menu-logo {
        width: 3em;
    }
}
*/

@media screen and (max-width: 480px) {
    #main-navigation {
        z-index: 100;
        background-color: #D5EFF2;
        height: 100%;
        left: -400%;
        padding: 1rem;
        /* 16px */
        position: fixed;
        text-align: right;
        top: 0;
        transition: left 0.5s ease;
        /* navigation wird animiert */
        width: 100%;
        overflow-y: scroll;
    }

    #main-navigation:target {
        left: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    #main-navigation {
        z-index: 100;
        background-color: #CBF7FC;
        height: 100%;
        left: -100%;
        padding: 1rem;
        /* 16px */
        position: fixed;
        text-align: right;
        top: 0;
        transition: left 0.5s ease;
        /* navigation wird animiert */
        width: 100%;
        box-shadow: 0px 3px 6px #00000029;
    }

    #main-navigation:target {
        left: 0;
    }
}

@media screen and (max-width: 480px) {
    nav ul li a {
        margin-left: 3em;
        font-size: 0.9em;
    }
}

footer {
    /*    background-color: #CBF7FC;*/
    width: 100%;
    /*    box-shadow: 0px 0px 6px #00000029;*/
}

footer ul {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
    bottom: -94px;
}

footer ul li {
    padding: 2em;
    color: #955823;
    font-size: 1.2em;
    font-weight: bold;
}

@media screen and (max-width: 480px) {
    footer ul li {
        padding-left: 0;
    }

    footer ul {
        justify-content: center;
    }
}

footer p {
    padding-bottom: 0.2em;
    padding-left: 1em;
    color: #566B86;
    font-size: 0.8em;
    position: relative;
    z-index: 2;
    bottom: -116px;
}

/*Wellen-Animation Footer*/

.ocean {
    height: 9em;
    width: 100%;
    position: absolute;
    left: 0;
    background: #CBF7FC;
}

.ocean .wave2 {
    background: url(assets/imgs/wave-blau.svg);
    position: absolute;
    background-size: cover;
    top: -150px;
    width: 100vw;
    height: 17em;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    transform: translate3d(0, 0, 0);
    background-position: 100%;
}

.ocean .wave2:nth-of-type(2) {
    top: -140px;
    animation: wave 7s cubic-bezier(0.36, 0.45, 0.63, 0.53) -.125s infinite, swell 7s ease -1.25s infinite;
    opacity: 1;
}


@keyframes wave {
    0% {
        background-position: 100%;
    }

    100% {
        background-position: 100vw;
    }
}

@keyframes swell {

    0%,
    100% {
        transform: translate3d(0, -20px, 0);
    }

    50% {
        transform: translate3d(0, 5px, 0);
    }
}






#forms {
    text-align: center;
    transition: left 0.5s ease;
    position: fixed;
    background-color: #D1F2F6;
    z-index: 99;
    padding: 1rem;
    /* 16px */
    padding-top: 8em;
    top: 0;
    left: -300%;
    transition: left 0.5s ease;
    /* navigation wird animiert */
}

@media screen and (max-width: 480px) {
    #forms {
        overflow-y: scroll;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    #forms {
        overflow-y: scroll;
    }
}

#forms .name-anfrage {
    padding-bottom: 1em;
    font-size: 2em;
    text-align: center;
    width: 60%;
    margin: auto;
}

@media screen and (max-width: 480px) {
    #forms .name-anfrage {
        font-size: 1.2em;
    }
}

@media screen and (max-width: 480px) {
    #forms a {
        display: block;
        width: 100%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    #forms a {
        display: block;
    }
}

#forms p {
    padding-top: 1em;
    text-align: center;
    color: #566B86;
}

#forms h4 {
    color: #566B86;
    text-align: center;
    padding-bottom: 1em;
    font-size: 1.2em;
}

#forms input::placeholder,
#forms textarea::placeholder {
    color: #566B86;
}

@media screen and (max-width: 480px) {
    #forms h4 {
        text-align: left;
    }
}

@media screen and (max-width: 480px) {
    #forms {
        left: -500%;
        padding-top: 5em;
        height: 100vh;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    #forms {
        left: -500%;
    }
}

.form-finnen {
    /*    background-color: #D1F2F6;*/
    text-align: center;
}

.form-finnen #close-button {
    display: none;
}

.form-finnen .input-wrapper {
    position: relative;
    width: 60%;
    margin: auto;
}

.form-finnen .input-wrapper label {
    position: absolute;
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    left: 18px;
    top: 18px;
    display: block;
    margin: 0;
    font-weight: 300;
    z-index: 1;
    color: #566B86;
    font-size: 16px;
    line-height: 10px;
    transition: 0.2s ease all;
}

.form-finnen .input-wrapper input:focus ~ label,
.form-finnen .input-wrapper input:not(:focus):valid ~ label {
    top: 8px;
    bottom: 10px;
    left: 20px;
    font-size: 11px;
    opacity: 1;
}

.form-finnen textarea {
    padding-top: 32px !important;
}

.form-finnen .feedback-input {
    color: #566B86;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-radius: 5px;
    line-height: 22px;
    background-color: transparent;
    border: 2px solid #566B86;
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width: 100%;
    outline: 0;
    padding-top: 18px;
    padding-left: 17px;
}

.form-finnen [type=submit],
.wpcf7-form [type=submit] {
    display: block;
    margin: auto;
    width: 6em;
    font-size: 18px;
}

#close-button {
    width: 3em;
    margin-left: 56%;
    padding-top: 1em;
}

@media screen and (max-width: 480px) {
    #close-button {
        width: 2em;
        display: block;
        margin-left: calc(100% - 3em);
    }
}

#forms:target {
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
}

@media screen and (max-width: 480px) {
    #forms:target {
        height: 150%;
        position: absolute;
    }
}

.feedback-input,
.wpcf-form .wpcf7-form-control {
    color: #566B86;
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 500;
    font-size: 18px;
    border-radius: 5px;
    line-height: 22px;
    background-color: transparent;
    border: 2px solid #566B86;
    transition: all 0.3s;
    padding: 13px;
    margin-bottom: 15px;
    width: 60%;
    outline: 0;
}

.feedback-input:focus {
    border: 2px solid #566B86;
}

@media screen and (max-width: 480px) {
    .feedback-input {
        font-size: 0.8em;
        padding: 2%;
    }
}

textarea {
    height: 150px;
    line-height: 150%;
    resize: vertical;
}

@media screen and (max-width: 480px) {
    textarea {
        height: 3%;
    }
}

::placeholder {
    color: #955823;
}

input[type=submit] {
    font-family: "Montserrat", Arial, Helvetica, sans-serif;
    width: 60%;
    background: #566B86;
    border-radius: 5px;
    border: 2px solid #566B86;
    cursor: pointer;
    color: white;
    font-size: 18px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: all 0.6s;
    margin-top: -4px;
    font-weight: 700;
    -webkit-appearance: none;
}



@media screen and (max-width: 480px) {
    input[type=submit] {
        font-weight: 400;
        font-size: 1em;
    }
}

input[type=submit]:hover {
    background: #fff;
    color: #566B86;
    border: 2px solid #566B86;
}

.betreff {
    border: none;
}

.start {
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
}

.start h1 {
    color: white;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .start {
        width: 100vw;
        overflow-x: hidden;
        height: 40em;
        background-size: 150%;
    }
}

@media screen and (max-width: 480px) {
    .start {
        height: 20em;
        overflow-x: hidden;
        background-size: 150%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .start {
        background-size: 100%;
        background-position: 90% 0%;
    }
}

.antrieb {
    display: grid;
    height: auto;
    width: 100%;
    grid-template-columns: 50% 50%;
    grid-template-rows: auto 30em 30em;
    background-color: #CBF7FC;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .antrieb {
        display: block;
    }
}

@media screen and (max-width: 480px) {
    .antrieb {
        overflow-x: hidden;
        display: block;
    }
}

.antrieb h2 {
    color: #566B86;
    padding-bottom: 2em;
}

.antrieb p {
    font-size: 1.5em;
}

@media screen and (max-width: 480px) {
    .antrieb p {
        font-size: 1em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .antrieb p {
        font-size: 1.5em;
        line-height: 30px;
    }
}

.fototeamsection {
    grid-column-start: 2;
    grid-row: 2;
    background-size: cover;
    background-position: 0 100%;
    background-repeat: no-repeat;
}

@media screen and (max-width: 480px) {
    .fototeamsection {
        height: 8em;
        background-position: 80% 80%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .fototeamsection {
        height: 20em;
        background-position: 65% 65%;
    }
}

.capture-team {
    grid-area: 1/1/1/3;
    justify-self: center;
    background-color: white;
    width: 100%;
}

.infosteam {
    margin-top: 3em;
    padding-bottom: 3em;
    grid-area: 2/1/2/1;
    width: 70%;
    justify-self: center;
    align-self: center;
    line-height: 28px;
}

.infosteam h3 {
    padding-bottom: 1em;
    line-height: 26px;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .infosteam h3 {
        line-height: 40px;
    }
}

@media screen and (max-width: 480px) {
    .infosteam {
        padding-bottom: 2em;
        width: 80%;
        padding-left: 4em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .infosteam {
        width: 100%;
        text-align: center;
        padding-left: 4em;
        padding-right: 4em;
    }
}

.technikfotosection {
    grid-area: 3/1/3/1;
    background-position: 60% 60%;
    background-size: cover;
}

@media screen and (max-width: 480px) {
    .technikfotosection {
        height: 8em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .technikfotosection {
        height: 20em;
        background-position: 50% 50%;
    }
}

.technik {
    margin-top: 3em;
    width: 70%;
    grid-area: 3/2/3/2;
    justify-self: center;
    align-self: center;
    line-height: 28px;
    padding-bottom: 3em;
}

.technik h3 {
    padding-bottom: 1em;
    line-height: 26px;
}

@media screen and (max-width: 480px) {
    .technik {
        padding-bottom: 2em;
        padding-left: 4em;
        width: 80%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .technik {
        width: 100%;
        text-align: center;
        padding-left: 4em;
        padding-right: 4em;
    }
}

.neue-produkte-capture {
    background-color: #ffffff;
}

.neue_produkte {
    height: auto;
    background-color: #ffffff;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding-bottom: 3em;
    padding-top: 6em;
}

.neue_produkte > div {
    padding-bottom: 3em;
}

.neue_produkte a {
    width: 6em;
    margin: auto;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border: 2px solid #566B86;
    border-radius: 5px;
    cursor: pointer;
    color: #566B86;
    font-size: 24px;
    padding: 10px 1em;
    transition: all 0.3s;
    margin-top: 0.5em;
    font-weight: 700;
}

@media screen and (max-width: 480px) {
    .neue_produkte {
        display: block;
        height: auto;
        padding-left: 1.6em;
        padding-right: 1.6em;
        padding-top: 4em;
    }
}

.produkt {
    border-radius: 10% 10%;
    background-size: cover;
    background-color: white;
    height: 20em;
    width: 30em;
}

@media screen and (max-width: 480px) {
    .produkt {
        margin-top: 0;
        height: 20em;
        width: auto;
        background-position: center;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .produkt {
        width: 19em;
        background-position: center;
    }
}

.produkt-container .produkt .capture-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 30px 30px 0px 0px;
}


.finnen {
    background-image: url("/assets/imgs/background/finnen-klein-gruppenbild.png");
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
}

@media screen and (max-width: 480px) {
    .finnen {
        height: 20em;
        overflow-x: hidden;
        background-size: 150%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finnen {
        height: 40em;
        background-size: 150%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .finnen {
        background-size: 100%;
        background-position: 90% 0%;
    }
}

.finnen-capture-container {
    /*    background-color: #D1F2F6;*/
    padding-bottom: 4em;
}

.produkte {
    height: auto;
    /*    background-color: #D5EFF2;*/
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(24em, 1fr));
    grid-column-gap: 54px;
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 3em;
}

.produkte a {
    width: 6em;
    margin: auto;
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    border: 2px solid #566B86;
    border-radius: 5px;
    cursor: pointer;
    color: #566B86;
    font-size: 24px;
    padding: 10px 1em;
    transition: all 0.3s;
    margin-top: 0.5em;
    font-weight: 700;
}

.produkte a span {
    display: block;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: 1s;
}

.produkte a .wave {
    position: absolute;
    top: calc(100% + 22px);
    left: 0;
    width: 100%;
    height: 100%;
    background: #CBF7FC;
    transition: 1s;
}

.produkte a .wave::before {
    content: "";
    position: absolute;
    top: -22px;
    left: 0;
    width: 100%;
    height: 22px;
    background-image: url("assets/imgs/wave-nalu.png");
    animation: animate 0.5s linear infinite;
}

.produkte a:hover .wave {
    top: 0;
}

.produkte a:hover span {
    color: #566B86;
}

/*
Button Wellen Animation
*/


@keyframes animate {
    0% {
        background-position-x: 0;
    }

    100% {
        background-position-x: 118px;
    }
}




.capture-wrapper {
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 30px 30px 0px 0px;
}

@media screen and (max-width: 480px) {
    .produkte {
        display: block;
        height: auto;
        padding-left: 1.6em;
        padding-right: 1.6em;
    }
}

.finnen-gross {
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
    background-repeat: no-repeat;
}

@media screen and (max-width: 480px) {
    .finnen-gross {
        /*        height: 20em;*/
        overflow-x: hidden;
        background-size: 150%;
        height: 50vh;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finnen-gross {
        /*        height: 40em;*/
        background-size: 150%;
        height: 78vh;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .finnen-gross {
        background-size: 100%;
        background-position: 90% 0%;
    }
}

.finne-gross-container {
    margin-bottom: 3em;
}

.finne-gross {
    border-radius: 30px 30px;
    background-size: cover;
    background-color: white;
    height: 20em;
    /*    width: 30em;*/
}

@media screen and (max-width: 480px) {
    .finne-gross {
        margin-top: 0;
        height: 20em;
        width: auto;
        background-position: center;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne-gross {
        /*        width: 19em;*/
        background-position: center;
    }
}

.contact {
    background-image: url("/assets/imgs/background/flaschenpost.png");
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
}

@media screen and (max-width: 480px) {
    .contact {
        height: 20em;
        overflow-x: hidden;
        background-size: 150%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .contact {
        height: 40em;
        background-size: 150%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .contact {
        background-size: 100%;
        background-position: 90% -80%;
    }
}

.contact-container {
    height: 100vh;
    /*    background-color: #D1F2F6;*/
}

.slick-prev:before,
.slick-next:before {
    color: #566B86 !important;
}


.contact-container > p {
    text-align: center;
    margin: auto;
    font-size: 1.2em;
    padding-bottom: 3em;
    line-height: 22px;
    width: 60%;
}

@media screen and (max-width: 480px) {
    .contact-container {
        height: auto;
        padding-bottom: 5em;
    }
}

.impressum {
    padding-left: 4em;
    padding-right: 4em;
    padding-bottom: 4em;
    height: auto;
    background-color: #A9D9D4;
}

@media screen and (max-width: 480px) {
    .impressum {
        padding-left: 1em;
        padding-right: 1em;
    }
}

.impressum h1 {
    padding-left: 0;
    text-align: center;
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .impressum h1 {
        font-size: 2.5em;
    }
}

@media screen and (max-width: 480px) {
    .impressum h1 {
        font-size: 2em;
    }
}

.impressum h2 {
    margin-bottom: 1em;
    text-align: left;
}

@media screen and (max-width: 480px) {
    .impressum h2 {
        font-size: 1.5em;
    }
}

.impressum p {
    margin-top: 2em;
    font-size: 1.3em;
    line-height: 24px;
    width: 50vw;
}

@media screen and (max-width: 480px) {
    .impressum p {
        width: 80vw;
        font-size: 1em;
        word-wrap: break-word;
    }
}

.impressum ul {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    color: white;
    font-size: 1.3em;
    list-style: square;
    width: 50%;
    line-height: 24px;
    padding-left: 1em;
}

@media screen and (max-width: 480px) {
    .impressum ul {
        width: 80vw;
        font-size: 1em;
        word-wrap: break-word;
    }
}

.anderes_g {
    background-image: url("/assets/imgs/background/anhaenger-gruppenbild.png");
    height: 100vh;
    background-size: cover;
    background-attachment: fixed;
    background-position: top;
}

@media screen and (max-width: 480px) {
    .anderes_g {
        height: 20em;
        overflow-x: hidden;
        background-size: 150%;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .anderes_g {
        height: 40em;
        background-size: 150%;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .anderes_g {
        background-size: 100%;
        background-position: 90% -60%;
    }
}

.finne-details {
    padding-left: 4em;
    padding-right: 4em;
}

@media screen and (max-width: 480px) {
    .finne-details {
        padding-left: 2em;
        padding-right: 2em;
    }
}

.finne-details .info-container > div:first-of-type {
    max-width: 45vw;
}

.finne-details .info-container > div:nth-of-type(2) {
    max-width: 40vw;
}

.slider-img {
    width: 100%;
    /*
    height: 30em !important;
    width: 40em !important;
*/
}

.slider-nav {
    margin-top: 0.5em;
}

.slider-nav .slick-list {
    height: 100%;
}

.slider-nav-img {
    height: auto;
    width: 13em;
}

.slick-dots li button:before {
    font-size: 12px !important;
}


.info-container {
    display: flex;
    justify-content: space-between;
}

@media screen and (min-width: 300px) and (max-width: 1155px) {
    .info-container {
        flex-direction: column;
    }

    .finne-details .info-container > div:nth-of-type(2) {
        max-width: 100%;
        margin-top: 2em;
    }

    .finne-details .info-container > div:first-of-type {
        max-width: 100%;
    }

    .anfrage-button-container {
        margin-right: auto;
    }
}

.slider-nav .slick-list .slick-slide {
    width: auto !important;
    margin-right: 1em;
}

.finne1-details {
    margin-left: 16em;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 2fr 1fr;
}

@media screen and (max-width: 480px) {
    .finne1-details {
        display: block;
        margin-left: 0;
        margin-right: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne1-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-bottom: 3em;
        width: auto;
        text-align: center;
        margin: 0;
    }
}

.finne1-details .container {
    grid-column: 2;
    grid-row: 1/3;
    margin-right: 6em;
    justify-self: start;
}

@media screen and (max-width: 480px) {
    .finne1-details .container {
        margin-right: 0;
        margin-left: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne1-details .container {
        margin: 0;
        display: block;
    }
}

.finne-details h2 {
    padding-top: 0.5em;
    padding-bottom: 1em;
    font-size: 4em;
}

@media screen and (max-width: 480px) {
    .finne-details h2 {
        font-size: 2em;
        text-align: center;
        padding-right: 0;
        padding-left: 0;
        padding-top: 2em;
        width: 10em;
        line-height: 38px;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne-details h2 {
        font-size: 2em;
        width: auto;
        align-self: center;
        padding-right: 0;
    }
}

.finne-details .finne-details-text {
    width: 100%;
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    color: #566B86;
    font-size: 1.2em;
    padding-bottom: 2em;
}

@media screen and (max-width: 480px) {
    .finne-details .finne-details-text {
        margin-top: 3em;
        margin-right: 0;
        margin-left: 0;
        padding-left: 1em;
        padding-right: 0;
        width: 80vw;
    }
}

/*
@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne-details .finne-details-text {
        margin-top: 3em;
        width: auto;
        text-align: left;
        padding-left: 2em;
    }
}
*/

.finne-details .finne-details-text p {
    padding-bottom: 2em;
    line-height: 24px;
}

.finne-details .finne-details-text p:last-of-type {
    padding-bottom: 3em;
}

.finne-details .finne-details-text ul {
    padding-bottom: 2em;
    line-height: 24px;
    padding-left: 1em;
    list-style: square;
}

@media screen and (max-width: 480px) {
    .finne-details .finne-details-text ul {
        padding-left: 1em;
        padding-bottom: 1em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .finne-details .finne-details-text ul {
        padding-left: 1em;
    }
}

.finne-details .finne-details-text a {
    color: white;
    display: block;
    padding-bottom: 2em;
}

.site {
    /*    background-color: #D1F2F6;*/
    padding-top: 8em;
    width: 100%;
    padding-bottom: 2em;
}

@media screen and (max-width: 480px) {
    .site {
        margin-left: 0;
        margin-right: 0;
        padding-top: 6em;
        width: auto;
    }
}

@media screen and (max-width: 480px) {
    .site .back {
        margin-top: 0;
        font-size: 1em;
        margin-left: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .site .back {
        margin: 0;
        margin-left: 1.5em;
        font-size: 20px;
    }
}

@media screen and (max-width: 480px) {
    .site {
        display: block;
    }
}

/* TEST BEGINN */
.thumbnails {
    width: 40em;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    line-height: 0;
    align-self: flex-start;
}

@media screen and (max-width: 480px) {
    .thumbnails {
        width: 20em;
        margin-left: 0;
        margin-right: 0;
        padding-left: 0;
        padding-right: 0;
        margin-top: 1em;
        align-self: center;
        padding-left: 1em;
        justify-content: space-between;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .thumbnails {
        padding-top: calc(100vw - 78em);
        padding-bottom: 3em;
    }
}

.thumbnails li {
    flex: auto;
    margin-top: 1em;
}

.thumbnails a {
    display: block;
}

.thumbnails img {
    width: 20vmin;
    height: 10vmin;
    object-fit: cover;
    object-position: center;
    border-radius: 5px;
    border: 0;
}

@media screen and (max-width: 480px) {
    .thumbnails img {
        width: 8em;
        height: 6em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .thumbnails img {
        width: 100%;
        max-width: 12em;
        height: auto;
    }
}

.slides {
    overflow: hidden;
    width: 40em;
    height: 70vh;
}

@media screen and (max-width: 480px) {
    .slides {
        height: 15em;
        width: auto;
        padding-left: 1em;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .slides {
        height: 44vh;
        display: flex;
    }
}

@media screen and (min-width: 1100px) and (max-width: 1380px) {
    .slides {
        height: 72vh;
    }
}

.slides li {
    position: absolute;
}

.slides img {
    height: 30em;
    width: 40em;
    object-fit: cover;
    object-position: top;
    border-radius: 5px;
    border: 0;
}

@media screen and (max-width: 480px) {
    .slides img {
        height: 60vw;
        width: auto;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {
    .slides img {
        height: auto;
    }
}

.imageVisible {
    z-index: 3;
}

.imageInvisible {
    z-index: 0;
}

#slide1,
#slide2,
#slide3,
#slide4,
#slide5,
#slide6 {
    padding-top: 8em;
}

@media screen and (max-width: 480px) {

    #slide1,
    #slide2,
    #slide3,
    #slide4,
    #slide5,
    #slide6 {
        padding-top: 0;
    }
}

@media screen and (min-width: 480px) and (max-width: 1380px) {

    #slide1,
    #slide2,
    #slide3,
    #slide4,
    #slide5,
    #slide6 {
        padding-top: 4em;
    }
}

/* TEST ENDE */

/*# sourceMappingURL=style.css.map */

.wrapper {
    width: 80%;
    margin: auto;
    margin-bottom: 4em;
}

.wrapper h2 {
    margin-bottom: 1em;
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
}

.wrapper p {
    color: #566B86;
    line-height: 18px;
}

.wrapper ul {
    list-style: disc;
    padding-left: 2em;
}

.wrapper ul li {
    font-family: "Century Gothic", CenturyGothic, Geneva, AppleGothic, sans-serif;
    color: #566B86;
    padding-bottom: 1em;
}

.wrapper ul li:first-of-type {
    padding-top: 1em;
}

.wrapper ul li:last-of-type {
    padding-bottom: 0;
}

.heading-one {
    padding-left: 0;
    text-align: center;
}

@media screen and (max-width: 480px) {
    .heading-one {
        font-size: 2em;
    }

    .wrapper h2 {
        font-size: 1.5em;
    }
}