* { padding: 0; margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { color: #fff; background-color: rgb(25,25,25); font-family: 'Montserrat', sans-serif; padding: 0; margin: 0; width: 100%; height: 100%; }

.footer, .ph_shop_article img, .ph_shop_article .meta, .ph_shop_article .price, .ph_shop_article, section, .ph_page_loader, .ph_purchase span, .ph_content, .ph_dev_notice, header, .ph_center_text > span, .ph_header_icon {
    transition: all 1s cubic-bezier(.5,0,0,1);
}

.ph_mobile_menu nav a, .ph_mobile_menu, .ph_header_hamburger > div > span, header nav a, .ph_form_submit span, form input, .ph_form_submit:before, .ph_form_submit:after, .ph_form_submit, .ph_content form input[type='submit'] {
    transition: all 0.5s cubic-bezier(.5,0,0,1);
}

header, section, .ph_mobile_menu {
    background-color: rgb(25,25,25);
}

h1, h2, h3, .ph_center_text > span, .ph_center_text > span .important, h2 .important {
    color: rgb(25,25,25);
    --text-color: rgb(180,180,180);
    --border-width: 1px;
    text-shadow: var(--border-width) var(--border-width) 0 var(--text-color), var(--border-width) 0 0 var(--text-color), calc(var(--border-width) * -1) 0 0 var(--text-color), calc(var(--border-width) * -1) calc(var(--border-width) * -1) 0 var(--text-color), 0 var(--border-width) 0 var(--text-color), calc(var(--border-width) * -1) var(--border-width) 0 var(--text-color), 0 calc(var(--border-width) * -1) 0 var(--text-color), var(--border-width) calc(var(--border-width) * -1) 0 var(--text-color);
}

a { outline: 0; border: 0; }

header, section {
    border-color: rgb(45,45,45) !important; 
}

h2{ font-size: 50px; line-height: 55px; }
h2 .important { --border-width: 2px; --text-color: rgb(15,162,227) !important; }
p { color: rgb(200,200,200); font-weight: 300; }

::-moz-selection { background: rgb(15,162,227); text-shadow: none; border: none; color: #fff; }
::selection { background: rgb(15,162,227); text-shadow: none; border: none; color: #fff; }

header { position: fixed; z-index: 200; width: 100%; top: 0; left: 0; border-bottom: 1px solid rgb(220,220,220); }
.ph_header_inner { position: relative; padding: 0 25px; height: 70px;  }
header nav { vertical-align: top;  height: 100%; position: relative; display: inline-block;}
header nav a { color: #fff; border-bottom: 1px solid transparent; text-decoration: none; line-height: 70px; height: 70px; position: relative; padding: 0 25px;display: inline-block;}
header nav a.current { border-bottom: 1px solid #fff; }
header nav a.current::first-letter { color: rgb(15,162,227); font-weight: bold; }
header nav a:hover { background-color: rgba(0,0,0,0.15); }
.ph_header_icon { transition-delay: 100ms; position: absolute;  top: 50%; transform: translateY(-40%); right: 40px; height: calc(100% - 10px); }
/*.ph_page_loading .ph_header_icon { opacity: 0; }*/

.ph_header_hamburger { display: none; z-index: 300; cursor: pointer; padding: 25px 20px; vertical-align: top; width: 70px; height: 70px; position: relative; }
.ph_header_hamburger > div { display: block; position: relative; width: 100%; height: 100%; }
.ph_header_hamburger > div > span { top: 50%; transform-origin: center; background-color: #fff; display: block; height: 1px; width: 100%; position: absolute; }
.ph_header_hamburger > div >  span:nth-child(1) { transition-delay: 200ms; top: 0%; width: 100%; }
.ph_header_hamburger > div >  span:nth-child(2) { transition-delay: 200ms; top: 50%; width: 66.66%; }
.ph_header_hamburger > div >  span:nth-child(3) { transition-delay: 200ms; top: 100%; width: 75%; }
.ph_header_hamburger > div >  span:nth-child(4) { top: 50%; transform: rotateZ(-45deg) translateX(40px); opacity: 0; }
.ph_header_hamburger > div >  span:nth-child(5) { top: 50%; transform: rotateZ(45deg) translateX(-40px); opacity: 0;}

.ph_header_hamburger:hover > div >  span:nth-child(2) { width: 100%; }
.ph_header_hamburger:hover > div >  span:nth-child(3) { width: 100%; }

.ph_page_menu .ph_header_hamburger > div > span:nth-child(1) { transition-delay: 0ms; transform: translateX(40px); opacity: 0; }
.ph_page_menu .ph_header_hamburger > div > span:nth-child(2) { transition-delay: 0ms; opacity: 0; }
.ph_page_menu .ph_header_hamburger > div > span:nth-child(3) { transition-delay: 0ms; transform: translateX(-40px); opacity: 0;  }
.ph_page_menu .ph_header_hamburger > div > span:nth-child(4) { transition-delay: 200ms; transform: rotateZ(-45deg); opacity: 1;}
.ph_page_menu .ph_header_hamburger > div > span:nth-child(5) { transition-delay: 200ms; transform: rotateZ(45deg); opacity: 1; }

.ph_mobile_menu { transition-timing-function: cubic-bezier(0.5,0,1,1); border-bottom: 1px solid rgb(45,45,45); transform: scale(1.4,1.4); visibility: hidden; opacity: 0; position: fixed; display: block; left: 0; top: 0; z-index: 190; width: 100%; overflow: hidden; height: 100%;}
.ph_page_menu .ph_mobile_menu { transition-timing-function: cubic-bezier(0,0,0.5,1); opacity: 1; transform: scale(1,1); visibility: visible; }
.ph_page_loading .ph_mobile_menu { transition-timing-function: cubic-bezier(0.5,0,1,1); opacity: 0; transform: scale(1.4,1.4); visibility: hidden;  }
.ph_mobile_menu nav { padding-top: 70px; border-right: 1px solid rgb(45,45,45); height: 100%; border-left: 1px solid rgb(45,45,45); min-width: 80%; position: absolute; display: flex; flex-wrap: wrap; flex-direction: column; align-items: stretch; justify-content: center; left: 50%; top: 0; transform: translateX(-50%); }
.ph_mobile_menu nav a { border-left: 1px solid transparent; color: #fff; text-decoration: none; line-height: 60px; font-size: 20px; position: relative; padding: 0 25px;display: inline-block; position: relative; display: block; text-align: center; }
.ph_mobile_menu nav a:hover { background-color: rgba(0,0,0,0.15); }
.ph_mobile_menu nav a:first-child { border-top: 1px solid rgb(45,45,45); }
.ph_mobile_menu nav a:last-child { border-bottom: 1px solid rgb(45,45,45); }
.ph_mobile_menu nav a.current { border-left: 1px solid #fff; }
.ph_mobile_menu nav a.current::first-letter { color: rgb(15,162,227); font-weight: bold; }

.ph_page_loader { animation: loader 1000ms linear infinite; opacity: 0; border-radius: 50%; width: 30px; height: 30px; display: block; position: fixed; top: 100px; left: 50%; transform: translate(-50%,-50%); border: 1px solid #fff; border-right-color: transparent; border-left-color: transparent; }
.ph_page_loading .ph_page_loader { opacity: 1; top: 120px; }

section { border-bottom: 1px solid rgb(45,45,45); position: relative; width: 100%; overflow: hidden; }
section.fullscreen { height: calc(100% - 70px); }
section.halfscreen { height: calc(50% - 35px); }

section.min-fullscreen { min-height: calc(100% - 70px); }
section.min-halfscreen { min-height: calc(50% - 35px); }
section:first-of-type { padding-top: 70px; }

section:first-of-type.fullscreen { height: 100%; }
section:first-of-type.min-fullscreen { min-height: 100%; }

section.ph_section_init > .ph_content_wrapper > .ph_content { transform: translateX(-20px); opacity: 0; }

.ph_page_loading section { opacity: 0;}

.ph_center_text { max-width: 1080px; position: relative; height: 100%; display: inline-block; left: 50%; transform: translateX(-50%);  }
.ph_center_text > span { padding: 0 40px;  font-weight: 700; letter-spacing: 5px;  transform: translate(0,-50%); opacity: 1; font-size: 15vh; line-height: 15vh; position: relative; top: 50%; display: inline-block; }
.ph_center_text > span .important { --border-width: 2px; --text-color: rgb(15,162,227) !important; }
.ph_section_init .ph_center_text > span { transform: translate(-50px,-50%); opacity: 0;}

.ph_content_wrapper { height: 100%; position: relative; display: block; max-width: 1080px; margin: 0 auto; }

.ph_content { position: relative; display: block; padding: 20vh 40px; }

.ph_content.ph_compressed { padding: 10vh 40px; }
.ph_content p { text-align: justify; margin: 15px 0; line-height: 26px; }
.ph_content img { width: 100%; }
.ph_content .ph_inline_icon { width: unset; }

.ph_content_wrapper:before, .ph_content_wrapper:after, .ph_center_text:before, .ph_center_text:after { content: ''; top: -100%; left: 0; background-color: rgb(45,45,45); width: 1px; height: 1000%; display: block; position: absolute; }
.ph_content_wrapper:after, .ph_center_text:after { left: auto; right: 0; }

.ph_split_layout { position: relative; height: 100%; }
.ph_split_layout > .ph_split { vertical-align: top; position: relative; border-bottom: 1px solid rgb(45,45,45); display: inline-block; width: 50%; }
.ph_section_init .ph_split_layout > .ph_split:nth-child(1) .ph_content { opacity: 0; transform: translateX(-50px); }
.ph_section_init .ph_split_layout > .ph_split:nth-child(2) .ph_content { opacity: 0; transform: translateX(50px); }
.ph_split_layout > .ph_split:nth-child(2):before { content: ''; top: 0; left: -1px; background-color: rgb(45,45,45); width: 1px; height: 1000%; display: block; position: absolute; }
.ph_split_layout > .ph_split.full { height: 100%; border-bottom: none; }
.ph_split_layout > .ph_split.center > .ph_split_inner { position: relative; display: block; top: 50%; transform: translateY(-50%); }

.ph_content form { display: block; width: 100%; }
.ph_form_submit, .ph_content form input, .ph_content form textarea { -webkit-appearance: none; border-radius: 0; box-shadow: none; margin: 10px 0; color: rgb(200,200,200); padding: 20px 20px;font-size: 18px; outline: 0; border: 1px solid rgb(45,45,45); background-color: rgb(25,25,25); display: block; width: 100%; }
.ph_content form textarea { resize: none; height: 150px; width: 100%; min-width: 750px;}
.ph_content form input[type='submit'] { display: none; }

.ph_form_submit { font-weight: 300; overflow: hidden; display: block; position: relative; cursor: pointer; }
.ph_form_submit span { display: inline-block; position: relative; }
.ph_form_submit:hover { color: rgb(15,162,227); border-color: rgb(15,162,227); }
.ph_form_submit:after { opacity: 0; animation: loader 1000ms linear infinite; content: ''; border-radius: 50%; border: 2px solid #fff; border-left-color: transparent; border-right-color: transparent; display: block; position: absolute; width: 20px; transform: translate(-50%,-50%); top: 50%; height: 20px; left: 100%; }
.ph_form_submit:before { opacity: 0; content: ''; display: block; position: absolute; width: 25px; border-bottom: 2px solid rgb(20, 125, 0); border-left: 2px solid rgb(20, 125, 0); transform: translate(-50%,-50%) rotateZ(-45deg); top: 45%; height: 10px; left: 100%; }

form[data-state='sending']  .ph_form_submit span, form[data-state='success']  .ph_form_submit span { transform: translateX(-150%); }
form[data-state='sending']  .ph_form_submit:after { left: 50%; opacity: 1; }
form[data-state='sending']  .ph_form_submit:hover { color: rgb(200,200,200); border-color: rgb(45,45,45);}
form[data-state='success']  .ph_form_submit { color: rgb(20, 125, 0); background-color: rgb(25,25,25); border: 1px solid rgb(20, 125, 0); }
form[data-state='success']  .ph_form_submit:before { left: 50%; opacity: 1; }
form[data-state='sending'] input { background-color: rgb(30,30,30); opacity: 0.8;}

@keyframes loader {
    0% { transform: translate(-50%,-50%) rotateZ(0deg); }
    100% { transform: translate(-50%,-50%) rotateZ(360deg); }
}

.ph_shop_wrapper { display: flex; flex-wrap: wrap; align-items: stretch; }
.ph_shop_wrapper:empty { padding: 40px; display: block; }
.ph_shop_wrapper:empty::after { color: rgb(255, 196, 0); font-weight: 300; display: 'inline-block'; content: 'Es sind keine Produkte verfügbar'; }
.ph_shop_article { cursor: pointer; transform-origin: center; padding: 20px; line-height: 25px; position: relative; display: block; width: 25%; border: 1px solid rgb(45,45,45); border-top-color: transparent; border-left-color: transparent; } 
.ph_section_init.ph_shop_article .meta, .ph_section_init .ph_shop_article .meta { transition-delay: 0ms; opacity: 0; transform: translateX(-20px); }
.ph_section_init.ph_shop_article .price, .ph_section_init .ph_shop_article .price { transition-delay: 0ms;  opacity: 0; transform: translateY(20px); }
.ph_section_init.ph_shop_article img, .ph_section_init .ph_shop_article img { opacity: 0; }
.ph_shop_article:nth-child(4n) { border-right: 0; }

.ph_shop_article:hover img { transform: scale(1.05,1.05);  }

.ph_shop_article .meta { transition-delay: 400ms; display: block; padding: 8px 0 40px 0; position: relative; width: 100%; }

.ph_shop_article .img_wrapper { overflow: hidden; width: 100%; padding-bottom: 75%; display: block; position: relative;}
.ph_shop_article img {   display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.ph_shop_article .price { transition-delay: 800ms; position: absolute; display: inline-block; bottom: 20px; right: 20px; font-weight: bold;}
.ph_shop_article .price > span { font-weight: 300; }

.ph_shop_article .title { display: block; font-weight: bold; font-size: 20px; margin-bottom: 5px;  }
.ph_shop_article .description { display: block; font-weight: 300; font-size: 12px; line-height: 16px;  }
.ph_shop_article .category { font-weight: 300; font-size: 11px; line-height: 16px; opacity: 0.75;  }

.ph_shop_cart { color: #fff; text-decoration: none;padding: 10px 20px; position: absolute; transform: translateY(-50%); font-size: 20px; line-height: 25px; top: 50%; right: 20px; display: inline-block; }

.ph_input_error {color: rgb(255, 196, 0); font-weight: 300; }

.ph_purchase { background: linear-gradient(0deg,rgba(0,0,0,0.5),rgba(0,0,0,0)); z-index: 20; display: block;position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0); }
.ph_purchase span { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transform-origin: center; box-shadow: 5px 5px 10px rgba(0,0,0,0.5); font-weight: 700; width: 200%; text-align: center; position: absolute; white-space: nowrap; transform: translate(-50%,-50%) rotateZ(-25deg); padding: 10px 40px; font-size: 40px; background-color: rgb(255, 196, 0); color: #000; top: 50%; left: 50%; }
.ph_section_init .ph_purchase span { top: 100%; transform: translate(-50%,-50%) rotateZ(-15deg); }

.ph_inline_icon { position: relative; display:inline-block; height: 1em; background-size: cover; background-position: center; vertical-align: baseline; margin: 0 5px; }

.footer { z-index: 20; display: block; text-align: right; width: 100%; position: relative; height: 40px; margin: 0 auto; max-width: 1080px; padding: 10px 10px; margin-top: -40px; opacity: 1; }
.ph_page_loading .footer { opacity: 0; }

/*----TABLETS & SMALL WINDOWS----*/
@media only screen and (max-width: 980px){
    .ph_center_text > span { font-size: 12vw; line-height: 12vw; }
}

/*----PHONES----*/
@media only screen and (max-width: 760px){
    .ph_header_inner { padding: 0 10px; }
    header nav { display: none; }
    .ph_header_hamburger { display: inline-block; }
    .ph_header_icon { position: absolute; top: 50%; transform: translateY(-40%); right: 22px; height: calc(60% - 10px); }
    .ph_center_text > span { font-size: 15vw; line-height: 15vw; }
    .ph_dev_notice { font-size: 12px; }
    .ph_purchase span { font-size: 30px;  width: 200vh; transform: translate(-50%,-50%) rotateZ(-55deg); }
    .ph_content { padding: 10vh 30px; }
    .ph_section_init .ph_purchase span {  transform: translate(-50%,-50%) rotateZ(-45deg); }
    section.switch { height: unset !important; min-height: 0; max-height: auto;}
    .ph_split_layout > .ph_split { width: 100%; }
    .ph_split_layout > .ph_split.center > .ph_split_inner { transform: translateY(0); top: 0;}
    .ph_split_layout > .ph_split:nth-child(1) { border-bottom: 1px solid rgb(45,45,45); }
    .ph_split_layout > .ph_split > .ph_split_inner img { display: block; position: relative; top: 0; width: 50%; margin: 0 auto; }
    .ph_split_layout > .ph_split > .ph_split_inner .ph_content { padding: 5vh 30px; }
    section.fullscreen { height: 100%; }
    .ph_shop_article { width: 50%; border-bottom-color: rgb(45,45,45); }
    .ph_shop_article:nth-child(4n) { border-right: inherit; }
    .ph_shop_article:nth-child(2n) { border-right-color: transparent; }
}

/*----SMALL PHONES----*/
@media only screen and (max-width: 500px){
    .ph_shop_article { width: 100%; }
    .ph_shop_article:nth-child(4n) { border-right-color: transparent; }
    .ph_shop_article:nth-child(2n) { border-right-color: transparent; }
}