/* Header und Menü Thomas Jung (Phase 5, site-weit). Ausgeliefert über das mu-plugin wotex-header-jung.php.
   Vorgaben: design/design-dna.md „Header und Menü“, von Jan in der Bühne freigegeben (05.11.2026).
   Der Header selbst kommt aus dem Theme (PBF Premium, Layout „Menü rechts“); dieses CSS gestaltet ihn nur.
   Eigene Klassen beginnen mit j-. Alles hängt an #header bzw. .j-leiste, nichts greift in den Seiteninhalt. */
@font-face{font-family:"Jung Display";src:url("/wp-content/uploads/2026/11/bricolage-grotesque-latin-variable.woff2") format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Jung Text";src:url("/wp-content/uploads/2026/11/figtree-latin-variable.woff2") format("woff2");font-weight:400 700;font-style:normal;font-display:swap}

#header,.j-leiste{--jh-tinte:#15171C;--jh-blau:#0E4498;--jh-rot:#E00008;--jh-rot-d:#B80007;--jh-gelb:#F8E800;--jh-jl:#D9DEE7;--jh-grau:#5A616B;
  --jh-max:1500px;--jh-rand:max(16px,4vw);
  --jh-text:"Jung Text",system-ui,-apple-system,"Segoe UI",sans-serif;--jh-display:"Jung Display","Trebuchet MS",system-ui,sans-serif;
  --jh-strich:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 40 3, 78 10, 120 6 S 176 4, 197 7' fill='none' stroke='%23F8E800' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E")}
body.home #header,body.j-start #header{--jh-max:1240px}
/* Ebene über den festen Leisten der Seiten (dort z-index 99): sonst verdeckt die Leiste am Handy den unteren Teil des offenen Menüs (06.11.2026) */
#header{position:relative;z-index:1000;font-family:var(--jh-text)}
#header *,.j-leiste *{box-sizing:border-box}

/* ---------- Pre-Header: die SEO-Zeile ---------- */
#header .wpbf-pre-header{background:var(--jh-tinte);color:#fff;font:400 13.5px/1.2 var(--jh-text)}
#header .wpbf-inner-pre-header{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;max-width:calc(var(--jh-max) + 2*var(--jh-rand));
  min-height:40px;padding:0 var(--jh-rand);white-space:nowrap}
#header .wpbf-inner-pre-header-left,#header .wpbf-inner-pre-header-right{display:block;width:auto !important;padding:0;text-align:left;color:#fff}
#header .wpbf-inner-pre-header-left{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:rgba(255,255,255,.86)}
#header .wpbf-inner-pre-header-right{flex:0 0 auto;display:flex;gap:22px}
#header .wpbf-pre-header a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
#header .wpbf-pre-header a:hover,#header .wpbf-pre-header a:focus-visible{text-decoration:underline;text-underline-offset:3px}
#header .wpbf-pre-header svg{width:13px;height:13px;fill:var(--jh-gelb);flex:none}

/* ---------- Kopfzeile: Logo links, Menü rechts ---------- */
#header .wpbf-navigation{background:#fff;border-bottom:0;width:100%}
#header .wpbf-nav-wrapper.wpbf-menu-right{position:relative;max-width:calc(var(--jh-max) + 2*var(--jh-rand));padding:0 var(--jh-rand)}
#header .wpbf-menu-right>.wpbf-grid{display:flex;flex-wrap:nowrap;align-items:stretch;justify-content:space-between;gap:24px;height:96px;margin:0;width:100%}
#header .wpbf-menu-right>.wpbf-grid::before,#header .wpbf-menu-right>.wpbf-grid::after,#header .wpbf-mobile-nav-wrapper::before,#header .wpbf-mobile-nav-wrapper::after,
#header .wpbf-inner-pre-header::before,#header .wpbf-inner-pre-header::after,#header .wpbf-menu-right .wpbf-menu::before,#header .wpbf-menu-right .wpbf-menu::after{content:none !important}
#header .wpbf-menu-right .wpbf-logo-container,#header .wpbf-menu-right .wpbf-menu-container{display:flex;align-items:center;width:auto;padding:0;float:none}
#header .wpbf-menu-right .wpbf-logo{line-height:0}
#header .wpbf-menu-right .wpbf-logo img{height:64px;width:auto;max-width:none;display:block}
#header .wpbf-menu-right #navigation{height:100%}
#header .wpbf-menu-right .wpbf-menu{float:none;display:flex;align-items:stretch;gap:30px;height:100%;margin:0;padding:0}
#header .wpbf-menu-right .wpbf-menu>.menu-item{float:none;display:flex;align-items:center;margin:0}
#header .wpbf-menu-right .wpbf-menu>.menu-item>a{position:relative;display:inline-block;padding:8px 0;font:600 15.5px/1 var(--jh-text);letter-spacing:0;text-transform:none;white-space:nowrap;
  color:var(--jh-tinte);background:none;text-decoration:none}
