/* CSS Document */
/* ==========================================================
   WILDFINS
   GLOBAL CSS
   Version 0.1
   Basis für HOME · CHALLENGES · QUESTS · DETAILSEITEN
   ========================================================== */


/* ==========================================================
   VARIABLES
   ========================================================== */

:root{

    /* ------------------------------------------------------
       COLORS
       ------------------------------------------------------ */

    --color-background: #F7F6F1;
    --color-surface:    #FFFFFF;

    --color-text:       #2F3432;
    --color-text-soft:  #68706B;

    --color-primary:       #304438;
    --color-primary-light: #53665A;

    --color-line:       #D9DDD8;

    --color-white:      #FFFFFF;


    /* ------------------------------------------------------
       TYPOGRAPHY
       ------------------------------------------------------ */

    --font-serif: "Crimson Pro", Georgia, serif;
    --font-sans:  "Source Sans 3", Calibri, Arial, sans-serif;

    --fs-h1: clamp(2.35rem, 4.2vw, 3.55rem);

    --fs-h2: clamp(1.90rem, 3.3vw, 2.65rem);

    --fs-h3: clamp(1.45rem, 2.6vw, 1.90rem);

    --fs-lead: clamp(1.10rem, 1.65vw, 1.30rem);

    --fs-body: 1.10rem;

    --fs-small: .90rem;

    --fs-eyebrow: 1.43rem;

    --lh-headline: 1.14;

    --lh-text: 1.72;


    /* ------------------------------------------------------
       FONT WEIGHTS
       ------------------------------------------------------ */

    --fw-light:    300;
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;


    /* ------------------------------------------------------
       CONTENT WIDTHS
       ------------------------------------------------------ */

    --content-width: 1240px;

    --content-wide: 1440px;

    --text-width: 70ch;


    /* ------------------------------------------------------
       SPACING
       ------------------------------------------------------ */

    --space-xs:   8px;

    --space-s:   16px;

    --space-m:   28px;

    --space-l:   56px;

    --space-xl:  88px;

    --space-xxl: 144px;


    /* ------------------------------------------------------
       HERO
       ------------------------------------------------------ */

    --hero-desktop-ratio: 1920 / 648;

    --hero-mobile-ratio: 1080 / 1350;


    /* ------------------------------------------------------
       IMAGE RATIOS
       ------------------------------------------------------ */

    --ratio-wide:     2 / 1;

    --ratio-standard: 3 / 2;

    --ratio-landscape: 1920 / 900;


    /* ------------------------------------------------------
       HEADER
       ------------------------------------------------------ */

    --header-height: 88px;


    /* ------------------------------------------------------
       EFFECTS
       ------------------------------------------------------ */

    --transition-fast: .20s ease;

    --transition: .30s ease;

    --transition-slow: .45s ease;

    --shadow-soft:
        0 12px 36px rgba(0,0,0,.08);


    /* ------------------------------------------------------
       Z-INDEX
       ------------------------------------------------------ */

    --z-navigation: 1000;

    --z-overlay: 1100;

    --z-modal: 1200;

}


/* ==========================================================
   RESET / GLOBAL
   ========================================================== */

html{

    scroll-behavior:smooth;

}


*,
*::before,
*::after{

    box-sizing:border-box;

}


body{

    min-height:100vh;

    margin:0;

    overflow-x:hidden;

    font-family:var(--font-sans);

    font-size:var(--fs-body);

    line-height:var(--lh-text);

    font-weight:var(--fw-normal);

    color:var(--color-text);

    background:var(--color-background);

    text-rendering:optimizeLegibility;

    -webkit-font-smoothing:antialiased;

    -moz-osx-font-smoothing:grayscale;

}


img{

    display:block;

    width:100%;

    height:auto;

}


button,
input,
textarea,
select{

    font:inherit;

}


a{

    color:inherit;

    text-decoration:none;

}


/* ==========================================================
   TYPOGRAPHY
   ========================================================== */

h1,
h2,
h3,
h4,
h5,
h6{

    margin:0;

    font-family:var(--font-serif);

    font-weight:var(--fw-normal);

    color:var(--color-primary);

    line-height:var(--lh-headline);

}


h1{

    font-size:var(--fs-h1);

}


h2{

    font-size:var(--fs-h2);

}


h3{

    font-size:var(--fs-h3);

}


p{

    max-width:var(--text-width);

    margin:0 0 var(--space-m);

}


p:last-child{

    margin-bottom:0;

}


.lead{

    max-width:52rem;

    margin-bottom:var(--space-l);

    font-family:var(--font-serif);

    font-size:var(--fs-lead);

    line-height:1.55;

    color:var(--color-text);

}


