/* ------------------------------------------------------ Allgemeine/Master Infos ----------------------------------------------------- */

:root{
    /*-------------------Farben-------------------*/
    --primary-color: #121726; /*Schrift + Akzente*/
    --secondary-color: #4097A2; /*Blau 1*/
    --tertiary-color: #9FC9CB; /*Blau 2*/
    --background-color: #FFFBF4; /*Hintergrund*/

    /*-------------------Schriftarten-------------------*/
    --font-primary: 'Ephesis', sans-serif; /*Überschriften*/
    --font-secondary: 'Crimson Text', serif; /*Fliesstext*/
}

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

body {
    /*---------- Hintergrund ----------------*/
    background-color: var(--background-color);

    --grad-1: rgba(64,151,162,0.5); 
    --grad-2: rgba(255,251,244,1);    
    --grad-3: rgba(255,251,244,1);    
    --grad-4: rgba(159,201,203,0.6); 
    --grad-5: rgba(64,151,162,0.6);   

    --grad-1-pos: 16.5%;
    --grad-2-pos: 18.5%;
    --grad-3-pos: 52.5%;
    --grad-4-pos: 58%;
    --grad-5-pos: 90%;

    background-image: linear-gradient(
    180deg,
    var(--grad-1) var(--grad-1-pos),
    var(--grad-2) var(--grad-2-pos),
    var(--grad-3) var(--grad-3-pos),
    var(--grad-4) var(--grad-4-pos),
    var(--grad-5) var(--grad-5-pos)
    );

    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
}

/*--------- Verhalten der Seite------------- */
    html, body {
        overflow-x: hidden;
        overscroll-behavior-x: none;
    }

/*------ Zur Sicherhiet der Bilder ------------*/
    img, svg {
        max-width: 100%;
        height: auto;
        display: block;
    }

/*-------------------Schriftgrössen -------------------*/
    h1, h2, h3, p {
        font-style: normal;
        color: var(--primary-color);
    }

    h1 {
        font-family: var(--font-primary);
        font-size: 4rem;
        font-weight: 400;
    }

    h2 {
        font-family: var(--font-secondary);
        font-size: 1rem; 
    }

    h3 {
        font-family: var(--font-primary);
        font-size: 1.8rem;
        font-weight: 400;
    }

    p {
        font-family: var(--font-secondary);
        font-size: 1rem;
    }
/*-------------------------------------------------------- HEADER ----------------------------------------------------------*/

    header {
        display: flex;
        max-height: 6.9rem;
        align-items: center;
    }

    header img {    
        height: 17%;
        width: 17%;
        padding: 0.3rem;
        margin: 0.6rem 0 1.25rem 0.6rem;
    }

/*--------------------------------------------- LANDING SECTION (WESTE) ------------------------------------------------------*/

.welcome {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 1.25rem;
    min-height: 21rem; 
    transform: translateY(-15%);
    z-index: 1;
    position: relative;
}

.title {
    z-index: 2;
    position: relative;
    max-width: 100%;
    display: block;
    text-align: center;
    margin-bottom: 1.25rem;
}

.title h1 {
    line-height: 1.0;
}

.swimmwest img{
    position: absolute;
    transform: translate(-49%, -110%) scale(3);
    opacity: 0.95;
    z-index: 1;
}

/* ---Tagline/Slogan und Wellen-Icon--- */
.tagline {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.25rem;
}

.tagline h2 {
    margin: 0;
    font-weight: bold;
    z-index: 2;  
}

.tagline img {
    width: 13%;
    height: 13%;
    display: block;
    z-index: 2;  
}

/*----------------------------------------------------- KARTE -------------------------------------------------------*/

.map {
    max-height: 31.25rem;
}

.map h3 {
   margin-left: 0.94rem;
   margin-bottom: 0.63rem;
   padding: 0.32rem;
}

.map img {         
    object-fit: cover;        
    object-position: center; 
    transform: scale(1.09) translateY(-25%); /*Zoom und Verschiebung*/
    transform-origin: center center;
}

/*-------------------------------------------- DIAGRAMM -------------------------------------------------------------------------*/

.diagrammTitle h3 {
   margin-left: 0.94rem;
   margin-bottom: 0.63rem;
   margin-top: -3.75rem;
   padding: 0.31rem;
}

/*Bootgrösse für Diagramm (Chart.js Punkte)*/
:root {
    --boat-size: 10; /*Standardgrösse für Mobile*/
}

