/*
  ============================================================
  GEPVOLT Layout - sections, cards, hero, USP, features
  ============================================================
  All design tokens come from gp-variables.css (loaded first).

  Convention: our own components are targeted exclusively via gp-* classes
  or generic element selectors -- no coupling to WordPress block classes.
  (The only exception, the navigation block, is isolated in
  gp-wp-bridge.css.)
*/

/* ===== Section rhythm (vertical spacing between page sections) =====
   Single source of truth for the space above/below every full-width <section>.
   Pages add .gp-section to the section group instead of setting inline
   padding-top/bottom -- so the whole site's vertical rhythm is one token, and
   it scales fluidly (smaller on phones, full on desktop). Modifiers cover the
   two deliberate exceptions to the default. */
.gp-section {
  padding-block: var(--gp-section-space);
}

/* ===== Section heading rhythm (site-wide standard) =====
   A section's H2 introduces the content below it, so it needs a clear,
   consistent gap beneath — the previous default sat the content too close.
   Scoped to the section-heading class only (per design decision), so card
   titles (H3) and other headings keep their own local spacing.
   When an eyebrow precedes the H2, the eyebrow's own margin-bottom
   (--gp-space-s) keeps that pairing tight; this rule governs only the gap
   BELOW the heading. */
.gp-section > h2,
.gp-section > .wp-block-heading {
  margin-bottom: var(--gp-heading-gap);
}

/* Form bands (sections carrying a .gp-contact-row): the intro line under the
   H2 is a subtitle, not section content — couple the pair tightly instead of
   the full heading gap (customer feedback 2026-07-05: "Abstand geringer, wie
   sonst auch"). Only the band-level H2; in-column H2s keep default margins. */
.gp-section:has(.gp-contact-row) > h2 {
  margin-bottom: var(--gp-space-s);
}

/* Form bands run on the compact section rhythm — the form card carries its
   own generous inner padding, so the full section space read as dead air
   above the heading (customer feedback 2026-07-05: "auch oberhalb"). */
.gp-section:has(.gp-contact-row) {
  padding-block: var(--gp-section-space-compact);
}

/* Compact bands: USP strip, slim section intros -- less vertical weight. */
.gp-section--compact {
  padding-block: var(--gp-section-space-compact);
}

/* Spacious: hero / lead statement sections that carry their own weight. */
.gp-section--spacious {
  padding-block: var(--gp-section-space-spacious);
}

/* Join two same-background sections into one visual band: the first drops its
   bottom padding, the second drops its top padding, so the boundary carries a
   single rhythm instead of stacking both sections' full padding (which left a
   ~11rem void). Used on /projekte/ where the pipeline-figure boxes are really
   the lead-in to the Referenzprojekte grid below them. */
.gp-section--joined-bottom {
  padding-bottom: 0;
}

.gp-section--joined-top {
  padding-top: var(--gp-section-space-compact);
}

/* ===== Link contrast on dark sections =====
   gp-on-dark is assigned to sections with a dark (navy) background.
   Buttons (gp-btn*) are excluded. */
.gp-on-dark a:not(.gp-btn) {
  color: var(--gp-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-on-dark a:not(.gp-btn):hover {
  color: var(--gp-green-hover);
}

/* ===== Solution tiles (card look) =====
   gp-cards = column wrapper, gp-card = single card.
   Image flush at the top, text with padding, button at the bottom edge. */
.gp-cards {
  gap: 1.5rem;
  align-items: stretch;
}

.gp-card {
  background: var(--gp-bg-white);
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
  display: flex;
  flex-direction: column;
  transition: var(--gp-trans-move);
}

.gp-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 63, 94, 0.14);
}

.gp-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 63, 94, 0.14);
}

/* Full-bleed image at the top, then a text block with an identical --gp-space-m
   inset on EVERY remaining side (top/left/right/bottom), exactly like the gp-tile
   body. The inset is owned by the card edges -- not scattered across each child --
   so the left text edge lines up with itself top-to-bottom and the padding reads
   as uniform regardless of how many lines the title or copy run.
   Implementation note: the markup has no body wrapper (figure + h3 + p are direct
   children), so the side inset lives on the text children while the top/bottom
   inset is carried by the first/last text child via margins. */
.gp-card > figure {
  margin: 0;
}

.gp-card > figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.gp-card > h3 {
  padding: 0 var(--gp-space-m);
  margin: var(--gp-space-m) 0 var(--gp-space-s);
  color: var(--gp-navy);
  /* Break long German compounds cleanly at syllable boundaries (lang="de" via WP),
     instead of hard breaks in the middle of a word; text-wrap balances the lines. */
  hyphens: auto;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.gp-card > p {
  padding: 0 var(--gp-space-m);
  margin: 0;
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* The bottom inset is owned by whichever text child is last (copy, or title when
   there is no copy). When a button follows, it owns the bottom inset instead. */
.gp-card > p:last-child,
.gp-card > h3:last-child {
  margin-bottom: var(--gp-space-m);
}

.gp-card > .gp-btn {
  margin: var(--gp-space-m) var(--gp-space-m) var(--gp-space-m);
  margin-top: auto;
}

@media (max-width: 781px) {
  .gp-cards {
    gap: 1.25rem;
  }
}

/* Five solution cards: 2-column tablet, single column mobile (no cramped 5-up). */
@media (max-width: 1200px) {
  .gp-cards {
    flex-wrap: wrap;
  }

  .gp-cards > * {
    flex-basis: calc(50% - 0.75rem) !important;
    flex-grow: 0;
  }
}

@media (max-width: 1200px) and (min-width: 640px) {
  .gp-cards > *:last-child:nth-child(odd) {
    flex-basis: 100% !important;
    max-width: calc(50% - 0.75rem);
    margin-inline: auto;
  }
}

@media (max-width: 639px) {
  .gp-cards > * {
    flex-basis: 100% !important;
  }
}

/* ===== Tile (shared single-link card) =====
   Site-wide component for the "whole card is ONE link" pattern: large hit
   target, single tab stop, clear affordance. Image on top, optional eyebrow
   (e.g. a date), title, teaser, arrow CTA pinned to the bottom. Used by the
   home "Unsere Lösungen" grid and the press newsroom grid. Intentionally
   distinct from the legacy .gp-card (figure + heading + button, separate tab
   stops) that other pages still rely on. */

/* --- Grid wrappers ---
   gp-tile-grid--fixed : 3+3 layout (6 tracks, each tile spans 2). Used where a
                         fixed, balanced count reads as a curated set (home).
   gp-tile-grid--auto  : auto-filling columns for an unknown count (press). */
.gp-tile-grid {
  list-style: none;
  margin: var(--gp-space-l) auto 0;
  padding: 0;
  max-width: var(--gp-wide-width);
  display: grid;
  gap: var(--gp-space-l) var(--gp-space-m);
}

.gp-tile-grid--fixed {
  grid-template-columns: repeat(6, 1fr);
}

.gp-tile-grid--fixed > li {
  grid-column: span 2;
}

.gp-tile-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* --- Tile --- */
.gp-tile {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  background: var(--gp-bg-white);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
  transition: var(--gp-trans-move);
}

.gp-tile:hover,
.gp-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 63, 94, 0.14);
}

/* Press feedback -- the only state touch devices get (they have no :hover).
   Settles the tile back toward the surface so a tap feels physical. */
.gp-tile:active {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(28, 63, 94, 0.1);
}

.gp-tile:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color);
  outline-offset: var(--gp-focus-offset);
}

.gp-tile__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--gp-bg-light);
}

.gp-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gp-trans-slow);
}

.gp-tile:hover .gp-tile__media img {
  transform: scale(1.04);
}

.gp-tile__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--gp-space-m);
}

/* Optional kicker above the title (e.g. a publish date). */
.gp-tile__eyebrow {
  display: block;
  margin-bottom: var(--gp-space-xs);
  color: var(--gp-green-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gp-tile__title {
  margin: 0;
  /* 1.375rem = brand "large" base size (no fluid growth). Fits the wider
     3+3 tiles on max. two calm lines. */
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--gp-navy);
  /* Break only at the &shy; points set in the markup (manual) -- keeps long
     German compounds breaking in a controlled way instead of e.g. "Lad-". */
  hyphens: manual;
  overflow-wrap: break-word;
  text-wrap: balance;
}

.gp-tile__text {
  margin: var(--gp-space-s) 0 0;
  color: var(--gp-text-body);
  line-height: 1.5;
}

/* Clamp longer teasers (e.g. press excerpts) so tiles stay even. Opt-in so the
   short home teasers are never truncated. */
.gp-tile__text--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.gp-tile__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  /* Pin CTA to the bottom across all tiles, regardless of teaser length. */
  margin-top: auto;
  padding-top: var(--gp-space-m);
  /* line-height:1 leaves no descender room, so the arrow row sits tight
     against the body padding -- nudge it up off the floor for even optical
     breathing room top vs. bottom. */
  padding-bottom: var(--gp-space-xs);
  color: var(--gp-green);
  font: 700 var(--gp-btn-fs)/1 var(--gp-font);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gp-tile__cta::after {
  content: '\2192';
  transition: transform var(--gp-trans-fast);
}

.gp-tile:hover .gp-tile__cta,
.gp-tile:focus-visible .gp-tile__cta {
  color: var(--gp-green-dark);
}

.gp-tile:hover .gp-tile__cta::after,
.gp-tile:focus-visible .gp-tile__cta::after {
  transform: translateX(0.25rem);
}

/* Desktop: a short last row stays LEFT-aligned so the grid reads as one
   continued list. Deliberate: an earlier version centered the rest row via
   nth-child track offsets - removed on request (2026-07-03), do not
   reintroduce. */

/* Tablet: 2-up (fixed grid resets to one column each). */
@media (max-width: 1023px) {
  .gp-tile-grid--fixed { grid-template-columns: 1fr 1fr; }
  .gp-tile-grid--fixed > li { grid-column: auto; }
}

@media (max-width: 639px) {
  .gp-tile-grid--fixed,
  .gp-tile-grid--auto { grid-template-columns: 1fr; }
}

/* Respect motion preferences: disable hover transforms for reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .gp-tile:hover,
  .gp-tile:focus-visible,
  .gp-tile:active,
  .gp-tile:hover .gp-tile__media img,
  .gp-tile:hover .gp-tile__cta::after,
  .gp-tile:focus-visible .gp-tile__cta::after {
    transform: none;
  }
}

/* ===== Eyebrow (small uppercase kicker above a heading) =====
   Reusable label used across sections; replaces ad-hoc inline styles. */
.gp-eyebrow {
  margin-bottom: var(--gp-space-s);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* ===== Feature grid with icon mask (home "unsere Systeme") =====
   Semantic <ul> on a 2-up CSS grid. Icons are CSS mask tokens tinted with
   currentColor -> crisp, themeable, no extra requests. */
.gp-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* row-gap (--gp-space-l) is slightly larger than the column-gap so the two
     rows still read as one group, in proportion to the icon->title->text
     rhythm inside each item. */
  gap: var(--gp-space-l) var(--gp-space-m);
}

.gp-feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-s);
  min-width: 0;
}

