/* ----- LAYOUT OUTLINE - FOR PROCESS ----- */
    /* *{outline: 1px #de2818 solid;} */


/* ----- STYLING START  ----- */
    *{box-sizing: border-box}

    body{
        background-color: #949455;
        margin: 0;
        color: #fff;
    }

    a {
        text-decoration: none;
        color: #fff;
    }

/* ----- IMPORT FONTS ----- */
    /* ----- WREATH ADOBE WEB FONT ---- */
    /* @import url("https://use.typekit.net/sao4jiy.css"); */

      
    /* ---- COOKIE LOCAL ---- */
    @font-face { src: url("../font/Cookie-Regular.ttf");
        font-family: Cookie;}

    /* ---- LATO LOCAL ---- */
    @font-face{src:url("../font/Lato-Regular.ttf");
        font-family: Lato;}
    @font-face{src:url("../font/Lato-Light.ttf");
            font-family: LatoLight;}
    @font-face{src:url("../font/Lato-Bold.ttf");
            font-family: LatoBold;}

/*  ----- COLORS START -----
    hellbeige: #fdf1d6
    hellgrün: #dfe1c6
    mittelgrün: #949455
    dunkelgrün: #354832
    ----- COLORS END ----- */

/* ----- SCROLL SNAP START ----- */ 
    html {
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;  
        scroll-padding-top: 0px; 
    }

    section {
        scroll-snap-align: start;  
        /* scroll-snap-stop: always;   */
    }
/* ----- SCROLL SNAP END ----- */ 

/* ----- HEADER FLOWER GIRL START ----- */

    /* -----  STICKY HEADER @700px MAX-WIDTH START----- */
        @media(max-width: 700px){
            header{
            position: sticky;
            top: 0px;
            z-index: 10;
            }
        }
    /* -----  STICKY HEADER @700px MAX-WIDTH END----- */

    /* ----- h1 only for SEO & SCREEN READER----- */
        h1{
            visibility: hidden;
            position: absolute;
        }
    /* ----- h1 only for SEO & SCREEN READER----- */

    .headerImgBox{
        background-color: #dfe1c6;
    }

    .headerImg{
        background-image: url("/img/blumenMaedchen.png");
        background-size: contain;
        background-repeat: no-repeat;
        aspect-ratio: 2.5 / 2;
        max-width: 800px;
        margin: auto;
    }

    h2 {
        background-color: #949455;
        font-family: "wreath", "cookie";
        font-weight: 600;
        font-size: clamp( 20px, 4vw, 36px);
        color: #354832;
        text-align: center;
        padding: 10px;
        margin: 0;
    }
/* ----- HEADER FLOWER GIRL END ----- */

/* ----- BACK TO TOP BUTTON START ----- */
    #buttonBTT{
        background-color: #dfe1c6;
        color: #949455;
        font-size: 24px;
        width: 25px;
        height: 25px;
        position: fixed;
        bottom: 15px;
        right: 15px;
        text-align: center;
        z-index: 1000;
        box-shadow: 0 2px 6px rgba(0,0,0,0.2);
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    #buttonBTT.show {
        opacity: 1;
        visibility: visible;
    }

/* ----- BACK TO TOP BUTTON END ----- */

/* ----- LAYOUT IMG (FLOWER) START ----- */
    section {
        margin-bottom: 30px;
        display: flex;      
    }

    .flowerImg{
        background-size: cover;
        background-position: 40%;
        background-repeat: no-repeat;
        aspect-ratio: 3 / 2;
        max-height: 500px;
        min-height: 320px;
        width: 100%;
    } 

/* ----- LAYOUT IMG (FLOWER) END ----- */

/* ----- IMG (FLOWER) START ----- */
    #allium{
        background-image: url("/img/AlliumaufWiese_DIN\ lang.png");
        background-position: 40%;
    } 

    #dahlie{
        background-image: url("/img/DahlieaufWiese_DIN\ lang.png");
    }

    #gladiole{
        background-image: url("/img/GladioleaufWiese_DIN\ lang.png");
        background-position: 38%;
    }

    #iris{
        background-image: url("/img/IrisaufWiese_DIN\ lang.png");
        background-position: 39.5%;
    }
    #lilie{
        background-image: url("/img/LilieaufWiese_DIN\ lang.png");
        background-position: 38.5%;
    }

    #narzisse{
        background-image: url("/img/NarzisseaufWiese_DIN\ lang.png");
        background-position: 38.5%;
    }

    #pfingstrose{
        background-image: url("/img/PfingstroseaufWiese_DIN\ lang.png");
        background-position: 38%;
    }
    #sonnenblume{
        background-image: url("/img/SonnenblumeaufWiese_DIN\ lang.png");
        background-position: 38%;
    }
    #tulpe{
        background-image: url("/img/TulpeaufWiese_DIN\ lang.png");
    }
/* ----- IMG (FLOWER) END ----- */


/* ----- CONTENT FLOWER TEXT START ----- */
    .contentBox{
        width: 90%;
        margin: auto;
        display: flex;
        justify-content: end;
        padding-top: 15px;
    }

    .contentText{
        width: 65%;
        position: relative;
        height: 100%;
        padding-left: clamp(10px, 5vw, 200px);
        text-align: left;
    }

    h3{
        font-family: "wreath", "cookie";
        font-weight: 600;
        font-size: clamp( 36px, 7vw, 62px);
        margin: 0;
    }

    hr{
        border: 0.25px #fff solid;
        width: 85%;
        max-width: 353px;
        margin: 0;
    }

    .runningText{  
        font-family: Lato;
        font-size: clamp(12px, 1.5vw, 16px );
        min-height: 150px;
        max-width: 400px;    
    }

    .price{
        font-family: Lato;
        font-size: clamp(18px, 3vw, 32px);
        margin-top: clamp( 5px, 5%, 50px) ;
    }
/* ----- CONTENT FLOWER TEXT END ----- */



/* ----- FOOTER START ----- */
    .footerScrollSection {
        background-color: #949455;
        scroll-snap-align: start;
        margin: 0;
        padding: 15px;
        padding-top: 0px;
        max-width: 800px;
        margin: auto; 
        position: relative;
    }

    .footerContent {
        display: flex; 
        justify-content: space-between; 
        width: 100%;
    }

    .footerLeft,
    .footerRight {
        flex: 1; 
    }

    .footerLeft {
        text-align: left;
    }

    .footerRight {
        text-align: right;
    }

    .logoLink {
        display: flex; 
        justify-content: center; 
        align-items: center; 
        flex: 1; 
    }

    .logoImage {
        max-width: 100px; 
    }

    .footerScrollSection p {
        font-family: Lato;
        font-size: clamp(10px, 1.5vw, 16px);
        line-height: 15px;
    }

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