/* your-matrix Menü (Desktop + Handy). Übernommen aus dem Code-Modul „ym-menue-block“ der Seiten, Stand 02.10.2026.
   Lädt jetzt zentral über das Plugin; die Code-Module auf den Seiten werden danach entfernt. */
/* =========================================================
   your-matrix · Menü (Desktop + Handy)
   Ersetzt die Optik, die vorher Divi Pixel gemacht hat.
   Einfügen unter: Divi → Theme-Optionen → Allgemein →
   Benutzerdefiniertes CSS
   ========================================================= */

/* Querriegel gegen seitliches Scrollen. clip statt hidden, damit
   klebende Elemente weiter funktionieren; hidden bleibt als Rueckfall
   fuer aeltere Browser stehen. */
html,body{max-width:100%;overflow-x:hidden;overflow-x:clip}

:root{
  --ym-navy:#25385D;
  --ym-tinte:#19333E;
  --ym-cyan:#0A89C5;
  --ym-aqua:#7FD8DC;
  --ym-linie:#E3E9EE;
}

/* ---------- Sprunglink „Zum Inhalt“ (WCAG 2.4.1) ----------
   Erster Tabstopp der Seite (includes/signatur.php), nur im Fokus sichtbar. */
.ym-sprunglink{
  position:fixed;top:12px;left:12px;z-index:100001;
  padding:12px 20px;border-radius:999px;
  background:var(--ym-navy);color:#fff;
  font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;
  /* Kritik R18 N10: Zielfläche 44 px hoch (vorher 43) */
  display:inline-flex;align-items:center;min-height:44px;box-sizing:border-box;
  opacity:0;transform:translateY(-160%);pointer-events:none;
  transition:transform .2s cubic-bezier(.23,1,.32,1),opacity .2s cubic-bezier(.23,1,.32,1);
}
.ym-sprunglink:focus{
  opacity:1;transform:none;pointer-events:auto;color:#fff;
  outline:2px solid var(--ym-cyan);outline-offset:3px;
}

/* Ziel des Sprunglinks: bekommt per Skript tabindex=-1, ohne eigenen Ring */
/* Sprungmarken (z. B. /angebote/#coaching): Ziel bleibt unter der festen Kopfzeile sichtbar (Kopfhöhe + 24 px) */
[id]{scroll-margin-top:calc(var(--ym-kopfhoehe,84px) + 24px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#main-content{scroll-margin-top:var(--ym-kopfhoehe,80px)}
/* Kritik R18 N6: Unter 981 px scrollt der Kopf mit (nicht fest). Dann braucht ein Sprungziel keinen Platz für
   ihn, nur etwas Luft; vorher standen 109 px der vorigen Sektion über dem Ziel. */
@media (max-width:980px){
  [id]{scroll-margin-top:24px}
  #main-content{scroll-margin-top:0}
}
/* R18 N3: während des Ladens mit Sprungmarke derselbe Rand wie der Sprung aus menue.js */
html.ym-anker-laden [id]{scroll-margin-top:var(--ym-anker-rand,24px)}
#main-content:focus{outline:none}

/* Logo-Link: sichtbarer Fokusring (WCAG 2.4.7), am Bild, damit er dessen Form
   folgt. Divi animiert #logo mit "all .4s"; im Fokus ohne Übergang, sonst
   wächst der Ring sichtbar auf. */
#main-header .logo_container a:focus{outline:none}
#main-header .logo_container a:focus-visible #logo{
  outline:2px solid var(--ym-cyan);outline-offset:4px;border-radius:8px;
  transition:none;
}

/* ---------- Kopfzeile ---------- */
#main-header{
  box-shadow:none !important;
  border-bottom:1px solid transparent;
  transition:box-shadow .3s ease,border-color .3s ease,background .3s ease;
}
#main-header.et-fixed-header,
.ym-gescrollt #main-header{
  border-bottom-color:var(--ym-linie);
  box-shadow:none !important;
}

