/* ==========================================================================
   HEADER & FLYOUT-MENÜ (Theme Builder → Globaler Header) – 09.09.2026
   --------------------------------------------------------------------------
   Verhalten:
   · Seite startet OHNE Leiste. Ab 80 px Scrollen (Wert im Skript unten: SCHWELLE)
     gleitet die Leiste oben ein und bleibt dort (sticky).
   · Hamburger (rechts) öffnet ein Flyout von rechts: 70 % Breite (Handy 100 %), oben/unten/rechts bündig, Blur + Olive-Schleier.
   · Haupt- und Unterpunkte in Montserrat (Regular / Light), alle offen sichtbar; Handy: Flyout volle Breite, ohne Logo.
   · Button „Erstgespräch buchen“: Desktop links in der Leiste, auf Tablet/Handy im Flyout.
   · Social-Icons stehen unten im Flyout.
   Was du im Builder einstellst (Header-Sektion / Module): Blur + Schleier der LEISTE,
   Logo, Button-Optik, Hamburger-Farbe/-Größe, Textfarbe im Flyout (Menü-Modul → Mobiles Menü),
   Social-Icons (Icon-Module in der Reihe „Flyout-Extras“).
   Was du HIER einstellst: die Stellschrauben direkt darunter.
   ========================================================================== */
:root{
  --hr-flyout-breite:70%;                       /* Breite des Flyouts, Desktop/Tablet */
  --hr-flyout-breite-handy:100%;                /* Breite des Flyouts, Handy (< 768 px) */
  --hr-flyout-blur:10px;                        /* Blur hinter dem Flyout */
  --hr-flyout-schleier:rgba(140,149,98,.55);    /* Schleier über dem Blur (Primärfarbe Olive, 55 %) */
  --hr-flyout-schrift:#f4f4f4;                  /* Schrift-/Iconfarbe im Flyout (Nebel) */
  --hr-flyout-font-haupt:"Montserrat",sans-serif;     /* Hauptpunkte */
  --hr-flyout-font-unter:"Montserrat",sans-serif;     /* Unterpunkte */
  --hr-flyout-groesse-haupt:18px;               /* Schriftgröße Hauptpunkte (Handy: 16px, s. unten) */
  --hr-flyout-groesse-unter:14px;               /* Schriftgröße Unterpunkte (Handy: 13px) */
  --hr-flyout-icon-groesse:18px;                /* Social-Icons */
  --hr-flyout-icon-abstand:32px;                /* Abstand zwischen den Social-Icons */
  --hr-flyout-abstand:48px;                     /* Innenabstand des Flyouts (Handy: 60 % davon) */
  --hr-flyout-spalten:2;                        /* Menü-Spalten auf Desktop (1 = alles untereinander) */
  --hr-flyout-dauer:.45s;                       /* Dauer des Hereingleitens */
  --hr-leiste-dauer:.45s;                       /* Dauer des Einblendens der Leiste */
}

/* --- Leiste: fixiert oben, zunächst unsichtbar ------------------------------------------ */
.et-l--header .hr-header{position:fixed;top:0;left:0;right:0;z-index:9990;
  transform:translateY(-100%);opacity:0;pointer-events:none;
  transition:transform var(--hr-leiste-dauer) ease,opacity var(--hr-leiste-dauer) ease}
body.hr-scrolled .et-l--header .hr-header,
body.hr-flyout-open .et-l--header .hr-header{transform:none;opacity:1;pointer-events:auto}
.et-l--header .hr-header .et_pb_row{margin:0 auto}
.et-l--header .hr-header .et_pb_module{margin-bottom:0}
body.admin-bar .et-l--header .hr-header{top:32px}                 /* nur eingeloggt: unter der WordPress-Leiste */
@media (max-width:782px){body.admin-bar .et-l--header .hr-header{top:46px}}

/* --- Menü-Modul: immer nur Hamburger (auch Desktop), kein ausgeklapptes Menü ------------- */
.hr-nav .et_pb_menu__menu{display:none!important}
.hr-nav .et_mobile_nav_menu{display:block!important;float:none;margin:0}
.hr-nav .et_pb_menu__wrap{justify-content:flex-end}
.hr-nav .mobile_nav{background:transparent!important;padding:0}
.hr-nav .mobile_menu_bar{display:block;line-height:1;cursor:pointer}
.hr-nav .mobile_menu_bar:before{top:0;position:relative}
.hr-header .et_mobile_menu{display:none!important}                          /* Divis eigenes Dropdown bleibt aus – das Flyout nutzt eine Kopie */
.hr-header .hr-flyout-extras{display:none}                                  /* wird per Skript ins Flyout verschoben */

/* --- Spalten: Button nur Desktop, Logo bleibt exakt mittig --------------------------------- */
@media (max-width:980px){
  .hr-header .hr-col-button{visibility:hidden;flex:0 0 44px!important;max-width:44px;height:1px}  /* unsichtbarer Platzhalter = Breite des Hamburgers */
  .hr-header .hr-col-button .et_pb_module{display:none}
  .hr-header .hr-col-nav{flex:0 0 44px!important;max-width:44px}
  .hr-header .hr-col-logo{flex:1 1 auto!important;max-width:none}
}

