@charset "UTF-8";
@font-face {
    font-family: 'Avenir Next LT Pro';
    src: url('fonts/AvenirNextLT.woff2') format('woff2'),
        url('fonts/AvenirNextLT.woff') format('woff'),
        url('fonts/AvenirNextLT.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Kunstler';
    src: url('fonts/Kunstler.woff2') format('woff2'),
        url('fonts/Kunstler.woff') format('woff'),
        url('fonts/Kunstler.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

        :root {
        --screen-width: 320px;
        --screen-height: 560px;
        --header-bg-color: #673ab7;
        --splash-bg-color: #2d212f;
        --splash-bg-color-dark: #160f18;
        --gold-color: #ddc37f;
        --darkpurple-color: #160f18;
        }

        .bg-bordeaux {
            background:var(--splash-bg-color);
        }

        .bg-rings {
            background:#777;
        }

        .bg-green {
            background:#475441;
        }

        .clr-gold {
            color:var(--gold-color);
        }

        .gold-line {
            border:none;
            border-bottom:solid 2px var(--gold-color);
            margin:5px;
            width:50%;
            margin:auto;
        }

        .hwr-kunst::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Kunst";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }
        .hwr-chef::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Chef";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }

        .edelmetallecontainer {
            position:relative;
            margin-top: 150px;
        }


        .hwr-gold::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Gold";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }

        .hwr-ringe::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Ringe";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }

        .hwr-loesung::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Lösung";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }

        .hwr-edel::after {
            font-family: 'Kunstler'; 
            font-size: 400px; 
            content: "Edelsteine";
            color:rgba(255,255,255,0.1);
            margin:-310px 0px 0px -60%;
            padding-right:10%;
            position:absolute;
            right:0px;
            overflow:hidden;
        }

        .hwr-idee {
            font-family: 'Kunstler'; 
            font-size: 600px; 
            color:rgba(255,255,255,0.1);
            margin:-100px 0px 0px -0%;
            padding-right:10%;
            position:absolute;
            line-height: 420px;
            text-align: right;
            left:0px;
            right:0px;
            bottom:0px;
            overflow:hidden;
        }

        #menu__toggle {
            opacity: 0;
          }
          #menu__toggle:checked + .menu__btn > span {
            transform: rotate(45deg);
          }
          #menu__toggle:checked + .menu__btn > span::before {
            top: 0;
            transform: rotate(0deg);
          }
          #menu__toggle:checked + .menu__btn > span::after {
            top: 0;
            transform: rotate(90deg);
          }
          #menu__toggle:checked ~ .menu__box {
            left: 0 !important;
          }
          .menu__btn {
            position: fixed;
            top: 30px;
            right: 20px;
            width: 26px;
            height: 26px;
            cursor: pointer;
            z-index: 1;
          }
          .menu__btn > span,
          .menu__btn > span::before,
          .menu__btn > span::after {
            display: block;
            position: absolute;
            width: 100%;
            height: 2px;
            background-color: #616161;
            transition-duration: .25s;
          }
          .menu__btn > span::before {
            content: '';
            top: -8px;
          }
          .menu__btn > span::after {
            content: '';
            top: 8px;
          }
          .menu__box {
            display: block;
            position: fixed;
            z-index:900;
            top: 0;
            left: -100%;
            width: 260px;
            height: 100%;
            margin: 0;
            padding: 80px 0;
            list-style: none;
            background-color: #ECEFF1;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
            transition-duration: .25s;
          }
          .menu__item {
            display: block;
            padding: 12px 24px;
            color: #333;
            font-size: 20px;
            font-weight: 600;
            text-decoration: none;
            transition-duration: .25s;
          }
          .menu__item:hover {
            background-color: #beb0bb;
            color:var(--darkpurple-color);
          }

          .hamburger-menu {
              height:0px;
          }

        body {
            width:100%;
            min-width:100%;
            height:100%;
            min-height:100%;
            margin:0px;
            padding:0px;
            font-family:'Avenir Next LT Pro', sans-serif;
        }

        h1 {
            font-family:'Avenir Next LT Pro', sans-serif;
        }

        .placeholder {
            height:80px;
            background-color:transparent;
        }

        .ring-gallery div {
            width:100%;
            max-width:100%;
        }

        .ring-gallery div a {
            opacity:0.5;
            position:relative;
            z-index:10;
        }

        .ring-gallery div a:hover {
            opacity:0.7;
        }

        .classic {
            font-family:serif;
            margin-top:20px;
        }