.elementor-kit-12{--e-global-color-primary:#FFFFFF;--e-global-color-secondary:#D9D9D9;--e-global-color-text:#000000;--e-global-color-accent:#4B6BB4;--e-global-color-e17f906:#242B39;--e-global-typography-primary-font-family:"Open Sans";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Open Sans";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Open Sans";--e-global-typography-text-font-size:1.5rem;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:2.6rem;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-b9fe0cd-font-family:"Open Sans";--e-global-typography-b9fe0cd-font-size:1.61rem;--e-global-typography-b9fe0cd-font-weight:300;font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-size:var( --e-global-typography-text-font-size );font-weight:var( --e-global-typography-text-font-weight );line-height:var( --e-global-typography-text-line-height );background-color:#FEFEFE;}.elementor-kit-12 button:hover,.elementor-kit-12 button:focus,.elementor-kit-12 input[type="button"]:hover,.elementor-kit-12 input[type="button"]:focus,.elementor-kit-12 input[type="submit"]:hover,.elementor-kit-12 input[type="submit"]:focus,.elementor-kit-12 .elementor-button:hover,.elementor-kit-12 .elementor-button:focus{color:var( --e-global-color-accent );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-12 e-page-transition{background-color:#FFBC7D;}@media(max-width:1366px){.elementor-kit-12{--e-global-typography-text-font-size:1.3rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}}@media(max-width:1024px){.elementor-kit-12{--e-global-typography-text-font-size:1.2rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-12{--e-global-typography-text-font-size:1rem;--e-global-typography-text-line-height:2rem;font-size:var( --e-global-typography-text-font-size );line-height:var( --e-global-typography-text-line-height );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* ================================
   GLOBAL CSS – PROFILE NAV + HERO + TAB SYSTEM
   ================================ */


/* =========================================================
   0) ROOT VARS (Viewport + Layout)
   ========================================================= */

:root{
  --profile-nav-accent: #4B6BB4;
  --profile-nav-base:   #ffffff;
  --profile-nav-glass:  #FFFFFF60;
  --profile-nav-blur:   6px;

  --vh100: 100vh;

  --hero-extra: 10vh;
  --nav-h:      10vh;
  --foot-h:     5vh;
}

@supports (height: 100dvh){
  :root{
    --vh100: 100dvh;
    --hero-extra: 10dvh;
    --nav-h: 10dvh;
    --foot-h: 5dvh;
  }
}

@supports (height: 100svh){
  :root{
    --vh100: 100svh;
  }
}

:root{
  --shell-h: calc(var(--vh100) - var(--foot-h));
}


/* =========================================================
   A) PROFILE NAV
   ========================================================= */

.profile-nav-wrap .profile-nav-item{
  position: relative;
  cursor: pointer;
  border-radius: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.profile-nav-wrap .profile-nav-item::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.profile-nav-wrap .profile-nav-item:hover::before,
.profile-nav-wrap .profile-nav-item.is-active::before{
  background: var(--profile-nav-glass);
  backdrop-filter: blur(var(--profile-nav-blur));
}

.profile-nav-wrap .profile-nav-item > *{
  position: relative;
  z-index: 1;
}

.profile-nav-wrap .profile-nav-item a,
.profile-nav-wrap .profile-nav-item .elementor-icon-list-text,
.profile-nav-wrap .profile-nav-item .elementor-icon-list-icon i,
.profile-nav-wrap .profile-nav-item .elementor-icon-list-icon svg{
  color: var(--profile-nav-base) !important;
  fill: currentColor !important;
}


/* =========================================================
   B) HERO LAYOUT
   ========================================================= */

@media (min-width: 1025px){

  .hero-stage .hero-header{
    min-height: calc(var(--vh100) + var(--hero-extra)) !important;
  }

  .hero-stage .page-shell{
    margin-top: calc(var(--hero-extra) * -1) !important;
    height: var(--shell-h) !important;

    display: flex !important;
    flex-direction: column !important;

    overflow: hidden !important;
  }

  .hero-stage .page-shell .sticky-nav{
    height: var(--nav-h) !important;
    position: sticky !important;
    top: 0;
  }

  .hero-stage .page-content{
    flex: 1 1 auto !important;
  }
}

.elementor-sticky__spacer{
  height: 0 !important;
}


/* =========================================================
   C) TAB BUTTONS
   ========================================================= */

.tab-btn{
  cursor: pointer;
}

.tab-btn .elementor-button{
  width: 100%;
  min-height: 56px;

  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #ffffff !important;
  color: #000000;
}

.tab-btn .elementor-button-content-wrapper{
  display: flex !important;
  align-items: center !important;
  justify-content: space-between;
  width: 250px;
  gap: 10px;
}

.tab-btn i,
.tab-btn svg{
  color: var(--profile-nav-accent) !important;
}

/* Active Button */
.tab-btn.is-tab-active .elementor-button{
  color: var(--profile-nav-accent) !important;
}


/* =========================================================
   D) TAB SYSTEM (JS STEUERT DISPLAY)
   ========================================================= */

/* Standard: alles sichtbar → JS übernimmt Kontrolle */
.tab-content,
.tab-media{
  display: block;
}

/* Wichtig: keine display:none Logik mehr im CSS */


/* =========================================================
   E) ELEMENTOR FIXES
   ========================================================= */

/* verhindert Layout-Probleme innerhalb von Templates */
.tab-content > .elementor{
  display: block !important;
  width: 100% !important;
}

.tab-content .e-con{
  display: flex !important;
  width: 100% !important;
}

/* verhindert Clipping */
.tab-content,
.tab-content-wrapper{
  overflow: visible !important;
}


/* =========================================================
   WRAPPER
   ========================================================= */

.tab-content-wrapper{
  position: relative;
  width: 100%;
}

/* Icon Farbe */
.tab-btn .elementor-button .elementor-button-icon i,
.tab-btn .elementor-button .elementor-button-icon svg{
  color: var(--profile-nav-accent) !important;
  fill: currentColor !important;
}

/* Optional: aktiver Zustand etwas stärker */
.tab-btn.is-tab-active .elementor-button-icon i,
.tab-btn.is-tab-active .elementor-button-icon svg{
  color: var(--profile-nav-accent) !important;
  fill: currentColor !important;
}

/* =========================================================
   KONTAKTFORMULAR
   ========================================================= */
   
/* Fake Placeholder Farbe erzwingen */
.elementor-form textarea.fake-placeholder {
  color: #9ca3af !important;
}

/* Normale Eingabe */
.elementor-form textarea {
  color: #000000 !important;
}

/* Einheitliche Placeholder Farbe */
.elementor-form ::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Safari Fix */
.elementor-form textarea::-webkit-input-placeholder,
.elementor-form input::-webkit-input-placeholder {
  color: #9ca3af !important;
}

/* Firefox Fix */
.elementor-form textarea::-moz-placeholder,
.elementor-form input::-moz-placeholder {
  color: #9ca3af !important;
}

/* ========================================
   KONTAKTFORMULAR SUCCESS / ERROR OVERLAY
   ======================================== */

/* Overlay Wrapper */
.form-message-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,0.4);
  z-index: 9999;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* sichtbar */
.form-message-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* Message Box */
.form-message-box {
  background: #2e7d32; /* grün */
  color: #ffffff;

  padding: 24px 32px;
  border-radius: 8px;

  font-size: 18px;
  line-height: 1.4;

  max-width: 500px;
  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Fehler rot */
.form-message-box.error {
  background: #c62828;
}

/* Elementor Standard Erfolg/Fehler ausblenden */
.elementor-message {
  display: none !important;
}/* End custom CSS */