@charset "UTF-8";

/* =========================================================
   HAILIGHT Prepress - Alexandra Korpi
   Hauptstylesheet
   ========================================================= */


/* =========================================================
   1. GRUNDWERTE
   ========================================================= */

:root {
    --blue-dark: #003a6d;
    --blue: #0b5b82;
    --blue-light: #93daf9;
    --blue-soft: #0093b9;

    --white: #ffffff;
    --off-white: #f4eef1;

    --magenta: #ff00ff;

    --text-dark: #082c4a;
    --text-light: #ffffff;

    --section-padding: 40px;
    --content-width: 1200px;

    --radius-small: 12px;
    --radius-medium: 24px;
    --radius-large: 40px;

    --shadow-soft: 0 15px 40px rgba(0, 0, 0, 0.12);

    --transition: 0.3s ease;
}


/* =========================================================
   2. RESET
   ========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Pacaembu", Helvetica, sans-serif;
    color: var(--text-dark);
    background: var(--blue-dark);
    line-height: 1.25;
    overflow-x: hidden;
}

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

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

button {
    font: inherit;
}


/* =========================================================
   3. ALLGEMEINE ELEMENTE
   ========================================================= */

h1,
h2,
h3 {
    font-family: "rl-aqva", sans-serif;
    font-weight: 900;
    font-style: normal;
    line-height: 0.9;
}

h1 {
    font-size: clamp(3rem, 7vw, 6.5rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
}

h3 {
    font-size: 1.5rem;
}

p {
    max-width: 700px;
}


/* =========================================================
   4. NAVIGATION
   ========================================================= */

.site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
}

.navigation {
    position: relative;
    z-index: 2;

    width: min(100% - 60px, var(--content-width));
    min-height: 100px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: block;
}

.logo-image {
    display: block;
    width: 120px;
    height: auto;
}

.navigation-list {
    display: flex;
    align-items: center;
    gap: 45px;

    list-style: none;
}

.navigation-list a {
    position: relative;

    color: var(--text-dark);
    font-weight: 600;

    transition: var(--transition);
}

.navigation-list a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -8px;

    width: 0;
    height: 2px;

    background: var(--magenta);

    transition: var(--transition);
}

.navigation-list a:hover::after {
    width: 100%;
}

.navigation-list a:hover {
    color: var(--off-white);
}


/* =========================================================
   MOBILE MENU BUTTON
   ========================================================= */

.mobile-menu-button {
    display: none;

    width: 48px;
    height: 48px;

    border: none;
    background: transparent;

    cursor: pointer;
}

.mobile-menu-button span {
    display: block;

    width: 28px;
    height: 2px;

    margin: 6px auto;

    background: var(--white);
}


/* =========================================================
   WELLE UNTER DER NAVIGATION
   ========================================================= */

.header-wave {
    position: absolute;

    top: -20px;
    left: 0;

    width: 100%;
    height: 200px;

    z-index: 1;

    overflow: hidden;

    pointer-events: none;
}

.header-wave img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: top center;
}


/* =========================================================
   5. HERO
   ========================================================= */

.hero {
    position: relative;
    z-index: 1;

    min-height: 900px;

    padding:
        260px
        max(30px, calc((100% - var(--content-width)) / 2))
        220px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;

    gap: clamp(40px, 5vw, 70px);

    color: var(--off-white);

    background:
        radial-gradient(
            circle at 80% 30%,
            var(--blue-light),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );

    overflow: hidden;
}

.hero::after {
    z-index: 2;
}

.hero-content {
    min-width: 0;
}

.hero-content h1 {
    margin-bottom: 10px;
}

.hero-text {
    margin-bottom: 0;
    line-height: 1.25;
}

.hero-content .button {
    margin-top: 15px;

    background: var(--blue);
    color: var(--off-white);
}


/* =========================================================
   HERO BILD
   ========================================================= */

.hero-image {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}

.hero-image-person {
    width: min(480px, 80vw);
    aspect-ratio: 1 / 1;

    object-fit: cover;
    object-position: center 45%;

    border-radius: 50%;
}


/* =========================================================
   ZWEITE WELLE ZWISCHEN HERO UND ÜBER MICH
   ========================================================= */

.hero-about-wave {
    position: relative;

    margin-top: -180px;

    z-index: 2;

    width: 100%;

    line-height: 0;

    pointer-events: none;
}

.hero-about-wave img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   6. BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 54px;
    padding: 14px 30px;

    border-radius: 100px;

    background: var(--blue-dark);
    color: var(--off-white);

    font-weight: 700;

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.button:hover {
    transform: translateY(-4px);

    box-shadow:
        0 10px 30px #0b5b82;
}