.gp-feature-item__icon {
  flex: none;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--gp-green-tint);
}

/* The icon glyph: a 32px square painted by masking the green over the token. */
.gp-feature-item__icon::before {
  content: "";
  width: 32px;
  height: 32px;
  background-color: var(--gp-green);
  -webkit-mask: var(--gp-feature-icon) center / contain no-repeat;
  mask: var(--gp-feature-icon) center / contain no-repeat;
}

/* Per-item icon assignment via modifier class. Not data-* attributes:
   WP's KSES strips data-* from wp:html spans, but keeps classes. */
.gp-feature-item--industry   { --gp-feature-icon: var(--gp-icon-industry); }
.gp-feature-item--grid       { --gp-feature-icon: var(--gp-icon-grid); }
.gp-feature-item--charge     { --gp-feature-icon: var(--gp-icon-charge); }
.gp-feature-item--renewables { --gp-feature-icon: var(--gp-icon-renewables); }
.gp-feature-item--commissioning { --gp-feature-icon: var(--gp-icon-commissioning); }
.gp-feature-item--yield         { --gp-feature-icon: var(--gp-icon-yield); }
.gp-feature-item--assignment    { --gp-feature-icon: var(--gp-icon-assignment); }
.gp-feature-item--landcharge    { --gp-feature-icon: var(--gp-icon-landcharge); }
.gp-feature-item--collateral    { --gp-feature-icon: var(--gp-icon-collateral); }
.gp-feature-item--insurance     { --gp-feature-icon: var(--gp-icon-insurance); }
.gp-feature-item--permit        { --gp-feature-icon: var(--gp-icon-permit); }
.gp-feature-item--trustee       { --gp-feature-icon: var(--gp-icon-trustee); }

.gp-feature-item__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  color: var(--gp-text-heading);
}

.gp-feature-item__text {
  margin: var(--gp-space-2xs) 0 0;
  color: var(--gp-text-body);
  line-height: 1.5;
  overflow-wrap: break-word;
}

/* Tablet zone: the WP columns block keeps the 42/58 split down to 781px, so
   between ~782px and that point the feature column is too narrow for 2-up.
   Drop to a single column there so each item gets the full (narrow) width. */
@media (min-width: 782px) and (max-width: 920px) {
  .gp-features:not(.gp-features--3) { grid-template-columns: 1fr; }
}

/* Stack to a single column on small screens. */
@media (max-width: 639px) {
  .gp-features { grid-template-columns: 1fr; }
}

/* Full-width 3-up variant (e.g. the cashflow drivers), centered as its own
   section rather than inside a narrow product column. */
.gp-features--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  max-width: var(--gp-wide-width);
  margin-inline: auto;
  margin-top: var(--gp-space-l);
}
.gp-features--3 .gp-feature-item {
  align-items: center;
  text-align: center;
  gap: var(--gp-space-2xs);
}
.gp-features--3 .gp-feature-item__title,
.gp-features--3 .gp-feature-item__text {
  max-width: 100%;
  overflow-wrap: break-word;
}
.gp-features--3 .gp-feature-item__icon { margin-bottom: var(--gp-space-2xs); }
@media (min-width: 640px) and (max-width: 920px) {
  .gp-features--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .gp-features--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Full-width 4-up tile variant (e.g. the investment "Sicherheitskonzept"
   trust wall): centered, icon-on-top, stepped 4 -> 2 -> 1 across breakpoints. */
.gp-features--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: var(--gp-wide-width);
  margin-inline: auto;
  margin-top: var(--gp-space-l);
}
.gp-features--4 .gp-feature-item {
  align-items: center;
  text-align: center;
  gap: var(--gp-space-2xs);
}
.gp-features--4 .gp-feature-item__title,
.gp-features--4 .gp-feature-item__text {
  max-width: 100%;
  overflow-wrap: break-word;
}
.gp-features--4 .gp-feature-item__icon { margin-bottom: var(--gp-space-2xs); }
@media (min-width: 640px) and (max-width: 920px) {
  .gp-features--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 639px) {
  .gp-features--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Each 4-up tile gets a subtle card frame so the grid reads as a "trust wall"
   rather than a loose icon list. Light surface by default; the hover lift adds
   the tactile, scannable feel a security/trust section should carry. */
.gp-features--4 .gp-feature-item {
  padding: var(--gp-space-m) var(--gp-space-s);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-xl);
  background: var(--gp-bg-white);
  transition: var(--gp-trans-move);
}
.gp-features--4 .gp-feature-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(28, 63, 94, 0.08);
}

/* The investment "Sicherheitskonzept" trust wall, aligned to the solutions-page
   card standard (.gp-tiles, see "Tile grids" below): white surface + hairline
   border + the shared soft elevation instead of a tinted fill, icon as a solid
   green 76px disc with a white 40px glyph. Scoped to .gp-security so the home
   "unsere Systeme" feature list (frozen) keeps its own quieter look. The
   resting elevation replaces the hover lift — tiles are static cards, not
   links (parity with .gp-tiles). */
.gp-security .gp-features--4 .gp-feature-item {
  background: var(--gp-bg-white);
  border-color: var(--gp-border);
  padding: var(--gp-space-l) var(--gp-space-m);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}
.gp-security .gp-features--4 .gp-feature-item:hover {
  transform: none;
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}
.gp-security .gp-feature-item__icon {
  width: 76px;
  height: 76px;
  background: var(--gp-green);
}
.gp-security .gp-feature-item__icon::before {
  width: 40px;
  height: 40px;
  background-color: var(--gp-bg-white);
}

/* On dark (navy) sections: brighten the icon disc + glyph and invert the tile
   frame so the grid keeps its contrast if reused on a navy background. */
.gp-on-dark .gp-feature-item__icon {
  background: rgba(105, 175, 75, 0.18);
}
.gp-on-dark .gp-feature-item__icon::before {
  background-color: var(--gp-green-hover);
}
.gp-on-dark .gp-features--4 .gp-feature-item {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
}
.gp-on-dark .gp-feature-item__title { color: #fff; }
.gp-on-dark .gp-feature-item__text  { color: rgba(255, 255, 255, 0.82); }

/* Checklists in project cards: full card width, more compact */
.gp-card .gp-checklist {
  margin: 0;
  max-width: none;
  font-size: 0.875rem;
}

.gp-card .gp-checklist li {
  padding: 0.2rem 0 0.2rem 1.65rem;
  line-height: 1.45;
  hyphens: auto;
  overflow-wrap: break-word;
}

.gp-card .gp-checklist li::before {
  width: 1.1rem;
  height: 1.1rem;
  top: 0.38rem;
  background-size: 0.65rem;
}

/* Projects (/projekte/): grid override in gp-wp-bridge.css; card layout + status badges here. */

.gp-section-intro--on-dark {
  text-align: center;
  color: var(--gp-text-on-dark);
  margin-bottom: 2.5rem;
}

.gp-section-intro--on-dark h2 {
  color: var(--gp-text-on-dark);
  margin: 0 0 0.75rem;
}

.gp-section-intro--on-dark p {
  max-width: 42rem;
  margin: 0 auto;
  opacity: 0.92;
  line-height: 1.55;
}

/* Title on its own full-width line, status badge stacked beneath it.
   The long "In Baurechtsentwicklung" badge would otherwise squeeze the title
   into a narrow flex track and force ugly mid-word breaks ("Markneukirc-hen")
   on narrow cards. Stacking keeps every title on one clean line and gives all
   cards an identically aligned header regardless of title or badge length. */
.gp-project-card__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  /* Even inset from the image above and the checklist below, matching the
     1.25rem side padding so the card body reads as one consistent block. */
  padding: 1.1rem 1.25rem 0;
  margin: 0;
}

/* Product eyebrow + title read as one tight group; the status badge gets a
   touch more separation below so the header groups as: [product/name] / [status]. */
.gp-project-card__header .gp-badge {
  margin-top: 0.2rem;
}

.gp-project-card__header h3 {
  margin: 0;
  min-width: 0;
  padding: 0;
  color: var(--gp-navy);
  font-size: 1.0625rem;
  line-height: 1.3;
  /* Wrap only between words; never hyphenate mid-word. */
  hyphens: manual;
  overflow-wrap: break-word;
}

/* Product category as a green eyebrow above the project name -- surfaces WHAT
   the project is (Stand-Alone-Batteriespeicher vs. batteriegestützte
   Ladeinfrastruktur) as the first thing read, instead of burying it as the
   last, equal-weight checklist item. Reuses the site-wide green-accent eyebrow
   language; the status badge stays below the title. Sits tight to the title. */
.gp-project-card__product {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.25;
  color: var(--gp-green-dark);
}

.gp-badge {
  flex-shrink: 0;
  align-self: flex-start;
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
  padding: 0.35rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
}

.gp-badge--bau {
  background: rgba(105, 175, 75, 0.15);
  color: var(--gp-green-dark);
}

.gp-badge--planung {
  background: transparent;
  color: var(--gp-navy);
  border: 1px solid rgba(28, 63, 94, 0.35);
}

.gp-project-card__body {
  padding: 0.9rem 1.25rem 1.25rem;
  margin-top: 0;
}

.gp-project-card__body .gp-checklist {
  margin: 0;
  padding: 0;
}

@media (max-width: 480px) {
  .gp-badge {
    white-space: normal;
  }
}

/* Pipeline metrics (two navy boxes) */
.gp-stat-row {
  gap: 1.5rem;
}

/* Stat values mix numbers ("12 MW") and words ("Brandenburg") in one row.
   Number values (xx-large) stay the loud display size; the longer word values
   (x-large) sit one step smaller so they read calmly and never crowd the card.
   Both clamp fluidly and never split mid-word. */
.gp-stat-row .wp-block-column > .wp-block-heading {
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}
/* !important to override WP's preset font-size classes (shipped !important). */
.gp-stat-row .wp-block-column > .has-xx-large-font-size {
  font-size: clamp(2rem, 3vw, 2.75rem) !important;
}
.gp-stat-row .wp-block-column > .has-x-large-font-size {
  font-size: clamp(1.35rem, 1.9vw, 1.6rem) !important;
}

/* Tablet band: WP core only stacks columns at <=781px, so the four cards stay
   in one cramped row up to ~900px. Reflow them 2-up first (matches the hero
   stat grid, which also goes 2-up until 900px). */
@media (min-width: 782px) and (max-width: 900px) {
  .gp-stat-row {
    flex-wrap: wrap;
  }
  .gp-stat-row > .wp-block-column {
    flex-basis: calc(50% - 0.75rem);
  }
}

