/*
Theme Name:    Astra Child Theme
Description:
Author:        PARROT MEDIA
Author URI:    https://parrot-media.de/
Template:      astra
Version:       1.0.0
*/



/* HEADER - Header Image */
.header-image,
.elementor .elementor-element.header-image {
    height: 250px;
}


/* EDITOR */
/* Debugging Script from Mail-Encoder in Icon-List */
.elementor-icon-list-item span[id^="eeb-"] {
    display: flex;
    align-items: center;
}



/* ============================================================
   1) GLASS / BLUR (Header + Dropdown via .blurry-bg)
   ============================================================ */
.blurry-bg{
  position: relative;
  background: transparent;
  isolation: isolate;
}

.blurry-bg::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;

  /* Normalzustand */
  background: rgba(255,255,255,.12);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition: background .35s ease, -webkit-backdrop-filter .35s ease, backdrop-filter .35s ease;
}

.blurry-bg > *{
  position: relative;
  z-index:1;
}

/* Scrolled-Zustand */
body.is-scrolled .blurry-bg::before{
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}


/* ============================================================
   2) LOGO SWITCH (nur Header) – pixelgenau gleiche Größe
   (Dark Logo als Pseudo-Overlay auf Light Logo)
   ============================================================ */
.elementor-location-header .elementor-element-4f30498 .logo--light .elementor-widget-container{
  position: relative;
}

/* Dark-Logo Widget ausblenden (wir nutzen Overlay) */
.elementor-location-header .elementor-element-4f30498 .logo--dark{
  display: none !important;
}

/* Dark-Logo Overlay */
.elementor-location-header .elementor-element-4f30498 .logo--light .elementor-widget-container::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  background: url("https://fernholz-kaelte.de/wp-content/uploads/2025/12/FKK-Logo-ohne-Claim-blau-scaled.png")
              no-repeat left center / contain;

  opacity: 0;
  transform: translateY(2px);
  transition: opacity .35s ease, transform .35s ease;
}

/* Light-IMG weich ausblenden */
.elementor-location-header .elementor-element-4f30498 .logo--light img{
  display: block;
  width: 100% !important;
  height: auto !important;
  object-fit: contain;
  transition: opacity .35s ease;
  opacity: 1;
}

/* Switch-Zustand */
body.is-scrolled .elementor-location-header .elementor-element-4f30498 .logo--light img{
  opacity: 0;
}

body.is-scrolled .elementor-location-header .elementor-element-4f30498 .logo--light .elementor-widget-container::after{
  opacity: 1;
  transform: translateY(0);
}


/* ============================================================
   TOP MENU (Heading Items)
   - Scroll: Text/Icons blau
   - Hover: blau gefüllt + Text weiß (auch bei Active!)
   - Active im Scroll: gefüllte Fläche #18306417 + Text blau (nur ohne Hover)
   ============================================================ */

/* Basis: Pill */
.elementor-location-header .elementor-element-4f30498
.e-n-menu-title{
  padding: 10px 14px;
  border-radius: 999px;
  transition: background-color .2s ease, color .2s ease;
}

/* Scrollzustand: Standard Text/Icons blau */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title-text,
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-dropdown-icon,
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-dropdown-icon i{
  color: #183064 !important;
}

/* Hover (immer): blau gefüllt */
.elementor-location-header .elementor-element-4f30498
.e-n-menu-title:hover{
  background-color: #183064 !important;
}

/* Hover (immer): Text/Icons weiß */
.elementor-location-header .elementor-element-4f30498
.e-n-menu-title:hover .e-n-menu-title-text,
.elementor-location-header .elementor-element-4f30498
.e-n-menu-title:hover .e-n-menu-dropdown-icon,
.elementor-location-header .elementor-element-4f30498
.e-n-menu-title:hover .e-n-menu-dropdown-icon i{
  color: #ffffff !important;
}