.button:active {
    transform: translateY(-1px);
}


/* =========================================================
   7. SICHERHEIT / HALT / SCHNELL
   ========================================================= */

.values-section {
    position: relative;
    z-index: 3;

    margin-top: -170px;

    padding:
        70px
        max(30px, calc((100% - var(--content-width)) / 2))
        90px;

    background: transparent;
}

.values-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: clamp(30px, 5vw, 60px);

    align-items: start;
}

.value-card {
    min-height: auto;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;

    background: transparent;

    border-radius: 0;

    box-shadow: none;

    text-align: center;
}

.value-card:hover {
    transform: none;
    box-shadow: none;
}

.value-icon {
    width: 270px;
    height: 60px;

    margin-bottom: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: transparent;

    font-size: 4rem;

    position: relative;
    top: -210px;
}

.value-content {
    width: 100%;

    position: relative;
    top: -200px;
}

.value-content h3 {
    margin-bottom: 5px;

    color: var(--blue-dark);

    font-size: 2rem;
}

.value-content p {
    max-width: 250px;
    margin: 0 auto;

    color: var(--blue-dark);

    font-size: 1.15rem;
    line-height: 1.25;
}


/* =========================================================
   8. ÜBER MICH
   ========================================================= */

.about-section {
    position: relative;

    min-height: 350px;

    padding:
        70px
        max(30px, calc((100% - var(--content-width)) / 2))
        60px;

    margin-bottom: 0;

    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);

    align-items: center;

    gap: clamp(50px, 7vw, 90px);

    color: var(--off-white);
    background: var(--blue-dark);
}

.about-section > .about-image,
.about-section > .section-content {
    transform: translateY(-200px);
    z-index: 3;
}


/* =========================================================
   RUNDES BILD
   ========================================================= */

.about-image {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 420px;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    aspect-ratio: 1 / 1;

    overflow: hidden;
    border-radius: 50%;
}

.about-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 25%;

    border-radius: 50%;
}


/* =========================================================
   TEXT RECHTS
   ========================================================= */

.about-section .section-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 550px;

    margin: 0;

    text-align: left;
}

.about-section h2 {
    margin-bottom: 10px;

    color: var(--off-white);

    font-size: clamp(2.5rem, 5vw, 4.5rem);

    line-height: 0.9;
}

.about-section p {
    width: 100%;

    max-width: 850px;

    margin: 0 0 20px;

    color: var(--off-white);

    font-size: 1rem;

    line-height: 1.25;
}

.about-section .button {
    margin-top: 0;

    min-width: 0;
    min-height: 62px;

    background: var(--blue);

    color: var(--off-white);

    font-size: 1rem;
}

.about-section .button:hover {
    background: var(--blue-soft);
    color: var(--blue-dark);
}


/* =========================================================
   9. REFERENZEN VORSCHAU
   ========================================================= */

.references-preview {
    position: relative;
    z-index: 2;

    margin-top: -200px;

    padding:
        var(--section-padding)
        max(30px, calc((100% - var(--content-width)) / 2));

    background:
        linear-gradient(
            180deg,
            var(--off-white),
            #dceff2
        );
}

.section-heading {
    margin-bottom: 40px;
}

.section-heading h2 {
    margin-bottom: 10px;
}

.reference-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 30px;
}

.reference-card {
    overflow: hidden;

    background: var(--off-white);

    border-radius: var(--radius-medium);

    box-shadow: var(--shadow-soft);
}

.reference-card .image-placeholder {
    width: 100%;
    aspect-ratio: 4 / 3;

    background: rgba(4, 3, 47, 1);

    display: flex;
    align-items: center;
    justify-content: center;

    color: var(--off-white);
    font-weight: 700;
}

.reference-card h3,
.reference-card p {
    margin-left: 25px;
    margin-right: 25px;
}

.reference-card h3 {
    margin-top: 25px;
}

.reference-card p {
    margin-top: 10px;
    margin-bottom: 25px;

    color: #526875;
}

.section-button {
    margin-top: 50px;

    text-align: center;
}


/* =========================================================
   10. CALL TO ACTION
   ========================================================= */

.cta-section {
    position: relative;

    padding:
        60px
        max(30px, calc((100% - var(--content-width)) / 2));

    color: var(--off-white);

    background:
        radial-gradient(
            circle at 20% 30%,
            var(--blue-light),
            transparent 35%
        ),
        var(--blue-dark);

    overflow: hidden;
}

.cta-content {
    position: relative;
    z-index: 2;

    max-width: 800px;
}

