/* Die Hauptnavigation des JABA-Webauftritts.
 *
 * Uebernommen am 20.09.2026 von https://www.jaba.hosting/ — Regel 1 in
 * CLAUDE.md: Header und Footer des Kundenlogins werden 1:1 aus dem
 * bestehenden Webauftritt uebernommen, Markup, Navigation, Layout und die
 * zugehoerigen Styles.
 *
 * Der Block steht dort im gebuendelten Inline-Stylesheet und ist hier nur um
 * einen Zeilenumbruch je Regel erweitert, damit der naechste Abgleich einen
 * lesbaren Diff ergibt. Sonst ist er Zeichen fuer Zeichen der Originalblock,
 * von `#site-navigation.main-navigation{--jaba-accent...` bis zur letzten
 * Media-Query. Wer ihn erneuert, ersetzt alles bis zum Anhang unten.
 *
 * Die Symbole sind SVG-Datenadressen in `--jaba-icon`, gezeichnet ueber
 * `mask` in der jeweiligen Textfarbe — kein Bild, keine Icon-Schrift, nichts
 * von einem fremden Server. Die CSP erlaubt `img-src data:`.
 *
 * Geladen wird die Datei nach den uebrigen gespiegelten Stylesheets und vor
 * wp-header-a11y.css, das dem Kundenlogin gehoert.
 *
 * Stand 20.09.2026, zweiter Abgleich am selben Tag: die Akzentfarbe ist von
 * #1e62c8 auf die Markenfarbe #4382c3 gewechselt, mit ihr der Hover-Ton auf
 * #31679e und der weiche Ton auf rgba(67,130,195,.1). Sonst hat sich nichts
 * geaendert, auch das Markup nicht.
 *
 * Eine Warnung fuer den naechsten Abgleich: **der Bundler des Webauftritts
 * formatiert zwischen zwei Durchlaeufen um.** `[class*=jaba-icon-]` wird zu
 * `[class*="jaba-icon-"]`, `none !important` zu `none!important`,
 * `url("data:…")` zu `url(data:…)` mit maskierten Leerzeichen und
 * Apostrophen. Beim zweiten Abgleich sah der Diff nach 30 geaenderten Zeilen
 * aus und war eine einzige: die Farben. Zu vergleichen sind die **Werte**,
 * nicht die Schreibweise — am einfachsten, indem man aus beiden Fassungen
 * Anfuehrungszeichen, Rueckstriche und Leerraum um `,{};:!` entfernt.
 */

