:root {
    --main-color-01: rgb(255 255 255);
    --main-color-02: rgb(42 42 42);
    --main-color-03: rgb(0 0 0);
    --main-color-03-02: rgb(0 0 0 / 0.2);
    --main-color-03-08: rgb(0 0 0 / 0.8);
    --main-color-03-085: rgb(0 0 0 / 0.85);
    --main-color-03-09: rgb(0 0 0 / 0.9);
    --main-color-03-095: rgb(0 0 0 / 0.95);
    --main-color-04: rgb(56 56 56);
    --main-color-05: rgb(29, 88, 47);
    --main-color-06: rgb(111 111 111);
    --main-color-07: rgb(133 133 133);
    --main-color-08: rgb(77 77 77);
    --main-color-09: rgb(125 0 0);
    --main-color-10: rgb(45, 0, 104);
}  
.cc:hover{text-decoration: overline;text-decoration-color: var(--main-color-05);}


.referenz_nav a:hover li {
    animation: mymove 3s infinite;
    background-color: var(--main-color-03-09);
  }
  
  @keyframes mymove {
    0%, 100% {
        background-color: var(--main-color-03-09);
      }
      50% {
        background-color: var(--main-color-05);
      }
  }
@media screen and (min-width: 1275px) {
    body{padding:0px; margin:0px;color: var(--main-color-01);font-family: system-ui;background-image: url(/wtfia/src/background.webp);background-size: cover;overflow-x: hidden;width: 100%;height: 1080px;position: absolute;overflow-y:hidden;background-repeat: no-repeat;background-attachment: fixed;}
    .referenz_body{overflow-y: scroll;}
        a{text-decoration: none;color:var(--main-color-01);}
        li{margin: 5px 0;padding: 5px 10px;background-image: linear-gradient(to right, var(--main-color-03-09), var(--main-color-03-02));display: flex;justify-content: center;border-radius: 7px;cursor: pointer;font-variant: all-petite-caps;}
        header{position: fixed;top: 0;width: calc(100% - 40px);margin: 10px 20px;font-size: 20px;color: var(--main-color-01);z-index: 99;display: flex;justify-content: space-between;}
            nav{width: 100%;}
            nav ul{display: flex;justify-content: flex-end;}
            .underline-text {position: relative;display: inline-block;padding-bottom: 5px;cursor: pointer;color: var(--main-color-01);background-image: none;width: auto;font-size: 25px;}
            .underline-text::after {content: '';position: absolute;left: 50%;bottom: 0;transform: translateX(-50%);width: 0;height: 2px;background-color: var(--main-color-05);transition: width 0.5s ease;}
            .underline-text:hover::after {width: 100%;}
            .links{color:var(--main-color-01);padding: 5px 10px;}
            #click-menu, #click-menu-x{display:none;}
            .insta{display:none;}
        /* main{} */
        .main_dienstleidungen_kontakt{width: 100%;height: 100%;}
        .main_referenz{margin:0 20%;width:60%;}
            .angebot_kontakt_headline{display: flex;justify-content: center;align-items: center;top: 150px;position: relative;font-size: 45px;margin: 0;}
            .referenz_headline{font-size: 45px;margin: 150px 0 0;text-align: center;}
            .angebot_kontakt_list{width: 100%;height: 80%;display: flex;justify-content: center;align-items: center;}
            .angebot{height: 460px;width: 260px;margin: 30px;border-radius: 20px;text-align: center;padding: 20px;}
            .color_one{background-color: var(--main-color-02);}
            .color_two{background-color: var(--main-color-04);}
            main li:hover{font-size: 26px;padding:0px 14px 7px 14px;width: calc(100% - 28px);}
            .headline{font-size: 19px;}
            .logo_space{position: fixed;top: 70px;left: 8%;display: flex;flex-direction: column;align-items: center;}
            .referenz_nav{list-style: none;font-size: 22px;width: 300px;color: var(--main-color-06);margin: 0;padding: 0;}
            .list-text{font-size: 15px;position: fixed;top: 320px;width: 40%;left: 50%;}
            #foto, #video, #grafik, #about{display: none;}
            .main_text{background-color: color(srgb 0 0 0 / 0.6);padding: 5px;border-radius: 5px;width: 602px;}
            .handy_headline{display:none;}
            .image_save{z-index: 0;position: sticky;margin: 40px 0 100px;}
            .graf_bot{padding-bottom: 100px;}
            #fotografie, #videografie, #grafikdesign{font-size: 30px;font-weight: 600;margin: 20px 0 0;display: block;color: var(--main-color-01);z-index: 0;position: sticky;}
            .grid-wrapper>div {display: flex;justify-content: center;align-items: center;}
            .grid-wrapper>div>img, .grid-wrapper>div>video {width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}
            .grid-wrapper {display: grid;grid-gap: 10px;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-auto-rows: 200px;grid-auto-flow: dense;}
            .grid-wrapper .wide {grid-column: span 2;}
            .grid-wrapper .tall {grid-row: span 2;}
            .grid-wrapper .big {grid-column: span 2;grid-row: span 2;}
            .masonry-item:hover {transform: scale(1.1);}
            .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--main-color-03-08);justify-content: center;align-items: center;}
            .modal-content {max-width: 90%;max-height: 90%;text-align: center;display: flex;justify-content: center;}
            .modal img {max-width: 100%;max-height: 100%;object-fit: contain;}
            form{width:35%;}
            .name_first{display: flex;width: 100%;}
            .name_div{width: 50%;}
            .input_feld{width: 100%;padding: 5px;border-radius: 8px;font-size: 20px;border: var(--main-color-05) 1px solid;margin: 5px 0 20px 0;background: transparent;color:var(--main-color-01)}
            .input_name_01{width: 90%;margin: 5px 10% 20px 0;}
            .input_name_02{width: 90%;margin: 5px 0 20px 10%;}
            .send_button{width: 30%;padding: 5px;border-radius: 8px;font-size: 20px;color: var(--main-color-01);border: var(--main-color-05) 1px solid;margin:20px 0;background: transparent;}
            .send_button:hover{background: var(--main-color-07);cursor: pointer;}
            .kontakt_us_button{padding: 10px 20px;border: none;border-radius: 5px;background: var(--main-color-08);color: var(--main-color-01);font-size: 19px;margin: 10px 0;}
            .kontakt_us_button:hover{border: 2px solid var(--main-color-05);background: var(--main-color-07);cursor: pointer;}
        footer{position: fixed;bottom: 0;width: calc(100% - 80px);margin: 10px 60px 10px 20px;font-size: 12px;display: flex;justify-content: space-between;}

        .admin{overflow-y: scroll;}
        .upform{width: 50%;background: rgb(255 255 255 / 44%);padding: 20px;border-radius: 10px;}
        .admin #previewImage1{max-width: 100%;max-height: 200px;display:none}
        .admin #description,.admin #video_description{height: 25px;border-radius: 5px;width: calc(100% - 6px);background: transparent;border: 2px solid var(--main-color-05);color: var(--main-color-01);cursor: pointer;}
        .upform>div{display:flex;}
        .upform>div>div{width: 47%;margin: 0 6% 0 0;}
        .upform>div>div+div{width: 47%;}
        .upform select{height: 25px;border-radius: 5px;width: 200px;background: transparent;border: 2px solid var(--main-color-05);color: var(--main-color-01);cursor: pointer;}
        .upform select option{color: black;cursor: pointer;}
        .upform button{height: 35px;border-radius: 5px;width: 200px;font-size: 16px;background: transparent;border: 2px solid var(--main-color-05);color: var(--main-color-01);cursor: pointer;}
        .hepy{width: 47%;}
        .admin_data{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;top: 240px;position: relative;margin: 0;flex-direction: column;}
        .admin_data>div{border-radius: 5px;padding: 20px;display: flex;flex-direction: column;align-items: center;width: 75%;}
        .admin_data>div>div{border-radius: 5px;padding: 40px 0 20px 0;}
        .admin #fotografie,.admin #videografie,.admin #grafikdesign{display:none;width: 75%;}
        .admin .other_list{cursor: pointer;border: 2px solid var(--main-color-05);border-radius: 5px;margin: 10px;padding: 5px;}
        #edit_div{background: rgba(0, 0, 0, 0.64); width: 100%; height: 100%; position: fixed; top: 0px; display: none; justify-content: center; align-items: center;}
        #edit_div>div{width: 410px;padding: 50px;background: var(--main-color-07);display: flex;align-items: baseline;position: relative;flex-direction: column;border-radius: 20px;}
        #edit_div>div>span{display: block;color: var(--main-color-01);margin: 10px;}
        #edit_div>div>h3{font-size: 25px;}
        #edit_div>div>img{width: auto;height: 150px;margin-bottom: 20px;}
        #edit_div>div>form{width: 100%;}
        #description_edit{height: 25px;border-radius: 5px;width: 98%;background: transparent;border: 2px solid var(--main-color-01);color: var(--main-color-01);cursor: pointer;}
        #image_id_edit{display:none}
        #edit_div>div>form>div{display:flex;width: 100%;justify-content: space-between;}
        #edit_div>div>form>div>div{width: 49%;}
        #edit_div>div>form>div>div>select{height: 25px;border-radius: 5px;width: 100%;background: transparent;border: 2px solid var(--main-color-01);color: var(--main-color-01);cursor: pointer;}
        #edit_div>div>form>div>div>select>option{color: var(--main-color-01);cursor: pointer;}
        #edit_div>div>form>button{height: 35px;border-radius: 5px;width: 125px;font-size: 16px;background: transparent;border: 2px solid var(--main-color-01);color: var(--main-color-01);cursor: pointer;margin: unset;}
        #edit_div>div>div{display: flex;width: 100%;flex-direction: row-reverse;}
        #edit_div>div>div>button{height: 35px;border-radius: 5px;width: 125px;font-size: 16px;background: var(--main-color-09);border: 2px solid var(--main-color-01);color: var(--main-color-01);cursor: pointer;}
    
    
    
}

