/* VISIBILIS.LIFE shared header/footer CSS. Extracted verbatim from front-page.php (homepage reference). */
:root {
      --vl-navy: #17004B;
      --vl-navy-dark: #120038;
      --vl-purple: #3B138C;
      /* ACC-02: audited brand values. White on --vl-pink is 6.2:1, the pink
         on white is 6.2:1 - both pass WCAG AA for normal text. */
      --vl-pink: #C2004F;
      --vl-pink-hover: #A60045;
      --vl-pink-on-dark: #FF5C93;
      --vl-pink-text: #C2004F;
      --vl-on-pink: #FFFFFF;
      --vl-soft-rose: #FFF2F7;
      --vl-text: #171247;
      --vl-text-muted: #585370;
      --vl-border: #E6E0EF;
      --vl-card-border: #ECE7F2;
      --vl-success: #2FAE73;
      /* ACC-04: default focus ring on light surfaces. Dark chrome surfaces
         (.vis-header, .vis-mobile-drawer, .vl-footer, .vl-lang-menu) flip it
         to white where they are introduced. */
      --vl-focus-ring: #170442;
      --vl-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      --vl-font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
    }

/* ==========================================================================
       1. STANDARDIZED HEADER (Matching /menschen-entdecken/ 1:1)
       ========================================================================== */
    .vis-header {
      background-color: #180d34 !important;
      color: #ffffff;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      width: 100%;
    }

    .vis-header-inner {
      max-width: 1365px !important;
      margin: 0 auto;
      padding: 0 16px !important;
      height: 64px !important;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    /* Brand Logo */
    .vis-logo-link {
      display: flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: #ffffff;
      flex-shrink: 0;
    }

    .vis-logo-img {
      width: 32px;
      height: 32px;
      object-fit: contain;
      flex-shrink: 0;
    }

    .vis-logo-text {
      line-height: 1.1;
      display: flex;
      flex-direction: column;
    }

    .vis-logo-title {
      font-family: var(--vl-font-heading);
      font-weight: 800;
      font-size: 13.5px;
      letter-spacing: 0.16em;
      color: #ffffff;
      white-space: nowrap;
    }

    .vis-logo-sub {
      font-family: var(--vl-font-sans);
      font-weight: 700;
      /* ACC-02: 11px floor (was 7.2px) so the mission line stays readable;
         #ff5c93 (was #C2004F) passes contrast against the dark header. */
      font-size: 11px;
      letter-spacing: 0.14em;
      color: #ff5c93;
      white-space: nowrap;
      margin-top: 1.5px;
    }

    /* Desktop Navigation */
    .vis-nav {
      display: none;
      align-items: center;
      gap: 28px;
      flex-shrink: 0;
    }

    @media (min-width: 1200px) {
      .vis-nav {
        display: flex;
      }
    }

    .vis-nav-link {
      font-size: 12.5px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      position: relative;
      padding: 6px 0;
      transition: color 0.15s ease, opacity 0.15s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }

    .vis-nav-link:hover {
      color: #ffffff;
      opacity: 1;
    }

    .vis-nav-link.active {
      color: #ff2e7a !important;
      font-weight: 700 !important;
      border-bottom: 2px solid #ff2e7a !important;
      padding-bottom: 4px !important;
    }

    .vis-nav-link.active::after {
      display: none !important;
    }

    .vis-nav-badge {
      background-color: #C2004F;
      color: #ffffff;
      font-size: 10px;
      font-weight: 700;
      width: 18px;
      height: 18px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }

    /* Header Actions */
    .vis-header-actions {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-shrink: 0;
    }

    .vis-user-trigger {
      display: flex;
      align-items: center;
      gap: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      padding: 2px;
      position: relative;
    }

    .vis-user-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid rgba(255, 255, 255, 0.85);
      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .vis-user-chevron {
      font-size: 10px;
      color: rgba(255, 255, 255, 0.7);
      transition: transform 0.2s ease;
    }

    /* Premium Login CTA Button */
    .vis-btn-login {
      background: linear-gradient(135deg, var(--vl-pink) 0%, var(--vl-pink-hover) 100%) !important;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.25) !important;
      border-radius: 24px;
      font-family: var(--vl-font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 9px 20px;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
      text-decoration: none !important;
      white-space: nowrap;
      box-shadow: 0 4px 14px rgba(255, 46, 122, 0.35), 0 0 0 1px rgba(255, 46, 122, 0.2);
      transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .vis-btn-login i {
      font-size: 12px;
      transition: transform 0.2s ease;
    }

    .vis-btn-login:hover {
      background: var(--vl-pink-hover) !important;
      color: #ffffff !important;
      transform: translateY(-1.5px);
      box-shadow: 0 6px 20px rgba(255, 46, 122, 0.5), 0 0 16px rgba(255, 46, 122, 0.3);
      border-color: rgba(255, 255, 255, 0.4) !important;
    }

    .vis-btn-login:hover i {
      transform: translateX(2px);
    }

    .vis-btn-login:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(255, 46, 122, 0.35);
    }

    /* Logout Button for Authenticated Users */
    .vis-btn-logout {
      background: rgba(255, 255, 255, 0.1) !important;
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      border-radius: 24px;
      font-family: var(--vl-font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 12.5px;
      font-weight: 600;
      padding: 8px 16px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      text-decoration: none !important;
      transition: all 0.2s ease;
      white-space: nowrap;
    }

    .vis-btn-logout:hover {
      background: rgba(255, 46, 122, 0.2) !important;
      border-color: rgba(255, 46, 122, 0.5) !important;
      color: #ff2e7a !important;
      transform: translateY(-1px);
    }

    /* User Dropdown */
    .vis-user-dropdown {
      position: absolute;
      top: 60px;
      right: 20px;
      background: #ffffff;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(23, 4, 66, 0.15);
      border: 1px solid #ebe7f1;
      width: 210px;
      padding: 8px 0;
      display: none;
      z-index: 1500;
    }

    .vis-user-dropdown.is-open {
      display: block;
    }

    .vis-user-dropdown-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 16px;
      color: var(--vl-text);
      font-size: 13px;
      text-decoration: none;
      font-weight: 500;
      transition: background 0.15s ease;
    }

    .vis-user-dropdown-item:hover {
      background: #fff5f9;
      color: #C2004F;
    }

    .vis-user-dropdown-divider {
      height: 1px;
      background: #ebe7f1;
      margin: 6px 0;
    }

    /* Mobile Hamburger */
    .vis-mobile-toggle {
      display: flex;
      align-items: center;
      justify-content: center;
      background: transparent;
      border: none;
      color: #ffffff;
      font-size: 18px;
      cursor: pointer;
      padding: 6px;
    }

    @media (min-width: 1200px) {
      .vis-mobile-toggle {
        display: none;
      }
    }

    .vis-mobile-drawer {
      display: none;
      background: #100230;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      padding: 16px 20px;
    }

    .vis-mobile-drawer.is-open {
      display: block;
    }

    .vis-mobile-nav-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 0;
      color: rgba(255, 255, 255, 0.85);
      font-size: 13.5px;
      font-weight: 600;
      text-decoration: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .vis-mobile-nav-link:hover,
    .vis-mobile-nav-link.active {
      color: #ff2e7a;
    }

    
/* Language Toggle Button in Header */
    .vis-lang-btn {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff !important;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 8px;
      font-family: var(--vl-font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 11.5px;
      font-weight: 700;
      padding: 6px 10px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      cursor: pointer;
      text-decoration: none !important;
      transition: all 0.15s ease;
      white-space: nowrap;
    }
    .vis-lang-btn:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.35);
      transform: translateY(-1px);
    }
    .vis-lang-btn i {
      color: var(--vl-pink-on-dark, #FF5C93);
      font-size: 12px;
    }

    /* Primary Action Create Activity Button in Header */
    .vis-btn-create {
      background-color: var(--vl-pink);
      color: #ffffff !important;
      border: none;
      border-radius: 20px;
      font-family: var(--vl-font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 12.5px;
      font-weight: 600;
      padding: 8px 16px;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      cursor: pointer;
      text-decoration: none !important;
      transition: background-color 0.15s ease, transform 0.1s ease;
      white-space: nowrap;
      box-shadow: 0 2px 8px rgba(242, 10, 100, 0.3);
    }
    .vis-btn-create:hover {
      background-color: var(--vl-pink-hover, #df0056);
      transform: translateY(-1px);
    }
    .vis-btn-create:active {
      transform: scale(0.98);
    }

    
/* SECTION 10: FOOTER (from media_1789641394482.png) */
    .vl-footer {
      background-color: var(--vl-navy);
      color: #FFFFFF;
      padding: 48px 0 24px;
      margin-top: 10px;
    }

    /* Footer width is owned by the chrome, not by the page template.

       Without this rule the footer inherited whatever `.vl-container` the
       surrounding template happened to define. Across the 30 pages of this
       site those definitions were: 1365px/16px (homepage reference),
       1440px/24px, 1240px/24px, and on the remaining 25 pages no rule at
       all -- which computed to `max-width: none; padding: 0` and made the
       footer run edge-to-edge across the full viewport.

       These values mirror the homepage reference, and the `!important`
       matches what `.vis-header-inner` already does above, so the footer
       cannot be overridden by a per-page `.vl-container` rule. Scoped to a
       direct child of `.vl-footer` so page content layout is untouched. */
    .vl-footer > .vl-container {
      max-width: 1365px !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 16px !important;
      padding-right: 16px !important;
    }

    .vl-footer-grid {
      display: grid;
      grid-template-columns: 2.2fr 1.2fr 1.2fr 1.3fr 1.2fr 1.8fr;
      gap: 24px;
      margin-bottom: 36px;
    }

    @media (max-width: 1080px) {
      .vl-footer-grid {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media (max-width: 640px) {
      .vl-footer-grid {
        grid-template-columns: 1fr;
      }
    }

    .vl-footer-brand {
      display: flex;
      flex-direction: column;
    }

    .vl-brand-logo {
      height: 36px;
      width: auto;
      max-width: 280px;
      object-fit: contain;
      display: block;
      margin-bottom: 12px;
    }

    .vl-footer-desc {
      font-size: 11px;
      color: rgba(255, 255, 255, 0.7);
      line-height: 1.45;
      margin-bottom: 16px;
      max-width: 240px;
    }

    .vl-social-row {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 18px;
    }

    .vl-social-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 13px;
      color: #FFFFFF;
      transition: background 0.15s ease;
    }

    .vl-social-icon:hover {
      background: var(--vl-pink);
    }

    .vl-footer-lang-wrap {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.75);
    }

    .vl-footer-lang-btn {
      background: none;
      border: 0;
      padding: 0;
      margin: 0;
      font: inherit;
      color: inherit;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 5px;
    }

    .vl-footer-lang-btn:hover { color: #FFFFFF; }

    .vl-footer-lang-btn:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 2px; border-radius: 3px; }

    .vl-footer-col-title {
      font-family: var(--vl-font-heading);
      font-size: 12.5px;
      font-weight: 800;
      color: #FFFFFF;
      margin-bottom: 14px;
    }

    .vl-footer-links {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .vl-footer-link {
      font-size: 11.5px;
      color: rgba(255, 255, 255, 0.68);
      transition: color 0.15s ease;
    }

    .vl-footer-link:hover {
      color: #FFFFFF;
    }

    .vl-footer-bottom-row {
      border-top: 1px solid rgba(255, 255, 255, 0.12);
      padding-top: 18px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 11px;
      color: rgba(255, 255, 255, 0.55);
      flex-wrap: wrap;
      gap: 12px;
    }

    /* TOAST */
    .vl-toast {
      position: fixed;
      bottom: 24px;
      right: 24px;
      background: var(--vl-navy);
      color: #FFFFFF;
      padding: 12px 20px;
      border-radius: 10px;
      font-size: 13px;
      font-weight: 600;
      box-shadow: 0 8px 24px rgba(0,0,0,0.25);
      border-left: 4px solid var(--vl-pink);
      z-index: 9999;
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
    }

    .vl-toast.show {
      transform: translateY(0);
      opacity: 1;
      pointer-events: auto;
    }

    

/* SECTION 11: LANGUAGE SWITCHER
   One component shared by the header, the mobile drawer and the footer.
   Only new selectors are declared: .vis-lang-btn and .vl-footer-lang-btn
   keep their existing trigger styling untouched. */
    .vl-lang {
      position: relative;
      display: inline-flex;
      vertical-align: middle;
    }

    /* Swiss flag - official 1:1 geometry, white cross arms 6/32 of the flag. */
    .vl-flag {
      display: block;
      flex: 0 0 auto;
      width: 14px;
      height: 14px;
      border-radius: 2px;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
    }

    .vis-lang-btn .vl-lang-caret {
      font-size: 8.5px;
      opacity: 0.7;
      margin-left: -2px;
    }

    .vl-footer-lang-btn .vl-lang-caret {
      font-size: 8.5px;
      opacity: 0.7;
    }

    .vl-lang-menu {
      position: absolute;
      top: calc(100% + 8px);
      left: 0;
      z-index: 1200;
      min-width: 172px;
      padding: 5px;
      display: flex;
      flex-direction: column;
      gap: 1px;
      background: var(--vl-navy-dark, #120038);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 10px;
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.38);
    }

    .vl-lang-menu[hidden] {
      display: none;
    }

    /* The footer sits at the bottom of the page, so its list opens upwards
       and is never clipped by the viewport edge. */
    .vl-lang-menu--up {
      top: auto;
      bottom: calc(100% + 8px);
    }

    .vl-lang-option {
      display: flex;
      align-items: center;
      gap: 9px;
      width: 100%;
      padding: 7px 10px;
      background: none;
      border: 0;
      border-radius: 7px;
      font-family: var(--vl-font-heading, 'Plus Jakarta Sans', sans-serif);
      font-size: 12px;
      font-weight: 600;
      color: rgba(255, 255, 255, 0.82);
      text-align: left;
      cursor: pointer;
      white-space: nowrap;
      transition: background 0.15s ease, color 0.15s ease;
    }

    .vl-lang-option:hover {
      background: rgba(255, 255, 255, 0.08);
      color: #FFFFFF;
    }

    .vl-lang-option:focus-visible {
      outline: 3px solid #FFFFFF;
      outline-offset: -2px;
      color: #FFFFFF;
    }

    .vl-lang-option.is-active {
      background: rgba(242, 10, 100, 0.16);
      color: #FFFFFF;
    }

    .vl-lang-option.is-active .vl-lang-code {
      color: #ff2e7a;
    }

    .vl-lang-code {
      flex: 0 0 auto;
      min-width: 20px;
      font-weight: 800;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.6);
    }

    .vl-lang-name {
      flex: 1 1 auto;
    }

    .vis-lang-btn:focus-visible {
      outline: 3px solid #FFFFFF;
      outline-offset: 2px;
    }

/* ==========================================================================
   12. RESPONSIVE CHROME (mobile / tablet header)

   WHY THIS SECTION EXISTS
   The header used to be one non-wrapping flex row at every width. The action
   cluster (.vis-header-actions) had flex-shrink: 0 and held four always-visible
   controls - language chip, "Aktivitaet erstellen" (white-space: nowrap),
   "Log in" (white-space: nowrap) and the hamburger - giving it an intrinsic
   width of 396px. Added to the 189px brand lockup (also flex-shrink: 0) and the
   16px gaps, the row needed 633px. Every phone viewport is narrower than that,
   so on a 360px screen the action cluster was pushed out to x=618 and the
   hamburger - the only way to open the mobile drawer - was off screen.
   Measured document scrollWidth was 618px at 320, 360, 375, 390, 412 and 430.

   The desktop breakpoint was also wrong: .vis-nav switched on at 1024px but the
   desktop row needs 1156px of content, so 1024-1187px overflowed too
   (+148px at 1024, +72px at 1100). It now switches at 1200px, the first width
   at which that row genuinely fits. Everything at 1200px and above is
   unchanged.

   WHAT THIS SECTION DOES
   Below 1200px the top bar becomes a real mobile header: brand, optional
   notification bell, optional icon-only primary action, menu button. The
   secondary desktop actions (login, profile dropdown) are not lost - the
   existing .vis-mobile-drawer already renders the language selector, the
   full-width "Aktivitaet erstellen" button, every nav link and the
   login/profile/logout controls, so the drawer becomes the single place those
   live on small screens instead of a second navigation system.
   ========================================================================== */

    @media (max-width: 1199.98px) {

      /* The bar itself: responsive width, responsive padding, and no child
         allowed to force the row wider than the viewport. */
      .vis-header-inner {
        gap: 10px;
        padding: 0 12px !important;
      }

      .vis-header-actions {
        gap: 6px;
        min-width: 0;
        flex-shrink: 0 1 auto;
      }

      .vis-header-actions > * {
        min-width: 0;
      }

      .vis-nav {
        display: none;
      }

      .vis-mobile-toggle {
        display: flex;
        flex: 0 0 auto;
      }

      /* Secondary actions move into the drawer (see note above). The drawer's
         own copies of these controls are not matched by these selectors. */
      .vis-header-actions > .vis-btn-login,
      .vis-header-actions > .vis-user-trigger {
        display: none;
      }

      /* Primary action becomes an icon button. The label is kept for screen
         readers instead of being removed, and the button already carries
         aria-label="Aktivitaet erstellen". */
      .vis-header-actions > .vis-btn-create {
        width: 36px;
        height: 36px;
        min-width: 36px;
        padding: 0;
        gap: 0;
        border-radius: 50%;
        justify-content: center;
        flex: 0 0 auto;
      }

      .vis-header-actions > .vis-btn-create > span {
        position: absolute !important;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        border: 0;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
      }

      /* The header language menu opens inward (to the left) so it can never
         run past the right edge of a narrow screen. */
      .vis-header-actions .vl-lang-menu {
        left: auto;
        right: 0;
      }
    }

    /* Below 560px the brand lockup leaves too little room for the language
       chip next to it; the chip stays in the drawer, where it is one tap away
       and already rendered. */
    @media (max-width: 559.98px) {
      .vis-header-actions > .vl-lang {
        display: none;
      }
    }

    /* Compact brand lockup on phones. The mission line keeps its 11px floor
       (ACC-02); instead of overflowing narrow screens it wraps, and the
       brand lockup is allowed to shrink (title stays on one line). */
    @media (max-width: 479.98px) {
      .vis-logo-img {
        width: 28px;
        height: 28px;
      }

      .vis-logo-link {
        gap: 8px;
        flex-shrink: 1;
        min-width: 0;
      }

      .vis-logo-text {
        min-width: 0;
      }

      .vis-logo-title {
        font-size: 11px;
        letter-spacing: 0.06em;
      }

      .vis-logo-sub {
        font-size: 11px;
        letter-spacing: 0.02em;
        white-space: normal;
      }
    }

    /* On a 320px screen even the bell no longer fits beside the brand and the
       primary action. The bell links to /mein-dashboard/, which is the first
       item in the drawer. */
    @media (max-width: 359.98px) {
      .vis-header-actions > .vl-bell {
        display: none;
      }
    }

    /* Overlays may never extend outside the viewport at any width. */
    .vl-lang-menu {
      max-width: calc(100vw - 24px);
    }

    .vis-user-dropdown {
      max-width: calc(100vw - 24px);
    }

/* ==========================================================================
   13. ACCESSIBILITY (ACC-01 / ACC-04 / ACC-15)
   ========================================================================== */

    /* ACC-04: dark chrome surfaces flip the focus ring to white. The footer
       language button, the language menu options and the header language
       chip carry their own :focus-visible rules above (specificity 0,2,0)
       which win over the global rule below on purpose. */
    .vis-header,
    .vis-mobile-drawer,
    .vl-footer,
    .vl-lang-menu,
    .vl-skip-link {
      --vl-focus-ring: #FFFFFF;
    }

    /* The user dropdown is a white surface, so it keeps the dark ring. */
    .vis-user-dropdown {
      --vl-focus-ring: #170442;
    }

    /* ACC-01: skip link. Hidden above the viewport until it receives focus;
       the target is the main landmark the output-buffer rewrite in
       inc/vl-chrome.php gives every page (id="vl-main"). */
    .vl-skip-link {
      position: absolute;
      left: 16px;
      top: -200px;
      z-index: 3000;
      background: var(--vl-navy, #17004B);
      color: #FFFFFF;
      font-family: var(--vl-font-sans);
      font-size: 13px;
      font-weight: 700;
      padding: 12px 18px;
      border-radius: 0 0 8px 8px;
      text-decoration: none;
      transition: top 0.15s ease;
    }

    .vl-skip-link:focus,
    .vl-skip-link:focus-visible {
      top: 0;
    }

    /* ACC-04: global focus policy - 3px ring, 2px offset, 6px radius.
       `html :focus-visible` keeps the specificity at (0,1,1), so it beats
       class-level `outline: none` rules such as .vl-ac-input (0,1,0) in
       page-level <style> blocks regardless of stylesheet order, while the
       newer module rules (.vl-ac-chip:focus-visible etc., specificity
       0,2,0) keep winning over it. */
    html :focus-visible {
      outline: 3px solid var(--vl-focus-ring, #170442);
      outline-offset: 2px;
      border-radius: 6px;
    }

    /* Builder content carries inline style="outline:none" on many fields
       (home, /menschen-entdecken/, /aktivitaeten/). An inline normal
       declaration loses against an author !important declaration, so the
       focus ring cannot be removed there anymore. */
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid var(--vl-focus-ring, #170442) !important;
      outline-offset: 2px;
    }

    /* ACC-07b / ACC-09: the icon-only password toggles rendered at
       12.4x24px (below the 24px WCAG 2.5.8 minimum). A 32x32px flex-centered
       box keeps the glyph visually in place while clearing the minimum.
       Specificity (0,1,0) is enough: no Tailwind width/height utility is
       applied to these buttons. */
    .vis-toggle-password {
      width: 32px;
      height: 32px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* ACC-09: daisyUI's .checkbox-xs renders 16x16px inside the
       registration form. The doubled selector outranks .checkbox-xs
       regardless of stylesheet order; min-height guards daisyUI's own
       min-height declaration. */
    .visibilis-registration .checkbox {
      width: 24px;
      height: 24px;
      min-height: 24px;
    }
    /* ACC-15: global reduced-motion support. There is no in-site motion
       preference to connect to (localStorage only holds vl_lang,
       vl_logged_in, vl_user_name; /einstellungen/ has no motion toggle), so
       the OS/browser preference is the single source of truth. */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }