/*
  ============================================================
  GEPVOLT - WordPress bridge
  ============================================================
  This is the ONLY place where our CSS is coupled to the block
  markup generated by WordPress (selectors with "wp-...").

  Background: the WordPress navigation block generates its menu DOM
  entirely on its own (container, items, submenus, burger overlay) and
  offers no dedicated hooks for the inner elements. That is why these
  spots cannot be targeted via plain gp-* classes.

  Migration note: when switching the framework/CMS, ONLY this file gets
  rewritten. All other stylesheets hang off their own gp-* classes or
  generic element selectors and stay unchanged.
*/

/* ===== Fluid page gutter =====
   theme.json sets the global horizontal padding (styles.spacing.padding) to
   spacing-30. WordPress exposes that as the --wp--style--root--padding-*
   custom properties and applies them through .has-global-padding (and
   re-applies them on nested .alignfull blocks). We rebind only the two
   horizontal properties to our fluid --gp-gutter token, so every block that
   consumes the global padding scales 16px -> 24px with the viewport without
   touching the vertical padding (kept at 0 by theme.json).

   IMPORTANT: WordPress writes those custom properties onto `body` itself. A
   custom property declared on `body` wins over one declared on `:root` for the
   whole document (body sits closer to the content), so a `:root` rebind here is
   silently shadowed -- the gutter would stay pinned at the raw spacing-30 value
   (~11px) on every breakpoint. Declaring on `html body` (specificity 0,0,2)
   beats WordPress's `body` rule regardless of stylesheet order and lets the
   fluid gutter actually apply. */
html body {
  --wp--style--root--padding-left: var(--gp-gutter);
  --wp--style--root--padding-right: var(--gp-gutter);
}

/* ===== Stack full-width sections seamlessly =====
   In the constrained layout WP sets a vertical block gap between sibling
   blocks (var(--wp--preset--spacing--40), here 16px). On full-bleed color
   sections the white body background shows through this gap, visible as a
   "white seam" between hero, trustbar and the sections that follow. Each
   section carries its own vertical padding, so the backgrounds should butt
   directly against each other. The WP rules live in :where(...) (specificity
   0) and are neutralized here without !important. */
.wp-block-post-content > .alignfull {
  margin-block-start: 0;
  margin-block-end: 0;
}

/* wp:html blocks (forms, modal, FAQ) - keep the core wrapper neutral */
.wp-block-html .gp-form-wrapper {
  margin: 0;
}

/* Project cards: WP's columns block forces flex-wrap:nowrap, so we switch to
   an intrinsic responsive grid. auto-fit + a content-driven minimum (~22rem:
   16:9 image + title/badge + checklist) lets the row reflow on its own -
   3-up on desktop, 2-up on tablet, 1-up on tablet-portrait and phones -
   without any breakpoint magic numbers. The 22rem floor keeps it at 3-up
   (never a cramped 4-up) inside the 1320px content box. min(100%, ...)
   prevents horizontal overflow on viewports narrower than the minimum
   (smallest phones fall back to a single full-width column). */
.gp-cards-projekte.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  gap: 2rem 1.5rem;
  margin-top: 0;
}

.gp-cards-projekte.wp-block-columns > .wp-block-column {
  flex-basis: auto !important;
  flex-grow: 0 !important;
  min-width: 0;
  width: auto !important;
}

html.has-modal-open {
  overflow: hidden;
}

html.has-modal-open .gp-scroll-top {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* ===== Main navigation =====
   gp-nav sits on <nav.wp-block-navigation>; items in
   .wp-block-navigation__container > .wp-block-navigation-item.
   Mobile-first: base = burger/overlay; desktop row from 1024px.
   overlayMenu "mobile" + CSS: WP toggles burger/container via JS. */

/* ----- Base typography (all breakpoints) ----- */
.gp-nav.wp-block-navigation .wp-block-navigation-item__content {
  color: var(--gp-navy);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.gp-nav.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--gp-green);
}

