:root, :before, :after{
  --bg-2:#FFFFFF;  
  --color-1:#757575; 
  --color-1a:rgb(117 117 117 / 8%);
  --color-2:#1e1e1e;
  --color-2a:rgb(30 30 30 / 8%);
  --color-3:#000000; 
  --color-3a:rgb(0 0 0 / 8%);
  --color-4:#23d468;
  --color-4a:rgb(35 212 104 / 8%);
  --color-5:#7ab929;
  --color-5a:rgb(122 185 41 / 8%);
  --color-border:#EEEEEE;
  --color-border-form:#E0E0E0;
  --color-border-dark:#424242;
  --color-alert:#FF3333;
  --color-fb:#1877f2;
  --color-tw:#000000;
  --color-ig: #E1306C;
  --color-tk:#000000;
  --color-yt: #f60029;
  --color-ln: #0a66c2;
  --color-wa:#2bb240;
  --color-tg:#0088cc;
  --color-ml: #d59900;
  --rounded-1:8px;
  --rounded-2:16px;
  --rounded-3:24px;
  --hover-opacity:34%;
  --transition-default:all 0.34s;
  --shadow-default:2px 5px 13px rgb(0 0 0 / 8%);
  --shadow-neumorp:-2px -2px 4px rgba(255,255,255,.2), 2px 2px 12px rgba(0,0,0,.2);
  --shadow-inset:inset -2px -2px 4px rgba(255,255,255,.2), inset 2px 2px 12px rgba(0,0,0,.2);
}



body, html{color:var(--color-1);}
html{background-color:var(--bg-2);}
a, .btn, button{transition:var(--transition-default); cursor:pointer}
a, button{color:var(--color-4); fill:var(--color-4);}
a:hover, button:hover{color:var(--color-3); fill:var(--color-3);}
.btn, a.btn, button.btn{background-color:var(--color-4); color:var(--color-3); fill:var(--bg-2); border-radius:var(--rounded-1);}
.btn:hover, a.btn:hover, button.btn:hover{background-color:var(--color-3); color:var(--bg-2); fill:var(--bg-2);}
.btn-outline{border:2px solid var(--color-4); color:var(--color-4); fill:var(--color-4); background-color:transparent; border-radius:var(--size-6);}
.btn-outline:hover{border:2px solid var(--color-3); color:var(--color-3); fill:var(--color-3);}
b{color:var(--color-3);}
.form-box{background-color:var(--bg-2); border-radius:var(--rounded-1);}
.form-label b{color:var(--color-alert);}
.form-field{border-color:var(--color-border-form); background-color:transparent; border-radius:var(--rounded-1);}
.form-icon{background-color:var(--bg-2); border-radius:var(--rounded-1); fill:var(--color-1);}

.ccr-dummy-frame{border-color:var(--color-border-form); border-radius:4px;}
.ccr-dummy-frame, .ccr-dummy-frame svg, .ccr-dummy-right{transition:var(--transition-default);}
.ccr-real:hover + .ccr-dummy .ccr-dummy-frame{border-color:var(--color-3);}
.ccr-real:checked + .ccr-dummy .ccr-dummy-frame{border-color:var(--color-4); background-color:var(--color-4); fill:var(--bg-2);}
.ccr-real:checked + .ccr-dummy .ccr-dummy-frame svg{height:0.6rem; opacity:1;}
.ccr-real:checked + .ccr-dummy .ccr-dummy-right{color:var(--color-4); font-weight:bold;}



a.img-frame:hover{opacity:var(--hover-opacity);}
.img-frame > img{transition:var(--transition-default);}
.img-frame > img.lazyloaded, .img-frame > iframe.lazyloaded{opacity:1;}
.thumb-loading:before{animation:skeleton-loading 0.5s linear infinite alternate; background-color:var(--color-2);}
@-webkit-keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}
@keyframes skeleton-loading{0%{opacity:0.05;}100%{opacity:0.15;};}



.section-title{color:var(--color-3);}
.tooltip{background-color:var(--bg-2); color:var(--color-3); border-radius:var(--size-1);}



header{background-color:var(--color-3);}
.header-logo{fill:var(--color-3);}
.header-logo:hover{opacity:var(--hover-opacity);}

.choice-lang, .nav-link{color:var(--bg-2) !important;}
.choice-lang:hover{opacity:1; filter:grayscale(100%);}
.lang-id .choice-id, .lang-en .choice-en, .lang-de .choice-de, .nav-curr{color:var(--color-4) !important; filter:grayscale(0%);}



.main-nav{background-color:var(--color-3);}
.nav-link:hover{opacity:var(--hover-opacity);}
.nav-curr{color:var(--color-4) !important; opacity:1 !important;}



.section-dark{background-color:var(--color-3); color:var(--bg-2);}
.section-dark .section-title{color:var(--bg-2);}
.section-dark .btn:hover{background-color:var(--bg-2); color:var(--color-4);}