@media (max-width: 781px) {
  .gp-stat-row {
    flex-direction: column;
  }
}

/* ===== Headline stat (single big figure + claim) =====
   One loud number on the left, the claim on the right separated by a green
   rule. Mirrors the PROD "300 / Über 300 Standorte" block but keeps the figure
   as an <h3> (no number-as-heading hierarchy break) and stays static. Lives in
   a gp-on-dark section, so colours inherit from the surrounding text. */
.gp-stat-feature {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  flex-wrap: wrap;
  text-align: left;
}
.gp-stat-feature__figure {
  margin: 0;
  flex: 0 0 auto;
  color: var(--gp-green);
  font-size: clamp(3.5rem, 8vw, 6rem);
  line-height: 1;
  font-weight: 800;
}
.gp-stat-feature__claim {
  margin: 0;
  flex: 1 1 18rem;
  max-width: 32rem;
  padding-left: clamp(1.25rem, 3vw, 2rem);
  border-left: 3px solid var(--gp-green);
}

/* Stack the figure above the claim on narrow screens; drop the rule so the
   border doesn't sit on the wrong edge once the layout is vertical. */
@media (max-width: 600px) {
  .gp-stat-feature {
    flex-direction: column;
    text-align: center;
  }
  .gp-stat-feature__claim {
    padding-left: 0;
    border-left: 0;
  }
}

/* ===== Split-Hero ===== */
.gp-hero .gp-hero-title {
  letter-spacing: 0.5px;
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 2.4vw, 2.375rem);
  line-height: 1.2;
}

@media (max-width: 600px) {
  .gp-hero .gp-hero-title {
    font-size: clamp(1.5rem, 7vw, 2rem);
    line-height: 1.15;
  }
}

.gp-hero-media {
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
  background: var(--gp-navy);
  box-shadow: 0 18px 40px rgba(15, 34, 51, 0.35);
}

/* Home hero video: less side cropping by focusing on the center */
.gp-hero-media .wp-block-cover__video-background {
  object-position: center center;
}

/* On narrow screens the block's inline min-height:400px forces the
   16:9 video to overscale, cropping its left/right edges. Drop the
   enforced height and give the container the video's own 16:9 ratio, so
   the video fills the full width in its natural proportions and stays
   completely visible (no side cropping). Both need !important to beat
   the cover block's inline min-height and WP core's cover styles. */
@media (max-width: 600px) {
  .gp-hero .gp-hero-media {
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

@media (min-width: 1024px) {
  .gp-hero .gp-hero-media {
    min-height: clamp(280px, 28vw, 360px) !important;
  }
}

/* Content wrapper of the hero media (caption at the bottom edge) */
.gp-hero-media > div {
  width: 100%;
  align-self: flex-end;
}

.gp-hero-caption {
  display: inline-block;
  margin: 0;
  padding: 0.5rem 0.9rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--gp-navy);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: var(--gp-radius-md);
}

/* Hide the hero video for reduced motion; the media's navy
   background remains as a fallback. */
@media (prefers-reduced-motion: reduce) {
  .gp-hero-media video {
    display: none;
  }

  .gp-hero-media {
    background-image: url('/wp-content/uploads/2026/04/gepvolt-eigenproduktion-batteriespeicher-container-01.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }
}

@media (max-width: 781px) {
  .gp-hero .wp-block-columns {
    flex-direction: column;
    gap: 2rem;
  }

  .gp-hero .wp-block-column {
    flex-basis: 100% !important;
  }

  .gp-hero-media {
    min-height: 260px !important;
  }

  .gp-hero-caption {
    font-size: 0.75rem;
  }
}

/* ===== Feature items with icon circle (products/systems) =====
   gp-feature = row wrapper; the icon figure is the only <figure>. */
.gp-feature figure {
  width: 60px;
  height: 60px;
  margin: 0 0 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(105, 175, 75, 0.16);
  border-radius: 50%;
}

.gp-feature figure img {
  width: 32px !important;
  height: auto;
}

.gp-feature {
  gap: 1.25rem;
}

.gp-feature > .wp-block-column {
  min-width: 0;
}

@media (min-width: 640px) {
  .gp-feature:not(.gp-tiles) > .wp-block-column {
    flex-basis: calc(50% - 0.625rem) !important;
  }
}

@media (max-width: 639px) {
  .gp-feature > .wp-block-column,
  .gp-tiles.gp-feature > .wp-block-column {
    flex-basis: 100% !important;
  }
}

.gp-feature p {
  margin-top: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.gp-contact-row {
  margin-top: 1.5rem;
  gap: 2rem;
}

.gp-contact-logo {
  /* Generous, calm gap below the logo sets the vertical rhythm for the
     whole contact column (logo -> subheading -> contact groups). */
  margin: 0 0 var(--gp-space-l);
}

.gp-contact-logo img {
  display: block;
  height: auto;
  /* Fluid: larger presence on desktop, never wider than the column on
     small screens. Overrides the inline width from the block. */
  width: clamp(200px, 60%, 240px);
  max-width: 100%;
}

/* Mobile (columns stacked): drop the info column (logo + phone/email/address)
   in the dark home variant — stacked above the form it only pushes the primary
   action down, and the footer right below repeats every detail. The light
   variant (dedicated contact page) keeps it: there the details ARE the page.
   Desktop keeps the two-column layout (PROD). */
@media (max-width: 781px) {
  .gp-on-dark .gp-contact-row .wp-block-column:first-child {
    display: none;
  }
}

/* Steady rhythm inside the contact column: even spacing between the
   subheading and each contact group, tighter label-to-value coupling. */
.gp-contact-row h3 {
  margin-bottom: var(--gp-space-m);
}

.gp-contact-row p {
  margin-block: 0 var(--gp-space-m);
  line-height: 1.6;
}

.gp-contact-row p:last-child {
  margin-bottom: 0;
}

.gp-contact-row a:not(.gp-btn) {
  color: var(--gp-green);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-contact-row a:not(.gp-btn):hover {
  color: var(--gp-green-dark);
}

@media (max-width: 781px) {
  .gp-contact-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .gp-contact-row > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ===== Contact card (Kontaktseite sidebar: "Direkter Draht zum Team") =====
   A peer card to the form: same white surface, radius and soft navy shadow as
   .gp-card, so the direct-contact channel reads as an equal offer, not an
   afterthought. Icon tiles reuse the green-tint surface from the components. */
.gp-contact-card {
  background: var(--gp-bg-white);
  border-radius: var(--gp-radius-xl);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.gp-contact-card__title {
  margin: 0 0 0.35rem;
  font: 700 1.15rem/1.3 var(--gp-font);
  color: var(--gp-navy);
}

.gp-contact-card__note {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  color: var(--gp-text-muted);
}

.gp-contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gp-contact-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-top: 1px solid #eef1f4;
}

.gp-contact-item:first-child {
  border-top: none;
  padding-top: 0;
}

.gp-contact-item:last-child {
  padding-bottom: 0;
}

.gp-contact-item__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--gp-radius-md);
  background: var(--gp-green-tint);
  color: var(--gp-green-dark);
  display: grid;
  place-items: center;
}

.gp-contact-item__icon svg {
  width: 19px;
  height: 19px;
}

.gp-contact-item__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.gp-contact-item__label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gp-text-muted);
}

/* Scoped override: card links are navy + underline-on-hover, not the global
   green-underlined .gp-contact-row link style. */
.gp-contact-card .gp-contact-item__value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gp-navy);
  text-decoration: none;
  line-height: 1.45;
  overflow-wrap: break-word;
}

.gp-contact-card a.gp-contact-item__value:hover {
  color: var(--gp-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-contact-item__value--plain {
  font-weight: 400;
  color: var(--gp-text-body);
}

/* ===== Map (GDPR consent / click-to-load) ===== */
.gp-map-embed {
  position: relative;
  /* Fluid height so the consent box doesn't tower over the adjacent address
     column; floor keeps it usable on phones, ceiling matches the former 340px. */
  height: clamp(240px, 32vw, 340px);
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
}

.gp-map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.gp-map-consent {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
  text-align: center;
  background: var(--gp-bg-muted);
}

.gp-map-consent-text {
  margin: 0;
  max-width: 38ch;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gp-text-body);
}

/* ===== Product collage =====
   1+2 image collage inside a media column (e.g. gruenstrom "Die Lösung",
   mirrors the PROD arrangement): first image spans the full column width as a
   panorama, the following two sit half-width side by side below. aspect-ratio
   + cover unify mixed source formats into one calm block; below 781px the
   collage collapses to a full-width stack. */
.gp-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gp-space-s);
}

.gp-collage > figure {
  margin: 0;
}

.gp-collage > figure:first-child {
  grid-column: 1 / -1;
}

.gp-collage img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.gp-collage > figure:first-child img {
  aspect-ratio: 2 / 1;
}

@media (max-width: 781px) {
  .gp-collage {
    grid-template-columns: 1fr;
  }

  .gp-collage img,
  .gp-collage > figure:first-child img {
    aspect-ratio: 16 / 9;
  }
}

.gp-rounded img {
  border-radius: 12px;
  display: block;
}

/* ===== Product render on a light section =====
   Lift for a product image that carries its own light/white background (e.g. the
   GEPVOLT storage render) placed on a light section. The render already reads as
   a white plate, so we frame it exactly like the .gp-card / .gp-tile surfaces on
   the same page: rounded corners + the shared soft navy-tinted elevation, so it
   sits in the same visual system as the cards instead of floating flush on the
   section. Applied to the figure so the radius clips the image corners. */
.gp-product-shadow img {
  display: block;
  border-radius: var(--gp-radius-xl);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}

/* Cinematic establishing-shot band: crops a wide photo to a flat panorama so a
   full-width location/site shot reads as a calm band, not a towering block.
   object-fit: cover keeps the subject framed; the ratio relaxes on smaller
   viewports where a 21:9 slice would get too thin. */
.gp-media-band img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}

@media (max-width: 781px) {
  .gp-media-band img {
    aspect-ratio: 16 / 9;
  }
}

/* Flanking media in a 3-column band (image | copy | image), e.g. unternehmen
   "Wertschöpfung": the two photos come in mixed source ratios (square vs
   landscape) — crop both to 1:1 so the band reads calm and the copy column
   stays the visual centre. Mobile relaxes to 16:9 so the stacked photos
   don't tower over the copy. */
.gp-flank-media .wp-block-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 781px) {
  .gp-flank-media .wp-block-image img {
    aspect-ratio: 16 / 9;
  }
}