#header .wpbf-menu-right .wpbf-menu>.menu-item>a .wpbff{font-size:9px;margin-left:5px;opacity:.6;vertical-align:1px}
/* Aktiver und offener Punkt: der gelbe Pinselstrich, die Bodenlinie des Logos */
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-cta-menu-item):not(.j-tel)>a::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-3px;height:9px;
  background:var(--jh-strich) no-repeat 0 0/100% 100%;transform:scaleX(0);transform-origin:0 50%;transition:transform .22s ease-out;pointer-events:none}
#header .wpbf-menu-right .wpbf-menu>.current-menu-item>a::after,#header .wpbf-menu-right .wpbf-menu>.current-menu-ancestor>a::after,
#header .wpbf-menu-right .wpbf-menu>.current_page_parent>a::after,#header .wpbf-menu-right .wpbf-menu>.menu-item:hover>a::after,
#header .wpbf-menu-right .wpbf-menu>.menu-item>a:focus-visible::after{transform:scaleX(1) !important}
/* Aktiver und überfahrener Punkt bleiben in Tinte; das Theme färbt sie sonst hellblau (alte Akzentfarbe, auf Weiß zu schwach). Kenntlich macht ihn der Strich. */
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-cta-menu-item)>a,#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-cta-menu-item):hover>a,
#header .wpbf-menu-right .wpbf-menu>.current-menu-item:not(.wpbf-cta-menu-item)>a,#header .wpbf-menu-right .wpbf-menu>.current-menu-ancestor:not(.wpbf-cta-menu-item)>a{color:var(--jh-tinte) !important}
#header .wpbf-menu a:focus-visible,#header .wpbf-logo a:focus-visible,#header .wpbf-mobile-nav-wrapper a:focus-visible,#header .wpbf-mobile-menu-toggle:focus-visible{outline:2px solid var(--jh-blau);outline-offset:3px}

/* Telefon im Menü: nur in der mitlaufenden Kopfzeile sichtbar */
#header .wpbf-menu-right .wpbf-menu>.menu-item.j-tel{display:none}
#header .wpbf-menu>.j-tel>a{font-variant-numeric:tabular-nums}
/* Hauptbutton */
#header .wpbf-navigation .wpbf-menu>.wpbf-cta-menu-item>a{background:var(--jh-rot);color:#fff !important;padding:13px 20px;border-radius:4px;font:600 15.5px/1 var(--jh-text);transition:background-color .15s}
#header .wpbf-navigation .wpbf-menu>.wpbf-cta-menu-item>a:hover,#header .wpbf-navigation .wpbf-menu>.wpbf-cta-menu-item>a:focus-visible{background:var(--jh-rot-d);color:#fff !important}

/* ---------- Aufklappmenüs ---------- */
#header .wpbf-menu-right .wpbf-menu .sub-menu{margin:0;list-style:none}
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu{top:100%;left:-20px;width:290px;padding:10px 0;background:#fff;border:1px solid var(--jh-jl);border-radius:0 0 8px 8px;
  box-shadow:0 30px 60px -40px rgba(21,23,28,.5)}
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu li{border:0;background:none}
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu a{display:block;padding:9px 20px;font:400 15px/1.35 var(--jh-text);color:var(--jh-tinte);text-transform:none;background:none;text-decoration:none}
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu a:hover,#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu a:focus-visible,
#header .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-mega-menu)>.sub-menu .current-menu-item>a{color:var(--jh-blau) !important;background:#F5F7FB}