.eyebrow{

    margin:0 0 16px;

    font-family:var(--font-sans);

    font-size:var(--fs-eyebrow);

    font-weight:var(--fw-semibold);

    line-height:1.3;

    letter-spacing:.16em;

    text-transform:uppercase;

    color:var(--color-primary);

}


small{

    font-size:var(--fs-small);

}


strong{

    font-weight:var(--fw-medium);

}


em{

    font-style:normal;

}


a{

    transition:color var(--transition);

}


a:hover{

    color:var(--color-primary-light);

}


::selection{

    background:var(--color-primary);

    color:var(--color-white);

}


/* ==========================================================
   CONTAINERS
   ========================================================== */

.container{

    width:min(var(--content-width),92vw);

    margin-inline:auto;

}


.container-wide{

    width:min(var(--content-wide),96vw);

    margin-inline:auto;

}


.container-text{

    max-width:var(--text-width);

}


/* ==========================================================
   SECTIONS
   ========================================================== */

section{

    position:relative;

}


.section{

    padding-top:112px;

    padding-bottom:112px;

}


.section-sm{

    padding-top:var(--space-xl);

    padding-bottom:var(--space-xl);

}


.section-lg{

    padding-top:180px;

    padding-bottom:180px;

}


/* ==========================================================
   GRID / FLEX
   ========================================================== */

.grid{

    display:grid;

    gap:var(--space-l);

}


.grid-2{

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

}


.grid-3{

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

}


.grid-4{

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

}


.flex{

    display:flex;

}


.flex-center{

    display:flex;

    align-items:center;

}


.flex-between{

    display:flex;

    justify-content:space-between;

    align-items:center;

}


/* ==========================================================
   IMAGE SYSTEM
   ========================================================== */

.image-wide{

    aspect-ratio:var(--ratio-wide);

    overflow:hidden;

}


.image-standard{

    aspect-ratio:var(--ratio-standard);

    overflow:hidden;

}


.image-landscape{

    aspect-ratio:var(--ratio-landscape);

    overflow:hidden;

}


.image-wide img,
.image-standard img,
.image-landscape img{

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.hero{

    aspect-ratio:var(--hero-desktop-ratio);

    width:100%;

    overflow:hidden;

}


.hero img{

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.image-placeholder{

    background:#D8D8D4;

}


/* ==========================================================
   HOVER IMAGE
   ========================================================== */

.image-hover{

    display:block;

    overflow:hidden;

}


.image-hover img{

    transition:
        transform var(--transition-slow);

}


.image-hover:hover img{

    transform:scale(1.025);

}


/* ==========================================================
   SPACING UTILITIES
   ========================================================== */

.mt-xs{margin-top:var(--space-xs);}
.mt-s{margin-top:var(--space-s);}
.mt-m{margin-top:var(--space-m);}
.mt-l{margin-top:var(--space-l);}
.mt-xl{margin-top:var(--space-xl);}
.mt-xxl{margin-top:var(--space-xxl);}

.mb-xs{margin-bottom:var(--space-xs);}
.mb-s{margin-bottom:var(--space-s);}
.mb-m{margin-bottom:var(--space-m);}
.mb-l{margin-bottom:var(--space-l);}
.mb-xl{margin-bottom:var(--space-xl);}
.mb-xxl{margin-bottom:var(--space-xxl);}


/* ==========================================================
   WIDTH / HEIGHT
   ========================================================== */

.w-100{

    width:100%;

}


.h-100{

    height:100%;

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width:900px){

    .grid-2,
    .grid-3{

        grid-template-columns:1fr;

    }

    .section{

        padding-top:96px;

        padding-bottom:96px;

    }

}


@media (max-width:700px){

    .hero{

        aspect-ratio:var(--hero-mobile-ratio);

    }

    .container{

        width:92vw;

    }

    .section{

        padding-top:80px;

        padding-bottom:80px;

    }

    .section-lg{

        padding-top:120px;

        padding-bottom:120px;

    }

}


@media (max-width: 700px) {

    .challenge-intro-inner,
    .challenge-section-inner {

        width: calc(100% - 48px);
        max-width: none;

    }

}





@media (max-width:640px){

    .grid-4{

        grid-template-columns:1fr;

    }

    :root{

        --fs-body:1.05rem;

    }

}


/* ==========================================================
   HORIZONTAL RULE
   ========================================================== */

hr{

    display:none;

}
/* ==========================================================
   CHALLENGES – TEXTBREITEN
   ========================================================== */

.challenge-intro-text,
.challenge-intro-text p{

    max-width:none;

}


.challenge-building-item p{

    max-width:none;

}


.challenge-support p,
.challenge-language p,
.challenge-timing p{

    max-width:none;

}
.footer-copy,
.footer-note {
    text-align: center;
}