/* ===== Careers job embed (/jobs/) =====
   Interim HRworks iframe wrapper. Constrains width for readability, rounds the
   frame to match .gp-rounded, and keeps a quiet always-visible fallback link
   below in case the embed is blocked (consent, ad blockers, JS off). The frame
   loads directly (src) with native loading="lazy" so it is guaranteed to appear
   without relying on JS; the skeleton sits *behind* it and is simply covered
   once the portal paints (see gp-jobs.js for the extra a11y-tree cleanup). */
.gp-jobs-embed {
  position: relative;
  max-width: var(--gp-wide-width);
  margin-inline: auto;
}

.gp-jobs-embed iframe {
  position: relative;
  z-index: 1;
  display: block;
  border-radius: var(--gp-radius-xl);
}

/* Full list without an inner scrollbar. The HRworks portal sits on another
   origin and emits no postMessage height, so a cross-origin auto-resize is not
   possible — we reserve a generous fixed height per breakpoint instead. The
   portal reflows taller as it narrows (measured content height: ~2950px @1200w,
   ~3970px @768w, ~5610px @390w), so the height is staggered with headroom for a
   few extra postings. The HTML height="1200" is the no-CSS fallback.
   NOTE: revisit if the number of open positions grows a lot, or drop entirely
   once the native HRworks-API list replaces the iframe (post-go-live). */
.gp-jobs-embed iframe {
  height: 3200px; /* desktop: iframe ~1200–1320px wide */
}

@media (max-width: 1023px) {
  .gp-jobs-embed iframe {
    height: 4300px; /* tablet */
  }
}

@media (max-width: 599px) {
  .gp-jobs-embed iframe {
    height: 6000px; /* phone: portal reflows tallest here */
  }
}

/* Placeholder that occupies the reserved frame height until the portal loads.
   Sits *behind* the iframe (z-index) so the loaded portal covers it even if the
   JS load-hook never fires; JS additionally drops it from the a11y tree. */
.gp-jobs-skeleton {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--gp-radius-xl);
  background: var(--gp-bg-light);
  background-image: linear-gradient(
    100deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  background-size: 200% 100%;
  animation: gp-jobs-shimmer 1.4s ease-in-out infinite;
}

.gp-jobs-skeleton__label {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  color: var(--gp-text-muted);
}

@keyframes gp-jobs-shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gp-jobs-skeleton {
    animation: none;
  }
}

.gp-jobs-fallback {
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  color: var(--gp-text-muted);
}

/* WCAG 2.2 SC 2.5.8: give the quiet fallback link a ≥24px hit area without
   turning it into a button. inline-block + vertical padding lifts the target
   height above the inline text line. */
.gp-jobs-fallback a {
  display: inline-block;
  padding-block: 0.25rem;
}

/* ===== Products section (home "Modulare Containerlösungen") =====
   Two-column layout: feature copy on the left, image collage on the right.
   Reuses the shared .gp-eyebrow and .gp-features / .gp-feature-item system;
   only the section layout and the image collage are products-specific. */
.gp-product {
  max-width: var(--gp-wide-width);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: var(--gp-space-2xl);
  align-items: center;
}

.gp-product__title {
  margin: 0 0 var(--gp-space-m);
  color: var(--gp-text-on-dark);
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.2;
  text-wrap: balance;
}

.gp-product__lead {
  margin: 0 0 var(--gp-space-l);
  max-width: 56ch;
  color: var(--gp-text-on-dark);
  line-height: 1.6;
}

/* Space the shared feature grid from the CTA below it. */
.gp-product__intro .gp-features {
  margin-bottom: var(--gp-space-l);
}

.gp-product__cta {
  margin: 0;
}

/* Shared feature item, extended for the products section: PNG brand glyphs
   (no mask token exists for these) and white text on the navy background. */
.gp-feature-item__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.gp-feature-item__icon:has(img)::before {
  content: none;
}

.gp-on-dark .gp-feature-item__title,
.gp-on-dark .gp-feature-item__text {
  color: var(--gp-text-on-dark);
}

/* Collage: one wide image plus a row of two square images below. */
.gp-product__media {
  display: grid;
  gap: var(--gp-space-m);
}

.gp-product__media figure {
  margin: 0;
}

.gp-product__media img {
  display: block;
  width: 100%;
  /* The img tags carry width/height attributes (CLS), so without an explicit
     height the browser sizes from the attribute ratio and ignores the
     aspect-ratio below. height:auto hands sizing back to aspect-ratio. */
  height: auto;
  border-radius: var(--gp-radius-xl);
}

/* Collage crops mirror PROD (gepvolt.com u-section-5): ATU lead ~16/10 with the
   crop anchored near the top (keep container + logos, trim the photo's lower
   part), and the second row sized so both photos share one height. */
.gp-product__media-main img {
  /* Source file is near-square (800x814); PROD shows it at ~1.6:1 anchored 14%
     from the top. */
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center 14%;
}

.gp-product__media-grid {
  display: grid;
  /* PROD widths are 249px : 187px = 4:3 (turquoise wider). Each image keeps its
     own PROD aspect ratio below, which makes both rows exactly equal height
     (4/7 ÷ 1.6 = 3/7 ÷ 1.2) without over-cropping either subject. */
  grid-template-columns: 4fr 3fr;
  gap: var(--gp-space-m);
}

.gp-product__media-grid img {
  object-fit: cover;
  /* PROD biases the crop low so container base / stack feet stay in frame. */
  object-position: center 67%;
}

/* Turquoise container: source 700x381 (1.84:1), PROD box 249x154 (~8/5). */
.gp-product__media-grid figure:first-child img {
  aspect-ratio: 8 / 5;
}

/* Battery stacks: source 1536x1024 (3:2), PROD box 187x154 (~6/5). */
.gp-product__media-grid figure:last-child img {
  aspect-ratio: 6 / 5;
}

/* Stack to one column on tablet/below; media follows the copy.
   (.gp-features handles its own 1-column stacking at 639px.) */
@media (max-width: 1023px) {
  .gp-product {
    grid-template-columns: 1fr;
    gap: var(--gp-space-xl);
  }
}

/* ===== Photo hero (solution/company pages) =====
   Shared hero schema for all gp-hero-cover solution pages, so new pages stay
   consistent:
     - wp:cover, alignfull, layout constrained, minHeight 62vh
     - customGradient linear-gradient(130deg, rgb(28,63,94) 36%,
       rgba(105,175,75,0.3) 70%), dimRatio 100 (navy -> green, readable on the
       left where the left-aligned text sits)
     - contentPosition "center left" (company/utility pages may use
       "center center")
     - CTAs wrapped in .gp-btn-group; secondary CTA uses .gp-btn-secondary
       (white outline + white text per Buttons 2.0 concept) on this dark overlay

   The cover is a full-bleed flex container. To line the hero content up with
   the homepage hero and every alignwide section below, we pad the cover's
   inline edges to the content gutter: the larger of the page gutter or the
   space outside wideSize. The inner container (a flex item) then starts
   exactly on the wide content edge, with no per-page markup. */
.gp-hero-cover {
  padding-inline: max(
    var(--wp--style--root--padding-left, var(--gp-gutter)),
    calc((100vw - var(--wp--style--global--wide-size, 1320px)) / 2)
  );
}

/* Cap the text/CTA blocks at a readable measure. The blocks sit directly
   in the inner container (no extra wrapper), so target them individually. */
.gp-hero-cover > .wp-block-cover__inner-container > :where(h1, h2, p, figure) {
  max-width: 760px;
}

/* On desktop the hero H1 gets a wider measure than the body/CTA blocks, so long
   headlines wrap onto fewer lines while the subline + CTAs keep the readable
   ~760px measure. Only the headline widens; nothing else stretches. */
@media (min-width: 1024px) {
  .gp-hero-cover > .wp-block-cover__inner-container > :where(h1) {
    max-width: 980px;
  }
}

/* The constrained cover layout hands every block auto inline margins (shipped
   with !important by core). Blocks with different measures (H1 980px vs body
   760px) then centre individually, so their left edges no longer line up.
   Left-positioned heroes anchor ALL text blocks to one shared left edge
   instead - at every width (user request 2026-07-03); centered heroes
   (center-center, e.g. Jobs) keep their auto margins. !important required to
   beat core's. */
.gp-hero-cover.is-position-center-left > .wp-block-cover__inner-container > :where(h1, h2, p, figure) {
  margin-left: 0 !important;
}

/* Large screens: the hero text block stays within ~2/3 of the content column,
   so it reads as a compact block against the full-bleed image instead of a
   wide text wall (user request 2026-07-03). Overrides the px measures above
   (same specificity, later in the cascade). */
@media (min-width: 1440px) {
  .gp-hero-cover > .wp-block-cover__inner-container > :where(h1, h2, p, figure) {
    max-width: 66%;
  }
}

/* Center-aligned heroes center that measure; left-aligned heroes (default
   for solution pages) keep it flush left. */
.gp-hero-cover.is-position-center-center > .wp-block-cover__inner-container > :where(h1, h2, p, figure) {
  margin-inline: auto;
}

.gp-hero-cover :where(h1, h2, p) {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

/* Image-less hero variant (e.g. Kontakt): same alignment + navy->green
   gradient as the photo heroes, but compact vertical rhythm and no photo
   text-shadow. Keeps the contact form high on the page. */
.gp-hero-cover--plain {
  min-height: 0;
  padding-block: var(--gp-section-space-compact);
}
.gp-hero-cover--plain :where(h1, h2, p) {
  text-shadow: none;
  /* Balance line lengths so the subline doesn't orphan a word on mobile. */
  text-wrap: balance;
}
.gp-hero-cover--plain .gp-eyebrow {
  /* Eyebrow already carries the green accent; lift it off the headline. */
  margin-bottom: var(--gp-space-xs, 0.5rem);
}

/* ===== Tile grids ("Herausforderungen", "Lösung", "Einsatzbereiche" ...) =====
   gp-tiles on the column wrapper; each column becomes a card.
   Premium card treatment mirroring the home "Lösungen" tiles (.gp-tile):
   a clean white surface separated by a hairline border + soft elevation, not
   by a fill colour. A tinted fill read as a UI-kit box; white-on-elevation is
   the calmer, higher-end look and matches the home page exactly. */
.gp-tiles {
  gap: 1.5rem;
  align-items: stretch;
}

.gp-tiles > * {
  /* Flex column like the home .gp-tile__body: cards are equal height (grid
     align-items: stretch) and their inner zones align on shared baselines.
     border-box so padding/border stay inside any percentage flex-basis
     (columns default to content-box, which broke the tablet 2-up math). */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  background: var(--gp-bg-white);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-xl);
  padding: var(--gp-space-l) var(--gp-space-m);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}

/* Reserve two lines for the title so every card's description starts on the
   same baseline (short one-line titles no longer pull their text up). These
   cards have no bottom CTA to pin, so the title zone is what keeps the rows
   aligned. 2 lines x 1.3 line-height on the "medium" title size. */
.gp-tiles > * h3 {
  margin-top: 0;
  min-height: calc(2 * 1.3em);
}