/* Leistungen: vier Spalten = vier Gruppen, jede mit ihrem Strich in der Gruppenfarbe */
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu{top:100%;left:var(--jh-rand);right:var(--jh-rand);width:auto;padding:28px 18px 22px;background:#fff;border:1px solid var(--jh-jl);border-radius:0 0 8px 8px;
  box-shadow:0 30px 60px -40px rgba(21,23,28,.5)}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu::after{content:"";display:table;clear:both}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.menu-item{float:left;width:25%;padding:0 14px 18px;margin:0;border:0}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-gr>a{display:block;margin:0;padding:0;font:700 17px/1.2 var(--jh-display);letter-spacing:0;text-transform:none;color:var(--jh-tinte);text-decoration:none;white-space:normal}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-gr>a::after{content:"";display:block;width:120px;height:10px;margin:6px 0 10px;background:no-repeat 0 0/100% 100%}
#header .j-gr-rot>a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 40 3, 78 10, 120 6 S 176 4, 197 7' fill='none' stroke='%23E00008' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") !important}
#header .j-gr-gruen>a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 6 C 44 9, 80 3, 122 7 S 172 8, 197 5' fill='none' stroke='%23009038' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") !important}
#header .j-gr-gelb>a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 7 C 36 4, 84 9, 118 5 S 170 6, 197 8' fill='none' stroke='%23F8E800' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") !important}
#header .j-gr-blau>a::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'%3E%3Cpath d='M3 5 C 42 8, 76 4, 124 7 S 174 5, 197 7' fill='none' stroke='%230098E0' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") !important}
#header .wpbf-menu-right .wpbf-mega-menu .j-gr>.sub-menu{display:block;position:static;opacity:1;width:auto;padding:0;background:none;border:0;box-shadow:none}
#header .wpbf-menu-right .wpbf-mega-menu .j-gr>.sub-menu li{float:none;width:auto;padding:0;margin:0;border:0;background:none}
#header .wpbf-menu-right .wpbf-mega-menu .j-gr>.sub-menu a{display:inline-block;margin:0;padding:0;font:400 15px/1.95 var(--jh-text);color:var(--jh-tinte);text-transform:none;text-decoration:none;white-space:normal}
#header .wpbf-menu-right .wpbf-mega-menu .j-gr a:hover,#header .wpbf-menu-right .wpbf-mega-menu .j-gr a:focus-visible,
#header .wpbf-menu-right .wpbf-mega-menu .j-gr>.sub-menu .current-menu-item>a{color:var(--jh-blau) !important;text-decoration:underline;text-underline-offset:3px}
/* Fußzeile des Leistungen-Menüs */
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss{width:auto;padding:14px 0 0;border-top:1px solid var(--jh-jl)}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss-1{clear:both;margin-left:14px;padding-right:28px}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss-2{padding-right:14px}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu[style*="display: block"],#header .wpbf-menu-right .wpbf-mega-menu.wpbf-sub-menu-focus>.sub-menu{display:grid !important;grid-template-columns:repeat(4,minmax(0,1fr))}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu[style*="display: block"]::after,#header .wpbf-menu-right .wpbf-mega-menu.wpbf-sub-menu-focus>.sub-menu::after{content:none}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu[style*="display: block"]>.menu-item,#header .wpbf-menu-right .wpbf-mega-menu.wpbf-sub-menu-focus>.sub-menu>.menu-item{float:none;width:auto}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu[style*="display: block"]>.j-fuss-1,#header .wpbf-menu-right .wpbf-mega-menu.wpbf-sub-menu-focus>.sub-menu>.j-fuss-1{grid-column:1;margin-left:14px;padding-right:0}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu[style*="display: block"]>.j-fuss-2,#header .wpbf-menu-right .wpbf-mega-menu.wpbf-sub-menu-focus>.sub-menu>.j-fuss-2{grid-column:2 / -1;margin-right:14px;padding-left:28px}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss>a{display:inline-block;margin:0;padding:0;font:600 15px/1.4 var(--jh-text);color:var(--jh-blau);text-transform:none;text-decoration:none}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss>a::after{content:" →"}
#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss>a:hover,#header .wpbf-menu-right .wpbf-mega-menu>.sub-menu>.j-fuss>a:focus-visible{text-decoration:underline;text-underline-offset:3px}