#site-navigation.main-navigation{--jaba-accent:#4382c3;--jaba-accent-hover:#31679e;--jaba-accent-soft:rgba(67,130,195,.1);--jaba-text:#12233a;--jaba-muted:#3a4a5e;--jaba-sub:#5b6878;--jaba-border:#e3e6e1;--jaba-hover-bg:#f4f5f2;--jaba-radius:10px;font-family:'PT Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#site-navigation.main-navigation>ul{display:flex;align-items:center;gap:2px;margin:0;padding:0;list-style:none}
#site-navigation.main-navigation>ul>li{position:relative;float:none;margin:0;list-style:none}
#site-navigation.main-navigation>ul>li>a{display:flex;align-items:center;gap:8px;min-height:44px;margin-left:0;padding:0 12px;border-radius:var(--jaba-radius);font-size:15px;font-weight:600;line-height:1;text-transform:none;color:var(--jaba-muted);text-decoration:none;transition:background-color .15s ease , color .15s ease}
#site-navigation.main-navigation>ul>li>a:hover,#site-navigation.main-navigation>ul>li:focus-within>a{background:var(--jaba-hover-bg);color:var(--jaba-text)}
#site-navigation.main-navigation>ul>li.current-menu-item>a,#site-navigation.main-navigation>ul>li.current-menu-ancestor>a,#site-navigation.main-navigation>ul>li.current-menu-parent>a{background:var(--jaba-accent-soft);color:var(--jaba-accent);font-weight:700}
#site-navigation.main-navigation>ul>li>a:after{content:none}
#site-navigation.main-navigation>ul>li.menu-item-has-children>a:after{content:"";position:static;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
#site-navigation.main-navigation>ul>li.menu-item-has-children:hover>a:after,#site-navigation.main-navigation>ul>li.menu-item-has-children:focus-within>a:after{transform:rotate(180deg)}
.jaba-icon-home{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M3\ 11l9-7\ 9\ 7\'/%3E%3Cpath\ d=\'M5\ 10v10h14V10\'/%3E%3C/svg%3E)}
.jaba-icon-produkte{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Crect\ x=\'3\'\ y=\'3\'\ width=\'7\'\ height=\'7\'\ rx=\'1.5\'/%3E%3Crect\ x=\'14\'\ y=\'3\'\ width=\'7\'\ height=\'7\'\ rx=\'1.5\'/%3E%3Crect\ x=\'3\'\ y=\'14\'\ width=\'7\'\ height=\'7\'\ rx=\'1.5\'/%3E%3Crect\ x=\'14\'\ y=\'14\'\ width=\'7\'\ height=\'7\'\ rx=\'1.5\'/%3E%3C/svg%3E)}
.jaba-icon-blog{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M4\ 20h4L19\ 9l-4-4L4\ 16z\'/%3E%3Cpath\ d=\'M13\ 7l4\ 4\'/%3E%3C/svg%3E)}
.jaba-icon-kontakt{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Crect\ x=\'3\'\ y=\'5\'\ width=\'18\'\ height=\'14\'\ rx=\'2\'/%3E%3Cpath\ d=\'M3\ 7l9\ 6\ 9-6\'/%3E%3C/svg%3E)}
.jaba-icon-impressum{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Ccircle\ cx=\'12\'\ cy=\'12\'\ r=\'9\'/%3E%3Cpath\ d=\'M12\ 11v6\'/%3E%3Cpath\ d=\'M12\ 7.5v.01\'/%3E%3C/svg%3E)}
.jaba-icon-hosting{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Ccircle\ cx=\'12\'\ cy=\'12\'\ r=\'9\'/%3E%3Cpath\ d=\'M3\ 12h18\'/%3E%3Cpath\ d=\'M12\ 3c2.5\ 2.7\ 3.8\ 5.7\ 3.8\ 9s-1.3\ 6.3-3.8\ 9c-2.5-2.7-3.8-5.7-3.8-9S9.5\ 5.7\ 12\ 3z\'/%3E%3C/svg%3E)}
.jaba-icon-domains{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M20\ 12l-8\ 8-9-9V3h8z\'/%3E%3Ccircle\ cx=\'7.5\'\ cy=\'7.5\'\ r=\'1.5\'/%3E%3C/svg%3E)}
.jaba-icon-server{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Crect\ x=\'3\'\ y=\'4\'\ width=\'18\'\ height=\'7\'\ rx=\'1.5\'/%3E%3Crect\ x=\'3\'\ y=\'13\'\ width=\'18\'\ height=\'7\'\ rx=\'1.5\'/%3E%3Cpath\ d=\'M7\ 7.5h.01M7\ 16.5h.01\'/%3E%3C/svg%3E)}
.jaba-icon-vserver{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M12\ 3l9\ 5-9\ 5-9-5z\'/%3E%3Cpath\ d=\'M3\ 13l9\ 5\ 9-5\'/%3E%3C/svg%3E)}
.jaba-icon-wordpress{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Ccircle\ cx=\'12\'\ cy=\'12\'\ r=\'9\'/%3E%3Cpath\ d=\'M7\ 9l2.5\ 7L12\ 10l2.5\ 6L17\ 9\'/%3E%3C/svg%3E)}
.jaba-icon-nextcloud{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M7\ 18h10a4\ 4\ 0\ 0\ 0\ .5-8\ 6\ 6\ 0\ 0\ 0-11.5\ 1.5A3.5\ 3.5\ 0\ 0\ 0\ 7\ 18z\'/%3E%3C/svg%3E)}
.jaba-icon-phone{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M5\ 4h4l2\ 5-2.5\ 1.5a11\ 11\ 0\ 0\ 0\ 5\ 5L15\ 13l5\ 2v4a2\ 2\ 0\ 0\ 1-2\ 2A16\ 16\ 0\ 0\ 1\ 3\ 6a2\ 2\ 0\ 0\ 1\ 2-2z\'/%3E%3C/svg%3E)}
.jaba-icon-login{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'1.8\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Ccircle\ cx=\'12\'\ cy=\'8\'\ r=\'4\'/%3E%3Cpath\ d=\'M4\ 21c1.5-4\ 4.5-6\ 8-6s6.5\ 2\ 8\ 6\'/%3E%3C/svg%3E)}
.jaba-icon-alle{--jaba-icon:url(data:image/svg+xml,%3Csvg\ xmlns=\'http://www.w3.org/2000/svg\'\ viewBox=\'0\ 0\ 24\ 24\'\ fill=\'none\'\ stroke=\'black\'\ stroke-width=\'2\'\ stroke-linecap=\'round\'\ stroke-linejoin=\'round\'%3E%3Cpath\ d=\'M5\ 12h14M13\ 6l6\ 6-6\ 6\'/%3E%3C/svg%3E)}
#site-navigation.main-navigation li[class*="jaba-icon-"]>a:before{content:"";flex-shrink:0;width:20px;height:20px;background:currentColor;-webkit-mask:var(--jaba-icon) center/contain no-repeat;mask:var(--jaba-icon) center/contain no-repeat}
#site-navigation.main-navigation ul.sub-menu{position:absolute;top:calc(100% + 8px);left:0;z-index:1000;width:380px;margin:0;margin-left:0;padding:10px;list-style:none;background:#fff;border:1px solid var(--jaba-border);border-radius:16px;box-shadow:0 18px 48px rgba(18,35,58,.14);display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .15s ease , transform .15s ease , visibility 0s linear .15s}
#site-navigation.main-navigation ul.sub-menu:before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;border:0;margin:0}
#site-navigation.main-navigation li.menu-item-has-children:hover>ul.sub-menu,#site-navigation.main-navigation li.menu-item-has-children:focus-within>ul.sub-menu{opacity:1;visibility:visible;top:calc(100% + 8px);transform:translateY(0);transition:opacity .15s ease , transform .15s ease , visibility 0s}
#site-navigation.main-navigation ul.sub-menu li{position:relative;float:none;margin:0;list-style:none}
#site-navigation.main-navigation ul.sub-menu a{display:grid;grid-template-columns:40px 1fr;column-gap:14px;align-items:center;width:auto;margin-left:0;padding:10px 12px;border-radius:12px;font-size:15px;font-weight:700;line-height:1.3;text-align:left;text-transform:none;color:var(--jaba-text);text-decoration:none}
#site-navigation.main-navigation ul.sub-menu>li>a:hover,#site-navigation.main-navigation ul.sub-menu>li>a:focus-visible,#site-navigation.main-navigation ul.sub-menu>li.current-menu-item>a,#site-navigation.main-navigation ul.sub-menu>li.current-menu-ancestor>a{background:var(--jaba-hover-bg);color:var(--jaba-text)}
#site-navigation.main-navigation ul.sub-menu li[class*="jaba-icon-"]>a:before{grid-row:span 2;width:40px;height:40px;border-radius:10px;background:var(--jaba-accent-soft);-webkit-mask:none;mask:none}
#site-navigation.main-navigation ul.sub-menu li[class*="jaba-icon-"]>a{position:relative}
#site-navigation.main-navigation ul.sub-menu li[class*="jaba-icon-"]>a:after{content:"";position:absolute;left:22px;top:50%;width:20px;height:20px;margin-top:-10px;background:var(--jaba-accent);-webkit-mask:var(--jaba-icon) center/contain no-repeat;mask:var(--jaba-icon) center/contain no-repeat}
#site-navigation.main-navigation ul.sub-menu .menu-item-description{grid-column:2;font-size:13px;font-weight:400;line-height:1.35;color:var(--jaba-sub)}
#site-navigation.main-navigation ul.sub-menu li.jaba-more{margin-top:6px;padding-top:6px;border-top:1px solid var(--jaba-border)}
#site-navigation.main-navigation ul.sub-menu li.jaba-more>a{display:flex;justify-content:space-between;font-size:14px;color:var(--jaba-accent)}
#site-navigation.main-navigation ul.sub-menu li.jaba-more>a:before{display:none}
#site-navigation.main-navigation ul.sub-menu li.jaba-more>a:after{position:static;margin:0;width:16px;height:16px;background:currentColor}
#site-navigation.main-navigation ul.sub-menu ul.sub-menu{top:-10px!important;left:100%;margin-left:8px}
#site-navigation.main-navigation ul.sub-menu ul.sub-menu:before{left:-8px;right:auto;top:0;bottom:0;width:8px;height:auto}
#site-navigation.main-navigation>ul>li.jaba-btn{margin-left:8px}
#site-navigation.main-navigation>ul>li.jaba-btn>a{min-height:44px;padding:0 20px;border-radius:22px;background:var(--jaba-accent);color:#fff;font-weight:700}
#site-navigation.main-navigation>ul>li.jaba-btn>a:hover,#site-navigation.main-navigation>ul>li.jaba-btn>a:focus-visible{background:var(--jaba-accent-hover);color:#fff}
#site-navigation.main-navigation>ul>li.jaba-icon-only{margin-left:auto}
#site-navigation.main-navigation>ul>li.jaba-icon-only>a{width:44px;min-height:44px;padding:0;justify-content:center;border:1px solid #d6dbd4;border-radius:22px;color:var(--jaba-text);font-size:0;overflow:hidden}
#site-navigation.main-navigation a:focus-visible,#site-navigation.main-navigation ul.sub-menu a:focus-visible{outline:3px solid var(--jaba-accent);outline-offset:2px}
#nav li[class*="jaba-icon-"]>a{display:flex;align-items:center;gap:10px}
#nav li[class*="jaba-icon-"]>a:before{content:"";flex-shrink:0;width:20px;height:20px;background:currentColor;-webkit-mask:var(--jaba-icon) center/contain no-repeat;mask:var(--jaba-icon) center/contain no-repeat}
#nav li.jaba-icon-only>a{width:auto;font-size:14px;border:0}
#nav .menu-item-description{display:none}
@media (prefers-reduced-motion:reduce){#site-navigation.main-navigation *,#site-navigation.main-navigation *:before,#site-navigation.main-navigation *:after{transition:none!important}
}
#site-navigation.main-navigation ul.sub-menu a{text-transform:none!important}
#site-navigation.main-navigation>ul>li>a,#site-navigation.main-navigation ul.sub-menu a{font-family:'PT Sans',system-ui,-apple-system,'Segoe UI',sans-serif}
#site-navigation.main-navigation>ul>li>a:hover,#site-navigation.main-navigation>ul>li:focus-within>a{color:var(--jaba-text)!important}
#site-navigation.main-navigation>ul>li.current-menu-item>a,#site-navigation.main-navigation>ul>li.current-menu-ancestor>a,#site-navigation.main-navigation>ul>li.current-menu-parent>a{color:var(--jaba-accent)!important}
#site-navigation.main-navigation>ul>li.jaba-btn>a,#site-navigation.main-navigation>ul>li.jaba-btn>a:hover,#site-navigation.main-navigation>ul>li.jaba-btn>a:focus-visible{color:#fff!important}
#masthead .right-header{margin-right:0}
@media (min-width:1200px){#masthead .right-header{margin-right:43px}
}
@media (min-width:1500px){#masthead .masthead-inner-wrap{position:relative}
#site-navigation.main-navigation>ul>li.jaba-btn{position:absolute;right:20px;top:50%;transform:translateY(-50%);margin-top:-6px;margin-left:0}
}
@media (max-width:1199px){#site-navigation.main-navigation>ul{gap:0}
#site-navigation.main-navigation>ul>li>a{gap:6px;padding:0 8px;font-size:14px}
#site-navigation.main-navigation>ul>li.jaba-btn{margin-left:4px}
#site-navigation.main-navigation>ul>li.jaba-btn>a{width:44px;padding:0;justify-content:center;font-size:0;overflow:hidden}
}

/* ------------------------------------------------------------------------
 * Anhang des Kundenlogins — nicht Teil des uebernommenen Blocks.
 *
 * Das Ausklappmenue des Handys heisst im WordPress-Auftritt `#nav`, hier
 * `#mobile-nav`. Der andere Name ist kein Versehen: an ihm haengen die
 * Barrierefreiheits-Arbeiten vom 06.09.2026 (custom-mobile-nav.js,
 * wp-header-a11y.css, NavigationMirrorTest), und ein Umbenennen braechte
 * nichts, was man sieht. Die drei Regeln, die oben `#nav` nennen, gelten
 * deshalb hier noch einmal fuer `#mobile-nav`.
 *
 * Wer den Block oben erneuert, sieht nach, ob unter `#nav` etwas
 * hinzugekommen ist, und traegt es hier nach.
 *
 * Ein Unterschied ist Absicht und gemessen: der Link bleibt `inline`, das
 * Symbol ist ein `inline-block` davor. Der Block oben macht den Link zu
 * einem Flex-Container, und das geht hier nicht, weil hinter ihm der Knopf
 * steht, der das Untermenue aufklappt — `float:right`. Als Flex-Container
 * traegt der Link die 15px Innenabstand aus custom-mobile-nav.css auch nach
 * oben und unten und wird 55 statt 25 Pixel hoch; der Knopf sass dann 16
 * Pixel ueber seiner Beschriftung. So steht er wieder in einer Linie.
 * --------------------------------------------------------------------- */

#mobile-nav li[class*="jaba-icon-"]>a:before{content:"";display:inline-block;vertical-align:middle;width:20px;height:20px;margin:-2px 10px 0 0;background:currentColor;-webkit-mask:var(--jaba-icon) center/contain no-repeat;mask:var(--jaba-icon) center/contain no-repeat}
#mobile-nav li.jaba-icon-only>a{width:auto;font-size:14px;border:0}
#mobile-nav .menu-item-description{display:none}