/*
Theme Name:   Hello Elementor Child
Theme URI:    https://uichemy.ima.vc/
Description:  Child-Theme von Hello Elementor — eigene PHP-Hooks & CSS, updatesicher.
Author:       IMA
Template:     hello-elementor
Version:      1.0.3
Text Domain:  hello-elementor-child
*/



/* ===================== BUTTONS ===================== */

/* === GLUE Button-Varianten ===
   Klasse vom Typ-Dropdown (prefix_class) landet auf dem WRAPPER → darum
   immer ".. .elementor-button" ansprechen. Deckt auch manuelle CSS-Klasse ab. */
/* EFFEKT = clip-path-Ellipsen-Sweep von glue-net.org (.cta-banner .btn-primary):
   eine farbige Ellipse (::before, z-index:-1) wischt von links über den Button.
   isolation:isolate hält das ::before im Button; overflow:hidden clippt am Radius. */
.elementor-button-glue-blau .elementor-button,.glue-btn-blau .elementor-button,
.elementor-button-glue-lila .elementor-button,.glue-btn-lila .elementor-button,
.elementor-button-glue-gruen .elementor-button,.glue-btn-gruen .elementor-button,
.elementor-button-glue-weiss .elementor-button,.glue-btn-weiss .elementor-button{
  position:relative !important;overflow:hidden !important;isolation:isolate;
  border:2px solid transparent !important;
  transition:color .5s cubic-bezier(.65,0,.35,1),border-color .5s ease,box-shadow .5s ease !important;}

.elementor-button-glue-blau .elementor-button::before,.glue-btn-blau .elementor-button::before,
.elementor-button-glue-lila .elementor-button::before,.glue-btn-lila .elementor-button::before,
.elementor-button-glue-gruen .elementor-button::before,.glue-btn-gruen .elementor-button::before,
.elementor-button-glue-weiss .elementor-button::before,.glue-btn-weiss .elementor-button::before{
  content:"";position:absolute;inset:0;z-index:-1;
  clip-path:ellipse(0% 150% at 0% 50%);
  transition:clip-path .55s cubic-bezier(.65,0,.35,1);}

.elementor-button-glue-blau .elementor-button:hover::before,.glue-btn-blau .elementor-button:hover::before,
.elementor-button-glue-lila .elementor-button:hover::before,.glue-btn-lila .elementor-button:hover::before,
.elementor-button-glue-gruen .elementor-button:hover::before,.glue-btn-gruen .elementor-button:hover::before,
.elementor-button-glue-weiss .elementor-button:hover::before,.glue-btn-weiss .elementor-button:hover::before{
  clip-path:ellipse(150% 150% at 0% 50%);}