/* ---------- Menü: Desktop (erst ab 981px, darunter blendet Divi es aus) ---------- */
@media (min-width:981px){
/* Menue mittig zum Logo. Divi setzt oben 33px Abstand und erwartet unten
   33px Innenabstand an jedem Menuepunkt. Unsere Menuepunkte haben eigenen
   Innenabstand (siehe unten), deshalb gleicht die Navigation unten aus.
   Gemessen 02.10.2026 bei menu_height 66: Logo-Mitte 51,3 / Menue-Mitte 51,5,
   gescrollt 36,3 / 36,5. Die Datei laedt im Seitenkopf, kein Springen. */
#main-header #et-top-navigation{padding-bottom:31px}
#main-header.et-fixed-header #et-top-navigation{padding-bottom:16px}
#top-menu{flex-wrap:nowrap;white-space:nowrap}
#top-menu{display:flex;align-items:center;gap:.35rem}
#top-menu li{padding-right:0}
#top-menu li a{
  /* 40 px hoch wie „Mein Konto“, damit Pille und Konto-Knopf gleich groß sind */
  position:relative;display:flex;align-items:center;min-height:40px;padding:0 .85rem !important;
  opacity:1 !important; /* Farben: Divi-Customizer (menu_link #25385d, aktiv #0a89c5) */
  font-size:15px;font-weight:600;line-height:1.3;letter-spacing:.005em;
  border-radius:10px;
  transition:color .25s ease,background .25s ease;
}
/* Aktive Seite als weiche Pille statt Unterstrich (Jens 03.10.2026: „Unterstrich
   langweilig, 80er“). Ohne JS trägt der aktive Punkt die Fläche selbst. Mit JS
   (menue.js) gleitet eine einzige Pille .ym-pille zum Punkt unter der Maus und
   zurück zur aktiven Seite; dann ist die eigene Fläche der Links aus. */
#top-menu{position:relative}
#top-menu>li>a{z-index:1;background:none}
#top-menu li.current-menu-item>a,
#top-menu li.current_page_item>a,
#top-menu li.current-menu-ancestor>a,
#top-menu li.current-menu-parent>a{
  border:0 !important;box-shadow:none !important;
  color:var(--ym-navy) !important;background:rgba(37,56,93,.07);border-radius:999px;
}
/* Kritik R14 F6 (Jens 04.10.2026): Die aktive Seite behält ihre eigene Pille, auch während die
   Maus auf einem anderen Punkt steht. Die gleitende Pille zeigt nur den Hover und ist leichter:
   aktiv = Fläche .07 + Navy-Text, Hover = Fläche .035 + Cyan-Text. Kein Punkt, keine Linie. */
#top-menu.ym-pille-an>li:not(:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent))>a{background:none !important}
#top-menu>li>a:hover{color:var(--ym-navy) !important}
#top-menu>li:not(:is(.current-menu-item,.current_page_item,.current-menu-ancestor,.current-menu-parent))>a:hover{color:#0877AB !important}
.ym-pille{
  position:absolute;z-index:0;left:0;top:0;height:0;width:0;
  border-radius:999px;background:rgba(37,56,93,.035);pointer-events:none;opacity:0;
  transition:transform .24s cubic-bezier(.23,1,.32,1),width .24s cubic-bezier(.23,1,.32,1),opacity .2s ease;
}
.ym-pille.ym-sichtbar{opacity:1}
@media (prefers-reduced-motion:reduce){.ym-pille{transition:opacity .2s ease}}
/* Divis Pfeil-Zeichen abschalten, wir zeichnen den Haken selbst */
#top-menu li.menu-item-has-children>a::after{display:none !important}
#top-menu li a:focus-visible{outline:3px solid var(--ym-cyan);outline-offset:2px}

/* Untermenüs */
/* Haken als Flex-Element hinter dem Text (Kritik R13, N34): Bis 0.1.107 lag er absolut
   im rechten Innenabstand, die graue Fläche hatte links 14 px und rechts 9 px (981: 10/7),
   der Haken klebte 4 px am Text. Jetzt rechts derselbe Innenabstand wie links, 6 px Lücke.
   margin 0 3px 0 1px gleicht aus, dass der gedrehte Haken breiter wirkt als sein Kasten und das B links eine Vorbreite hat (gemessen 1440: links 15, rechts 14,5, Lücke 6);
   top hält ihn auf der bisherigen Höhe (Kastenmitte 0,11rem - 1px über der Mitte). */
#top-menu li.menu-item-has-children>a{padding-right:.85rem !important;gap:6px}
#top-menu li.menu-item-has-children>a::before{
  content:"";position:relative;order:1;flex:none;top:calc(1px - .11rem);
  width:.42rem;height:.42rem;margin:0 3px 0 1px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);opacity:.65;
  transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;
}
#top-menu li.menu-item-has-children:hover>a::before{
  transform:rotate(-135deg) translate(-2px,-2px);opacity:1;
}

#top-menu li ul.sub-menu{
  /* kein echter Abstand: der obere Rand ist durchsichtig und dient als Brücke,
     sonst schließt das Untermenü, sobald die Maus die Lücke überquert */
  top:100% !important;
  border-style:solid !important;border-color:var(--ym-linie) !important;
  border-width:10px 1px 1px !important;border-top-color:transparent !important;
  background-clip:padding-box;
  width:max-content;min-width:240px;max-width:none;padding:.3rem !important;
  border-radius:12px;
  background:rgba(255,255,255,.97) !important;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:none !important;border:1px solid var(--ym-linie);
  transform:translateY(-8px);
  transition:opacity .28s ease,transform .32s cubic-bezier(.22,1,.36,1),visibility .28s;
}
#top-menu li:hover>ul.sub-menu,
#top-menu li:focus-within>ul.sub-menu{transform:translateY(0)}
/* keine Spitze: sie lag über dem Hauptmenüpunkt */
/* Divi laesst Menuepunkte schweben, dadurch stehen die Untereintraege sonst
   nebeneinander statt untereinander. */