.gp-nav.wp-block-navigation .wp-block-navigation-item__content:focus-visible {
  color: var(--gp-green);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
  border-radius: var(--gp-radius-sm);
}

.gp-nav.wp-block-navigation .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.gp-nav.wp-block-navigation .wp-block-navigation-item[aria-current] > .wp-block-navigation-item__content {
  color: var(--gp-green);
}

.gp-nav.wp-block-navigation .wp-block-navigation__submenu-icon {
  margin-left: 0.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SVG as block (prevents baseline shift) + minimal optical lift:
   the downward-pointing "v" arrow looks lower than its geometric center
   because of its tip, hence raised 1.5px against the cap height of the label. */
.gp-nav.wp-block-navigation .wp-block-navigation__submenu-icon svg {
  display: block;
  transform: translateY(-1.5px);
}

/* ----- Mobile (base): burger visible, nav container hidden ----- */

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-open {
  display: flex !important;
  color: var(--gp-navy);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-open svg {
  fill: currentColor;
}

/* Hide the closed container. :not(.is-menu-open) leaves the opened overlay
   state untouched (WP's default display then applies) -- the .is-menu-open
   rule sets no display itself. The desktop override uses the same :not()
   selector (same specificity 0,4,0, later source position) and overrides
   this display:none there. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open) {
  display: none !important;
}

/* Touch targets (WCAG 2.1 AA) for burger + close button */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-open,
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
  min-width: var(--gp-touch);
  min-height: var(--gp-touch);
  padding: 0.5rem;
  align-items: center;
  justify-content: center;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-open:focus-visible,
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-close:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* Full-screen overlay when open - with a subtle entry animation */
@keyframes gp-nav-overlay-in {
  from { opacity: 0; transform: translateY(-0.5rem); }
  to   { opacity: 1; transform: translateY(0); }
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  z-index: 600;
  background: var(--gp-bg-white);
  padding: var(--gp-space-m);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: gp-nav-overlay-in var(--gp-trans-slow);
}

/* ----- Overlay header bar -----
   WP renders the close button and the content list as the two children of the
   dialog; there is no logo in the overlay DOM. We make the dialog a wrapping
   flex row so the "Menü" label (::before) and the close button form one header
   line, with the content forced onto the next line below. This anchors the
   close button in flow (no absolute-positioning offset quirks) and removes the
   large empty void it used to leave behind. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--gp-space-s);
}

/* "Menü" label fills the row, pushing the close button to the right edge */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: 'Menü';
  flex: 1 1 auto;
  min-height: var(--gp-touch);
  display: flex;
  align-items: center;
  color: var(--gp-text-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Close button: round affordance, 44px tap target, anchored in the header row */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
  position: static;
  flex: 0 0 auto;
  color: var(--gp-navy);
  background: var(--gp-bg-light);
  border-radius: var(--gp-radius-pill);
  transition: var(--gp-trans-btn);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-close:hover {
  background: var(--gp-border);
  color: var(--gp-green-dark);
}

/* Content drops to the next line under the header row, full width, with a
   divider that spans the whole overlay between header and the first item. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 0 0 100%;
  margin-top: var(--gp-space-s);
  padding-top: var(--gp-space-s);
  border-top: 1px solid var(--gp-border);
}

/* Overlay content: left-aligned, full width */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.has-child) {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  width: 100%;
}

/* Top-level items with a subtle divider */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
  border-right: 0;
  border-bottom: 1px solid var(--gp-border);
  padding: 0;
}

/* Drop the divider on the last real menu item (the CTA is the final <li>, so
   target the item right before it) -- avoids a dangling line above the button. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:has(+ .gp-nav-cta) {
  border-bottom: 0;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: var(--gp-navy);
  font-size: 1.05rem;
  text-align: left;
  justify-content: flex-start;
  width: 100%;
  min-height: 3rem;
  /* border-box is essential: without it the horizontal padding is ADDED to the
     306px grid-column width, so the label box overflows ~24px into the toggle
     column of .has-child parents and covers the left half of the submenu
     toggle, making it un-clickable. */
  box-sizing: border-box;
  padding: var(--gp-space-s);
  align-items: center;
  transition: color var(--gp-trans-fast);
}