/* Active (Scrolled, ohne Hover): leicht blaue Fläche */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title.e-current:not(:hover),
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title:has(.e-n-menu-dropdown-icon[aria-expanded="true"]):not(:hover){
  background-color: #18306417 !important; /* Hex mit Alpha (Transparenz) */
}

/* Active (Scrolled, ohne Hover): Text/Icons blau (falls irgendwo weiß gesetzt wird) */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title.e-current:not(:hover) .e-n-menu-title-text,
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title.e-current:not(:hover) .e-n-menu-dropdown-icon,
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-title.e-current:not(:hover) .e-n-menu-dropdown-icon i{
  color: #183064 !important;
}



/* ============================================================
   DROPDOWN COLORS – HARD OVERRIDE (am ENDE einfügen)
   ============================================================ */

/* Chip-Layout (bleibt wie gehabt) */
.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a{
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100%;
  align-items: center;
  gap: .4em;
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

/* 1) GLAS: Standard WEISS (nur wenn NICHT Hover) */
body:not(.is-scrolled) .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:not(:hover):not(:focus),
body:not(.is-scrolled) .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:not(:hover):not(:focus) *{
  color: #ffffff !important;
}

/* 2) WEISS (Scrolled): Standard BLAU (nur wenn NICHT Hover) */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:not(:hover):not(:focus),
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:not(:hover):not(:focus) *{
  color: #183064 !important;
}

/* 3) HOVER/FOCUS: immer blau + weiss (gewinnt immer) */
.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:hover,
.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:focus{
  background-color: #183064 !important;
  color: #ffffff !important;
}

.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:hover *,
.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:focus *{
  color: #ffffff !important;
}

/* 4) Elementor Icon-List: Textnode explizit mitziehen (wichtig!) */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] .elementor-icon-list-text{
  color: #183064 !important;
}

body:not(.is-scrolled) .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] .elementor-icon-list-text{
  color: #ffffff !important;
}

.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:hover .elementor-icon-list-text,
.elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] a:focus .elementor-icon-list-text{
  color: #ffffff !important;
}

/* ============================================================
   DROPDOWN HEADINGS – je Zustand (Glas/Weiß)
   ============================================================ */

/* GLAS: Überschriften weiss */
body:not(.is-scrolled) .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] .elementor-heading-title{
  color: #ffffff !important;
}

/* WEISS (Scrolled): Überschriften blau */
body.is-scrolled .elementor-location-header .elementor-element-4f30498
.e-n-menu-content [id^="e-n-menu-content-"] .elementor-heading-title{
  color: #183064 !important;
}


/* Ausgeklapptes Megamenü */


@media (max-width: 1024px) {
  .elementor-widget-n-menu .e-n-menu[data-layout=dropdown] .e-n-menu-wrapper {
	 margin-top: 41px !important;
  }
	}
	

.e-n-menu-content .e-con-inner {
    width: calc(100% - 60px);
    
}

.elementor-nav-menu--dropdown .sub-menu a {
    font-size: 16px !important;
}