.cta-content h2 {
    margin-bottom: 30px;
}

.cta-content p {
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.85);
}

.cta-content .button {
    margin-top: 20px;
}


/* =========================================================
   11. FOOTER
   ========================================================= */

.site-footer {
    padding:
        50px
        max(30px, calc((100% - var(--content-width)) / 2))
        25px;

    color: var(--off-white);

    background: #041f35;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;
}

.footer-brand p {
    margin-top: 15px;

    color: rgba(255, 255, 255, 0.7);
}

.footer-navigation {
    display: flex;
    flex-wrap: wrap;

    gap: 30px;
}

.footer-navigation a {
    color: rgba(255, 255, 255, 0.8);

    transition: var(--transition);
}

.footer-navigation a:hover {
    color: var(--magenta);
}


/* =========================================================
   LINKEDIN ICON
   ========================================================= */

.linkedin-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;

    transition: var(--transition);
}

.linkedin-icon {
    display: block;

    width: 60px;
    height: 60px;

    max-width: none;

    object-fit: contain;
}

.linkedin-link:hover {
    transform: translateY(-3px);
}

.footer-bottom {
    margin-top: 60px;
    padding-top: 20px;

    border-top:
        1px solid
        rgba(255, 255, 255, 0.15);
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.5);

    font-size: 0.85rem;
}


/* =========================================================
   12. ALLGEMEINE BILDPLATZHALTER
   ========================================================= */

.image-placeholder {
    background: rgba(4, 3, 47, 1);
}


/* =========================================================
   13. FOCUS / BARRIEREARMUT
   ========================================================= */

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--magenta);
    outline-offset: 4px;
}


/* =========================================================
   HAI-PAKETE / LEISTUNGEN
   ========================================================= */


/* =========================================================
   14. PAKETE HERO
   ========================================================= */

.packages-intro {
    min-height: 850px;

    padding:
        250px
        max(30px, calc((100% - var(--content-width)) / 2))
        100px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: clamp(40px, 6vw, 80px);

    color: var(--white);

    background:
        radial-gradient(
            circle at 20% 30%,
            var(--blue-light),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );
}

.packages-intro-content {
    max-width: 600px;
}

.packages-intro-content h1 {
    margin-bottom: 20px;

    line-height: 1;
}

.packages-intro-content p {
    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.88);
}

