:root {
  --bg-inner: white;
  --bg-outer: white;
  --c-red: 255,3,64;
  --c-green: 0,234,145;
  --c-blue: 0,0,255;
  --c-white: 255,255,255;
  --c-black: 0,0,0;
  --ca-cyan: 0,255,255;
  --ca-blue: 90,110,255;
  --ca-green: 0,255,0;
  --c-footer: 84,84,84;

  --text-font: "IBM Plex Mono", monospace, "system-ui", Roboto;
  --text-color: ;
  --text-color-small: ;
  --text-morph-outer: #61ffcc; /* light */
  --text-morph-inner: #3c3c3c;

  --spacer: 23px;
  --radius: 0.23em;
  --sidespace: 0px; /* 42px content p */
  --sidespace-gap: 0px; /* -42px; */
  --spacer-top: 45px;

  --scrollbar-height: 3px;
  --scrollbar-bg: #ddd;
  --scrollbar-progress-color: #00ffff;

  --htp-ethges: 0,234,145;
  --htp-kultur: 0,255,255; 
  --htp-digisev: 255,238,186; 
  --htp-andere: 255,192,203;
  --htp-error: 242,13,13;

  --htp-rotate: 94deg;
  --htp-rotatec: -94deg;

  color-scheme: light;
}




/*
#clock {
  height: 23vmax;
  width: 23vmax;
  border: 1px solid #ff9900;
  position: absolute;
  right: -508px;
  top: -50px;
}
*/
/* Define keyframes for scaling */
@keyframes scaleAnimation {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0); /* Scale down to nothing */
  }
}

#objdate #htp24_do1 { transition: opacity 3s ease-out; opacity: 0; }
#objdate #htp24_do2 { transition: opacity 3s ease-in-out; opacity: 0; }

.no-anim #objectHolder, .no-anim #ObjHTP24 { display: none; }

.no-js #objdate #htp24_do1, .no-anim #objdate #htp24_do1 { opacity: 1; }

.nooooooo-anim #objdate g path {  
      animation: rotate2k24Gradient 23s linear infinite;
      animation-timing-function: linear;
      animation-duration: calc(220s - (23s * var(--rand-factor)));
      animation-delay: calc(23 + (7s * var(--rand-factor)));
}
.nooooooooooo-anim #objdate #htp24_do2 { opacity: 0; animation-name: fadeIn;
    animation-duration: 23s;
    animation-iteration-count: inherit;
    animation-timing-function: linear; }





/*
.no-js #objdate #objekte { transition: all 23s ease; opacity: 1; }
.no-js #objdate { margin-top: -59vh; transition: all 20s ease;  }
#objdate #objekte { transition: all 20s ease; opacity: 0; }
#htp_wp.active #objdate #objekte { transform: all 0.1s ease; opacity: 1; }




#objekte path {
  transform-origin: center; 
  animation: scaleAnimation 2s, fadeOutAnimation 2s; 
  animation-fill-mode: forwards; 
}
*/



.animation-container {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.front-layer {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.svg-animation {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


.svg-animation image { border: 1px solid #ff9900; }
.svg-animation > .htp_obj2 {
  position: relative;
  z-index: 999;
  opacity: 0.7; /* Adjust the transparency as needed */
}

/* linear-gradient: to top, rgba(var(--c-green),0.2), rgba(var(--c-blue),0.15);  */

#HTP24_Edition_Text { display: none; }
#HTP24_Logo_Text { fill: #ffffff; }

#HTP24_Logo_Shape_container, #HTP23_Logo_Shape_container, #htplbg { transition: all 1s; }
#htplogosvg { border: 0; max-width: 25vmin; height: auto; transition: all 0.42s; }
.site-preload #htplogosvg { position: fixed; top: 0; right: 0; z-index: 10000; }
.page-template-page-preview #htplogosvg { position: fixed; right: 53%; z-index: 10000; }
#header #htplogosvg { position: fixed; top: 37px; right: 60px; z-index: 10000; width: 150px;}
#htplogosvg #htplbg { display: none; }
#htplogosvg #HTP23_Logo_Container:hover #HTP23_Logo_Text, #htplogosvg.site-preload #HTP23_Logo_Text, #HTP23_Logo_Shape_container,
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Logo_Text, #htplogosvg.site-preload #HTP24_Logo_Text, #HTP24_Logo_Shape_container { transition: 0.1s; fill: rgb(var(--c-black)); }
#htplogosvg #HTP23_Logo_Container:hover #HTP23_Logo_Shape_container, #htplogosvg.site-preload #HTP23_Logo_Shape_container,
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Logo_Shape_container, #htplogosvg.site-preload #HTP24_Logo_Shape_container { fill: rgba(var(--c-white),1); stroke: #ff0000;}
#htplogosvg.site-preload #HTP23_Logo_Text, #htplogosvg.site-preload #HTP23_Logo_Shape_container,
#htplogosvg.site-preload #HTP24_Logo_Text, #htplogosvg.site-preload #HTP24_Logo_Shape_container { transition: all 4.2s ease; }
.dark #HTP23_Logo_Text, .dark #HTP24_Logo_Text { fill: #000000; }
.dark #HTP23_Logo_Container:hover #HTP23_Logo_Text,
.dark #HTP24_Logo_Container:hover #HTP24_Logo_Text { fill: #ffffff; }

#htplogosvg #HTP24_Logo_Container:hover #HTP24_Logo_Text { display: none !important; }
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Edition_Text { display: inline; }
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Edition_Text path { display: inline; stroke: var(--ca-cyan); fill: var(--c-red); z-index: 20000; }
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Logo_Shape_container {  }
#htplogosvg #HTP24_Logo_Container:hover #HTP24_Logo_Shape_container path { transition: all 1s ease; animation: rotateGradient 2.3s linear infinite; fill: url(#rotatingGradient); }




#htplogosvg:hover #HTP24_Edition_Text path { fill: var(--ca-cyan); stroke: var(--c-red) !important; filter: url(#cyanShadowFilter); }

   



#htpobjpreload { position: relative; display: inline-block; transition: all 1.2s ease; width: 100%; height: 100%;  }
#htpobjpreload svg { margin: 5em auto; max-width: 800px; height: auto; opacity: 1; }
#footer.loaded #htpobjpreload svg { transition: all 2.2s ease; max-width: 10px; opacity: 0;}
#footer.afterload #htpobjpreload { display: none; }

#htp_wp.page-template-page-newsletter [class*="col-"] { padding-top: 0; paddding-bottom: 0; }


.preload #htp24_footer svg { opacity: 0; transition: all 9s ease; }


#htp24_footer {
  position: relative;
  width: 100%;
  height: 10vh; /* Adjust based on your needs */
  overflow: hidden; /* Ensures the SVG is cropped as needed */

}

#htp24_footer svg {
  position: fixed;
  bottom: auto; /* Position the center of the circle 70vh above the bottom of the viewport */
  top: -100%;
  left: -100%;
  z-index: -1;
  transform: translate(-50%,-50%); /* Center horizontally */
  width: 400vw; /* Ensures the circle is large and extends beyond the viewport */
  height: 400vh;
  opacity: 0.8;
  transform-origin: center; 
}

.home #anim_bg { width: 100vw;
    height: 100vh;
    position: absolute;
    top: 42vh;}
#anim_bg svg {     position: fixed;
    width: 100vw;
    height: 100vh;
    /* margin-top: -38vh; */
    top: 0;
    left: 0; }