#top-menu li ul.sub-menu{display:block !important}
#top-menu li ul.sub-menu li{
  float:none !important;display:block !important;width:auto !important;
  padding:0 !important;margin:0 !important;
}
#top-menu li ul.sub-menu li a{
  display:block;width:auto;padding:.45rem .7rem !important;border-radius:8px;
  font-size:14px;font-weight:600;line-height:1.25;white-space:nowrap;
  transition:background .22s ease,color .22s ease,transform .22s ease;
}
#top-menu li ul.sub-menu li a::after{display:none}
#top-menu li ul.sub-menu li a:hover{
  background:rgba(10,137,197,.09);color:var(--ym-cyan) !important;transform:translateX(4px);
}

/* Untermenü auf dem Handy: eingerückt, kleiner */

}

@media (max-width:980px){
  .et_mobile_menu .sub-menu{padding-left:.9rem !important;border-left:2px solid var(--ym-linie)}
  .et_mobile_menu .sub-menu li a{font-size:1rem !important;font-weight:600 !important;padding:.8rem .25rem !important}
}

/* ---------- Hamburger ---------- */
.et_mobile_nav_menu{display:flex;align-items:center}
.mobile_menu_bar{position:relative;display:block;width:34px;height:26px;cursor:pointer}
.mobile_menu_bar::before,
.mobile_menu_bar::after{display:none !important}
.ym-burger{
  position:absolute;inset:0;pointer-events:none;
}
.ym-burger i{
  position:absolute;left:3px;right:3px;height:2.5px;border-radius:3px;
  background:var(--ym-navy);
  transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .2s ease;
}
.ym-burger i:nth-child(1){top:4px}
.ym-burger i:nth-child(2){top:11.5px}
.ym-burger i:nth-child(3){top:19px}
.ym-offen .ym-burger i:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.ym-offen .ym-burger i:nth-child(2){opacity:0}
.ym-offen .ym-burger i:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---------- Menü: Handy (Vollbild) ---------- */
@media (max-width:980px){
  .et_mobile_menu{
    position:fixed !important;top:0 !important;left:0 !important;right:0 !important;
    width:100% !important;max-width:100% !important;
    height:100dvh;max-height:none;overflow-y:auto;
    margin:0 !important;
    padding:calc(var(--ym-kopfhoehe,70px) + 3rem) 1.75rem 3.5rem !important;
    display:flex !important;flex-direction:column;justify-content:center;
    border:0 !important;box-shadow:none !important;z-index:99998;
    background:
      radial-gradient(90% 55% at 78% 8%, rgba(10,137,197,.42), transparent 62%),
      radial-gradient(70% 50% at 10% 92%, rgba(127,216,220,.18), transparent 60%),
      linear-gradient(168deg,#16253F 0%,#22345A 58%,#16294A 100%) !important;
    opacity:0;visibility:hidden;
    transition:opacity .4s ease,visibility .4s;
  }
  .ym-offen .et_mobile_menu{opacity:1;visibility:visible}

  .et_mobile_menu li{border:0 !important;position:relative}
  .et_mobile_menu>li{
    opacity:0;transform:translateY(22px);filter:blur(6px);
    transition:opacity .55s ease,transform .6s cubic-bezier(.22,1,.36,1),filter .55s ease;
  }
  .ym-offen .et_mobile_menu>li{opacity:1;transform:none;filter:blur(0)}
  .et_mobile_menu>li:nth-child(1){transition-delay:.10s}
  .et_mobile_menu>li:nth-child(2){transition-delay:.16s}
  .et_mobile_menu>li:nth-child(3){transition-delay:.22s}
  .et_mobile_menu>li:nth-child(4){transition-delay:.28s}
  .et_mobile_menu>li:nth-child(5){transition-delay:.34s}
  .et_mobile_menu>li:nth-child(6){transition-delay:.40s}
  .et_mobile_menu>li:nth-child(7){transition-delay:.46s}

  .et_mobile_menu>li>a{
    display:block;position:relative;
    padding:1.15rem 3rem !important;text-align:center;
    color:#fff !important;text-decoration:none;
    font-size:clamp(1.55rem,7vw,2.1rem);font-weight:700;line-height:1.15;
    letter-spacing:-.02em;
    transition:color .25s ease,transform .3s cubic-bezier(.22,1,.36,1);
  }
  /* feine Linie, die beim Aufbau mitwächst */
  .et_mobile_menu>li>a::after{
    content:"";position:absolute;left:22%;right:22%;bottom:0;height:1px;
    background:rgba(255,255,255,.16);
    transform:scaleX(0);transform-origin:center;
    transition:transform .6s cubic-bezier(.22,1,.36,1);
  }
  .ym-offen .et_mobile_menu>li>a::after{transform:scaleX(1);transition-delay:.35s}
  .et_mobile_menu>li:last-child>a::after{display:none}
  .et_mobile_menu>li>a:active{transform:scale(.98)}
  .et_mobile_menu .current-menu-item>a,
  .et_mobile_menu .current_page_item>a{color:var(--ym-aqua) !important}

  /* Untermenü: zu ist es weg (kein Platz, kein Fokus), auf gleitet es mit
     transform/opacity ein. Keine Höhen-Animation. !important gegen Divis
     jQuery, das beim Auf- und Zuklappen Inline-Stile setzt. */
  .et_mobile_menu li.menu-item-has-children>.sub-menu{display:none !important}
  .et_mobile_menu li.menu-item-has-children.ym-auf>.sub-menu{
    display:block !important;
    animation:ym-unter-auf .24s cubic-bezier(.23,1,.32,1) both;
  }
  /* zugeklappt darf kein Platz uebrig bleiben */
  .et_mobile_menu .sub-menu{padding:0 !important;border:0 !important;background:none}
  .et_mobile_menu li.menu-item-has-children.ym-auf>.sub-menu{padding:.25rem 0 1rem !important}
  .et_mobile_menu .sub-menu li a{
    display:block;text-align:center;text-decoration:none;
    padding:.72rem 1rem !important;border:0 !important;
    color:rgba(255,255,255,.72) !important;
    font-size:1.05rem !important;font-weight:500 !important;letter-spacing:.01em;
    transition:color .22s ease;
  }
  .et_mobile_menu .sub-menu li a:active{color:#fff !important}
  .et_mobile_menu .sub-menu .current-menu-item>a{color:var(--ym-aqua) !important}

  /* Aufklapp-Knopf */
  .ym-auf-knopf{
    position:absolute;top:.5rem;right:.2rem;width:3.4rem;height:3.4rem;
    border:0;background:none;cursor:pointer;padding:0;z-index:2;
  }
  .ym-auf-knopf::before{
    content:"";position:absolute;top:50%;left:50%;width:.6rem;height:.6rem;
    margin:-.42rem 0 0 -.3rem;
    border-right:2px solid rgba(255,255,255,.75);border-bottom:2px solid rgba(255,255,255,.75);
    transform:rotate(45deg);
    transition:transform .4s cubic-bezier(.22,1,.36,1),border-color .25s;
  }
  .ym-auf .ym-auf-knopf::before{
    transform:rotate(-135deg) translate(-3px,-3px);border-color:var(--ym-aqua);
  }
  .ym-auf-knopf:focus-visible{outline:2px solid var(--ym-aqua);outline-offset:-6px;border-radius:10px}

  /* Kopfzeile über dem Panel */
  .mobile_menu_bar{z-index:99999}
  .ym-offen .ym-burger i{background:#fff}
  .ym-offen .logo_container,.ym-offen #logo{position:relative;z-index:99999}
  body.ym-menue-offen{overflow:hidden}
}

/* Handy: Kopf mit demselben Rand wie der Inhalt (20px, Preset „Reihe Standard“) */
@media (max-width:767px){
  #main-header .container{width:calc(100% - 40px)}
}

@keyframes ym-unter-auf{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion:reduce){
  .ym-sprunglink{transition:none}
  .et_mobile_menu li.menu-item-has-children.ym-auf>.sub-menu{animation:none}
  #top-menu li a::after,.ym-burger i,.et_mobile_menu li a{transition:none !important}
  .et_mobile_menu li a{opacity:1;transform:none}
}

/* ---------- Kein Sprung nach dem Laden ----------
   Divi setzt das Polster über dem Inhalt (#page-container) erst per Skript auf
   die Höhe der festen Kopfzeile. Bis dahin steht der Inhalt 24 px (ab 981 px)
   bzw. 3 px zu hoch und rutscht nach rund einer Sekunde nach unten. Die Werte
   sind die, die Divi selbst setzt (gemessen 03.10.2026: Kopfzeile 105 px ab
   981 px, 85 px darunter, Polster je 1 px weniger). !important, weil Divi den
   Wert als Inline-Stil schreibt; so steht er vom ersten Bild an. */
.et_fixed_nav #page-container{padding-top:83px !important}
@media (min-width:981px){
  .et_fixed_nav #page-container{padding-top:104px !important}
}