/* Canvas-Container für responsives Verhalten */
.diagramm {
    position: relative;
    width: 100%;
    max-width: 50rem;
    min-height: 20rem;
    margin: 0 auto;
    padding: 1rem;
}

/*----Zeitraum-Auswahl-Menü stylen----*/
.chart-menu {
    /*position: absolute;*/
    top: 0.63rem;
    right: 0.63rem;
    z-index: 100;
    background-color: var(--background-color);
    backdrop-filter: blur(0.25rem);
    padding: 0.38rem 0.75rem;
    border-radius: 0.13rem;
    border: 1px solid #4097A2;
    font-family: var(--font-secondary);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.38rem;
}

.chart-menu select {
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.13rem;
}

.chart-menu label {
    font-size: 0.8rem;
    margin-right: 0.25rem;
}

.chart-menu button {
    font-size: 0.8rem;
    padding: 0.19rem 0.38rem;
    background-color: var(--tertiary-color);
    border: none;
    border-radius: 2px;
    cursor: pointer;
}

/*---Diagramm-Wellenstyling für Background---*/

/*Wellen-Container styling*/
.diagramm .waves {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

/*Jede Welle*/
.diagramm .wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    margin: 0 auto;
    padding: 1rem;
    /* z-index: 0; */
}

.wave.desktop svg,
.wave.mobile svg {
    width: 100%;
    height: auto;
}

/* Layer-Reihenfolge */
.wave1 { 
    z-index: 1; top: 0; 
}     /* hellste oben */

.wave2 { 
    z-index: 2; top: 30%; 
}   /* mittlere */

.wave3 { 
    z-index: 3; top: 60%; 
}   /* dunkelste unten */

canvas#diagramm {
    /*position: absolute;*/
    position: relative;
    z-index: 10; /* Über den Wellen */
    width: 100% !important;
    min-height: fit-content !important;
    /*height: auto !important;*/
    padding-left: 1.88rem;
    padding-bottom: 2.81rem;
    padding-right: 1.88rem;
}

/*----Pop-Up Styling----*/

/* --- Popup Overlay --- */
#popup-overlay {
    /*position: absolute;*/
    position: fixed;
    width: 100%;
    height: 100%;
    inset: 0;
    background: transparent;
    backdrop-filter: blur(0.25rem);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    transition: opacity 0.3s ease;
    pointer-events: auto;
}

.popup-wellen {
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    fill: #4097A2;
}

#popup-overlay.hidden {
    opacity: 0;
    pointer-events: none !important;
}

#popup-overlay.hidden * {
    pointer-events: none !important;
}

#popup-content {
    position: relative;
    background: #FFFBF4;
    border-radius: 1rem;
    padding: 2rem;
    max-width: 25rem;
    width: 90%;
    /* box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); */
    text-align: left;
    transition: opacity 0.2s ease;
    opacity: 1;
    pointer-events: all;
}

#popup-content h3 {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary-color);
    margin-bottom: 1rem;
}

#popup-content p {
    font-family: var(--font-secondary);
    font-size: 1rem;
    margin: 0.3rem 0;
    color: #121726;
}

#popup-water-text, #popup-flow-text {
    font-family: var(--font-primary);
    font-size: 1.5rem;
}

.popup-close {
    position: absolute;
    top: 0.8rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--primary-color);
    cursor: pointer;
    transition: transform 0.2s ease;
}

.popup-close:hover {
    transform: scale(1.2);
} 

/*--------------------------------------------TRANSPARENZ-HINWEIS -----------------------------------------------*/

.transparenz {
    padding: 0.31rem 0.94rem 0.31rem 0.94rem;
}

.transparenz p {
    font-size: 0.85rem;
}

/*-------------------------------------------- JOURNI - TEXT ----------------------------------------------------------------*/

.flowText{
    margin-top: 1.25rem;
    margin-bottom: 1.25rem;
}

.flowText h3 {
    margin-left: 0.94rem;
    margin-bottom: 0.63rem;
    padding: 0.31rem;
}

.paragraphs {
    display: flex;
    flex-direction: column;
    margin-left: 0.94rem;
    margin-right: 0.94rem;
    padding: 0.31rem;
}

.paragraphs p {
    margin: 0.63rem 0;
}

.paragraphs p a {
    color: var(--primary-color);
    text-decoration: underline;
}

/*-------------------------------------------------------- FOOTER -----------------------------------------------------------------------*/

footer {
    /* full-bleed background */
    background-color: var(--background-color);
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    /* Abstände beibehalten */
    flex-wrap: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    border-top: 2px solid var(--primary-color);
}