@media screen and (max-width: 1275px) {
    body{padding: 0px;margin: 0px;color: var(--main-color-01);font-family: system-ui;background-image: url(/wtfia/src/background.webp);background-size: cover;width: 100%;background-repeat: no-repeat;background-attachment: fixed;}
    a{text-decoration: none;color:var(--main-color-01);}
        header{text-align: -moz-right;text-align: -webkit-right;margin: 5px 10px 0 0;}
            #menu{display: none;position: fixed;background: var(--main-color-03-095);margin: 0;top: 0;left: 0;list-style-type: none;height: 100%;padding: 100px 30px;z-index: 9;width: 85%;}
            .underline-text{padding: 15px 20px;font-size: 25px;text-align: center;font-weight: bold;color: var(--main-color-01);}
            .nav-img{width: 70px;height: auto;}
            #click-menu{display:block;}
            #click-menu-x{display:none;z-index: 999;position: sticky;}
            .insta-handy{display:none;}
        main{margin: 0 0 50px 0;}
        .main_referenz{margin:0 20%;width:60%;}
            .angebot_kontakt_headline{font-size: 30px;width: 80%;margin: 25px auto;text-align: center;}
            .angebot_kontakt_list{display: flex;align-items: center;flex-direction: column;}
            .angebot{width: 260px;margin: 30px;border-radius: 20px;text-align: center;padding: 20px;}
            .color_one{background-color: var(--main-color-02);}
            .color_two{background-color: var(--main-color-04);}
            .headline{font-size: 15px;}
            .logo_space{width: 360px;flex-direction: column;align-items: center;align-content: center;display: flex;margin: -30px auto 0;}
            .referenz_nav{display:none;}
            .list-text{display: flex;flex-direction: column;align-items: center;}
            #about, #foto, #video, #grafik{display: block;text-align: center;margin: 20px 0;}
            .list-text .handy_headline{display:block}
            .list-text .main_text{width: 70%;margin: 10px auto;font-size: 14px;}
            .list-text .main_img{width: 70%;height: auto;}
            .image_save{z-index: 0;position: sticky;margin: 40px 0 100px;}
            #fotografie, #videografie, #grafikdesign{font-size: 30px;font-weight: 600;margin: 20px 0 0;display: block;color: var(--main-color-01);z-index: 0;position: sticky;}
            .grid-wrapper>div {display: flex;justify-content: center;align-items: center;}
            .grid-wrapper>div>img, .grid-wrapper>div>video {width: 100%;height: 100%;object-fit: cover;border-radius: 5px;}
            .grid-wrapper {display: grid;grid-gap: 10px;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));grid-auto-rows: 200px;grid-auto-flow: dense;}
            .grid-wrapper .wide {grid-column: span 2;}
            .grid-wrapper .tall {grid-row: span 2;}
            .grid-wrapper .big {grid-column: span 2;grid-row: span 2;}
            .masonry-item:hover {transform: scale(1.1);}
            .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: var(--main-color-03-08);justify-content: center;align-items: center;}
            .modal-content {max-width: 90%;max-height: 90%;text-align: center;display: flex;justify-content: center;}
            .modal img {max-width: 100%;max-height: 100%;object-fit: contain;}
            form{width:80%;}
            .name_first{display: flex;width: 100%;}
            .name_div{width: 50%;}
            .input_feld{width: 100%;padding: 5px;border-radius: 8px;font-size: 20px;border: var(--main-color-05) 1px solid;margin: 5px 0 20px 0;background: transparent;color:var(--main-color-01)}
            .input_name_01{width: 90%;margin: 5px 10% 20px 0;}
            .input_name_02{width: 90%;margin: 5px 0 20px 10%;}
            .send_button{width: 30%;padding: 5px;border-radius: 8px;font-size: 20px;color: var(--main-color-01);border: var(--main-color-05) 1px solid;margin: 5px 0 20px 0;background: transparent;}
            .kontakt_us_button{padding: 10px 20px;border: none;border-radius: 5px;background: var(--main-color-08);color: var(--main-color-01);font-size: 19px;margin: 10px 0;}
            .kontakt_us_button:hover{border: 2px solid var(--main-color-05);background: var(--main-color-07);cursor: pointer;}
        footer{position: fixed;bottom: 0;width: calc(100% - 40px);padding: 15px 20px;font-size: 12px;display: flex;justify-content: space-between;flex-direction: column;text-align: center;background-color: var(--main-color-03-085);}      
}