/*
Theme Name: Hashtag Child
Theme URI: http://demo.bravisthemes.com/hashtag/
Template: hashtag
Author: Bravis-Themes
Author URI: https://themeforest.net/user/bravis-themes/
Description: Hashtag - Personal Blog Wordpress theme is a multipurpose personal blog theme. User can use this theme for various niches also. Full featured ecommerce pages has been added and adjusted with all niches. User can also use this theme as Magazine. All required pages has been added here. All required pages adjusted with each niches.
Tags: cooking blog,creative blog,fashion blog,megazine,personal blog,portfolio,travel blog,yoga blog
Version: 1.0.1.1760037998
Updated: 2025-10-09 19:26:38

*/

.pxl-menu-primary .sub-menu li a:before, .pxl-menu-primary .children li a:before {
    content: "\F231";
    font-family: 'bootstrap-icons';
    position: absolute;
    top: 50%;
    left: 20px;
    font-size: 14px;
    font-weight: 400;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translate(0, -50%);
    -khtml-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%);
    -webkit-transition: all 0.3s ease-in-out, color 0s;
    -khtml-transition: all 0.3s ease-in-out, color 0s;
    -moz-transition: all 0.3s ease-in-out, color 0s;
    -ms-transition: all 0.3s ease-in-out, color 0s;
    -o-transition: all 0.3s ease-in-out, color 0s;
    transition: all 0.3s ease-in-out, color 0s;
  }

#pxl-main {
    padding: 40px 0;
}

.pxl-loader.style-text .preloader-inner .loading-text {
    font-size: calc(10px + 1.8vw);
    line-height: 60px;
    font-weight: 700;
    text-align: center;
    user-select: none;

}

@media screen and (max-width: 575px) {
  .pxl-h1-size, .pxl-heading h1.pxl-item--title, .wp-title h1.pxl-item--title, .pxl-heading h1.el--title, .wp-title h1.el--title, .single-post .pxl-post--header .pxl-post--title, .pxl-post-carousel4 .item--title, .pxl-post-slider1 .item--title, .pxl-post-slider2 .item--title {
    font-size: 32px;
	line-height: 34px;
  }
}

/* ==========================================================================
   KEN-BURNS-EFFEKT für Beitragsbilder
   --------------------------------------------------------------------------
/* Wrapper sicher machen */
.single-post .pxl-post--image {
  overflow: hidden;
  position: relative;
}

/* Bild füllt den Rahmen und animiert sanft */
.single-post .pxl-post--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* Ken Burns: langsames Zoomen + leichtes Panning */
  transform-origin: center center;
  animation: kenburns 14s ease-in-out infinite alternate;
  will-change: transform;
}

/* Keyframes: zoom + leichtes Verschieben */
@keyframes kenburns {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.4) translate(-4%, -4%); }
}

/* Optional: nur beim Hover (statt Dauereffekt) */
/*
.single-post .pxl-post--image img {
  transform: scale(1) translate(0,0);
  transition: transform 8s ease-in-out;
  animation: none;
}
.single-post .pxl-post--image:hover img {
  transform: scale(1.18) translate(-2%, -2%);
}
*/

/* Barrierearmut: Animationen aus, wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
  .single-post .pxl-post--image img {
    animation: none !important;
    transform: none !important;
  }
}

/* Progress-Bar immer voll sichtbar – egal in welchem Scroll-State */
.progress-container-top {
  opacity: 1 !important;
  transition: none !important;   /* verhindert weiches Ausblenden */
  animation: none !important;    /* falls ein Keyframe die Opazität ändert */
  z-index: 1000 ! important
}

/* gängige Scroll-/Header-States pauschal überschreiben */
html.is-scrolling .progress-container-top,
html.scrolling .progress-container-top,
body.is-scrolling .progress-container-top,
body.scrolling .progress-container-top,
header.is-scrolled .progress-container-top,
header.scrolled .progress-container-top,
.sticky-header:not(.stuck) .progress-container-top {
  opacity: 1 !important;
}

a {
  color: #700404;
  font-weight: 600 !important;
}

.elementor-191 .elementor-element.elementor-element-5641acc:not(.elementor-motion-effects-element-type-background),
.elementor-191 .elementor-element.elementor-element-5641acc > .elementor-motion-effects-container > .elementor-motion-effects-layer {
    background-size: 110%;
    background-position: center center;
    background-repeat: no-repeat;
    animation: kenburns-bg 25s ease-in-out infinite alternate;
    will-change: background-size, background-position;
}

/* Ken-Burns nur über Background */
@keyframes kenburns-bg {
    0% {
        background-size: 110%;
        background-position: center center;
    }
    100% {
        background-size: 120%;
        background-position: top right;
    }
}


.pxl-item--title {
    position: relative;
    display: inline-block;
    padding: 6px 12px;
    backdrop-filter: blur(2px);
}

.pxl-item--title::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 6px;
    z-index: -1;
}