/* Active page (+ submenu ancestor): green bold label, no background fill --
   the current page is marked by colour and weight alone. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current],
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.gp-nav-ancestor {
  color: var(--gp-green-dark);
  font-weight: 700;
}

/* Keyboard focus: ring hugging the row edge (negative offset) with a matching
   radius, so it does not float as a detached rectangle. (WP focuses the first
   item on open.) */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  border-radius: var(--gp-radius-md);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: calc(-1 * var(--gp-focus-width));
}

/* ----- Accordion: parent item with submenu (best practice: collapsed) -----
   Grid instead of flex-wrap: label (1fr) + toggle (44px) reliably in one
   row, submenu spans both columns in row 2. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  display: grid;
  grid-template-columns: 1fr var(--gp-touch);
  align-items: center;
  width: 100%;
}

/* Toggle button: a clear tappable affordance, not a bare arrow. A tinted
   round chip (36px inside the 44px row) signals "tap to expand"; the arrow
   rotates on expand. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gp-touch);
  height: var(--gp-touch);
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--gp-navy);
  cursor: pointer;
}

/* The visible chip lives on the SVG box so the full 44px stays tappable.
   box-sizing: border-box keeps the chip a true 36x36 circle (padding stays
   inside, so it can't render as an oval); the inherited desktop translateY
   lift is reset to 0 so the arrow sits centered between the two lines. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  aspect-ratio: 1;
  padding: 6px;
  border-radius: var(--gp-radius-pill);
  background: var(--gp-green-tint);
  color: var(--gp-green-dark);
  transform: none;
  transition: transform var(--gp-trans-fast),
              background-color var(--gp-trans-fast);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon:hover svg {
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon:focus-visible {
  outline: 0;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon:focus-visible svg {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* Expanded state: filled chip + rotated arrow so the open parent reads as
   active (transition declared on the base svg rule above). */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] svg {
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
  transform: rotate(180deg);
}

/* Submenu collapsed; expanded via toggle (aria-expanded) */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
  display: none;
  flex-basis: 100%;
  min-width: 0;
  width: 100%;
  max-width: none;
  /* Span both grid columns (label + toggle) of the parent .has-child row */
  grid-column: 1 / -1;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
  /* Left rail + indent groups the children visually under their parent */
  border-left: 2px solid var(--gp-border);
  margin: var(--gp-space-2xs) 0 var(--gp-space-s) var(--gp-space-s);
  padding: 0 0 0 var(--gp-space-m);
  position: static;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:has(> .wp-block-navigation__submenu-icon[aria-expanded="true"]) > .wp-block-navigation__submenu-container {
  display: block;
}

/* Submenu-Items */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.5rem 0;
  min-height: var(--gp-touch);
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  border-left: 0;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: transparent;
  color: var(--gp-green);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
  background: transparent;
  color: var(--gp-green);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* ----- Mobile flyout: call CTA -----
   The last nav item (.gp-nav-cta, tel: link) is rendered in the overlay as a
   green full-width button with a phone icon -- a clear primary action on
   mobile. Hidden on desktop (the number is in the topbar); see the desktop
   media query.
   position:sticky bottom -> stays in view even on short viewports (otherwise
   the CTA slips below the fold with many menu items); the white background
   masks entries scrolling behind it. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.gp-nav-cta {
  position: sticky;
  bottom: 0;
  /* The green button stands clearly apart on its own, so no extra divider is
     needed -- the generic top-level borders are dropped to avoid an empty
     "ghost row" between the last menu item and the button.
     Breathing room above the button MUST be padding, not margin: a sticky
     element's margin area is transparent, so with margin-top the preceding
     row (KONTAKT) scrolls up into that gap and shows through above the green
     button. Folding the gap into the (white) padding makes the whole band
     behind the button opaque, so list items scroll cleanly out of sight. The
     bottom padding extends the white backing past the button into the safe
     area so nothing peeks below it either. */
  margin-top: 0;
  padding-top: var(--gp-space-m);
  padding-bottom: var(--gp-space-m);
  border-top: 0;
  border-bottom: 0;
  background: var(--gp-bg-white);
}