/* ---------- Startseite: Kopfzeile liegt durchsichtig über dem Foto ---------- */
#header .wpbf-navigation-transparent:not(.wpbf-navigation-active){position:absolute;left:0;right:0;background:transparent}
#header .wpbf-navigation-transparent:not(.wpbf-navigation-active) .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-cta-menu-item)>a,
#header .wpbf-navigation-transparent:not(.wpbf-navigation-active) .wpbf-menu-right .wpbf-menu>.menu-item:not(.wpbf-cta-menu-item):hover>a{color:#fff !important}
/* Logo-Variante „ohne“: Über dem Foto steht kein Logo im Kopf, das Logo an der Hauswand ist das Logo. Der Platz bleibt, das Menü steht rechts.
   In der mitlaufenden Kopfzeile (wpbf-navigation-active) ist es wieder da. Gilt nur am Desktop, mobil ist die Kopfzeile nicht durchsichtig. */
body.j-logo-ohne #header .wpbf-navigation-transparent:not(.wpbf-navigation-active) .wpbf-menu-right .wpbf-logo{visibility:hidden}

/* ---------- Mitlaufende Kopfzeile ---------- */
#header .wpbf-navigation-active{background:#fff;border-bottom:1px solid var(--jh-jl) !important;box-shadow:0 12px 30px -24px rgba(21,23,28,.45)}
#header .wpbf-navigation-active .wpbf-nav-wrapper{padding-top:0;padding-bottom:0}
#header .wpbf-navigation-active .wpbf-menu-right>.wpbf-grid{height:66px}
#header .wpbf-navigation-active .wpbf-menu-right .wpbf-logo{position:static}
#header .wpbf-navigation-active .wpbf-menu-right .wpbf-logo img{height:44px;width:auto}
#header .wpbf-navigation-active .wpbf-menu-right .wpbf-menu{gap:24px}
#header .wpbf-navigation-active .wpbf-menu-right .wpbf-menu>.menu-item>a{color:var(--jh-tinte)}
@media (min-width:1200px){#header .wpbf-navigation-active .wpbf-menu-right .wpbf-menu>.menu-item.j-tel{display:flex}}

/* ---------- Schmale Desktop-Fenster ---------- */
@media (max-width:1180px){
  #header .wpbf-menu-right .wpbf-menu{gap:22px}
  #header .wpbf-menu-right .wpbf-logo img{height:56px}
  #header .wpbf-menu-right .wpbf-mega-menu>.sub-menu{padding-inline:8px}
  #header .wpbf-menu-right .wpbf-mega-menu .j-gr>.sub-menu a{font-size:14.5px}
}
@media (max-width:1240px){#header .wpbf-inner-pre-header-left{display:none !important}#header .wpbf-inner-pre-header{justify-content:flex-end}}

/* ---------- Handy und Tablet (Theme schaltet bei 1024 px um) ---------- */
@media (max-width:1024px){
  #header .wpbf-pre-header{font-size:12.5px}
  #header .wpbf-inner-pre-header{min-height:36px;justify-content:center}
  #header .wpbf-inner-pre-header-right{gap:16px}
  #header .wpbf-mobile-nav-wrapper{display:flex;align-items:center;justify-content:space-between;gap:12px;height:68px;padding:0 16px;background:#fff;border:0 !important}
  #header .wpbf-mobile-logo-container,#header .wpbf-menu-toggle-container{display:flex;align-items:center;width:auto;padding:0;float:none}
  #header .wpbf-mobile-logo{line-height:0}
  #header .wpbf-mobile-logo img{height:42px;width:auto;max-width:none;display:block}
  #header .wpbf-menu-toggle-container{gap:10px;justify-content:flex-end}
  #header .j-mtel,#header .wpbf-mobile-menu-toggle{width:44px;height:44px;display:grid;place-items:center;margin:0;padding:0;border:1px solid var(--jh-jl);border-radius:4px;background:#fff;color:var(--jh-tinte);font-size:20px;line-height:1}
  #header .j-mtel svg{width:20px;height:20px;fill:none;stroke:var(--jh-tinte);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  #header .wpbf-mobile-menu-toggle::before{color:var(--jh-tinte)}
  #header .wpbf-navigation{border-bottom:1px solid var(--jh-jl)}
  /* Menü als Akkordeon */
  #header .wpbf-mobile-menu-container{font-family:var(--jh-text)}
  #header .wpbf-mobile-menu{margin:0;padding:0 0 96px}
  #header .wpbf-mobile-menu .menu-item{border-color:var(--jh-jl)}
  #header .wpbf-mobile-menu>.menu-item>a{padding:16px 20px;font:600 17px/1.2 var(--jh-text);color:var(--jh-tinte);text-transform:none;background:none}
  #header .wpbf-mobile-menu .sub-menu{background:#F5F7FB}
  #header .wpbf-mobile-menu .sub-menu a{padding:13px 20px 13px 28px;font:400 16px/1.3 var(--jh-text);color:var(--jh-tinte);text-transform:none;background:none}
  #header .wpbf-mobile-menu .sub-menu .sub-menu{background:#fff}
  #header .wpbf-mobile-menu .sub-menu .sub-menu a{padding-left:40px;font-size:15.5px}
  #header .wpbf-mobile-menu .j-gr>a{font:700 16.5px/1.2 var(--jh-display)}
  #header .wpbf-mobile-menu .j-gr>a::after{content:"";display:block;width:84px;height:8px;margin-top:5px;background:no-repeat 0 0/100% 100%}
  #header .wpbf-mobile-menu .j-fuss>a{font-weight:600;color:var(--jh-blau)}
  #header .wpbf-mobile-menu .current-menu-item>a{color:var(--jh-blau) !important}
  #header .wpbf-mobile-menu .wpbf-submenu-toggle{width:52px;color:var(--jh-tinte)}
  #header .wpbf-mobile-menu>.wpbf-cta-menu-item{padding:16px 20px;border:0}
  #header .wpbf-mobile-menu>.wpbf-cta-menu-item>a{display:block;text-align:center;background:var(--jh-rot);color:#fff !important;padding:15px 20px;border-radius:4px;font:600 16px/1 var(--jh-text)}
  #header .wpbf-navigation-active .wpbf-mobile-nav-wrapper{height:60px}
  #header .wpbf-navigation-active .wpbf-mobile-logo img{height:38px}
}
@media (max-width:379px){#header .wpbf-pre-header .j-pmail{display:none}}

/* ---------- Leiste unten auf dem Handy, nur auf der Startseite: Anrufen und Preis ----------
   Die Leistungs-, Orts- und Angebotsseiten haben schon eine eigene feste Leiste, dort erscheint diese nicht (body.j-hat-leiste fehlt).
   Rechts bleibt Platz für den Knopf der Barrierefreiheits-Hilfe (liegt im Shadow DOM, lässt sich nicht verschieben). */
.j-leiste{display:none}
@media (max-width:767px){
  .j-leiste{position:fixed;left:0;right:0;bottom:0;z-index:900;display:grid;grid-template-columns:1fr 1.5fr;gap:8px;padding:10px 78px calc(10px + env(safe-area-inset-bottom,0px)) 16px;
    background:#fff;border-top:1px solid var(--jh-jl);font-family:var(--jh-text);transform:translateY(110%);transition:transform .25s ease-out}
  .j-leiste.j-an{transform:none}
  .j-leiste a{display:block;text-align:center;padding:14px 6px;border-radius:4px;font:600 15px/1 var(--jh-text);text-decoration:none;white-space:nowrap}
  .j-leiste .j-l-tel{border:1.5px solid var(--jh-blau);color:var(--jh-blau);padding-block:12.5px;background:#fff}
  .j-leiste .j-l-preis{background:var(--jh-rot);color:#fff}
  body.j-hat-leiste{padding-bottom:calc(66px + env(safe-area-inset-bottom,0px))}
  body.j-hat-leiste .brlbs-cmpnt-widget{bottom:calc(66px + env(safe-area-inset-bottom,0px)) !important}
}
@media (prefers-reduced-motion:reduce){
  #header .wpbf-menu-right .wpbf-menu>.menu-item>a::after,.j-leiste{transition:none !important}
}