.section-intro{background:url(../img/bg-1.webp) no-repeat fixed center var(--color-3); background-size:cover;}
.sib-title{color:var(--color-3);}
.sib-content{background-color:var(--bg-2);}



.section-border-logo{background-color:var(--bg-2); border-color:var(--color-border);}



.section-herrmann{background:url(../img/bg-2.webp) no-repeat fixed center var(--color-3); background-size:cover;}
.section-herrmann .site-container{display:grid;}
.sph-left{padding:var(--size-5); background-color:var(--bg-2); display:grid; grid-gap:var(--size-3); grid-auto-rows:min-content;}
.sph-left .section-title{margin-bottom:var(--size-3);}
.sph-left p{line-height:150%;}
.sph-right{--aspect-ratio:400/711;}



.section-instagram .site-container{display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); grid-gap:var(--size-4);}
.ig-box:before{content:none;}
.ig-box iframe{position:static; height:revert-layer; padding-bottom:10px; background-color:var(--bg-2); border:1px solid var(--color-border);}


.section-gallery-1{background:url(../img/bg-5.webp) no-repeat fixed center var(--color-3); background-size:cover;}
.section-gallery-1 .site-container{display:grid;}
.sg1-container{background-color:var(--bg-2); padding:var(--size-5);}
.sg1-list{display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr)); grid-gap:var(--size-1);}
.sg1-box{--aspect-ratio:1/1;}
.sg1-desc{margin-top:var(--size-4); line-height:150%; display:grid; grid-gap:var(--size-1);}



