/* ============================================================
   Menu 2026 — Persona-Style Navigation (aus Lovable-Prototyp)
   Alle Klassen pxlm-* (namespaced, mehrfach instanzierbar)
   Breakpoint Desktop-Nav: 1024px
   ============================================================ */
.pxlm {
  --pxlm-fg: #101828;
  --pxlm-muted: #667085;
  --pxlm-border: #eaecf0;
  --pxlm-icon-bg: #f4f6f8;
  --pxlm-navy: #003e92;
  --pxlm-pink: #e9425e;
  --pxlm-h: 80px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  font-family: Montserrat, ui-sans-serif, system-ui, sans-serif;
  color: var(--pxlm-fg);
  transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.pxlm *, .pxlm *::before, .pxlm *::after { box-sizing: border-box; }
.pxlm-spacer { height: 80px; }
.pxlm a { text-decoration: none; color: inherit; }
.pxlm :where(button) { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
.pxlm ul { list-style: none; margin: 0; padding: 0; }
.pxlm .pxlm-ico { width: 16px; height: 16px; display: block; }

/* ---------- Header-Stile ---------- */
.pxlm--solid { background: rgba(255,255,255,.95); border-color: var(--pxlm-border); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.pxlm--transparent { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); background: rgba(255,255,255,calc(var(--pxlm-op) - .3)); }
.pxlm--transparent.pxlm--scrolled { background: rgba(255,255,255,var(--pxlm-op)); border-color: rgba(0,0,0,.06); box-shadow: 0 4px 20px -12px rgba(11,26,43,.15); }
.pxlm--liquid {
  -webkit-backdrop-filter: blur(28px) saturate(1.5);
  backdrop-filter: blur(28px) saturate(1.5);
  background-color: rgba(255,255,255,calc(var(--pxlm-op) - .25));
  background-image: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,255,255,.05) 100%);
  border-color: rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.6);
}
.pxlm--liquid.pxlm--scrolled {
  background-color: rgba(255,255,255,var(--pxlm-op));
  box-shadow: inset 0 1px 0 0 rgba(255,255,255,.75), inset 0 -1px 0 0 rgba(255,255,255,.2), 0 10px 40px -12px rgba(11,26,43,.18);
}

/* ---------- Bar ---------- */
.pxlm-bar { height: var(--pxlm-h); }
.pxlm-bar-inner {
  max-width: 100%; margin: 0 auto; height: 100%;
  padding: 0 15px; display: flex; align-items: center; justify-content: space-between; gap: 24px;
}

.pxlm-logo { display: flex; align-items: center; flex-shrink: 0; }
.pxlm-logo img { height: 40px; width: auto; display: block; }

/* ---------- Desktop-Nav ---------- */
.pxlm-nav { display: none; }
@media (min-width: 1024px) { .pxlm-nav { display: flex; align-items: center; gap: 4px; } }
.pxlm-nav-item { position: relative; display: flex; align-items: center; }
.pxlm-nav-btn, .pxlm-nav-link {
  position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; font-size: 15px; font-weight: 500; border-radius: 6px;
  color: var(--pxlm-fg); transition: color .2s ease; white-space: nowrap;
}
.pxlm-nav-btn:hover, .pxlm-nav-link:hover, .pxlm-nav-btn.pxlm-active,
.pxlm-nav-btn.pxlm-current-parent, .pxlm-nav-link.pxlm-current { color: var(--pxlm-navy); }
.pxlm-nav-btn:focus-visible, .pxlm-nav-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(0,62,146,.4); }
.pxlm-chev { width: 16px; height: 16px; transition: transform .2s ease; }
.pxlm-nav-btn.pxlm-active .pxlm-chev { transform: rotate(180deg); }
.pxlm-nav-underline { position: absolute; left: 16px; right: 16px; bottom: -2px; height: 3px; border-radius: 99px; background: var(--pxlm-navy); opacity: 0; }
.pxlm-nav-btn.pxlm-current-parent .pxlm-nav-underline,
.pxlm-nav-link.pxlm-current .pxlm-nav-underline { opacity: 1; }

