@charset "UTF-8";/*
 * Patho-logisch.de | T4 mobile offcanvas skin v1.0
 * Existing menu: #off-canvas-right / #offcanvas-menu-dynamic
 * Existing renderer: artikel_skript.js -> menu.json -> <details>/<summary>
 * NO JavaScript needed, NO change to desktop flyouts or to T4's show/hide/transform.
 * Scoped to test page containing #pl-home-2026.
 */
@media (max-width: 1199.98px) {
  /* The native T4 drawer controls its own animation, positioning and z-index. */
  body:has(#pl-home-2026) #off-canvas-right {
    --plm-ink: #293149;
    --plm-violet: #813e88;
    --plm-pale: #f3eaf6;
    --plm-border: #e8e8f0;
    background: #f8f9fc !important;
    color: var(--plm-ink);
    width: min(88vw, 405px) !important;
    max-width: 100vw;
    box-shadow: -18px 0 48px rgba(16, 20, 43, .24);
  }

  /* Header: handles common T4 offcanvas variants without changing markup. */
  body:has(#pl-home-2026) #off-canvas-right :is(
    .t4-off-canvas-header, .off-canvas-header, .offcanvas-header,
    .t4-offcanvas-header
  ) {
    background: #35384d !important;
    color: #fff !important;
    padding: 19px 19px !important;
    border-bottom: 1px solid rgba(255,255,255,.13) !important;
    min-height: 68px;
  }
  body:has(#pl-home-2026) #off-canvas-right :is(
    .t4-off-canvas-header, .off-canvas-header, .offcanvas-header,
    .t4-offcanvas-header
  ) :is(h3, h4, strong, .title) {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 760 !important;
    letter-spacing: -.03em;
  }
  body:has(#pl-home-2026) #off-canvas-right button.js-offcanvas-close,
  body:has(#pl-home-2026) #off-canvas-right :is(.t4-off-canvas-header, .off-canvas-header, .offcanvas-header) .close {
    color: #fff !important;
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    border-radius: 11px !important;
    min-width: 38px;
    min-height: 38px;
  }

  body:has(#pl-home-2026) #off-canvas-right :is(.t4-off-canvas-body,.t4-offcanvas-body,.offcanvas-body) {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 0 13px 24px !important;
    background: #f8f9fc !important;
  }

  /* Entire tree is built by the EXISTING artikel_skript.js. */
  body:has(#pl-home-2026) #offcanvas-menu-dynamic {
    padding: 8px 0 24px;
    min-width: 0;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic > nav {
    color: #293149 !important;
    font-family: system-ui, -apple-system, 'Segoe UI', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic > nav::before {
    content: 'FACHGEBIETE & TOOLS';
    display: block;
    padding: 14px 11px 9px;
    color: #92548d;
    font-size: 10px;
    letter-spacing: .16em;
    font-weight: 800;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav > ul > li {
    border-bottom: 1px solid #e9eaf1 !important;
    padding: 3px 0;
  }
  /* Soft indentation + guiding vertical line at each depth. */
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav ul ul {
    margin: 4px 0 9px 18px !important;
    padding-left: 12px !important;
    border-left: 2px solid #e9dbea;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav ul ul ul {
    border-left-color: #edeaf0;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav li {
    min-width: 0;
  }

  /* Native details/summary = reliable multi-level accordion, including 4+ levels. */
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details {
    min-width: 0;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 47px !important;
    margin: 2px 0 !important;
    padding: 10px 11px !important;
    border-radius: 11px;
    color: #30364c !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.38 !important;
    list-style: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .16s ease, color .16s ease;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary::-webkit-details-marker {
    display: none;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details[open] > summary {
    background: #f1e5f4 !important;
    color: #6b2c79 !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary:is(:hover,:focus-visible) {
    background: #f4edf7 !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary:focus-visible,
  body:has(#pl-home-2026) #offcanvas-menu-dynamic a:focus-visible {
    outline: 3px solid #aa78c2 !important;
    outline-offset: 2px !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary > span:first-child {
    flex: 1 !important;
    min-width: 0;
    overflow-wrap: anywhere;
  }
  /* Your script rotates this arrow via its existing <details> toggle handler. */
  body:has(#pl-home-2026) #offcanvas-menu-dynamic .menu-arrow {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    background: #f0eff5;
    color: #785486;
    font-size: 17px !important;
    transition: transform .16s ease, background .16s ease !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic details[open] > summary .menu-arrow {
    background: #e7d4ec;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic summary a {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
    text-decoration: none !important;
  }

  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav li > a,
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav li > span {
    display: flex !important;
    align-items: center !important;
    width: 100%;
    min-height: 44px !important;
    padding: 10px 12px !important;
    margin: 2px 0 !important;
    border-radius: 10px;
    font-size: 14px !important;
    font-weight: 480 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    color: #30364c !important;
    overflow-wrap: anywhere;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav li > a:is(:hover,:focus-visible),
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav li > span:hover {
    background: #f3eaf6 !important;
    color: #6f347c !important;
  }
  body:has(#pl-home-2026) #offcanvas-menu-dynamic nav a[aria-current='page'] {
    background: #eee2f3 !important;
    color: #682c7e !important;
    font-weight: 700 !important;
  }
  /* Keep deepest levels readable on 320px displays. */
  @media (max-width: 390px) {
    body:has(#pl-home-2026) #offcanvas-menu-dynamic nav ul ul {
      margin-left: 9px !important;
      padding-left: 8px !important;
    }
    body:has(#pl-home-2026) #offcanvas-menu-dynamic details > summary {
      padding-inline: 7px !important;
      font-size: 14px !important;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(#pl-home-2026) #offcanvas-menu-dynamic :is(details > summary, .menu-arrow) {
    transition: none !important;
  }
}