/* Opaque white shield behind the sticky CTA. The <li>'s own background only
   covers the content column and stops at the overlay's inner padding, so menu
   rows still peek through above and to the sides as they scroll past. This
   ::before bleeds the white across the FULL overlay width (negative inset =
   the container's --gp-space-m padding) and well above the button, so every
   list item disappears completely behind it instead of overlapping.

   z-index lifts the whole sticky CTA (shield + button) above the static
   sibling rows that scroll up behind it. Do NOT use `isolation: isolate`
   here: it traps the shield inside the CTA's own stacking context, so it can
   only paint over the CTA's descendants -- the sibling <li> rows stay outside
   it and show THROUGH the button (the see-through bug). A plain z-index keeps
   the shield in the shared context where it can cover those rows. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.gp-nav-cta {
  z-index: 1;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.gp-nav-cta::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: calc(-1 * var(--gp-space-m));
  left: calc(-1 * var(--gp-space-m));
  right: calc(-1 * var(--gp-space-m));
  background: var(--gp-bg-white);
}

/* Button content rides above the shield within the CTA's own context. */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .gp-nav-cta .wp-block-navigation-item__content {
  position: relative;
  z-index: 1;
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .gp-nav-cta .wp-block-navigation-item__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gp-space-s);
  /* border-box: otherwise width:100% + padding overflows the overlay and the
     button pushes past the right screen edge */
  box-sizing: border-box;
  width: 100%;
  min-height: var(--gp-touch);
  padding: var(--gp-btn-py) var(--gp-btn-px);
  border-radius: var(--gp-radius-lg);
  background: var(--gp-green);
  color: var(--gp-text-on-dark);
  font: 700 var(--gp-btn-fs)/1 var(--gp-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: var(--gp-trans-btn);
}