/* Blau #42BFF0 → Sweep GRÜN #afc676 (= Hero-CTA der Seite, 1:1) */
.elementor-button-glue-blau .elementor-button,.glue-btn-blau .elementor-button{background-color:#42BFF0 !important;color:#fff !important;}

.elementor-button-glue-blau .elementor-button::before,.glue-btn-blau .elementor-button::before{background:#afc676;}

.elementor-button-glue-blau .elementor-button:hover,.glue-btn-blau .elementor-button:hover{color:#fff !important;border-color:#afc676 !important;box-shadow:0 14px 32px rgba(175,198,118,.40) !important;}

/* "GLUE Blau → Lila": Basis BLAU #42BFF0 → Sweep LILA #5B1A6B (= .v2-login-btn der Seite) */
.elementor-button-glue-lila .elementor-button,.glue-btn-lila .elementor-button{background-color:#42BFF0 !important;color:#fff !important;}

.elementor-button-glue-lila .elementor-button::before,.glue-btn-lila .elementor-button::before{background:#5B1A6B;}

.elementor-button-glue-lila .elementor-button:hover,.glue-btn-lila .elementor-button:hover{color:#fff !important;border-color:#5B1A6B !important;box-shadow:0 14px 32px rgba(91,26,107,.36) !important;}

/* "GLUE Weiß → Lila": Basis WEISS #fff (feine Linie + Lila-Text) → Sweep füllt LILA #5B1A6B (= .zg-footer-cta .btn-primary).
   WICHTIG: Rand im Ruhezustand = feine Linie rgba(91,26,107,.08) (--rl-line), NICHT voll-lila; lila erst beim Hover. */
.elementor-button-glue-weiss .elementor-button,.glue-btn-weiss .elementor-button{background-color:#fff !important;color:#5B1A6B !important;border:1px solid rgba(91,26,107,.08) !important;}

.elementor-button-glue-weiss .elementor-button::before,.glue-btn-weiss .elementor-button::before{background:#5B1A6B;}

.elementor-button-glue-weiss .elementor-button:hover,.glue-btn-weiss .elementor-button:hover{color:#fff !important;border-color:#5B1A6B !important;}

/* Pfeil-Icon nach rechts — transition AUF DER BASIS, damit es in BEIDE
   Richtungen animiert (sonst schnappt der Pfeil beim Weg-Hovern hart zurück) */
.elementor-button-glue-blau .elementor-button .elementor-button-icon,
.elementor-button-glue-lila .elementor-button .elementor-button-icon,
.elementor-button-glue-gruen .elementor-button .elementor-button-icon,
.elementor-button-glue-weiss .elementor-button .elementor-button-icon{transition:transform .4s ease;}

.elementor-button-glue-blau .elementor-button:hover .elementor-button-icon,
.elementor-button-glue-lila .elementor-button:hover .elementor-button-icon,
.elementor-button-glue-gruen .elementor-button:hover .elementor-button-icon,
.elementor-button-glue-weiss .elementor-button:hover .elementor-button-icon{transform:translateX(6px);}

/* === Pfeil-Icon STANDARD auf ALLEN Buttons (1:1 glue-net .btn-arrow-icon) ===
   SVG arrow-right als CSS-Maske → erbt die Textfarbe (currentColor),
   immer sichtbar, rückt bei Hover 6px nach rechts (0.55s).
   :not(:has(.elementor-button-icon)) = nur wenn der Button kein eigenes Elementor-Icon hat (kein Doppel-Pfeil). */
.elementor-button:not(:has(.elementor-button-icon)) .elementor-button-content-wrapper::after{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-left:8px;align-self:center;
  background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23fff'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='5'%20y1='12'%20x2='19'%20y2='12'/%3E%3Cpolyline%20points='12%205%2019%2012%2012%2019'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .55s cubic-bezier(.4,0,.2,1);}

.elementor-button:hover .elementor-button-content-wrapper::after{transform:translateX(6px);}

/* === Menü-Links + Buttons: weicher Farb-Übergang wie glue-net.org ===
   glue-net: ".header-nav a{transition:color .2s}". Elementor faded nur den
   Pointer-Underline, NICHT die Farbe → Farbe wechselt sonst hart. */
.elementor-nav-menu .elementor-item,.elementor-nav-menu a{
  transition:color .2s ease,background-color .2s ease,fill .2s ease !important;}

.elementor-button{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,box-shadow .2s ease !important;}

/* === GLUE Button: weicher Farbübergang — Farbe AUS ELEMENTOR (Klasse glue-btn-hover) === */
.glue-btn-hover .elementor-button{
  transition:background-color .45s cubic-bezier(.65,0,.35,1),
             color .45s ease,border-color .45s ease,box-shadow .45s ease !important;}

.glue-btn-hover .elementor-button:hover .elementor-button-icon{
  transform:translateX(6px);transition:transform .5s cubic-bezier(.65,0,.35,1);}

/* ===== GLUE Transparent (Variante, OHNE Pfeil) ===== */
.elementor-button-glue-transparent .elementor-button{
  background-color:#FFFFFF1A !important;
  border:1px solid #FFFFFF3D !important;
  color:#fff !important;
  transition:background-color .35s ease,border-color .35s ease !important;
}

.elementor-button-glue-transparent .elementor-button:hover,
.elementor-button-glue-transparent .elementor-button:focus{
  background-color:#FFFFFF38 !important;
  border-color:#FFFFFF73 !important;
}

/* kein Auto-Pfeil bei dieser Variante */
.elementor-button-glue-transparent .elementor-button .elementor-button-content-wrapper::after{
  content:none !important; display:none !important;
}

/* ===== GLUE Lila → Weiß (Variante) =====
   Basis LILA #5B1A6B (weißer Text) → Sweep füllt WEISS; Text+Rand+Pfeil werden LILA.
   Inverse von "GLUE Weiß → Lila". */
.elementor-button-glue-lila-weiss .elementor-button,.glue-btn-lila-weiss .elementor-button{
  position:relative !important;overflow:hidden !important;isolation:isolate;
  background-color:#5B1A6B !important;color:#fff !important;
  border:2px solid #5B1A6B !important;
  transition:color .5s cubic-bezier(.65,0,.35,1),border-color .5s ease,box-shadow .5s ease !important;}

.elementor-button-glue-lila-weiss .elementor-button::before,.glue-btn-lila-weiss .elementor-button::before{
  content:"";position:absolute;inset:0;z-index:-1;background:#fff;
  clip-path:ellipse(0% 150% at 0% 50%);
  transition:clip-path .55s cubic-bezier(.65,0,.35,1);}

.elementor-button-glue-lila-weiss .elementor-button:hover::before,.glue-btn-lila-weiss .elementor-button:hover::before{
  clip-path:ellipse(150% 150% at 0% 50%);}

.elementor-button-glue-lila-weiss .elementor-button:hover,.glue-btn-lila-weiss .elementor-button:hover{
  color:#5B1A6B !important;border-color:#5B1A6B !important;box-shadow:0 14px 32px rgba(91,26,107,.20) !important;}

.elementor-button-glue-lila-weiss .elementor-button .elementor-button-icon{transition:transform .4s ease;}

.elementor-button-glue-lila-weiss .elementor-button:hover .elementor-button-icon{transform:translateX(6px);}

/* === GLUE Weiß→Lila: Schatten wie glue.ima.vc (.zg-footer-cta .btn-primary) === */
.elementor-button-glue-weiss .elementor-button,.glue-btn-weiss .elementor-button{box-shadow:0 2px 6px rgba(63,14,77,.04),0 8px 24px rgba(63,14,77,.06) !important;}

.elementor-button-glue-weiss .elementor-button:hover,.glue-btn-weiss .elementor-button:hover{box-shadow:0 10px 28px rgba(91,26,107,.28) !important;}



/* ===================== HEADER & NAV ===================== */

/* ===== Sticky Header (klebt beim Scrollen oben) =====
   Nutzt vorhandene Klasse .elementor-location-header. Mobil: z-index aufheben,
   damit das Fullscreen-Menü weiter aufsteigt. */
body:not(.home) .elementor-location-header{position:sticky;top:0;z-index:999;}

@media (max-width:1024px){
  .elementor-location-header{z-index:auto !important;}
}

/* ===== GLUE: Desktop-Menü (Startseite) bei Platzmangel umbrechen statt aufs Logo =====
   Reserviert links Platz fürs Logo, damit die Pillen ab einer engen Desktop-Breite
   in die nächste Zeile umbrechen (flex-wrap ist bereits aktiv), statt das Logo zu überlagern. */
@media (min-width:1025px){
  .glue-nav-pills .elementor-nav-menu{ padding-left: 400px; }
}

/* ===== GLUE Header v2: Startseite — Pills (1.) scrollen weg, Logo-Header (2.) faehrt ein =====
   perspective:none neutralisiert den containing-block, der fixed brach. 2026-06-30 */
html,body{ perspective:none !important; }

body.home .elementor-location-header{ position:absolute !important; top:0; left:0; right:0; z-index:1000; background:transparent; }

body.home .glue-scroll-header{
  position:fixed !important; top:0; left:0; right:0; z-index:1001;
  transform:translateY(-100%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}

body.home .glue-scroll-header.is-visible{ transform:translateY(0); }

/* Kontakt im Pill-Navbar wieder zeigen (global ausgeblendet, in den Pills aber gewuenscht) */
.glue-nav-pills .elementor-nav-menu--main li.menu-item.menu-item-2695,
.glue-nav-pills .elementor-nav-menu--main li.menu-item.nav-kontakt{ display:flex !important; }



/* ===================== MOBILE MENU ===================== */

/* ===== GLUE Mobile-Menü — Fullscreen Slide-in (wie glue-net.org) =====
   Klassen statt fester IDs:
   .glue-mobile-nav  = am Nav-Menu-Widget
   .glue-nav-kontakt = am separaten Kontakt-Button (auf Mobil ausgeblendet)
   .glue-header-flat = an den Header-Containern (z-index neutralisieren) */

/* Desktop (>1024): Kontakt + Sprach-Pills NICHT in der horizontalen Leiste */
@media (min-width:1025px){
  .glue-mobile-nav .elementor-nav-menu--main .menu-item.nav-kontakt,
  .glue-mobile-nav .elementor-nav-menu--main .menu-item.nav-lang{display:none !important;}
}

/* ===== Burger-Breakpoint (<=1024) ===== */
@media (max-width:1024px){
  /* separaten Kontakt-Button ausblenden -> Kontakt liegt als Punkt im Panel */
  .glue-nav-kontakt{display:none !important;}

  /* Header-Container-Stacking neutralisieren, damit das fixe Panel aufsteigt */
  .glue-header-flat{z-index:auto !important;}

  /* Burger lila + ohne grauen Kasten */
  .glue-mobile-nav .elementor-menu-toggle{
    --nav-menu-icon-color:#5B1A6B; color:#5B1A6B !important;
    background:transparent !important; padding:8px !important;
    position:relative; z-index:10000;
  }
  .glue-mobile-nav .elementor-menu-toggle svg,
  .glue-mobile-nav .elementor-menu-toggle .e-font-icon-svg{fill:#5B1A6B !important;}
  /* offenes X fix oben rechts, immer über dem Panel klickbar */
  .glue-mobile-nav .elementor-menu-toggle.elementor-active{
    position:fixed; top:26px; right:24px; z-index:99999;
  }

  /* Vollbild-Panel, von links eingeschoben */
  .glue-mobile-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    position:fixed; top:0; left:0; right:0; bottom:0;
    width:100%; height:100vh; height:100dvh; max-height:none !important;
    margin:0 !important; border:0 !important; border-radius:0 !important;
    background:#fff;
    padding:96px 32px 48px;
    overflow-x:hidden; overflow-y:auto;
    transform:translateX(-100%) !important;
    transition:transform .5s cubic-bezier(.77,0,.175,1) !important;
    box-shadow:none !important;
    z-index:99990;
    pointer-events:none;
  }
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    transform:translateX(0) !important;
    pointer-events:auto;
    box-shadow:4px 0 32px rgba(0,0,0,.1) !important;
  }

  /* Menüpunkte */
  .glue-mobile-nav .elementor-nav-menu--dropdown .elementor-item{
    color:#5B1A6B !important; background:transparent !important;
    font-size:22px !important; font-weight:600 !important; line-height:1.2 !important;
    text-transform:uppercase !important; letter-spacing:-.3px;
    padding:16px 0 !important;
    border:0 !important; border-bottom:1px solid rgba(91,26,107,.12) !important;
    justify-content:flex-start !important;
  }
  .glue-mobile-nav .elementor-nav-menu--dropdown .elementor-item:hover,
  .glue-mobile-nav .elementor-nav-menu--dropdown .elementor-item.elementor-item-active{
    color:#42BFF0 !important; background:transparent !important;
  }

  /* gestaffeltes Einblenden der Punkte */
  .glue-mobile-nav .elementor-nav-menu--dropdown .elementor-nav-menu > li{
    opacity:0; transform:translateX(-24px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li{
    opacity:1; transform:translateX(0);
  }
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(1){transition-delay:.18s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(2){transition-delay:.23s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(3){transition-delay:.28s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(4){transition-delay:.33s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(5){transition-delay:.38s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(6){transition-delay:.43s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(7){transition-delay:.48s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(8){transition-delay:.53s}
  .glue-mobile-nav .elementor-menu-toggle.elementor-active + .elementor-nav-menu--dropdown .elementor-nav-menu > li:nth-child(9){transition-delay:.58s}

  /* DE/EN Sprach-Pills (statisch) */
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-lang{
    display:inline-block; width:auto;
  }
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-lang .elementor-item{
    display:inline-flex; align-items:center; gap:6px; width:auto;
    margin:20px 8px 0 0; padding:8px 16px !important;
    font-size:14px !important; border-radius:20px;
    border:1px solid rgba(91,26,107,.15) !important;
    text-transform:uppercase;
  }
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-lang .elementor-item::before{
    content:""; width:20px; height:14px; border-radius:2px;
    background-size:cover; background-position:center; flex:0 0 auto;
  }
  .glue-mobile-nav .nav-lang-de .elementor-item::before{background-image:url(https://flagcdn.com/w40/de.png);}
  .glue-mobile-nav .nav-lang-en .elementor-item::before{background-image:url(https://flagcdn.com/w40/gb.png);}
  .glue-mobile-nav .nav-lang-de .elementor-item{
    background:#5B1A6B !important; color:#fff !important; border-color:#5B1A6B !important;
  }
}

/* ===== GLUE Mobile-Menü: Login-Button (1:1 glue.ima.vc .v2-login-btn) =====
   Pkt. "Login" (.nav-login, Ziel _blank) als blaue Pille im Fullscreen-Panel.
   Icon (User/ID-Card) als WEISSER SVG-Background-Layer auf dem <a> selbst
   (Elementor zwingt .elementor-item::before auf position:absolute hinter den
   Button-BG -> Pseudo-Icon wäre unsichtbar; Background-Layer ist robust).
   Hover #42BFF0 -> #5B1A6B wie auf der Seite. */
@media (max-width:1024px){
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-login{margin-top:24px;}
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-login .elementor-item{
    display:inline-flex !important;align-items:center;justify-content:flex-start;width:auto;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%20fill='%23ffffff'%3E%3Cpath%20d='M436%20160c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5%200%200%2021.5%200%2048v416c0%2026.5%2021.5%2048%2048%2048h320c26.5%200%2048-21.5%2048-48v-48h20c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68%20304H48V48h320v416zM208%20256c35.3%200%2064-28.7%2064-64s-28.7-64-64-64-64%2028.7-64%2064%2028.7%2064%2064%2064zm-89.6%20128h179.2c12.4%200%2022.4-8.6%2022.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8%200-18.7%208-44.8%208-26.9%200-33.4-8-44.8-8-37.1%200-67.2%2025.8-67.2%2057.6v19.2c0%2010.6%2010%2019.2%2022.4%2019.2z'/%3E%3C/svg%3E") 28px center / 18px auto no-repeat, #42BFF0 !important;
    color:#fff !important;
    font-family:'Rubik',sans-serif !important;font-size:16px !important;font-weight:500 !important;
    text-transform:none !important;letter-spacing:0 !important;
    padding:16px 32px 16px 58px !important;
    border:0 !important;border-bottom:0 !important;border-radius:35px !important;
    box-shadow:0 4px 16px rgba(66,191,240,.35);
    transition:background-color .3s ease !important;}
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-login .elementor-item:hover,
  .glue-mobile-nav .elementor-nav-menu--dropdown .menu-item.nav-login .elementor-item.elementor-item-active{
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20448%20512'%20fill='%23ffffff'%3E%3Cpath%20d='M436%20160c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20V48c0-26.5-21.5-48-48-48H48C21.5%200%200%2021.5%200%2048v416c0%2026.5%2021.5%2048%2048%2048h320c26.5%200%2048-21.5%2048-48v-48h20c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20v-64h20c6.6%200%2012-5.4%2012-12v-40c0-6.6-5.4-12-12-12h-20v-64h20zm-68%20304H48V48h320v416zM208%20256c35.3%200%2064-28.7%2064-64s-28.7-64-64-64-64%2028.7-64%2064%2028.7%2064%2064%2064zm-89.6%20128h179.2c12.4%200%2022.4-8.6%2022.4-19.2v-19.2c0-31.8-30.1-57.6-67.2-57.6-10.8%200-18.7%208-44.8%208-26.9%200-33.4-8-44.8-8-37.1%200-67.2%2025.8-67.2%2057.6v19.2c0%2010.6%2010%2019.2%2022.4%2019.2z'/%3E%3C/svg%3E") 28px center / 18px auto no-repeat, #5B1A6B !important;}
}

/* Desktop: Login NICHT in der horizontalen Leiste (wie nav-kontakt/nav-lang) */
@media (min-width:1025px){
  .glue-mobile-nav .elementor-nav-menu--main .menu-item.nav-login{display:none !important;}
}



/* ===================== TYPOGRAPHY ===================== */

/* === GLUE: hervorgehobene Wörter (<strong>) in GLUE-Lila (Klasse .glue-strong am Text-Widget) === */
.glue-strong strong{color:#5B1A6B;}

/* === GLUE: Hero-H1 wie glue-net .rl-kv h1 (Klasse .glue-kv-h1 am Heading-Widget) === */
.glue-kv-h1 .elementor-heading-title{
  font-family:'M PLUS Rounded 1c',sans-serif !important;
  font-size:clamp(1.2rem,6vw,3.4rem) !important;
  font-weight:700 !important;
  line-height:1.1 !important;
  letter-spacing:-0.01em !important;}

@media (max-width:767px){
  .glue-kv-h1 .elementor-heading-title{font-size:22px !important;}
}

/* === Hero-Typo an glue.ima.vc angleichen (globale Tokens gl7a8b9 / gz1a2b3) ===
   gl7a8b9 (Ueberschriften) -> 46px Desktop, line-height 1.2.
   gz1a2b3 (Text) -> Rubik, 22px Desktop, line-height 1.5.
   Tablet/Mobile-Groessen bleiben unveraendert (Elementor-Stufen 34/28, 17/16). */
body.elementor-kit-7{
  --e-global-typography-gl7a8b9-line-height:1.2em;
  --e-global-typography-gz1a2b3-font-family:"Rubik";
  --e-global-typography-gz1a2b3-line-height:1.5em;
}

@media(min-width:1025px){
  body.elementor-kit-7{
    --e-global-typography-gl7a8b9-font-size:46px;
    --e-global-typography-gz1a2b3-font-size:22px;
  }
}



/* Global font "Heading 2 Display" (token ts5e6f7) = .rl-story-block h2 von glue.ima.vc — DEAKTIVIERT (clamp geht nicht im Elementor-Feld; bei Bedarf einkommentieren)
body.elementor-kit-7{
  --e-global-typography-ts5e6f7-font-family:"M PLUS Rounded 1c", sans-serif;
  --e-global-typography-ts5e6f7-font-size:clamp(1.6rem, 3vw, 2.3rem);
  --e-global-typography-ts5e6f7-font-weight:700;
  --e-global-typography-ts5e6f7-line-height:1.2em;
  --e-global-typography-ts5e6f7-letter-spacing:-0.01em;
} */

/* ===================== COMPONENTS ===================== */

/* === GLUE Bild-Overlay (Klasse glue-img-shade) === */
.glue-img-shade{position:relative;display:block;}

.glue-img-shade img{display:block;border-radius:30px;}

.glue-img-shade::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:30px;
  background:linear-gradient(180deg,rgba(31,18,38,.50) 0%,rgba(31,18,38,.10) 28%,transparent 55%,rgba(63,14,77,.18) 100%);}

/* === GLUE Regenbogen-Leiste (Klasse .glue-box am Container) ===
   Farbverlaufs-Leiste oben — einzige Box-Klasse. */
.glue-box{position:relative;overflow:hidden;}

/* overflow:hidden = Leiste an den runden Ecken beschneiden */
.glue-box::before{content:"";position:absolute;top:0;left:8px;right:8px;height:4px;
  border-radius:15px 15px 0 0;
  background:linear-gradient(90deg,#42BFF0,#9fc253 55%,#7a3a8a);}

/* === GLUE: Karussell-Pfeile auf Tablet + Handy ausblenden (Klasse .glue-no-arrows am Karussell) === */
@media (max-width:1024px){
  .glue-no-arrows .elementor-swiper-button,
  .glue-no-arrows .elementor-swiper-button-prev,
  .glue-no-arrows .elementor-swiper-button-next,
  .glue-no-arrows .swiper-button-prev,
  .glue-no-arrows .swiper-button-next{display:none !important;}
}

/* === GLUE Pillen-Liste (Klasse .glue-pill-list am Icon-List-Widget) ===
   Lila Pillen wie .rl-ziele-split-item auf glue-net.org/workshops. */
.glue-pill-list .elementor-icon-list-items{display:grid;gap:14px;margin:0;}

.glue-pill-list .elementor-icon-list-item{
  display:flex;align-items:center;gap:5px;
  margin:0 !important;            /* Elementor "Space Between" raus, Abstand macht der gap */
  padding:14px 20px !important;   /* oben/unten gleich = 14px */
  background:#853399;
  border:1px solid rgba(255,255,255,.22);
  border-radius:100px;
  box-shadow:0 6px 18px rgba(63,14,77,.25);}

/* === GLUE Hintergrund (Klasse .glue-bg am Container) ===
   rosa Radial-Schimmer über lila Linear-Verlauf (1:1 glue-net .cta-banner). */
.glue-bg{
  background:
    radial-gradient(500px 280px at 90% 90%, rgba(236,72,153,.14), transparent 60%),
    linear-gradient(135deg,#3F0E4D 0%,#5B1A6B 100%);
}

/* ===== Zoom-Karten (Karussell): Foto-Zoom + Titel-Unterstrich beim Hover =====
   Klasse .glue-zoom-cards auf das Karussell-Widget (Erweitert -> CSS-Klassen). 2026-07-01 */
/* Nur das Foto zoomt: Duplikat-Ebene ::after unter Filter/Text (kein negatives z-index).
   In Safari ::after ausgeblendet (WebKit-Transform-Bug) -> dort statisches Hintergrundfoto, kein Springen. */
.glue-zoom-cards .swiper-slide a.e-con{ isolation:isolate; }
.glue-zoom-cards .swiper-slide a.e-con::after{
  content:""; position:absolute; inset:0;
  background-image:inherit; background-position:center center; background-size:cover;
  transition:transform .6s cubic-bezier(.22,1,.36,1);
  z-index:0; pointer-events:none;
}
.glue-zoom-cards .swiper-slide a.e-con::before{ z-index:1; }
.glue-zoom-cards .swiper-slide a.e-con > *{ position:relative; z-index:2; }
.glue-zoom-cards .swiper-slide a.e-con:hover::after{ transform:scale(1.08); }
@supports (-webkit-hyphens:none){
  .glue-zoom-cards .swiper-slide a.e-con::after{ display:none !important; }
}

.glue-zoom-cards .swiper-slide .elementor-heading-title{
  display:inline;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  background-image:linear-gradient(#42BFF0,#42BFF0);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 0;
  transition:background-size .35s ease;
}
.glue-zoom-cards .swiper-slide a.e-con:hover .elementor-heading-title{ background-size:100% 2px; }



/* ===================== FORMS ===================== */

/* ===== GLUE Kontaktformular (Klasse .glue-form am Form-Widget) — 1:1 glue-net .rl-form ===== */
/* Felder: Input / Select / Textarea */
.glue-form .elementor-field-textual{
  font-family:'Rubik',sans-serif !important;
  color:#1F1226 !important;
  background:#fff !important;
  border:1.5px solid rgba(91,26,107,.14) !important;
  border-radius:14px !important;
  transition:border-color .2s ease,box-shadow .2s ease !important;
}

.glue-form .elementor-field-textual:hover{border-color:rgba(91,26,107,.28) !important;}

.glue-form .elementor-field-textual:focus{
  border-color:#5B1A6B !important;
  box-shadow:0 0 0 4px rgba(91,26,107,.10) !important;
  outline:none !important;
}

/* Floating-Label braucht oben Platz im Feld */
.glue-form input.elementor-field-textual,
.glue-form select.elementor-field-textual{min-height:58px;}

.glue-form input.elementor-field-textual{padding:24px 18px 8px !important;}

.glue-form textarea.elementor-field-textual{padding:28px 18px 14px !important;}

/* Select: Elementors eigener Pfeil (Caret) in GLUE-Lila statt grau */
.glue-form .elementor-select-wrapper .select-caret-down-wrapper svg{fill:#5B1A6B !important;}

/* DSGVO-Checkbox: lila + Abstand zwischen Box und Text */
.glue-form input[type="checkbox"],
.glue-form .elementor-acceptance-field{accent-color:#5B1A6B;width:18px;height:18px;cursor:pointer;}

.glue-form .elementor-field-type-acceptance .elementor-field-option{display:flex;align-items:flex-start;gap:12px;}

.glue-form .elementor-acceptance-field{margin-top:3px;}

/* Pflicht-Sternchen lila */
.glue-form .elementor-field-required .elementor-mark{color:#5B1A6B;}

/* === Floating Label: Feldname springt beim Fokus/Inhalt nach oben (wie glue-net) ===
   gilt für Text/E-Mail/Textarea (Select nutzt seine erste Option). */
.glue-form .elementor-field-group{position:relative;}

.glue-form .elementor-field-textual::placeholder{color:transparent !important;}

.glue-form .elementor-field-group:not(.elementor-field-type-select):not(.elementor-field-type-acceptance) > .elementor-field-label{
  position:absolute;left:19px;top:29px;transform:translateY(-50%);
  clip:auto !important;-webkit-clip-path:none !important;clip-path:none !important;
  width:auto !important;height:auto !important;margin:0 !important;padding:0 !important;
  overflow:visible !important;white-space:nowrap;
  font-family:'Rubik',sans-serif !important;font-size:1rem;font-weight:500;color:#6A5C70;
  background:transparent;pointer-events:none;z-index:2;
  transition:top .16s ease,font-size .16s ease,color .16s ease;
}

.glue-form .elementor-field-type-textarea > .elementor-field-label{top:22px;transform:none;}

.glue-form .elementor-field-group:has(input.elementor-field-textual:focus) > .elementor-field-label,
.glue-form .elementor-field-group:has(input.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label,
.glue-form .elementor-field-group:has(textarea.elementor-field-textual:focus) > .elementor-field-label,
.glue-form .elementor-field-group:has(textarea.elementor-field-textual:not(:placeholder-shown)) > .elementor-field-label{
  top:13px;transform:none;font-size:.72rem;color:#5B1A6B;
}



/* ===================== PAGE-SPECIFIC ===================== */

/* === FAQ-Tabs (Navigation auf /faq) — kein Auto-Pfeil, Anker-Offset === */
.elementor-element-fac0a00 .elementor-button .elementor-button-content-wrapper::after{content:none !important;}

#faq-kurs,#faq-zertifikat,#faq-preise,#faq-workshops,#faq-technik{scroll-margin-top:120px;}