.elementor-nav-menu--dropdown .sub-menu .sub-menu a {
    font-size: 14px !important;
}


	
/* BUTTON */
/* Standardzustand */
.elementor-button {
    color: #ffffff; /* Schriftfarbe normal */
    background: linear-gradient(90deg, #757575 50%, #fff 50%);
    background-size: 200%;
    transition: background-position 0.3s ease;
}

/* Hoverzustand */
.elementor-button:hover {
    color: #183064; /* Schriftfarbe beim Hover */
    background-position: -100%;
}

/* Alternative Slide-Farben für Buttons mit Klasse .weiss-button */
.weiss-button .elementor-button{
    background: linear-gradient(90deg, #183064 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #ffffff;                 /* Text anfangs weiß auf blau */
    transition: background-position .3s ease, color .3s ease;
}

.weiss-button .elementor-button:hover{
    background-position: -100% 0%;  /* schiebt auf die weiße Hälfte */
    color: #183064;                 /* Text beim Hover blau auf weiß */
}

/* Alternative Slide-Farben für Buttons mit Klasse .transparent-weiss-button */
.transparent-weiss-button .elementor-button{
    background: linear-gradient(90deg, #FFFFFF11 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #ffffff;                 /* Text anfangs weiß auf blau */
    transition: background-position .3s ease, color .3s ease;
}

.transparent-weiss-button .elementor-button:hover{
    background-position: -100% 0%;  /* schiebt auf die weiße Hälfte */
    color: #183064;                 /* Text beim Hover blau auf weiß */
}

/* Alternative Slide-Farben für Buttons mit Klasse .graublau */
.graublau .elementor-button{
    background: linear-gradient(90deg, #757575 50%, #183064 50%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #ffffff;                 /* Text anfangs weiß  */
    transition: background-position .3s ease, color .3s ease;
}

.graublau .elementor-button:hover{
    background-position: -100% 0%;  /* schiebt auf die weiße Hälfte */
    color: #ffffff;                 /* Text beim Hover auch weiß */
}
/* Alternative Slide-Farben für Buttons mit Klasse .weiss-button-blaurahmen */
.weiss-button-blaurahmen .elementor-button{
    background: linear-gradient(90deg, #183064 50%, #ffffff 50%);
    background-size: 200% 100%;
    background-position: 0% 0%;
    color: #ffffff;                 /* Text anfangs weiß auf blau */
    border: 2px solid #183064;      
    transition: background-position .3s ease, color .3s ease;
    box-sizing: border-box;         /* empfohlen */
}

.weiss-button-blaurahmen .elementor-button:hover{
    background-position: -100% 0%;  /* schiebt auf die weiße Hälfte */
    color: #183064;                 /* Text beim Hover blau auf weiß */
    border: 2px solid #183064;      /* optional, aber konsistent */
}


.weiss-button-blaurahmen .elementor-button:hover{
    background-position: -100% 0%;  /* schiebt auf die weiße Hälfte */
    color: #183064;                 /* Text beim Hover blau auf weiß */
}

/* FOOTER */
.elementor-element-35d0830 a {
    color: #ffffff;  
    text-decoration: none;
}

.elementor-element-35d0830 a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.elementor-element-35d0830 a:hover {
    color: #ffffff;
}
.elementor-element-35d0830 a {
    transition: color 0.2s ease, text-underline-offset 0.2s ease;
}

.elementor-element-35d0830 a:hover {
    text-underline-offset: 4px;
	 text-decoration-thickness: 1px; /* optional: Dicke */
}

.elementor-element-35d0830 a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Footer Menü – Link nur so breit wie das Wort */
.footer-menu .elementor-nav-menu a.elementor-item {
    display: inline-block;
    text-decoration: none;
}

/* Unterstrich nur beim Hover */
.footer-menu .elementor-nav-menu a.elementor-item:hover {
    text-decoration: underline;
    text-decoration-thickness: 1px; /* Stärke anpassen */
    text-underline-offset: 6px;     /* Abstand zum Text */
}

/* Timeline - Über uns / Historie */
/* Timelineboxen (Content-Box) eckig machen */
#twae-wrapper-bfa491c .twae-story .twae-content {
    border-radius: 0 !important;
}

/* Optional: auch Bilder innerhalb der Boxen eckig */
#twae-wrapper-bfa491c .twae-story .twae-media img {
    border-radius: 0 !important;
}

/* Impressum - Schriftgrößen */
.elementor-element-a929aed h2 {
    font-size: 28px;
    line-height: 1.3;
}
@media (max-width: 1024px) {
    .elementor-element-a929aed h2 {
        font-size: 24px;
    }
}
@media (max-width: 767px) {
    .elementor-element-a929aed h2 {
        font-size: 22px;
    }
}