footer::before {
    content: "";
    /*position: absolute;*/
    left: calc(33% + 0.5rem);
    top: 5%;
    bottom: 5%;            
    width: 0.13rem;
    background: var(--primary-color);
    border-radius: 0.13rem;
    opacity: 1;
    pointer-events: none;
    z-index: 9999;
}

footer img {
    flex: 0 0 33.3333%;
    width: 33.3333%;
    height: auto;
    display: block;
    object-fit: contain;
    margin: 0;
}

footer p {
    flex: 1 1 66%;
    width: 66%;
    margin-left: 0.19rem;
    margin-right: 0.19rem;
    text-align: left;
    font-size: 0.8rem;
    overflow-wrap: break-word;
}

footer p a {
    color: var(--primary-color);
    text-decoration: underline;
}

/*---------------------------------------------- MEDIA-QUERIES -------------------------------------------------------------------*/

/* ----------------- Base (phone) ----------------- */
@media (min-width:0px) {
    #waveDarkDesktop, #waveMediumDesktop, #waveBrightDesktop { 
        display: none; 
    }
    :root {
        --boat-size: 1;
    }
}

/* ----------------------- In between für Responsiveness ----------------------------------*/
@media (min-width: 480px) and (max-width: 767.98px) {
    h1 { font-size: 4.3rem; }
    h2 { font-size: 1.15rem; }
    h3 { font-size: 2rem; }
    p  { font-size: 1.2rem; }

    header img {
        max-height: 5rem;
        max-width: 5rem;
    }

    .swimmwest img {
        max-width: 13.75rem;
        max-height: 16.25rem;
    }

    .tagline img {
        max-width: 8.13rem;
        max-height: 3.13rem;
    }

    .map {
        padding-bottom: 0.63rem;
        position: relative;
        z-index: 0;
        overflow: hidden;
        max-height: 40.63rem;
        min-height: clamp(25rem, 50vw, 37.5rem);
        margin-bottom: 0.63rem;
    }    

    .map h3 {
        margin-left: 1.88rem;
    }
    
    .map img {
        width: clamp(100%, 90vw, 56.25rem);
        height: auto;
        object-fit: cover;
        object-position: center;
        transform: scale(1.06) translateY(-24%);
        transform-origin: center center;
        padding: 0.63rem;
    }

    .diagrammTitle h3 {
        margin-top: 0.75rem;
        margin-left: 1.88rem;
    }

    .diagramm {
        margin-top: 1rem;
        clear: both;
    }

    .transparenz p {
        padding-left: 0.63rem;
        padding-right: 0.63rem;

    }

    .flowText h3 {
        margin-left: 1.88rem;
    }

    .paragraphs p {
        padding-left: 0.63rem;
        padding-right: 0.63rem;
    }

    footer p {
        font-size: 1rem;
    } 
}

/* ----------------- Tablet (≥ 768px) ----------------- */
@media (min-width: 768px) {
    h1 { font-size: 4.6rem; }     
    h2 { font-size: 1.6rem; }
    h3 { font-size: 2.5rem; }   
    p  { font-size: 1.3rem; }

    header img {
        max-height: 5.63rem;
        max-width: 5.63rem;
        padding: 0.31rem;
        margin: 0.63rem 0 1.25rem 0.63rem;
        z-index: 0;
    }

    .welcome {
        display: flex;
        flex-direction: row;
        justify-content: space-between; 
        align-items: center;
        height: 100%;
        margin: 0 1.25rem;
        max-width: 75rem;
    }

    .welcome .swimmwest {
        margin-left: 3.13rem;
    }
    
    .welcome .swimmwest img {
        max-width: 12.5rem;
        max-height: 15rem;
        position: absolute;
        top: 78%; 
        left: 19%;
    }

    .welcome .title {
        position: absolute;
        top: 84%;
        left: 19%;
        transform: translate(-50%, -120%);
        z-index: 2;
    }

    .welcome .tagline {
        position: relative;
        margin-top:  3.75rem;
        margin-left: 12.5rem;
        text-align: center;
    }

    .tagline img {
        min-width: 10%;
        min-height: 10%;
        max-width: 15%;
        max-height: 15%;
    }

    .map {
        position: relative;
        z-index: 0;
        max-width: 62.5rem;
        margin: 3.13rem auto 1.88rem;
        min-height: clamp(28.13rem, 55vw, 43.75rem);
        border-radius: 0.5rem;
        padding: 0.63rem;
    }

    .map h3 {
        margin-left: 1.88rem;
        margin-bottom: 1rem;
    }

    .map img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        object-position: center;
        transform: scale(1.04) translateY(-24%);
        transform-origin: center;
        border-radius: 0.5rem;
    }

     .diagrammTitle h3 {
        margin-top: 18.13rem;
        margin-left: 1.88rem;
    }

    .diagramm {
        margin-top: 1rem;
        clear: both;
    }

    .transparenz p {
        font-size: 1.15rem;
        padding-left: 0.63rem;
        padding-right: 0.63rem;
    }

    .flowText h3 {
        margin-left: 1.88rem;
    }

    .paragraphs p {
        padding-left: 0.63rem;
        padding-right: 0.63rem;
    }

    footer img {
        flex: 0 0 auto;
        width: 12.5rem;
        max-width: 12.5rem;
        height: auto;
        object-fit: contain;
    }

    footer p {
        flex: 1 1 auto;
        font-size: 1.175rem;
        line-height: 1.45;
        width: auto;
        padding-left: 0.63rem;
    }

    /* Verschiebung der Aufteilung im Footer für neue Grösse */
    footer::before {
        left: calc(12.50rem + 0.63rem);
    }

    :root {
        --boat-size: 30; /*Grösse für Tablet*/
    }

    #waveDarkDesktop, #waveMediumDesktop, #waveBrightDesktop { 
        display: none; 
    }
}

