/*
Theme Name:  Good Vibe Bottles Child
Theme URI:   https://goodvibebottles.com
Description: Child theme for Good Vibe Bottles — built on Twenty Twenty-Five
Author:      AGG
Template:    twentytwentyfive
Version:     1.1.0
Text Domain: gvb
*/

/* ══════════════════════════════════════════════════════════════
   1. CUSTOM PROPERTIES
   ══════════════════════════════════════════════════════════════ */

:root {
  /* Shadows */
  --gvb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --gvb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --gvb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

  /* Border radius */
  --gvb-radius-sm: 8px;
  --gvb-radius-md: 16px;
  --gvb-radius-lg: 24px;
  --gvb-radius-xl: 30px;
  --gvb-radius-pill: 52px;

  /* Transition */
  --gvb-transition: 0.25s ease;

  /* ── Type scale (locked at 1440 design values) ──
     April 2026 refactor: typography no longer scales above 1440. Figma's
     2200 design uses these exact pixel values, so every viewport ≥1440
     renders text at the static MIN. Mobile/tablet still scale via Section
     16's overrides (h1=42, h2=30, etc.). Tokens below are the canonical
     list — use them for new rules. */
  --fs-display:  65px;
  --fs-h1:       60px;
  --fs-h2:       40px;
  --fs-h3:       32px;
  --fs-h4:       24px;
  --fs-h5:       18px;
  --fs-h6:       30px;
  --fs-body:     16px;
  --fs-label:    15px;
  --fs-label-sm: 12px;
}

/* ══════════════════════════════════════════════════════════════
   1b. GLOBAL FOCUS RESET
   ──────────────────────────────────────────────────────────────
   Aggressive suppression of all focus indicators on every element.
   The modern `*:focus:not(:focus-visible)` pattern was tried and
   reverted: focus-visible was firing on click in Safari + on
   elements receiving programmatic .focus() (e.g. cases tabs JS),
   leaking blue browser-default rings on click. Do not reintroduce.
   ══════════════════════════════════════════════════════════════ */

*:focus,
*:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* ══════════════════════════════════════════════════════════════
   2. WAVE BACKGROUNDS (all pages)
   ══════════════════════════════════════════════════════════════ */

.wp-site-blocks {
  position: relative;
  overflow: hidden;
  /* Create stacking context so .gvb-brand-promise::before's z-index: -1 paints
     within wp-site-blocks (above the page bg, below sibling sections). Without
     this, z-index: -1 would escape to body's stacking context and paint behind
     the page background. */
  isolation: isolate;
  /* Reserve space for the fixed header so hero images aren't clipped under it. */
  padding-top: 96px;

  /* ── PAGE BACKGROUND (April 2026 refactor — split-layer) ───────────
     Two-layer background: top wave + bottom wave separated into their
     own SVGs so neither wave can leak into the wrong area when stretched.

     Layer 1 (top, drawn on top): background-large-top.svg — top wave
       path only, NO linen rect (transparent everywhere except the wave),
       so layer 2 shows through underneath.
     Layer 2 (bottom, drawn below): background-large-bottom.svg — bottom
       wave path only, WITH linen rect — provides the page's linen
       background plus the bottom green wave.

     Top layer at fixed --top-wave-h (independent knob), bottom layer
     stretched to --bg-h. Below --bg-h the page falls through to
     background-color (gvb-green) so the bottom green continues down
     through brand-promise into the footer.

     TUNABLE:
       --top-wave-start → where the TOP edge of the top-wave layer starts
                          (push top down, bottom stays pinned at --top-wave-h)
       --top-wave-h     → where the BOTTOM edge of the top-wave layer ends
       --top-wave-zoom  → proportional zoom on the top wave (1 = no zoom,
                          1.2 = 20% bigger). Bottom stays pinned at
                          --top-wave-h; image grows upward (extra height is
                          clipped under navbar) and outward (sides clipped)
       --top-wave-fade  → length (px) the L2 green strip fades from solid
                          to transparent below --top-wave-start. Larger =
                          softer blend into the wave layer. 0 = hard edge.
       --bg-h           → height (px) of the bottom-wave layer (the SVG).
                          Bottom-wave is rendered by .gvb-brand-promise::before,
                          anchored to brand-promise's top edge. Per-page
                          overrides use --bottom-wave-push-down (set on body)
                          to push the wave's bottom edge below brand-promise. */
  --top-wave-start: 70px;
  --top-wave-h: 950px;
  --top-wave-zoom: 1;
  --top-wave-fade: 0px;
  --bg-h: 4000px;
  background-color: #EDE8DB;
  /* 2-layer top background:
       L1 (drawn on top): top-wave SVG, shifted down by --top-wave-start
       L2 (middle): green strip — solid from y=0 to y=--top-wave-start
                    (fills the navbar gap), then fades to transparent over
                    the next --top-wave-fade px so it blends seamlessly
                    into the wave layer below with no hard cutoff line
     The bottom wave is no longer here — it now lives on
     .gvb-brand-promise::before (see below) so its bottom edge is pinned
     to the top of the brand-promise section on every page, regardless
     of page length. Page bg-color is linen so areas above L1 + below
     the bottom-wave pseudo read as linen consistently. */
  background-image:
    url('assets/svg/desktop-wave-top.svg'),
    linear-gradient(
      to bottom,
      #459271 0px,
      #459271 var(--top-wave-start),
      transparent calc(var(--top-wave-start) + var(--top-wave-fade))
    );
  background-size:
    calc(100% * var(--top-wave-zoom)) calc((var(--top-wave-h) - var(--top-wave-start)) * var(--top-wave-zoom)),
    100% calc(var(--top-wave-start) + var(--top-wave-fade));
  background-repeat: no-repeat, no-repeat;
  background-position:
    center calc(var(--top-wave-h) - (var(--top-wave-h) - var(--top-wave-start)) * var(--top-wave-zoom)),
    center top;
}

/* Bottom wave — moved to .gvb-brand-promise::before (see Section 14).
   Previously lived on .wp-site-blocks::before, which caused massive CLS
   because the wave's anchor (page-bottom) shifted as content streamed in
   during page load. Now anchored to brand-promise's top, which has a far
   more stable position. The painting order is preserved via stratified
   z-indexes: brand-promise gets z-index: 0 (lower than the > * { z-index:
   1 } sibling sections), and its pseudo gets z-index: -1 inside that
   stacking context. See the .gvb-brand-promise::before block for details. */

/* Laptop tier (≥1024) — bottom-green start point starts creeping up. */
@media (min-width: 1024px) {
  .wp-site-blocks {
    --bg-h: 3900px;
  }
}

/* Laptop L tier (≥1440) — bottom wave nudges closer to the footer.
   --top-wave-h bumps to 1100 for the 1441–1919 band (using the smaller
   desktop-wave-top.svg, which renders best at this height). At ≥1920 the
   SVG swaps to background-large-top.svg and the wave knobs retune for
   the wide tier (Figma 1920 design baseline). */
@media (min-width: 1440px) {
  .wp-site-blocks {
    --top-wave-h: 1000px;
  }
}

/* Wide tier (≥1920) — Figma 1920 design baseline. Single transition where
   the SVG swaps to background-large-top.svg AND the wave knobs retune
   together (was previously split: 1950 SVG swap + 2200 knob retune; merged
   2026-04-27 alongside the universal content-cap retarget to 1650). */
@media (min-width: 1920px) {
  .wp-site-blocks {
    --top-wave-h: 4800px;
    --bg-h: 4100px;
    background-image:
      url('assets/svg/background-large-top.svg'),
      linear-gradient(
        to bottom,
        #459271 0px,
        #459271 var(--top-wave-start),
        transparent calc(var(--top-wave-start) + var(--top-wave-fade))
      );
  }
}

/* Ultrawide / 4K (≥2560 viewport) — final --bg-h tune. */
@media (min-width: 2560px) {
  .wp-site-blocks {
    --bg-h: 4050px;
  }
}

/* Ensure all content stacks above both waves */
.wp-site-blocks > * {
  position: relative;
  z-index: 1;
}

/* Header template part wrapper must sit above all page content so dropdown isn't clipped */
.wp-site-blocks > .wp-block-template-part:first-child {
  position: relative;
  z-index: 200;
}

/* ══════════════════════════════════════════════════════════════
   2b. SECTION GAP RESET (Figma-aligned, 2026-04-29)
   ──────────────────────────────────────────────────────────────
   WP core injects `:where(.wp-site-blocks) > * { margin-block-start:
   1.5rem }` (24px) between every top-level section. Figma designs
   each section with its own padding-top/bottom — adding the WP gap
   on top double-counts the spacing and pushes sections farther apart
   than intended. Zeroing it here lets each section's own padding
   own the rhythm.

   Same `:where()` selector matches WP's own (specificity 0,0,0),
   wins by source order. Class-level overrides like
   `.gvb-hero { margin-top: 8px }` and `.gvb-blog-all { margin-top:
   120px }` still win via specificity (0,1,0 > 0,0,0). If a specific
   section needs an explicit gap above, add a `margin-top` to that
   class — don't undo this reset.
   ══════════════════════════════════════════════════════════════ */

:where(.wp-site-blocks) > * {
  margin-block-start: 0;
}

/* ══════════════════════════════════════════════════════════════
   3. HEADER
   ══════════════════════════════════════════════════════════════ */

.gvb-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 200;
  overflow: visible !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
  box-sizing: border-box;
  /* Header padding — explicit override of the inline style from
     parts/header.html (or its DB-cached FSE template-part copy).
     Mobile rule at @media (max-width: 784px) below still wins for ≤784. */
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

/* Logged-in WP admin bar (desktop ≥783px only): admin bar is fixed, so we
   extend the green bar behind it via extra top padding.
   On mobile (<783px) the admin bar is position: absolute — it scrolls away
   with the page — so we do NOT add padding there (would leave a permanent
   phantom gap when the nav re-pins on scroll-up). */
@media (min-width: 783px) {
  .admin-bar .gvb-header {
    padding-top: calc(24px + 32px) !important;
  }
}

/* No mobile admin-bar padding override needed: at ≤784px the navbar is
   position: relative (see the tablet/mobile block below), and WP already adds
   html { padding-top: 46px } to reserve space for the absolute admin bar. */

/* Hidden on scroll-down */
.gvb-header.gvb-header--unpinned {
  transform: translateY(-100%);
}

/* Visible on scroll-up (not at top) — adds subtle shadow */
.gvb-header.gvb-header--pinned {
  transform: translateY(0);
  box-shadow: 0 4px 16px rgba(43, 43, 43, 0.08);
}

/* At the very top of the page — no shadow */
.gvb-header.gvb-header--top {
  transform: translateY(0);
  box-shadow: none;
}

/* Accessibility: honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  .gvb-header {
    transition: none;
  }
}

/* Anchor-jump offset for fixed header — #kontakt lands below the nav.
   scroll-behavior: smooth gives native smooth scrolling for hash links.
   overscroll-behavior: none disables the rubber-band bounce so we never
   reveal canvas color outside the page boundaries — same approach used by
   Linear, Vercel, Notion. background-color is the canvas fallback. */
html {
  scroll-padding-top: 96px;
  scroll-behavior: smooth;
  /* Canvas fallback. Visible only in edge cases (FOUC during slow CSS
     load, iOS bounce-scroll past page bounds, DevTools resize reflow).
     Linen matches .wp-site-blocks's bg so any rare visibility blends in
     instead of flashing brand-green. */
  background-color: #EDE8DB;
  overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

#kontakt {
  scroll-margin-top: 96px;
}

/* ── Tablet + mobile (≤784px): navbar flows with the page, no smart hide/show ──
   Navbar is static (scrolls away with content), so we undo everything the
   fixed-nav setup assumed: position, transform states, page padding reserve,
   and anchor scroll offsets. */
@media (max-width: 784px) {
  .gvb-header,
  .gvb-header.gvb-header--top,
  .gvb-header.gvb-header--pinned,
  .gvb-header.gvb-header--unpinned {
    position: relative;
    transform: none !important;
    transition: none;
    will-change: auto;
    box-shadow: none;
  }

  /* No fixed nav → no need to reserve space above the content */
  .wp-site-blocks { padding-top: 0; }

  /* No fixed nav → anchor jumps don't need an offset */
  html { scroll-padding-top: 0; }
  #kontakt { scroll-margin-top: 0; }
}

/* Allow dropdown to escape the flex container */
.gvb-header .wp-block-navigation,
.gvb-header .wp-block-navigation__container,
.gvb-header .wp-block-navigation-item {
  overflow: visible !important;
}

.gvb-header__logo {
  flex-shrink: 0;
}

.gvb-header__logo img {
  width: 167px;
  height: 51px;
  object-fit: contain;
}

/* Navigation overrides for FSE nav block */
.gvb-header__nav .wp-block-navigation__container {
  gap: 40px;
}

.gvb-header__nav .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gvb-linen);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.3px;
  text-decoration: none;
  transition: opacity var(--gvb-transition);
}

.gvb-header__nav .wp-block-navigation-item__content:hover {
  opacity: 0.75;
}

/* Dropdown submenu (e.g. Unsere Flaschen) */
.gvb-header .wp-block-navigation__submenu-container {
  background-color: var(--wp--preset--color--gvb-green) !important;
  border: none !important;
  border-radius: var(--gvb-radius-sm);
  padding: 12px 0;
  min-width: 200px;
  box-shadow: var(--gvb-shadow-md);
  margin-top: 10px;
}

/* Invisible bridge fills the gap so hover isn't lost while moving to the submenu */
.gvb-header .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -10px;
  left: 0;
  right: 0;
  height: 10px;
}

.gvb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gvb-linen) !important;
  font-size: 15px;
  padding: 8px 24px 8px 24px;
  display: block;
  opacity: 0.75;
  transition: opacity 0.15s, padding-left 0.15s;
}

.gvb-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  opacity: 1;
  padding-left: 30px;
}

/* Active/current page — full opacity */
.gvb-header .wp-block-navigation__submenu-container > .current-menu-item
  > .wp-block-navigation-item__content {
  opacity: 1;
}

/* Divider after first submenu item (Übersicht / Alle Lösungen) — desktop only */
.gvb-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) {
  border-top: 1px solid rgba(237, 232, 219, 0.2);
  margin-top: 6px;
  padding-top: 6px;
}

/* Divider before a specific submenu item — add class gvb-nav-divider-before in WP nav editor */
.gvb-header .wp-block-navigation__submenu-container > .gvb-nav-divider-before {
  border-top: 1px solid rgba(237, 232, 219, 0.2);
  margin-top: 6px;
  padding-top: 6px;
}

/* Remove dividers inside mobile overlay */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2),
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container > .gvb-nav-divider-before {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}


/* ══════════════════════════════════════════════════════════════
   3b. FOOTER
   ══════════════════════════════════════════════════════════════ */

.gvb-footer__logo img {
  width: 175px;
  height: 53px;
  object-fit: contain;
}

.gvb-footer__social {
  display: flex;
  align-items: center;
  gap: 24px;
}

.gvb-footer__social-link {
  display: inline-flex;
  transition: opacity var(--gvb-transition);
}

.gvb-footer__social-link:hover {
  opacity: 0.7;
}

.gvb-footer__social-link img {
  width: 24px;
  height: 24px;
}

.gvb-footer__nav-list li.gvb-footer__nav-divider {
  border-top: 1px solid rgba(69, 146, 113, 0.25);
  margin-top: 8px;
  padding-top: 8px;
}

.gvb-footer__nav-heading a,
.gvb-footer__nav-list a {
  text-decoration: none;
  color: inherit;
  transition: color 0.15s ease;
}

.gvb-footer__nav-heading a:hover,
.gvb-footer__nav-list a:hover {
  color: var(--wp--preset--color--gvb-orange);
}

.gvb-footer__nav-heading {
  font-weight: 400 !important;
  line-height: 1 !important;
  width: fit-content;
}

@media (min-width: 785px) {
  .gvb-footer__nav.wp-block-columns {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 24px !important;
  }

  .gvb-footer__nav.wp-block-columns > .wp-block-column {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0;
  }

  .gvb-footer__nav-heading {
    font-size: 12px !important;
  }

  .gvb-footer__nav-list {
    font-size: 13px !important;
  }
}

/* Footer stacks at 785-1199: brand row on top, nav row below — same
   pattern GitHub/Stripe/Apple/NYT use. At this band the 33%/67% side-
   by-side split squeezes the 7 nav columns into ~600px (FAQ overflows
   off the right edge or wraps to a stranded row). Stacking gives the
   nav full viewport width, so all 7 columns sit single-row neatly.
   ≥1200: original horizontal layout. ≤784: already stacks via the
   mobile block, untouched. */
@media (max-width: 1199px) and (min-width: 785px) {
  .gvb-footer__inner {
    flex-direction: column !important;
    gap: 48px !important;
  }

  .gvb-footer__brand,
  .gvb-footer__nav-wrap {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Reverse visual order in this band: nav row on top, brand row below.
     DOM order is preserved (brand stays first in markup for semantics). */
  .gvb-footer__nav-wrap { order: 1; }
  .gvb-footer__brand    { order: 2; }
}


/* Footer inner content scales with the viewport up to 1650px (the new
   universal content cap, matching Figma 1920 design baseline). Overrides
   WP's runtime constrained-layout rule
   `.wp-container-core-group-is-layout-{hash} > * { max-width: 1200 }` that
   comes from the pattern's `contentSize: 1200px`. Specificity 0,2,0 beats
   WP's (0,1,0) rule cleanly — no !important needed.
   Cap reaches 1650 at viewport 1920. Pattern's 1200 contentSize still
   applies at viewports ≤1396 (clamp min), so narrower screens unchanged. */
.gvb-footer > .gvb-footer__inner {
  max-width: clamp(1200px, 85.94vw, 1650px);
  margin-left: auto;
  margin-right: auto;
}

.gvb-footer__nav-list {
  list-style: none;
  padding-left: 0;
}

.gvb-footer__nav-list li {
  margin-bottom: 8px;
}

.gvb-footer__nav-list a {
  color: var(--wp--preset--color--gvb-green);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--gvb-transition);
}

.gvb-footer__nav-list a:hover {
  opacity: 0.7;
}

/* ══════════════════════════════════════════════════════════════
   4. SECTION BACKGROUNDS
   ══════════════════════════════════════════════════════════════ */

.gvb-section--green {
  background-color: var(--wp--preset--color--gvb-green);
  color: var(--wp--preset--color--gvb-white);
}

.gvb-section--orange {
  background-color: var(--wp--preset--color--gvb-orange);
  color: var(--wp--preset--color--gvb-white);
}

.gvb-section--cream {
  background-color: var(--wp--preset--color--gvb-linen);
  color: var(--wp--preset--color--gvb-graphite);
}

.gvb-section--dark {
  background-color: var(--wp--preset--color--gvb-graphite);
  color: var(--wp--preset--color--gvb-white);
}

/* ══════════════════════════════════════════════════════════════
   5. BUTTONS
   ══════════════════════════════════════════════════════════════ */

.gvb-btn--primary {
  display: inline-block;
  background-color: var(--wp--preset--color--gvb-orange);
  color: var(--wp--preset--color--gvb-white);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 32px;
  border: none;
  border-radius: var(--gvb-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--gvb-transition);
}

.gvb-btn--primary .wp-block-button__link {
  padding: 12px 32px;
  border-radius: var(--gvb-radius-pill) !important;
  transition: background-color var(--gvb-transition), color var(--gvb-transition);
}

.gvb-btn--primary:hover,
.gvb-btn--primary:hover .wp-block-button__link {
  background-color: var(--wp--preset--color--gvb-orange-hover);
  color: var(--wp--preset--color--gvb-white);
}

.gvb-btn--secondary {
  display: inline-block;
  background-color: transparent;
  color: var(--wp--preset--color--gvb-orange);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 32px;
  border: 2px solid var(--wp--preset--color--gvb-orange);
  border-radius: var(--gvb-radius-pill);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--gvb-transition), color var(--gvb-transition);
}

.gvb-btn--secondary .wp-block-button__link {
  padding: 12px 32px;
  border-radius: var(--gvb-radius-pill) !important;
}

.gvb-btn--secondary:hover {
  background-color: var(--wp--preset--color--gvb-orange);
  color: var(--wp--preset--color--gvb-white);
}

/* ══════════════════════════════════════════════════════════════
   6. LAYOUT HELPERS
   ══════════════════════════════════════════════════════════════ */

.gvb-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--wp--preset--spacing--md);
  align-items: center;
}

.gvb-step-card {
  background-color: var(--wp--preset--color--gvb-graphite);
  color: var(--wp--preset--color--gvb-white);
  border-radius: var(--gvb-radius-md);
  padding: var(--wp--preset--spacing--md);
  position: relative;
}

/* ══════════════════════════════════════════════════════════════
   7. SHAPES
   ══════════════════════════════════════════════════════════════ */

/* Organic blob — CSS fallback only. Production uses SVG exports. */
.gvb-blob {
  border-radius: 60% 40% 55% 45% / 45% 55% 45% 55%;
}

.gvb-rounded-img {
  border-radius: var(--gvb-radius-md);
  overflow: hidden;
}

/* ══════════════════════════════════════════════════════════════
   8. HERO
   ══════════════════════════════════════════════════════════════ */

.gvb-hero {
  position: relative;
  overflow: hidden;
  /* Fluid floor: 604px at 1280 viewport (Figma's 1280 frame = our 1440 design)
     → 774px at 1920 viewport (Figma's 1920 frame = our new design baseline).
     Clamped at both ends. Below 1024 the @media override sets 400px. */
  min-height: clamp(604px, calc(264px + 26.5625vw), 774px);
  /* Tighten WP's default block-gap (`:where(.wp-site-blocks) > * { margin-block-start: 1.5rem }`)
     from 24px → 8px so the hero sits closer to the navbar — matches Figma's design. */
  margin-top: 8px;
  display: flex;
  align-items: center;
}

.gvb-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 20px;
}

.gvb-hero__bg--losungen {
  /* New image (2026-05-01): scale removed (was 1.45). object-fit: cover
     fills the container at natural framing. object-position kept for
     X-axis subject placement — adjust if subject needs reframing. */
  object-position: 100% 85% !important;
  transform: none;
}

/* FAQ hero: zoom + push subject toward LEFT of frame.
   - object-position: 100% center → max left via cropping
   - translateX(-13%) → further shifts the scaled image left,
     exposing more of its right side so subject moves further left.
   Risk: too negative a translateX exposes the container bg on the right.
   object-fit: cover keeps edges flush at scale(1.40). */
.gvb-hero__bg--faq {
  object-position: 100% center;
  transform: scale(1.40) translateX(-13%);
}

/* Shift subject higher in the visible crop on Impressum hero (Simon
   Fortmüller portrait). Hero is ~647px tall at viewport 1440. Higher
   Y_pos = visible window slides DOWN the source = subject appears
   HIGHER in frame. 60% ≈ 65px above default center. */