.preload .htp24_rand { opacity: 0;  }
.htp24_rand { stroke-width: 0.1; transition: all 2.2s; opacity: 0;}

#htp2k24_foot { position: absolute; top: 0; height: 200vh; width: 200vw; left:-100vw; transform: translate(25%, 0%); }




/* path.htp24_rand { display: none; opacity: 0; } */

/* Common animation settings for all layers */
@keyframes htp24_anim {
    0% {
        transform: scale(0.1) rotate(7deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    10% {
        transform: scale(0.2) rotate(14deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    20% {
        transform: scale(0.4) rotate(21deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    30% {
        transform: scale(0.6) rotate(28deg) translate(-50%, -50%);
        opacity: 0.6;
    }
    40% {
        transform: scale(0.9) rotate(35deg) translate(-50%, -50%);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.2) rotate(42deg) translate(-50%, -50%);
        opacity: 0.6;
    }
    100% {
        transform: scale(4) rotate(63deg) translate(-50%, -50%);
        opacity: 0;
    }
}

@keyframes htp24_anim_mob {
    0% {
        transform: scale(0.5) rotate(7deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    10% {
        transform: scale(0.6) rotate(14deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    20% {
        transform: scale(0.7) rotate(21deg) translate(-50%, -50%);
        opacity: 0.3;
    }
    30% {
        transform: scale(0.8) rotate(28deg) translate(-50%, -50%);
        opacity: 0.6;
    }
    40% {
        transform: scale(0.9) rotate(35deg) translate(-50%, -50%);
        opacity: 0.9;
    }
    50% {
        transform: scale(1) rotate(42deg) translate(-50%, -50%);
        opacity: 0.6;
    }
    100% {
        transform: scale(2) rotate(84deg) translate(-50%, -50%);
        opacity: 0;
    }
}

/* Adding randomness using custom properties */
#l1 {
    --rand-factor: 0;
}
#l2 {
    --rand-factor: 1;
}
#l3 {
    --rand-factor: 2;
}
#l4 {
    --rand-factor: 3;
}
#l5 {
    --rand-factor: 4;
}
#l6 {
    --rand-factor: 5;
}
#l7 {
    --rand-factor: 6;
}
#l8 {
    --rand-factor: 7;
}
#l9 {
    --rand-factor: 8;
}
#l10 {
    --rand-factor: 9;
}
#l11 {
    --rand-factor: 10;
}
#l12 {
    --rand-factor: 11;
}

#layer7 {
    --rand-factor: 1;
}

#layer8 {
    --rand-factor: 2;
}

/* Animation for the first layer */
#htp_foot_anim path {
    animation: htp24_anim 23s linear infinite;
    transform-origin: 0% 0%; 
}

/* Animation for the second layer with delay */
#htpx_obj_2 {
    animation: htp24_anim 23s linear infinite;
    animation-delay: 9s; /* Shift by 2 seconds */
}

/* Animation for the third layer with a different delay */
#htpx_obj_3 {
    animation: htp24_anim 23s linear infinite;
    animation-delay: 17s; /* Shift by 4 seconds */
}

/* Optional: Randomized animation delay and duration for each group */
.htp24_rand {
    animation-timing-function: linear;
    animation-duration: calc(220s - (23s * var(--rand-factor)));
    animation-delay: calc(23 + (7s * var(--rand-factor)));
}

@media only screen and (max-width: 767px) {
  .htp24_rand {
      animation: htp24_anim_mob 23s linear infinite;
      animation-timing-function: linear;
      animation-duration: calc(220s - (23s * var(--rand-factor)));
      animation-delay: calc(23 + (7s * var(--rand-factor)));
  }
}