/* ---------- Rechte Seite ---------- */
.pxlm-right { display: flex; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .pxlm-right { gap: 20px; } }
.pxlm-cta {
  background-color: var(--pxlm-pink); border: 0 solid #425b76; border-radius: 12px;
  color: #fff !important; display: inline-block; font-family: Montserrat; font-weight: 500;
  padding: 12px 24px; font-size: 14px; text-transform: none;
  transition: filter .2s ease, transform .2s ease;
}
.pxlm-cta:hover { filter: brightness(1.1); transform: translateY(-2px); }
.pxlm-cta--desktop { display: none; }
@media (min-width: 1024px) { .pxlm-cta--desktop { display: inline-block; } }
.pxlm-cta--block { display: block; text-align: center; }
.pxlm-search {
  display: none; place-items: center; width: 36px; height: 36px; border-radius: 99px;
  transition: background-color .2s ease, transform .2s ease; position: relative;
}
@media (min-width: 1024px) { .pxlm .pxlm-search { display: grid !important; } }
.pxlm-search:hover { background: var(--pxlm-icon-bg); transform: scale(1.1); }
.pxlm-search .pxlm-ico { width: 18px; height: 18px; }
.pxlm-search .init_state, .pxlm-search .open_state { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .2s ease, transform .2s ease; }
.pxlm-search .open_state, body.open_popup .pxlm-search .init_state { opacity: 0; transform: scale(.5); pointer-events: none; }
body.open_popup .pxlm-search .open_state { opacity: 1; transform: scale(1); pointer-events: auto; }
.pxlm-lang { display: none; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.pxlm-lang--desktop { display: none; }
@media (min-width: 1024px) { .pxlm-lang--desktop { display: flex; } }
.pxlm-lang a { color: var(--pxlm-muted); }
.pxlm-lang a.pxlm-lang--active { color: var(--pxlm-pink); }
.pxlm-lang-sep { color: var(--pxlm-border); }
.pxlm-lang--single { display: none !important; }
.pxlm-burger { display: grid; place-items: center; padding: 8px; margin-right: -8px; }
.pxlm-burger .pxlm-ico { width: 24px; height: 24px; }
@media (min-width: 1024px) { .pxlm-burger { display: none; } }

/* ---------- Mega-Panel ---------- */
.pxlm-mega { position: fixed; left: 0; right: 0; top: var(--pxlm-h); z-index: 50; }
.pxlm-mega[hidden] { display: none; }
.pxlm-mega-shell { position: relative; }
.pxlm-mega-shell::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.pxlm-mega-inner { max-width: 100%; margin: 0 auto; padding: 40px 15px; }


.pxlm-mega--contained { padding-top: 12px; }
.pxlm-mega--contained .pxlm-mega-shell { max-width: 100%; margin: 0 auto; padding: 0 15px; }

.pxlm-mega--contained .pxlm-mega-inner {
  background: #fff; border: 1px solid var(--pxlm-border); border-radius: 16px;
  box-shadow: 0 20px 60px -20px rgba(11,26,43,.25); padding: 40px;
}
.pxlm-mega--full .pxlm-mega-shell,
.pxlm-mega--persona .pxlm-mega-shell {
  background: #fff; border-bottom: 1px solid var(--pxlm-border);
  box-shadow: 0 20px 60px -20px rgba(11,26,43,.25);
}
.pxlm-mega--persona .pxlm-mega-shell { overflow: hidden; box-shadow: 0 24px 60px -24px rgba(11,26,43,.28); }
.pxlm-mega--persona .pxlm-mega-inner { padding-top: 48px; padding-bottom: 48px; }

@keyframes pxlm-fade-slide { 0% { opacity: 0; transform: translateY(-8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pxlm-persona-reveal { 0% { clip-path: inset(0 0 100% 0); } 100% { clip-path: inset(0 0 0 0); } }
@keyframes pxlm-persona-content { 0% { opacity: 0; transform: translateY(6px); } 100% { opacity: 1; transform: translateY(0); } }
.pxlm-mega--contained.pxlm-open .pxlm-mega-inner,
.pxlm-mega--full.pxlm-open .pxlm-mega-shell { animation: pxlm-fade-slide .2s ease both; }
.pxlm-mega--persona.pxlm-open .pxlm-mega-shell { animation: pxlm-persona-reveal .42s cubic-bezier(.22,1,.36,1) both; }
.pxlm-mega--persona.pxlm-open .pxlm-mega-inner { animation: pxlm-persona-content .26s cubic-bezier(.22,1,.36,1) .08s both; }

.pxlm-grid { display: grid; grid-template-columns: repeat(var(--pxlm-cols, 4), minmax(0, 1fr)); gap: 32px; }
.pxlm-grid .pxlm-col--teaser { min-width: 260px; }
.pxlm-col--divided { border-left: 1px solid var(--pxlm-border); padding-left: 20px; }
.pxlm:not(.pxlm--dividers) .pxlm-col--divided { border-left: 0; padding-left: 0; }
/* Kategorie-Label: bewusst KEIN Heading-Tag (Navigation soll die
   Dokument-Gliederung nicht vor der H1 der Seite aufreissen).
   line-height hier explizit, weil sie vorher vom Theme-h4 kam. */
.pxlm-cat-title {
  margin: 0 0 20px; padding-bottom: 12px; border-bottom: 1px solid var(--pxlm-border);
  font-size: 15px; font-weight: 500; line-height: 1.3; color: var(--pxlm-muted);
}
.pxlm-list { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Menü-Item ---------- */
.pxlm-item {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 0 -8px; padding: 6px 8px; border-radius: 6px;
  transition: background-color .2s ease;
}
.pxlm-item:hover { background: var(--pxlm-icon-bg); }
.pxlm-item--inactive { opacity: .55; pointer-events: none; }
.pxlm-item-ico {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 6px; flex-shrink: 0;
  margin-top: 2px; transition: border-color .2s ease, transform .2s ease; background: transparent; border: 1px solid transparent;
}
.pxlm--frames .pxlm-item-ico { background: #fff; border-color: var(--pxlm-border); }
.pxlm-item:hover .pxlm-item-ico { border-color: rgba(0,62,146,.4); transform: scale(1.1) rotate(-4deg); }
.pxlm-item-ico .pxlm-ico { color: rgba(16,24,40,.8); transition: color .2s ease; }
.pxlm-item:hover .pxlm-item-ico .pxlm-ico { color: var(--pxlm-navy); }
.pxlm-item-txt { min-width: 0; transition: transform .2s ease; padding-top: 2px; }
.pxlm-item:hover .pxlm-item-txt { transform: translateX(4px); }
.pxlm-item-label { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.25; transition: color .2s ease; }
.pxlm-item:hover .pxlm-item-label, .pxlm-item.pxlm-current .pxlm-item-label { color: var(--pxlm-navy); }
.pxlm-item-desc { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--pxlm-muted); font-weight: 400; }
.pxlm-dot { display: inline-block; width: 6px; height: 6px; border-radius: 99px; background: var(--pxlm-pink); margin-left: 6px; vertical-align: middle; }
.pxlm-badge {
  margin-left: 8px; font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
  color: var(--pxlm-muted); border: 1px solid var(--pxlm-border); border-radius: 4px; padding: 2px 6px;
}

/* ---------- Teaser / Volume-Cover ---------- */
.pxlm-teaser { --pxlm-teaser-w: 240px; display: flex; flex-direction: column; height: 100%; padding-right: 24px; }
/* Titel und Caption nie breiter als die Cover-Karte darunter. */
.pxlm-teaser-title, .pxlm-teaser-caption { max-width: var(--pxlm-teaser-w); }
.pxlm-teaser-title { margin: 0 0 10px; font-size: 22px; line-height: 1.3; font-weight: 500; color: inherit; }
.pxlm-teaser-block { margin-top: 24px; }
.pxlm-teaser-caption { font-size: 12.5px; line-height: 1.5; color: inherit; opacity: .7; margin-bottom: 16px; }
.pxlm .pxlm-cover {
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 5; max-width: var(--pxlm-teaser-w, 240px); border-radius: 8px; padding: 20px; color: #fff;
  background: linear-gradient(160deg, #001f4d 0%, #003e92 60%, #00a1ed 100%);
  background-size: cover; background-position: center;
  overflow: hidden; transition: transform .25s ease, box-shadow .25s ease;
}
/* PXL-Vision Farbverläufe */
.pxlm-cover--navy-blue { background: linear-gradient(135deg, #003e92 0%, #00a1ed 100%); }
.pxlm-cover--pink-navy { background: linear-gradient(135deg, #e9425e 0%, #003e92 100%); }
.pxlm-cover--blue-light { background: linear-gradient(135deg, #00a1ed 0%, #7fd8ff 100%); }
.pxlm-cover--pink-blue { background: linear-gradient(135deg, #e9425e 0%, #00a1ed 100%); }
.pxlm-cover--deep-navy { background: linear-gradient(160deg, #001f4d 0%, #003e92 60%, #00a1ed 100%); }
.pxlm-cover--img { background-size: cover; background-position: center; }
.pxlm-cover:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -18px rgba(11,26,43,.4); }
.pxlm-cover-brand { font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; opacity: .9; }
.pxlm-cover-bottom { margin-top: auto; display: block; }
.pxlm-cover-title { display: block; font-size: 28px; font-weight: 500; line-height: 1.05; }
.pxlm-cover-sub { display: block; font-size: 13px; margin-top: 4px; opacity: .9; }

/* ---------- Promo-Cards (Alt-Option) ---------- */

/* ---------- Dropdown (Company) ---------- */
.pxlm-dropdown { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; padding-top: 12px; z-index: 50; width: 320px; }
.pxlm-dropdown[hidden] { display: none; }
.pxlm-dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; height: 16px; }
.pxlm-dropdown-list {
  background: #fff; border: 1px solid var(--pxlm-border); border-radius: 12px; padding: 8px;
  box-shadow: 0 20px 60px -20px rgba(11,26,43,.25);
}
.pxlm-dropdown.pxlm-open .pxlm-dropdown-list { animation: pxlm-fade-slide .2s ease both; }
.pxlm-item--dropdown { align-items: center; margin: 0; padding: 8px 12px; }
.pxlm-item--dropdown .pxlm-item-ico { margin-top: 0; }
.pxlm-item--dropdown .pxlm-item-label { font-weight: 500; }

/* ---------- Mobile ---------- */
.pxlm-mobile { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; height: 100dvh; }
.pxlm-mobile[hidden] { display: none; }
body.pxlm-lock { overflow: hidden; }
.pxlm-mobile-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; height: 64px; border-bottom: 1px solid var(--pxlm-border); flex-shrink: 0;
}
.pxlm-mobile-head .pxlm-logo img { height: 34px; }
.pxlm-mobile-close { padding: 8px; margin-right: -8px; }
.pxlm-mobile-close .pxlm-ico { width: 24px; height: 24px; }
.pxlm-mobile-nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 8px 12px; }
.pxlm-macc { border-bottom: 1px solid rgba(234,236,240,.7); }
.pxlm:not(.pxlm--mdividers) .pxlm-macc { border-bottom-color: transparent; }
.pxlm-macc-head {
  position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 8px; font-size: 22px; font-weight: 500; color: var(--pxlm-fg); text-align: left;
}
.pxlm-macc-head--link { border-bottom: 1px solid rgba(234,236,240,.7); }
.pxlm:not(.pxlm--mdividers) .pxlm-macc-head--link { border-bottom-color: transparent; }
.pxlm-macc-head .pxlm-chev { width: 20px; height: 20px; color: var(--pxlm-muted); }
.pxlm-macc-head[aria-expanded="true"] .pxlm-chev { transform: rotate(180deg); color: var(--pxlm-navy); }
.pxlm-macc-body { padding: 0 8px 12px; display: flex; flex-direction: column; gap: 16px; }
.pxlm-macc-body[hidden] { display: none; }
.pxlm-macc-cat-title {
  font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .16em;
  color: var(--pxlm-muted); padding-left: 12px; margin-bottom: 4px;
}
.pxlm-mlist--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
.pxlm--mdividers .pxlm-mlist:not(.pxlm-mlist--2col) > li { border-bottom: 1px solid rgba(234,236,240,.6); }
.pxlm--mdividers .pxlm-mlist:not(.pxlm-mlist--2col) > li:last-child { border-bottom: 0; }
.pxlm-item--mobile { align-items: center; margin: 0; padding: 6px 8px 6px 12px; font-size: 14.5px; }
.pxlm-item--mobile .pxlm-item-ico { width: 28px; height: 28px; margin-top: 0; }
.pxlm-item--mobile .pxlm-item-label { font-weight: 500; }
.pxlm-item-arrow { margin-left: auto; width: 16px; height: 16px; color: rgba(102,112,133,.6); flex-shrink: 0; }
.pxlm-mlist--2col .pxlm-item-arrow { display: none; }
.pxlm-mlist--2col .pxlm-item-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pxlm-mobile-meta { display: flex; align-items: center; gap: 16px; padding: 24px 8px 16px; font-size: 14px; }
.pxlm-lang--mobile { display: flex; }
.pxlm .pxlm-mobile-search { margin-left: auto; display: inline-flex !important; align-items: center; gap: 8px; color: var(--pxlm-muted); }
.pxlm-mobile-search .pxlm-ico { width: 16px; height: 16px; }
.pxlm-mobile-foot {
  flex-shrink: 0; padding: 16px; background: #fff; border-top: 1px solid var(--pxlm-border);
  box-shadow: 0 -10px 30px -10px rgba(11,26,43,.15);
}

/* ---------- Responsive Feinheiten ---------- */
@media (max-width: 1023px) {
  .pxlm-mega, .pxlm-dropdown { display: none !important; }
}

/* ---------- Inaktive Kategorie (geplant) ---------- */
.pxlm-col--off { opacity: .5; }
.pxlm-col--off .pxlm-item { pointer-events: none; }

/* ---------- Highlight-Block (Mega-Menü-Footer) ---------- */

/* ---------- Suche im Mega-Menü-Stil (überschreibt externes Such-Modul) ---------- */
.search_popup {
  position: fixed !important; top: var(--pxlm-h, 80px) !important; left: 0 !important; right: 0 !important;
  width: 100% !important; max-width: none !important; margin: 0 !important;
  border-radius: 0 !important; padding: 0 !important;
  background: #fff !important; border-bottom: 1px solid #eaecf0;
  box-shadow: 0 20px 60px -20px rgba(11,26,43,.25);
  max-height: calc(100dvh - 80px); overflow: auto;
}
.search_popup > .wrapper,
.search_popup .hs-search-results_Wrapper > .wrapper {
  max-width: 1400px !important; margin: 0 auto !important; padding: 40px 32px 48px !important;
}
.search_popup .open_state { top: 24px; right: 24px; }
@media (max-width: 767px) {
  .search_popup > .wrapper,
  .search_popup .hs-search-results_Wrapper > .wrapper { padding: 24px 20px 32px !important; }
  .search_popup .open_state { top: 16px; right: 16px; }
}

/* ---------- Icon-Typen: eigenes Bild / FontAwesome ---------- */
.pxlm-item-ico--img img { width: 18px; height: 18px; object-fit: contain; display: block; }
.pxlm-item-ico--fa svg { width: 16px; height: 16px; }
.pxlm-item-ico--fa svg path { fill: currentColor; }

/* ---------- Suche: Fixes (Textfarbe, Scroll, Header weiß) ---------- */
/* Externes Such-Modul stylt Vorschläge/Ergebnisse weiß (für dunklen BG) -> auf weißer Fläche unsichtbar */
.search_popup ul.hs-search-field__suggestions a,
.search_popup ul.hs-search-field__suggestions li,
.search_popup ul.hs-search-field__suggestions li#results-for,
.search_popup ul#hsresults li,
.search_popup ul#hsresults li a,
.search_popup .hs-search-results__title,
.search_popup .hs-search-results__description { color: #101828 !important; }
.search_popup ul.hs-search-field__suggestions a:hover,
.search_popup ul#hsresults li a:hover { color: #003e92 !important; }
.search_popup ul#hsresults li .hs-search-results__featured-image { display: none !important; }

/* Seiten-Scroll bei offener Suche NICHT sperren, Ergebnisse innerhalb der Suche scrollbar */
body.open_popup { overflow: auto !important; }
.search_popup { overflow-y: auto !important; -webkit-overflow-scrolling: touch; }

/* Header bei offener Suche solide weiß statt grau/glasig */
body.open_popup .pxlm,
body.open_popup .pxlm.pxlm--scrolled {
  background: #fff !important; background-image: none !important;
  box-shadow: 0 1px 0 0 #eaecf0 !important;
}


/* ---------- Suchergebnisse: helle Karten statt Dunkel-Overlay ---------- */
.search_popup ul#hsresults li,
.search_popup ul#hsresults li.highlighted {
  position: static !important; padding: 18px 22px !important; margin: 12px 0 !important;
  background: #f8f9fb !important; border: 1px solid #eaecf0 !important; border-radius: 12px !important;
  color: #101828 !important; overflow: hidden;
}
.search_popup ul#hsresults li::before,
.search_popup ul#hsresults li::after { display: none !important; content: none !important; }
.search_popup ul#hsresults li > div { position: static !important; width: auto !important; }
.search_popup ul#hsresults li a { color: #003e92 !important; }
.search_popup ul#hsresults li a:hover { text-decoration: underline; }


/* ---------- Items ohne Subline: vertikal mittig zum Icon ---------- */
.pxlm-item--nodesc { align-items: center; }
.pxlm-item--nodesc .pxlm-item-ico { margin-top: 0; }
.pxlm-item--nodesc .pxlm-item-txt { padding-top: 0; }

/* --- Verlinkte Kategorie-Überschriften --- */
.pxlm .pxlm-cat-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: inherit; font-size: inherit; letter-spacing: inherit;
  color: inherit; text-decoration: none; transition: color .2s ease;
}
.pxlm .pxlm-cat-link:hover { color: var(--pxlm-navy); }
.pxlm-cat-arrow { width: 14px; height: 14px; opacity: 1; transform: none; transition: transform .2s ease; }
.pxlm-cat-link:hover .pxlm-cat-arrow { transform: translateX(3px); }
/* Mobile: ganze Titelzeile tappbar, Pfeil immer sichtbar */
.pxlm .pxlm-macc-cat-title--link {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  font-weight: inherit; color: inherit; text-decoration: none;
  margin: 0 0 4px; padding: 0 0 0 12px; border-radius: 0;
}
.pxlm .pxlm-macc-cat-title--link:active { opacity: .6; }
.pxlm .pxlm-macc-cat-title--link .pxlm-cat-arrow { opacity: 1; transform: none; width: 15px; height: 15px; color: var(--pxlm-navy); }

/* Automatische Silbentrennung in Teaser-/Cover-Texten (v. a. Deutsch) */
.pxlm-teaser-title, .pxlm-teaser-caption,
.pxlm-cover-title, .pxlm-cover-sub, .pxlm-cover-brand {
  -webkit-hyphens: none; hyphens: none; word-break: normal; overflow-wrap: normal;
}

/* --- Optionaler Highlight-Block (Mega-Footer) --- */
.pxlm .pxlm-highlight {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 24px; padding: 10px 16px; border-radius: 10px;
  background: var(--pxlm-icon-bg); color: var(--pxlm-fg); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
  transition: background .2s ease, transform .2s ease;
}
.pxlm .pxlm-highlight:hover { background: #e9eef6; transform: translateX(3px); }
.pxlm-highlight-arrow { width: 15px; height: 15px; color: var(--pxlm-navy); }
.pxlm .pxlm-mhighlight {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 8px 0 4px 12px; color: var(--pxlm-navy); text-decoration: none;
  font-size: 13.5px; font-weight: 500;
}

.pxlm-cat-title--empty { border-bottom: 1px solid var(--pxlm-border); }
/* Leere Ueberschrift: Linie ueber den Grid-Gap mit der Nachbarspalte verbinden */
.pxlm-col:not(:first-child) .pxlm-cat-title--empty { margin-left: -32px; }
/* Mobile-Such-Icon sicher sichtbar (Theme versteckt .search_actions-Innenleben) */
.pxlm .pxlm-mobile-search { width: auto !important; height: auto !important; flex-shrink: 0; }
.pxlm .pxlm-mobile-search .pxlm-ico { display: inline-block !important; flex: 0 0 16px; width: 16px !important; height: 16px !important; min-width: 16px; }
/* Mobile Menue-Text: semibold statt extra bold */
.pxlm .pxlm-macc-head { font-weight: 500; }

/* --- Linke/rechte Begrenzung exakt wie der Theme-Container (.wrapper):
   max-width 750/970/1200/1240px bei 15px Innenabstand. Damit fluchten Logo,
   Navigation und der Inhalt der Mega-Panels mit dem Seiteninhalt. --- */
.pxlm-bar-inner,
.pxlm-mega-inner,
.pxlm-mega--contained .pxlm-mega-shell { max-width: 100%; }
@media (min-width: 768px)  { .pxlm-bar-inner, .pxlm-mega-inner, .pxlm-mega--contained .pxlm-mega-shell { max-width: 750px; } }
@media (min-width: 992px)  { .pxlm-bar-inner, .pxlm-mega-inner, .pxlm-mega--contained .pxlm-mega-shell { max-width: 970px; } }
@media (min-width: 1230px) { .pxlm-bar-inner, .pxlm-mega-inner, .pxlm-mega--contained .pxlm-mega-shell { max-width: 1200px; } }
@media (min-width: 1290px) { .pxlm-bar-inner, .pxlm-mega-inner, .pxlm-mega--contained .pxlm-mega-shell { max-width: 1240px; } }

/* --- Mobil: optionale Kategorie-Ueberschrift mit Abstaenden und Trennlinie
   (analog Desktop). Ist keine Ueberschrift gepflegt, rendert das Template
   nichts - dann bleibt auch die Linie weg. --- */
@media (max-width: 767px) {
  .pxlm .pxlm-macc-cat-title,
  .pxlm .pxlm-macc-cat-title--link {
    display: flex; align-items: center; gap: 6px;
    width: 100%; box-sizing: border-box;
    margin: 20px 0 10px; padding: 0 0 8px 12px;
    border-bottom: 1px solid var(--pxlm-border);
  }
  .pxlm .pxlm-macc-cat:first-child > .pxlm-macc-cat-title,
  .pxlm .pxlm-macc-cat:first-child > .pxlm-macc-cat-title--link { margin-top: 6px; }
}

@media (max-width: 767px) {
  /* Kategorie ohne gepflegte Ueberschrift: den Flex-Gap des Accordion-Bodys (16px)
     aufheben und die Trennlinie der Liste fortfuehren - so ist nicht erkennbar,
     dass hier eine zweite Spalte beginnt (z. B. Industrien, Spalte 2). */
  .pxlm .pxlm-macc-cat--notitle { margin-top: -16px; }
  .pxlm.pxlm--mdividers .pxlm-macc-cat--notitle:not(:first-child) > .pxlm-mlist:not(.pxlm-mlist--2col) > li:first-child {
    border-top: 1px solid rgba(234,236,240,.6);
  }
}

/* --- Highlight/Teaser: eigene Spaltenbreite + Abstand zu den Menuespalten ---
   Vorher lief die 260px breite Teaser-Spalte ueber ihren 1fr-Track hinaus und
   ueberlappte die erste Kategorie (gemessen 12px). Jetzt bekommt der Teaser einen
   eigenen festen Track, die Kategorien teilen den Rest gleichmaessig. */
.pxlm-grid--teaser { grid-template-columns: var(--pxlm-teaser-col, 272px) repeat(var(--pxlm-catcols, 4), minmax(0, 1fr)); }
.pxlm-grid--teaser .pxlm-col--teaser { min-width: 0; }
.pxlm-grid--teaser .pxlm-teaser { padding-right: 32px; }

/* Highlight ohne Hintergrund: nur Text, kein Bild/Farbverlauf, keine Kachelform. */
.pxlm .pxlm-cover--plain {
  background: none; aspect-ratio: auto; min-height: 0;
  padding: 0; border-radius: 0; color: inherit;
}
.pxlm .pxlm-cover--plain .pxlm-cover-title { color: inherit; }
.pxlm .pxlm-cover--plain .pxlm-cover-sub,
.pxlm .pxlm-cover--plain .pxlm-cover-brand { color: inherit; opacity: .7; }

/* Mehr als 4 Kategorien (heute nur „Lösungen“): Ueberschriftenzeile ueber alle Spalten
   gleich hoch, damit die Listen buendig starten, auch wenn eine Ueberschrift umbricht.
   Ueberschrift waechst leicht mit der Fensterbreite (13px bei 1024, 15px ab 1440).
   Ohne Subgrid-Unterstuetzung bleibt es beim bisherigen Verhalten. */
.pxlm-grid--many .pxlm-cat-title { font-size: clamp(13px, 0.5vw + 7.8px, 15px); }
@supports (grid-template-rows: subgrid) {
  .pxlm-grid--many { grid-template-rows: auto 1fr; row-gap: 0; }
  .pxlm-grid--many > .pxlm-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .pxlm-grid--many > .pxlm-col--teaser { display: block; }
}