.gvb-hero__bg--impressum {
  object-position: center 60%;
}

.gvb-hero--losungen .gvb-hero__content,
.gvb-hero--bedrucken .gvb-hero__content,
.gvb-hero--industrie .gvb-hero__content,
.gvb-hero--faq .gvb-hero__content,
.gvb-hero--download .gvb-hero__content,
.gvb-hero--impressum .gvb-hero__content,
.gvb-hero--datenschutz .gvb-hero__content {
  margin-left: 55% !important;
  margin-right: 0 !important;
}

/* Per-page bottom-wave height overrides removed (April 2026): page bg now
   lives on .wp-site-blocks with a single locked --bg-h height, so the green
   region can't intrude into earlier sections regardless of page length. */

.gvb-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(109deg, rgba(0,0,0,0) 49%, rgba(0,0,0,0.2) 96%);
  z-index: 1;
  border-radius: 20px;
}

.gvb-hero__content {
  position: relative;
  z-index: 2;
  margin-left: auto;
}

/* ══════════════════════════════════════════════════════════════
   9. CASES CAROUSEL
   ══════════════════════════════════════════════════════════════ */

.gvb-cases {
  position: relative;
  overflow: hidden;
  /* Fluid min-height: 574 at viewport 1440, 765 at viewport 1920 — keeps
     the section's aspect ratio (~2.16:1) consistent with Figma's frame
     so the bg images don't get cropped tight on wide monitors.
     Caps at 765 above viewport 1920. ≤1440 unchanged (clamps to 574). */
  min-height: clamp(574px, 39.86vw, 765px);
  display: flex;
  flex-direction: column;
  /* Bottom margin removed (was 40px) — section now sits flush with
     whatever comes next. */
  margin-bottom: 0;
}

/* Our Bottles pages (DE + EN) only — add breathing room below the
   cases section. Other pages with cases (homepage, Lösungen, 5 industry
   sub-pages, Bedrucken) keep the default flush-to-next-section spacing.
   Scoped via slug body classes: DE slug `unsere-flaschen`, EN slug
   `our-bottles`. */
body.page-unsere-flaschen .gvb-cases,
body.page-our-bottles .gvb-cases {
  margin-bottom: 80px;
}

.gvb-cases__h3-break,
.gvb-mobile-br {
  display: none;
}

.gvb-cases__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  border-radius: 20px;
  transition: opacity 0.15s ease;
}

/* Per-case object-position overrides — JS swaps the src so we target by
   filename via the [src$=] attribute selector. Bottle in case 1 sits a
   bit too high without this; shift the visible window down. */
.gvb-cases__bg[src$="cases-bg-1.png"] {
  object-position: center 10%;
}

/* TEST (mobile/tablet only): swap all 4 case bgs to higher-res
   Cases_1-4.jpg via `content: url()` so the JS-driven src attribute
   logic stays intact (JS continues swapping src normally on tab
   change). Delete this block when testing is complete OR when the
   new images replace the originals cases-bg-1..4.png. */
@media (max-width: 1199px) {
  .gvb-cases__bg[src$="cases-bg-1.png"] { content: url('assets/img/Cases_1.jpg'); }
  .gvb-cases__bg[src$="cases-bg-2.png"] { content: url('assets/img/Cases_2.jpg'); }
  .gvb-cases__bg[src$="cases-bg-3.png"] { content: url('assets/img/Cases_3.jpg'); }
  .gvb-cases__bg[src$="cases-bg-4.png"] { content: url('assets/img/Cases_4.jpg'); }
}

.gvb-cases__bg[src$="cases-bg-4.png"] {
  object-position: center 15%;
}

.gvb-cases__tabs {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
}

.gvb-cases__tab {
  flex: 1;
  text-align: center;
  background: none;
  border: 1.5px solid transparent;
  border-radius: 50px;
  color: rgba(237, 232, 219, 0.55);
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 16px;
  cursor: pointer;
  letter-spacing: 0.08px;
  line-height: 1.2;
  transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}

.gvb-cases__tab.is-active {
  font-weight: 600;
  color: var(--wp--preset--color--gvb-linen);
  /* Bumped from 0.55 → 1 (crisp linen border) and 0.08 → 0.30 (more
     solid pill fill) so the active state reads stronger on any bg.
     Text-shadow keeps linen letters readable even when the cases bg
     image is light/white in the active card area. */
  border-color: rgba(237, 232, 219, 1);
  background: rgba(237, 232, 219, 0.30);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}

.gvb-cases__tab:hover:not(.is-active) {
  color: rgba(237, 232, 219, 0.85);
  border-color: rgba(237, 232, 219, 0.2);
}

.gvb-cases__tab:focus,
.gvb-cases__tab:focus-visible {
  outline: none;
}

.gvb-cases__panels {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.gvb-cases__panel {
  display: none;
  width: 100%;
}

.gvb-cases__panel.is-active {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  flex: 1;
}

/* Mobile arrow nav — hidden on desktop */
.gvb-cases__mobile-nav {
  display: none;
}

/* ══════════════════════════════════════════════════════════════
   10. PRODUCT CARDS
   ══════════════════════════════════════════════════════════════ */

.gvb-product-cards__track {
  display: flex;
  align-items: stretch;
  gap: clamp(12px, 1.4vw, 20px);
}

.gvb-product-card {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Background fills the BOTTOM HALF only (hard split at 50%).
   Top half is transparent so any future image with transparency in the
   upper region won't get a bg-color bleed-through behind the bottle.
   Bottom half is painted in the modifier color to catch content overflow
   below the wave-baked image and keep the card feeling continuous. */
.gvb-product-card--dark {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    var(--wp--preset--color--gvb-graphite) 50%,
    var(--wp--preset--color--gvb-graphite) 100%
  );
}

.gvb-product-card--orange {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    transparent 50%,
    var(--wp--preset--color--gvb-orange) 50%,
    var(--wp--preset--color--gvb-orange) 100%
  );
}

.gvb-product-card__media {
  display: block;
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}

.gvb-product-card__bg {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 0;
}

.gvb-product-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.gvb-product-card__content {
  /* Bottom-anchored: body bottom always 32px from card bottom; title
     sits above body with a fixed 12px gap. As body wraps to more
     lines, title moves UP (bottom→top text flow), card visual
     unchanged. Title now lives inside __content (in the pattern) and
     stacks above the body via the flex column + gap. */
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 13% 32px 7%;
}

.gvb-product-card__content--center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 40px;
  padding: 60px;
  height: 100%;
}

.gvb-product-card__title {
  /* Lives inside __content (flex column), above body with 12px gap.
     No absolute positioning — title moves up automatically as the
     body wraps to more lines.
     Base = 32px (carousel band 481–784). 3-grid band 785+ overridden
     by the @media (min-width: 785px) block above with proportional
     scaling. ≤480 mobile has its own restart+rescale clamp. */
  font-size: 32px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
  padding: 0;
}

.gvb-product-card__title--light {
  font-weight: 400;
  letter-spacing: -1.8px;
  line-height: 1.05;
}

.gvb-product-card__text {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: #fff;
  margin: 0;
}

/* 3-grid band (785–1440): scale typography + spacing proportionally
   with viewport, anchored at Figma 1280 values. Formula = Figma
   value × (viewport / 1280), capped at Figma max.
     Title         clamp(25px, 3.125vw,  40px)   [40 × vw / 1280]
     Body          clamp(12px, 1.25vw,   16px)   [16 × vw / 1280]
     Gap           clamp(8px,  0.9375vw, 12px)   [12 × vw / 1280]
     Padding-btm   clamp(20px, 2.5vw,    32px)   [32 × vw / 1280]
   At 1024 viewport: title 32, body 12.8, gap 9.6, padding-bottom
   25.6 — exact Figma 1280 × 0.8 conversion. At 785: title 25, body
   floor 12, gap 8, pad 20. Above 1280 all clamps hit max and stay
   there to 1440 baseline. Body has 12px floor (strict proportion
   gives 10 at 785 which is below readability).
   Carousel band 481–784 uses the base values (title 32, body 16,
   gap 12, padding-bottom 32) — user feedback: looks good, don't touch.
   IMPORTANT: this @media block must come AFTER the base rules above
   — same specificity, source-order-later wins. */
@media (min-width: 785px) {
  .gvb-product-card__title {
    font-size: clamp(25px, 3.125vw, 40px);
  }
  .gvb-product-card__text {
    font-size: clamp(12px, 1.25vw, 16px);
  }
  .gvb-product-card__content {
    gap: clamp(8px, 0.9375vw, 12px);
    padding-bottom: clamp(20px, 2.5vw, 32px);
  }
}

.gvb-btn--white {
  display: inline-block;
  background: #fff;
  color: var(--wp--preset--color--gvb-graphite);
  font-size: 12px;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: var(--gvb-radius-pill);
  text-decoration: none;
  letter-spacing: -0.54px;
  transition: opacity var(--gvb-transition);
}

.gvb-btn--white:hover {
  opacity: 0.85;
}

/* ══════════════════════════════════════════════════════════════
   11. TESTIMONIALS
   ══════════════════════════════════════════════════════════════ */

.gvb-testimonials {
  padding-left: 20px;
  padding-right: 20px;
}

.gvb-testimonials__cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  align-items: stretch;
}

.gvb-testimonial-card {
  flex: 1 1 0;
  min-width: 0;
  max-width: 360px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  padding: 32px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.02), 0px 12px 32px 0px rgba(0,0,0,0.04);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gvb-testimonial-card__stars {
  display: flex;
  gap: 7px;
}

.gvb-testimonial-card__stars img {
  width: 21px;
  height: 20px;
}

.gvb-testimonial-card__quote {
  font-size: 24px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.12px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-testimonial-card__name {
  font-size: 16px;
  font-weight: 400;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 2px;
}

.gvb-testimonial-card__role {
  font-size: 16px;
  color: var(--wp--preset--color--gvb-graphite);
  opacity: 0.5;
  margin: 0;
  letter-spacing: 0.08px;
}

/* ══════════════════════════════════════════════════════════════
   12. CLIENT LOGOS
   ══════════════════════════════════════════════════════════════ */

.gvb-logos {
  /* TEMP: section fully hidden while real client logos are pending.
     The inner `.gvb-logos__track` was previously hidden alone, but the
     section's 48px top/bottom padding was still creating visible empty
     space between sections. Bring back when logos go live. */
  display: none;
  padding: 48px 52px;
}

.gvb-logos__track {
  /* TEMP: hidden — current logos are placeholders pending real client logos. */
  display: none;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
}

.gvb-logos__item {
  color: rgba(43, 43, 43, 0.35);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.gvb-logos__item--pill {
  border: 2px solid currentColor;
  border-radius: 50px;
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ══════════════════════════════════════════════════════════════
   13. CONTACT FORM
   Source: Figma 780:7295 (closed) + 780:7296 (expanded)
   ══════════════════════════════════════════════════════════════ */

/* Section wrapper — override uneven inline padding; 20px inset applies at all widths */
.gvb-contact {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

.gvb-blog-all {
  padding-left: 20px !important;
  padding-right: 20px !important;
}

/* Columns body — image anchored to the left with 60px offset. */
.gvb-contact__body {
  align-items: flex-start !important;
  justify-content: center !important;
  padding-left: 0;
  gap: 89px !important;
}

/* Portrait image
   Figma: 420px × 755px, border-radius 36px, object-cover */
.gvb-contact__image-col {
  flex-basis: 620px !important;
}

/* ≥1440: let the image + form columns grow to fill the 2560-capped section
   instead of staying at their fixed flex-basis widths. Overrides the inline
   flex-basis so columns expand from 0 and share the body width equally. */
@media (min-width: 1440px) {
  .gvb-contact__body > .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1 !important;
  }
}

.gvb-contact__portrait img {
  width: 100%;
  height: 778px;
  object-fit: cover;
  object-position: center center;
  border-radius: 36px;
  display: block;
}

/* ── Fluent Forms input overrides ─────────────────────────────
   Figma: white bg, 2px border rgba(0,0,0,0.15), radius 12px,
          padding 12px 16px, height 45px, 16px Regular
   ────────────────────────────────────────────────────────────── */

/* Remove default Fluent Forms bottom border on field groups */
.gvb-contact__form-col .ff-el-group {
  border-bottom: none !important;
}
.gvb-contact__form-col .ff-t-container {
  border-bottom: none !important;
  gap: 16px; /* Figma: 16px column gap */
  margin-bottom: 24px; /* Figma: 24px vertical gap between rows */
}

.gvb-contact__form-col .ff-t-container:last-child {
  margin-bottom: 0;
}

/* The row that holds the file-upload field sits directly above the
   +/× expand toggle — drop its 24px gap so the toggle hugs the upload. */
.gvb-contact__form-col .ff-t-container:has(input[type="file"]) {
  margin-bottom: 0;
}
.gvb-contact__form-col .ff-el-form-control,
.gvb-contact__form-col .ff-el-form-control[type="text"],
.gvb-contact__form-col .ff-el-form-control[type="email"],
.gvb-contact__form-col .ff-el-form-control[type="tel"],
.gvb-contact__form-col select.ff-el-form-control {
  background-color: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  height: 45px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  width: 100%;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}

.gvb-contact__form-col textarea.ff-el-form-control {
  background-color: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  height: 172px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 400;
  font-family: inherit;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  transition: border-color 0.15s ease;
  box-shadow: none;
}

.gvb-contact__form-col .ff-el-form-control::placeholder,
.gvb-contact__form-col textarea.ff-el-form-control::placeholder {
  color: rgba(43, 43, 43, 0.25);
}

.gvb-contact__form-col .ff-el-form-control:focus,
.gvb-contact__form-col textarea.ff-el-form-control:focus {
  border-color: var(--wp--preset--color--gvb-green);
  outline: none;
  box-shadow: none;
}

/* Select chevron — 16px icon at right: 16px */
.gvb-contact__form-col .ff-el-select-wrapper {
  position: relative;
}

.gvb-contact__form-col select.ff-el-form-control {
  padding-right: 40px;
  cursor: pointer;
  line-height: 1;
  min-height: 45px;
}

.gvb-contact__form-col .ff-el-select-wrapper::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

/* Field labels — wrapper is flex so label + optional Fluent Forms tooltip
   icon (`.ff-el-tooltip`, rendered as a sibling of the <label>) sit on the
   same row. Before this, `display: block` on the <label> forced the
   inline-block tooltip to wrap below, which added ~20px of vertical
   space and misaligned fields that have a Helper Text (e.g. Menge). */
.gvb-contact__form-col .ff-el-input--label {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.gvb-contact__form-col .ff-el-input--label label {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  display: inline;
  margin-bottom: 0;
}

/* Recolour Fluent Forms tooltip icon (default: blue via --fluentform-primary)
   to our brand orange, with hover state matching the buttons. */
.gvb-contact__form-col .ff-el-tooltip svg {
  fill: var(--wp--preset--color--gvb-orange);
  width: 16px;
  height: 16px;
  transition: fill 0.2s ease;
}

.gvb-contact__form-col .ff-el-tooltip:hover svg {
  fill: var(--wp--preset--color--gvb-orange-hover);
}

/* Vertical gap between standalone field rows: 24px */
.gvb-contact__form-col .ff-el-group {
  margin-bottom: 24px;
}

.gvb-contact__form-col .ff-el-group:last-child {
  margin-bottom: 0;
}

/* No extra margin on field groups inside containers (container handles the gap) */
.gvb-contact__form-col .ff-t-cell .ff-el-group {
  margin-bottom: 0;
}

/* ── Submit button ────────────────────────────────────────────
   Figma: #F28C3B, border-radius ~52px, height 42px, w ~114px,
          Bold 12px white, right-aligned.
   Scoped to .ff-btn-submit (the actual class FF emits on the
   submit <button>) so it doesn't hijack the File Upload dropzone
   trigger (.ff_upload_btn .ff-btn — no .ff-btn-submit). Beats
   FF's own inline <style> via wp_footer that applies the form's
   default background_color (#1a7efb blue).
   ────────────────────────────────────────────────────────────── */
.gvb-contact__form-col .ff-btn-submit {
  background-color: var(--wp--preset--color--gvb-orange) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 52px !important;
  height: 42px !important;
  min-width: 114px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  will-change: transform;
  transition: background-color 0.2s ease, transform 0.3s ease !important;
}

.gvb-contact__form-col .ff-btn-submit:hover {
  background-color: var(--wp--preset--color--gvb-orange-hover) !important;
  transform: scale(1.08) !important;
}

.gvb-contact__form-col .ff-submit-container,
.gvb-contact__form-col .ff-el-form-submit {
  display: flex;
  justify-content: flex-end;
  padding-top: 16px;
}

/* ── Success message after form submit ──────────────────────── */
.gvb-contact__form-col .ff-message-success {
  background-color: var(--wp--preset--color--gvb-orange);
  color: var(--wp--preset--color--gvb-linen);
  border: none;
  border-radius: 20px;
  padding: 48px 40px;
  margin-top: 120px;
  min-height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08px;
}

.gvb-contact__form-col .ff-message-success::before {
  content: '';
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 20px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--gvb-linen);
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12.5L10 17.5L19 7.5' stroke='%23F28C3B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ── Expandable trigger row ───────────────────────────────────
   In FF admin: Custom HTML field → Container CSS Class: gvb-trigger-group
   Figma (closed): border-top + border-bottom rgba(0,0,0,0.1) 2px, h 91px
   Figma (expanded): border-top only — bottom removed when open
   ────────────────────────────────────────────────────────────── */
.gvb-trigger-group {
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0 !important;
}

.gvb-trigger-group .ff-el-input--content,
.gvb-trigger-group .ff-el-form-el-container {
  padding: 0;
  margin: 0;
}

/* Remove bottom border when expanded */
.gvb-trigger-group.is-expanded {
  border-bottom: none;
}

/* The flex row inside the Custom HTML */
.gvb-expand-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 91px;
  padding: 2px 0;
}

/* Figma: 15px Regular, black, letter-spacing 0.75px.
   Max-width is fluid: 480px ≤1440 → scales to 854px at 2560 (1.778× ratio
   matching the outer-shell cap) so the trigger text spreads across the
   wider form column instead of stacking into a narrow block. */
.gvb-expand-trigger__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 1.38;
  letter-spacing: 0.75px;
  color: #000000;
  max-width: clamp(480px, 33.33vw, 854px);
  margin: 0;
}

/* Figma: orange circle 55px, bg #F28C3B */
.gvb-expand-trigger__btn {
  flex-shrink: 0;
  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background-color: var(--wp--preset--color--gvb-orange);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  will-change: transform;
  transition: background-color 0.2s ease, transform 0.3s ease;
}

.gvb-expand-trigger__btn:hover {
  background-color: var(--wp--preset--color--gvb-orange-hover);
  transform: scale(1.08);
}

/* + icon via pseudo-elements — rotates to × when open */
.gvb-expand-trigger__btn::before,
.gvb-expand-trigger__btn::after {
  content: '';
  position: absolute;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s ease;
}

/* horizontal bar */
.gvb-expand-trigger__btn::before {
  width: 20px;
  height: 2px;
}

/* vertical bar */
.gvb-expand-trigger__btn::after {
  width: 2px;
  height: 20px;
}

/* both bars rotate 45° to form × when open */
.gvb-expand-trigger__btn.is-open::before {
  transform: rotate(45deg);
}

.gvb-expand-trigger__btn.is-open::after {
  transform: rotate(45deg);
}

/* ── File format note ─────────────────────────────────────────
   Inside trigger Custom HTML: <div class="gvb-file-note">...</div>
   Figma: 10px Regular graphite — hidden by default, shown when expanded
   ────────────────────────────────────────────────────────────── */
.gvb-file-note {
  display: none;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 16px;
}

.gvb-file-note.is-visible {
  display: block;
}

/* ── Expanded section container ───────────────────────────────
   In FF admin: Container block → Container CSS Class: gvb-form-expanded-container
   Hidden by default; has border-bottom (Figma: the checkbox row closes the section visually)
   ────────────────────────────────────────────────────────────── */
.gvb-form-expanded-container {
  display: none !important;
  border-bottom: 2px solid rgba(0, 0, 0, 0.1);
  margin-bottom: 0 !important;
}

.gvb-form-expanded-container.is-open {
  display: block !important;
  animation: gvbSlideDown 0.25s ease;
}

/* When the expanded container IS the FF two-column container,
   restore flex so columns sit side by side, and match row spacing */
.gvb-form-expanded-container.is-open.ff-t-container {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 16px;
  margin-bottom: 8px !important;
}

.gvb-contact__form-col .ff-t-container.ff_columns_total_2:has(.gvb-form-expanded-container) {
  margin-bottom: 8px !important;
}

.gvb-form-expanded-container.is-open.ff-t-container > .ff-t-cell {
  flex: 1 1 0 !important;
  min-width: 0;
}

@keyframes gvbSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Gap between rows inside expanded container */
.gvb-form-expanded-container .ff-el-group {
  margin-bottom: 24px;
}

.gvb-form-expanded-container .ff-el-group:last-child {
  margin-bottom: 0;
}

.gvb-form-expanded-container .ff-el-form-el-container,
.gvb-form-expanded-container > .ff-t-container {
  padding-top: 8px;
  padding-bottom: 16px;
}

/* ── Modell & Verschluss placeholders via :has() + ff_excluded ─
   Fluent Forms adds .ff_excluded to hidden conditional fields.
   :has() detects when ALL fields in a cell are excluded and shows
   a fake label + dropdown via pseudo-elements (display:block flow).
   ────────────────────────────────────────────────────────────── */

/* Modell — col 2 of gvb-field--material, when all Modell fields are hidden */

/* Push the cell down to match the Material field's label vertical start */
.gvb-field--material.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded))) {
  padding-top: 0;
}

.gvb-field--material.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Modell';
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 6px;
}

:lang(en) .gvb-field--material.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Model';
}

.gvb-field--material.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  box-shadow: none;
}

/* Verschluss — col 1 of gvb-field--verschluss, when all Verschluss fields are hidden */

/* Push the cell down to match the Menge field's label vertical start */
.gvb-field--verschluss.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded))) {
  padding-top: 0;
}

.gvb-field--verschluss.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Verschluss';
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 6px;
}

:lang(en) .gvb-field--verschluss.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Closure';
}

.gvb-field--verschluss.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  box-shadow: none;
}

/* Menge — col 2 of gvb-field--verschluss, when Menge field is hidden.
   Visual style now matches the other skeleton placeholders (chevron
   on the right) for consistency, even though Menge is a number input. */

.gvb-field--verschluss.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded))) {
  padding-top: 0;
}

.gvb-field--verschluss.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Menge';
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 6px;
}

