/*
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme/
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: 1.0.1
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
*/

/* ========================================
   HEADER CONTAINER PADDING
   ======================================== */

/* Padding für den Header-Container */
.site-header.e-con-full {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Inner Container Padding (falls nötig) */
.site-header .e-con.e-child {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 1024px) {
  .site-header.e-con-full {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ========================================
   HEADER STANDARD (alle Seiten außer Home)
   ======================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Logo schwarz (Standard) */
.site-logo img {
  filter: brightness(0);
  transition: filter 0.3s ease;
}

/* Navigation schwarz (Standard) */
.site-header .e-n-menu-title-text {
  color: #000000 !important;
  transition: color 0.3s ease;
}

.site-header .e-n-menu a:hover .e-n-menu-title-text {
  color: #666666 !important;
}

.site-header .elementor-item,
.site-header .e-n-menu-title {
  color: #000000 !important;
  transition: color 0.3s ease;
}

/* ========================================
   HOMEPAGE: Transparenter Header
   ======================================== */

.home .site-header {
  background-color: transparent !important;
  backdrop-filter: none;
  box-shadow: none;
}

/* Logo weiß auf Homepage */
.home .site-logo img {
  filter: brightness(0) invert(1) !important;
}

/* Navigation weiß auf Homepage */
.home .site-header .e-n-menu-title-text {
  color: #ffffff !important;
}

.home .site-header .e-n-menu a:hover .e-n-menu-title-text {
  color: #cccccc !important;
}

.home .site-header .elementor-item,
.home .site-header .e-n-menu-title {
  color: #ffffff !important;
}

/* ========================================
   SCROLL-VERHALTEN
   ======================================== */

.home .site-header.scrolled {
  background-color: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.home .site-header.scrolled .site-logo img {
  filter: brightness(0) !important;
}

.home .site-header.scrolled .e-n-menu-title-text {
  color: #000000 !important;
}

.home .site-header.scrolled .e-n-menu a:hover .e-n-menu-title-text {
  color: #666666 !important;
}

.home .site-header.scrolled .elementor-item,
.home .site-header.scrolled .e-n-menu-title {
  color: #000000 !important;
}

/* ========================================
   SPACING FÜR FIXED HEADER
   ======================================== */

body:not(.home) {
  padding-top: 80px;
}

@media (max-width: 767px) {
  body:not(.home) {
    padding-top: 60px;
  }
}

/* ========================================
   NAVIGATION HOVER-EFFEKT (animierte Unterstreich-Linie)
   ======================================== */

/* Trigger bewusst auf .e-n-menu-item:hover (das ganze Menüpunkt-Element),
   nicht nur auf den Link: "Projekte" hat gar keinen <a>-Tag um den Text
   (nur Expertise/Kontakt sind echte Links) – ein Trigger auf a:hover würde
   den Effekt bei "Projekte" nie auslösen. .e-n-menu-item:hover deckt dabei
   automatisch auch jeden Link-Hover mit ab (der Mauszeiger ist beim Hover
   über den Link zwangsläufig auch über dem umschließenden Item). */

.site-header .e-n-menu-title-text {
  position: relative;
  display: inline-block;
  padding-bottom: 5px;
}

.site-header .e-n-menu-title-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background-color: #000000;
  transition: width 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover: Linie expandiert */
.site-header .e-n-menu-item:hover .e-n-menu-title-text::after {
  width: 100%;
}

/* Aktive Seite: Linie bleibt stehen */
.site-header .e-n-menu .current-menu-item .e-n-menu-title-text::after,
.site-header .e-n-menu .current-menu-ancestor .e-n-menu-title-text::after,
.site-header .e-n-menu .current_page_item .e-n-menu-title-text::after {
  width: 100%;
}

/* Homepage: Weiße Linie */
.home .site-header .e-n-menu-title-text::after {
  background-color: #ffffff;
}

/* Nach Scroll: Schwarze Linie */
.home .site-header.scrolled .e-n-menu-title-text::after {
  background-color: #000000;
}


/* ========================================
   DROPDOWN ICON FIX (Angepasst für Button-Struktur)
   ======================================== */

/* Das gesamte Menu-Item (inkl. Button) als Flex */
.site-header .e-n-menu .e-n-menu-item {
  display: inline-flex !important;
  align-items: center;
  gap: 0;
}

/* Der Dropdown-Button - MANUELLER PIXEL-SHIFT */
.site-header .e-n-menu-dropdown-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -5px; /* Nach oben verschieben - passe diesen Wert an */
  margin-left: 4px;
  height: auto;
  min-height: 0;
}

/* SVG im Button zentrieren */
.site-header .e-n-menu-dropdown-icon svg {
  display: block;
  margin: 0;
}

/* WICHTIG: Nur das aktive Icon anzeigen */
.site-header .e-n-menu-dropdown-icon-closed {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

.site-header .e-n-menu-dropdown-icon-opened {
  display: none !important;
}

/* Wenn Dropdown offen ist, Icons tauschen */
.site-header .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-closed {
  display: none !important;
}

.site-header .e-n-menu-dropdown-icon[aria-expanded="true"] .e-n-menu-dropdown-icon-opened {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}


/* ========================================
   DROPDOWN ICON FARBANPASSUNG
   ======================================== */

/* Dropdown Icon schwarz (Standard) */
.site-header .e-n-menu-dropdown-icon svg,
.site-header .e-n-menu-dropdown-icon polygon {
  fill: #000000 !important;
  transition: fill 0.3s ease;
}

/* Dropdown Icon weiß auf Homepage */
.home .site-header .e-n-menu-dropdown-icon svg,
.home .site-header .e-n-menu-dropdown-icon polygon {
  fill: #ffffff !important;
}

/* Dropdown Icon schwarz nach Scroll auf Homepage */
.home .site-header.scrolled .e-n-menu-dropdown-icon svg,
.home .site-header.scrolled .e-n-menu-dropdown-icon polygon {
  fill: #000000 !important;
}

/* Falls das Icon über Stroke statt Fill gerendert wird */
.site-header .e-n-menu-dropdown-icon svg path,
.site-header .e-n-menu-dropdown-icon svg polyline {
  stroke: #000000 !important;
  transition: stroke 0.3s ease;
}

.home .site-header .e-n-menu-dropdown-icon svg path,
.home .site-header .e-n-menu-dropdown-icon svg polyline {
  stroke: #ffffff !important;
}

.home .site-header.scrolled .e-n-menu-dropdown-icon svg path,
.home .site-header.scrolled .e-n-menu-dropdown-icon svg polyline {
  stroke: #000000 !important;
}

/* ========================================
   MEGA MENU DROPDOWN PADDING
   ======================================== */

/* Gesamtes Dropdown */
.site-header .e-n-menu-dropdown {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Content-Bereich */
.site-header .e-n-menu-dropdown .e-n-menu-content {
  padding-left: 40px !important;
  padding-right: 40px !important;
  box-sizing: border-box;
}

/* Falls der Container "Full Width" ist */
.site-header .e-n-menu-content .e-con-full {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

/* Für Grid-Layouts im Mega Menu */
.site-header .e-n-menu-content .elementor-row,
.site-header .e-n-menu-content .e-con-inner {
  padding-left: 40px !important;
  padding-right: 40px !important;
}

@media (max-width: 1024px) {
  .site-header .e-n-menu-dropdown,
  .site-header .e-n-menu-dropdown .e-n-menu-content,
  .site-header .e-n-menu-content .e-con-full,
  .site-header .e-n-menu-content .elementor-row,
  .site-header .e-n-menu-content .e-con-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}


/* ========================================
   STICKY IMAGE SECTION (Variante 4)
   ======================================== */

/* Die Section mit dem Bild bleibt sticky */
.sticky-image-section {
  position: sticky !important;
  top: 0;
  height: 70vh;
  z-index: 0; /* Hinter dem scrollenden Content */
  background-size: cover;
  background-position: center;
}

/* Alle Sections NACH der Sticky-Section */
.sticky-image-section ~ .elementor-section,
.sticky-image-section ~ .e-con {
  position: relative;
  z-index: 1; /* Über dem Sticky-Bild */
  background-color: #ffffff; /* Überdeckt das Bild beim Scrollen */
}

/* Optional: Smooth Transition beim Überdecken */
.sticky-image-section ~ .elementor-section:first-of-type,
.sticky-image-section ~ .e-con:first-of-type {
  padding-top: 80px; /* Abstand nach oben */
}

/* Mobile Anpassung */
@media (max-width: 1024px) {
  .sticky-image-section {
    height: 60vh; /* Kleinere Höhe auf Mobile */
  }
}

/* ========================================
   Alle Bilder initial unsichtbar
   ======================================== */
/* Alle Bilder initial unsichtbar (außer Hero) */
img:not(.no-fade) {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: transform, opacity;
}

/* Bilder werden sichtbar */
img.img-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Hero-Section und erste Section ausschließen */
.elementor-section:first-of-type img,
.hero-section img,
header img,
.elementor-location-header img {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Barrierefreiheit: Reduzierte Motion respektieren */
@media (prefers-reduced-motion: reduce) {
  img {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}
/* ========================================
   Elementor-Editor: Animation deaktivieren
   Grund: Das Scroll-Script, das .img-visible setzt,
   läuft nicht zuverlässig im Editor-iFrame –
   Bilder blieben dort dauerhaft unsichtbar.
   ======================================== */
body.elementor-editor-active img:not(.no-fade) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}


/* ========================================
   FIX: Horizontales Overflow durch Sticky-Kontaktleiste (Mobile)
   ======================================== */
/*
 * Ursache (live bei 375px & 430px Viewport-Breite nachgewiesen): Die
 * Icon-Liste (Kontakt-/Social-Icons, 4 Stück) in der sitelweiten
 * Sticky-Leiste .elementor-element-7ff59d5 (elementor-sticky,
 * sticky_on: alle Geräte) bricht auf schmalen Viewports nicht um, obwohl
 * flex-wrap:wrap gesetzt ist – die <ul> selbst hat keine feste Breite und
 * wächst auf ihre Inhalts-Breite (652px), obwohl der Leisten-Container
 * nur 375px breit ist. Kein Vorfahre klippt das, wodurch
 * document.documentElement.scrollWidth über die Viewport-Breite hinaus-
 * getrieben wird und sich auf iOS Safari die gesamte Seite horizontal
 * wegziehen lässt (bestätigt per Test: scrollWidth 375 → 514 bei
 * sichtbarem Element, zurück auf 375 wenn ausgeblendet).
 *
 * Fix direkt an der Quelle: die Leiste selbst kappen statt die
 * Icon-Liste umzubauen – Icons bleiben optisch unverändert, werden nur
 * nicht mehr über den Rand hinausgeschoben.
 *
 * Selektor-Hinweis: elementor-element-7ff59d5 ist Elementors
 * auto-generierte Element-ID, stabil solange das Element im Editor nicht
 * gelöscht/neu erstellt wird. Falls sich die ID durch einen Rebuild
 * ändert: wiedererkennbar als die einzige Elementor-Sticky-Leiste mit
 * sticky_on "alle Geräte" und der 4-teiligen Kontakt-Icon-Liste.
 */
.elementor-element-7ff59d5 {
  max-width: 100%;
  overflow-x: hidden;
}

/* ========================================
   SICHERHEITSNETZ: Kein horizontales Scrollen auf Mobile
   ======================================== */
/*
 * Backstop, KEIN Ersatz für den Ursachen-Fix oben: falls künftig ein
 * weiteres Element unbemerkt über den Viewport hinausragt, verhindert
 * dies zumindest das Wegziehen der gesamten Seite auf iOS Safari.
 *
 * NUR auf html, bewusst NICHT auf body: overflow-x:hidden auf body hat
 * live auf einem echten iOS-Gerät das mobile Vollbild-Menü kaputt gemacht
 * (Nutzer-Report: Menü ging nicht mehr zuverlässig auf/zu). Ursache:
 * mobile-menu-scroll-lock.js setzt beim Öffnen des Menüs
 * "document.body.style.position = 'fixed'" (Scroll-Lock-Technik) – die
 * Kombination aus position:fixed UND overflow-x:hidden auf demselben
 * body-Element ist ein bekannter iOS-Safari-Bug (Fixed-Positioning/
 * Touch-Hit-Testing kann dabei unzuverlässig werden). overflow-x:hidden
 * auf html allein reicht als Backstop völlig aus (klemmt die
 * Dokument-Scrollbreite genauso), ohne body und damit den Scroll-Lock
 * anzufassen.
 */
html {
  overflow-x: hidden;
}