/* ----------------- Small desktop (≥ 1024px) ----------------- */
@media (min-width: 1024px) {
    h1 { font-size: 4.8rem; }
    h2 { font-size: 1.75rem;}
    h3 { font-size: 2.6rem; }
    p  { font-size: 1.35rem; }

    header img {
        max-height: 5.63rem;
        max-width: 5.63rem;
        padding: 0.31rem;
        margin: 0.63rem 0 1.25rem 0.63rem;
        z-index: 0;
    }
    
    .welcome {
        max-width: 75rem;
        margin: 1.25rem auto 0;
        transform: translateY(-12%);
    }

    .welcome .swimmwest img {
        max-width:  16.25rem;
        max-height: 20rem;
        position: absolute;
        top: 75%;
        left: 22%;
        opacity: 0.95;
    }

    .welcome .title {
        position: absolute;
        top: 80%;
        left: 22%;
        transform: translate(-50%, -135%);
        z-index: 2;
        text-align: center;
    }

    .welcome .tagline {
        position: relative;
        margin-top: 4.38rem;
        margin-left: 16.25rem;
        text-align: left;
    }

    .tagline img {
        min-width: 10%;
        min-height: 10%;
        max-width: 18%;
        max-height: 18%;
    }

    :root {
        --boat-size: 40; /*Grösse für Desktop klein*/
    }

    #waveDarkDesktop, #waveMediumDesktop, #waveBrightDesktop {
        display: block;
    }

    #waveDarkMobile, #waveMediumMobile, #waveBrightMobile { 
        display: none; 
    }

    /* SVG Skalierung für alle Wellen */
    .diagramm .wave svg {
        width: 100%;
        height: auto;
    }
}

/* ----------------- Large desktop (≥ 1440px) ----------------- */
@media (min-width: 1440px) {
    h1 { font-size: 5rem; }
    h2 { font-size: 1.9rem; }
    h3 { font-size: 2.7rem; }
    p  { font-size: 1.4rem; }

    header img {
        max-height: 5.94rem;
        max-width: 5.94rem;
        padding: 0.31rem;
        margin: 0.63rem 0 1.25rem 0.63rem;
        z-index: 0;
    }

    .welcome .title {
        top: 90%;
        left: 22%;
        transform: translate(-50%, -150%);
    }

    .welcome .tagline {
        position: relative;
        margin-top: 4.38rem;
        margin-left: 16.25rem; 
        text-align: left;
    }

    .welcome .tagline img {
        width: 12.5rem;
        display: block;
    }

    :root {
        --boat-size: 50; /*Grösse für Desktop gross*/
    }

    #waveDarkDesktop, #waveMediumDesktop, #waveBrightDesktop {
        display: block;
    }

    #waveDarkMobile, #waveMediumMobile, #waveBrightMobile { 
        display: none; 
    }

    .map {
        max-width: 75rem;
        min-height: clamp(31.25rem, 45vw, 46.88rem);
        margin: 3.75rem auto 2.5rem;
    }

    .diagrammTitle h3 {
        margin-top: 16.25rem;
    }
}