/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */


/* =========================
   GLOBAL CUSTOM CURSOR CSS
   ========================= */

/* Nativen Cursor NUR auf Elementen mit data-cursor-image ausblenden */
html.has-custom-cursor [data-cursor-image],
html.has-custom-cursor [data-cursor-image] * {
  cursor: none !important;
}

/* Cursor-Container */
#custom-cursor {
  --cursor-size: 72px;
  --cursor-scale: 1;
  --cursor-rotation: 0deg;

  position: fixed;
  top: 0;
  left: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  pointer-events: none;
  z-index: 999999;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.4) rotate(var(--cursor-rotation));
  transform-origin: center center;
  will-change: transform, opacity;
  transition:
    opacity 0.18s ease,
    width 0.22s ease,
    height 0.22s ease,
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Schritt 1: Nur einblenden bei scale(0.4) */
#custom-cursor.is-visible {
  opacity: 1;
}

/* Schritt 2: Grow auf finale Größe */
#custom-cursor.is-visible.is-grown {
  transform: translate(-50%, -50%) scale(var(--cursor-scale)) rotate(var(--cursor-rotation));
}

/* Beim Klicken minimal kleiner */
html.has-custom-cursor body.is-clicking #custom-cursor {
  --cursor-scale: 0.92;
}

/* Die zwei Layer für weichen Crossfade */
#custom-cursor .cursor-layer {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition:
    opacity 0.22s ease,
    transform 0.22s ease;
  transform: scale(0.96);
  will-change: opacity, transform;
}

/* Aktiver Layer */
#custom-cursor .cursor-layer.is-active {
  opacity: 1;
  transform: scale(1);
}

/* Touch-Geräte deaktivieren */
@media (hover: none), (pointer: coarse) {
  html.has-custom-cursor [data-cursor-image],
  html.has-custom-cursor [data-cursor-image] * {
    cursor: auto !important;
  }

  #custom-cursor {
    display: none !important;
  }
}

/* =========================
   ADD-ON: GLASS / BLUR EFFECT
   Aktiv nur bei data-cursor-effect="glass"
   ========================= */

#custom-cursor.has-glass {
  /* sehr leichte transparente Basis, damit backdrop-filter sauber greift */
  background: rgba(255, 255, 255, 0.01);

  -webkit-backdrop-filter: blur(14px) saturate(145%);
  backdrop-filter: blur(14px) saturate(145%);
}

/* optional minimal weicher beim Einblenden */
#custom-cursor.has-glass.is-visible {
  transition:
    opacity 0.22s ease,
    width 0.22s ease,
    height 0.22s ease,
    transform 0.22s ease,
    -webkit-backdrop-filter 0.22s ease,
    backdrop-filter 0.22s ease;
}



/* =========================
   SCROLL FILL HIGHLIGHT TEXT
   ========================= */

.scroll-reveal-text .reveal-phrase {
  color: #C7C3C2; /* Fallback – wird per JS überschrieben */
  /* transition entfernt: JS übernimmt frame-genaue Farbsteuerung */
}

/* is-on bleibt als Hook nutzbar, z. B. für font-weight, underline etc. */
.scroll-reveal-text .reveal-phrase.is-on {
  /* color kommt jetzt ausschließlich per JS */
}

/* Weiß-Variante */
.scroll-reveal-text.reveal-white .reveal-phrase {
  color: #C7C3C2; /* gleicher Startpunkt */
}

.scroll-reveal-text.reveal-white .reveal-phrase {
  color: #5E5C5C;
}
/* ============================================================
   PORTFOLIO FILTER — Custom CSS für Elementor
   Einbinden via: Theme-Datei-Editor > assets > style.css
   ============================================================ */

/* --- Filter-Buttons: Grundzustand --- */
.portfolio-filter-btn {
  cursor: pointer;
  position: relative;
  display: inline-block;
  transition: color 0.4s ease, opacity 0.25s ease;
  user-select: none;
}

/* Animierter Unterstrich als aktiver Indicator */
.portfolio-filter-btn::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #000000;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Filter-Buttons: Hover Zustand --- */
.portfolio-filter-btn:hover,
.portfolio-filter-btn:hover * {
  color: #000000 !important;
  transition: color 0.4s ease;
}

/* --- Filter-Buttons: Aktiver Zustand --- */
.portfolio-filter-btn.is-active {
  opacity: 1 !important;
}