:lang(en) .gvb-field--verschluss.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Quantity';
}

.gvb-field--verschluss.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  box-shadow: none;
}

/* Größe — col 1 of gvb-field--size-color, when all Größe fields are hidden */

.gvb-field--size-color.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded))) {
  padding-top: 0;
}

.gvb-field--size-color.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Größe';
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 6px;
}

:lang(en) .gvb-field--size-color.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Size';
}

.gvb-field--size-color.ff-t-container
  .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded)))::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  box-shadow: none;
}

/* Farbe — col 2 of gvb-field--size-color, when all Farbe fields are hidden */

.gvb-field--size-color.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded))) {
  padding-top: 0;
}

.gvb-field--size-color.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Farbe';
  display: block;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 6px;
}

:lang(en) .gvb-field--size-color.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::before {
  content: 'Color';
}

.gvb-field--size-color.ff-t-container
  .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded)))::after {
  content: '';
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 45px;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%232B2B2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  box-shadow: none;
}

/* ── Menge helper text ────────────────────────────────────────
   Set via FF admin → Menge field → Helper Text
   Figma: 10px Regular graphite
   ────────────────────────────────────────────────────────────── */
.gvb-contact__form-col .ff-el-help-message {
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--gvb-graphite);
  margin-top: 4px;
}

/* ── File Upload field (Dropzone mode) ────────────────────────
   FF admin: File Upload field → Container Class: gvb-field--file-upload
   • Top spacing so it doesn't crush against the row above
   • Scoped help-message override (some FF builds hide it inside
     the dropzone wrapper — force display + position below)
   ────────────────────────────────────────────────────────────── */
.gvb-field--file-upload {
  margin-top: 32px;
  margin-bottom: 32px;
}

/* Dropzone border — FF's default rule
   (.fluentform .ff-dropzone .ff_upload_btn.ff-btn) sets a 1px
   dashed border via var(--fluentform-primary) which is blue.
   Override on the actual element (the inner span, not the outer
   label) with a subtle grey matching the form's input borders. */
.gvb-field--file-upload .ff_upload_btn.ff-btn {
  border-color: rgba(0, 0, 0, 0.15) !important;
}

.gvb-field--file-upload .ff_upload_btn.ff-btn:hover {
  border-color: rgba(0, 0, 0, 0.30) !important;
}

.gvb-field--file-upload .ff-el-help-message {
  display: block !important;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--wp--preset--color--gvb-graphite);
}

/* ── Personalisierung checkbox ────────────────────────────────
   In FF admin: Container CSS Class: gvb-checkbox--personalisierung
   Figma: 45×45px, border-radius 8px, white bg, 2px border rgba(0,0,0,0.15)
   ────────────────────────────────────────────────────────────── */
.gvb-checkbox--personalisierung .ff-el-form-check {
  padding: 18px 0 !important;
}

.gvb-checkbox--personalisierung .ff-el-form-check-label {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: #000000;
  cursor: pointer;
}

.gvb-checkbox--personalisierung .ff-el-form-check-input {
  flex-shrink: 0;
  width: 45px !important;
  height: 45px !important;
  min-width: 45px !important;
  border: 2px solid rgba(0, 0, 0, 0.15) !important;
  border-radius: 8px !important;
  background-color: #ffffff !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  cursor: pointer;
  margin: 0 !important;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.gvb-checkbox--personalisierung .ff-el-form-check-input:checked {
  background-color: var(--wp--preset--color--gvb-orange) !important;
  border-color: var(--wp--preset--color--gvb-orange) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 12L10 17L19 8' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 24px !important;
}

/* ══════════════════════════════════════════════════════════════
   13b. FAQ
   ══════════════════════════════════════════════════════════════ */

.gvb-faq__item {
  background: var(--wp--preset--color--gvb-linen);
  border-radius: 20px;
  padding: 28px 40px;
  margin-bottom: 24px;
  box-shadow: 0 25px 33px -15px rgba(149, 149, 149, 0.25);
}

.gvb-faq__question {
  font-size: 18px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.09px;
  color: var(--wp--preset--color--gvb-graphite);
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-left: 32px;
}

.gvb-faq__question::-webkit-details-marker {
  display: none;
}

.gvb-faq__question::before {
  content: '+';
  position: absolute;
  left: 0;
  color: var(--wp--preset--color--gvb-orange);
  top: -4px;
  font-size: 25px;
  font-weight: 700;
  color: var(--wp--preset--color--gvb-orange);
  transition: transform var(--gvb-transition);
}

.gvb-faq__item[open] .gvb-faq__question::before {
  content: '−';
  color: var(--wp--preset--color--gvb-green);
}

.gvb-faq__answer {
  margin-top: 16px;
  padding-left: 32px;
}

/* Note: ul/ol intentionally omitted from this selector list. CSS opacity
   multiplies through the cascade — applying 0.7 to both <ul> and <li>
   would render list items at 0.7 × 0.7 = 0.49, lighter than paragraphs.
   Setting opacity only on p + li keeps bullets and paragraphs at the
   same effective tone. */
.gvb-faq__answer p,
.gvb-faq__answer li {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  opacity: 0.7;
}

/* ── FAQ smooth expand/collapse (fixes the wave "jump" on question click)
   Native <details> snaps open/closed in one frame, which cascades into
   a sudden page-height change and the bottom wave pseudo-element appears
   to shift. Animating ::details-content with block-size: 0 → auto (via
   interpolate-size) stretches that change across 300ms, so the eye reads
   it as smooth motion instead of a jump.
   Wrapped in @supports so Firefox (no ::details-content support yet)
   falls back to native instant open — nothing breaks. */
@supports (interpolate-size: allow-keywords) {
  :root {
    interpolate-size: allow-keywords;
  }

  .gvb-faq__item::details-content {
    /* `display: block` is critical: the UA stylesheet sets ::details-content
       to display:none when [open] is removed, which kills the close
       transition. Forcing block keeps the box around so block-size and
       opacity can animate down to 0. */
    display: block;
    block-size: 0;
    opacity: 0;
    overflow: hidden;
    /* content-visibility with allow-discrete keeps the content rendered
       during the close animation; without it the content is yanked
       instantly when [open] flips, which reads as a jump. */
    content-visibility: hidden;
    will-change: block-size, opacity;
    /* 500ms ease-out cubic, applied symmetrically to both directions. */
    transition: block-size 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                content-visibility 0.5s allow-discrete;
  }

  .gvb-faq__item[open]::details-content {
    block-size: auto;
    opacity: 1;
    content-visibility: visible;
  }
}

/* "→ Alle weiteren FAQs findest du hier." bottom-right link */
.gvb-faq:has(.gvb-faq__more-link) {
  padding-bottom: 16px !important;
}

.gvb-faq__more-link {
  margin-top: 16px;
  margin-bottom: 0;
  text-align: right;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.32px;
}

.gvb-faq__more-link a {
  color: var(--wp--preset--color--gvb-linen);
  text-decoration: none;
  font-weight: 400;
  transition: opacity 0.2s ease;
}

.gvb-faq__more-link a:hover {
  opacity: 0.8;
}

.gvb-faq__more-link-arrow {
  font-weight: 300;
  margin-right: 4px;
}

/* ══════════════════════════════════════════════════════════════
   14. BRAND PROMISE CTA
   ══════════════════════════════════════════════════════════════ */

.gvb-brand-promise {
  position: relative;
  /* Override `.wp-site-blocks > * { z-index: 1 }`. Brand-promise sits at
     z-index: 0 (still creating its own stacking context) so sibling sections
     above it (cases, contact, etc.) at z-index: 1 paint OVER our pseudo's
     overflow into their vertical territory. */
  z-index: 0;
}

/* Bottom wave — anchored to brand-promise's top edge (was on
   .wp-site-blocks::before, which caused massive CLS because the wave's
   anchor moved with the page bottom as below-the-fold content streamed in).
   Painting order: pseudo's z-index: -1 inside brand-promise's z-index: 0
   stacking context puts it behind brand-promise's text/buttons. The whole
   stacking context paints below z-index: 1 sibling sections, so where the
   pseudo overflows above brand-promise into cases/contact territory, those
   sections paint over it.
   `bottom: calc(100% - var(--bottom-wave-push-down, 0px))` lets per-page
   overrides push the wave's bottom edge DOWN below brand-promise's top
   (used by FAQ + Download to land the wave below the long content area). */
.gvb-brand-promise::before {
  content: '';
  position: absolute;
  /* Span full viewport width regardless of brand-promise's 64px horizontal
     padding. With `left: 0; right: 0` the pseudo would be inset by 64px each
     side (absolute children reference containing-block padding edge). The
     viewport-width approach pins the pseudo at brand-promise's horizontal
     center then sets width: 100vw. Safe with .wp-site-blocks's overflow:
     hidden which clips any scrollbar overlap. */
  left: 50%;
  right: auto;
  width: 100vw;
  transform: translateX(-50%);
  /* `-2px` makes the pseudo's bottom edge overlap brand-promise's top by 2px,
     hiding sub-pixel rounding gaps at fluid-scaled viewports (1440+). The
     overlap is covered by brand-promise's green bg. On FAQ/Download where
     brand-promise has transparent bg, the wave's bottom rows are solid green
     anyway so no visible difference. */
  bottom: calc(100% - var(--bottom-wave-push-down, 0px) - 2px);
  height: var(--bg-h);
  background-image: url('assets/svg/background-large-bottom.svg');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  z-index: -1;
  pointer-events: none;
}

/* FAQ + Download pages — remove the green background on brand-promise.
   Targets the WP color class with !important to defeat the inline
   has-gvb-green-background-color. Scoped via body slug classes:
   - .page-faq covers DE (slug: faq) AND EN (slug: faq, same slug)
   - .page-download covers DE Download
   - .page-downloads covers EN Download (different slug — plural). */
.page-faq .gvb-brand-promise.has-gvb-green-background-color,
.page-download .gvb-brand-promise.has-gvb-green-background-color,
.page-downloads .gvb-brand-promise.has-gvb-green-background-color {
  background-color: transparent !important;
}

/* FAQ + Download pages — push the bottom-wave further down so it sits
   below the brand-promise section instead of behind its top edge.
   New variable semantics (post wave-architecture refactor): higher value
   = wave's bottom edge sits FURTHER BELOW brand-promise's top. Default is
   0 (wave bottom AT brand-promise's top). FAQ/Download push it down so
   the wave clears their long accordion/list content. Per-tier tunes
   because page height changes a lot per viewport. Same selector triplet
   as the brand-promise rule. */
body.page-faq,
body.page-download,
body.page-downloads {
  --bottom-wave-push-down: 550px;
}
@media (max-width: 1024px) {
  body.page-faq,
  body.page-download,
  body.page-downloads { --bottom-wave-push-down: 532px; }
}

/* Tablet/Laptop band (785-1024) — shrink hero H1 a few px so long
   industry titles ("Umweltbewusste und nachhaltige Unternehmen") fit
   within the 55%-offset content area without overflowing.
   Original fluid clamp resolves to ~54px at 1024 / ~46px at 785;
   this override drops to 50/40. !important needed to beat the
   inline font-size set in each hero pattern. */
@media (max-width: 1024px) and (min-width: 785px) {
  .gvb-hero h1,
  .gvb-hero .wp-block-heading {
    /* At 1024: 48 (was 50, -2). At 785: 40 (unchanged). */
    font-size: clamp(40px, calc(13.73px + 3.347vw), 48px) !important;
  }

  /* Shift hero content left a bit (55% → 45%) so long industry H1s
     get more breathing room. Desktop ≥1025 keeps the original 55%
     for the hero photo-on-left + text-on-right layout. */
  .gvb-hero--losungen .gvb-hero__content,
  .gvb-hero--bedrucken .gvb-hero__content,
  .gvb-hero--industrie .gvb-hero__content,
  .gvb-hero--faq .gvb-hero__content,
  .gvb-hero--download .gvb-hero__content,
  .gvb-hero--impressum .gvb-hero__content,
  .gvb-hero--datenschutz .gvb-hero__content {
    margin-left: 45% !important;
  }
}
@media (max-width: 768px) {
  body.page-faq,
  body.page-download,
  body.page-downloads { --bottom-wave-push-down: 350px; }
}
@media (max-width: 480px) {
  body.page-faq,
  body.page-download,
  body.page-downloads { --bottom-wave-push-down: 360px; }
}
@media (max-width: 375px) {
  body.page-faq,
  body.page-download,
  body.page-downloads { --bottom-wave-push-down: 390px; }
}
@media (max-width: 320px) {
  body.page-faq,
  body.page-download,
  body.page-downloads { --bottom-wave-push-down: 450px; }
}

/* Brand-promise green background bleeds full viewport width at every size
   (like the footer) — never caps at the 2560 outer-shell ceiling. !important
   is required to beat .wp-site-blocks > *:not(.gvb-header) (0,2,0 specificity)
   which would otherwise cap the element at 2560. The inner content stays
   constrained by its own `contentSize: 808px` layout, so text/buttons don't
   stretch — only the green background fills the viewport. */
.alignfull.gvb-brand-promise {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: 100%;
}

/* Close the WP block-gap between brand-promise and the footer template-part
   so the bottom wave pseudo-element doesn't peek through the transparent gap.
   Also overrides the 2560 outer-shell cap so the footer's linen background
   bleeds to the viewport edges on ultra-wide screens. Specificity (0,3,0)
   beats the .wp-site-blocks > *:not(.gvb-header) rule (0,2,0). */
.wp-site-blocks > .wp-block-template-part:last-child {
  margin-top: 0;
  max-width: none;
}

/* ══════════════════════════════════════════════════════════════
   15. RESPONSIVE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .gvb-split {
    gap: var(--wp--preset--spacing--sm);
  }
}

@media (max-width: 784px) {
  .gvb-header {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Shrink logo on mobile/tablet so header band stays compact */
  .gvb-header__logo {
    width: 120px !important;
  }
  .gvb-header__logo img,
  .gvb-header__logo a {
    width: 120px !important;
    max-width: 120px !important;
    height: auto !important;
  }

  /* Navbar is static at ≤784px (see section 3 HEADER), so no padding-top
     reserve is needed here — content flows naturally below the header. */

  .gvb-footer {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gvb-footer__inner {
    flex-direction: column;
    gap: 48px !important;
  }

  .gvb-footer__nav {
    flex-wrap: wrap;
  }

  .gvb-hero {
    min-height: 400px;
    margin-left: 12px !important;
    margin-right: 12px !important;
    /* Tighten heavy desktop padding (110/120 vertical, 64 lateral) for
       mobile rhythm. Apple/iOS-aligned: 48-64pt verticals on phones,
       lateral 32px to give long German titles room without cramping
       against the 20px card border-radius. */
    padding-top: 48px !important;
    padding-bottom: 64px !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
  }

  .gvb-single-hero {
    min-height: 400px !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    /* Override the inline 64px lateral padding (set in templates/
       single.html + single-en_post.html). On a 360px phone the
       inline padding leaves only ~208px of content width — long
       German compounds like "Borosilikatglas" can't fit and break
       mid-word. 20px lateral restores ~296px content width. */
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Mobile section-padding tightening (Apple HIG-aligned).
     Desktop inline values (80/120 etc.) are too generous for phone
     viewports. These overrides cut the cumulative section gaps from
     up to 200px → 48-96px range, closer to iOS/Material conventions
     for distinct content zones on small screens.
     Lateral padding untouched — only vertical. */
  .gvb-intro-text {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .gvb-contact {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .gvb-brand-promise.alignfull {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* Industry benefits + Bedrucken statement (--industry variant of
     Personalisieren): tighter bottom padding on mobile (80 → 40)
     to keep the page rhythm compact on phones. Top remains 0
     (inherited from .gvb-personalisieren--industry base rule).
     !important required because the base `.gvb-personalisieren {
     padding: 80px 20px }` rule is LATER in source and would otherwise
     win via cascade order. */
  .gvb-personalisieren--industry {
    padding-bottom: 20px !important;
  }

  /* Blog article H1 only — scale down on mobile/tablet. Long blog titles
     break the layout at the desktop 47–65px size. Scoped to .gvb-single-hero
     so blog home, category, and all other heroes stay untouched.
     Doubled class to bump specificity (0,3,0) — the desktop rule at line
     ~3847 has the same selector + !important and comes later in source,
     so equal specificity loses to source-order without this bump. */
  .gvb-single-hero .wp-block-post-title.wp-block-post-title {
    font-size: clamp(24px, 5vw, 36px) !important;
    letter-spacing: -0.8px !important;
    /* German compounds (Borosilikatglas, Bildungseinrichtungen, etc.)
       can still overflow narrow phones even after the 64→20px padding
       cut. hyphens: auto reads the <html lang> attribute and breaks at
       proper hyphenation points (Boro-silikat-glas) instead of randomly
       mid-word. overflow-wrap: break-word is a fallback for words that
       have no hyphenation dictionary entry — only triggers as last
       resort, never before whitespace breaks. */
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
  }

  /* Blog article hero — uniform dark overlay on mobile so the title stays
     legible. Matches the .gvb-hero__overlay rgba(0,0,0,0.28) used elsewhere.
     Overrides the inline side-gradient set on the cover block.
     opacity:1 needed because WP's .has-background-dim-50 class sets
     opacity:0.5 on the span — without this our rgba would render at
     ~0.14 effective alpha (basically invisible). */
  .gvb-single-hero .wp-block-cover__background {
    background: rgba(0, 0, 0, 0.28) !important;
    opacity: 1 !important;
  }

  .gvb-hero__content {
    margin-left: 0;
  }

  .gvb-cases {
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* Hide text tabs on mobile — replaced by arrow nav */
  .gvb-cases__tabs {
    display: none !important;
  }

  /* Arrow nav: absolutely centered on left/right edges of the card */
  .gvb-cases__mobile-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 3;
    pointer-events: none;
    padding: 0 12px;
  }

  .gvb-cases__nav {
    pointer-events: all;
    /* Match the .gvb-carousel-nav style used on Anlass + Product cards:
       solid linen circle with graphite chevron + drop shadow. */
    background: var(--wp--preset--color--gvb-linen);
    border: none;
    color: var(--wp--preset--color--gvb-graphite);
    line-height: 1;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
  }

  .gvb-cases__nav:disabled {
    opacity: 0.3;
    cursor: default;
  }

  .gvb-cases__nav:not(:disabled):active {
    background: rgba(255, 255, 255, 0.35);
  }

  .gvb-cases__panel h3.wp-block-heading {
    font-size: 18px !important;
  }

  .gvb-cases__h3-break,
  .gvb-mobile-br {
    display: block;
  }

  .gvb-cases__panel h4.wp-block-heading {
    font-size: 24px !important;
    margin-top: 0;
  }

  /* Lösungen intro mobile: align with the canonical .gvb-flaschen-intro
     mobile rules (used by Flaschen, Edelstahl, Borosilikat, Tritan,
     Bedrucken + 5 industry pages). Section gets the same 48px 20px
     padding; paragraph gets 20px font-size with no other overrides
     — line-height + letter-spacing inherit from the inline style on
     the <p>, matching every other intro. */
  .gvb-losungen-intro {
    padding: 48px 20px !important;
  }

  .gvb-losungen-intro p {
    font-size: 20px;
  }

  .gvb-testimonials {
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow-x: hidden;
  }

  .gvb-testimonials__cards {
    flex-direction: column !important;
    flex-wrap: wrap !important;
    overflow-x: visible;
  }

  .gvb-testimonial-card {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
  }

  .gvb-testimonial-card__quote {
    font-size: 16px;
  }

  .gvb-testimonial-card__name,
  .gvb-testimonial-card__role {
    font-size: 14px;
  }

  .gvb-contact__portrait img {
    height: 400px;
  }

  /* Trigger: smaller button on tablet */
  .gvb-expand-trigger__btn {
    width: 48px;
    height: 48px;
  }

  .gvb-expand-trigger__text {
    font-size: 13px;
  }

  .gvb-intro-text {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }

  .gvb-faq__grid {
    flex-direction: column;
  }

  .gvb-split {
    grid-template-columns: 1fr;
  }

  /* Scale down headings for tablet */
  h1, .has-h-1-font-size { font-size: 42px !important; }
  h2, .has-h-2-font-size { font-size: 30px !important; }
  h3, .has-h-3-font-size { font-size: 26px !important; }
  h6, .has-h-6-font-size { font-size: 24px !important; }
  .has-display-font-size  { font-size: 48px !important; }
}

/* ══════════════════════════════════════════════════════════════
   UNSERE LÖSUNGEN PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Shared button styles ── */
.gvb-btn-sm {
  display: inline-block;
  background: var(--wp--preset--color--gvb-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 51px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--gvb-transition);
}
.gvb-btn-sm:hover { opacity: 0.85; }

.gvb-btn-primary {
  display: inline-block;
  background: var(--wp--preset--color--gvb-orange);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 51px;
  text-decoration: none;
  transition: opacity var(--gvb-transition);
}
.gvb-btn-primary:hover { opacity: 0.85; }

/* ── Industry cards (Branchen section) ── */
.gvb-branchen {
  padding-left: 20px;
  padding-right: 20px;
}

.gvb-branchen__heading {
  margin-bottom: 32px !important;
}

.gvb-industry-grid {
  display: grid;
  gap: 20px;
  height: 723px;
  margin-bottom: 20px;
}

/* Grid 1: 2 stacked left, 1 tall right */
.gvb-industry-grid--left-stacked {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}
.gvb-industry-grid--left-stacked .gvb-industry-card--tall {
  grid-column: 2;
  grid-row: 1 / -1;
}

/* Grid 2: 2 equal tall cards side by side */
.gvb-industry-grid--two-tall {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

.gvb-industry-card {
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  background: var(--wp--preset--color--gvb-graphite);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}

.gvb-industry-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Gesundheitswesen card — shift the cover crop hard left so the subject
   sits where the card framing wants it. Other industry cards untouched. */
.gvb-industry-card img[src*="gesundpersonal"] {
  object-position: 5% center;
}

.gvb-industry-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 55%);
  z-index: 1;
}

.gvb-industry-card__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.gvb-industry-card__content h5 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.16px;
  color: #fff;
  margin: 0;
}

/* ── Personalisieren section (2×2 image cards with wave blob) ── */
.gvb-personalisieren {
  padding: 80px 20px;
}

/* Industry-page benefits variant — all 5 industrie-benefits-{slug}
   patterns sit directly below the industry intro paragraph and need
   the 80px top padding removed so they hug the section above. The
   modifier captures intent (this is the industry variant of the
   Personalisieren grid), so future industry-only styling can land
   here in one place. */
.gvb-personalisieren--industry {
  padding-top: 0;
}

.gvb-personalisieren__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 32px;
}

.gvb-personalisieren__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Personalisieren card — product-card overlay pattern (2026-05-01).
   Card has a fixed aspect ratio so heights match in the grid. Image
   fills the card. __content overlays the bottom with title + desc
   stacked via flex column + gap. As desc wraps to more lines,
   __content grows UPWARD (its `bottom: 0` anchor stays put), so the
   title gets pushed up — card height unchanged.
   Same mechanic as `.gvb-product-card` (project_card_scaling_system.md). */
.gvb-personalisieren-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  min-height: 0;
}

.gvb-personalisieren-card__media {
  display: contents;
}

.gvb-personalisieren-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.gvb-personalisieren-card__title {
  position: relative;
  z-index: 2;
  /* Card-width-proportional: 6.56% of card width (Figma 1280: 40/610).
     Card width in 2-col grid = (vw-60)/2 → title = 3.28vw - 1.97px.
     Floor 20 keeps it readable at narrow tablets; max 40 at viewport
     1280 (Figma reference). Above 1440 the existing fluid block
     scales 40→53. Below 481 the ≤480 mobile clamp takes over. */
  font-size: clamp(20px, calc(3.28vw - 1.97px), 40px);
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

.gvb-personalisieren-card__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 60px 36px 32px;
}

.gvb-personalisieren-card__desc {
  /* Card-width-proportional: 2.62% of card width (Figma 1280: 16/610).
     Card width in 2-col grid = (vw-60)/2 → desc = 1.31vw - 0.787px.
     Floor 13 (readable at narrow tablets); max 16 at viewport 1280.
     Above 1440 the existing fluid block scales 16→21. Below 481 the
     ≤480 mobile clamp takes over. */
  font-size: clamp(13px, calc(1.31vw - 0.787px), 16px);
  line-height: 1.2;
  /* letter-spacing matches Figma 1280 design (0.5px) — was 0.08px. */
  letter-spacing: 0.5px;
  color: #fff;
  margin: 0;
}

@media (max-width: 1024px) {
  /* ── Personalisieren cards at ≤1024 ──
     Same overlay pattern as desktop. Font-size handled by base rule's
     card-width-proportional clamps (3.28vw / 1.31vw) — no static
     override here, so titles + desc shrink as the card width shrinks
     (proportional to Figma 1280 design). Padding tightened for the
     narrower cards in this band. */
  .gvb-personalisieren-card__title {
    line-height: 1.1;
  }

  .gvb-personalisieren-card__content {
    padding: 0 24px 24px;
  }

  .gvb-personalisieren-card__desc {
    line-height: 1.4;
    letter-spacing: 0.1px;
  }

}

/* ── Branding section ── */
.gvb-branding__inner {
  display: flex;
  gap: 52px;
  align-items: center;
  justify-content: center;
}

/* Branding section scales fluidly with the viewport via clamp():
   - Section caps at 1650 (matches universal content cap, Figma 1920 baseline)
   - Image width grows from 501 → 653 between viewports ~1473 → 1920
   - Image height grows from 489 → 522 proportionally
   - Content max-width grows from 603 → 783, capping at viewport 1920
   At viewport 1920: image 653 + gap 52 + content 783 = 1488 → 162px slack
   inside section cap 1650, distributed as 81px each side via __inner's
   `justify-content: center`. ≤1440 unchanged. */
.gvb-branding {
  max-width: 1650px !important;
  margin-inline: auto !important;
}

.gvb-branding__image {
  flex: 0 0 clamp(501px, 34.01vw, 653px);
  height: clamp(489px, 27.19vw, 522px);
  border-radius: 16px;
  overflow: hidden;
}

.gvb-branding__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gvb-branding__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: clamp(603px, 40.78vw, 783px);
}