/* Phone icon before the label (follows currentColor) */
.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .gp-nav-cta .wp-block-navigation-item__content::before {
  content: '';
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  background-color: currentColor;
  -webkit-mask: center / contain no-repeat;
  mask: center / contain no-repeat;
  -webkit-mask-image: var(--gp-icon-phone);
  mask-image: var(--gp-icon-phone);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .gp-nav-cta .wp-block-navigation-item__content:hover {
  background: var(--gp-green-hover);
  color: var(--gp-text-on-dark);
}

.gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open .gp-nav-cta .wp-block-navigation-item__content:focus-visible {
  background: var(--gp-green-hover);
  color: var(--gp-text-on-dark);
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

/* Disable the entry animation for reduced motion */
@media (prefers-reduced-motion: reduce) {
  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
    animation: none;
  }
}

/* ----- Desktop from 1024px: single row, dropdowns ----- */
@media (min-width: 1024px) {
  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-open,
  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-close {
    display: none !important;
  }

  /* Call CTA is mobile-only -- on desktop the number is in the topbar */
  .gp-nav.wp-block-navigation .wp-block-navigation-item.gp-nav-cta {
    display: none !important;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container:not(.is-menu-open),
  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container.hidden-by-default {
    display: block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    inset: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
    opacity: 1 !important;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-dialog,
  .gp-nav.wp-block-navigation .wp-block-navigation__responsive-container-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
    border-right: 1px solid var(--gp-border-strong);
    padding: 0 0.85rem; /* nav-item spacing; no matching token available */
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item:last-child {
    border-right: 0;
    padding-right: 0;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    min-width: 240px;
    background: var(--gp-bg-white);
    border: 1px solid var(--gp-border-soft);
    border-top: 3px solid var(--gp-green);
    border-radius: 0 0 var(--gp-radius-md) var(--gp-radius-md);
    box-shadow: var(--gp-shadow-dropdown);
    padding: 0.4rem 0;
    /* Subtle fade-in motion; WP controls visibility/opacity, we add the
       slide. Slightly offset upward when closed. */
    transform: translateY(-0.5rem);
    transition: opacity var(--gp-trans-fast), transform var(--gp-trans-fast);
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item.has-child:hover > .wp-block-navigation__submenu-container.wp-block-navigation-submenu,
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item.has-child:focus-within > .wp-block-navigation__submenu-container.wp-block-navigation-submenu {
    transform: translateY(0);
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item {
    border-right: 0;
    padding: 0;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 0.55rem 1.1rem;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    background: var(--gp-green-tint);
    color: var(--gp-green-dark);
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
    background: var(--gp-green-tint);
    color: var(--gp-green-dark);
    outline: var(--gp-focus-width) solid var(--gp-focus-color);
    outline-offset: var(--gp-focus-offset);
  }

  /* Top level: underline indicator on hover + active page.
     scaleX grows from the left; --gp-trans-fast => reduced-motion = instant. */
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 2px;
    background: var(--gp-green);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--gp-trans-fast);
  }

  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover::after,
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item[aria-current] > .wp-block-navigation-item__content::after,
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content[aria-current]::after,
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content.gp-nav-ancestor::after {
    transform: scaleX(1);
  }
}

/* Narrower desktop width (1024-1280px): more compact nav to fit one row */
@media (min-width: 1024px) and (max-width: 1280px) {
  .gp-nav.wp-block-navigation .wp-block-navigation__container > .wp-block-navigation-item {
    padding-inline: 0.6rem; /* compact spacing; no matching token available */
  }

  .gp-nav.wp-block-navigation .wp-block-navigation-item__content {
    font-size: 0.76rem;
    letter-spacing: 0.01em;
  }
}

/* ===== Unified column gap for text/visual splits (desktop) =====
   WP renders the block gap (spacing|40) as BOTH row and column gap on
   wp:columns, which leaves only ~16-32px between a text column and the
   image/feature column next to it -- too tight on wide screens, where the
   two columns then read as one block. We widen the *column* gap to a single
   consistent value (--gp-space-xl) for the plain text/visual splits and the
   media-split component. Card/tile grids set their own gap and are excluded
   so their tighter, intentional spacing is preserved. Only >=782px: below
   that the columns stack (column gap is irrelevant, row gap stays as-is). */
@media (min-width: 782px) {
  .wp-block-columns.are-vertically-aligned-center:not(.gp-cards):not(.gp-cards-projekte):not(.gp-tiles):not(.gp-feature):not(.gp-usp):not(.gp-stat-row):not(.gp-contact-row),
  .wp-block-columns.are-vertically-aligned-top:not(.gp-cards):not(.gp-cards-projekte):not(.gp-tiles):not(.gp-feature):not(.gp-usp):not(.gp-stat-row):not(.gp-contact-row),
  .wp-block-columns.gp-media-split {
    column-gap: var(--gp-space-xl);
  }
}

/* ===== Feature grid vertical anchor (home "unsere Systeme", desktop) =====
   The left column leads with a small eyebrow above the H2; the right column's
   feature grid is its only child, so WP's :where(.is-layout-flow) > :first-child
   reset zeroes its top margin and the first icon row aligns with the eyebrow.
   Offset by the eyebrow's footprint (line height + its margin, ~2.15rem) so the
   first row lines up with the H2 instead. The .wp-block-column context beats
   the :where() reset (specificity 0). */
@media (min-width: 782px) {
  .wp-block-column .gp-features {
    margin-top: 2.15rem;
  }
}