.packages-intro-image {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* =========================================================
   15. PAKET SEKTIONEN
   ========================================================= */

.package-section {
    position: relative;

    width: 100%;
    min-height: 450px;

    padding:
        40px
        max(30px, calc((100% - var(--content-width)) / 2));

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(40px, 6vw, 80px);

    overflow: hidden;
}

.package-content {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 500px;
}

.package-zebrahai {
    background: var(--off-white);
}

.package-fuchshai {
    background: #dceff2;
}

.package-hammerhai {
    background: var(--off-white);
}

.package-weisser-hai {
    background: #dceff2;
}

.package-walhai {
    background: var(--off-white);
}

.package-walhai .package-shark-placeholder {
    transform: scale(1.5);
}

.package-content .eyebrow {
    color: var(--blue-light);
}

.package-content h2 {
    margin-bottom: 15px;

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

.package-content h3 {
    margin-bottom: 25px;

    color: var(--blue);
}

.package-content p {
    margin-bottom: 20px;

    color: #526875;
}


/* =========================================================
   16. PAKET LEISTUNGEN
   ========================================================= */

.package-services {
    margin-top: 30px;

    list-style: none;
}

.package-services li {
    position: relative;

    margin-bottom: 12px;

    padding-left: 30px;

    color: var(--blue-dark);

    font-weight: 600;
}

.package-services li::before {
    content: "";

    position: absolute;

    left: 5px;
    top: 9px;

    width: 9px;
    height: 9px;

    background: var(--blue-light);

    border-radius: 50%;
}

.package-services li span {
    display: inline;

    font-weight: 400;

    color: #526875;
}


/* =========================================================
   17. PAKETE ABSCHLUSS
   ========================================================= */

.package-standard {
    position: relative;

    padding:
        70px
        max(30px, calc((100% - var(--content-width)) / 2));

    color: var(--white);

    background:
        radial-gradient(
            circle at 80% 30%,
            var(--blue-light),
            transparent 35%
        ),
        var(--blue-dark);

    overflow: hidden;
}

.package-standard-content {
    position: relative;
    z-index: 2;

    max-width: 800px;

    margin: 0;

    text-align: left;
}

.package-standard h2 {
    margin-bottom: 30px;

    color: var(--off-white);
}

.package-standard p {
    margin: 0 0 20px;

    color: rgba(255, 255, 255, 0.85);
}

.package-standard .button {
    margin-top: 10px;

    background: var(--blue);

    color: var(--off-white);
}


/* =========================================================
   HAILIGHT - REFERENZEN
   ========================================================= */


/* =========================================================
   18. REFERENZEN HERO
   ========================================================= */

.references-hero {
    position: relative;

    min-height: 450px;

    padding:
        250px
        max(30px, calc((100% - var(--content-width)) / 2))
        120px;

    display: grid;

    grid-template-columns: 1fr 1fr;

    align-items: center;

    gap: clamp(40px, 6vw, 80px);

    color: var(--white);

    background:
        radial-gradient(
            circle at 80% 30%,
            var(--blue-light),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            var(--blue-dark),
            var(--blue)
        );

    overflow: hidden;
}

.references-hero-content {
    position: relative;
    z-index: 2;

    max-width: 650px;
}

.references-hero-content h1 {
    margin-bottom: 20px;

    line-height: 1;
}

.references-hero-content p {
    max-width: 550px;

    color: rgba(255, 255, 255, 0.88);

    font-size: 1.1rem;

    line-height: 1.2;
}

.references-hero-content .eyebrow {
    color: var(--blue-soft);
}

.references-hero-image {
    position: relative;
    z-index: 2;

    display: flex;

    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* =========================================================
   19. REFERENZEN BEREICH
   ========================================================= */

.references-section {
    padding:
        60px
        max(30px, calc((100% - var(--content-width)) / 2));

    background:
        linear-gradient(
            180deg,
            var(--off-white),
            #dceff2
        );
}


/* =========================================================
   REFERENZEN ÜBERSCHRIFT
   ========================================================= */

.references-heading {
    position: relative;

    width: 100%;
    max-width: 1200px;

    margin-bottom: 60px;
}

.references-heading-text {
    width: 100%;
    max-width: 850px;
}

.references-heading .eyebrow {
    color: var(--blue-light);
}

.references-heading h2 {
    margin-bottom: 10px;

    color: var(--blue-dark);

    line-height: 1.1;
}

.references-heading p {
    max-width: 700px;

    color: #526875;

    font-size: 1.1rem;

    line-height: 1.2;
}


/* =========================================================
   HAI RECHTS NEBEN ÜBERSCHRIFT
   ========================================================= */

.references-heading-shark {
    position: absolute;

    right: 90px;
    top: 65%;

    transform: translateY(-50%);

    display: flex;

    align-items: center;
    justify-content: center;
}

.references-heading-shark img {
    display: block;

    width: 200px;
    height: auto;
}


/* =========================================================
   20. REFERENZ PROJEKTE
   ========================================================= */

.reference-project {
    position: relative;

    margin-bottom: 60px;

    display: grid;

    grid-template-columns: 1.15fr 0.85fr;

    align-items: center;

    gap: clamp(50px, 7vw, 90px);
}

.reference-project:last-child {
    margin-bottom: 0;
}

.reference-project-reverse {
    grid-template-columns: 0.85fr 1.15fr;
}

.reference-project-reverse .reference-project-image {
    order: 2;
}

.reference-project-reverse .reference-project-content {
    order: 1;
}


/* =========================================================
   21. REFERENZ BILDER
   ========================================================= */

.reference-project-image {
    position: relative;

    width: 100%;
}

.reference-project-image img {
    display: block;

    width: 100%;

    aspect-ratio: 4 / 3;

    object-fit: cover;

    border-radius: var(--radius-large);
}

.reference-image-placeholder {
    width: 100%;

    aspect-ratio: 4 / 3;

    display: flex;

    align-items: center;
    justify-content: center;

    background: var(--magenta);

    border-radius: var(--radius-large);

    color: var(--off-white);

    font-size: 0.9rem;
    font-weight: 700;

    box-shadow: var(--shadow-soft);

    transition:
        transform var(--transition),
        box-shadow var(--transition);
}

.reference-project:hover .reference-image-placeholder {
    transform: translateY(-8px);

    box-shadow:
        0 25px 50px rgba(0, 0, 0, 0.16);
}


/* =========================================================
   22. REFERENZ CAROUSEL
   ========================================================= */

.reference-carousel {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    border-radius: var(--radius-large);

    background: rgba(4, 3, 47, 1);

    box-shadow: var(--shadow-soft);
}

.carousel-track {
    position: relative;

    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    transition: opacity 0.4s ease;

    pointer-events: none;
}

.carousel-slide.active {
    opacity: 1;

    pointer-events: auto;
}

.carousel-slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* =========================================================
   CAROUSEL PFEILE
   ========================================================= */

.carousel-button {
    position: absolute;

    top: 50%;

    transform: translateY(-50%);

    z-index: 5;

    width: 48px;
    height: 48px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: none;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.9);

    color: var(--blue-dark);

    font-size: 2rem;

    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 5px 20px rgba(0, 0, 0, 0.15);

    transition:
        transform var(--transition),
        background var(--transition);
}

.carousel-button:hover {
    background: var(--white);

    transform:
        translateY(-50%)
        scale(1.08);
}

.carousel-button-prev {
    left: 20px;
}

.carousel-button-next {
    right: 20px;
}


/* =========================================================
   CAROUSEL PUNKTE
   ========================================================= */

.carousel-dots {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 18px;
}

.carousel-dot {
    width: 10px;
    height: 10px;

    padding: 0;

    border: none;
    border-radius: 50%;

    background: var(--blue-light);

    opacity: 0.4;

    cursor: pointer;

    transition:
        transform var(--transition),
        opacity var(--transition);
}

.carousel-dot.active {
    opacity: 1;

    transform: scale(1.3);

    background: var(--blue);
}


/* =========================================================
   HAI ÜBER WANNADOS
   ========================================================= */

.wannados-shark {
    position: relative;

    height: 0;

    z-index: 3;
}

.wannados-shark img {
    position: absolute;

    width: 220px;
    height: auto;

    left: -120px;
    bottom: 40px;
}


/* =========================================================
   23. REFERENZ TEXTE
   ========================================================= */

.reference-project-content {
    max-width: 520px;
}

.reference-project-content h2 {
    margin-bottom: 10px;

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

.reference-project-content p {
    margin-bottom: 15px;

    color: #526875;

    font-size: 1.05rem;

    line-height: 1.2;
}

.reference-project-services {
    color: var(--blue);

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.03em;
}


/* =========================================================
   24. REFERENZEN CTA
   ========================================================= */

.references-cta {
    position: relative;

    padding:
        100px
        max(30px, calc((100% - var(--content-width)) / 2));

    color: var(--off-white);

    background:
        radial-gradient(
            circle at 20% 30%,
            var(--blue-light),
            transparent 35%
        ),
        var(--blue-dark);

    overflow: hidden;
}

.references-cta-content {
    position: relative;
    z-index: 2;

    max-width: 550px;
}

.references-cta-content h2 {
    margin-bottom: 15px;

    color: var(--off-white);
}

.references-cta-content p {
    max-width: 650px;

    margin-bottom: 20px;

    color: rgba(255, 255, 255, 0.85);

    font-size: 1.05rem;

    line-height: 1.2;
}

.references-cta-content .button {
    margin-top: 25px;
}


/* =========================================================
   =========================================================
   25. TABLET
   =========================================================
   max-width: 900px
   =========================================================
   ========================================================= */

@media (max-width: 900px) {

    /* =====================================================
       GRUNDWERTE
       ===================================================== */

    :root {
        --section-padding: 80px;
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .navigation {
        width: calc(100% - 50px);
    }

    .navigation-list {
        gap: 25px;
    }

    .logo-image {
        width: 110px;
    }


    /* =====================================================
       HERO
       ===================================================== */

    .hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            160px
            max(40px, 6vw)
            180px;

        text-align: center;
    }

    .hero-content {
        max-width: 750px;

        margin: 0 auto;
    }

    .hero-text {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-image {
        margin-top: 20px;
    }

    .hero-image-person {
        width: min(430px, 70vw);
    }


    /* =====================================================
       VALUES
       ===================================================== */

    .values-section {
        position: relative;
        z-index: 3;

        margin-top: -170px;

        padding:
            70px
            max(30px, calc((100% - var(--content-width)) / 2))
            90px;

        background:
            linear-gradient(
                to bottom,
                transparent 170px,
                var(--blue-light) 170px
            );
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 35px;
    }

    .value-icon {
        top: 50px;
    }

    .value-content {
        top: 50px;
    }

    .value-content h3 {
        font-size: 1.7rem;
    }

    .value-content p {
        font-size: 1.05rem;
    }


    /* =====================================================
       ÜBER MICH
       ===================================================== */

    .about-section {
        grid-template-columns: 320px minmax(0, 1fr);

        gap: 45px;

        padding:
            60px
            max(40px, 6vw)
            50px;
    }

    .about-section > .about-image,
    .about-section > .section-content {
        transform: translateY(-130px);
    }

    .about-image {
        max-width: 320px;
    }

    .about-section h2 {
        font-size: clamp(2.5rem, 6vw, 4rem);
    }


    /* =====================================================
       REFERENZEN VORSCHAU
       ===================================================== */

    .reference-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .footer-content {
        align-items: flex-start;

        flex-direction: column;
    }


    /* =====================================================
       PAKETE HERO
       ===================================================== */

    .packages-intro {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            160px
            max(40px, 6vw)
            100px;

        text-align: center;
    }

    .packages-intro-content {
        max-width: 750px;

        margin: 0 auto;
    }

    .packages-intro-content p {
        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       PAKETE
       ===================================================== */

    .package-section {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            80px
            max(40px, 6vw);

        text-align: center;
    }

    .package-content {
        max-width: 650px;

        margin: 0 auto;
    }

    .package-shark-placeholder {
        order: 2;
    }

    .package-services {
        display: inline-block;

        text-align: left;
    }

    .package-fuchshai .package-content,
    .package-weisser-hai .package-content {
        order: 1;
    }

    .package-fuchshai .package-shark-placeholder,
    .package-weisser-hai .package-shark-placeholder {
        order: 2;
    }


    /* =====================================================
       PAKETE ABSCHLUSS
       ===================================================== */

    .package-standard {
        padding:
            80px
            max(40px, 6vw);
    }


    /* =====================================================
       REFERENZEN HERO
       ===================================================== */

    .references-hero {
        grid-template-columns: 1fr;

        min-height: auto;

        padding:
            160px
            max(40px, 6vw)
            100px;

        text-align: center;
    }

    .references-hero-content {
        max-width: 750px;

        margin: 0 auto;
    }

    .references-hero-content p {
        margin-left: auto;
        margin-right: auto;
    }

    .references-hero-image {
        margin-top: 30px;
    }

    .reference-main-placeholder {
        width: min(430px, 70vw);
    }


    /* =====================================================
       REFERENZEN BEREICH
       ===================================================== */

    .references-section {
        padding:
            90px
            max(40px, 6vw);
    }

    .references-heading {
        margin-bottom: 70px;
    }

    .references-heading-shark {
        right: 0;

        opacity: 0.9;
    }


    /* =====================================================
       REFERENZ PROJEKTE
       ===================================================== */

    .reference-project,
    .reference-project-reverse {
        grid-template-columns: 1fr;

        gap: 45px;

        margin-bottom: 90px;
    }

    .reference-project-reverse .reference-project-image {
        order: 1;
    }

    .reference-project-reverse .reference-project-content {
        order: 2;
    }

    .reference-project-content {
        max-width: 700px;

        margin: 0 auto;
    }

    .reference-project::before,
    .reference-project-reverse::before {
        display: none;
    }


    /* =====================================================
       WANNADOS HAI
       ===================================================== */

    .wannados-shark img {
        width: 190px;

        left: -80px;
    }


    /* =====================================================
       REFERENZEN CTA
       ===================================================== */

    .references-cta {
        padding:
            100px
            max(40px, 6vw);
    }
}


/* =========================================================
   RECHTLICHE SEITEN
   Datenschutz / Impressum
   ========================================================= */

.legal-page {
    width: min(100% - 40px, 900px);

    margin: 0 auto;

    padding:
        180px
        0
        100px;

    color: var(--off-white);
}


/* =========================================================
   ÜBERSCHRIFTEN
   ========================================================= */

.legal-page h1 {
    margin-bottom: 50px;

    color: var(--off-white);

    font-family: "rl-aqva", sans-serif;
    font-size: clamp(3rem, 7vw, 5.5rem);
    font-weight: 700;
    line-height: 0.9;
}

.legal-page h2 {
    margin-top: 55px;
    margin-bottom: 20px;

    color: var(--off-white);

    font-family: "rl-aqva", sans-serif;
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1;
}

.legal-page h3 {
    margin-top: 30px;
    margin-bottom: 10px;

    color: var(--blue-light);

    font-family: "Pacaembu", Helvetica, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   TEXT
   ========================================================= */

.legal-page p {
    max-width: 800px;

    margin-bottom: 18px;

    color: var(--off-white);

    font-family: "Pacaembu", Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}


/* =========================================================
   LISTEN
   ========================================================= */

.legal-page ul {
    max-width: 800px;

    margin:
        10px
        0
        25px
        25px;

    padding-left: 20px;

    color: var(--off-white);

    font-family: "Pacaembu", Helvetica, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
}

.legal-page li {
    margin-bottom: 8px;
}


/* =========================================================
   ADRESSE
   ========================================================= */

.legal-page address {
    max-width: 800px;

    margin-bottom: 20px;

    color: var(--off-white);

    font-family: "Pacaembu", Helvetica, sans-serif;
    font-size: 1rem;
    font-style: normal;
    line-height: 1.6;
}


/* =========================================================
   LINKS
   ========================================================= */

.legal-page a {
    color: var(--blue-light);

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;

    transition: var(--transition);
}

.legal-page a:hover {
    color: var(--magenta);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 650px) {

    .legal-page {
        width: calc(100% - 40px);

        padding:
            130px
            0
            70px;
    }

    .legal-page h1 {
        margin-bottom: 35px;

        font-size: clamp(2.7rem, 14vw, 4rem);
    }

    .legal-page h2 {
        margin-top: 45px;

        font-size: clamp(2rem, 10vw, 2.8rem);
    }

    .legal-page h3 {
        font-size: 1.15rem;
    }

    .legal-page p,
    .legal-page ul,
    .legal-page address {
        font-size: 0.95rem;
        line-height: 1.55;
    }
}



/* =========================================================
   =========================================================
   26. MOBILE
   =========================================================
   max-width: 650px
   =========================================================
   ========================================================= */

@media (max-width: 650px) {

    /* =====================================================
       GRUNDWERTE
       ===================================================== */

    :root {
        --section-padding: 65px;
    }


    /* =====================================================
       ALLGEMEINE TYPOGRAFIE
       ===================================================== */

    h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }

    h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }


    /* =====================================================
       NAVIGATION
       ===================================================== */

    .navigation {
        width: calc(100% - 40px);

        min-height: 80px;

        position: relative;
        z-index: 1001;
    }

    .navigation-list {
        display: none;
    }

    .mobile-menu-button {
        position: relative;

        z-index: 1002;

        display: block;
    }

    .logo-image {
        width: 100px;
    }

    .header-wave {
        height: 170px;
    }


    /* =====================================================
       GEÖFFNETES MOBILE MENÜ
       ===================================================== */

    .navigation-list.mobile-menu-open {
        position: absolute;

        top: 80px;
        left: 50%;

        transform: translateX(-50%);

        width: 100vw;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;

        gap: 30px;

        padding: 45px 20px 50px;

        background: var(--blue-dark);

        list-style: none;

        z-index: 1000;
    }

    .navigation-list.mobile-menu-open a {
        color: var(--off-white);

        font-size: 1.4rem;
        font-weight: 700;

        text-align: center;
    }

    .navigation-list.mobile-menu-open a:hover {
        color: var(--blue-light);
    }

    .mobile-menu-button span {
        transition:
            transform 0.3s ease,
            opacity 0.3s ease;
    }

    .mobile-menu-button.menu-open span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .mobile-menu-button.menu-open span:nth-child(2) {
        opacity: 0;
    }

    .mobile-menu-button.menu-open span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    body.menu-is-open {
        overflow: hidden;
    }


/* =====================================================
   HERO-BILDER AUF MOBILE
   Hai/Bild immer über dem Text zentrieren
   ===================================================== */

.hero,
.packages-intro,
.references-hero {
    display: grid;
    grid-template-columns: 1fr;
}

/* Bild kommt nach oben */
.hero-image,
.packages-intro-image,
.references-hero-image {
    order: 1;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto;
}

/* Text kommt darunter */
.hero-content,
.packages-intro-content,
.references-hero-content {
    order: 2;

    width: 100%;
    max-width: 750px;

    margin-left: auto;
    margin-right: auto;
}

/* Eigentliche Bilder zentrieren */
.hero-image img,
.packages-intro-image img,
.references-hero-image img {
    display: block;

    margin-left: auto;
    margin-right: auto;
}

    .hero-about-wave {
        margin-top: -100px;
    }


    /* =====================================================
       VALUES
       ===================================================== */

    .values-section {
        position: relative;
        z-index: 3;

        margin-top: -170px;

        padding:
            70px
            max(30px, calc((100% - var(--content-width)) / 2))
            90px;

        background:
            linear-gradient(
                to bottom,
                transparent 170px,
                var(--blue-light) 170px
            );
    }

    .values-grid {
        grid-template-columns: 1fr;

        gap: 45px;
    }

    .value-card {
        min-height: auto;

        align-items: center;
    }

    .value-icon {
        top: 50px;
    }

    .value-content {
        top: 50px;
    }

    .value-content h3 {
        font-size: 1.8rem;
    }

    .value-content p {
        max-width: 300px;

        font-size: 1rem;
    }


    /* =====================================================
       ÜBER MICH
       ===================================================== */

    .about-section {
        grid-template-columns: 1fr;

        gap: 35px;

        padding:
            60px
            20px
            70px;

        text-align: center;
    }

    .about-section > .about-image,
    .about-section > .section-content {
        transform: none;
    }

    .about-image {
        width: min(320px, 80vw);

        max-width: none;

        margin: 0 auto;
    }

    .about-section .section-content {
        max-width: 100%;

        margin: 0 auto;

        text-align: left;
    }

    .about-section h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .about-section p {
        font-size: 1rem;
    }


    /* =====================================================
       REFERENZEN VORSCHAU
       ===================================================== */

    .references-preview {
        margin-top: 0;

        padding:
            var(--section-padding)
            20px;
    }

    .reference-grid {
        grid-template-columns: 1fr;
    }


    /* =====================================================
       CTA
       ===================================================== */

    .cta-section {
        padding:
            70px
            20px;
    }

    .cta-content h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .cta-content .button,
    .references-cta-content .button {
        background: var(--blue-light);
        color: var(--blue-dark);
    }


    /* =====================================================
       FOOTER
       ===================================================== */

    .site-footer {
        padding:
            60px
            20px
            25px;
    }

    .footer-navigation {
        flex-direction: column;

        gap: 15px;
    }

    .linkedin-icon {
        width: 50px;
        height: 50px;
    }


    /* =====================================================
       PAKETE HERO
       ===================================================== */

    .packages-intro {
        padding:
            130px
            20px
            80px;
    }

	.packages-intro-image img {
    width: min(320px, 75vw);
    height: auto;
}
	
	
    .packages-intro-content h1 {
        font-size: clamp(2.7rem, 14vw, 4.5rem);
    }


    /* =====================================================
       PAKETE – WALHAI
       ===================================================== */

    .package-walhai .package-shark-placeholder {
        transform: scale(1.1);
    }


    /* =====================================================
       REFERENZEN HERO
       ===================================================== */

    .references-hero {
        padding:
            130px
            20px
            80px;
    }

		
    .references-hero-image {
        order: 1;

        width: auto;

        display: flex;

        justify-content: center;
        align-items: center;

        margin: 0;

        justify-self: center;
        align-self: center;
    }

    .references-hero-content {
        order: 2;

        width: 100%;
        max-width: 100%;

        margin: 0 auto;
    }

	.references-hero-image img {
    width: min(320px, 75vw);
    height: auto;
}
	
    .references-hero-content h1 {
        margin-bottom: 20px;

        font-size: clamp(2.7rem, 14vw, 4.5rem);

        line-height: 0.9;
    }

    .references-hero-content p {
        max-width: 100%;

        margin-left: auto;
        margin-right: auto;
    }

    .reference-main-placeholder {
        width: min(280px, 75vw);

        margin-left: auto;
        margin-right: auto;
    }


    /* =====================================================
       REFERENZEN BEREICH
       ===================================================== */

    .references-section {
        padding:
            70px
            20px;
    }

    .references-heading {
        margin-bottom: 60px;
    }

    .references-heading-text {
        max-width: 100%;
    }

    .references-heading h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .references-heading p {
        font-size: 1rem;
    }


    /* =====================================================
       HAI NEBEN ÜBERSCHRIFT
       ===================================================== */

    .references-heading-shark {
        position: relative;

        right: auto;
        top: auto;

        transform: none;

        margin-top: 30px;
    }

    .references-heading-shark img {
        width: 160px;
    }


    /* =====================================================
       REFERENZ PROJEKTE
       ===================================================== */

    .reference-project,
    .reference-project-reverse {
        gap: 30px;

        margin-bottom: 75px;
    }

    .reference-image-placeholder {
        border-radius: var(--radius-medium);
    }

    .reference-carousel {
        border-radius: var(--radius-medium);
    }

    .reference-project-content {
        max-width: 100%;
    }

    .reference-project-content h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }

    .reference-project-content p {
        font-size: 1rem;
    }


    /* =====================================================
       CAROUSEL
       ===================================================== */

    .carousel-button {
        width: 42px;
        height: 42px;

        font-size: 1.6rem;
    }

    .carousel-button-prev {
        left: 10px;
    }

    .carousel-button-next {
        right: 10px;
    }


    /* =====================================================
       WANNADOS HAI – MOBILE AUSBLENDEN
       ===================================================== */

    .wannados-shark {
        display: none;
    }


    /* =====================================================
       REFERENZEN CTA
       ===================================================== */

    .references-cta {
        padding:
            85px
            20px;
    }

    .references-cta-content h2 {
        font-size: clamp(2.2rem, 11vw, 3.5rem);
    }
}