/* Schrift des aktiven Buttons schwarz färben */
.portfolio-filter-btn.is-active,
.portfolio-filter-btn.is-active * {
  color: #000000 !important;
}

.portfolio-filter-btn.is-active::after {
  width: 100%;
}

/* Inaktive Buttons zurückgesetzt wenn mind. 1 Filter aktiv ist */
.portfolio-has-active .portfolio-filter-btn:not(.is-active) {
  opacity: 0.35;
}

/* ============================================================
   GRID — Kacheln ein- und ausblenden mit Blur-Fade
   ============================================================ */

/* Grundzustand aller Kacheln */
.portfolio-grid > * {
  transition: opacity 0.7s ease, filter 0.7s ease;
  opacity: 1;
  filter: blur(0px);
}

/* Ausblenden */
.portfolio-grid > *.is-hidden {
  display: none !important;
}

/* Einblenden: langsamer und stärkerer Blur-Fade */
.portfolio-grid > *:not(.is-hidden) {
  animation: blurFadeIn 0.9s ease forwards;
}

@keyframes blurFadeIn {
  from {
    opacity: 0;
    filter: blur(16px);
  }
  to {
    opacity: 1;
    filter: blur(0px);
  }
}

.blur-header-2{
  background: transparent !important;
  overflow: visible;
  z-index: 10;
}

.blur-header-2::before{
  content: "";
  inset: 0;
  pointer-events: none;
  z-index: -1;

  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);

  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0.10) 0%,
    rgba(255,255,255,0.06)35%,
    rgba(255,255,255,0.02) 70%,
    rgba(255,255,255,0) 100%
  );

  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,0.7) 55%,
    rgba(0,0,0,0.25) 82%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 25%,
    rgba(0,0,0,0.7) 55%,
    rgba(0,0,0,0.25) 82%,
    rgba(0,0,0,0) 100%
  );
}

/* ============================================================
   Background - Blur
   ============================================================ */
.blur-bg {
    backdrop-filter: blur(10px); /* Stärke des Blurs */
    -webkit-backdrop-filter: blur(10px); /* Für Safari */
}

.no-backdrop-support .blur-bg {
    background: #f4f4f4; /* Statische Farbe, wenn Blur nicht funktioniert */
}

/* ANPASSUNGEN RECHTLICHE SEITEN: HEADER & FOOTER | Container 2b546cd (Header) auf Seite 10599 (AGB) & Container 2d0f0b1 (Header) auf Seite 10672 (Impressum) geräteübergreifend ausblenden */
.elementor-element.elementor-element-2b546cd,
.elementor-element.elementor-element-2d0f0b1 {
    display: none !important;
}

body.page-id-10599 footer#site-footer,
body.page-id-10672 footer#site-footer,
body.page-id-10683 footer#site-footer {
    display: none !important;
}

/* ============================================================
   Marquee-FIX
   ============================================================ */

/* Track immer einzeilig halten */
selector .premium-adv-carousel__items,
selector .swiper-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}


/* Jedes Slide exakt so breit wie sein Inhalt */
selector .premium-adv-carousel__item-outer-wrapper,
selector .premium-adv-carousel__item,
selector .swiper-slide {
    flex: 0 0 auto !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    height: auto !important;
}


/* Elementor-Template-Wrapper ebenfalls nicht begrenzen */
selector .premium-adv-carousel__item > .elementor,
selector .premium-adv-carousel__item > .elementor-template,
selector .swiper-slide > .elementor,
selector .swiper-slide > .elementor-template {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
}


/* Äußerster Container des jeweiligen Templates */
selector .marquee-item {
    --width: max-content !important;
    --content-width: max-content !important;

    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;

    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}


/* Auch bei einem "Boxed"-Elementor-Container */
selector .marquee-item > .e-con-inner {
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    flex-wrap: nowrap !important;
}


/* Einzelne Widgets dürfen nicht schrumpfen */
selector .marquee-item > .elementor-element,
selector .marquee-item > .e-con-inner > .elementor-element {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}


/* Text innerhalb eines Statistik-Elements nie umbrechen */
selector .marquee-item .elementor-widget-container,
selector .marquee-item .elementor-heading-title,
selector .marquee-item .elementor-widget-text-editor,
selector .marquee-item .elementor-widget-text-editor p {
    white-space: nowrap !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}