#defaultCanvas0 { position: fixed; top: -11vh; left: -7vw; z-index: -1; pointer-events: none; }

.page-template-page-ptx-location #defaultCanvas0 {top: -3vh; left: 10vw;}


      /* Carousel styling */

.carousel-item{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  padding:25px 50px;
  opacity:0;
  transition: all 0.5s ease-in-out;
}
.arrow{
  border: solid black;
    border-width: 0 3px 3px 0;
    display: inline-block;
    padding: 12px;
}

.arrow-prev{
  left:-30px;
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(135deg);
}
 
.arrow-next{
    right:-30px;
  position:absolute;
  top:50%;
  transform:translateY(-50%) rotate(-45deg);
  }

.light{
  color:white;
}

@media (max-width: 480px) {
      .arrow, .light .arrow {
        background-size: 10px;
        background-position: 10px 50%;
      }
    }
}



.carousel {
  position: relative; }

.carousel.pointer-event {
  touch-action: pan-y; }

.carousel-inner {
  position: relative;
  width: 100%;
  overflow: hidden; }
  .carousel-inner::after {
    display: block;
    clear: both;
    content: ""; }

.carousel-item {
  position: relative;
  display: none;
  float: left;
  width: 100%;
  margin-right: -100%;
  backface-visibility: hidden;
  transition: transform 0.6s ease-in-out; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-item {
      transition: none; } }

.carousel-item.active,
.carousel-item-next,
.carousel-item-prev {
  display: block; }

.carousel-item-next:not(.carousel-item-left),
.active.carousel-item-right {
  transform: translateX(100%); }

.carousel-item-prev:not(.carousel-item-right),
.active.carousel-item-left {
  transform: translateX(-100%); }

.carousel-fade .carousel-item {
  opacity: 0;
  transition-property: opacity;
  transform: none; }

.carousel-fade .carousel-item.active,
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right {
  z-index: 1;
  opacity: 1; }

.carousel-fade .active.carousel-item-left,
.carousel-fade .active.carousel-item-right {
  z-index: 0;
  opacity: 0;
  transition: opacity 0s 0.6s; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-fade .active.carousel-item-left,
    .carousel-fade .active.carousel-item-right {
      transition: none; } }

.carousel-control-prev,
.carousel-control-next {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 15%;
  color: #fff;
  text-align: center;
  opacity: 0.5;
  transition: opacity 0.15s ease; }
  @media (prefers-reduced-motion: reduce) {
    .carousel-control-prev,
    .carousel-control-next {
      transition: none; } }
  .carousel-control-prev:hover, .carousel-control-prev:focus,
  .carousel-control-next:hover,
  .carousel-control-next:focus {
    color: #fff;
    text-decoration: none;
    outline: 0;
    opacity: 0.9; }

.carousel-control-prev {
  left: 0; }

.carousel-control-next {
  right: 0; }

.carousel-control-prev-icon,
.carousel-control-next-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: no-repeat 50% / 100% 100%; }

.carousel-control-prev-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5L4.25 4l2.5-2.5L5.25 0z'/%3e%3c/svg%3e"); }

.carousel-control-next-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5L3.75 4l-2.5 2.5L2.75 8l4-4-4-4z'/%3e%3c/svg%3e"); }

.carousel-indicators {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 15;
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin-right: 15%;
  margin-left: 15%;
  list-style: none; }
  .carousel-indicators li {
    box-sizing: content-box;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    cursor: pointer;
    background-color: #fff;
    background-clip: padding-box;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    opacity: .5;
    transition: opacity 0.6s ease; }
    @media (prefers-reduced-motion: reduce) {
      .carousel-indicators li {
        transition: none; } }
  .carousel-indicators .active {
    opacity: 1; }

.carousel-caption {
  position: absolute;
  right: 15%;
  bottom: 20px;
  left: 15%;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center; }


      
      .carousel-inner,
      .carousel-item,
      .carousel-item.active {
        height: 100vh;
      }

      /* Height for devices larger than 576px */
      @media (min-width: 992px) {
        #introCarousel {
          margin-top: -58.59px;
        }
      }

#HTP24_timer, #HTP_Logo_Shape_contain { display: none; }

.page-template-page-slider #wrapper { top:0; height: 100%;  }
.page-template-page-slider #header { background: none; }
.page-template-page-slider #ObjHTP24 { left: 0; top: -23vh; }
.page-template-page-slider #menu,
.page-template-page-slider #consFootCook { display: none; }
.page-template-page-slider header.header { margin-bottom: -30vh; }
.page-template-page-slider .carousel-inner { position: relative; height: 100%; width: 100%; overflow: hidden; height: calc(90vh - var(--spacer) - 20vh); margin-top: 20vh; border: 1px solid #ffffff;}
.page-template-page-slider #htp24_footer { display: none; margin-bottom: -100vh; margin-top: -120vh; }
.page-template-page-slider #htp_pagetitle { margin-bottom: -18vh; }

.rotated  {
    transform: rotate(var(--htp-rotatec));
    transform-origin: center center;
    position: absolute;
    width: 88vh;
    height: 89vw;
    overflow: hidden;
    left: 25vw;
    top: -29vh;
    background: #000000;
  }
.rotated #wrapper { background: #ffffff; overflow: hidden;}
.rotated #header { background: none; }
.rotated #header #htplogosvg { transform: rotate(90deg); top: 150vh; right: 20px; }
.rotated #container { transform: rotate(var(--htp-rotate)); }
.rotated .animation-container { transform: rotate(var(--htp-rotate)); width: 200vw; }
.rotated #objectHolder { height: 124vh; }

.page-template-page-slider #HTP24_timer {
  display: inline;
  position: relative;
    width: 250px;
    height: 250px;
    margin: auto;
}

