/*
==========================================================
Theme: Ueberdiek Ocean
Version: 0.2
Datei: assets/css/app.css
==========================================================
*/

/* ==========================================================
   01 Variablen
========================================================== */

:root {
    --color-primary: #005f73;
    --color-secondary: #0a9396;
    --color-accent: #94d2bd;

    --color-dark: #06141b;
    --color-light: #ffffff;
    --color-text: #2f3a40;
    --color-muted: #6b7b84;
    --color-bg: #f8fafb;

    --container: 1200px;

    --space-xs: .5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 4rem;
    --space-xl: 7rem;

    --radius: 18px;

    --shadow:
        0 10px 35px rgba(0,0,0,.15);

    --transition:
        .35s ease;
}

/* ==========================================================
   02 Reset
========================================================== */

*,
*::before,
*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    font-family:
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    background:var(--color-bg);

    color:var(--color-text);

    line-height:1.7;

    font-size:18px;
}

img{
    display:block;
    max-width:100%;
    height:auto;
}

a{
    color:inherit;
    text-decoration:none;
}

ul{
    list-style:none;
}

/* ==========================================================
   03 Grundlayout
========================================================== */

.container{

    width:min(100% - 3rem,var(--container));

    margin-inline:auto;
}

section{

    padding:
        var(--space-xl)
        0;
}

h1,
h2,
h3{

    font-weight:700;

    line-height:1.15;

    color:var(--color-dark);
}

h1{

    font-size:
        clamp(2.8rem,6vw,5.5rem);
}

h2{

    font-size:
        clamp(2rem,4vw,3.3rem);

    margin-bottom:1.5rem;
}

p{

    color:var(--color-muted);

    margin-bottom:1rem;
}

/* ==========================================================
   04 Header
========================================================== */

.site-header{

    position:absolute;

    top:0;
    left:0;
    right:0;

    z-index:1000;

    background:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.45),
            rgba(0,0,0,0)
        );
}

.site-header__inner{

    display:flex;

    justify-content:space-between;

    align-items:center;

    min-height:90px;
}

.site-title{

    color:#fff;

    font-size:1.4rem;

    font-weight:700;

    letter-spacing:.04em;
}

.main-navigation ul{

    display:flex;

    gap:2rem;
}

.main-navigation a{

    color:#fff;

    font-weight:600;

    transition:var(--transition);

    position:relative;
}

.main-navigation a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:0;

    height:2px;

    background:#fff;

    transition:var(--transition);
}

.main-navigation a:hover::after{

    width:100%;
}

/* ==========================================================
   05 Hero
========================================================== */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;
}

.hero__background {

    position: absolute;

    inset: 0;

    background-image:
        url("../images/hero.jpg");

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    transform: scale(1.03);
}
.hero__overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.45),
            rgba(0,0,0,.45)
        );
}

.hero__content{

    position:relative;

    z-index:5;

    width:min(90%,900px);

    margin:auto;

    text-align:center;

    color:#fff;
}

.hero__title{

    color:#fff;

    margin-bottom:1.5rem;

    text-shadow:
        0 3px 18px rgba(0,0,0,.45);
}

.hero__subtitle{

    color:#fff;

    font-size:1.35rem;

    font-weight:300;

    letter-spacing:.04em;

    text-shadow:
        0 3px 18px rgba(0,0,0,.45);

    max-width:700px;

    margin:auto;
}

/* ==========================================================
   Kleiner Hero für Unterseiten
========================================================== */

.hero--small {

    min-height: auto;

    display: block;

    padding: 8rem 0 3rem;

    background: var(--color-bg);

}

.hero--small .container {

    max-width: 1200px;

    margin: 0 auto;

}

.hero--small h1 {

    margin: 0;

    font-size: clamp(2.8rem, 5vw, 4rem);

    color: var(--color-text);

}

/* ==========================================================
   06 Intro
========================================================== */

.intro {

    background: #ffffff;
}

.intro__content {

    max-width: 850px;

    margin: 0 auto;

    text-align: center;
}

.intro__content p {

    font-size: 1.2rem;

    color: var(--color-muted);
}