/* --- Flyout ------------------------------------------------------------------------------ */
#hr-flyout-backdrop{position:fixed;inset:0;z-index:9995;background:rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .35s}
body.hr-flyout-open #hr-flyout-backdrop{opacity:1;pointer-events:auto}
#hr-flyout{position:fixed;top:0;right:0;bottom:0;width:var(--hr-flyout-breite);max-width:100%;z-index:9996;
  box-sizing:border-box;padding:var(--hr-flyout-abstand);overflow-y:auto;overscroll-behavior:contain;
  background:var(--hr-flyout-schleier);-webkit-backdrop-filter:blur(var(--hr-flyout-blur));backdrop-filter:blur(var(--hr-flyout-blur));
  color:var(--hr-flyout-schrift);text-align:left;transform:translateX(100%);transition:transform var(--hr-flyout-dauer) cubic-bezier(.4,0,.2,1)}
body.hr-flyout-open #hr-flyout{transform:none}
body.hr-flyout-open{overflow:hidden}
@media (max-width:767px){#hr-flyout{width:var(--hr-flyout-breite-handy);padding:calc(var(--hr-flyout-abstand) * .6)}}
#hr-flyout .hr-flyout-inner{display:flex;flex-direction:column;min-height:100%}
#hr-flyout .hr-flyout-logo{display:block;width:170px;max-width:60%;margin:0 0 28px}
@media (max-width:767px){#hr-flyout .hr-flyout-logo{display:none}#hr-flyout .hr-flyout-inner{padding-top:26px}}   /* Handy: kein Logo im Flyout */
#hr-flyout .hr-flyout-logo img{width:100%;height:auto;display:block}
#hr-flyout .hr-flyout-close{position:absolute;top:22px;right:26px;background:none;border:0;padding:4px 8px;cursor:pointer;
  color:var(--hr-flyout-schrift);font:100 52px/1 "Montserrat",sans-serif;opacity:.9}
#hr-flyout .hr-flyout-close:hover{opacity:1}

/* Menüliste im Flyout (Divi-Standardoptik neutralisiert) */
.hr-flyout ul.et_mobile_menu{display:block!important;position:static;width:auto;margin:0;padding:0;border:0;box-shadow:none;background:transparent!important;visibility:visible;opacity:1}
.hr-flyout .et_mobile_menu li{list-style:none;margin:0;padding:0}
@media (min-width:981px){.hr-flyout ul.et_mobile_menu{column-count:var(--hr-flyout-spalten);column-gap:48px}
  .hr-flyout .et_mobile_menu > li{break-inside:avoid;-webkit-column-break-inside:avoid;padding-bottom:6px}}
.hr-flyout .et_mobile_menu li a{display:block;border:0;background:transparent!important;font-weight:400;opacity:1;padding:5px 0;color:var(--hr-flyout-schrift)}
.hr-flyout .et_mobile_menu > li > a{font-family:var(--hr-flyout-font-haupt);font-size:var(--hr-flyout-groesse-haupt);font-weight:400;line-height:1.35;letter-spacing:.3px}
.hr-flyout .et_mobile_menu .sub-menu{display:block!important;margin:0;padding:0 0 10px 0;border:0}
.hr-flyout .et_mobile_menu .sub-menu li a{font-family:var(--hr-flyout-font-unter);font-size:var(--hr-flyout-groesse-unter);font-weight:300;line-height:1.4;letter-spacing:.2px;padding:3px 0 3px 14px;opacity:.9}
@media (max-width:767px){.hr-flyout .et_mobile_menu > li > a{font-size:16px;padding:3px 0}.hr-flyout .et_mobile_menu .sub-menu li a{font-size:13px;line-height:1.35;padding:1px 0 2px 12px}.hr-flyout .et_mobile_menu .sub-menu{padding-bottom:5px}
  #hr-flyout .hr-flyout-extras{padding-top:16px}#hr-flyout .hr-flyout-extras .et_pb_column{row-gap:16px!important}}
.hr-flyout .et_mobile_menu li a:hover{opacity:.65}
.hr-flyout .et_mobile_menu .menu-item-has-children > a{background:transparent!important;font-weight:400}
.hr-flyout .et_mobile_menu .current-menu-item > a{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
.hr-flyout .et_mobile_menu li.menu-item-has-children > a:after{display:none}

/* Extras unten im Flyout: Button (nur Tablet/Handy) + Social-Icons */
#hr-flyout .hr-flyout-extras{display:flex;margin:auto 0 0;padding:28px 0 25px;width:100%;max-width:100%}   /* 25 px Abstand nach unten */
#hr-flyout .hr-flyout-extras .et_pb_column{column-gap:var(--hr-flyout-icon-abstand)!important;row-gap:22px!important}
#hr-flyout .hr-flyout-extras .et_pb_button_module_wrapper{width:100%}
#hr-flyout .hr-flyout-extras .et_pb_button{display:block;text-align:center;color:var(--hr-flyout-schrift)!important;border-color:var(--hr-flyout-schrift)!important;font-size:14px!important;letter-spacing:1px!important}   /* Button im Flyout folgt der Flyout-Schriftfarbe */
#hr-flyout .hr-flyout-extras .et_pb_icon{margin:0;padding:0}
#hr-flyout .hr-flyout-extras .et_pb_icon .et-pb-icon{color:var(--hr-flyout-schrift);font-size:var(--hr-flyout-icon-groesse)!important;transition:opacity .2s}
#hr-flyout .hr-flyout-extras .et_pb_icon:hover .et-pb-icon{opacity:.65}
@media (min-width:981px){#hr-flyout .hr-flyout-extras .et_pb_button_module_wrapper{display:none}}   /* Desktop: Button sitzt in der Leiste */


/* Sprungziel Kontakt im Footer - unter der festen Leiste */
#kontakt{scroll-margin-top:90px;}
html{scroll-behavior:smooth;}