.page-template-page-slider #HTP_Logo_Shape_contain {
  display: inherit;
    position: relative;
    width: calc(250px + 0.46rem);
    height: calc(250px + 0.46rem);
    /* background-image: linear-gradient(to right, rgb(var(--ca-green)), rgb(var(--c-blue))); */
    -webkit-mask-image: url('img/htpx/2024/HTP_logo.svg');
    mask-image: url('img/htpx/2024/HTP_logo.svg');
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center;
    border-image: linear-gradient(var(--angle), rgb(var(--ca-green)), rgb(var(--c-blue)), rgb(var(--c-black)), rgb(var(--ca-cyan)), rgb(var(--c-white)), rgb(var(--ca-green)), rgb(var(--c-black)), rgb(var(--c-black)), rgb(var(--c-black)), rgb(var(--c-blue)), rgb(var(--ca-cyan)), rgb(var(--c-white)) ) 1;
    border-width: 0.23rem;
    border-style: solid;
    animation-name: angleRotate;
    animation-duration: 42s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin: 3rem;
}

.page-template-page-slider #HTP_Logo_Shape_contain::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('img/htpx/2024/HTP_logo.svg'); /* Path to the image you want to display */
    background-size: cover; /* Cover ensures the image covers the entire pseudo-element */
    background-position: center; /* Centers the background image */
    z-index: -1; /* Ensures the image stays behind the content of the container if any */
}

.page-template-page-slider #hour_dots, .page-template-page-slider #minute_dots { transition: opacity 0.2s ease; filter: blur(1px); }


#htp2k24_obj10 path { stroke-width: 0; stroke-miterlimit: 1; stroke-color: transparent; }

.page-template-page-slider #content { height: calc(100vh - 70px) !important; }
.page-template-page-slider #defaultCanvas0 { display: none; }
.page-template-page-slider .animation-container { 
    top: -90vh;
    left: -7vw;
    width: 200%;
    height: 200vh;
  }


.page-template-page-slider { 
    height: 100%;
    margin: 0 auto;
}

#htpx_canvas {
    width: 100%;
    height: 100%;
    /* height: calc(50vw * 9 / 16); /* Maintain a 16:9 aspect ratio */
    /* background-color: #00ffff66; /* Example background color */
    /* display: flex;
    justify-content: center;
    align-items: center; */
}

.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden; }
  .embed-responsive::before {
    display: block;
    content: ""; }
  .embed-responsive .embed-responsive-item,
  .embed-responsive iframe,
  .embed-responsive embed,
  .embed-responsive object,
  .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; }

.embed-responsive-21by9::before {
  padding-top: 42.85714%; }

.embed-responsive-16by9::before {
  padding-top: 56.25%; }

.embed-responsive-4by3::before {
  padding-top: 75%; }

.embed-responsive-1by1::before {
  padding-top: 100%; }






/* pretalx migration/sync */
#htp_ptx #wrapper ul li { line-height: 2rem; }
#htp_ptx #menu li { line-height: 1rem !important; }

#htp_ptx .table, #htp_ptx .table { width: 100%; }
#htp_ptx .table th.col-title, #htp_ptx .table td.col-title { vertical-align: middle; }
#htp_ptx .table th.col-space,#htp_ptx .table td.col-space { width:15px !important; }
#htp_ptx .table td.alert { height: 140px; }

#htp_ptx img.htp_ptx_logo { margin: 1rem 0 0.5rem; }

.nav-tabs {
    border-bottom: 1px solid #dee2e6
}

.nav-tabs .nav-item {
    margin-bottom: -1px
}

.nav-tabs .nav-link {
    border: 1px solid rgba(0,0,0,0);
    border-top-left-radius: .1rem;
    border-top-right-radius: .1rem
}

.nav-tabs .nav-link:hover,.nav-tabs .nav-link:focus {
    border-color: #e9ecef #e9ecef #dee2e6
}

.nav-tabs .nav-link.disabled {
    color: #6c757d;
    background-color: rgba(0,0,0,0);
    border-color: rgba(0,0,0,0)
}

.nav-tabs .nav-link.active,.nav-tabs .nav-item.show .nav-link {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff
}