.gvb-branding__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-branding__text {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

/* Branding "Mehr erfahren" CTA — base `.gvb-btn-primary` only transitions
   opacity + transform; add background-color transition + the hover colour
   swap so the button matches the other orange CTAs (flaschen-cards, etc.). */
.gvb-branding .gvb-btn-primary {
  transition: background-color var(--gvb-transition), transform 0.3s ease, opacity var(--gvb-transition);
}

.gvb-branding .gvb-btn-primary:hover {
  background-color: var(--wp--preset--color--gvb-orange-hover);
}

/* ── Steps section ── */
.gvb-steps {
  padding: 20px 20px 0;
}

.gvb-steps__intro {
  padding: 0 0 19px;
}

.gvb-steps__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-steps__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

.gvb-steps__row {
  display: flex;
  gap: 20px;
  height: clamp(340px, 30vw, 432px);
}


.gvb-steps__content {
  flex: 1;
  background: var(--wp--preset--color--gvb-green);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  /* padding-left: locks at 285px at viewport 1440 and above (was 255 —
     bumped +30 for extra breathing room from the number). Below 1440
     scales fluidly. The slope (19.79vw) hits 285 exactly at viewport 1440. */
  padding: 50px 50px 50px clamp(180px, 19.79vw, 285px);
}

/* "2" and "3" glyphs are visually wider than "1", so they extend further
   right and the text-from-number gap looks tighter. Bump padding-left
   for non-first rows to equalize the visual gap. Desktop only — mobile
   below 1199 uses its own padding via @media (max-width: 1199px) which
   has lower specificity, so we wrap to avoid bleeding into mobile. */
@media (min-width: 1200px) {
  .gvb-steps__row:not(:first-child) .gvb-steps__content {
    padding-left: clamp(200px, 21.875vw, 315px);
  }
}

.gvb-steps__number {
  position: absolute;
  /* MAX = value at viewport 1440 — locks number position above 1440
     so number-to-text gap stays constant on wide screens. */
  left: clamp(60px, 6.94vw, 100px);
  top: 43%;
  transform: translateY(-50%);
  /* Translates Figma 1280's 193px → our 1440's 217px (×1.125 baseline)
     proportionally. Base scales fluidly 1200→1440 (~181→217) on the same
     15.08vw slope as the tablet @media so the boundary at 1200 is smooth.
     Above 1440 the @media (min-width: 1440) clamp continues 217 → 256. */
  font-size: clamp(180px, 15.08vw, 217px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--wp--preset--color--gvb-orange);
  /* -4.5% per Figma — em auto-scales with font-size, no clamp needed. */
  letter-spacing: -0.045em;
  user-select: none;
}

.gvb-steps__row:first-child .gvb-steps__number {
  /* Same lock-at-1440 logic as the base number rule above. */
  left: clamp(90px, 10.4vw, 150px);
}

.gvb-steps__row:nth-child(1) .gvb-steps__text {
  transform: translateY(clamp(-20px, -1.4vw, -19px));
}

.gvb-steps__row:nth-child(2) .gvb-steps__text {
  /* Was ~0 (centered); push +10 down at 1440+ for slightly lower seat
     to better align with the larger 217px numeral. */
  transform: translateY(clamp(0px, 0.694vw, 10px));
}

.gvb-steps__row:nth-child(3) .gvb-steps__text {
  /* Was -50 at 1440; bumped to -20 to drop the text ~30px lower for
     better visual centering with the larger 217px numeral. */
  transform: translateY(clamp(-20px, -1.389vw, -10px));
}

/* Text block max-width preserves Figma 1280's 372px text-column width
   proportionally on our 1440 baseline (×1.125 = ~419), and continues
   scaling toward ~495 at viewport 1920+. The 29vw slope passes through
   the Figma 1280's 372 at viewport 1280 cleanly. */
.gvb-steps__text {
  display: flex;
  flex-direction: column;
  /* Heading↔paragraph gap: Figma 1280's 24 × 1.125 = 27. */
  gap: 27px;
  max-width: clamp(419px, 29vw, 495px);
}

/* Heading typography from Figma 1280's h2 spec (40px / 1.05 / -0.5%) scaled
   ×1.125 to our 1440 baseline → 45px. Letter-spacing as `em` so it auto-
   tracks the font-size at every viewport. */
.gvb-steps__text h3 {
  font-size: 45px;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.005em;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

/* Paragraph stays at 16 across all viewports (Figma 1280's literal value).
   No fluid scaling — body comfort size is constant. */
.gvb-steps__text p {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

/* Image uses an explicit fluid width that preserves Figma 1280's image:row
   ratio (506:1245 = 40.6%) at every viewport. 39.58vw resolves to 506 at
   viewport 1280 (matching Figma exactly) and 570 at our 1440 baseline,
   capping at 700 around viewport 1768+. Below 1199 the @media block
   reassigns flex; below 784 rows stack vertically. */
.gvb-steps__image {
  flex: 0 0 clamp(380px, 39.58vw, 700px);
  height: clamp(340px, 30vw, 432px);
  border-radius: 20px;
  overflow: hidden;
}

.gvb-steps__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Flaschen intro ── */
.gvb-flaschen-intro {
  padding: 80px 64px;
  text-align: center;
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
}

.gvb-flaschen-intro p {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.16px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 24px;
}

.gvb-flaschen-intro p:last-child {
  margin-bottom: 0;
}

/* ── Flaschen cards ── */
.gvb-flaschen-cards {
  padding: 0 52px 80px;
}

.gvb-flaschen-cards__list {
  display: flex;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gvb-flaschen-cards__item {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.gvb-flaschen-cards__image {
  aspect-ratio: 362 / 483;
  border-radius: 16px;
  overflow: hidden;
}

.gvb-flaschen-cards__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Source images are landscape (4096×2732) but the card is portrait (362×483),
   so object-fit: cover crops to the middle 50% of the source by default — which
   misses the bottle in each photo (bottles sit left-of-centre in the source).
   Per-card object-position shifts the visible strip so each bottle ends up
   centred in the card. Values derived from the Figma crop percentages. */
.gvb-flaschen-cards__item:nth-child(1) .gvb-flaschen-cards__image img {
  object-position: 5% center;   /* Edelstahl — horizontal focal point */
  /* Source is landscape, container is portrait → object-fit: cover leaves no
     vertical overflow for object-position Y to move. Scale from the bottom
     edge instead: the bottom anchors, top extends off-frame, bottle rides up. */
  transform: scale(1.45);
  transform-origin: center 75%;
}
.gvb-flaschen-cards__item:nth-child(2) .gvb-flaschen-cards__image img {
  object-position: 0% center;   /* Tritan */
  transform: scale(1.35);
  transform-origin: center 90%;
}
.gvb-flaschen-cards__item:nth-child(3) .gvb-flaschen-cards__image img {
  object-position: 23% center;  /* Borosilikat */
  transform: scale(1.07);
  transform-origin: center 75%;
}

.gvb-flaschen-cards__image img.gvb-img-right {
  object-position: 5% center;
}

/* Bedrucken-specific tweaks (scoped so the Flaschen page is unaffected):
   - Card 1 (Digitaldruck): was zoomed in too much, bottle was cropped off.
   - Card 2 (Siebdruck): slight zoom-out for better framing.
   - Card 3 (Lasergravur): shift the crop window right so the bottle sits
     further right in the card. */
.gvb-druckverfahren .gvb-flaschen-cards__item:nth-child(1) .gvb-flaschen-cards__image img {
  transform: none;
  object-position: 60% center;
}
.gvb-druckverfahren .gvb-flaschen-cards__item:nth-child(2) .gvb-flaschen-cards__image img {
  transform: scale(1.15);
}
.gvb-druckverfahren .gvb-flaschen-cards__item:nth-child(3) .gvb-flaschen-cards__image img {
  object-position: 5% center;
}

.gvb-flaschen-cards__text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.gvb-flaschen-cards__text .gvb-btn-primary {
  margin-top: auto;
  align-self: flex-start;
  transition: background-color var(--gvb-transition), transform 0.3s ease, opacity var(--gvb-transition);
}

.gvb-flaschen-cards__text .gvb-btn-primary:hover {
  background-color: var(--wp--preset--color--gvb-orange-hover);
}

.gvb-flaschen-cards__title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.15px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-flaschen-cards__desc {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 8px;
}

/* ══════════════════════════════════════════════════════════════
   ÜBER UNS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Hero: image mirrored, content RIGHT (same as Lösungen) ── */
/* ── Hero: borosilikat bottle ── */
.gvb-hero__bg--borosilikat {
  object-position: center 65%;
}

/* ── Hero: tritan bottle ── */
.gvb-hero__bg--tritan {
  object-position: center 80%;
}

/* ── Hero: edelstahl bottle ── */
.gvb-hero__bg--edelstahl {
  object-position: center 69%;
}

/* ── Hero: gesundheitswesen — mirror so the subject sits on the left
   side of the frame (text overlay sits on the right). ── */
.gvb-hero__bg--gesundheitswesen {
  transform: scaleX(-1);
}

/* ── Hero: unsere flaschen + bedrucken (shared image + framing) ──
   The Figma source upscales the image to 127.58% width with negative
   left offset to crop horizontally. object-fit: cover only gives us
   vertical slack (image aspect ~1.5 vs container ~2.13 at 1920),
   so we use transform: scale + translateX to replicate that effect. */
.gvb-hero__bg--flaschen,
.gvb-hero__bg--bedrucken {
  transform: scale(1.25) translateX(-10%);
  transform-origin: center;
  object-position: center 67%;
}

/* ── Hero: unternehmen — shift crop up so the bottle's top + sport cap
      stay visible (default center crops them off). */
.gvb-hero__bg--unternehmen {
  object-position: center 25%;
}

.gvb-hero--uberuns .gvb-hero__content {
  margin-left: 55% !important;
  margin-right: 0 !important;
}

/* ── Intro quote ── */
.gvb-uberuns-intro {
  padding: 80px 64px;
  text-align: center;
  max-width: 960px;
  margin: 0 auto;
}

.gvb-uberuns-intro p {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.16px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

/* ═══════════════════════════════════════
   DATENSCHUTZ PAGE
   (mirrors intro patterns — text on linen page-bg,
    graphite, centred max-width column. No card.)
   ═══════════════════════════════════════ */

.gvb-datenschutz {
  padding: 80px 20px 0;
}

.gvb-datenschutz__inner {
  max-width: 880px;
  margin: 0 auto;
  color: var(--wp--preset--color--gvb-linen);
  text-align: left;
  /* Orange card with linen text — matches the impressum card style. */
  background-color: var(--wp--preset--color--gvb-orange);
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow: 0 25px 33px -15px rgba(149, 149, 149, 0.25);
}

.gvb-datenschutz__heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.1px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 40px 0 12px;
}

.gvb-datenschutz__heading:first-child {
  margin-top: 0;
}

.gvb-datenschutz p {
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0 0 8px;
}

.gvb-datenschutz a {
  color: var(--wp--preset--color--gvb-linen);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gvb-datenschutz a:hover {
  color: var(--wp--preset--color--gvb-graphite);
}

/* ── Vision & Mission rows ── */
.gvb-uberuns-vm {
  padding: 0 52px 20px;
}

.gvb-uberuns-vm__rows {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 20px 0;
}

/* Row height + image dimensions scale proportionally from Figma 1280
   (506×432) → our 1440 baseline (×1.125 = 570×486) and continue to
   ~700×600 around viewport 1768+. Same 39.58vw formula as the steps
   image so both sections behave consistently. */
.gvb-uberuns-vm__row {
  display: flex;
  gap: 20px;
  height: clamp(380px, 33.75vw, 600px);
}

.gvb-uberuns-vm__content {
  flex: 1;
  background: var(--wp--preset--color--gvb-orange);
  border-radius: 16px;
  display: flex;
  align-items: center;
  padding: 60px 50px;
}

.gvb-uberuns-vm__text {
  display: flex;
  flex-direction: column;
  gap: 50px;
  width: 100%;
  /* Cap text width to mirror Figma 1280's 531px text-block width
     proportionally on our 1440 baseline (×1.125 = 597) and continuing
     to 663 at viewport 1920+. The 41.5vw slope passes through Figma's
     531 at viewport 1280 cleanly. Without this cap, text fills the
     orange card and grows too wide as the card swells past 1440. */
  max-width: clamp(420px, 41.5vw, 663px);
}

/* H2 typography from Figma 1280's 40px / 1.08 / 0.5% letter-spacing
   scaled ×1.125 to our 1440 baseline → 45px. `em` letter-spacing
   auto-tracks the font-size at every viewport. Fluid clamp at 1440+
   below scales 45 → 50 between 1440 → 1920. */
.gvb-uberuns-vm__text h2 {
  font-size: 45px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

/* P stays at 16 across all viewports (Figma 1280's literal value —
   body comfort size doesn't scale, per the steps section decision).
   Letter-spacing as `em` to mirror Figma's 0.5% percentage spec. */
.gvb-uberuns-vm__text p {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

.gvb-uberuns-vm__image {
  flex: 0 0 clamp(380px, 39.58vw, 700px);
  height: clamp(340px, 33.75vw, 600px);
  border-radius: 16px;
  overflow: hidden;
}

.gvb-uberuns-vm__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── Team photo ── */
.gvb-uberuns-team {
  padding: 20px 52px 40px;
}

/* Mirror of .gvb-uberuns-personen h2 — used as a "tablet-and-below"
   variant so the heading appears ABOVE the team image in the column-stack
   layout. Hidden on desktop; the @media (max-width: 1199px) block toggles
   this on and the personen H2 off so each viewport reads in the right
   order. */
.gvb-uberuns-team__heading {
  display: none;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 24px;
}

.gvb-uberuns-team__img {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1228 / 604;
  width: 100%;
}

.gvb-uberuns-team__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ── Wer sind wir ── */
.gvb-uberuns-personen {
  padding: 60px 52px 80px;
}

.gvb-uberuns-personen h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 40px;
}

.gvb-uberuns-personen__text p {
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: 0.12px;
  color: #000;
  margin: 0 0 20px;
}

.gvb-uberuns-personen__text p:last-child {
  margin-bottom: 0;
}

/* ── Unsere Überzeugung ── */
.gvb-ueberzeugung {
  padding: 20px 52px;
}

.gvb-ueberzeugung__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.8px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 32px;
}

.gvb-ueberzeugung__cards {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 128px;
}

.gvb-ueberzeugung__card {
  background: var(--wp--preset--color--gvb-orange);
  border-radius: 20px;
  padding: 60px 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  text-align: center;
}

.gvb-ueberzeugung__num {
  font-size: 30px;
  font-weight: 400;
  color: var(--wp--preset--color--gvb-linen);
  letter-spacing: -0.3px;
  line-height: 1;
}

.gvb-ueberzeugung__text {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.15px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

/* ══════════════════════════════════════════════════════════════
   EDELSTAHL PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Product showcase ── */
/* ── Unified bottle product card (Edelstahl, Borosilikat, Tritan) ── */
.gvb-bottle-showcase {
  padding: 0 17px 40px;
}

.gvb-bottle-showcase__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.gvb-bottle-card {
  display: flex;
  justify-content: center;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(43, 43, 43, 0.08);
  border-radius: 30px;
  overflow: hidden;
  min-height: 593px;
}

.gvb-bottle-card__image {
  flex: 0 0 496px;
  position: relative;
  overflow: hidden;
}

.gvb-bottle-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.gvb-bottle-card__slide {
  flex: 0 0 100%;
  position: relative;
  height: 100%;
}

.gvb-bottle-card__image img {
  width: 82%;
  height: auto;
  position: absolute;
  left: 9%;
  top: 50%;
  transform: translateY(-50%);
  max-height: 120%;
  object-fit: contain;
}

/* Per-SKU image sizing/positioning (Figma-derived) */
.gvb-bottle-card--slim .gvb-bottle-card__image img {
  width: 76%; left: 12%; top: -6%; transform: none;
}
.gvb-bottle-card--wideneck .gvb-bottle-card__image img {
  width: 78%; left: 11%; top: -6%; transform: none;
}
.gvb-bottle-card--tea .gvb-bottle-card__image img {
  width: 72%; left: 14%; top: -2%; transform: none;
}
.gvb-bottle-card--karaffe .gvb-bottle-card__image img {
  width: 62%; left: 19%; top: 13%; transform: none;
}
.gvb-bottle-card--kavo-premium .gvb-bottle-card__image img {
  width: 73%; left: 13%; top: -2%; transform: none;
}
.gvb-bottle-card--kavo-classic .gvb-bottle-card__image img {
  width: 64%; left: 18%; top: 7%; transform: none;
}
.gvb-bottle-card--kavo-eco .gvb-bottle-card__image img {
  width: 70%; left: 14.5%; top: 0%; transform: none;
}

.gvb-bottle-card__content {
  flex: 1;
  max-width: 1000px;
  padding: 48px 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.gvb-bottle-card__title {
  font-size: 60px;
  font-weight: 700;
  line-height: 1.03;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-bottle-card__body {
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0.075px;
  color: var(--wp--preset--color--gvb-graphite);
}

.gvb-bottle-card__body p {
  margin: 0 0 12px;
}

.gvb-bottle-card__body ul {
  margin: 0;
  padding-left: 20px;
}

.gvb-bottle-card__body li {
  margin-bottom: 4px;
}

.gvb-bottle-card__colors {
  display: flex;
  gap: 8px;
  align-items: center;
}

.gvb-bottle-card__color-btn {
  background: none;
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  padding: 2px;
  transition: border-color var(--gvb-transition);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gvb-bottle-card__color-btn img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.gvb-bottle-card__color-btn.is-active {
  border-color: var(--wp--preset--color--gvb-graphite);
}

.gvb-bottle-card__color-btn:hover {
  border-color: rgba(43, 43, 43, 0.4);
}

.gvb-bottle-card__dot {
  display: inline-block;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(43, 43, 43, 0.15);
}

.gvb-bottle-card__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gvb-bottle-card__meta p {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-verschluss-color {
  display: inline-flex;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.gvb-verschluss-color img {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display: block;
  object-fit: cover;
}

/* ── Feature cards ──
   Section has a 20px lateral inset (matches the Steps section) so the
   heading is full-width — same cap as `.gvb-steps__heading`. The cards
   list adds extra inner padding so the 4-image row stays visually
   narrower than the heading (doesn't go full-width). */
.gvb-edelstahl-features {
  padding: 80px 20px 40px;
}

.gvb-edelstahl-features__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 40px;
}

.gvb-edelstahl-features__cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 60px;
}

.gvb-edelstahl-feature-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.gvb-edelstahl-feature-card__image {
  width: 201px;
  height: 200px;
  border-radius: 13px;
  overflow: hidden;
  align-self: center;
}

.gvb-edelstahl-feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gvb-edelstahl-feature-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.gvb-edelstahl-feature-card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.11px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-edelstahl-feature-card__desc {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.07px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
  max-width: clamp(245px, 17vw, 435px);
}

/* ══════════════════════════════════════════════════════════════
   BOROSILIKATGLAS PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Verschlüsse ── */
.gvb-borosilikat-verschluesse {
  padding: 40px 20px 80px;
}

.gvb-borosilikat-verschluesse__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 40px;
}

.gvb-borosilikat-verschluesse__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.gvb-verschluss-card {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 35px;
  padding: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.gvb-verschluss-card__image {
  width: 388px;
  height: 265px;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
}

.gvb-verschluss-card__track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: translate3d(0, 0, 0);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.gvb-verschluss-card__slide {
  flex: 0 0 100%;
  height: 100%;
}

.gvb-verschluss-card__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* The Wideneck closures are physically larger objects shot at the same
   crop, so with object-fit: contain they render visually bigger than
   the Slim variants in the same card. Scale them down to match. */
.gvb-borosilikat-verschluesse .gvb-verschluss-card__image img[src*="wideneck"] {
  transform: scale(0.78);
}

/* Bump the Edelstahl Slim closure slightly — the source photo crops
   tighter than the Bambus Slim, so it reads a touch small without help. */
.gvb-borosilikat-verschluesse .gvb-verschluss-card__image img[src$="-edelstahl.webp"] {
  transform: scale(1.15);
}

/* Edelstahl Wideneck shoots a touch larger than the Bambus Wideneck —
   trim it a little more so the four cards read at the same scale. */
.gvb-borosilikat-verschluesse .gvb-verschluss-card__image img[src$="-edelstahl-wideneck.webp"] {
  transform: scale(0.75);
}

/* Tritan-specific verschluss image adjustments */
.gvb-tritan-verschluesse .gvb-verschluss-card__image {
  display: flex;
  align-items: center;
  justify-content: center;
}

.gvb-tritan-verschluesse .gvb-verschluss-card__image img {
  object-position: center center;
}

.gvb-verschluss-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.gvb-verschluss-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.gvb-verschluss-card__title {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.13px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-verschluss-card__desc {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

/* Borosilikat verschluss column: text lives outside the card, left-aligned */
.gvb-borosilikat-verschluesse .gvb-verschluss-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card {
  padding: 0;
  background: rgba(255, 255, 255, 0.2);
  align-items: stretch;
}

.gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card__image {
  width: 100%;
  height: 347px;
}

.gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card__title,
.gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card__desc {
  text-align: left;
  padding-left: 16px;
}

.gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card__title {
  margin-top: 16px;
}

/* ── Feature cards ──
   Shared by the Borosilikat + Tritan pages (tritan-features.php uses
   the same `gvb-borosilikat-*` class names). Styling mirrors the
   Edelstahl feature cards for visual consistency. */
.gvb-borosilikat-features {
  padding: 80px 20px 40px;
}

.gvb-borosilikat-features__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 40px;
}

.gvb-borosilikat-features__cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0 60px;
}

.gvb-borosilikat-feature-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.gvb-borosilikat-feature-card__image {
  width: 201px;
  height: 200px;
  border-radius: 13px;
  overflow: hidden;
  align-self: center;
}

.gvb-borosilikat-feature-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gvb-borosilikat-feature-card__text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

.gvb-borosilikat-feature-card__title {
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.11px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-borosilikat-feature-card__desc {
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.07px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
  max-width: clamp(245px, 17vw, 435px);
}

/* ══════════════════════════════════════════════════════════════
   BLOG — LISTING PAGE
   ══════════════════════════════════════════════════════════════ */

/* ── Blog Hero ─────────────────────────────────────────────── */
.gvb-hero--blog .gvb-hero__bg {
  /* Anchor crop near top so the girl's head stays visible at all hero
     heights (default `center center` would cut it off on wide viewports). */
  object-position: center 10%;
}
.gvb-hero--blog .gvb-hero__content--blog {
  margin-left: 55% !important;
  margin-right: 0 !important;
}

/* ── Featured Articles (Zone 1) ────────────────────────────── */

/* Override WP's constrained-layout cap on the section's nested wrappers
   so the row can actually grow with the viewport. The query block (direct
   child) AND the post-template (grandchild, gets capped by WP's default
   contentSize 1200) are both targeted, otherwise the post-template cap
   squeezes the row regardless of what we do on the query.
   Grows from 1400 at 1440 viewport → 1650 at 1920 viewport (matches the
   new universal content cap, Figma 1920 baseline) — wide enough to fit
   image (max 813) + content (max 645) + gap (64) + padding (128) = 1650,
   exactly the section cap with no slack. ≤1440 unchanged. */
.gvb-blog-featured > *,
.gvb-blog-featured .wp-block-post-template {
  max-width: clamp(1400px, 85.94vw, 1650px);
  margin-left: auto;
  margin-right: auto;
}

.gvb-blog-featured__list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gvb-blog-featured__row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
}

/* Alternate: even rows flip image to the left */
.gvb-blog-featured__list > li:nth-child(even) .gvb-blog-featured__row,
.gvb-blog-featured__list > div:nth-child(even) .gvb-blog-featured__row {
  flex-direction: row-reverse;
}

.gvb-blog-featured__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ≥1440: content stops flex-growing and its max-width scales fluidly
   (600 at 1440 → 900 at 2560). `justify-content: space-between` (set on
   the row in the pattern) then has leftover space to distribute, creating
   a visible gap between content and image. Content anchors to the start
   of the row (left in normal flex, right in row-reverse even rows),
   image anchors to the end. */
@media (min-width: 1440px) {
  .gvb-blog-featured__content {
    flex: 0 1 auto;
    max-width: clamp(600px, 33.59vw, 645px);
  }
}

.gvb-blog-featured__content .wp-block-post-title {
  font-size: 40px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.2px !important;
  margin: 0 !important;
}

.gvb-blog-featured__content .wp-block-post-excerpt {
  font-size: 16px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08px !important;
  margin: 0 !important;
}

.gvb-blog-featured__content .wp-block-post-excerpt p {
  margin: 0 !important;
}

.gvb-blog-featured__content .wp-block-read-more {
  align-self: flex-start;
  margin-left: 0 !important;
  margin-right: auto;
}

.gvb-blog-featured__row {
  border-radius: 16px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.gvb-blog-featured__row:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(43, 43, 43, 0.1);
}

/* Featured image — width stretches fluidly with the viewport (height stays
   fixed at 432px). 638 at 1440 viewport → 813 at 1920 viewport (matches
   the new universal content cap, Figma 1920 baseline). object-fit: cover
   re-crops the source as the frame widens so the image doesn't distort. */
.gvb-blog-featured__image img {
  width: clamp(638px, 42.34vw, 813px);
  height: 432px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 3px 17px 0px rgba(0, 0, 0, 0.08);
  display: block;
}

/* The <figure> is the actual flex item in the row — its width needs to
   match the <img> inside, otherwise WP's inline style="width: 638px" on
   the figure (from the post-featured-image block's width attribute)
   stays at 638 while the img scales to 813, and the image overflows
   the figure + the row on wide screens. !important beats the inline. */
.gvb-blog-featured .wp-block-post-featured-image {
  flex-shrink: 0;
  width: clamp(638px, 42.34vw, 813px) !important;
  max-width: clamp(638px, 42.34vw, 813px) !important;
}

.gvb-blog-featured .wp-block-post-featured-image img {
  width: clamp(638px, 42.34vw, 813px) !important;
  max-width: clamp(638px, 42.34vw, 813px) !important;
  height: 432px !important;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0px 3px 17px 0px rgba(0, 0, 0, 0.08);
}

/* Read more button inside featured */
.wp-block-read-more.gvb-btn--orange {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--wp--preset--color--gvb-orange);
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  border-radius: 51.575px !important;
  padding: 12px 20px !important;
  align-self: flex-start;
  margin-top: 8px;
  transition: background-color var(--gvb-transition);
}

.wp-block-read-more.gvb-btn--orange:hover {
  background-color: var(--wp--preset--color--gvb-orange-hover);
}

/* ── All Articles Grid (Zone 2) ─────────────────────────────── */
.gvb-blog-grid .wp-block-post-template {
  gap: 16px !important;
  align-content: start;
}

.gvb-blog-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 18px 24px 24px !important;
  border-radius: 16px !important;
  box-shadow: 0px 3px 17px 0px rgba(0, 0, 0, 0.1) !important;
  background-color: var(--wp--preset--color--gvb-linen) !important;
}

.gvb-blog-card__thumb {
  flex-shrink: 0 !important;
}

.gvb-blog-card__thumb img {
  width: 124px !important;
  height: 116px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
  display: block;
}

.gvb-blog-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}

.gvb-blog-card__body .wp-block-post-title {
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: 0.175px !important;
  color: var(--wp--preset--color--gvb-graphite) !important;
  margin: 0 0 2px !important;
  overflow-wrap: break-word;
  word-break: break-word;
}

.gvb-blog-card__body .wp-block-post-title a {
  color: inherit !important;
  text-decoration: none !important;
}

.gvb-blog-card__body .wp-block-post-title a:hover,
.gvb-blog-card:hover .gvb-blog-card__body .wp-block-post-title a {
  color: var(--wp--preset--color--gvb-green) !important;
}

.gvb-blog-card__body .wp-block-post-date {
  font-size: 16px !important;
  line-height: 1.5 !important;
  letter-spacing: 0.08px !important;
  color: var(--wp--preset--color--gvb-orange) !important;
  margin: 0 !important;
}

.gvb-blog-card__body .wp-block-post-date a {
  color: inherit !important;
  text-decoration: none !important;
}

.gvb-blog-card__excerpt .wp-block-post-excerpt__excerpt {
  font-size: 16px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.08px !important;
  color: rgba(43, 43, 43, 0.55) !important;
  margin: 0 !important;
}

.gvb-blog-card__excerpt .wp-block-post-excerpt__more-link {
  display: none !important;
}

/* Pagination */
.gvb-blog-grid .wp-block-query-pagination {
  margin-top: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.gvb-blog-grid .wp-block-query-pagination a,
.gvb-blog-grid .wp-block-query-pagination .wp-block-query-pagination-numbers a,
.gvb-blog-grid .wp-block-query-pagination .wp-block-query-pagination-previous a,
.gvb-blog-grid .wp-block-query-pagination .wp-block-query-pagination-next a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  background: transparent;
  border: 2px solid var(--wp--preset--color--gvb-green);
  color: var(--wp--preset--color--gvb-green);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.gvb-blog-grid .wp-block-query-pagination a:hover {
  background: var(--wp--preset--color--gvb-green);
  color: var(--wp--preset--color--gvb-linen);
}

.gvb-blog-grid .wp-block-query-pagination .wp-block-query-pagination-numbers .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 16px;
  border-radius: 50px;
  background: var(--wp--preset--color--gvb-green);
  border: 2px solid var(--wp--preset--color--gvb-green);
  color: var(--wp--preset--color--gvb-linen);
  font-size: 16px;
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   BLOG — SINGLE POST
   ══════════════════════════════════════════════════════════════ */

/* ── Single article hero — mirrors .gvb-hero structure (rounded box, fluid
   min-height, 20px inset). Article uses the WP Cover block instead of the
   group+img+overlay structure of standard heroes (Cover gives us
   useFeaturedImage:true to dynamically pull the post's featured image),
   so the rules below normalise the visual to match the rest of the heroes. */
.gvb-single-hero {
  position: relative;
  margin-top: 8px;
  margin-left: 20px !important;
  margin-right: 20px !important;
  border-radius: 20px;
  overflow: hidden;
  /* Same fluid floor as .gvb-hero: 604px at 1280 viewport → 774px at 1920+. */
  min-height: clamp(604px, calc(264px + 26.5625vw), 774px) !important;
}

/* Round the Cover bg image + dim so they clip to the rounded box. */
.gvb-single-hero .wp-block-cover__background,
.gvb-single-hero .wp-block-cover__image-background {
  border-radius: 20px;
}

.gvb-single-hero .wp-block-cover__inner-container {
  display: flex;
  align-items: flex-end;
  padding-bottom: 0;
}

.gvb-single-hero .wp-block-post-title {
  font-size: clamp(35.641px, 2.228rem + ((1vw - 3.2px) * 2.621), 65px) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  letter-spacing: -1.95px !important;
  color: var(--wp--preset--color--gvb-linen) !important;
  margin: 0 0 16px !important;
}

.gvb-single-hero .wp-block-post-date {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--gvb-orange) !important;
}

.gvb-single-hero .wp-block-post-date a,
.gvb-single-hero .wp-block-post-terms a {
  color: inherit !important;
  text-decoration: none !important;
}

.gvb-single-hero .wp-block-post-terms {
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--wp--preset--color--gvb-linen) !important;
}

/* Single post body content. Fluid cap: 800px floor (mobile/tablet/laptop)
   → 1100px ceiling at viewport 1920+. Below 1440 stays at 800 (the prior
   static value); above 1440 widens linearly so the column feels less
   orphaned next to the wide hero. ~80–90 chars/line at 1100 — still
   inside the readable range for 16–18px body text. */
.gvb-single-body {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.gvb-single-body .wp-block-post-content h2 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  margin-top: 40px;
}

.gvb-single-body .wp-block-post-content h3 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 12px;
  margin-top: 32px;
}

.gvb-single-body .wp-block-post-content p {
  font-size: 17px;
  line-height: 1.65;
  letter-spacing: 0.08px;
  color: var(--wp--preset--color--gvb-graphite);
  margin-bottom: 20px;
}

.gvb-single-body .wp-block-post-content img {
  border-radius: 12px;
  max-width: 100%;
  height: auto;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 784px) {

  /* Add 80px top padding on mobile so the featured-articles section
     breathes from the intro above. Pattern PHP sets padding-top:0
     inline → !important needed. Desktop unchanged. */
  .gvb-blog-featured {
    padding-top: 80px !important;
  }

  /* Featured: stack image above content, gap between articles */
  .gvb-blog-featured__list {
    gap: 48px;
  }

  .gvb-blog-featured__row,
  .gvb-blog-featured__list > li:nth-child(even) .gvb-blog-featured__row,
  .gvb-blog-featured__list > div:nth-child(even) .gvb-blog-featured__row {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 20px !important;
  }

  /* Image first in visual order, rounded + not full-bleed */
  .gvb-blog-featured .wp-block-post-featured-image,
  .gvb-blog-featured .wp-block-post-featured-image a {
    order: -1;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }

  .gvb-blog-featured .wp-block-post-featured-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px !important;
    border-radius: 16px !important;
    box-shadow: 0px 3px 17px 0px rgba(0, 0, 0, 0.08) !important;
  }

  .gvb-blog-featured__content {
    gap: 16px;
    order: 0;
    padding-top: 16px;
    padding-bottom: 32px;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .gvb-blog-featured__content .wp-block-post-title {
    font-size: 26px !important;
  }

  /* "Mehr erfahren" button: meet 44pt touch target (Apple HIG), below image */
  .wp-block-read-more.gvb-btn--orange {
    min-height: 44px !important;
    font-size: 14px !important;
    padding: 12px 24px !important;
    align-self: flex-start;
  }

  /* ── All articles section ── */
  .gvb-blog-all {
    padding: 40px 20px 64px !important;
    overflow-x: hidden;
  }

  .gvb-blog-all > .wp-block-heading {
    font-size: 36px !important;
    margin-bottom: 0 !important;
  }

  .gvb-blog-all > .wp-block-spacer {
    height: 24px !important;
  }

  /* 1-column layout — covers both CSS Grid and Flex WP layouts */
  .gvb-blog-grid,
  .gvb-blog-grid .wp-block-post-template {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  .gvb-blog-grid .wp-block-post-template {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    grid-template-columns: unset !important;
  }

  /* Each post item: full width, no horizontal overflow */
  .gvb-blog-grid .wp-block-post-template > li,
  .gvb-blog-grid .wp-block-post-template > .wp-block-post {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Card: stack thumb above body, full width */
  .gvb-blog-card {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .gvb-blog-card__thumb,
  .gvb-blog-card__thumb a {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin-right: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  .gvb-blog-card__thumb img {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
    border-radius: 16px 16px 0 0 !important;
    display: block !important;
  }

  .gvb-blog-card__body {
    padding: 16px 20px 24px;
    gap: 6px;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
  }

  .gvb-blog-card__body .wp-block-post-title {
    font-size: 20px !important;
  }
}

/* ═══════════════════════════════════════
   IMPRESSUM PAGE
   ═══════════════════════════════════════ */

.gvb-impressum-card {
  padding: 80px 20px 20px;
}

.gvb-impressum-card__inner {
  background-color: var(--wp--preset--color--gvb-orange);
  color: #fff;
  border-radius: 20px;
  padding: 48px 52px;
  box-shadow: 0 25px 33px -15px rgba(149, 149, 149, 0.25);
  max-width: 1650px;
  margin-left: auto;
  margin-right: auto;
}

.gvb-impressum-card__company {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.26;
  letter-spacing: 0.2px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0 0 24px;
}

.gvb-impressum-card__details p {
  font-size: 16px;
  line-height: 1.26;
  letter-spacing: 0.08px;
  margin: 0;
}

/* ═══════════════════════════════════════
   OVERLAY CARDS (shared — industry + bedrucken)
   ═══════════════════════════════════════ */

.gvb-overlay-cards {
  display: flex;
  gap: 20px;
  padding: 0 20px;
}

.gvb-overlay-cards--2x2 {
  flex-wrap: wrap;
}

.gvb-overlay-cards--2x2 .gvb-overlay-card {
  flex: 1 1 calc(50% - 10px);
}

.gvb-overlay-card {
  flex: 1;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  min-height: 574px;
  display: flex;
  align-items: flex-end;
  padding: 32px;
}

.gvb-overlay-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.gvb-overlay-card__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 520px;
}

.gvb-overlay-card__title {
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0;
}

.gvb-overlay-card__desc {
  font-size: 16px;
  line-height: 1.2;
  letter-spacing: 0.08px;
  color: #fff;
  margin: 0;
}

.gvb-overlay-card--dark-text .gvb-overlay-card__title {
  color: var(--wp--preset--color--gvb-graphite);
}

.gvb-overlay-card--dark-text .gvb-overlay-card__desc {
  color: var(--wp--preset--color--gvb-graphite);
}

/* ═══════════════════════════════════════
   BEDRUCKEN PAGE
   ═══════════════════════════════════════ */

/* ── Druckverfahren section ── */

.gvb-druckverfahren {
  padding: 0 52px 80px;
}

.gvb-druckverfahren__header {
  margin-bottom: 48px;
}

.gvb-druckverfahren__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 16px;
}

.gvb-druckverfahren__intro {
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: 0.16px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0;
}

.gvb-flaschen-cards__list--4 {
  gap: 24px;
}

.gvb-flaschen-cards__list--4 .gvb-flaschen-cards__item {
  flex: 1 1 calc(25% - 18px);
}

/* ── Anlass section ── */

.gvb-bedrucken-anlass {
  background-color: var(--wp--preset--color--gvb-orange);
  border-radius: 20px;
  /* margin needs !important to defeat WP flex-stretch at <1440 (above
     1440 the calc-margin variant in Section 19b takes over with its
     own !important and wins via source-order). Without this the
     section bleeds full-width at 1024 and below. */
  margin: 0 20px 20px !important;
  /* Section padding from Figma 1280 = 19px each side (gap between card
     and parent edge). FIXED at all viewports so section + cards visibly
     shrink in lockstep as viewport narrows. Vertical padding kept. */
  padding: 48px 19px 56px;
}

.gvb-bedrucken-anlass .gvb-overlay-cards {
  padding: 0;
}

/* Carousel nav buttons — hidden by default, shown by each carousel's tablet media block */
.gvb-carousel-nav {
  display: none;
  position: absolute;
  top: 35%;
  z-index: 2;
  width: 36px;
  height: 36px;
  /* Explicitly zero the margin so WP's `:where(.is-layout-flow) > *
     { margin-block-start: 1.5rem }` block-gap rule doesn't leak onto
     the next-chevron and offset it 24px below the prev-chevron. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--wp--preset--color--gvb-linen);
  color: var(--wp--preset--color--gvb-graphite);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  place-items: center;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.gvb-carousel-nav--prev { left: 16px; }
.gvb-carousel-nav--next { right: 16px; }

.gvb-carousel-nav:hover { transform: scale(1.08); }
.gvb-carousel-nav:focus-visible { outline: 2px solid var(--wp--preset--color--gvb-orange); outline-offset: 2px; }

/* State-driven visibility: one source of truth on the carousel root */
[data-carousel].is-at-start .gvb-carousel-nav--prev,
[data-carousel].is-at-end .gvb-carousel-nav--next {
  opacity: 0;
  pointer-events: none;
}

/* Card surface — no bg color (the cream blob is baked into the image
   asset, so the card is purely the image + absolute-positioned content
   overlay; mirrors product-cards architecture). */
.gvb-bedrucken-anlass .gvb-overlay-card {
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  border-radius: 20px;
  min-height: 0;
}

/* --dark-text variant bg removed — image (cream blob baked in) is the
   only visual layer. The variant class still drives the title/desc
   color override (graphite vs linen) below. */

.gvb-bedrucken-anlass .gvb-overlay-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
}

/* Card aspect at the entire 3-grid band (≥785): locked at FIGMA EXACT
   388/574 (= image asset aspect 0.676). Image fills the card naturally
   without crop via object-fit cover (since aspects match). Card height
   scales WITH width — at 1024/1280 cards look like a scaled-down 1440
   ("reset" visual). `min-height: 0` neutralises the base
   `.gvb-overlay-card { min-height: 574px }` which would otherwise floor
   the card height and break the aspect-ratio. Media fills card via
   absolute inset:0 (overrides the base `aspect-ratio: 4/5` above —
   block placed AFTER base rules so source-order-later wins for same-
   specificity selectors). */
@media (min-width: 785px) {
  .gvb-bedrucken-anlass .gvb-overlay-card {
    aspect-ratio: 388 / 574;
    min-height: 0;
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__media {
    aspect-ratio: auto;
    position: absolute;
    inset: 0;
  }
}


.gvb-bedrucken-anlass .gvb-overlay-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Anlass title — Figma 1280 (32px) × 1.125 = 36px at our 1440 baseline.
   Cards are translated ×1.125 from Figma, so typography scales the same
   way. Line-height is unitless so doesn't need scaling. */
.gvb-bedrucken-anlass .gvb-overlay-card__title {
  font-size: 36px;
  line-height: 1.15;
  letter-spacing: 0.18px;
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--gvb-linen) !important;
}

.gvb-bedrucken-anlass .gvb-overlay-card--dark-text .gvb-overlay-card__title {
  color: var(--wp--preset--color--gvb-graphite) !important;
}

/* Anlass content — BOTTOM-ANCHORED (height auto). Desc bottom always
   sits at Figma's bottom inset (20/574 = 3.5% from card bottom).
   Title sits above desc with 12px flex gap. As the desc wraps to more
   lines, the content box grows UPWARD and title floats higher.
   All cards share the same desc bottom Y → cards with more text have
   titles further up. (Mirrors product-cards bottom-up text flow.)
   Left/right Figma percentages: left 20/388 = 5.2%, right 33/388 = 8.5%. */
.gvb-bedrucken-anlass .gvb-overlay-card__content {
  position: absolute;
  bottom: 3.5%;
  left: 5.2%;
  right: 8.5%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 13.5px;
  padding: 0;
  margin-top: 0;
  max-width: none;
}

/* Anlass desc — Figma 13.91px × 1.125 = 15.65px at our 1440 baseline */
.gvb-bedrucken-anlass .gvb-overlay-card__desc {
  font-size: 15.65px;
  line-height: 1.2;
  margin: 0;
  color: var(--wp--preset--color--gvb-linen);
}

.gvb-bedrucken-anlass .gvb-overlay-card--dark-text .gvb-overlay-card__desc {
  color: var(--wp--preset--color--gvb-graphite);
}


.gvb-bedrucken-anlass__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--wp--preset--color--gvb-linen);
  margin: 0 0 32px;
}

/* ══════════════════════════════════════════════════════════════════════
   Anlass cards — canonical 3-band scaling system (locked 2026-05-01)
   ══════════════════════════════════════════════════════════════════════
   Mirrors the product-cards architecture (memory: project_card_scaling
   _system.md). Three "restart" bands, each anchored at its top viewport
   at full Figma 1280 design tokens for anlass:
     Title: 32 / 1.15 / 0.16px tracking
     Desc:  14 / 1.2
     Gap:   12
     Padding: 20 (left/right/bottom)

   Within each band, values scale DOWN proportionally with viewport to
   readability floors. Block is placed AFTER the base rules above so
   source-order-later wins over same-specificity base rules. */

/* Band 1: 3-grid 785–1440 — formula = our_1440_value × vw / 1440.
   At 1440: matches Figma 1280 ×1.125 (title 36, desc 15.65, gap 13.5).
   At 1280: matches Figma 1280 1:1 (title 32, desc 13.91, gap 12).
   At 1024: scaled down (title 25.6, desc 11.13, gap 9.6). */
@media (min-width: 785px) {
  .gvb-bedrucken-anlass .gvb-overlay-card__title {
    font-size: clamp(20px, 2.5vw, 36px);
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__desc {
    font-size: clamp(11px, 1.087vw, 15.65px);
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__content {
    gap: clamp(8px, 0.9375vw, 13.5px);
  }
}

/* Band 2: Carousel 481–784 — strict card-width-proportional. Cards in
   this band never reach Figma's 388px size (they top at ~344px @ 784).
   Formula = figma_ratio × actual_card_width. Card = (vw - 96) / 2.
   Padding-left/right/bottom not scaled — base rule's percentage offsets
   handle positioning automatically with card size. */
@media (min-width: 481px) and (max-width: 784px) {
  .gvb-bedrucken-anlass .gvb-overlay-card__title {
    /* !important needed — global `@media (max-width: 784px) { h3 {
       font-size: 26px !important } }` reset would otherwise win. */
    font-size: clamp(16px, calc(-4px + 4.125vw), 32px) !important;
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__desc {
    font-size: clamp(8px, calc(-1.7px + 1.8vw), 14px);
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__content {
    gap: clamp(6px, calc(-1.5px + 1.55vw), 12px);
  }
}

/* Band 3: Mobile ≤480 — STRICT CARD-WIDTH-PROPORTIONAL. At ≤480 the
   cards are full-width (vw - 80) and naturally smaller than at 1440
   baseline (441 wide). To keep typography:card ratios constant across
   viewports, typography scales with actual card width — NOT with the
   Figma×1.125 max (which would be over-sized at mobile).
   Ratios from 1440 baseline:
     Title 36/441 = 8.16%
     Desc  15.65/441 = 3.55%
     Gap   13.5/441 = 3.06%
   Formula = card_width × ratio = (vw - 80) × ratio = ratio·vw − ratio·80.
     Title: clamp(20, calc(-6.5px + 8.16vw), 33)
     Desc:  clamp(8.5, calc(-2.84px + 3.55vw), 14.2)
     Gap:   clamp(7, calc(-2.45px + 3.06vw), 12.2)
   At 480: ~32.6 / ~14.2 / ~12.2  (title:card 8.16% — matches 1440)
   At 320: ~19.6 / ~8.5 / ~7.3   (same ratio held all the way down). */
@media (max-width: 480px) {
  .gvb-bedrucken-anlass .gvb-overlay-card__title {
    /* !important needed — global `h3 { font-size: 26px !important }`
       reset at @media max-width 784 covers this band too. */
    font-size: clamp(20px, calc(-6.5px + 8.16vw), 33px) !important;
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__desc {
    font-size: clamp(8.5px, calc(-2.84px + 3.55vw), 14.2px);
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__content {
    gap: clamp(7px, calc(-2.45px + 3.06vw), 12.2px);
  }
}

/* ── Warum section ── */

.gvb-bedrucken-warum {
  padding: 80px 20px 20px;
}

.gvb-bedrucken-warum__heading {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 32px;
}

.gvb-bedrucken-warum__image {
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 48px;
  aspect-ratio: 1228 / 604;
}

.gvb-bedrucken-warum__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gvb-bedrucken-warum__lede {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -1.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 0 32px;
  padding: 0 24px;
}

/* Inline-text emphasis utility — orange + bold for accenting key
   phrases inside body copy. Used in bedrucken-warum but kept generic
   so it can be reused elsewhere. Inherits font-size + line-height
   from the surrounding element so it doesn't break paragraph rhythm. */
.gvb-highlight {
  color: var(--wp--preset--color--gvb-orange);
  font-weight: 700;
}

/* Fluid type 1440→1920 (×1.333 proportional to viewport) on the card-
   layered sections — personalisieren cards (Bedrucken + Lösungen + 5
   industry pages) and anlass cards (Bedrucken + Lösungen). Section H2
   headings scale alongside their cards so the h2 > h3 visual hierarchy
   stays intact. Below 1440 untouched (clamps to MIN); caps at 1920
   (clamps to MAX). */
@media (min-width: 1440px) {
  /* Personalisieren section H2 + card title (both 40px) → 53px */
  .gvb-personalisieren__heading,
  .gvb-personalisieren-card__title {
    font-size: clamp(40px, calc(1px + 2.708vw), 53px);
  }
  .gvb-personalisieren-card__desc {
    font-size: clamp(16px, calc(1px + 1.042vw), 21px);
  }

  /* Anlass section H2 (40px) → 53px (×1.333 like other section H2s) */
  .gvb-bedrucken-anlass__heading {
    font-size: clamp(40px, calc(1px + 2.708vw), 53px);
  }
  /* Anlass card title + desc — gentle fluid scale 1440 → 1920 (~×1.20)
     so overlay typography keeps proportions on wide monitors.
     Title 36 → 43, desc 15.65 → 19. Caps at 1920+.
     Below 1440 the base rule's clamp(20px, 2.5vw, 36px) takes over. */
  .gvb-bedrucken-anlass .gvb-overlay-card__title {
    font-size: clamp(36px, calc(15px + 1.458vw), 43px);
  }
  .gvb-bedrucken-anlass .gvb-overlay-card__desc {
    font-size: clamp(15.65px, calc(5.60px + 0.698vw), 19px);
  }

  /* Cases section: h3 ("Passt gut zusammen.") + h4 ("Good Vibe Bottles
     X …") use inline style="font-size:32/40px" from the pattern PHP, so
     !important is needed to override on wide screens. h3 32→43, h4 40→53. */
  .gvb-cases__panel h3.wp-block-heading {
    font-size: clamp(32px, calc(-1px + 2.292vw), 43px) !important;
  }
  .gvb-cases__panel h4.wp-block-heading {
    font-size: clamp(40px, calc(1px + 2.708vw), 53px) !important;
  }

  /* Product cards (homepage): title 40→53 (matches Figma 1280 @ 40 → ×1.333 at 1920), text 16→21 */
  .gvb-product-card__title {
    font-size: clamp(40px, calc(1px + 2.708vw), 53px);
  }
  .gvb-product-card__text {
    font-size: clamp(16px, calc(1px + 1.042vw), 21px);
  }

  /* Navbar + footer chrome: small bump (×1.13, not the full ×1.333)
     so they don't feel miniaturized next to scaled body content but
     still defer visually to the main content. !important needed to
     override inline font-size in parts/header.html and footer.php. */
  .gvb-header__nav .wp-block-navigation-item__content {
    font-size: clamp(15px, calc(9px + 0.417vw), 17px) !important;
  }
  .gvb-footer__nav-heading {
    font-size: clamp(15px, calc(9px + 0.417vw), 17px) !important;
  }
  .gvb-footer__nav-list {
    font-size: clamp(16px, calc(10px + 0.417vw), 18px) !important;
  }

  /* Steps section: section H2 + giant numerals + step h3 + step p.
     Heading 40→53 (×1.333 like other section H2s). Numerals 140→158
     (×1.13 — keeps them in proportion without overpowering). h3 24→28
     and p 14→18 keep the previously-tuned final values but smoothly
     interpolate 1440→1920 instead of snapping. */
  .gvb-steps__heading {
    font-size: clamp(40px, calc(1px + 2.708vw), 53px);
  }
  .gvb-steps__number {
    font-size: clamp(217px, calc(100px + 8.125vw), 256px);
  }
  .gvb-steps__text h3 {
    font-size: clamp(45px, calc(30px + 1.042vw), 50px);
  }
  /* About-us Vision/Mission card — match the canonical 1440→1920
     ×1.333 wide-monitor scale used by .gvb-personalisieren-card and
     .gvb-overlay-card (cards section convention). H2 45→60, body 16→21. */
  .gvb-uberuns-vm__text h2 {
    font-size: clamp(45px, 3.125vw, 60px);
  }
  .gvb-uberuns-vm__text p {
    font-size: clamp(16px, calc(1px + 1.042vw), 21px);
  }

  /* Flaschen cards desc: at desktop+ widths Chrome's `text-wrap: pretty`
     (now the default for <p> in newer Chrome) was rebalancing line
     lengths, breaking line 1 short to avoid orphans on the last line.
     For our 3-card grid the cards are ≥420px and the desc fits well
     within them — we want greedy fill so line 1 packs as many words as
     possible. Override to `wrap` (the classic greedy algorithm). */
  .gvb-flaschen-cards__desc {
    text-wrap: wrap;
  }
}

.gvb-bedrucken-warum__text p {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.16px;
  color: #000;
  margin: 0;
  padding: 0 24px;
}

/* ═══════════════════════════════════════
   DOWNLOAD PAGE
   ═══════════════════════════════════════ */

.gvb-download-cards {
  padding: 80px 0 40px;
}

.gvb-download-section {
  margin-bottom: 64px;
}

.gvb-download-section:last-child {
  margin-bottom: 0;
}

.gvb-download-section__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -1.65px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 20px 28px;
}

/* Stack multiple download bars under a single heading with consistent gap. */
.gvb-download-section__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.gvb-download-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--wp--preset--color--gvb-orange);
  border-radius: 20px;
  margin: 0 20px;
  padding: 0 32px;
  height: 76px;
  text-decoration: none;
  transition: opacity 0.2s;
}

.gvb-download-bar:hover {
  background: var(--wp--preset--color--gvb-orange-hover);
}

.gvb-download-bar__label {
  font-size: 18px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1;
}

.gvb-download-bar__action {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(237, 232, 219, 0.88);
  line-height: 1;
}

.gvb-download-bar__action svg {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  fill: rgba(237, 232, 219, 0.88);
}

/* ═══════════════════════════════════════
   FAQ STANDALONE PAGE
   ═══════════════════════════════════════ */

.gvb-faq-page {
  padding: 80px 0;
}

.gvb-faq-section {
  margin-bottom: 80px;
}

.gvb-faq-section__heading {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -1.2px;
  color: var(--wp--preset--color--gvb-graphite);
  margin: 0 20px 32px;
}

/* ══════════════════════════════════════════════════════════════
   16. MOBILE FIXES (comprehensive — Apple HIG aligned)
   Touch targets ≥ 44px, no horizontal scroll, stacked layouts
   ══════════════════════════════════════════════════════════════ */

/* ── Touch targets: colour swatches (Apple HIG: 44pt minimum) ── */
.gvb-bottle-card__color-btn {
  width: 44px;
  height: 44px;
}

/* ── Cases tabs: ensure 44px tap height ── */
.gvb-cases__tab {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Steps: fluid scaling at 769–1199px ──────────────────────────
   This block must live AFTER the base .gvb-steps__number rule so
   the clamp() font-size isn't silently overridden by the 180px base.
   vw denominators match the desktop values at exactly 1200px:
     180px / 1200px = 15vw   60px / 1200px = 5vw   240px / 1200px = 20vw  */
@media (max-width: 1199px) {
  .gvb-steps,
  .gvb-branchen {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gvb-contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .gvb-steps__row {
    height: auto;
    align-items: stretch;
  }

  .gvb-steps__image {
    flex: 0 0 42%;
    height: auto;
    min-height: 260px;
  }

  .gvb-steps__number {
    /* Was a static 60px which created a 217→60 (=157px) jump at the
       1200/1199 boundary. Now scales on the same 15.08vw slope as the
       desktop base, so at 1199 it lands at ~181 and meets the desktop
       value smoothly. MIN 150 keeps the numeral visually prominent on
       tablet — matches the mobile @≤784 static size below. */
    font-size: clamp(150px, 15.08vw, 181px);
    left: clamp(16px, 5vw, 60px);
  }

  .gvb-steps__content {
    padding: 36px 36px 36px clamp(90px, 20vw, 240px);
  }

  /* Scale heading down so long German words never overflow the narrower card */
  .gvb-steps__text h3 {
    font-size: 20px;
  }

  /* ── Vision/Mission: stack vertically on tablet/iPad band too.
     The base CSS sets row height via clamp(380, 33.75vw, 600) which
     resolves to MIN 380 below viewport ~1126 — too short for the
     content text. Stack column + auto height + image scaled to a
     reasonable tablet size. The mobile @≤784 block below overrides
     image height + content padding for narrower phones. ── */
  .gvb-uberuns-vm__row {
    flex-direction: column;
    height: auto;
  }

  .gvb-uberuns-vm__image {
    flex: none;
    width: 100%;
    height: clamp(280px, 35vw, 420px);
    /* Force image to render AFTER content in the stack regardless of
       DOM order. Row 2's HTML has <image> before <content> (so desktop
       can render image-left), but in column-stack we want every row
       to read content → image (text → image → text → image rhythm). */
    order: 2;
  }

  .gvb-uberuns-vm__content {
    padding: 40px 32px;
    order: 1;
  }

  /* Reset text max-width — the cap from the base rule is calibrated
     for the wider desktop card; in column-stack the card is full-width
     so text should fill it (with content padding still owning gutter). */
  .gvb-uberuns-vm__text {
    max-width: none;
  }

  /* "Wer sind wir": swap heading position so it sits ABOVE the team
     image at tablet/mobile (image stacks below heading instead of
     above text). Show team's variant heading, hide the personen one. */
  .gvb-uberuns-team__heading {
    display: block;
  }
  .gvb-uberuns-personen h2 {
    display: none;
  }
}

/* iPad-band anlass overrides REMOVED 2026-05-01. Old absolute-title
   approach replaced by canonical 3-band scaling system at end of file. */



@media (max-width: 784px) {

  /* ── Hero: override 55% content offset on all hero types ──
     Generic .gvb-hero__content { margin-left: 0 } (section 15) is
     overridden by the more-specific !important rules below, so we
     must re-declare each selector at this breakpoint.            */
  .gvb-hero--losungen .gvb-hero__content,
  .gvb-hero--bedrucken .gvb-hero__content,
  .gvb-hero--industrie .gvb-hero__content,
  .gvb-hero--faq .gvb-hero__content,
  .gvb-hero--uberuns .gvb-hero__content,
  .gvb-hero--blog .gvb-hero__content--blog,
  .gvb-hero--download .gvb-hero__content,
  .gvb-hero--impressum .gvb-hero__content,
  .gvb-hero--datenschutz .gvb-hero__content {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Slightly stronger overlay so text stays legible when
     content moves over the image centre on small screens    */
  .gvb-hero__overlay {
    background: rgba(0, 0, 0, 0.28);
  }

  /* Lösungen hero: nudge bottle right of centre on mobile. Desktop
     uses X 100% (subject parked left of frame for text). Mobile X 30%
     puts the bottle two-thirds of the way to the right edge —
     dialled in between the over-shot 0% and centred 50%.
     Y 85% kept for vertical lift. */
  .gvb-hero__bg--losungen {
    object-position: 30% 85% !important;
  }

  /* ── Contact: restore lateral padding on mobile ── */
  .gvb-contact {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .gvb-contact__body {
    padding-left: 0;
    justify-content: center !important;
  }

  .gvb-contact__portrait img {
    height: 280px;
    border-radius: 20px;
  }

  /* Trigger: same compact size as tablet (was inheriting desktop 55px) */
  .gvb-expand-trigger__btn {
    width: 48px;
    height: 48px;
  }

  /* ── Logos: compact spacing ── */
  .gvb-logos {
    padding: 32px 20px;
  }

  .gvb-logos__track {
    gap: 24px;
  }

  /* ── Branding section: stack image + text vertically ── */
  .gvb-branding {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  .gvb-branding__inner {
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: 20px;
    padding: 0;
  }

  /* display:contents flattens __content children into __inner's flex flow */
  .gvb-branding__content {
    display: contents;
  }

  .gvb-branding__heading {
    order: 1;
    font-size: 28px;
    text-align: left;
  }

  .gvb-branding__image {
    order: 2;
    flex: none;
    width: 100%;
    height: 280px;
  }

  .gvb-branding__text {
    order: 3;
  }

  .gvb-branding__inner .gvb-btn-primary {
    order: 4;
    align-self: flex-start;
  }

  /* ── Industry grid: single column ── */
  .gvb-industry-grid,
  .gvb-industry-grid--left-stacked,
  .gvb-industry-grid--two-tall {
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .gvb-industry-grid--left-stacked .gvb-industry-card--tall {
    grid-column: 1;
    grid-row: auto;
  }

  .gvb-industry-card {
    min-height: 280px;
  }

  /* ── Overlay cards: stack vertically ── */
  .gvb-overlay-cards {
    flex-direction: column;
  }

  .gvb-overlay-cards--2x2 .gvb-overlay-card {
    flex: 1 1 100%;
  }

  .gvb-overlay-card {
    min-height: 280px;
  }

  .gvb-overlay-card__title {
    font-size: 22px;
  }

  /* ── Bedrucken sections ── */
  .gvb-bedrucken-anlass {
    margin: 0 20px 20px;
    padding: 32px 20px 40px;
  }

  .gvb-bedrucken-anlass__heading {
    font-size: 28px;
  }

  /* ── Anlass overlay cards: horizontal carousel at 426–768px, 1-column at ≤425px ── */
  .gvb-bedrucken-anlass .gvb-overlay-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    /* Explicit overflow-y: hidden opts out of the CSS spec rule that
       implicitly promotes overflow-y to `auto` when overflow-x is set
       to auto/scroll. Without this, any tiny vertical overflow inside
       the cards (from the title bottom: 100px + content margin-top:
       -100px overlap math) shows a stray vertical scrollbar in the
       track. */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gvb-bedrucken-anlass .gvb-overlay-cards::-webkit-scrollbar {
    display: none;
  }

  .gvb-bedrucken-anlass .gvb-overlay-card {
    flex: 0 0 calc(50% - 8px); /* same size as 2-column layout; third card scrolls into view */
    scroll-snap-align: start;
    margin: 0;
  }

  /* Anlass carousel: activate nav buttons (base styling lives at top of file) */
  .gvb-bedrucken-anlass {
    position: relative;
  }

  .gvb-bedrucken-anlass .gvb-carousel-nav {
    display: grid;
  }

  .gvb-bedrucken-anlass .gvb-overlay-card {
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    min-height: 0;
    height: auto;
    gap: 0;
    overflow: hidden;
    background: var(--wp--preset--color--gvb-green);
    border-radius: 20px;
  }

  /* Cards 1 + 3 (--dark-text variant): linen background */
  .gvb-bedrucken-anlass .gvb-overlay-card--dark-text {
    background: var(--wp--preset--color--gvb-linen);
  }

  /* __media becomes a real block — overrides desktop display: contents */
  .gvb-bedrucken-anlass .gvb-overlay-card__media {
    display: block !important;
    position: relative;
    aspect-ratio: unset;
    width: 100%;
    flex-shrink: 0;
  }

  .gvb-bedrucken-anlass .gvb-overlay-card__img {
    position: relative !important;
    inset: auto !important;
    width: 100%;
    height: auto;
    object-fit: unset;
    border-radius: 0;
    display: block;
  }

  /* Carousel-band anlass title/content/desc overrides REMOVED 2026-05-01.
     Old absolute-title-in-media architecture replaced. Title now lives
     in __content (per pattern markup) and __content is bottom-anchored
     absolute (set in base rules). Typography + spacing now driven by
     the canonical 3-band scaling system at end of file. The desc color
     for the green-bg variant (cards 2) is kept here for legibility. */
  .gvb-bedrucken-anlass .gvb-overlay-card__desc {
    color: rgba(237, 232, 219, 0.85);
  }

  /* Cards 1 + 3 (linen bg): graphite desc text */
  .gvb-bedrucken-anlass .gvb-overlay-card--dark-text .gvb-overlay-card__desc {
    color: var(--wp--preset--color--gvb-graphite);
  }

  .gvb-bedrucken-warum {
    padding: 48px 20px;
  }

  .gvb-bedrucken-warum__heading {
    font-size: 28px;
  }

  .gvb-bedrucken-warum__text p {
    font-size: 22px;
  }

  /* ── Druckverfahren ── */
  .gvb-druckverfahren {
    padding: 48px 20px;
  }

  .gvb-druckverfahren__heading {
    font-size: 28px;
  }

  .gvb-druckverfahren__intro {
    font-size: 20px;
  }

  /* ── Flaschen intro (Unsere Flaschen + Bedrucken) ── */
  .gvb-flaschen-intro {
    padding: 48px 20px !important;
  }

  .gvb-flaschen-intro p {
    font-size: 20px;
  }

  /* ── Flaschen cards: stack vertically ── */
  .gvb-flaschen-cards {
    padding: 0 20px 48px;
  }

  .gvb-flaschen-cards__list {
    flex-direction: column;
    gap: 32px;
  }

  /* 4-col Bedrucken variant: 2-column on tablet */
  .gvb-flaschen-cards__list--4 {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
  }

  .gvb-flaschen-cards__list--4 .gvb-flaschen-cards__item {
    flex: 1 1 calc(50% - 10px);
  }

  /* ── Bottle product card: stack image + content ── */
  .gvb-bottle-showcase {
    padding: 0 20px 40px;
  }

  .gvb-bottle-card {
    flex-direction: column;
    min-height: auto;
  }

  .gvb-bottle-card__image {
    flex: none;
    width: 100%;
    height: 280px;
  }

  /* Mobile bottle img: lock HEIGHT to the 280px container and let width
     derive from the aspect ratio. Defeats per-SKU `width: 72-78%; top: -6%`
     etc. that made tall bottles overflow the container's overflow:hidden
     box, cropping the bottoms. !important needed because per-SKU selectors
     (.gvb-bottle-card--slim .gvb-bottle-card__image img) have higher
     specificity than this 0,2,1 rule. */
  .gvb-bottle-card__image img {
    height: 100% !important;
    width: auto !important;
    max-height: 100% !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  /* Premium Karaffe: zoom out a touch on mobile (its silhouette is
     wider/heavier than the slim bottles, so default 100% height felt
     too dominant). Constrain via a smaller max-height. */
  .gvb-bottle-card--karaffe .gvb-bottle-card__image img {
    max-height: 86% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .gvb-bottle-card__content {
    padding: 32px 24px;
  }

  .gvb-bottle-card__title {
    font-size: 38px;
  }

  /* Feature cards: 2-col wrap on tablet */
  .gvb-edelstahl-features__cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .gvb-edelstahl-feature-card {
    flex: 0 0 calc(50% - 10px);
    align-items: center;
  }

  .gvb-edelstahl-feature-card__image {
    width: 140px;
    height: 140px;
  }

  /* Feature cards: bump desc font from base 13 → 15 on mobile/tablet
     for readability. Desktop unchanged. Applied to all three product
     pages — Edelstahl, Borosilikat, and Tritan (Tritan reuses the
     borosilikat class set). */
  .gvb-edelstahl-feature-card__desc,
  .gvb-borosilikat-feature-card__desc {
    font-size: 15px;
  }

  /* Verschluss cards: single column, responsive image */
  .gvb-borosilikat-verschluesse__cards {
    grid-template-columns: 1fr;
  }

  .gvb-verschluss-card {
    padding: 28px 20px;
  }

  .gvb-verschluss-card__image {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gvb-borosilikat-features__cards {
    flex-wrap: wrap;
    justify-content: center;
  }

  .gvb-borosilikat-feature-card {
    flex: 0 0 calc(50% - 10px);
  }

  .gvb-borosilikat-feature-card__image {
    width: 140px;
    height: 140px;
  }

  /* ── Product cards: horizontal carousel at 426–784px (single column ≤425) ── */
  .gvb-product-cards {
    position: relative;
  }

  .gvb-product-cards .gvb-carousel-nav {
    display: grid;
  }

  .gvb-product-cards__track {
    overflow-x: auto;
    /* Pin Y explicitly: when overflow-x is `auto`, overflow-y `visible`
       is computed to `auto` (W3C overflow spec) → would expose a phantom
       vertical scroll on touch from subpixel overlap of the absolute
       title (bottom: 23.8%) + negative-margin content (-28.7%). */
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    gap: 16px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .gvb-product-cards__track::-webkit-scrollbar {
    display: none;
  }

  .gvb-product-card {
    flex: 0 0 calc(50% - 8px) !important;
    scroll-snap-align: start;
  }

  .gvb-product-card__text {
    font-size: 14px;
    line-height: 1.4;
  }

  /* ── Steps (Bedrucken / Lösungen): stack vertically ── */
  .gvb-steps {
    padding-left: 20px !important;
    padding-right: 20px !important;
    padding-bottom: 10px !important;
  }

  .gvb-steps__rows {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .gvb-steps__row {
    flex-direction: column;
    height: auto;
  }

  /* Force step text always above its image regardless of DOM order
     (Step 2 has image first in HTML for desktop alternation)       */
  .gvb-steps__content {
    order: 1;
    /* padding-left + number `left` were both bumped +25 from the previous
       (190 → 215, 60 → 85) to push the cluster further toward card center.
       Gap between number and text preserved. */
    padding: 40px 32px 40px 215px;
    min-height: 200px;
    /* Override the base `align-items: center` on mobile so the title
       locks at padding-top instead of floating with content length.
       Cards with longer content grow taller (min-height is a floor)
       — title + number stay aligned across all 3 cards. */
    align-items: flex-start;
  }

  .gvb-steps__image {
    order: 2;
  }

  .gvb-steps__number {
    font-size: 150px;
    left: 85px;
    /* Center on the true horizontal middle (50%) — overrides the
       desktop's 43% which biases the larger numerals slightly upward. */
    top: 50%;
  }

  .gvb-steps__row:first-child .gvb-steps__number {
    left: 85px;
  }

  .gvb-steps__row:nth-child(1) .gvb-steps__text,
  .gvb-steps__row:nth-child(2) .gvb-steps__text,
  .gvb-steps__row:nth-child(3) .gvb-steps__text {
    transform: none;
  }

  .gvb-steps__image {
    flex: none;
    width: 100%;
    height: 240px;
  }

  /* Steps H3: 24 → 20 on mobile/tablet — matches the iPad-band rule
     (785-1024) for consistent cascade. Long German titles fit cleaner. */
  .gvb-steps__text h3 {
    font-size: 20px;
  }

  /* Steps paragraph: shrink 16 → 14 on mobile/tablet for tighter fit
     inside the green card. Desktop unchanged. */
  .gvb-steps__text p {
    font-size: 14px;
  }

  /* ── Über uns ── */
  .gvb-uberuns-intro {
    padding: 48px 20px;
  }

  .gvb-uberuns-intro p {
    font-size: 20px;
  }

  /* ── Datenschutz ── */
  .gvb-datenschutz {
    padding: 48px 20px 80px;
  }

  .gvb-datenschutz__heading {
    font-size: 22px;
    margin-top: 32px;
  }

  .gvb-uberuns-vm {
    padding-left: 20px;
    padding-right: 20px;
  }

  .gvb-uberuns-vm__row {
    flex-direction: column;
    height: auto;
  }

  .gvb-uberuns-vm__image {
    flex: none;
    width: 100%;
    height: 260px;
  }

  .gvb-uberuns-vm__content {
    padding: 40px 24px;
  }

  .gvb-uberuns-vm__text h2 {
    font-size: 28px;
  }

  .gvb-uberuns-team {
    padding: 20px 20px 20px;
  }

  .gvb-uberuns-personen {
    padding: 0px 20px 60px;
  }

  .gvb-uberuns-personen h2 {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  /* Mobile sizing for the team-variant heading (mirrors personen H2). */
  .gvb-uberuns-team__heading {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  .gvb-uberuns-personen__text p {
    font-size: 18px;
  }

  .gvb-ueberzeugung {
    padding: 48px 20px 60px;
  }

  .gvb-ueberzeugung__heading {
    font-size: 28px;
    letter-spacing: -0.5px;
  }

  /* Remove the excessive 128px side padding on the cards wrapper */
  .gvb-ueberzeugung__cards {
    padding: 0;
  }

  .gvb-ueberzeugung__card {
    padding: 40px 24px;
  }

  .gvb-ueberzeugung__text {
    font-size: 22px;
  }

  /* ── Impressum ── */
  .gvb-impressum-card {
    padding-bottom: 0 !important;
  }

  .gvb-impressum-card__inner {
    padding: 32px 24px;
  }

  .gvb-impressum-card__company {
    font-size: 28px;
  }

  /* ── Personalisieren cards ── */
  .gvb-personalisieren__heading {
    font-size: 28px;
  }

  /* ── Personalisieren cards at ≤768 — REVERT to stacked layout ──
     Below 768 the overlay layout doesn't leave enough room for readable
     typography. Switch back to the classic stacked structure:
     image-top + colour-block-below containing title + desc.
     Cards become vertical-tall instead of square — text stays at
     comfortable sizes. */
  .gvb-personalisieren-card {
    aspect-ratio: unset;
    overflow: hidden;
  }

  .gvb-personalisieren-card--dark {
    background: var(--wp--preset--color--gvb-graphite);
  }

  .gvb-personalisieren-card--orange {
    background: var(--wp--preset--color--gvb-orange);
  }

  /* Override base display:contents — __media becomes a real positioned
     block holding the image at the TOP of the card. */
  .gvb-personalisieren-card__media {
    display: block !important;
    position: relative !important;
    height: 300px;
    width: 100%;
    overflow: hidden;
  }

  .gvb-personalisieren-card__img {
    position: absolute !important;
    inset: 0 !important;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
  }

  /* __content sits BELOW the image as a colour block (not overlay).
     Position relative so it serves as the positioning context for the
     absolutely-positioned title above it. Desc flows naturally. */
  .gvb-personalisieren-card__content {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    z-index: auto;
    display: block;
    padding: 0 20px 24px;
    min-height: 0;
  }

  /* Title overlays the bottom of the image area — even though it's
     a DOM child of __content, we position it absolutely with a
     negative `top` so it overflows up out of __content into the
     image. z-index keeps it above the image. Title is taken out of
     normal flow so __content's height = desc only (no flex gap to
     account for the title). */
  .gvb-personalisieren-card__title {
    position: absolute;
    bottom: 100%;
    left: 20px;
    right: 20px;
    margin-bottom: 8px;
    line-height: 1.1;
    z-index: 2;
  }

  .gvb-personalisieren-card__desc {
    line-height: 1.4;
    letter-spacing: 0.2px;
  }

  /* ── Contact form: consistent field spacing on mobile ── */
  .gvb-form-expanded-container.is-open.ff-t-container {
    flex-wrap: wrap !important;
  }

  .gvb-contact__form-col .ff-el-group {
    margin-bottom: 16px;
  }

  .gvb-contact__form-col .ff-t-cell .ff-el-group {
    margin-bottom: 0;
  }

  /* ── FAQ items: lighter padding on mobile ── */
  .gvb-faq__item {
    padding: 20px 24px;
  }

  /* Mobile + small-tablet (≤768) — TWO-LAYER background. Mobile reuses
     the same split-layer pattern as desktop, but layer 1 is FIXED-HEIGHT
     instead of stretched (mobile's --bg-h is 1.7–1.9× the natural SVG
     height, so a stretched top wave would deform into a "claw").

     Layer 1 (top): mobile-top-wave.svg — top wave only at fixed
       --top-wave-h, opaque linen padding included.
     Layer 2 (bottom): background-mobile-bottom.svg — bottom wave path
       only (NO top wave), so nothing leaks into the page middle when
       stretched to --bg-h.

     TUNABLE: --top-wave-h sets where the top wave's bottom edge lands.
     Tablet (426–768) --bg-h: 4200px tuned. Sub-breakpoints below override
     for narrower mobile viewports. */
  .wp-site-blocks {
    --top-wave-start: 0px;
    --top-wave-h: 1100px;
    --top-wave-fade: 0px;
    --bg-h: 4200px;
    background-image:
      url('assets/svg/mobile-top-wave.svg'),
      linear-gradient(
        to bottom,
        #459271 0px,
        #459271 var(--top-wave-start),
        transparent calc(var(--top-wave-start) + var(--top-wave-fade))
      );
    background-size:
      calc(100% * var(--top-wave-zoom)) calc((var(--top-wave-h) - var(--top-wave-start)) * var(--top-wave-zoom)),
      100% calc(var(--top-wave-start) + var(--top-wave-fade));
    background-position:
      center calc(var(--top-wave-h) - (var(--top-wave-h) - var(--top-wave-start)) * var(--top-wave-zoom)),
      center top;
    background-repeat: no-repeat, no-repeat;
  }

  /* Mobile bottom-wave: swap the SVG on the brand-promise pseudo. */
  .gvb-brand-promise::before {
    background-image: url('assets/svg/background-mobile-bottom.svg');
  }

}

/* ══════════════════════════════════════════════════════════════════════
   Product cards — 2-card carousel band (481–784) card-width-proportional
   ══════════════════════════════════════════════════════════════════════
   Cards in this band are NEVER at Figma's 400px size — they top out
   at ~364px (viewport 784) and shrink to ~212px (viewport 481). So
   the "reset to Figma 40 at band top" approach forced the title
   above Figma's 10%-of-card ratio. Switched to STRICT card-width-
   proportional: each value = its Figma 400px-card ratio × actual
   card width. Card width formula: (viewport - 56) / 2 (40px section
   padding + 16px inter-card gap, then split in half).
     Title (10%): clamp(20px, calc(-2.8px + 5vw),  40px)
     Body  (4%):  clamp(11px, calc(-1.12px + 2vw), 16px)
     Gap   (3%):  clamp(6px,  calc(-0.84px + 1.5vw), 12px)
     PadB  (8%):  clamp(16px, calc(-2.24px + 4vw),  32px)
   Worked examples (card width / title at 10% of card):
     784 (card 364)  → 36.4 / 14.6 / 10.9 / 29.1
     700 (card 322)  → 32.2 / 12.9 /  9.7 / 25.8
     600 (card 272)  → 27.2 / 11 (floor) / 8.2 / 21.8
     553 (card 248)  → 24.9 / 11 (floor) / 7.5 / 19.9
     481 (card 212)  → 21.2 / 11 (floor) / 6.4 (floor) / 17 (floor)
   At every viewport the title:card ratio equals Figma's 10%, so
   typography scales in lockstep with the card image.
   Block is AFTER the big @media (max-width: 784px) above so it
   overrides the body 14px / line-height 1.4 set there. Above 784
   the @media (min-width: 785px) Figma-1280 formula takes over
   (different anchor — small jump at the layout switch is expected).
   Below 481 the ≤480 mobile clamp takes over with its own restart at
   40/16/12/32 at viewport 480. */
@media (min-width: 481px) and (max-width: 784px) {
  .gvb-product-card__title {
    /* !important needed to beat the global mobile reset
       `@media (max-width: 784px) { h2 { font-size: 30px !important } }`
       further up the file. */
    font-size: clamp(20px, calc(-2.8px + 5vw), 40px) !important;
  }
  .gvb-product-card__text {
    font-size: clamp(11px, calc(-1.12px + 2vw), 16px);
    line-height: 1.4;
  }
  .gvb-product-card__content {
    gap: clamp(6px, calc(-0.84px + 1.5vw), 12px);
    padding-bottom: clamp(16px, calc(-2.24px + 4vw), 32px);
  }
}

/* ── Mobile sub-breakpoint --bg-h overrides ──────────────────────────
   Each tier needs its own --bg-h because the page gets PHYSICALLY TALLER
   as widths shrink (more line-wraps, taller stacked sections). Cascade
   order: narrowest max-width LAST so it wins. */

/* Mobile L (376–425) */
@media (max-width: 425px) {
  .wp-site-blocks {
    --top-wave-h: 1100px;
    --bg-h: 6000px;
  }
}

/* Mobile M (321–375) */
@media (max-width: 375px) {
  .wp-site-blocks {
    --top-wave-h: 1100px;
    --bg-h: 5900px;
  }
}

/* Mobile S (≤320) */
@media (max-width: 320px) {
  .wp-site-blocks {
    --top-wave-h: 1100px;
    --bg-h: 6500px;
  }
}

/* Hero H1 shrink on the smallest phones (≤400) — long German
   titles (Sportvereine, Bildung etc.) overflow at the H1's clamp
   floor of 35.641. Drop a few px so the title fits in the
   ~243px usable width (after the 32px hero side padding). !important
   needed because the hero patterns set the font-size inline. */
@media (max-width: 400px) {
  .gvb-hero h1,
  .gvb-hero .wp-block-heading {
    font-size: 33px !important;
  }
}

/* ≤375 (Mobile M and below): drop another 2px so titles fit at the
   smallest viewports. */
@media (max-width: 375px) {
  .gvb-hero h1,
  .gvb-hero .wp-block-heading {
    font-size: 31px !important;
  }
}

/* ≤320 (Mobile S): another 2px drop for the tightest phones. */
@media (max-width: 320px) {
  .gvb-hero h1,
  .gvb-hero .wp-block-heading {
    font-size: 29px !important;
  }
}

@media (max-width: 480px) {

  /* ── Contact form: stack two-column rows on phones ──
     FF keeps .ff-t-container as display:flex at every viewport
     (newer FF versions don't drop to block layout). Long dropdown
     values like "Edelstahlflasche" / "Wideneck Edition" / "Premium
     Karaffe / Deckel mit Dichteinsatz" overflow the ~150px cell
     width on a 390px Android, getting ellipsized.

     Force the row to flex-column at ≤480 so each cell becomes
     full-width (~350px on a 390px phone) — long values fit cleanly.

     Use gap: 24px to match the form's canonical vertical rhythm:
       - .ff-t-container has margin-bottom: 24px between rows
       - .ff-el-group (single-field rows) has margin-bottom: 24px
       - now stacked cells inside a row also get 24px gap
     → consistent 24px vertical spacing throughout the mobile form. */
  .gvb-contact__form-col .ff-t-container {
    flex-direction: column;
    gap: 24px;
  }

  .gvb-contact__form-col .ff-t-cell {
    width: 100% !important;
    flex: 1 1 100% !important;
  }

  /* Remove the desktop 6px offset on Verschluss placeholder — at mobile
     the Menge label sits 6px higher, causing label misalignment */
  .gvb-field--verschluss.ff-t-container
    .ff-t-column-1:not(:has(.ff-el-group:not(.ff_excluded))) {
    padding-top: 0;
  }

  .gvb-field--material.ff-t-container
    .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded))) {
    padding-top: 0;
  }

  .gvb-field--verschluss.ff-t-container
    .ff-t-column-2:not(:has(.ff-el-group:not(.ff_excluded))) {
    padding-top: 0;
  }

  /* Fluent Forms default: .ff-el-input--content has margin-left: auto
     + width: 100% isn't enforced at mobile — real inputs (Modell, Menge)
     end up narrower/offset vs the ::after placeholder boxes. Force both. */
  .gvb-contact__form-col .ff-el-input--content {
    width: 100% !important;
    margin-left: 0 !important;
  }

}

/* ──────────────────────────────────────────────────────────────────────
   Mobile-view boundary for layout-related rules — bumped from 425 → 480
   on 2026-04-28 so iPhone 14 Plus (428), Pro Max (430), and similar large
   phones get the proper mobile experience.
   • Personalisieren stays a vertical stack (4 cards is fine to scroll).
   • Anlass + Product cards become a 1-card horizontal carousel — cards
     stay full-width (so they read at full design scale), but the user
     swipes/clicks chevrons to flip between them instead of scrolling
     past three big stacked cards.
   Contact form rules stay at ≤425 (Fluent-Forms-specific mobile spacing).
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  /* ── Personalisieren: single column on phones ── */
  .gvb-personalisieren__grid {
    grid-template-columns: 1fr;
  }

  /* Personalisieren card typography on phones — drop 2px from the
     ≤784 baseline (22/14 → 20/12 at viewport 480), then scale linearly
     down to 18/11 at viewport 320 so long German titles still fit
     comfortably on the smallest phones. */
  .gvb-personalisieren-card__title {
    font-size: clamp(18px, calc(14px + 1.25vw), 20px);
  }
  .gvb-personalisieren-card__desc {
    font-size: clamp(11px, calc(9px + 0.625vw), 12px);
  }

  /* ── Tritan + Edelstahl hero: shift bottle subject right on phones
     so the H1 title (left side) doesn't overlap the bottle. Vertical
     positions match the desktop values (80%/69%). Tune by changing the
     X percentage — higher pushes further right. ── */
  .gvb-hero__bg--tritan {
    object-position: 20% 80%;
  }
  .gvb-hero__bg--edelstahl {
    object-position: 0% 69%;
  }

  /* ── Steps number: align the numeral's CAP with the title's CAP on
     phones. Title padding-top is 28px; the 80px numeral has ~5px of
     leading so its visible cap sits below box-top. Top:22 compensates
     so the visible glyph cap matches the title's cap visually.
     transform:none defeats the base translateY(-50%) so `top` is the
     box-top (not the centre line). ── */
  .gvb-steps__number {
    top: 16px;
    transform: none;
  }

  /* ── Anlass: 1-card carousel (inherit row/snap/overflow from ≤784 block,
     just widen each card to 100%). Chevron nav stays visible. ── */
  .gvb-bedrucken-anlass .gvb-overlay-card {
    flex: 0 0 100%;
  }

  /* Anlass mobile font-sizes REMOVED 2026-05-01. Replaced by canonical
     3-band scaling system at end of file (mobile clamp scales title +
     desc + gap + padding proportionally with viewport). */

  /* ── Product cards: 1-card carousel ── */
  .gvb-product-card {
    flex: 0 0 100% !important;
  }

}

/* Mobile line breaks: hidden on desktop, visible at specific breakpoints */
.gvb-br-mobile,
.gvb-br-mobile-m,
.gvb-br-mobile-s,
.gvb-br-card,
.gvb-br-phone,
.gvb-only-phone {
  display: none;
}

@media (max-width: 375px) {
  .gvb-br-mobile {
    display: inline;
  }
}

/* .gvb-br-phone — line break visible at ≤480 (covers all typical phone
   viewports including iPhone 390 / Android 412 where .gvb-br-mobile
   ≤375 doesn't fire). Used in hero H1 long compound German words.
   .gvb-only-phone — same breakpoint, for visible content (e.g. a soft
   hyphen "-" between mid-word breaks). */
@media (max-width: 480px) {
  .gvb-br-phone {
    display: inline;
  }
  .gvb-only-phone {
    display: inline;
  }
}

/* .gvb-br-card — used in industry-card H5 to break long German compound
   words (Gesundheits/wesen, Bildungs/einrichtungen) at narrow viewports
   where the single word would overflow the card. Active ≤480 covers all
   phones; desktop stays single-line. */
@media (max-width: 480px) {
  .gvb-br-card {
    display: inline;
  }
}

@media (max-width: 375px) and (min-width: 321px) {
  .gvb-br-mobile-m {
    display: inline;
  }
}

/* Mobile S (≤320px): line breaks + tighten anlass overlay */
@media (max-width: 320px) {
  .gvb-br-mobile-s {
    display: inline;
  }

  /* Anlass ≤320 hardcoded sizes REMOVED 2026-05-01. The mobile-band
     clamp at the end of file scales down to viewport 320 cleanly. */
}

@media (max-width: 480px) {

  /* ── Global typography + button scale for mobile ── */
  h1, .has-h-1-font-size { font-size: 34px !important; }
  h2, .has-h-2-font-size { font-size: 26px !important; }

  /* Lösungen hero: at phone width push subject further right than the
     tablet override (X 30% → X 10%). Lower X slides the visible window
     LEFT over the wider source image, so the fixed-position subject
     appears further to the RIGHT within the visible frame. */
  .gvb-hero__bg--losungen {
    object-position: 10% 85% !important;
  }
  .has-display-font-size  { font-size: 38px !important; }

  .gvb-btn--primary,
  .gvb-btn--secondary {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* ── Product cards (1-card carousel band): card "restarts" big at
     480 (full width), so reset typography + spacing to the 1440
     baseline AT 480 viewport, then scale ALL down proportionally as
     viewport shrinks to 320. Title needs !important to beat the
     global h2 reset above. ── */
  .gvb-product-card__title {
    /* 25 @ 320 → 40 @ 480 */
    font-size: clamp(25px, calc(-5px + 9.375vw), 40px) !important;
  }
  .gvb-product-card__text {
    /* 11 @ 320 → 16 @ 480 */
    font-size: clamp(11px, calc(1px + 3.125vw), 16px);
  }
  .gvb-product-card__content {
    /* gap 8→12, padding-bottom 21→32 across 320→480 */
    gap: clamp(8px, 2.5vw, 12px);
    padding-bottom: clamp(21px, calc(-1px + 6.875vw), 32px);
  }

  /* ── Steps: compact number + tighter padding ── */
  .gvb-steps__content {
    padding: 28px 20px 28px 76px;
    min-height: 180px;
  }

  .gvb-steps__number {
    font-size: 80px;
    left: 12px;
    letter-spacing: -4px;
  }

  /* "1" first-child override from @media ≤784 (left: 85) has higher
     specificity than the rule above, so we re-pin it here at left: 12
     too — otherwise the smaller padding-left (76) at this viewport
     causes "1" to overlap the text. */
  .gvb-steps__row:first-child .gvb-steps__number {
    left: 12px;
  }

  /* ── Bedrucken 4-col cards: single column on small phones ── */
  .gvb-flaschen-cards__list--4 .gvb-flaschen-cards__item {
    flex: 1 1 100%;
  }

  /* ── Feature cards: single column ── */
  .gvb-edelstahl-feature-card,
  .gvb-borosilikat-feature-card {
    flex: 0 0 100%;
    max-width: 280px;
  }

  /* ── Contact: full-bleed section ── */
  /* ── Überzeugung cards: tightest padding ── */
  .gvb-ueberzeugung__text {
    font-size: 18px;
  }

  .gvb-ueberzeugung__card {
    padding: 32px 16px;
  }

  /* ── FAQ items ── */
  .gvb-faq__item {
    padding: 18px 16px;
  }

  /* ── Logos: tighter gap ── */
  .gvb-logos__track {
    gap: 16px;
  }

  /* ── Download bars: wrap label + action ── */
  .gvb-download-bar {
    flex-direction: column;
    align-items: flex-start;
    height: auto;
    gap: 8px;
    padding: 20px 24px;
  }

  /* ── Verschlüsse section (Borosilikat + Tritan) ──
     Borosilikat's image is locked at height: 347px via the
     col-scoped rule at line ~3531 (specificity 0,3,0 beats the
     mobile generic 4/3 rule). Release it here for phone widths.
     Tritan markup has no .gvb-verschluss-col, so the height-release
     rule is a no-op there — but the shared heading + title classes
     also need to scale down on both pages. ── */
  .gvb-borosilikat-verschluesse .gvb-verschluss-col .gvb-verschluss-card__image {
    height: auto;
    aspect-ratio: 4 / 3;
  }

  .gvb-borosilikat-verschluesse__heading {
    font-size: 28px;
    margin-bottom: 24px;
  }

  .gvb-verschluss-card__title {
    font-size: 20px;
  }

  .gvb-verschluss-card__desc {
    font-size: 14px;
  }
}

/* ══════════════════════════════════════════════════════════════
   17. MOBILE NAVIGATION OVERLAY
   Targets the WP Navigation block's full-screen mobile drawer.
   Applies only when the menu is open (is-menu-open class).
   ══════════════════════════════════════════════════════════════ */

/* ── Hide desktop nav links when hamburger is active ── */
@media (max-width: 784px) {
  .gvb-header__nav .wp-block-navigation__container {
    display: none !important;
  }

  .gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
  }
}

/* ── Constrain nav wrapper to button size when hamburger is active ── */
@media (max-width: 784px) {
  .gvb-header__nav.wp-block-navigation {
    width: 44px !important;
    height: 44px !important;
    min-width: unset !important;
    min-height: unset !important;
    flex-shrink: 0;
  }
}

/* ── Hamburger button: linen on green header (mobile only) ── */
@media (max-width: 784px) {
  .gvb-header .wp-block-navigation__responsive-container-open,
  .gvb-header .wp-block-navigation__responsive-container-open button {
    color: var(--wp--preset--color--gvb-linen) !important;
    background: transparent !important;
    border: none !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 0;
  }

  .gvb-header .wp-block-navigation__responsive-container-open svg {
    fill: var(--wp--preset--color--gvb-linen) !important;
    stroke: var(--wp--preset--color--gvb-linen) !important;
    width: 24px;
    height: 24px;
  }
}

/* ── Full-screen overlay: GVB green ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--wp--preset--color--gvb-green) !important;
  padding: 0;
}

/* ── WP 6.5+ nesting fix: responsive-close + responsive-dialog must fill the full overlay ── */
/* WP core gives .responsive-close margin:auto in .has-modal-open context.
   Inside the flex-column overlay container, margin:auto overrides align-items:stretch
   and shrinks the div to content-width — all nav items end up crammed into a narrow strip.
   Force both intermediate layers to 100% width + height so the content wrapper spans the viewport. */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  max-width: none !important;
}

.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* WP core adds margin-top: 46px/32px on .responsive-dialog when .admin-bar
     is present (logged-in users) to clear the admin bar. Our overlay already
     covers the full viewport and the admin bar sits on top via its own z-index,
     so this extra margin only creates a phantom gap above the nav links. */
  margin-top: 0 !important;
}

/* ── Overlay content wrapper (mobile only) ── */
/* align-items: flex-start overrides WP's var(--navigation-layout-justification-setting)
   which resolves to flex-end because the nav block has justifyContent:"right" in its layout.
   Without this override the nav links are pushed to the right corner of the overlay. */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* WP resolves --navigation-layout-justification-setting to flex-end because the
     nav block has justifyContent:"right" for desktop. In flex-direction:column that
     becomes the MAIN axis → nav items get pushed toward the bottom of the 100%-height
     overlay, leaving a big empty band at the top. Force flex-start to pin to top. */
  justify-content: flex-start;
  width: 100%;
  /* Top padding clears the fixed close button (24 top + 44 button = 68, +4 breathing).
     Bottom padding gives the last nav item breathing room on short viewports. */
  padding: 72px 32px 80px;
  height: 100%;
  overflow-y: auto;
  /* Prevent mobile rubber-band overscroll revealing the empty area above
     the content when the user drags past the top of the menu. */
  overscroll-behavior: contain;
}

/* ── Close (×) button: hidden by default, only shown when overlay is open ── */
.gvb-header__nav .wp-block-navigation__responsive-container-close {
  display: none !important;
}

/* ── Close (×) button: pinned top-right, linen, 44px touch target (mobile only) ── */
@media (max-width: 784px) {
  .gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
  .gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close-button button {
    color: var(--wp--preset--color--gvb-linen) !important;
    background: transparent !important;
    border: none !important;
    min-width: 44px !important;
    min-height: 44px !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    opacity: 0.9;
    /* Stay pinned at the top-right of the overlay while inner content scrolls.
       The overlay covers the admin bar, so a plain top inset works. */
    position: fixed !important;
    top: 24px;
    right: 24px;
    z-index: 10;
  }


  .gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
    fill: var(--wp--preset--color--gvb-linen) !important;
    stroke: var(--wp--preset--color--gvb-linen) !important;
    width: 24px;
    height: 24px;
  }
}

/* ── Nav list: vertical, left-aligned (overlay only) ── */
/* flex-wrap: nowrap is REQUIRED: the <ul> carries the wp-block-navigation class which sets
   --navigation-layout-wrap:wrap. flex-direction:column + flex-wrap:wrap in a height-constrained
   container causes items to wrap into multiple side-by-side columns (= the "crashing" overlap). */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  gap: 0 !important;
  padding-top: 0;
  width: 100%;
}

/* ── Hide submenu toggle arrows: submenus are always shown flat (overlay only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__toggle-button {
  display: none !important;
}

/* ── Nav items: stack link above submenu vertically (overlay only) ── */
/* WP core sets display:flex; flex-direction:row on .wp-block-navigation-item.
   In overlay context the submenu is position:static so it falls beside the
   parent link in a row — links appear collapsed/overlapping. Force column. */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  flex-direction: column !important;
  align-items: flex-start !important;
}

/* ── Parent nav items (overlay only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:not(.has-child) {
  width: 100%;
  border-bottom: 1px solid rgba(237, 232, 219, 0.15);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* Remove border from last submenu item — parent already provides the section separator */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}

/* ── Hide the Kontakt anchor link from the mobile overlay (desktop only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> a[href*="#kontakt"]),
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(> .wp-block-navigation-item__content[href*="#kontakt"]) {
  display: none !important;
}

/* ── Parent nav links: large + bold (overlay only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item > .wp-block-navigation-item__content {
  color: var(--wp--preset--color--gvb-linen) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  letter-spacing: -0.6px !important;
  line-height: 1.1 !important;
  padding: 10px 0 6px !important;
  white-space: nowrap !important;
  display: block;
  text-decoration: none !important;
}

/* ── Submenu container: remove floating card, show as flat list (overlay only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
  min-width: 0 !important;
  padding: 0 0 12px 0 !important;
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: none !important;
  width: 100%;
  gap: 0;
}

/* ── Submenu links: smaller, 75% linen opacity (overlay only) ── */
.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  color: rgba(237, 232, 219, 0.75) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  letter-spacing: -0.15px !important;
  line-height: 1.2 !important;
  padding: 5px 0 !important;
  display: block;
  text-decoration: none !important;
}

.gvb-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--gvb-linen) !important;
  opacity: 1 !important;
}

/* ══════════════════════════════════════════════════════════════
   18. ANIMATIONS
   ══════════════════════════════════════════════════════════════ */

/* ── Hover lift: industry image cards ── */
.gvb-industry-card {
  will-change: transform;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gvb-industry-card:hover {
  transform: translateY(-8px);
}

/* Whole-card click target: stretched overlay link */
.gvb-industry-card__link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: 16px;
  overflow: hidden;
  text-indent: -9999px;
  white-space: nowrap;
}

/* Keep the CTA button visually on top and clickable */
.gvb-industry-card__content {
  z-index: 4;
}
.gvb-industry-card .gvb-btn-sm {
  position: relative;
  z-index: 5;
  height: 42px;
  min-width: 114px;
  padding: 0 24px;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}
.gvb-industry-card .gvb-btn-sm:hover {
  transform: scale(1.08);
  background-color: var(--wp--preset--color--gvb-orange-hover);
  color: #fff;
}

/* Image zoom on card hover */
.gvb-industry-card img {
  transition: transform 0.5s ease;
}
.gvb-industry-card:hover img {
  transform: scale(1.06);
}

/* ── Hover scale: plain primary buttons (flaschen-cards, branding, etc.) ── */
.gvb-btn-primary {
  will-change: transform;
  transition: transform 0.3s ease, opacity var(--gvb-transition);
}

.gvb-btn-primary:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* ── Hover scale: small buttons inside industry cards ── */
.gvb-btn-sm {
  will-change: transform;
  transition: transform 0.3s ease, opacity var(--gvb-transition);
}

.gvb-btn-sm:hover {
  transform: scale(1.08);
  opacity: 1;
}

/* ── Hover lift: "Mehr erfahren" primary buttons ── */
.wp-block-button.gvb-btn--primary {
  will-change: transform;
  transition: transform 0.3s ease, background-color var(--gvb-transition);
}

.wp-block-button.gvb-btn--primary:hover {
  transform: scale(1.08);
}

/* ── Fade-up on scroll ── */
.gvb-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.gvb-fade-up.gvb-in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hover scale: blog "Mehr erfahren" read-more button ── */
.wp-block-read-more.gvb-btn--orange {
  will-change: transform;
  transition: background-color var(--gvb-transition), transform 0.3s ease !important;
}

.wp-block-read-more.gvb-btn--orange:hover {
  transform: scale(1.08) !important;
}

/* ── Hover lift: blog article cards ── */
.gvb-blog-card {
  position: relative;
  will-change: transform;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.gvb-blog-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.13) !important;
}

/* ── Make the entire card clickable via the title link ── */
/* The ::after stretches to cover the whole card (position:relative above).
   The thumb <a> is the same URL so the overlap doesn't matter. */
.gvb-blog-card .wp-block-post-title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  z-index: 0;
}

/* Keep the thumb link visually on top (same destination, belt-and-braces) */
.gvb-blog-card__thumb {
  position: relative;
  z-index: 1;
}

/* Restore hover scale on buttons that also carry gvb-fade-up */
.gvb-btn-primary.gvb-in-view:hover,
.gvb-btn-sm.gvb-in-view:hover {
  transform: scale(1.08);
}

.wp-block-button.gvb-btn--primary.gvb-in-view:hover {
  transform: scale(1.08);
}


/* ══════════════════════════════════════════════════════════════
   19. LARGE-SCREEN CEILING — max-width: 1400px on all sections
   Everything freezes at 1400px. Only side margins grow beyond that.
   ══════════════════════════════════════════════════════════════ */

/* Outer shell cap: every direct child of .wp-site-blocks (sections,
   footer, alignfull blocks) stops growing at 2560px and centres.
   Specificity (0,2,0) via :not() intentionally overrides Section 19a's
   1400px cap so content sections stretch up to 2560 on wide screens
   (heroes keep their 1400 cap via Section 19b's !important rules).
   Header's fixed inner .gvb-header is unaffected; its alignment is
   handled by the min() padding rule in Section 19b below.
   Page background (linen + green waves) now lives on .wp-site-blocks
   itself as a single background-image (April 2026 refactor) — width
   stretches full viewport, height locked via --bg-h, doesn't grow on
   ultrawide. Independent of the 2560 outer-shell cap. */
.wp-site-blocks > *:not(.gvb-header) {
  max-width: 2560px;
  margin-inline: auto;
}

/* ──────────────────────────────────────────────────────────────
   19a. Content sections — no WP inline margin, general rule works.
   ────────────────────────────────────────────────────────────── */
.gvb-logos,
.gvb-testimonials,
.gvb-contact,
.gvb-product-cards,
.gvb-branchen,
.gvb-steps,
.gvb-uberuns-team,
.gvb-uberuns-vm,
.gvb-uberuns-personen,
.gvb-ueberzeugung,
.gvb-flaschen-cards,
.gvb-druckverfahren,
.gvb-bedrucken-warum,
.gvb-download-cards,
.gvb-bottle-showcase,
.gvb-blog-featured,
.gvb-blog-all,
.gvb-personalisieren,
.gvb-edelstahl-features,
.gvb-borosilikat-features,
.gvb-borosilikat-verschluesse,
.gvb-brand-promise,
.gvb-branding,
.gvb-branding__inner,
.gvb-flaschen-intro,
.gvb-uberuns-intro,
.gvb-losungen-intro,
.gvb-intro-text {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

/* (Removed: .gvb-product-cards { max-width: 1440px } — Section 19b's
   universal 1650 cap now governs product-cards too.) */

/* ──────────────────────────────────────────────────────────────
   19b. Card sections — WP writes inline margin: 0 20px on these,
   so we need a media query + !important to override beyond 1400px.
   ────────────────────────────────────────────────────────────── */

@media (min-width: 1440px) {

  /* UNIVERSAL CONTENT CAP — every content section caps at 1650 (Figma's
     1920 frame hero width = our new design baseline). At 1440 viewport the
     rule resolves to `min(1400, 1650) = 1400` so behaviour matches Section
     19a's 1400 baseline. Above 1440, sections grow toward 1650 then cap at
     viewport ≥1690. At 1920 viewport: 1650 wide, (1920-1650)/2 = 135px
     gutter each side — matches the 86.14% content/viewport ratio Figma uses
     at 1920. At 2560: 455px gutter each side. ≤1440 untouched.
     Specials NOT in this list (handled separately):
       - .gvb-brand-promise → full-bleed (green strip)
       - footer (.wp-block-template-part:last-child) → full-bleed
       - .gvb-branding → own 1650 cap with fluid inner image+content clamps
       - .gvb-blog-featured → own clamp(1400, 85.94vw, 1650)
       - .gvb-impressum-card → calc-margin variant (below in 19b)
       - .gvb-bedrucken-anlass → calc-margin variant (below in 19b)
       - .gvb-header → fixed bar, own padding rule (below in 19b) */
  .gvb-hero,
  .gvb-single-hero,
  .gvb-faq,
  .gvb-contact,
  .gvb-cases,
  .gvb-bottle-showcase,
  .gvb-personalisieren,
  .gvb-steps,
  .gvb-druckverfahren,
  .gvb-flaschen-intro,
  .gvb-uberuns-intro,
  .gvb-losungen-intro,
  .gvb-intro-text,
  .gvb-logos,
  .gvb-testimonials,
  .gvb-product-cards,
  .gvb-branchen,
  .gvb-uberuns-team,
  .gvb-uberuns-vm,
  .gvb-uberuns-personen,
  .gvb-ueberzeugung,
  .gvb-flaschen-cards,
  .gvb-bedrucken-warum,
  .gvb-download-cards,
  .gvb-blog-all,
  .gvb-edelstahl-features,
  .gvb-borosilikat-features,
  .gvb-borosilikat-verschluesse {
    max-width: min(calc(100% - 40px), 1650px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Product cards override — section goes full-bleed up to 1690 cap, and
     the inline 20px lateral padding from patterns/product-cards.php is the
     actual gutter. At 1440 viewport: section = 1440, inner = 1400 (vs.
     1360 under the universal `calc(100% - 40px)` rule). At ≥1690 viewport
     the section caps at 1690 with 1650 of inner content. */
  .gvb-product-cards {
    max-width: min(100%, 1690px) !important;
  }

  /* Intro paragraphs (and any direct children) use a fluid reading-width
     cap — 1200 baseline (theme contentSize) up to 1600 on 2560 screens.
     Targeted at (0,2,1) specificity to beat the WP constrained-layout rule
     `.wp-container-core-group-is-layout-XXX > *` (0,1,1) that otherwise
     locks inner content at 1200. */
  .gvb-flaschen-intro.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull),
  .gvb-uberuns-intro.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull),
  .gvb-losungen-intro.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull),
  .gvb-intro-text.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull) {
    max-width: clamp(1200px, 65vw, 1600px);
  }

  /* Impressum: uses calc margin instead of max-width (WP flex-stretch pitfall).
     Now caps at 1650 (universal content cap). At 1440 viewport this gives
     a negative margin which max() prevents — fall back to 20px gutter. */
  .gvb-impressum-card {
    margin-left: max(20px, calc((100% - 1650px) / 2)) !important;
    margin-right: max(20px, calc((100% - 1650px) / 2)) !important;
  }

  /* Anlass: caps at 1650 (shared content cap), with a 20px breathing gap
     preserved until the cap hits. max() picks the larger of 20px or the
     excess-gutter calc so the margin never goes negative below ~1690
     viewport. Uses calc-margin instead of max-width because WP flex-stretch
     ignores max-width on .wp-site-blocks direct children. */
  .gvb-bedrucken-anlass {
    margin-left: max(20px, calc((100% - 1650px) / 2)) !important;
    margin-right: max(20px, calc((100% - 1650px) / 2)) !important;
  }

  /* Header: green bar stays full-width, logo + nav cluster tracks 56px
     INSIDE the 1650 content cap (matches Figma 1920 — header is narrower
     than hero box on each side). Logo sits ~56px right of hero left edge.
     At 1440 → 54 (cluster 1332, untouched). Cap engages at viewport ~1646.
     At 1920 → 191 (cluster 1538). At 2560 → 511 (cluster 1538). */
  .gvb-header {
    padding-left: max(54px, calc((100% - 1650px) / 2 + 56px)) !important;
    padding-right: max(54px, calc((100% - 1650px) / 2 + 56px)) !important;
  }

}

/* ══════════════════════════════════════════════════════════════
   SECTION 20 — TYPOGRAPHY LOCK (≥1440)
   ══════════════════════════════════════════════════════════════
   Per April 2026 refactor: typography no longer scales 1440→2560.
   Every clamp was flattened to its 1440 MIN value (matching Figma's
   2200 design, where text sizes are identical to our 1440 baseline).
   Sections 1–19 now use static `font-size: Xpx` declarations and
   pattern PHP files use `"fontSize":"Xpx"` directly.

   Hero H1 inline clamps preserved
   ────────────────────────────────
   Hero patterns (faq-hero, blog-hero, industrie-hero-*, etc.) still
   ship with a custom 320→1440 mobile slope:
     clamp(35.641px, 2.228rem + ((1vw - 3.2px) * 2.621), 65px)
   This stays — it gives smooth mobile-to-laptop scaling and caps at
   65 at 1440 viewport. The override below pins H1 to 65 at ≥1440 as
   a defensive guard (matches the clamp's natural MAX). hero-home.php
   uses a static 65px directly (no mobile clamp); this rule is a no-op
   for that file.
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 1440px) {
  .gvb-hero h1,
  .gvb-hero .wp-block-heading {
    font-size: 65px !important;
  }
}

/* ══════════════════════════════════════════════════════════════
   SECTION 21 — LANGUAGE SWITCHER (DE / EN)
   ══════════════════════════════════════════════════════════════
   Markup output by [gvb_lang_switcher] shortcode (functions.php
   Section 12). Embedded inside .gvb-header__right alongside the
   navigation block — see parts/header-en.html (and parts/header.html
   once the DE injection lands at merge time).

   Structure:
     <nav class="gvb-lang-switcher">
       <a class="gvb-lang-switcher__link [is-active]">DE</a>
       <span class="gvb-lang-switcher__divider">/</span>
       <a class="gvb-lang-switcher__link [is-active]">EN</a>
     </nav>
   ══════════════════════════════════════════════════════════════ */

/* Wrapper grouping nav + switcher on the right side of the header */
.gvb-header__right {
  display: flex;
  align-items: center;
  gap: 24px;
}

/* Switcher itself */
.gvb-lang-switcher {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.3px;
  color: var(--wp--preset--color--gvb-linen);
  white-space: nowrap;
}

.gvb-lang-switcher__link {
  color: inherit;
  text-decoration: none;
  padding: 4px 2px; /* extra tap area */
  transition: opacity 0.2s ease;
}

.gvb-lang-switcher__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.gvb-lang-switcher__link.is-active {
  opacity: 0.55;
  cursor: default;
}

.gvb-lang-switcher__link.is-active:hover {
  text-decoration: none;
}

.gvb-lang-switcher__divider {
  opacity: 0.4;
}

/* Mobile overlay: switcher visible inside the open nav menu.
   The .gvb-header__right wrapper inherits the overlay layout;
   switcher displays larger for tap-friendliness. */
@media (max-width: 784px) {
  .is-menu-open .gvb-lang-switcher {
    font-size: 18px;
    margin-top: 16px;
  }
}