.gp-tiles > * p:last-child {
  margin-bottom: 0;
}

/* Tablet band: WP core keeps columns side by side down to 782px, so a 4-up
   tile row sits cramped between 782 and ~900px (broken words, 3-line titles).
   Reflow 2-up there, matching .gp-stat-row's tablet handling. !important is
   required: core ships flex-wrap:nowrap!important and a higher-specificity
   flex-basis for >=782px (same idiom as the .gp-feature column rule above). */
@media (min-width: 782px) and (max-width: 900px) {
  .wp-block-columns.gp-tiles {
    flex-wrap: wrap !important;
  }
  /* Selector mirrors core's specificity (0,3,0) so this wins by order; basis
     sits 1rem under 50% so two cards always fit a line despite subpixel
     rounding, grow:1 lets the pair fill the row exactly. */
  .wp-block-columns.gp-tiles > .wp-block-column {
    flex: 1 0 calc(50% - 1rem) !important;
  }
}

/* Stacked (mobile): cards no longer sit in a shared row, so the reserved
   2-line title zone only leaves dead air under 1-line titles — drop it. */
@media (max-width: 781px) {
  .gp-tiles > * h3 {
    min-height: 0;
  }
}

/* Icon circle inside tile cards. The card icon PNGs carry a WHITE glyph, so the
   circle must be SOLID green (not the 10% tint used elsewhere) for the glyph to
   read — this matches PROD, where these same icons sit on a full-green disc
   (white-on-#69af4b = ~2.9:1, the brand's established icon treatment).
   Larger than the shared 60/32 figure so the icon anchors the card above the
   title. */
.gp-tiles.gp-feature figure {
  width: 76px;
  height: 76px;
  margin-bottom: var(--gp-space-m);
  background: var(--gp-green);
}

.gp-tiles.gp-feature figure img {
  width: 40px !important;
}

/* ===== USP band with dividers =====
   gp-usp = column wrapper, gp-usp-item = single cell.
   Slimmest band on the site: it carries only icon + label, so it sits on the
   tight rhythm rather than the standard compact one. */
.gp-section--compact:has(.gp-usp) {
  padding-block: var(--gp-section-space-tight);
}

.gp-usp {
  gap: 0;
}

.gp-usp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.75rem 1.5rem;
}

.gp-usp-item + .gp-usp-item {
  border-left: 1px solid rgba(28, 63, 94, 0.12);
}

/* Keep the cell balanced top-to-bottom: the icon owns the only inner gap,
   the label carries no stray top/bottom margin. */
.gp-usp-item figure {
  margin: 0 0 var(--gp-space-s, 0.75rem);
}

.gp-usp-item p {
  margin: 0;
  font-size: var(--wp--preset--font-size--small, 0.875rem);
  line-height: 1.45;
  overflow-wrap: break-word;
}

@media (max-width: 1023px) and (min-width: 782px) {
  .gp-usp {
    flex-wrap: wrap;
  }

  .gp-usp-item {
    flex-basis: 33.333% !important;
  }

  .gp-usp-item:nth-child(4),
  .gp-usp-item:nth-child(5) {
    flex-basis: 50% !important;
  }

  .gp-usp-item:nth-child(4) {
    border-left: 0;
    border-top: 1px solid rgba(28, 63, 94, 0.12);
  }
}

/* Phone: the stacked five-cell column was ~900px tall, nearly two viewport
   heights of pure trust content. Collapse each cell into a slim row instead —
   small icon left, title + copy right — so the band keeps every message at
   roughly a third of the height. */
@media (max-width: 781px) {
  .gp-usp {
    flex-direction: column;
    gap: 0;
  }

  .gp-usp-item {
    flex-basis: 100% !important;
    flex-direction: row;
    justify-content: flex-start;
    gap: 0.9rem;
    text-align: left;
    padding: 0.65rem 0.25rem;
  }

  .gp-usp-item + .gp-usp-item {
    border-left: 0;
    border-top: 1px solid rgba(28, 63, 94, 0.12);
  }

  /* Core inlines `.is-layout-flow > .aligncenter { margin-inline: auto !important }`
     for these figures, which re-centers the icon inside the row — only an
     !important of our own can undo that. */
  .gp-usp-item figure.wp-block-image {
    margin: 0 !important;
    flex-shrink: 0;
  }

  /* The pattern markup pins the icon to 64px inline; shrink it for the row layout. */
  .gp-usp-item figure img {
    width: 34px !important;
    height: auto;
  }

  /* The pattern paragraphs carry .has-text-align-center, which core styles as
     `:root .has-text-align-center` (0,2,0) — the class must appear in the
     selector to outrank it. */
  .gp-usp-item p.has-text-align-center {
    text-align: left;
  }

  .gp-usp-item p {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .gp-usp-item p strong {
    font-size: 0.85rem;
  }
}

/* ===== Checkmark list (green check instead of bullet) =====
   gp-checklist on <ul>; replaces the default list markers with green
   checkmarks. gp-checklist-2col wraps into two columns from tablet up. */
.gp-checklist {
  list-style: none;
  margin: 1.25rem auto;
  padding: 0;
  max-width: 760px;
}

.gp-checklist li {
  position: relative;
  padding: 0.35rem 0 0.35rem 2.1rem;
  line-height: 1.5;
}

.gp-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background-color: var(--gp-green);
  /* white checkmark */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 0.8rem;
  background-position: center;
  background-repeat: no-repeat;
}

.gp-on-dark .gp-checklist li::before {
  background-color: var(--gp-green-hover);
}

@media (min-width: 782px) {
  .gp-checklist-2col {
    max-width: 920px;
    columns: 2;
    column-gap: 2.5rem;
  }

  .gp-checklist-2col li {
    break-inside: avoid;
  }
}

/* ===== Logo band ("Bekannt aus") =====
   A quiet press strip: the logos sit directly on the section (no framed card),
   muted (desaturated) by default and full colour on hover, so the proof point
   reads as a calm row rather than competing badges.
   Each logo lives in a fixed optical box (--gp-logo-h tall, capped width) so
   outlets with different aspect ratios still read as the same size instead of
   the widest wordmark dominating.
   Layout is a responsive grid - 2-up on mobile, an auto-flowing row from
   tablet up. With only a handful of outlets a grid beats a carousel: no
   autoplay, no hidden content, fully keyboard/screen-reader accessible. */
.gp-logo-band {
  --gp-logo-box: 4rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
  gap: var(--gp-space-l);
  margin-top: var(--gp-space-m);
}

.gp-logo-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--gp-logo-box);
}

/* Each logo fits inside the same optical box (box tall, capped width) and is
   centred via object-fit, so a single-line wordmark and a two-line lockup read
   at a comparable visual weight instead of the taller one shrinking. */
.gp-logo-band img {
  max-height: var(--gp-logo-box);
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--gp-trans-fast), opacity var(--gp-trans-fast);
}

/* Single-line wordmarks read big at full box height; cap them a touch so they
   do not tower over the stacked lockups next to them. */
.gp-logo-chip--wordmark img {
  max-height: calc(var(--gp-logo-box) * 0.62);
}

.gp-logo-chip:hover img,
.gp-logo-chip:focus-within img {
  filter: grayscale(0);
  opacity: 1;
}

/* From tablet up the few logos flow into a single centred row. */
@media (min-width: 700px) {
  .gp-logo-band {
    --gp-logo-box: 4.5rem;
    grid-auto-flow: column;
    grid-template-columns: none;
    justify-content: center;
    gap: clamp(var(--gp-space-l), 5vw, var(--gp-space-xl));
  }

  .gp-logo-chip {
    width: auto;
  }

  /* In the free-flowing row a width cap stops a wide wordmark from sprawling;
     on mobile the grid cell already bounds it (max-width:100%). */
  .gp-logo-band img {
    max-width: 13rem;
  }
}

/* ===== Media split (image + text side by side) =====
   gp-media-split uses the existing column grid; images are
   rounded, text column vertically centered. */
.gp-media-split {
  align-items: center;
}

.gp-media-split img {
  border-radius: 12px;
  display: block;
  width: 100%;
}

/* ===== Facts + visual split (e.g. investment "Spremberg") =====
   Facts column (eyebrow / heading / lead / stat grid / checklist) on the left,
   image on the right at desktop; stacks image-on-top on mobile. */

/* Tighten the vertical rhythm inside the facts column so the block reads as one
   calm unit: eyebrow -> heading -> lead -> stats -> checklist. */
.gp-media-split .gp-eyebrow {
  margin-bottom: 0.5rem;
}
.gp-media-split .gp-stat-row {
  margin-top: var(--gp-space-l);
}
.gp-media-split .gp-checklist {
  margin: var(--gp-space-l) 0 0;
  max-width: none;
}
/* Checklist list-items that pair a bold title with a descriptive line
   (gp-checklist-feature). The title sits on its own line and the description
   follows as slightly muted secondary text, so each item reads as
   "feature → what it does". Distinct from the icon-mask .gp-feature-item
   component; scoped to .gp-checklist li so the inline
   "<strong>Label:</strong> text" checklists elsewhere are unaffected. */
.gp-checklist li.gp-checklist-feature {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.gp-checklist li.gp-checklist-feature strong {
  display: block;
  margin-bottom: 0.15rem;
}
.gp-checklist li.gp-checklist-feature .gp-feature-desc {
  display: block;
  opacity: 0.85;
}

/* Stat cards: softer, more refined surface than the flat white boxes -- hairline
   border + subtle shadow, compact padding, value and label tightly paired. */
.gp-media-split .gp-stat-row .wp-block-column {
  border: 1px solid var(--gp-border);
  box-shadow: 0 1px 2px rgba(28, 63, 94, 0.05), 0 4px 16px rgba(28, 63, 94, 0.04);
  padding: var(--gp-space-m) var(--gp-space-s) !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
}
.gp-media-split .gp-stat-row .wp-block-column > .wp-block-heading {
  margin: 0;
  line-height: 1.1;
}
.gp-media-split .gp-stat-row .wp-block-column > p {
  margin: 0;
  color: var(--gp-green);
  font-weight: 500;
  font-size: 0.95rem;
}

@media (min-width: 782px) {
  .gp-media-split--media-right {
    flex-direction: row-reverse;
  }
  /* Make the image fill the full height of the facts column so both columns
     read as one balanced block instead of a floating, vertically-centered image. */
  .gp-media-split--media-right > .wp-block-column:first-child,
  .gp-media-split--media-right > .wp-block-column:first-child .wp-block-image,
  .gp-media-split--media-right > .wp-block-column:first-child figure {
    height: 100%;
  }
  .gp-media-split--media-right > .wp-block-column:first-child img {
    height: 100%;
    object-fit: cover;
  }
  /* The four stat cards live inside a ~half-width facts column here, so the
     default single non-wrapping row would crush them (text overflows the
     cards). WP forces flex:1 0 0% + nowrap on its columns with core rules,
     so switch to a 2x2 grid -- the same approach used for gp-cards-projekte. */
  .gp-media-split .gp-stat-row.wp-block-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .gp-media-split .gp-stat-row.wp-block-columns > .wp-block-column {
    flex-basis: auto !important;
  }
}

/* ===== FAQ accordion (content from gepvolt_faq_items in seo.php) ===== */
.gp-faq {
  max-width: 820px;
  /* Breathing room below the section heading: the h2 carries no bottom margin,
     so without this the first accordion card sits flush against the headline. */
  margin: var(--gp-space-l) auto 0;
}

.gp-faq-item {
  border: 1px solid #e2e5e9;
  border-radius: var(--gp-radius-lg);
  margin-bottom: 12px;
  background: var(--gp-bg-white);
  overflow: hidden;
}

.gp-faq-question {
  list-style: none;
  cursor: pointer;
  padding: 18px 52px 18px 20px;
  font-weight: 600;
  /* Question leads the answer: same Montserrat, one notch up from the 17px
     answer body via weight 600 (size kept level so it doesn't shout). */
  font-size: 1.0625rem;
  line-height: 1.4;
  color: var(--gp-navy);
  position: relative;
}

.gp-faq-question::-webkit-details-marker {
  display: none;
}

.gp-faq-question::after {
  content: '+';
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--gp-green);
  transition: transform 180ms ease;
}