.nav-tabs .dropdown-menu {
    margin-top: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav-pills .nav-link {
    border-radius: .1rem
}

.nav-pills .nav-link.active,.nav-pills .show>.nav-link {
    color: #fff;
    background-color: #074
}

.nav-fill>.nav-link,.nav-fill .nav-item {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified>.nav-link,.nav-justified .nav-item {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block
}



/* menu & action */
.mark_accesskey { color: rgb(var(--c-red)); border-bottom: 1px solid rgb(var(--c-red)); }
#actioncontain { transition: all 0.42s ease; width: 100%; height: 5em; margin: 0; padding: 0; text-align: center; z-index: 500; position: fixed; 
  bottom: calc(-5em - 4px); 
  /* background: rgba(var(--c-footer),0.5); 
  background: linear-gradient(to bottom, white, transparent); */
  background: #ffffff; 
}
#actionline { position: relative; top: -5px; z-index:499; border-top: 0px solid rgb(var(--c-red)); border-bottom: 0px solid rgb(var(--c-footer)); }
#actioncontain.opened, body.active #actioncontain { border-top: 0px solid rgb(var(--c-red)); bottom: -4px; }
body.active #actioncontain { width: calc(100% - 1vmax); height: calc(100vh - 1vmax - var(--spacer-top)); top: calc(0.5vmax + var(--spacer-top)); left: 0.5vmax; right: 0.5vmax; bottom: 0.5vmax;  }
/* box-shadow: inset #ffffff33 0px 30px 30px, #ffffff99 0px 0px 20px; border: 1px solid rgb(var(--ca-cyan)); */
body.active #footerlasche { transition: all 0.1s ease; display: none; right: -200vw; }
body.active #footer { border-color: rgb(var(--ca-cyan)); }
body.active .entry-content { display: none; }



.anim-obj2 { margin: auto; }
.anim-grads { animation: animatedGradient 2s infinite ease; animation-direction: alternate; }

.grad-box {

  flex: auto;
  margin: auto;

  position: relative;
  box-sizing: border-box;

  background-clip: padding-box; /* !importanté */
  border: solid 5px transparent; /* !importanté */
  border-radius: 1em;
  border-image: linear-gradient(to right, rgb(var(--ca-cyan)), rgb(var(--c-green)) 1 100%);
}


#htp_pagetitle { width: 100%; height: 100%; }
#htp_pagetitle text, #htp24_motto { font-size: 5vh; fill: rgb(var(--c-red)); transition: all ease 2s; opacity: 1;  font-weight: 700; 
  text-shadow: 2px 2px 0px rgb(var(--c-white)), 4px 4px 2px rgb(var(--ca-blue)), -5px -5px 5px rgb(var(--ca-cyan));}
#htp_posttitle text { font-size: 2rem; fill: rgb(var(--c-red)); transition: all ease 2s; opacity: 1; font-weight: 700; 
  text-shadow: 0px 3px 3px rgb(var(--ca-cyan)), 2px 0px 3px rgb(var(--c-green));}

#wrapper.preload #htp_pagetitle text,
#wrapper.preload #htp24_motto, #wrapper.preload #htp24_hashtag { opacity: 0; text-shadow: 1px 1px 3rem rgba(var(--c-white),0.5); stroke-width: 3px; stroke: rgb(var(--ca-cyan)); }
#htp24_motto { font-size: 2.2rem; animation: fadeInScale 3s ease-in-out forwards;
    transform-origin: center;
    transform-box: fill-box; font-family: var(--text-font); display: none; }

#htp24_hashtag { font-size: 1rem; 
    transform-origin: center;
    transform-box: fill-box; 
    fill: rgb(var(--c-red)); 
    transition: all ease 2s; 
    font-family: system-ui;
    font-weight: 700;
    text-shadow: 1px 1px 0px rgb(var(--c-white)), 2px 2px 1px rgb(var(--ca-blue)), -3px -3px 3px rgb(var(--ca-cyan));
  }
#objdate #htp24_hashtag { display: none; }
body.active #htp24_motto { transition: all ease-in-out .1s; translate: 0 -260px; }


  @keyframes fadeInScale {
    0% {
      transform: translate(0, -50%) scale(0.3);
      transform-origin: center center;
      opacity: 0;
    }
    75% {
      transform: translate(0, 70%) scale(1.2);
      transform-origin: center center;
    }
    100% {
      transform: translate(0, 70%) scale(1);
      transform-origin: center center;
      opacity: 1;
    }
  }

.htp_postdate {
  position: relative;
  width: 50px;
  height: 50px;
  float: left;
}
.month, .day, .year {
  position: absolute;
  text-indent: -1000em;
  background-image: url();
  background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}

.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}

.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}

.y-23 { background-position: -150px 0;}


#social { /* border-top: 1px inset #00ffff; background: rgba(var(--ca-green),0.23); background: linear-gradient(0deg, rgba(var(--ca-cyan),0.42) 0%, rgba(var(--ca-green),0.42) 100%); */ }
#social .channels { text-align: center; padding: 2em 0; display: flex; justify-content: space-evenly; }
#social .channels svg { height: 42px; width: 42px; fill: rgba(var(--c-footer),0.5); }
#social .channels svg:hover { fill: rgb(var(--c-footer)); }
#social .channels li { display: flex; text-align: center; }
#social .channels a { color: rgba(var(--c-footer),0.5); text-decoration: none; display: block; }
#social .channels a:hover, .channels a:focus { color: rgb(var(--c-footer)); }
/* #social .channels a:hover svg {  filter: drop-shadow(3px 5px 6px rgba(var(--ca-cyan),0.5)); } */


#htploc {
    transition: opacity 0.5s ease-in-out;
    opacity: 1;
}
#htploc.fade {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
#htploc:hover { animation: 0.13s glitch; animation-timing-function: steps(2, end); }

