/* 
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 */


/* Bühne */
.headline-rotator{
  position: relative;
}

/* Beide Headlines exakt übereinander */
.headline-rotator .h-1,
.headline-rotator .h-2{
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;

  opacity: 0;
  transform: translateY(8px);

  animation-duration: 5s; /* schneller */
  animation-timing-function: cubic-bezier(.4,0,.2,1); /* weich */
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}

/* Reihenfolge */
.headline-rotator .h-1{ animation-name: headline1; }
.headline-rotator .h-2{ animation-name: headline2; }

/* Headline 1:
   0–10%   ein
   10–40%  halten
   40–50%  aus
   50–100% aus (inkl. Gap bevor 2 kommt)
*/
@keyframes headline1{
  0%   {opacity:0; transform:translateY(8px);}
  10%  {opacity:1; transform:translateY(0);}
  40%  {opacity:1; transform:translateY(0);}
  50%  {opacity:0; transform:translateY(-8px);}
  100% {opacity:0; transform:translateY(-8px);}
}

/* Headline 2 (startet erst NACHDEM 1 weg ist):
   0–55%  aus (Gap!)
   55–65% ein
   65–90% halten
   90–100% aus
*/
@keyframes headline2{
  0%   {opacity:0; transform:translateY(8px);}
  55%  {opacity:0; transform:translateY(8px);}
  65%  {opacity:1; transform:translateY(0);}
  90%  {opacity:1; transform:translateY(0);}
  100% {opacity:0; transform:translateY(-8px);}
}

/* Team Cards (Über uns / Page ID 167)
   Elementor classes:
   - mto-team-card (Person-Container)
   - mto-team-desc (Beschreibung: "Zuständig für ...")
*/
.mto-team-card .mto-team-desc{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  max-height: 0;
  overflow: hidden;

  transform: translateY(10px);
  transition:
    opacity .5s cubic-bezier(.22,1,.36,1),
    transform .5s cubic-bezier(.22,1,.36,1),
    max-height .7s cubic-bezier(.22,1,.36,1);
}

.mto-team-card:hover .mto-team-desc{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  max-height: 500px;
  transform: translateY(0);
}

/* gleicher Blur wie im Header */
.elementor-element.mto-team-card.e-con::before{
  transition:
    backdrop-filter .6s cubic-bezier(.22,1,.36,1),
    -webkit-backdrop-filter .6s cubic-bezier(.22,1,.36,1),
    background-color .45s cubic-bezier(.22,1,.36,1),
    opacity .45s cubic-bezier(.22,1,.36,1);
}

.elementor-element.mto-team-card.e-con:hover::before{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(10px);

  /* Match the header's translucent black instead of the (more opaque) gradient overlay,
     otherwise the blur is barely visible. */
  background-image: none !important;
  background-color: #00000059 !important;
  opacity: 1 !important;
}

/* Touch/Tablet: Hover gibt es nicht zuverlässig → Text immer sichtbar */
@media (hover: none){
  .mto-team-card .mto-team-desc{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: none;
    overflow: visible;
    transform: none;
  }
}


@media (min-width: 1024px) {
  .elementor-element-c69d6dc .elementor-loop-container:has(> .e-loop-item:only-child) {
    display: flex;
    justify-content: center;
  }
}

