/* Kinhive reference: a white, full-width navigation panel with readable link summaries.
   Load after the shared page styles. Native <details> owns the open/closed state. */
.site-header.brand-header {
  position:sticky;
  top:0;
  height:88px;
  padding-inline:clamp(24px,3vw,48px);
  gap:24px;
  background:#fff;
  color:#1a1a1a;
  border-bottom:1px solid #e7e4e9;
  backdrop-filter:none;
  isolation:isolate;
}
.brand-header .preview-wordmark { font-size:34px; }
.brand-header .desktop-nav { align-items:center; gap:26px; font-size:15px; }
.brand-header .desktop-nav>.nav-dropdown { position:static; }
.brand-header .nav-dropdown>summary {
  min-height:48px;
  padding:12px 0;
  gap:8px;
  font:400 15px/1.5 'Work Sans',sans-serif;
}
.brand-header .nav-dropdown>summary>span { font-size:18px; }
.brand-header .header-actions { gap:20px; font-size:15px; }
.brand-header .login-link { white-space:nowrap; }
.brand-header .button-small { min-height:46px; padding:12px 19px; gap:10px; font-size:15px; white-space:nowrap; }
.brand-header .language-toggle { width:44px; min-width:44px; height:44px; padding:0; border-color:#c4bec9; font-size:15px; background:#fff; }
.brand-header .language-toggle:hover { background:#fff; border-color:#1a1a1a; }
.brand-header .menu-toggle { width:44px; min-width:44px; height:44px; padding:10px; }
.brand-header .brand-menu-panel {
  position:absolute;
  inset:100% 0 auto;
  width:100%;
  min-width:0;
  margin:0;
  padding:38px clamp(24px,5vw,80px) 44px;
  background:#fff;
  border:0;
  border-bottom:1px solid #dcc9ed;
  border-radius:0 0 24px 24px;
  box-shadow:0 16px 22px #1a1a1a08;
  max-height:calc(100svh - 88px);
  overflow-y:auto;
  overscroll-behavior:contain;
  isolation:isolate;
}
.brand-header .brand-menu-links {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(36px,6vw,100px);
  row-gap:8px;
  max-width:1240px;
  margin-inline:auto;
}
.brand-header .brand-menu-link {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 20px;
  align-items:start;
  column-gap:18px;
  min-height:105px;
  padding:18px 0!important;
  color:#1a1a1a;
  border-radius:0;
  white-space:normal;
  text-decoration:none;
}
.brand-header .brand-menu-link:hover { background:transparent; color:#1a1a1a; }
.brand-header .brand-menu-icon { width:26px; height:26px; margin-top:1px; color:#a5cfb2; }
.brand-header .brand-menu-text { display:flex; flex-direction:column; gap:7px; min-width:0; }
.brand-header .brand-menu-title { font:500 18px/1.35 'Work Sans',sans-serif; letter-spacing:-.015em; }
.brand-header .brand-menu-description { max-width:40ch; font:400 16px/1.5 'Work Sans',sans-serif; color:#1a1a1a; letter-spacing:normal; }
.brand-header .brand-menu-arrow { font:400 20px/1.35 'Work Sans',sans-serif; opacity:0; transform:translate(-3px,3px); transition:opacity .15s,transform .15s; }
.brand-header .brand-menu-link:hover .brand-menu-arrow,.brand-header .brand-menu-link:focus-visible .brand-menu-arrow { opacity:1; transform:translate(0,0); }
.brand-header :is(a,button,summary):focus-visible { outline:2px solid #1a1a1a; outline-offset:5px; }
.brand-header .brand-mobile-navigation { background:#fff; padding:12px 24px 28px; border-color:#dcc9ed; isolation:isolate; }
.brand-header .brand-mobile-group { border:0; border-bottom:1px solid #e7e4e9; margin:0; padding:0; }
.brand-header .brand-mobile-group>summary { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; list-style:none; cursor:pointer; font:500 19px/1.4 'Work Sans',sans-serif; }
.brand-header .brand-mobile-group>summary::-webkit-details-marker { display:none; }
.brand-header .brand-mobile-group>summary>span { font-size:20px; transition:transform .15s; }
.brand-header .brand-mobile-group[open]>summary>span { transform:rotate(180deg); }
.brand-header .brand-mobile-plain { display:flex; justify-content:space-between; padding:18px 0; font-size:19px; border-bottom:1px solid #e7e4e9; }
.brand-header .brand-mobile-actions { display:flex; align-items:center; gap:24px; padding-top:24px; }
.brand-header .brand-mobile-actions .button { display:flex; font-size:16px; padding:14px 20px; }
.brand-header .brand-mobile-login { font-size:16px; padding:12px 0; }
@media(min-width:1100px) {
  .brand-header .desktop-nav { display:flex; }
  .brand-header .menu-toggle { display:none; }
  .brand-header .brand-mobile-navigation { display:none; }
}
@media(min-width:1100px) and (max-width:1249px) {
  .brand-header .login-link { display:none; }
}
@media(max-width:1099px) {
  .site-header.brand-header { height:80px; gap:18px; padding-inline:24px; }
  .brand-header .desktop-nav,.brand-header .login-link { display:none; }
  .brand-header .header-actions { margin-left:auto; }
  .brand-header .menu-toggle { display:flex; }
  .brand-header .brand-mobile-navigation { max-height:calc(100svh - 80px); overscroll-behavior:contain; }
  .brand-header .brand-mobile-navigation[hidden] { display:none; }
  .brand-header .brand-menu-links { column-gap:30px; padding-bottom:16px; }
  .brand-header .brand-menu-link { min-height:0; padding:14px 0!important; column-gap:12px; grid-template-columns:26px minmax(0,1fr); }
  .brand-header .brand-menu-title { font-size:17px; }
  .brand-header .brand-menu-description { font-size:15px; }
  .brand-header .brand-menu-icon { width:23px; height:23px; }
  .brand-header .brand-menu-arrow { display:none; }
}
@media(max-width:599px) {
  .site-header.brand-header { height:74px; gap:10px; padding-inline:20px; }
  .brand-header .preview-wordmark { font-size:30px; }
  .brand-header .header-actions { display:none; }
  .brand-header .language-toggle { margin-left:auto; }
  .brand-header .brand-mobile-navigation { max-height:calc(100svh - 74px); padding-inline:24px; }
  .brand-header .brand-menu-links { grid-template-columns:1fr; }
  .brand-header .brand-menu-description { max-width:none; }
  .brand-header .brand-mobile-actions { flex-wrap:wrap; gap:12px 24px; }
}
@media(prefers-reduced-motion:reduce) {
  .brand-header .brand-menu-arrow,.brand-header .brand-mobile-group>summary>span { transition:none; }
}
/* Ausgearbeitete Kopfzeile, 11.09.2026.
   Die Navigation steht mittig zwischen Wortmarke und Aktionen, die Beschriftungen
   tragen das Bediengewicht 500, die Hauptaktion ist deutlicher als der Nebenlink. */
.brand-header .desktop-nav { margin-inline:auto; gap:clamp(18px,2.2vw,34px); }
/* Menü nach der Boksi-Vorlage, 11.09.2026, Maße eins zu eins aus der
   archivierten Nachbildung übernommen, Farben bleiben Krevaro.
   Boksi: Schriftgrad clamp(14px .. 20px), Laufweite 0, Zeilenhöhe 1,4,
   Gewicht 400 nach Jens Vorgabe, Boksi selbst steht auf 300,
   Abstand je Eintrag 1,5rem, mittige Navigation, beim Überfahren ein 6 Pixel hoher
   Balken hinter dem Wort, um ein Grad gedreht, der von links auf volle Breite wächst. */
/* Beide Flanken sind gleich flexibel, dadurch sitzt die Navigation auf der
   Seitenmitte. Sie bleibt im Fluss, damit das Panel weiter die volle Breite
   der Kopfzeile bekommt und nicht nur die Breite der Navigation. */
.brand-header > .wordmark { flex:1 1 0; }
.brand-header > .desktop-nav { flex:0 0 auto; gap:0; margin-inline:0; position:static; transform:none; }
.brand-header > .header-end {
  flex:1 1 0; display:flex; align-items:center; justify-content:flex-end; gap:22px; min-width:0;
}
.brand-header .desktop-nav > * { margin-left:1.5rem; }
.brand-header .desktop-nav > *:first-child { margin-left:0; }
.brand-header .desktop-nav > summary,
.brand-header .desktop-nav > a,
.brand-header .nav-dropdown > summary {
  font-size:clamp(0.875rem, 0.7763157895rem + 0.3947368421vw, 1.25rem);
  font-weight:400; letter-spacing:0; line-height:1.4; text-decoration:none;
}
/* Die 15-Pixel-Regel in tilt-preview.css gilt dem Pfeil, nicht der Beschriftung. */
.brand-header .nav-dropdown > summary > .nav-label,
.brand-header .brand-mobile-group > summary > .nav-label { font-size:inherit; font-weight:inherit; }

/* Ein Zeichen fuer alles, was als Wort anklickbar ist, 11.09.2026.
   Jens Vorgabe: Mint, ueberall gleich. Deshalb gibt es daneben kein zweites
   Zeichen mehr, weder die Unterstreichung im geoeffneten Menue noch die
   Unterstreichung in der Fusszeile.
   Der Balken liegt hinter dem Wort, nicht unter dem Klickfeld. Ein Link mit
   Innenabstand nach unten hebt ihn um genau diesen Abstand an (--mark-lift),
   damit alle Balken auf derselben Hoehe sitzen. */
.brand-header .desktop-nav > a,
.brand-header .desktop-nav .nav-label,
.brand-header .login-link,
.site-footer .footer-top nav a,
.site-footer .footer-bottom a,
.brand-header .brand-menu-title {
  position:relative; display:inline-block; vertical-align:top; text-decoration:none;
}
/* Der Titel steht in einer Spalte. Ohne diese Zeile wuerde er sich ueber die
   ganze Spaltenbreite ziehen und der Balken waere breiter als das Wort. */
.brand-header .brand-menu-title { align-self:flex-start; max-width:100%; }
/* Der Textlink bleibt inline-flex, sonst verrutscht der Pfeil daneben. */
.automation-home .text-link { position:relative; text-decoration:none; }
.site-footer .footer-top nav a { align-self:flex-start; max-width:100%; }
/* Der Balken liegt hinter dem Wort (z-index -1). Damit er nicht hinter dem
   weissen Grund der Fusszeile verschwindet, bekommt die Fusszeile einen
   eigenen Stapelbereich, so wie die Kopfzeile ihn schon hat. */
.site-footer { isolation:isolate; }
.brand-header .desktop-nav > a,
.brand-header .login-link { --mark-lift:12px; }
.automation-home .text-link { --mark-lift:9px; }
.brand-header .desktop-nav > a::before,
.brand-header .desktop-nav .nav-label::before,
.brand-header .login-link::before,
.site-footer .footer-top nav a::before,
.site-footer .footer-bottom a::before,
.automation-home .text-link::before,
.brand-header .brand-menu-title::before {
  content:""; position:absolute; z-index:-1; left:0;
  top:calc(100% - var(--mark-lift, 0px) - 0.5rem);
  width:0; height:0.375rem; overflow:hidden; background:var(--mark, var(--mint,#a5cfb2));
  transform:rotate(-1deg); transition:width .3s cubic-bezier(.23,1,.32,1);
}
.brand-header .desktop-nav > a:hover::before,
.brand-header .desktop-nav > a:focus-visible::before,
.brand-header .nav-dropdown:hover .nav-label::before,
.brand-header .nav-dropdown > summary:focus-visible .nav-label::before,
.brand-header .nav-dropdown[open] .nav-label::before,
.brand-header .login-link:hover::before,
.brand-header .login-link:focus-visible::before,
.site-footer .footer-top nav a:hover::before,
.site-footer .footer-top nav a:focus-visible::before,
.site-footer .footer-bottom a:hover::before,
.site-footer .footer-bottom a:focus-visible::before,
.automation-home .text-link:hover::before,
.automation-home .text-link:focus-visible::before,
.brand-header .brand-menu-link:hover .brand-menu-title::before,
.brand-header .brand-menu-link:focus-visible .brand-menu-title::before { width:100%; }
.site-footer .footer-top nav a:hover,
.site-footer .footer-bottom a:hover { text-decoration:none; }
/* Der Pfeil dreht sich, die Beschriftung nicht. */
.brand-header .nav-dropdown[open] > summary > .nav-label,
.brand-header .brand-mobile-group[open] > summary > .nav-label { transform:none; }

/* Die Seite, auf der man steht, ist im Menue markiert. */
.brand-header .desktop-nav > a[aria-current="page"]::before,
.brand-header .nav-dropdown.is-current > summary .nav-label::before { width:100%; }
.brand-header .brand-menu-link[aria-current="page"] .brand-menu-title::before { width:100%; }
.brand-header .brand-menu-link[aria-current="page"] { position:relative; }

/* One shared appearance for every desktop and mobile menu, 13.09.2026. */
.site-header.brand-header :is(.brand-mega,.brand-mobile-navigation) :is(.brand-menu-link,.brand-menu-title,.brand-menu-description,.brand-menu-arrow) {
  color:#1a1a1a;
}
.site-header.brand-header :is(.brand-mega,.brand-mobile-navigation) .brand-menu-icon {
  color:#a5cfb2;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  border-radius:0;
}