.gp-faq-item[open] .gp-faq-question::after {
  content: '−';
}

.gp-faq-answer {
  /* Even inset to the card on all sides; the top gap (open question hugs its
     text via the reduced bottom padding below, + this) clears the headline so
     the answer no longer sits flush under it. */
  padding: 14px 20px 20px;
  color: var(--gp-text-body);
  line-height: 1.6;
}

.gp-faq-answer p {
  margin: 0;
}

/* Pointer affordance: the question is the click target, so give it a hover cue. */
.gp-faq-question:hover {
  background: var(--gp-bg-light);
}

/* Anchor the open item with a subtle brand-green header tint, so it stays easy
   to spot when several answers are expanded at once. */
.gp-faq-item[open] .gp-faq-question {
  background: var(--gp-green-tint);
  /* Tighten the bottom so the tint hugs the question text and the open content
     reads as one balanced block (gap to the answer ≈ side/bottom inset). */
  padding-bottom: 10px;
}

/* Keyboard focus indicator. The summary was the only interactive control in the
   theme without one. Ring the whole rounded card via :has() so the outline isn't
   clipped by the item's overflow:hidden and follows the card radius; AA green on
   the white surface. */
.gp-faq-item:has(.gp-faq-question:focus-visible) {
  outline: var(--gp-focus-width) solid var(--gp-focus-color-light);
  outline-offset: 2px;
}

/* ===== Investment hero =====
   Deliberate page-specific hero (see page-investment.php header): keeps its own
   two-column deck layout, but its background now uses the same navy->green
   gradient as the shared .gp-hero-cover heroes so it reads the same as every
   other page header (customer feedback: raster background replaced). The navy
   preset background stays as the fallback fill beneath the gradient. */
/* Compact vertical padding so the headline, key-facts panel, stat boxes and
   both CTAs fit within a typical laptop fold ("everything on one screen").
   Smaller floor than the global section rhythm; this hero is a documented
   exception and owns its own spacing. */
.gp-investment-hero {
  padding-block: clamp(1.5rem, 3.5vw, 2.75rem);
  background-image: linear-gradient(
    130deg,
    rgb(28, 63, 94) 36%,
    rgba(105, 175, 75, 0.3) 70%
  );
}

/* Long compound words (e.g. "Energieinfrastruktur") scale with the viewport so
   the longest word fits a phone column, growing to the headline size on desktop.
   No auto-hyphenation; the highlight word may wrap as a last resort rather than
   force the page to scroll horizontally. */
.gp-investment-hero h1 {
  /* !important overrides WP's .has-xx-large-font-size preset, which itself ships
     !important; needed so the long compound word can scale to fit a phone. */
  font-size: clamp(1.6rem, 6.8vw, 3.25rem) !important;
  word-break: normal;
  hyphens: manual;
}
.gp-investment-hero h1 .gp-hl {
  overflow-wrap: break-word;
}

/* Keyfacts box (hero right column): the green-outlined card that used to carry
   inline border/padding styles. Tokenized here so the markup stays clean. */
.gp-investment-keyfacts {
  border: 1px solid rgba(125, 196, 94, 0.55);
  border-radius: var(--gp-radius-xl);
  padding: var(--gp-space-xl);
  background: rgba(255, 255, 255, 0.04);
}

/* Inline green highlight for a word inside a heading on dark backgrounds.
   Token-based so future block edits can't drift the hex. */
.gp-hl {
  color: var(--gp-green-hover);
  background: transparent;
}

/* ===== Investment hero stats ===== */
.gp-investment-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 0.75rem;
  margin-top: var(--gp-space-m);
}

/* Flex column, top-aligned content so the big values share one baseline across
   boxes even when a label wraps to two lines; min-width:0 lets the grid track
   actually shrink. Equal box height comes from the grid's align-items:stretch -
   an explicit height:100% here is redundant and mis-sizes the grid track (the
   percentage resolves against a content-sized row), so the box overflows and
   collides with the CTAs below. */
.gp-investment-stat {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-width: 0;
  border: 1px solid rgba(125, 196, 94, 0.55);
  border-radius: var(--gp-radius-lg);
  padding: 0.85rem 1rem;
  background: rgba(255, 255, 255, 0.04);
}

.gp-investment-stat__value {
  margin: 0;
  color: var(--gp-green-hover);
  /* Fluid down to 1rem so "Ab 1.000 €" fits a quarter-width box on one line. */
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.gp-investment-stat__label {
  /* No forced two-line reserve: every label is one line at all real widths, so a
     min-height only left dead space under the text and made the box look top-
     heavy. Equal box heights already come from the grid's align-items:stretch. */
  margin: 0.35rem 0 0;
  color: var(--gp-text-on-dark);
  font-size: 0.82rem;
  line-height: 1.35;
  overflow-wrap: normal;
  word-break: keep-all;
  hyphens: manual;
}

@media (min-width: 900px) {
  .gp-investment-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ===== Mindestertrag diagram (Investment) ===== */
/* Flow reads left to right: sources -> storage -> result, in one straight row
   on desktop. Only the inner source chips may wrap; the top-level row must not
   (a wrapping result block left the connector arrow pointing at nothing). */
.gp-mindestertrag-diagram {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem 1rem;
  max-width: 960px;
  margin: var(--gp-space-m) auto 0;
}

/* Source chips as a fixed 2x2 grid: with a wrapping flex the four chips broke
   3+1 (Industrie alone on the second line). Two max-content columns keep the
   block symmetric; stretch makes both chips of a column share the width of
   the wider one. flex:0 0 auto (not grow): the old grow-to-fill behaviour
   stems from the one-line pill row — with the compact 2x2 block it blew the
   sources area up to the leftover width of the 960px box and tipped the whole
   diagram visually to the right (huge void between pills and storage). As a
   non-growing item the parent's justify-content:center centres the whole
   chain with even gaps. */
.gp-mindestertrag-diagram__sources {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 0.5rem;
  justify-content: center;
  align-content: center;
  flex: 0 0 auto;
  min-width: 0;
}

.gp-mindestertrag-diagram__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--gp-text-on-dark);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gp-mindestertrag-diagram__flow {
  flex: 0 0 auto;
  align-self: center;
  width: 2rem;
  height: 2px;
  background: linear-gradient(90deg, var(--gp-green-hover), rgba(125, 196, 94, 0.2));
}

.gp-mindestertrag-diagram__storage,
.gp-mindestertrag-diagram__result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 0 0 auto;
  text-align: center;
  padding: 0.85rem 1rem;
  border-radius: var(--gp-radius-xl);
  border: 1px solid rgba(125, 196, 94, 0.45);
  background: rgba(255, 255, 255, 0.05);
  min-width: 9rem;
}

.gp-mindestertrag-diagram__storage-label,
.gp-mindestertrag-diagram__result-label {
  margin: 0;
  color: var(--gp-text-on-dark);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gp-mindestertrag-diagram__storage-meta {
  margin: 0.35rem 0 0;
  color: var(--gp-green-hover);
  font-weight: 700;
}

.gp-mindestertrag-diagram__value {
  margin: 0;
  color: var(--gp-green-hover);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.1;
}

@media (max-width: 767px) {
  .gp-mindestertrag-diagram {
    flex-direction: column;
  }

  /* Keep the cause->effect reading when stacked: turn the horizontal connector
     into a short vertical chevron between the blocks. */
  .gp-mindestertrag-diagram__flow {
    width: 2px;
    height: 1.5rem;
    background: linear-gradient(180deg, var(--gp-green-hover), rgba(125, 196, 94, 0.2));
  }
}

/* Utility: hide on small screens (e.g. a dense infographic that is unreadable
   at phone width and whose content is already conveyed as a text list nearby). */
@media (max-width: 781px) {
  .gp-hide-mobile { display: none !important; }
}

/* ===== Investment media tiles ===== */
.gp-media-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 1.25rem;
  margin-top: var(--gp-space-m);
}

/* Social-proof media cards (e.g. investment "Mediale Praesenz"). Mirrors the
   canonical gp-tile look (media + eyebrow + title + text, equal heights) but is
   a non-interactive figure -- no link/CTA, so no hover-lift or focus ring. */
.gp-media-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-xl);
  background: var(--gp-bg-white);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}

/* Media wrapper pins the image ratio so all three cards align top + bottom. */
.gp-media-tile__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: var(--gp-bg-light);
}

.gp-media-tile__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gp-media-tile__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--gp-space-m);
  color: var(--gp-navy);
}

.gp-media-tile__eyebrow {
  display: block;
  margin-bottom: var(--gp-space-xs);
  color: var(--gp-green-dark);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gp-media-tile__title {
  display: block;
  font-size: 1.375rem;
  line-height: 1.25;
  color: var(--gp-navy);
  text-wrap: balance;
}

.gp-media-tile__text {
  margin-top: var(--gp-space-s);
  color: var(--gp-text-body);
  line-height: 1.5;
}

@media (max-width: 900px) {
  .gp-media-tiles {
    grid-template-columns: 1fr;
  }
}

/* Channel chips under the media tiles (PROD parity: static labels enumerating
   the reach channels). Same outline-pill recipe as the mindestertrag diagram
   chips — quiet white outlines on the navy band, no link affordance. Fixed
   2x2 grid: all four chips (~890px) don't fit the 760px content column in one
   line and a wrapping flex broke 3+1 (same asymmetry as the diagram chips);
   two max-content columns keep the block symmetric at every width. */
.gp-media-channels {
  list-style: none;
  margin: var(--gp-space-l) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, max-content));
  justify-content: center;
  gap: 0.5rem 0.75rem;
}

