/* Responsive refinements for the existing Sparkle layout.
   Original colours, type, content and image treatment are intentionally preserved. */
html, body { overflow-x: hidden; }

/* At the iPad / compact-desktop range, keep the header uncluttered.
   Projects and HDD Planner remain available as pages but move out of the horizontal navigation. */
@media (max-width: 1279px) and (min-width: 768px) {
  .menu-dropdown > li:nth-last-child(-n + 2) { display: none !important; }
}

/* The original 320px mobile artboard scales correctly; these guardrails avoid accidental
   horizontal scrolling from long media and ensure the menu trigger remains comfortably tappable. */
@media (max-width: 767px) {
  img, picture, video { max-width: 100%; }
  .c22 { min-width: 44px; min-height: 44px; }
}

/* Keep the navigation visually identical in both languages.  The previous
   German-only rule reduced its type size, which made the header jump when
   switching language. */
.f26,
.f27 { font-size: 16px !important; letter-spacing: 0 !important; }

/* The exported desktop navigation used one large fixed font size.  German
   labels are longer, so let the menu type scale down smoothly on notebooks
   and tablets instead of wrapping into a second line. */
@media (min-width: 768px) and (max-width: 1500px) {
  .f215, .f216, .f26, .f27 {
    font-size: clamp(14px, 1.3vw, 20px) !important;
    line-height: 1.2 !important;
    white-space: nowrap;
  }
}