.section-calendar{background-color:#F0F4F9;}
.calendar-note{padding:12px;}



.section-methodology{background:url(../img/bg-3.webp) no-repeat fixed center var(--color-3); background-size:cover;}
.section-methodology .site-container{display:grid; grid-gap:var(--size-7);}
.section-methodology .section-title{margin-bottom:var(--size-3);}
.section-methodology-right{display:flex; justify-content:flex-end;}
.section-methodology-right .sib-content, .section-methodology-right .sib-arrow{grid-row:1/2;}
.section-methodology-right .sib-content{padding-right:var(--size-5);}
.section-methodology-right .sib-arrow{grid-column:1/2; transform:scale(-1, -1);}



.section-training-ground{display:grid;}
.stg-info{padding:var(--size-5); line-height:150%;}
.stg-info *{text-align:center;}
.stg-map{--aspect-ratio:1/1; max-height:610px;}



.section-contact{background:url(../img/bg-4.webp) no-repeat fixed center var(--color-3); background-size:cover;}
.section-contact .site-container{display:grid;}
.section-contact .section-title{margin-bottom:var(--size-2); font-size:1.5rem;}
.scu-left, .scu-right{padding:var(--size-5); backdrop-filter:blur(13px); display:grid; grid-gap:var(--size-4); grid-auto-rows:min-content;}
.scu-left{background-color:rgb(255 255 255 / 89%);}
.scu-right{background-color:rgb(0 0 0 / 89%);}
.scu-box{line-height:150%;}
.scu-box .jotform{margin-top:var(--size-3);}
.scu-right{color:var(--bg-1);}
.scu-right .section-title{color:var(--bg-2);}
.scu-list{display:grid; grid-gap:var(--size-3);}
.scu-row{display:grid; grid-template-columns:auto 1fr; grid-gap:var(--size-3); color:var(--bg-2); fill:var(--color-4) !important;}
.scu-row:hover{color:var(--color-4);}
.scu-label{justify-content:flex-start;}
.scu-address .srs-action-button:hover{background-color:var(--bg-2); color:var(--color-4);}



.section-dsj{background:url(../img/bg-1.webp) no-repeat fixed center var(--color-3);}
.section-dsj .sph-right{--aspect-ratio:655/416.72;}



.section-border-contact .section-title, .sbc-note-label{text-align:center;}
.sbc-note{margin-top:var(--size-5); display:grid; grid-gap:var(--size-2);}
.sbc-note-label{line-height:150%;}



.section-photo-gallery, .section-photo-gallery .section-title{color:var(--bg-2);}
.section-photo-gallery .section-title-primary b{color:var(--color-4);}
.section-photo-gallery .section-title-secondary{color:var(--color-border);}
.section-photo-gallery{background-color:var(--color-2);}
.spg-action .btn:hover{background-color:var(--bg-2); color:var(--color-4);}

.index-photo-gallery .section-title{text-align:center;}



.section-register{background:url(../img/bg-6.webp) no-repeat fixed center var(--color-3);}
.register-tab-curr, .register-form{background-color:var(--bg-2) !important;}
.register-tab-button{background-color:rgb(255 255 255 / 34%); backdrop-filter:blur(5px); color:var(--color-1);}
.register-tab-button:hover{background-color:rgb(255 255 255 / 55%);}
.register-tab-curr{color:var(--color-3) !important; cursor:default !important;}
.register-form-title{color:var(--color-3);}
.rfl-mandatory{color:var(--color-alert);}







footer{background-color:var(--color-3); color:var(--bg-2); border-top:1px solid var(--color-border-dark);}
footer .site-container{padding:var(--body-padding); display:grid; grid-gap:var(--size-3);}
.footer-socmed{gap:var(--size-4);}
.footer-socmed-link{fill:var(--color-1);}
.footer-socmed-link svg{width:auto; height:1.313rem;}
.footer-socmed-facebook:hover{fill:var(--color-fb);}
.footer-socmed-x:hover{fill:var(--color-tw);}
.footer-socmed-instagram:hover{fill:var(--color-ig);}
.footer-socmed-tiktok:hover{fill:var(--color-tk);}
.footer-socmed-youtube:hover{fill:var(--color-yt);}
.footer-socmed-whatsapp:hover{fill:var(--color-wa);}
.footer-socmed-linkedin:hover{fill:var(--color-ln);}
.footer-copyright{text-align:center; font-size:0.75rem;}



.share-facebook{fill:var(--color-fb);}
.share-x{fill:var(--color-tw);}
.share-whatsapp{fill:var(--color-wa);}
.share-telegram{fill:var(--color-tg);}
.share-box:hover{fill:var(--color-4);}



.rancak-popup, .rancak-popup-overlay, .rancak-popup-container{top:0; left:0; width:100%; height:100%;}
.rancak-popup{position:fixed; z-index:calc(var(--max-zindex) - 1000);}
.rancak-popup-container{position:relative; z-index:1000; padding:var(--body-padding);}
.rancak-popup-overlay{position:absolute; z-index:2000; background-color:var(--color-2); opacity:34%;}
.rancak-popup-box{position:relative; z-index:3000; width:100%; max-width:610px; max-height:100%; padding:var(--body-padding); background-color:var(--bg-2);
border:1px solid var(--color-border); border-radius:var(--rounded-2); box-shadow:var(--shadow-default); overflow:hidden; overflow-y:auto;}
.rancak-popup-close{--button-size:var(--size-5); position:absolute; z-index:2000; color:var(--color-4);
top:calc(var(--button-size) / 3 * -1); right:calc(var(--button-size) / 3 * -1);}
.rancak-popup-close:hover{color:var(--color-2);}
.rancak-popup-close svg{width:var(--button-size); height:auto;}



.svgicon-gimmick{fill:var(--bg-2);}
.bg-blur{position:absolute; z-index:1; top:0; left:0; width:100%; height:100%; backdrop-filter:blur(5px);
background:linear-gradient(135deg,  rgb(255 255 255 / 21%) 0%,rgb(255 255 255 / 0%) 100%);}
.float-whatsapp{position:fixed; bottom:var(--size-4); right:0; cursor:pointer; z-index:calc(var(--max-zindex) - 10000); padding:var(--size-4); display:block;}
.float-whatsapp svg{width:auto; height:var(--size-6);}



.vbox-overlay{z-index:calc(var(--max-zindex) - 1000);}
.vbox-container{padding:var(--size-7) 0;}
.vbox-fit .vbox-child img, .vbox-fit .vbox-child.venoratio{max-height:calc(100vh - calc(var(--size-7) * 2));}







@media screen and (min-width:0px) and (max-width:1023px){
  .header-togglemenu svg{transition:var(--transition-default);}
  .header-togglemenu .svgicon-menu{fill:var(--bg-2);}
  .header-togglemenu .svgicon-close{fill:var(--color-4);}
  
  

  .main-nav{display:grid; width:100%; border:1px solid var(--color-border-dark); border-radius:var(--rounded-2);
  max-height:calc(100vh - var(--header-height) - var(--size-4)); overflow:hidden; overflow-y:auto;}
  .nav-link{padding:var(--size-4);}
  .nav-link:not(:first-child){border-top:1px dashed var(--color-border-dark);}
  
  
  
  @media (orientation:portrait) and (max-width:480px){
    .section-intro{background-image:url(../img/bg-1-mobile-preload.webp);}
  }
  
  
  
  @media (orientation:portrait) and (min-width:481px) and (max-width:767px){
    .section-intro{background-image:url(../img/bg-1-mobile.webp);}
  }
  
  
  
  .sph-right{grid-row:1/2;}



  .calendar-frame{--aspect-ratio:3/4;} 
  
  
  
  .section-methodology .section-title{font-size:2rem;}
  
  
  
  .vbox-close{padding:var(--size-4)}
}







@media screen and (min-width:640px){
  .section-training-ground{grid-template-columns:1fr 1fr;}
  .stg-info *{text-align:right;}
}







@media screen and (min-width:1024px){
  .section-herrmann .site-container{grid-template-columns:1fr 400px;}
  
  
  
  .sg1-list{grid-template-columns:repeat(auto-fit, minmax(160px,1fr));}
  
  
  
  .calendar-frame{--aspect-ratio:10/6;}
  
  
  
  .section-contact .site-container{grid-template-columns:repeat(2,1fr);}
  
  
  
  .section-dsj .site-container{grid-template-columns:655px 1fr;}
  
  
  
  .vbox-close{padding:var(--size-5)}
}