@media (max-width: 639px) {
  .gp-media-channels {
    grid-template-columns: minmax(0, max-content);
  }
}

.gp-media-channels__chip {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--gp-text-on-dark);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ===== Document downloads (Investment) =====
   Finance-style document rows: file icon + title + type/size meta + download
   arrow, the whole row a single >=44px target. Replaces the old checklist of
   bare links (a green checkmark wrongly read as "done", not "file"). */
/* Groups stack vertically (legal first, then company/financial); each group
   keeps its own heading over the full width and lays ITS OWN documents into two
   columns. This keeps every heading attached to its docs and the block
   balanced, without the unequal 6-vs-2 two-column split or the group-tearing a
   single flowing column-count list would cause. */
.gp-docs {
  max-width: var(--gp-wide-width);
  margin: var(--gp-space-l) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--gp-space-l);
}

.gp-docs__group-title {
  margin: 0 0 var(--gp-space-s);
  padding-bottom: var(--gp-space-s);
  border-bottom: 1px solid var(--gp-border);
  color: var(--gp-text-muted);
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.gp-docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--gp-space-l);
}

.gp-doc {
  display: flex;
  align-items: center;
  gap: var(--gp-space-s);
  min-height: var(--gp-touch);
  padding: 0.75rem 0.85rem;
  border-radius: var(--gp-radius-md);
  color: var(--gp-text-heading);
  text-decoration: none;
  transition: var(--gp-trans-move), background-color var(--gp-trans-fast);
}

.gp-doc:hover {
  background: var(--gp-bg-white);
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
}

.gp-doc:focus-visible {
  outline: var(--gp-focus-width) solid var(--gp-focus-color-light);
  outline-offset: 2px;
}

/* Mask icons follow currentColor via background-color, like the other
   --gp-icon-* components. */
.gp-doc__icon,
.gp-doc__action {
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.gp-doc__icon {
  width: 1.75rem;
  height: 1.75rem;
  color: var(--gp-green-dark);
  -webkit-mask-image: var(--gp-icon-doc);
  mask-image: var(--gp-icon-doc);
  -webkit-mask-size: contain;
  mask-size: contain;
}

.gp-doc__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

.gp-doc__title {
  font-weight: 600;
  line-height: 1.3;
}

.gp-doc__meta {
  margin-top: 0.1rem;
  color: var(--gp-text-muted);
  font-size: 0.8rem;
}

.gp-doc__action {
  width: 1.25rem;
  height: 1.25rem;
  color: var(--gp-text-muted);
  -webkit-mask-image: var(--gp-icon-download);
  mask-image: var(--gp-icon-download);
  -webkit-mask-size: 1.25rem;
  mask-size: 1.25rem;
  transition: color var(--gp-trans-fast), transform var(--gp-trans-fast);
}

.gp-doc:hover .gp-doc__action {
  color: var(--gp-green-dark);
  transform: translateY(2px);
}

@media (max-width: 781px) {
  .gp-docs__list {
    grid-template-columns: 1fr;
  }
}

/* ===== Investment lead-form section (replaces the contact modal) =====
   A navy section pairing a value-proposition column with the inline lead form.
   The form itself is a self-contained light card (.gp-form-wrapper), so no
   on-dark field overrides are needed — only the surrounding copy is on-dark. */
.gp-investment-cta .gp-checklist {
  margin-block: var(--gp-space-m);
  max-width: none;
}

/* Risk disclosure below the form: stays visible without interaction (the
   relaunch ADDED it — PROD has none; never hide it behind a footnote). Set
   one step quieter on customer request (2026-07-05): 13px + slightly dimmed
   white. White on navy is ~10.6:1, at .78 alpha still ~7:1 — comfortably
   above AA (4.5:1), so the warning remains legible, just not competing with
   the form. !important beats the has-small-font-size/has-white-color preset
   utilities already on the paragraph. */
.gp-investment-risk {
  max-width: 920px;
  margin: var(--gp-space-l) auto 0;
  line-height: 1.5;
  font-size: 0.8125rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Smooth in-page jumps (Sprungmarken), offset so the target section sits flush
   right below the sticky header — its top edge meets the bar's bottom edge, so
   you see exactly the section you jumped to and nothing of the previous one.
   The header height varies (~116px mobile / ~140px desktop), so
   gp-header-offset.js measures it live and publishes it as --gp-header-h. We
   pull the offset 2px PAST the header rather than short of it: scrolling a hair
   too far hides 1–2px off the target's own top (invisible), whereas stopping a
   hair short lets a sliver of the previous section peek above the bar (visible
   and ugly). The fallback (8.75rem = desktop header height) clears the header
   even before the script runs or without JS. Smooth scroll is disabled for
   reduced-motion users. */
:where(html) {
  scroll-padding-top: calc(var(--gp-header-h, 8.75rem) - 2px);
}

@media (prefers-reduced-motion: no-preference) {
  :where(html) {
    scroll-behavior: smooth;
  }
}

/* ===== Management / team cards + section heads + bio dialog =====
   Cards adopt the canonical .gp-tile visual language (white surface, hairline
   border, soft navy shadow, lift + photo-zoom on hover) so the team page reads
   as part of the component system instead of an all-navy island. */

/* Section head: centred group title with the brand green "stroke" above it
   (deck design language: green accent -> headline). The title is a real
   wp:heading (centred); the stroke is its ::before. */
.gp-management-head__title {
  color: var(--gp-navy);
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
}

.gp-management-head__title::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin: 0 auto var(--gp-space-s);
  background: var(--gp-green);
  border-radius: var(--gp-radius-pill);
}

/* Flex (not grid) so a partial row -- e.g. the two-person board -- centres
   instead of stranding a lonely card on the left. Column count is stepped
   deterministically (1 -> 2 -> 4, see breakpoints below) rather than left to
   flex-basis maths: every section holds exactly two or four members, so 2-up
   and 4-up always fill their rows. A 3-up tier is deliberately skipped -- it
   would leave the four-person boards as an awkward 3 + 1. */
.gp-management-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gp-space-l) var(--gp-space-m);
  margin-top: var(--gp-space-l);
}

.gp-management-card {
  display: flex;
  /* Mobile-first: one full-width column that fills the gutter -- no narrow
     card floating in a sea of whitespace. flex-grow 0 keeps the stepped widths
     exact above; justify-content:center on the grid centres any partial row. */
  flex: 0 1 100%;
  flex-direction: column;
  background: var(--gp-bg-white);
  border: 1px solid var(--gp-border);
  border-radius: var(--gp-radius-xl);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(28, 63, 94, 0.08);
  transition: var(--gp-trans-move);
}

.gp-management-card:hover,
.gp-management-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(28, 63, 94, 0.14);
}

.gp-management-card__media {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--gp-bg-light);
}

.gp-management-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--gp-trans-slow);
}

.gp-management-card:hover .gp-management-card__media img {
  transform: scale(1.04);
}

.gp-management-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--gp-space-m);
}

.gp-management-card__name {
  margin: 0;
  color: var(--gp-navy);
  font-size: 1.0625rem;
  line-height: 1.3;
}

.gp-management-card__role {
  margin: var(--gp-space-2xs) 0 0;
  color: var(--gp-green-dark);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gp-management-card__teaser {
  margin: var(--gp-space-s) 0 0;
  color: var(--gp-text-body);
  font-size: 0.9375rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* Pin the trigger to the card foot so the "Erfahren Sie mehr" CTAs line up
   across a row regardless of teaser length (same bottom-align as the homepage
   tiles). The body is flex:1 and cards stretch to equal height, so margin-top
   auto absorbs the slack; padding-top keeps a minimum gap above the CTA. */
.gp-management-card__cta {
  margin-top: auto;
  padding-top: var(--gp-space-m);
  align-self: flex-start;
}

@media (prefers-reduced-motion: reduce) {
  .gp-management-card:hover,
  .gp-management-card:focus-within,
  .gp-management-card:hover .gp-management-card__media img {
    transform: none;
  }
}

.gp-bio-dialog {
  border: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: min(720px, calc(100vw - 2rem));
  width: 100%;
  max-height: calc(100dvh - 3rem);
  margin: auto;
  background: transparent;
  /* The dialog is a flex box that never scrolls itself (iOS Safari does not
     reliably touch-scroll a <dialog>). The inner panel (a plain div) is the
     scroll container, so a long bio scrolls inside a fixed-height card. */
  display: flex;
  overflow: hidden;
}

.gp-bio-dialog:not([open]) {
  display: none;
}

.gp-bio-dialog::backdrop {
  background: rgba(15, 34, 51, 0.72);
}

.gp-bio-dialog__panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--gp-bg-white);
  border-radius: var(--gp-radius-xl);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 18px 48px rgba(15, 34, 51, 0.28);
}

/* Close button: same look as the forms modal (.gp-modal-close) — plain X,
   44px hit area, muted grey, hover fills muted. Sticky (instead of the forms
   modal's static header row) because the whole bio panel scrolls; the white
   background keeps it legible when text slides underneath. flex:0 0 auto so
   the overflowing flex column can never squash it. */