.hamburger {
    cursor: pointer;
    height: 46px;
    left: 58%;
    position: relative;
    top: 58%;
    width: 46px;
  }
  .hamburger g { stroke: #000; transition: all 300ms ease;}
  body.active .hamburger g { stroke: rgb(var(--c-blue)); }

  .hamburger path {
    transition: transform 300ms;
  }
  .hamburger path:nth-child(1) {
    transform-origin: 25% 29%;
  }
  .hamburger path:nth-child(2) {
    transform-origin: 50% 50%;
  }
  .hamburger path:nth-child(3) {
    transform-origin: 75% 72%;
  }
  .hamburger path:nth-child(4) {
    transform-origin: 75% 29%;
  }
  .hamburger path:nth-child(5) {
    transform-origin: 25% 72%;
  }
  .active .pie {
    transform: translateX(0) translateY(0);
  }
  .active .hamburger path:nth-child(1) {
    transform: rotate(45deg);
  }
  .active .hamburger path:nth-child(2) {
    transform: scaleX(0);
  }
  .active .hamburger path:nth-child(3) {
    transform: rotate(45deg);
  }
  .active .hamburger path:nth-child(4) {
    transform: rotate(-45deg);
  }
  .active .hamburger path:nth-child(5) {
    transform: rotate(-45deg);
  }

/* scroll indicate
body {
  background: linear-gradient(
    to right top,
    var(--scrollbar-progress-color) 50%,
    var(--scrollbar-bg) 50%
  );
  background-size: 100%
    calc(100% - 100vh + 100vh + 3px + var(--scrollbar-height) + 1px);
  background-repeat: no-repeat;
}
body::after {
  content: "";
  position: fixed;
  bottom: calc(3px + var(--scrollbar-height));
  top: 0;
  width: 100%;
  z-index: -1;
  background: white;
}
*/

/* generatives */

.gen_container {
  height: 100vh;
  width: 100vw;
  padding: 1rem;
  background-image: radial-gradient(var(--bg-inner) 0%, var(--bg-outer) 100%);
}
.gen_container svg { width: 100%; aspect-ratio: 1; }
.gen_container svg * {
    /*    Removes little gaps between the shapes */
    shape-rendering: crispEdges;
  }

.button_regen {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.5rem;
  margin: 0;
  border-top-left-radius: 12px;
  background: #ffffffcc;
  border: 0.5px solid #555555cc;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  font-weight: 600;
  color: #333;
  font-size: 0.75rem;
}


.button_regen svg { width: 1.25rem; transition: 0.3s ease-in-out transform; }
.button_regen:hover svg { transform: rotate(-45deg); }
.button_regen:focus, .button_regen:active { outline: 2px solid #f06; }
.button_regen:focus svg, .button_regen:active svg { transform: rotate(-90deg); }



/*
.chrome .entry-content p {
   background: linear-gradient(23deg, rgb(var(--c-footer)) 42%, rgb(var(--c-black)) 0%) no-repeat fixed;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
*/
#spinner { margin: 42vh auto; transition: all 0.23; display: inline-block; }
.afterload #spinner { display: none; width: 1px; height: 1px; }

#optOutUsage {
    position: fixed;
    bottom: 8vh;
    width: 80vw;
    left: 50%;
    margin-left: -40vw;
    background: #00ffff;
    padding: 1rem;
    display: inline-block;
    transition: all 2s;
    z-index:1001;
}
#optOutUsage.hidden { top: -50vh; display: none; }
#optOutUsage.overlay {  }

img.icon { object-position: -99999px 99999px; display: inline-block; margin: 0; min-width: 24px; min-height: 24px; background-position: center center; background-repeat: no-repeat; background-size: contain; border: none; }
.icon.htpcookie { background-image: url(img/icons/cookie-color.svg); }
.icon.htpcookie:hover { background-image: url(img/icons/cookie-black.svg); }
#optOutUsage .icon.htpcookie { float: left; background-image: url(img/icons/cookie-black.svg); }
#consFootCook, #consFootCooknoma { position:fixed; bottom: 25px; left: 25px; z-index: 1001; width: 24px; height: 24px; border-bottom: none !important;}
.icon.htpclose { background-image: url(img/icons/x.svg); }

#animSubType {
    display: block;
    position: relative;
    width: 41.5em;
    margin: 0 1rem 0 0;
    border-right: 8px solid rgba(var(--c-black),.75);
    white-space: nowrap;
    overflow: hidden;
}
.htp_before { float:left; transition: all 2s; color: #00ffff; margin-right: 3px; }
.htp_after { opacity: 0; float:right; transition: all 2s; text-align: right; margin: -24px -4px 0 5px; background: #000000; width: 14px; height:100%; color: #00ffff; font-size: 5rem;}
.anim-typewriter .htp_before { color: #ffffff; }
.anim-typewriter .htp_after { position: relative; right: 0; top: 0; z-index: 9999999999999999999; opacity: 1; }


/* BUTTON GLITCH */
button.glitch, #htp_ptx .btn.glitch, #htp_wp .btn.glitch, #htplogosvg:hover .glitch, 
button.glitch:after, .post-password-form input[type="submit"] {
    min-width: 84px;
    min-height: 42px;
    line-height: 42px;
    font-size: 20px;
    padding: 0 15px 0 10%;
    /* background: linear-gradient(0deg, rgb(var(--c-footer)) 5%, rgb(var(--c-black)) 90%, rgb(var(--c-footer)) 5%); */
    border: 1px solid rgb(var(--c-black));
    color: #fff !important;
    font-family: var(--text-font);
    font-weight: 700;
    letter-spacing: 1px;
}

button.glitch, #htp_ptx .btn.glitch, #htp_wp .btn.glitch, article.category-kunst .btn.glitch, .post-password-form input[type="submit"] { transition: all 0.7s ease; background: rgb(var(--c-black)); text-shadow: 1px 1px 0 rgb(var(--c-black));
    mask-image: url(img/htpx/2024/HTP_logo.svg);
    mask-size: cover;
    mask-repeat: no-repeat;
    mask-position: center 87%;
    -webkit-mask-image: url(img/htpx/2024/HTP_logo.svg);
    -webkit-mask-size: cover;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center 87%;
}
button.glitch:hover, #objdate #htp24_hashtag.glitch:hover,
#htp_ptx .btn.glitch:hover { border-bottom-color: rgb(var(--c-red)); background: rgb(var(--c-footer)); }
button.glitch:after,
#htp_ptx .btn.glitch:after, #htplogosvg path.glitch:after, #objdate #htp24_hashtag.glitch { background: linear-gradient(45deg, transparent 3%, rgb(var(--c-red)) 3%, rgb(var(--ca-cyan)) 5%, rgb(var(--c-black)) 5%);}



.glitch,
.glitch:after {
  outline: transparent;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.glitch:after { content: "attr(data-glitch, '$% ERROR &%')"; }

.glitch:after {
  --slice-0: inset(50% 50% 50% 50%);
  --slice-1: inset(80% -6px 0 0);
  --slice-2: inset(50% -6px 30% 0);
  --slice-3: inset(10% -6px 85% 0);
  --slice-4: inset(40% -6px 43% 0);
  --slice-5: inset(80% -6px 5% 0);
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: 6px 0px 0px rgb(var(--ca-cyan));
  text-shadow: -3px -3px 0px rgb(var(--c-red)), 3px 3px 0px rgb(var(--ca-cyan));
  clip-path: var(--slice-0);
  fill: var(--ca-cyan); 
  stroke: var(--ca-cyan);
}

.glitch:hover:after {
  animation: 0.13s glitch;
  animation-timing-function: steps(2, end);
}




@keyframes glitch {
  0% {
    clip-path: var(--slice-1);
    transform: translate(-20px, -10px);
  }
  10% {
    clip-path: var(--slice-3);
    transform: translate(10px, 10px);
  }
  20% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 10px);
  }
  30% {
    background: linear-gradient(145deg, transparent 3%, rgb(var(--c-red)) 3%, rgb(var(--ca-cyan)) 5%, rgb(var(--c-white)) 5%);
    box-shadow: 6px 0px 0px rgb(var(--c-red));
    color: rgb(var(--c-black));
    clip-path: var(--slice-3);
    transform: translate(0px, 5px);
  }
  40% {
    clip-path: var(--slice-2);
    transform: translate(-5px, 0px);
  }
  50% {
    clip-path: var(--slice-3);
    transform: translate(5px, 0px);
  }
  60% {
    clip-path: var(--slice-4);
    transform: translate(5px, 10px);
  }
  70% {
    fill: var(--c-red); 
    stroke: var(--c-red);
    background: linear-gradient(245deg, transparent 3%, rgb(var(--c-red)) 3%, rgb(var(--ca-cyan)) 5%, transparent 5%);
    box-shadow: 0px 0px 1px 6px rgb(var(--c-red));
    color: rgb(var(--c-black));
    clip-path: var(--slice-2);
    transform: translate(-10px, 10px);
  }
  80% {
    clip-path: var(--slice-5);
    transform: translate(20px, -10px);
  }
  90% {
    clip-path: var(--slice-1);
    transform: translate(-10px, 0px);
  }
  100% {
    clip-path: var(--slice-1);
    transform: translate(0);
    fill: var(--ca-cyan); 
    stroke: var(--ca-cyan);
  }
}

@keyframes rotateGradient {
  0% {
    
    fill: #ffffff;
    /* transform-origin: center; transform: rotate(0deg); */
  }
  21% { fill: rgb(var(--ca-cyan)); }
  22% { fill: #ffffff; }
  23% { fill: rgb(var(--ca-blue)); }
  31% { fill: rgb(var(--ca-cyan)); }
  32% { fill: #ffffff; }
  36% { fill: rgb(var(--c-red)); }
  41% { fill: rgb(var(--ca-cyan)); }
  42% { fill: #000000; }
  46% { fill: rgb(var(--ca-cyan)); }
  50% {
    
    fill: #00ffff;
    /* transform-origin: center; transform: rotate(360deg); */
  }
  51% { fill: rgb(var(--ca-blue)); }
  52% { fill: #ffffff; }
  53% { fill: rgb(var(--ca-cyan)); }
  56% { fill: rgb(var(--ca-blue)); }
  60% { fill: rgb(var(--c-red)); }
  68% { fill: rgb(var(--ca-cyan)); }
  73% { fill: rgb(var(--ca-cyan)); }
  78% { fill: rgb(var(--c-red)); }
  83% { fill: rgb(var(--ca-blue)); }
  100% {
    
    fill: #ffffff;
    /* transform-origin: center; transform: rotate(0deg); */
  }
}

@keyframes rotate2k24Gradient {
  0% {
    
    fill: #ffffff;
    /* transform-origin: center; transform: rotate(0deg); */
  }
  21% { fill: rgb(var(--ca-cyan)); }
  22% { fill: #ffffff33; }
  23% { fill: rgb(var(--ca-blue)); }
  31% { fill: rgb(var(--ca-cyan)); }
  32% { fill: #ffffff66; stroke: rgb(var(--ca-cyan));  }
  36% { fill: rgb(var(--c-red)); }
  41% { fill: rgb(var(--ca-cyan)); }
  42% { fill: #00000066; }
  46% { fill: rgb(var(--ca-cyan)); }
  50% {
    stroke: rgb(var(--c-red));
    fill: #00ffff;
    /* transform-origin: center; transform: rotate(360deg); */
  }
  51% { fill: rgb(var(--ca-blue)); }
  52% { fill: #ffffff99; }
  53% { fill: rgb(var(--ca-cyan)); }
  56% { fill: rgb(var(--ca-blue)); }
  60% { fill: rgb(var(--c-red)); }
  68% { fill: rgb(var(--ca-cyan)); stroke: rgb(var(--ca-blue)); }
  73% { fill: rgb(var(--ca-cyan)); }
  78% { fill: rgb(var(--c-red)); }
  83% { fill: rgb(var(--ca-blue)); }
  100% {
    
    fill: #ffffff;
    stroke: : rgb(var(--ca-green)); 
    /* transform-origin: center; transform: rotate(0deg); */
  }
}



/* BACKGROUND MOVE */
.button-background-move {
  font-size: 16px;
  font-weight: 200;
  letter-spacing: 1px;
  padding: 13px 20px 13px;
  outline: 0;
  border: 1px solid black;
  cursor: pointer;
  position: relative;
  background-color: rgba(0, 0, 0, 0);
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-background-move:after {
  content: "";
  background-color: #ffe54c;
  width: 100%;
  z-index: -1;
  position: absolute;
  height: 100%;
  top: 7px;
  left: 7px;
  transition: 0.2s;
}

.button-background-move:hover:after {
  top: 0px;
  left: 0px;
}

@media (min-width: 768px) {
  .button-background-move {
    padding: 13px 50px 13px;
  }
}



/* 2024 glitcher */
  
  .glitcher {
    font-size: 40px; /* Adjust font size as needed */
    color: white;
    position: relative;
    cursor: pointer;
    text-shadow: 0 0 5px #000;
  }

  .glitcher::before,
  .glitcher::after {
    content: attr(data-glitch);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
    visibility: hidden;
    overflow: hidden;
  }

  .glitcher:hover::before,
  .glitcher:hover::after {
    visibility: visible;
  }

  .glitcher::before {
    left: 2px;
    text-shadow: -1px 0 red;
    animation: glitch-skew 2s infinite linear alternate-reverse;
  }

  .glitcher::after {
    left: -2px;
    text-shadow: 1px 0 cyan;
    animation: glitch-skew 0.5s infinite linear alternate;
  }


  @keyframes glitch-skew {
    0% {
      transform: skewX(10deg);
    }
    10% {
      transform: skewX(-10deg);
    }
    20% {
      transform: skewX(10deg);
    }
    30% {
      transform: skewX(-10deg);
    }
    40%, 100% {
      transform: skewX(0deg);
    }
  }





/* Animations */
.anim-typewriter{
  z-index:-1;
  animation: typewriterSub 4s steps(44) 1s 1 normal both,
             blinkTextCursor 500ms steps(44) infinite normal;
}
@keyframes typewriterSub{
  from{width: 0.5em;}
  to{width:41.5em;}
}
@keyframes blinkTextCursor{
  from{border-right-color: rgba(var(--c-white),.88);}
  to{border-right-color: transparent;}
}


.tv-static {
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
  margin: auto;
  height: 300%;
  width: 300%;
  animation: anim 1s steps(2, end) infinite both;
  transform: translate3d(0, 0, 0);
  filter: contrast(300%) brightness(50%);
}

.tv-static svg {
  height: 200%;
  width: 100%;
  transform: scale(2.5);
}


@keyframes anim {
  0% {
    transform: translateX(0px, 0px);
  }
  10% {
    transform: translate(-100px, 100px);
  }
  20% {
    transform: translate(150px, -100px);
  }
  30% {
    transform: translate(-100px, 100px);
  }
  40% {
    transform: translate(100px, -150px);
  }
  50% {
    transform: translate(-100px, 200px);
  }
  60% {
    transform: translate(-200px, -100px);
  }
  70% {
    transform: translateY(50px, 100px);
  }
  80% {
    transform: translate(100px, -150px);
  }
  90% {
    transform: translate(0px, 200px);
  }
  100% {
    transform: translate(-100px, 100px);
  }
}



#obj1_bg path {
    animation: pulse 4s cubic-bezier(0.455, 0.030, 0.515, 0.955) infinite;

    /* Necessary to keep the SVG objects in place while scaling */
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

@keyframes pulse {
    /* Rotating it along with the scale makes it a little bit more fancy */
    0%, 100% { transform: scale(0) rotate(0deg) perspective(80px); }
    35%, 65% { transform: scale(2) rotate(0deg) perspective(500px); }
}

@keyframes animatedGradient {
  from {
    background-size: 100%;
  }

  to {
    background-size: 420%;
  }
}


@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

@keyframes angleRotate {
  from {
    --angle: 0deg;
  }
  to {
    --angle: 360deg;
  }
}
@keyframes anglePulse {
    /* Rotating it along with the scale makes it a little bit more fancy */
    0% { transition: opacity 23s; opacity: 0.05; --angle: 0deg;}
    50% { transition: opacity 23s; opacity: 0.84; --angle: 180deg;}
    100% { transition: opacity 23s; opacity: 0.05; --angle: 360deg;}
}

@keyframes justRotate {

  from {transform: translate(-50%, -50%) rotate(0); transform-origin: center center; }
  to   {transform: translate(-50%, -50%) rotate(360deg); transform-origin: center center;}
  /*
  from {
    -webkit-transform: rotate(0deg); 
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
  }
  */
}

@keyframes fadeOut {

  from { opacity: 1; }
  to   { opacity: 0; }

}


#htpsignbg {
    transform-origin: center; 
    transform: scale(0,0); /* Start with scale 0 (invisible) */
    opacity: 0; /* Fully transparent */
    transition: transform 7s ease-in-out, opacity 7s ease-in-out; /* Ensure smooth transitions */
    animation: scaleHeightWidth 7s ease-in-out forwards; 
}


@keyframes scaleFadeIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
@keyframes scaleHeightWidth {
    0% {
        transform: scale(0, 0); /* Start with height and width at 0 */
        opacity: 0; /* Fully transparent */
    }
    50% {
        transform: scale(.7, .05); /* Scale height to 100%, width remains 0% */
        opacity: 0.5; /* Fade in */
    }
    100% {
        transform: scale(1, 1); /* Scale width to 100%, height remains 100% */
        opacity: 1; /* Fully visible */
    }
}