/* mto-migrated:css:post=2:el=36dffbe:sha=e5f2d3938aa5 | page 2 (home) | Home | el=36dffbe | custom_css */
/* ───────────── Hover-Reveal-Effekt ───────────── */
@media (min-width: 768px){
  .reveal-on-hover{
    position: relative; /* Referenzpunkt für Kind-Elemente */
  }

  /* Fließtext ist zunächst unsichtbar */
  .reveal-on-hover .reveal-copy{
    opacity: 0;
    transform: translateY(6px); /* kleiner Slide-In von unten */
    pointer-events: none; /* verhindert Klicks im Verborgenen */
    transition: opacity .35s ease, transform .35s ease;
  }

  /* Sichtbar, sobald die Kachel gehovert wird */
  .reveal-on-hover:hover .reveal-copy{
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* mto-migrated:css:post=41:el=68704d8:sha=0b28d48fd21d | elementor_library 41 (home-temp) | HOME-TEMP | el=68704d8 | custom_css */
/* Bühne */
.headline-rotator{
  position: relative;
}

/* Beide Headlines exakt übereinander */
.headline-rotator .h-1,
.headline-rotator .h-2{
  position: absolute;
  inset: 0;
  width: 100%;
  margin: 0;

  opacity: 0;
  transform: translateY(8px);

  animation-duration: 5s; /* schneller */
  animation-timing-function: cubic-bezier(.4,0,.2,1); /* weich */
  animation-iteration-count: infinite;
  will-change: opacity, transform;
}

/* Reihenfolge */
.headline-rotator .h-1{ animation-name: headline1; }
.headline-rotator .h-2{ animation-name: headline2; }

/* Headline 1:
   0–10%   ein
   10–40%  halten
   40–50%  aus
   50–100% aus (inkl. Gap bevor 2 kommt)
*/
@keyframes headline1{
  0%   {opacity:0; transform:translateY(8px);}
  10%  {opacity:1; transform:translateY(0);}
  40%  {opacity:1; transform:translateY(0);}
  50%  {opacity:0; transform:translateY(-8px);}
  100% {opacity:0; transform:translateY(-8px);}
}

/* Headline 2 (startet erst NACHDEM 1 weg ist):
   0–55%  aus (Gap!)
   55–65% ein
   65–90% halten
   90–100% aus
*/
@keyframes headline2{
  0%   {opacity:0; transform:translateY(8px);}
  55%  {opacity:0; transform:translateY(8px);}
  65%  {opacity:1; transform:translateY(0);}
  90%  {opacity:1; transform:translateY(0);}
  100% {opacity:0; transform:translateY(-8px);}
}

/* mto-migrated:css:post=41:el=459495b5:sha=101785f201ac | elementor_library 41 (home-temp) | HOME-TEMP | el=459495b5 | custom_css */
:root{
  --gap: 3rem;
  --duration: 40s;
}

/* Sichtfenster */
.marquee{
  position: absolute;   /* wenn du es absichtlich absolut setzt */
  left: 0;
  right: 0;             /* statt nur width:100% -> garantiert volle Breite */
  width: auto;
  overflow: hidden;
}

/* Bewegte Spur */
.marquee-track{
  display: flex;
  width: max-content;
  will-change: transform;
  animation: marquee-left var(--duration) linear infinite;
}

/* Gruppen */
.marquee-group{
  display: flex;
  gap: var(--gap);
  flex-shrink: 0;
  padding-right: var(--gap);
}

@keyframes marquee-left{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee:hover .marquee-track{
  animation-play-state: paused;
}

/* mto-migrated:css:post=41:el=4d858dd0:sha=9e6bcb59131d | elementor_library 41 (home-temp) | HOME-TEMP | el=4d858dd0 | custom_css */
/* =========================
   BG-Blur
   ========================= */

.blur-bg-hover{
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);

  background: #00000059;       /* normal */

  transition:
    backdrop-filter 0.4s ease,
    -webkit-backdrop-filter 0.4s ease,
    background-color 0.4s ease; /* <-- wichtig */

  will-change: backdrop-filter, background-color;
}
header .blur-bg-hover{
  border-radius: 20px;
}

/* Hover */
.blur-bg-hover:hover{
  backdrop-filter: blur(35px);
  -webkit-backdrop-filter: blur(35px);

  background: #0000008C;       /* hover */
}

/* Fallback für Browser ohne Backdrop-Support */
.no-backdrop-support .blur-bg-hover{
  background: rgba(0,0,0,0.55);
  border-radius: 0;
}

/* mto-migrated:css:post=45:el=47ee0579:sha=cc965ce76106 | elementor_library 45 (header-new) | Header | NEW | el=47ee0579 | custom_css */
/* =========================
   Header Center Column
   ========================= */

/* Default (oben) */
.header-center-col{
  flex: 0 1 auto;
  width: 100%;
  max-width: 80%;
  transition: max-width 300ms ease;
  will-change: max-width;
}

/* Beim Scrollen: schmaler */
body.header-scrolled .header-center-col{
  max-width: 40%;
}

/* Elementor Container inner */
.header-center-col > .e-con-inner{
  width: 100%;
}

/* Motion-Accessibility */
@media (prefers-reduced-motion: reduce){
  .header-center-col{ transition: none; }
}

/* =========================
   BG-Blur
   ========================= */
   
.header-center-col {
    backdrop-filter: blur(20px); /* 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 */
}

@media (max-width: 600px){
  .header-center-col{
    max-width: 100%;
  }
}

/* mto:mobile-menu-ratgeber (2026-03-02)
   Fixes mobile dropdown layout for the header mega menu item "Ratgeber".
*/
@media (max-width: 1024px){
  /* Make menu rows align nicely (text left, caret right) */
  .elementor-45 .elementor-element-face0ea .e-n-menu-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container{
    flex: 1 1 auto;
    min-width: 0;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon{
    flex: 0 0 auto;
    margin-left: 8px;
    padding: 10px;
    line-height: 0;
    border: 0;
    background: transparent;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon svg{
    width: 18px;
    height: 18px;
    display: block;
  }

  /* Dropdown content should use full width on mobile */
  .elementor-45 .elementor-element-face0ea .e-n-menu-content,
  .elementor-45 .elementor-element-face0ea .e-n-menu-content > .e-con-inner,
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627{
    width: 100% !important;
    max-width: 100% !important;
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 > .e-con-inner{
    padding: 10px 16px;
    gap: 10px;
  }

  /* Sub-links as clean list items instead of big centered buttons */
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button{
    width: 100%;
    justify-content: flex-start;
    text-align: left;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 12px;
    padding: 12px 14px;
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button .elementor-button-text{
    font-size: 16px;
  }
}

/* mto:mobile-menu-blur (2026-03-02)
   Make the mobile navigation overlay readable by adding an opaque background + blur.
*/
@media (max-width: 1024px){
  /* Menu overlay panel (opened state) */
  .elementor-45 .elementor-element-face0ea .e-n-menu-toggle[aria-expanded="true"] + .e-n-menu-wrapper{
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }

  /* Ensure text contrast */
  .elementor-45 .elementor-element-face0ea .e-n-menu-wrapper,
  .elementor-45 .elementor-element-face0ea .e-n-menu-wrapper a{
    color: #fff;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-wrapper a:hover,
  .elementor-45 .elementor-element-face0ea .e-n-menu-wrapper a:focus{
    color: #fff;
  }

  /* Slightly darker background for the Ratgeber dropdown content inside the menu */
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627{
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-radius: 14px;
  }
}

/* mto:mobile-menu-spacing-buttons (2026-03-02)
   Reduce top whitespace, add bottom breathing room, and modernize mobile menu items/buttons.
*/
@media (max-width: 1024px){
  /* Panel spacing */
  .elementor-45 .elementor-element-face0ea .e-n-menu-wrapper{
    padding-top: 6px !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
    margin-top: 0 !important;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-heading{
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Main menu items (make them look like modern tappable buttons) */
  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container{
    width: 100%;
    display: flex;
    align-items: center;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container:active{
    transform: translateY(1px);
    background: rgba(255, 255, 255, 0.10);
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-title-text{
    font-size: 16px;
    line-height: 1.2;
  }

  /* Dropdown icon button should align visually with the menu item */
  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon{
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
  }

  /* Ratgeber dropdown buttons */
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button{
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 10px 26px rgba(0,0,0,0.18);
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button:active{
    transform: translateY(1px);
    background: rgba(255, 255, 255, 0.10);
  }
}

/* mto:mobile-menu-no-border (2026-03-02)
   Remove borders on mobile menu items/buttons.
*/
@media (max-width: 1024px){
  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container,
  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon,
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button{
    border: 0 !important;
  }
}

/* mto:mobile-menu-no-bg (2026-03-02)
   Remove backgrounds/shadows on mobile menu items/buttons (keep only spacing/typography).
*/
@media (max-width: 1024px){
  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container,
  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon,
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button{
    background: transparent !important;
    box-shadow: none !important;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container:active,
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button:active{
    background: transparent !important;
    transform: none !important;
  }
}

/* mto:mobile-menu-icon-fix (2026-03-02)
   Ensure the dropdown icon stays aligned right (fixes width:100% on title container).
*/
@media (max-width: 1024px){
  .elementor-45 .elementor-element-face0ea .e-n-menu-title{
    align-items: center;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-title-container{
    width: auto !important;
    flex: 1 1 auto;
  }

  .elementor-45 .elementor-element-face0ea .e-n-menu-dropdown-icon{
    align-self: center;
    margin-left: 8px;
  }
}

/* mto:mobile-dropdown-left (2026-03-02)
   Left-align dropdown buttons inside the mobile menu (Ratgeber).
*/
@media (max-width: 1024px){
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627,
  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 *{
    text-align: left;
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 .elementor-widget-button{
    text-align: left;
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button{
    justify-content: flex-start;
  }

  .elementor-45 .elementor-element-face0ea #e-n-menu-content-2627 a.elementor-button .elementor-button-content-wrapper{
    justify-content: flex-start;
    width: 100%;
  }
}