/* ==========================================================
   07 Featured Cards
========================================================== */

.featured-section {

    background: var(--color-bg);
}

.featured-container {

    width: min(94%, 1450px);

    margin-inline: auto;
}

.featured-grid {

    display: grid;

    gap: 5rem;
}

.featured-card {

    position: relative;

    display: block;

    width: 100%;

    min-height: 620px;

    border-radius: 24px;

    overflow: hidden;

    box-shadow: 0 25px 60px rgba(0,0,0,.20);

    transition:
        transform .45s ease,
        box-shadow .45s ease;
}

.featured-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 35px 80px rgba(0,0,0,.28);
}

.featured-card__image {

    position: absolute;

    inset: 0;

    background-position: center;

    background-size: cover;

    background-repeat: no-repeat;

    transition: transform .8s ease;
}

.featured-card:hover .featured-card__image {

    transform: scale(1.08);
}

.featured-card__overlay {

    position: absolute;

    inset: 0;

    background: linear-gradient(
        to top,
        rgba(0,0,0,.78),
        rgba(0,0,0,.08) 45%,
        rgba(0,0,0,0) 100%
    );
}

.featured-card__content {

    position: absolute;

   left: 4rem;
right: 4rem;
bottom: 4rem;

    z-index: 10;

    color: #ffffff;
}

.featured-card__title {

    color: #ffffff;

    font-size: clamp(2rem,4vw,3.5rem);

    margin-bottom: .75rem;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.featured-card__subtitle {

    color: rgba(255,255,255,.92);

    font-size: 1.15rem;
}

/* Bilder */

.featured-card--saltwater {

    background-image:
        url("../images/saltwater.jpg");
}

.featured-card--freshwater {

    background-image:
        url("../images/freshwater.jpg");
}

.featured-card--abovewater {

    background-image:
        url("../images/abovewater.jpg");
}

.featured-card--videos {

    background-image:
        url("../images/videos.jpg");
}

/* ==========================================================
   08 Footer
========================================================== */

.site-footer {

    background: var(--color-dark);

    color: rgba(255,255,255,.75);

    padding: 3rem 0;

    text-align: center;
}

.site-footer p {

    color: inherit;

    margin: 0;
}

/* ==========================================================
   09 Responsive
========================================================== */

@media (max-width: 992px) {

    .site-header__inner {

        flex-direction: column;

        justify-content: center;

        gap: 1rem;

        padding: 1rem 0;
    }

    .main-navigation ul {

        gap: 1.25rem;

        flex-wrap: wrap;

        justify-content: center;
    }

    .featured-card {

        min-height: 560px;
    }

    .featured-card__content {

        left: 2rem;

        right: 2rem;

        bottom: 2rem;
    }
}

@media (max-width: 768px) {

    body {

        font-size: 16px;
    }

    section {

        padding: 5rem 0;
    }

    .hero {

        min-height: 85vh;
    }

    .hero__subtitle {

        font-size: 1.1rem;
    }

    .featured-card {

        min-height: 420px;
    }

    .featured-card__title {

        font-size: 2rem;
    }

    .featured-card__subtitle {

        font-size: 1rem;
    }
}

@media (max-width: 480px) {

    .container {

        width: min(100% - 2rem, var(--container));
    }

    .main-navigation ul {

        flex-direction: column;

        gap: .75rem;
    }

    .featured-card {

        min-height: 340px;
    }

    .featured-card__content {

        left: 1.5rem;

        right: 1.5rem;

        bottom: 1.5rem;
    }
}

/* ==========================================================
   Embla Carousel
========================================================== */

.gallery-preview {
    padding: 5rem 0;
    background: #f5f7f9;
}

.gallery-preview h2 {
    margin-bottom: 2rem;
}

.embla {
    width: 100%;
    overflow: hidden;
}

.embla__viewport {
    overflow: hidden;
}

.embla__container {
    display: flex;
}

.embla__slide {
    flex: 0 0 100%;
    min-width: 0;
}

.embla__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

.embla__title {
    margin-top: 1rem;
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
}