.gp-bio-dialog__close {
  position: sticky;
  top: 0;
  z-index: 1;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-bottom: -2.75rem; /* stays sticky at top without reserving a row */
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 8px;
  background: var(--gp-bg-white);
  color: var(--gp-text-muted);
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.gp-bio-dialog__close:hover {
  background: var(--gp-bg-muted);
  color: var(--gp-navy);
}

.gp-bio-dialog__close:focus-visible {
  outline: 2px solid var(--gp-green);
  outline-offset: 2px;
}

.gp-bio-dialog__close svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gp-bio-dialog__media {
  display: flex;
  align-items: center;
  justify-content: center;
  /* flex:0 0 auto: the panel is an overflowing flex column — without it,
     flex-shrink squashes the fixed-height circle into a cropped pill. */
  flex: 0 0 auto;
  margin: 0.25rem auto 1.25rem;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  overflow: hidden;
  background: var(--gp-bg-muted);
}

.gp-bio-dialog__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.gp-bio-dialog__media img[hidden] {
  display: none;
}

.gp-bio-dialog__role {
  margin: 0 0 0.35rem;
  color: var(--gp-green-dark);
  font-weight: 700;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align: center;
}

.gp-bio-dialog__title {
  margin: 0 0 1rem;
  color: var(--gp-navy);
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  line-height: 1.25;
  text-align: center;
}

.gp-bio-dialog__body {
  color: var(--gp-text-body);
  line-height: 1.65;
}

.gp-bio-dialog__body p {
  margin: 0;
}

/* Phones: fullscreen takeover, shell like the forms modal
   (.gp-modal-container in gp-forms.css), sheet edge-to-edge with square
   corners. dvh statt svh: die Höhe folgt der iOS-Toolbar dynamisch, das Weiß
   läuft bei minimierter Leiste bis zur Unterkante durch (kein Backdrop-
   Streifen); das safe-area-Padding am Panel hält den Text aus der Zone von
   Home-Indicator/URL-Pille heraus. Unbedenklich ohne gepinnten Footer: hier
   scrollt das ganze Panel (der svh-Grund des Formular-Modals, 0.2.87, war
   dessen sticky Aktions-Footer). This block must stay BELOW the base part
   rules — equal specificity, the later rule wins the cascade. */
@media (max-width: 599px) {
  .gp-bio-dialog {
    max-width: none;
    width: 100vw;
    max-height: none;
    height: 100vh;
    height: 100dvh;
    margin: 0;
  }

  .gp-bio-dialog__panel {
    border-radius: 0;
    box-shadow: none;
    padding: 1.5rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
  }

  .gp-bio-dialog__media {
    width: 8.5rem;
    height: 8.5rem;
  }
}

/* Large phones / tablet portrait: two balanced columns. Every section has two
   or four members, so 2-up always yields full rows (2, or 2 + 2). A modest
   max-width keeps the square photo from ballooning on wide tablets; the pair
   then centres via the grid. */
@media (min-width: 600px) {
  .gp-management-card {
    /* Subtract a full gap (not half) so sub-pixel rounding never tips the row
       over 100% and wraps the second card to its own line. */
    flex-basis: calc(50% - var(--gp-space-m));
    max-width: 24rem;
  }
}

/* Desktop: four per row inside the 1320 content box; the two-person board and
   any short row stay centred via the flex parent. */
@media (min-width: 1024px) {
  .gp-management-card {
    flex-basis: calc(25% - var(--gp-space-m));
    max-width: none;
  }
}

/* ===== Press overview: section intro ===== */
.gp-section-intro {
  max-width: 56ch;
  margin-inline: auto;
  margin-bottom: var(--gp-space-xl);
  color: var(--gp-text-muted);
}

/* Press newsroom grid uses the shared .gp-tile component (see "Tile" above),
   with .gp-tile-grid--auto and an eyebrow holding the publish date. */
.gp-press-empty {
  max-width: 56ch;
  margin: var(--gp-space-l) auto 0;
  text-align: center;
  color: var(--gp-text-muted);
}

/* ===== Press media-services + contact band ===== */
.gp-press-contact-card {
  align-self: start;
}

.gp-press-contact-card__cta {
  margin-top: var(--gp-space-m);
}

/* ===== Single press article ===== */

/* The article hero reuses the shared .gp-hero-cover schema (photo background +
   navy->green gradient, content flush left on the wide edge). These rules add
   only the press-specific bits inside it: the back pill, the kicker line, the
   byline, and headline word-break handling. Alignment and the gradient come
   from .gp-hero-cover itself, so text and photo always share one left edge. */

/* Unlike the solution-page heroes (a fixed 52/62vh band with vertically centred
   one-liners), article titles vary a lot in length. A fixed min-height leaves
   uneven dead space above/below short titles and crowds long ones. Instead let
   the hero grow with its content and carry consistent fluid section padding top
   and bottom — the same vertical rhythm as every other band on the site. */
.gp-article-hero.gp-hero-cover {
  min-height: 0;
  padding-block: var(--gp-section-space-compact);
}

/* Breadcrumb-style return link: a quiet, tappable pill above the kicker. */
.gp-article-back {
  margin: 0 0 var(--gp-space-l);
  font-size: 0.9375rem;
}

.gp-article-hero .gp-article-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4rem 0.85rem 0.4rem 0.7rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--gp-radius-pill, 999px);
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: color var(--gp-trans-fast), border-color var(--gp-trans-fast),
    background-color var(--gp-trans-fast);
}

.gp-article-hero .gp-article-back a:hover,
.gp-article-hero .gp-article-back a:focus-visible {
  border-color: var(--gp-green);
  background-color: rgba(105, 175, 75, 0.12);
  color: #fff;
}

.gp-article-hero .gp-article-back a span[aria-hidden] {
  transition: transform var(--gp-trans-fast);
}

.gp-article-hero .gp-article-back a:hover span[aria-hidden] {
  transform: translateX(-2px);
}

/* The article hero is a centred text column, not a flush-left hero like the
   solution pages: its content sits on the same ~760px measure as the article
   body below (user request 2026-07-03). Core's constrained layout centres every
   child individually, so a shared left edge requires a shared measure — pin ALL
   text blocks (incl. the kicker group and the H1) to one width, overriding the
   solution-hero H1 widening (980px at >=1024px, 66% at >=1440px, both earlier
   in this file) that would otherwise stagger the headline's left edge. */
.gp-article-hero > .wp-block-cover__inner-container > :where(h1, p, .gp-article-kicker) {
  max-width: 760px;
}

/* Kicker line above the headline: green eyebrow + publish date, dot-separated. */
.gp-article-kicker {
  margin-bottom: var(--gp-space-s);
  gap: 0 !important;
  align-items: center;
}

.gp-article-kicker .gp-eyebrow {
  margin: 0;
}

.gp-article-date {
  margin: 0 !important;
  position: relative;
  padding-left: 0.85rem;
  margin-left: 0.85rem !important;
  color: rgba(255, 255, 255, 0.78) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.8125rem;
}

.gp-article-kicker .gp-article-date::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%);
}

/* Headline: long German compounds (e.g. "Energieinfrastruktur") must never
   hard-break mid-word — the client rejects hyphenation. WP core ships
   .wp-block-post-title{word-break:break-word} inline, which splits long tokens;
   reset it so whole words stay intact (the mobile font step shrinks them). */
.gp-article-hero .wp-block-post-title {
  margin-block: 0;
  line-height: 1.14;
  word-break: normal;
  overflow-wrap: normal;
  text-wrap: pretty;
}

/* Byline below the headline: quiet attribution / trust signal. */
.gp-article-byline {
  margin: var(--gp-space-s) 0 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375rem;
}

.gp-article-byline strong {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 480px) {
  /* WP emits .has-xx-large-font-size{...!important}, so the override needs
     !important to win. */
  .gp-article-hero .wp-block-post-title {
    font-size: clamp(1.1875rem, 0.7rem + 2.4vw, 1.4375rem) !important;
  }
}

/* Article body: comfortable measure, generous rhythm. */
.gp-article {
  max-width: var(--gp-content-width);
  margin-inline: auto;
  color: var(--gp-text-body);
}

.gp-article p {
  margin: 0 0 var(--gp-space-m);
  line-height: 1.75;
}

/* Lead paragraph: press releases open with a dateline/standfirst (e.g.
   "Hilden (ots) - ..."). Lift it visually so it reads as the article's intro,
   not body copy — larger, navy, a touch tighter. */
.gp-article > p:first-of-type {
  margin-bottom: var(--gp-space-l);
  color: var(--gp-navy);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.5;
}

.gp-article h2 {
  margin: var(--gp-space-xl) 0 var(--gp-space-s);
  color: var(--gp-navy);
  font-size: 1.5rem;
  line-height: 1.25;
  text-wrap: balance;
}

.gp-article h3 {
  margin: var(--gp-space-l) 0 var(--gp-space-s);
  color: var(--gp-navy);
  font-size: 1.25rem;
  line-height: 1.3;
}

.gp-article ul {
  margin: 0 0 var(--gp-space-m);
  padding-left: 1.4rem;
}

.gp-article li {
  margin-bottom: 0.4rem;
  line-height: 1.6;
}

.gp-article a:not(.gp-btn) {
  color: var(--gp-green-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-article a:not(.gp-btn):hover {
  color: var(--gp-green);
}

/* Article footer: rule + actions. */
.gp-article-footer {
  max-width: var(--gp-content-width);
  margin: var(--gp-space-xl) auto 0;
}

.gp-article-rule {
  margin: 0 0 var(--gp-space-l);
  border: 0;
  border-top: 1px solid var(--gp-border);
}

.gp-article-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gp-space-m);
}

@media (max-width: 639px) {
  .gp-article-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .gp-article-actions .gp-btn-tertiary--dark {
    justify-content: center;
  }
}

/* ===== Solution hero mobile heights ===== */
@media (max-width: 640px) {
  .gp-hero-cover {
    min-height: auto !important;
  }

  .gp-hero-cover > .wp-block-cover__inner-container {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

/* ===== Legal pages (Impressum, Datenschutz, DE/EN) ===== */
.gp-legal {
  color: var(--gp-text-body);
  /* Share the hero's left edge (one continuous spine) instead of WP's centered
     content column. Same wide-band inset as .gp-hero-cover, so the body text
     starts exactly where the hero headline does; the column then caps at a
     readable measure and sits flush-left (rule below). Without this the
     constrained layout centres a 760px column ~280px inboard of the
     left-aligned hero on desktop, which reads as two unrelated blocks. */
  padding-inline: max(
    var(--wp--style--root--padding-left, var(--gp-gutter)),
    calc((100vw - var(--wp--style--global--wide-size, 1320px)) / 2)
  );
}

/* Readable measure (~65-75ch), flush-left. The constrained layout centres
   children with margin-inline:auto !important, so we match that weight (and a
   higher specificity via .gp-legal.gp-section) to win. */
.gp-legal.gp-section > * {
  max-width: 760px;
  margin-inline: 0 !important;
}

.gp-legal > :first-child {
  margin-top: 0;
}

.gp-legal h2 {
  margin-top: var(--gp-space-l);
  margin-bottom: var(--gp-space-s);
  color: var(--gp-text-heading);
}

.gp-legal p,
.gp-legal li {
  line-height: 1.7;
}

.gp-legal ul {
  margin-top: var(--gp-space-s);
}

.gp-legal a {
  color: var(--gp-green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gp-legal a:hover {
  color: var(--gp-green-dark);
}

.gp-legal-address {
  font-style: normal;
  line-height: 1.7;
}

/* Legal pages are frequently saved/printed, output content only */
@media print {
  .gp-site-header,
  .gp-footer,
  .gp-scroll-top {
    display: none !important;
  }

  .gp-legal {
    padding-top: var(--gp-space-m) !important;
    padding-bottom: 0 !important;
    color: #000;
  }

  .gp-legal a {
    color: #000;
  }

  .gp-legal-hero {
    min-height: 0 !important;
    background: none !important;
    padding-top: 0 !important;
    padding-bottom: var(--gp-space-s) !important;
  }

  /* Drop the navy cover overlay so the (white) hero text stays legible on paper. */
  .gp-legal-hero .wp-block-cover__background {
    display: none !important;
  }

  .gp-legal-hero * {
    color: #000 !important;
  }
}