/*
Theme Name: Gontenbad
Template: twentytwentyfive
Version: 0.12.34
Description: Child theme for Metallbau Gontenbad AG. Dark steel aesthetic with red accent.
Author: WebEvolve
Text Domain: gontenbad
*/

/* =========================================================
   HARD RULE — Text always fills its container, never narrower.
   No max-width on text elements. Container controls width.
   ========================================================= */
.gb-page-hero-title,
.gb-page-hero-lead,
.gb-page-hero-caption > *,
.gb-uu-h,
.gb-uu-body,
.gb-uu-section p,
.gb-uu-section h2,
.gb-uu-section h3,
.gb-uu-section-dark p,
.gb-uu-section-dark h2,
.gb-section-sub,
.gb-page-sub,
.gb-page-body p,
.gb-page-body h2,
.gb-page-body h3,
.gb-page-body li,
.gb-editorial-h,
.gb-editorial-body,
.gb-nachhaltigkeit-body p,
.gb-cta-h,
.gb-lead,
.gb-team-card-name,
.gb-team-card-role,
.gb-team-card-contact,
.gb-kompetenz-row-text h2,
.gb-kompetenz-row-text p,
.gb-konfig-h,
.gb-konfig-lead,
.gb-konfig-feature .gb-konfig-steps li {
  max-width: none !important;
}

/* =========================================================
   SELF-HOSTED FONTS — Switzer (Fontshare/OFL) + Work Sans (Google/OFL)
   ========================================================= */
@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Switzer';
  src: url('assets/fonts/switzer-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/worksans-latin.woff2') format('woff2-variations'),
       url('assets/fonts/worksans-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  src: url('assets/fonts/worksans-latin-ext.woff2') format('woff2-variations'),
       url('assets/fonts/worksans-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =========================================================
   DESIGN TOKENS — from approved draft (webevolve.ch/d/metallbau-appenzell/)
   ========================================================= */
:root {
  --gb-primary-dark:   #131012;
  --gb-accent:         #d32a14;
  --gb-accent-hover:   #a01d0c;
  --gb-bg-dark:        #131012;
  --gb-bg-light:       #f5f4f2;
  --gb-text-on-dark:   #ffffff;
  --gb-text-on-light:  #2a2725;
  --gb-text-muted:     rgba(42, 39, 37, 0.65);
  --gb-text-muted-on-dark: rgba(255, 255, 255, 0.55);
  --gb-rule:           rgba(42, 39, 37, 0.12);
  --gb-rule-on-dark:   rgba(255, 255, 255, 0.10);

  --gb-font-heading:   'Switzer', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --gb-font-body:      'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --gb-radius-card:    8px;
  --gb-radius-btn:     4px;
  --gb-shadow-card:    none;
  --gb-shadow-hover:   0 1px 0 rgba(0, 0, 0, 0.08);
  --gb-transition:     0.3s ease;
  --gb-container-max:  1200px;
  /* Unified section rhythm (single source of truth for ALL section systems:
     gb-section, gb-uu-section, gb-page-body). Light 120 / dark 140 desktop,
     80 / 96 mobile — per the documented spacing scale. */
  --gb-section-padding: 120px;
  --gb-section-padding-dark: 140px;
}

/* =========================================================
   BASE TYPOGRAPHY
   ========================================================= */
body {
  font-family: var(--gb-font-body);
  background-color: var(--gb-bg-light);
  color: var(--gb-text-on-light);
  line-height: 1.618;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  line-height: 1.11;
  letter-spacing: -0.02em;
}

h1, .wp-block-heading.gb-hero-title {
  font-size: clamp(2.5rem, 6vw, 4.5rem);
}
h2 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 1rem; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p  { font-size: clamp(0.95rem, 1.5vw, 1.1rem); }

a { color: var(--gb-accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color 0.2s, text-decoration-thickness 0.2s; }
a:hover { color: var(--gb-accent-hover); text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* Ambient parallax layer — accent-color radial drift behind content.
   Scoped to /ueber-uns for now. Fixed, slow, low opacity, no JS. */
body.page-slug-ueber-uns::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 25% 30%, rgba(211, 42, 20, 1) 0%, transparent 60%),
    radial-gradient(50vw 40vh at 80% 75%, rgba(211, 42, 20, 1) 0%, transparent 60%);
  opacity: 0.07;
  animation: gb-ambient-drift 50s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes gb-ambient-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(6vw, -5vh) scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-slug-ueber-uns::before { animation: none; opacity: 0.04; }
}
/* Ensure content sits above ambient layer */
.gb-main, .site-header, .site-footer { position: relative; z-index: 1; }

/* =========================================================
   HEADER (FSE template part .site-header)
   ========================================================= */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1010;
  background: var(--gb-primary-dark) !important;
  border-bottom: 0;
  transition: box-shadow var(--gb-transition);
  padding: 0 !important;
}
.site-header-inner {
  max-width: var(--gb-container-max);
  width: 100%;
  margin: 0 auto;
  align-items: center;
  min-height: 72px;
  padding-inline: 24px !important;
}
.site-header .gb-logo {
  display: inline-flex;
  align-items: center;
}
.site-header .gb-logo img {
  height: 42px;
  width: auto;
  max-height: 42px;
  display: block;
}
.site-header .wp-block-navigation {
  gap: 32px !important;
}
.site-header .wp-block-navigation a {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--gb-text-on-dark);
  letter-spacing: 0.01em;
  position: relative;
  text-decoration: none !important;
}
.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation a:focus,
.site-header .wp-block-navigation a:active {
  text-decoration: none !important;
}
.site-header .wp-block-navigation .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--gb-accent);
  transition: width var(--gb-transition);
}
.site-header .wp-block-navigation a:hover .wp-block-navigation-item__content::after,
.site-header .wp-block-navigation .wp-block-navigation-item:hover .wp-block-navigation-item__content::after {
  width: 100%;
}
.site-header .gb-nav-cta .wp-block-navigation-item__content {
  background: var(--gb-accent);
  color: var(--gb-text-on-dark) !important;
  padding: 10px 24px;
  border-radius: var(--gb-radius-btn);
  transition: background var(--gb-transition);
}
.site-header .gb-nav-cta .wp-block-navigation-item__content::after {
  display: none;
}
.site-header .gb-nav-cta:hover .wp-block-navigation-item__content {
  background: var(--gb-accent-hover);
}
/* Hide WP's native navigation toggle buttons — we use a custom one (.gb-burger).
   Keep the responsive-container element itself: with overlayMenu:"never" it acts as
   the always-open desktop nav wrapper, not an overlay. */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close { display: none !important; }

/* =========================================================
   ALPAUFZUG MOTIF — two placements
   .gb-alpaufzug-footer : dark bg (footer), invert flips black → white
   .gb-alpaufzug-light  : light bg (über-uns), transparent PNG — no blend trick
   Source: alpaufzug-schlank.png (opaque) / alpaufzug-transparent.png (alpha)
   ========================================================= */
.gb-alpaufzug-footer {
  background-image: url('/wp-content/themes/gontenbad/assets/images/alpaufzug-schlank.png');
  background-repeat: repeat-x;
  background-size: auto 39px;
  background-position: left center;
  height: 39px;
  width: 100%;
  filter: invert(1);
  border-top: 1px solid rgba(255,255,255,0.1);
}
.gb-alpaufzug-light {
  background-image: url('/wp-content/themes/gontenbad/assets/images/alpaufzug-schlank.png');
  background-color: #f5f4f2;
  background-blend-mode: multiply;
  background-repeat: repeat-x;
  background-size: auto 39px;
  background-position: left center;
  height: 39px;
  width: 100%;
}

/* =========================================================
   Custom mobile navigation — burger + full-screen overlay
   ========================================================= */
.gb-burger {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  z-index: 1004;
  -webkit-tap-highlight-color: transparent;
}
/* 3-line uneven burger — 2026 Swiss idiom: stacked rules of varying width, right-aligned */
.gb-burger-line {
  position: absolute;
  right: 0;
  height: 2px;
  background: var(--gb-text-on-dark);
  border-radius: 1px;
  transition: width 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 360ms cubic-bezier(0.32, 0.72, 0, 1),
              top 240ms cubic-bezier(0.32, 0.72, 0, 1) 120ms,
              opacity 200ms ease;
  transform-origin: right center;
  will-change: transform, top, width;
}
.gb-burger-line-1 { top: 12px; width: 28px; }
.gb-burger-line-2 { top: 21px; width: 14px; }
.gb-burger-line-3 { top: 30px; width: 22px; }
.gb-burger:hover .gb-burger-line-2 { width: 28px; }
.gb-burger:hover .gb-burger-line-3 { width: 28px; }

/* Active state: collapse to a clean X. Lines 1 + 3 cross; line 2 fades. */
.gb-burger.is-active .gb-burger-line {
  width: 24px;
  transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1),
              top 240ms cubic-bezier(0.32, 0.72, 0, 1),
              transform 360ms cubic-bezier(0.32, 0.72, 0, 1) 120ms,
              opacity 160ms ease;
}
.gb-burger.is-active .gb-burger-line-1 { top: 21px; transform: rotate(45deg); }
.gb-burger.is-active .gb-burger-line-2 { opacity: 0; }
.gb-burger.is-active .gb-burger-line-3 { top: 21px; transform: rotate(-45deg); }

.gb-mobile-nav {
  position: fixed;
  /* Sit below the fixed header (72px min-height) so logo + burger stay
     visible and clickable while the menu is open. */
  top: 72px;
  right: 0;
  bottom: 0;
  left: 0;
  /* Kill WP's :where(.is-layout-flow) > * margin-block-start: 1.2rem,
     which would otherwise push the fixed nav 19.2px below its top anchor. */
  margin: 0 !important;
  z-index: 1005;
  background: var(--gb-primary-dark);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 320ms;
}
.gb-mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 320ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0s linear 0s;
}
.gb-mobile-nav-inner {
  width: 100%;
  max-width: none;
  margin: 0;
  /* Nav now sits below the header, so no large top padding needed to clear it. */
  padding: 32px 16px 32px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  text-align: left;
}
.gb-mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.gb-mobile-nav-list li {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.gb-mobile-nav-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.gb-mobile-nav-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  font-family: var(--gb-font-heading);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--gb-text-on-dark);
  text-decoration: none;
  transition: color 240ms cubic-bezier(0.16, 1, 0.3, 1),
              padding-inline-start 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gb-mobile-nav-list a::after {
  content: '→';
  font-weight: 400;
  color: rgba(255, 255, 255, 0.35);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1),
              color 240ms ease;
}
.gb-mobile-nav-list a:hover,
.gb-mobile-nav-list a:focus-visible { color: var(--gb-accent); padding-inline-start: 8px; }
.gb-mobile-nav-list a:hover::after,
.gb-mobile-nav-list a:focus-visible::after { color: var(--gb-accent); transform: translateX(6px); }
.gb-mobile-nav-list a.gb-mobile-nav-cta { color: var(--gb-accent); }
.gb-mobile-nav-foot {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gb-mobile-nav-foot a {
  font-family: var(--gb-font-body);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
}
.gb-mobile-nav-foot a:hover { color: var(--gb-accent); }

/* When mobile nav is open, lock body scroll. */
html.gb-nav-open, html.gb-nav-open body { overflow: hidden; }

/* Stagger the link reveal when opening. */
.gb-mobile-nav-list li,
.gb-mobile-nav-foot {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 480ms cubic-bezier(0.16, 1, 0.3, 1),
              transform 480ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gb-mobile-nav.is-open .gb-mobile-nav-list li { opacity: 1; transform: none; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(1) { transition-delay: 180ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(2) { transition-delay: 230ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(3) { transition-delay: 280ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(4) { transition-delay: 330ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(5) { transition-delay: 380ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(6) { transition-delay: 430ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-list li:nth-child(7) { transition-delay: 480ms; }
.gb-mobile-nav.is-open .gb-mobile-nav-foot { opacity: 1; transform: none; transition-delay: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .gb-burger-line,
  .gb-mobile-nav,
  .gb-mobile-nav-list a,
  .gb-mobile-nav-list a::after,
  .gb-mobile-nav-list li,
  .gb-mobile-nav-eyebrow,
  .gb-mobile-nav-foot { transition-duration: 0.01ms !important; transition-delay: 0s !important; }
}

@media (max-width: 950px) {
  .gb-burger { display: block; }
  .site-header .gb-nav-desktop { display: none !important; }
}

/* Push content below fixed header */
.wp-site-blocks { padding-top: 0; }
.gb-main { margin-top: 0 !important; }
.gb-main > .gb-section,
.gb-main > .gb-hero { margin-block-start: 0 !important; margin-block-end: 0 !important; }

/* =========================================================
   BUTTONS (plain anchor styling, no wp-block-button)
   ========================================================= */
.gb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  box-sizing: border-box;
  border-radius: var(--gb-radius-btn);
  font-family: var(--gb-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--gb-transition), color var(--gb-transition), transform var(--gb-transition), box-shadow var(--gb-transition);
  white-space: nowrap;
}
.gb-btn-primary {
  background: var(--gb-accent);
  color: var(--gb-text-on-dark);
  border-color: var(--gb-accent);
}
.gb-btn-primary:hover {
  background: var(--gb-accent-hover);
  border-color: var(--gb-accent-hover);
  color: var(--gb-text-on-dark);
}
.gb-btn-outline {
  background: transparent;
  color: var(--gb-text-on-dark);
  border-color: var(--gb-text-on-dark);
}
.gb-btn-outline:hover {
  background: var(--gb-text-on-dark);
  color: var(--gb-primary-dark);
  transform: translateY(-2px);
}

/* =========================================================
   SECTION SCAFFOLD
   ========================================================= */
.gb-section {
  padding-block: var(--gb-section-padding);
  padding-inline: 0;
  position: relative;
}
.gb-section > .wp-block-group {
  width: 100%;
  padding-inline: 24px;
  margin-inline: auto;
}
.gb-section-title {
  text-align: center;
  margin-bottom: 16px;
}
.gb-section-sub {
  text-align: center;
  color: var(--gb-text-muted);
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin: 0 auto 60px;
}

/* =========================================================
   HERO
   ========================================================= */
.gb-hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 !important;
}
.gb-hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.gb-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(19, 16, 18, 0.6) 0%,
    rgba(19, 16, 18, 0.45) 50%,
    rgba(19, 16, 18, 0.8) 100%
  );
}
.gb-hero-container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 144px 24px 96px !important;
  margin: 0 auto !important;
}
.gb-hero-content {
  max-width: 720px;
}
.gb-hero-title {
  color: var(--gb-text-on-dark) !important;
  margin-bottom: 20px;
}
.gb-hero-lead {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: clamp(1.05rem, 2vw, 1.25rem) !important;
  margin-bottom: 36px !important;
  line-height: 1.7;
}
.gb-hero-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* =========================================================
   KOMPETENZEN
   ========================================================= */
.gb-kompetenzen { color: var(--gb-text-on-dark); }
.gb-kompetenzen .gb-section-title { color: var(--gb-text-on-dark); }

.gb-kompetenzen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.gb-kompetenz-card {
  position: relative;
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  display: flex;
  align-items: flex-end;
  text-decoration: none;
  color: var(--gb-text-on-dark);
  transition: transform var(--gb-transition);
}
.gb-kompetenz-card:hover { transform: translateY(-4px); }
.gb-kompetenz-card img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gb-transition);
}
.gb-kompetenz-card:hover img { transform: scale(1.05); }
.gb-kompetenz-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 16, 18, 0.9) 0%, rgba(19, 16, 18, 0.2) 60%, transparent 100%);
}
.gb-kompetenz-content {
  position: relative;
  z-index: 2;
  padding: 24px;
}
.gb-kompetenz-content h3 {
  color: var(--gb-text-on-dark);
  margin-bottom: 8px;
  font-size: 1.25rem;
}
.gb-kompetenz-content p {
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* =========================================================
   REFERENZEN
   ========================================================= */
.gb-referenzen-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 60px;
}
.gb-referenz-card {
  position: relative;
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  aspect-ratio: 16 / 10;
  display: block;
  text-decoration: none;
}
.gb-referenz-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gb-transition);
}
.gb-referenz-card:hover img { transform: scale(1.05); }
.gb-referenz-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 16, 18, 0.8) 0%, transparent 50%);
  display: flex;
  align-items: flex-end;
  padding: 24px;
  opacity: 0;
  transition: opacity var(--gb-transition);
}
.gb-referenz-card:hover .gb-referenz-overlay { opacity: 1; }
.gb-referenz-overlay h3 {
  color: var(--gb-text-on-dark);
  font-size: 1.15rem;
}

/* =========================================================
   PRODUKTE
   ========================================================= */
.gb-produkte-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
}

/* Kompetenzen-page editorial rows (4 zig-zag rows on light substrate).
   Overrides legacy .gb-kompetenzen white-text rule which targeted the old
   homepage dark-section variant. */
.gb-kompetenz-page {
  color: var(--gb-text-on-light);
  padding-block: 48px 80px;
}
.gb-kompetenz-page > .wp-block-group { padding-inline: 32px; }

.gb-kompetenz-rows {
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin: 0;
}
.gb-kompetenz-row {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
}
.gb-kompetenz-row:nth-child(even) { grid-template-columns: 7fr 5fr; }
.gb-kompetenz-row:nth-child(even) .gb-kompetenz-row-media { order: 2; }
.gb-kompetenz-row:nth-child(even) .gb-kompetenz-row-text  { order: 1; }
.gb-kompetenz-row-media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.gb-kompetenz-row-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.gb-kompetenz-row-text h2 {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 24px;
  color: var(--gb-text-on-light);
}
.gb-kompetenz-row-text p {
  font-family: var(--gb-font-body);
  font-size: clamp(1rem, 1.2vw, 1.125rem);
  line-height: 1.618;
  color: var(--gb-text-on-light);
  margin: 0;
}
@media (max-width: 900px) {
  .gb-kompetenz-page { padding-block: 32px 56px; }
  .gb-kompetenz-rows { gap: 48px; }
  .gb-kompetenz-row,
  .gb-kompetenz-row:nth-child(even) {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .gb-kompetenz-row:nth-child(even) .gb-kompetenz-row-media { order: 0; }
  .gb-kompetenz-row:nth-child(even) .gb-kompetenz-row-text  { order: 0; }
}

/* Produkte-page-only overrides: bolder, 3-column catalog spread. */
.gb-main-wide .wp-block-post-content { max-width: none !important; margin-inline: 0 !important; }
.gb-section.gb-produkte { padding-block: 64px 96px; }
/* Strip WP constrained-layout injection from the inner wrapper — let .gb-produkte-grid own width */
.gb-section.gb-produkte > .wp-block-group {
  max-width: none !important;
  padding-inline: 0 !important;
  margin-inline: 0 !important;
}
/* EXCEPTION to ABSOLUTE BAN "no three-equal-card": product catalog
   with 12 categorical items reads cleaner as 3x4 than 4x3 here.
   Confirmed 2026-05-19. */
.gb-produkte .gb-produkte-grid {
  max-width: var(--gb-container-max);
  margin: 0 auto;
  padding-inline: 32px;
  width: 100%;
  box-sizing: border-box;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 0;
}
.gb-produkte .gb-produkt-card { aspect-ratio: 1 / 1; }
@media (max-width: 1024px) {
  .gb-produkte .gb-produkte-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@media (max-width: 768px) {
  .gb-section.gb-produkte { padding-block: 48px 64px; }
  .gb-produkte .gb-produkte-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
.gb-produkt-card {
  position: relative;
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: block;
  text-decoration: none;
}
.gb-produkt-card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--gb-transition);
}
.gb-produkt-card:hover img { transform: scale(1.05); }
.gb-produkt-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(19, 16, 18, 0.75) 0%, transparent 50%);
}
.gb-produkt-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  z-index: 2;
  padding: 16px;
}
.gb-produkt-label h3 {
  color: var(--gb-text-on-dark);
  font-size: 1rem;
  font-weight: 600;
}

/* =========================================================
   TEAM
   ========================================================= */
.gb-team-group-photo {
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  margin: 60px 0 60px;
}
.gb-team-group-photo img { width: 100%; height: auto; }

.gb-team-members {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}
.gb-team-member { text-align: center; }
/* EXCEPTION to ABSOLUTE BAN "no rounded-full cards": portrait avatars on
   the home team strip. Convention for headshots, not a hype-card pattern.
   Confirmed 2026-05-19. */
.gb-team-photo {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 16px;
  border: 3px solid var(--gb-accent);
}
.gb-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.gb-team-member h3 {
  font-size: 1.1rem;
  color: var(--gb-text-on-light);
  margin-bottom: 4px;
}
.gb-team-member p {
  font-size: 0.9rem;
  color: var(--gb-text-muted);
}

/* =========================================================
   KONTAKT — home dark CTA section (scoped to .gb-kontakt parent
   so kontakt page light variant below isn't affected)
   ========================================================= */
.gb-kontakt { color: var(--gb-text-on-dark); }
.gb-kontakt .gb-kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.gb-kontakt .gb-kontakt-info h2 {
  color: var(--gb-text-on-dark);
  margin-bottom: 12px;
}
.gb-kontakt .gb-kontakt-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.15rem;
  margin-bottom: 32px;
}
.gb-kontakt .gb-kontakt-info .gb-btn-primary {
  margin-bottom: 24px;
}
.gb-kontakt .gb-kontakt-details {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 2;
  font-style: normal;
}
.gb-kontakt .gb-kontakt-details a {
  color: var(--gb-text-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gb-kontakt .gb-kontakt-details a:hover { color: var(--gb-accent); }
.gb-kontakt .gb-kontakt-hours {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.9rem;
  line-height: 1.8;
}
.gb-kontakt .gb-kontakt-hours strong { color: var(--gb-text-on-dark); }
.gb-kontakt .gb-kontakt-map {
  border-radius: var(--gb-radius-card);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.gb-kontakt .gb-kontakt-map iframe {
  width: 100%; height: 100%;
  border: 0;
}

/* =========================================================
   PAGE HEADER (sub-pages)
   ========================================================= */
.gb-page-header {
  padding: 120px 0 60px !important;
  color: var(--gb-text-on-dark);
  position: relative;
}
.gb-page-header > .wp-block-group {
  padding-inline: 24px;
}
.gb-page-header .gb-page-header-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* gb-eyebrow: unified — see also page-hero override below */
.gb-eyebrow {
  display: inline-block;
  font-family: var(--gb-font-body);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
  margin: 0;
}
.gb-eyebrow:empty { display: none; }
.gb-page-header .gb-eyebrow { color: rgba(255, 255, 255, 0.55); margin: 0 0 16px; }
.gb-page-title,
.gb-page-header h1 {
  color: var(--gb-text-on-dark) !important;
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
}
.gb-page-sub {
  color: rgba(255, 255, 255, 0.65);
  font-size: clamp(1rem, 2vw, 1.15rem);
  margin-top: 8px;
}

/* =========================================================
   PAGE BODY (kompetenzen, karriere, impressum, datenschutz)
   ========================================================= */
.gb-page-body { background: var(--gb-bg-light); padding-block: var(--gb-section-padding) !important; max-width: 880px; margin-inline: auto; }
.gb-page-body-wide { max-width: none !important; }
.gb-page-body p,
.gb-page-body ul,
.gb-page-body ol { line-height: 1.618; margin-bottom: 1.25em; }
.gb-page-body p.gb-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.55;
  margin: 0 0 48px;
}
.gb-page-body h2 {
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gb-rule);
}
.gb-page-body h2:first-of-type { padding-top: 0; border-top: none; margin-top: 0; }
.gb-page-body h3 { margin-top: 2rem; margin-bottom: 0.75rem; }
.gb-page-body ul, .gb-page-body ol { padding-left: 1.25rem; }
.gb-page-body li { margin-bottom: 0.5em; }
.gb-page-body a:not(.gb-btn) { color: var(--gb-accent); text-underline-offset: 3px; }

/* Produkt page wrapper — gb-uu-section blocks own their own padding/bg now */
.gb-main-produkt { background: var(--gb-bg-light); }

/* Alt-bg section variant — slightly different ink for visual rhythm between same-section types */
.gb-uu-section-alt { background: #efece8; }

/* h2 after body inside the same section needs extra breathing */
.gb-uu-section .gb-uu-body + .gb-uu-h { margin-top: 64px; }

/* Produkt gallery inside gb-uu-section: no extra margin-top, gb-uu-inner already pads */
.gb-uu-section .gb-produkt-gallery { margin-top: 0; }

/* Karriere — eyebrow line under hero (single line of dotted meta) */
.gb-uu-section .gb-uu-eyebrow-line {
  font-family: var(--gb-font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
  margin: 0;
}

/* Karriere — bullet list */
.gb-uu-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 16px;
}
.gb-uu-list li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--gb-text-on-light);
}
.gb-uu-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 16px;
  height: 1px;
  background: var(--gb-accent);
}
.gb-uu-section-dark .gb-uu-list li { color: rgba(255, 255, 255, 0.88); }

/* Karriere — job card grid (2 cards) */
/* EXCEPTION to ABSOLUTE BAN "no 50/50": paired equal-weight job cards.
   Equal split is correct semantic reading. Confirmed 2026-05-19. */
.gb-uu-job-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 8px;
}
@media (max-width: 768px) { .gb-uu-job-grid { grid-template-columns: 1fr; } }
.gb-uu-job-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  background: #fff;
  border: 1px solid var(--gb-rule);
  text-decoration: none;
  transition: background var(--gb-transition), border-color var(--gb-transition), transform var(--gb-transition);
}
.gb-uu-job-card:hover {
  background: var(--gb-bg-dark);
  border-color: var(--gb-bg-dark);
  transform: translateY(-2px);
}
.gb-uu-job-card:hover .gb-uu-job-title,
.gb-uu-job-card:hover .gb-uu-job-meta,
.gb-uu-job-card:hover .gb-uu-job-link { color: #fff; }
.gb-uu-job-meta {
  font-family: var(--gb-font-body);
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
}
.gb-uu-job-title {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.65rem);
  line-height: 1.2;
  margin: 0;
  color: var(--gb-text-on-light);
}
.gb-uu-job-link {
  font-family: var(--gb-font-heading);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gb-accent);
  margin-top: 8px;
}

/* =========================================================
   CTA-KONTAKT (reusable part)
   ========================================================= */
.gb-cta-kontakt { padding: 80px 0 !important; }
.gb-cta-kontakt > .wp-block-group { padding-inline: 24px; }
.gb-cta-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 32px;
  align-items: center;
}
.gb-cta-text h2 {
  color: var(--gb-text-on-dark);
  font-size: clamp(1.5rem, 3.5vw, 2.25rem);
  margin: 0 0 8px;
}
.gb-cta-text p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.05rem;
  margin: 0;
}
@media (max-width: 768px) {
  .gb-cta-grid { grid-template-columns: 1fr; text-align: center; }
  .gb-cta-action { display: flex; justify-content: center; }
}

/* =========================================================
   REFERENCE ARCHIVE + RELATED
   ========================================================= */
.gb-references-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 48px 40px;
  list-style: none;
  padding: 0;
  margin-top: 40px;
}
.gb-references-grid > li {
  display: contents;
}
.gb-referenz-archive-card .wp-block-post-featured-image img,
.gb-referenz-archive-card-media img,
.gb-referenz-card-wrap .wp-block-post-featured-image img {
  border-radius: var(--gb-radius-card);
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.gb-referenz-archive-card-media { margin: 0; display: block; }
.gb-referenz-archive-card h3,
.gb-referenz-card-wrap h3 {
  margin-top: 12px;
  font-size: 1.15rem;
}
.gb-referenz-archive-card h3 a:hover,
.gb-referenz-card-wrap h3 a:hover { color: var(--gb-accent); }
.gb-referenz-archive-card .wp-block-post-excerpt {
  font-size: 0.9rem;
  color: var(--gb-text-muted);
  margin-top: 4px;
}
@media (max-width: 768px) {
  .gb-references-grid { grid-template-columns: 1fr !important; }
}
/* =========================================================
REFERENZ SINGLE
=========================================================== */
.gb-ref-single-cover { overflow: hidden; }
.gb-ref-single-cover figure { margin: 0; display: block; }
.gb-ref-single-cover figure a { display: block; pointer-events: none; cursor: default; }
.gb-ref-single-cover img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; display: block; }

/* Reference hero has extra content (lead + 3 meta lines) — reduce bottom so total height matches other page heroes */
.gb-main-reference-single .gb-page-hero { padding-bottom: 130px; }

/* Hero info block: lead + meta inside dark hero */
.gb-ref-hero-info { margin-top: 20px; }
.gb-ref-hero-lead {
  color: rgba(255, 255, 255, 0.85);
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: 1.6;
  margin: 0 0 20px;
}
.gb-ref-hero-meta {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.gb-ref-hero-meta li { color: rgba(255, 255, 255, 0.5); font-size: 0.85rem; line-height: 1.5; }
.gb-ref-hero-meta li span {
  text-transform: uppercase; letter-spacing: 0.12em;
  font-size: 0.7rem; color: rgba(255, 255, 255, 0.3); margin-right: 8px;
}

/* Content area */
.gb-ref-single-content h2 { margin-top: 56px; margin-bottom: 20px; }
.gb-ref-single-content .gb-leistungen { list-style: none; padding: 0; margin: 0 0 40px; }
.gb-ref-single-content .gb-leistungen li {
  padding: 10px 0;
  border-bottom: 1px solid var(--gb-rule);
  font-size: 0.95rem; line-height: 1.5;
}
.gb-ref-single-content .gb-leistungen li::before { content: none; }
.gb-ref-single-content .gb-ref-gallery { margin-top: 8px; }
.gb-ref-gallery .wp-block-image img { cursor: pointer; }

/* Lightbox */
#gb-lb {
  display: none; position: fixed; inset: 0; z-index: 9999;
  background: rgba(0, 0, 0, 0.93);
  align-items: center; justify-content: center;
}
#gb-lb.is-open { display: flex; }
.gb-lb-stage { display: flex; align-items: center; justify-content: center; }
.gb-lb-img { max-width: 90vw; max-height: 86vh; object-fit: contain; display: block; }
.gb-lb-close, .gb-lb-prev, .gb-lb-next {
  position: fixed; background: none; border: none;
  color: #fff; cursor: pointer; opacity: 0.6; transition: opacity 0.15s; line-height: 1; padding: 16px;
}
.gb-lb-close:hover, .gb-lb-prev:hover, .gb-lb-next:hover { opacity: 1; }
.gb-lb-close { top: 16px; right: 16px; font-size: 1.5rem; }
.gb-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.gb-lb-next { right: 12px; top: 50%; transform: translateY(-50%); font-size: 3rem; }
.gb-lb-counter {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; letter-spacing: 0.05em;
}
@media (prefers-reduced-motion: reduce) { .gb-lb-close, .gb-lb-prev, .gb-lb-next { transition: none; } }

@media (max-width: 768px) {
  .gb-ref-single-cover img { aspect-ratio: 4 / 3; }
}


/* =========================================================
   PRODUKT SINGLE
   ========================================================= */
.gb-produkt-gallery.wp-block-gallery {
  margin-top: 1rem;
  --wp--style--gallery-gap: 12px;
}
.gb-produkt-gallery .wp-block-image img {
  border-radius: var(--gb-radius-card);
}
.gb-produkt-cross-links {
  list-style: none;
  padding: 0;
  margin: 1rem 0 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}
.gb-produkt-cross-links li a {
  display: inline-block;
  padding: 8px 16px;
  background: white;
  border-radius: var(--gb-radius-btn);
  font-size: 0.9rem;
  color: var(--gb-text-on-light);
  text-decoration: none;
  border: 1px solid rgba(42, 39, 37, 0.08);
  transition: all var(--gb-transition);
}
.gb-produkt-cross-links li a:hover {
  background: var(--gb-accent);
  color: var(--gb-text-on-dark);
  border-color: var(--gb-accent);
}

/* =========================================================
   REFERENCE SINGLE
   ========================================================= */
.gb-ref-gallery.wp-block-gallery {
  margin-top: 2rem;
  --wp--style--gallery-gap: 12px;
}
.gb-ref-gallery .wp-block-image img {
  border-radius: var(--gb-radius-card);
}

/* =========================================================
   SUB-PAGE CONTENT PATTERNS
   ========================================================= */
.gb-lead {
  font-size: clamp(1.1rem, 1.8vw, 1.25rem) !important;
  line-height: 1.6;
  color: var(--gb-text-on-light);
  margin-bottom: 2rem !important;
}

/* Karriere — job grid */
/* EXCEPTION to ABSOLUTE BAN "no 50/50": paired equal-weight job cards. */
.gb-job-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.gb-job-card {
  padding: 28px;
  background: white;
  border-radius: var(--gb-radius-card);
  box-shadow: var(--gb-shadow-card);
}
.gb-job-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.gb-job-card p { color: var(--gb-text-muted); margin-bottom: 20px; }

/* =========================================================
   KONTAKT PAGE — scoped to body.page-slug-kontakt so light-bg rules
   never leak onto the home dark .gb-kontakt section
   ========================================================= */
body.page-slug-kontakt .gb-kontakt-info {
  background: var(--gb-bg-light);
  padding-block: 100px;
}
body.page-slug-kontakt .gb-kontakt-info-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 1200px;
}
body.page-slug-kontakt .gb-kontakt-grid {
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: 64px;
  align-items: start;
}
body.page-slug-kontakt .gb-kontakt-details address { font-style: normal; line-height: 1.7; margin: 0 0 24px; }
body.page-slug-kontakt .gb-kontakt-channels { line-height: 1.9; margin: 0 0 32px; }
body.page-slug-kontakt .gb-kontakt-hours-h {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
body.page-slug-kontakt .gb-kontakt-hours { line-height: 1.7; margin: 0; }
body.page-slug-kontakt .gb-kontakt-form-h {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  line-height: 1.11;
  letter-spacing: -0.02em;
  margin: 0 0 32px;
}

body.page-slug-kontakt .gb-kontakt-map-section {
  background: var(--gb-bg-light);
  padding: 0;
  border-top: 1px solid var(--gb-rule);
}
body.page-slug-kontakt .gb-kontakt-map {
  width: 100%;
  aspect-ratio: 21 / 9;
  background: #d8d6d3;
  overflow: hidden;
}
body.page-slug-kontakt .gb-kontakt-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* =========================================================
   FORMS — global gb-form pattern (styleguide reference)
   ========================================================= */
.gb-form { display: flex; flex-direction: column; gap: 24px; }

/* Honeypot: off-screen, never shown to humans; bots fill it and get dropped. */
.gb-hp {
  position: absolute !important;
  left: -9999px !important;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Post-submit status banner (injected by forms.js after server redirect). */
.gb-form-banner {
  margin: 0 0 28px;
  padding: 16px 20px;
  border-left: 3px solid var(--gb-accent);
  background: rgba(42, 39, 37, 0.04);
  font-size: clamp(0.95rem, 1.5vw, 1.05rem);
  line-height: 1.5;
  color: var(--gb-text-on-light);
}
.gb-form-banner-success {
  border-left-color: #2f7d32;
  background: rgba(47, 125, 50, 0.07);
}
.gb-form-banner-error {
  border-left-color: var(--gb-accent);
  background: rgba(211, 42, 20, 0.06);
}

/* =========================================================
   HOME — Türkonfigurator feature band (dark focal moment)
   Asymmetric 58/42 duo. One accent CTA. No 50/50, no 3-cards.
   ========================================================= */
.gb-konfig-feature {
  background: var(--gb-bg-dark);
  padding-block: var(--gb-section-padding-dark);
}
.gb-konfig-feature .gb-konfig-cols {
  align-items: center;
  gap: 80px;
}
.gb-konfig-feature .gb-eyebrow {
  display: block;
  margin: 0 0 24px;
  font-family: var(--gb-font-heading);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gb-accent);
}
.gb-konfig-h {
  color: var(--gb-text-on-dark);
  margin: 0 0 24px;
}
.gb-konfig-lead {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.618;
  margin: 0 0 40px;
}
.gb-konfig-steps {
  list-style: none;
  margin: 0 0 44px;
  padding: 0;
  counter-reset: konfig;
}
.gb-konfig-steps li {
  counter-increment: konfig;
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--gb-rule-on-dark);
  color: rgba(255, 255, 255, 0.88);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
}
.gb-konfig-steps li:last-child {
  border-bottom: 1px solid var(--gb-rule-on-dark);
}
.gb-konfig-steps li::before {
  content: counter(konfig);
  font-family: var(--gb-font-heading);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
  color: var(--gb-text-muted-on-dark);
  min-width: 1.5ch;
}
.gb-konfig-img { margin: 0; }
.gb-konfig-img img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: 460px;
  object-fit: cover;
  border-radius: var(--gb-radius-card, 4px);
}
@media (max-width: 900px) {
  .gb-konfig-feature .gb-konfig-cols { gap: 40px; }
  .gb-konfig-img img { max-height: 300px; }
}
/* EXCEPTION to ABSOLUTE BAN "no 50/50": paired form inputs (name/email).
   Standard form layout. */
.gb-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.gb-field { display: flex; flex-direction: column; gap: 8px; }
.gb-field label {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--gb-text-on-light);
}
.gb-field label .req { color: var(--gb-accent); margin-left: 2px; }
.gb-field input[type="text"],
.gb-field input[type="email"],
.gb-field input[type="tel"],
.gb-field input[type="date"],
.gb-field input[type="number"],
.gb-field input[type="url"],
.gb-field textarea,
.gb-field select,
.gb-field .gb-file-input {
  font-family: var(--gb-font-body);
  font-size: 1rem;
  line-height: 1.4;
  padding: 14px 16px;
  box-sizing: border-box;
  border: 1px solid var(--gb-rule);
  border-radius: var(--gb-radius-btn);
  background: #fff;
  color: var(--gb-text-on-light);
  transition: border-color 0.2s, box-shadow 0.2s;
  width: 100%;
  min-height: 52px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
.gb-field input[type="date"] { font-variant-numeric: tabular-nums; }
.gb-field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.2s;
}
.gb-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.gb-field select {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMmEyNzI1IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InNxdWFyZSI+PHBhdGggZD0iTTQgNi41bDQgNCA0LTQiLz48L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: right 18px center;
  background-size: 14px;
  padding-right: 44px;
}
.gb-field textarea { padding: 14px 16px; }

/* Custom file input — fully localized, identical height to other fields */
.gb-field .gb-file-input {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  padding-right: 16px;
  cursor: pointer;
  overflow: hidden;
}
.gb-field .gb-file-input input[type="file"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.gb-field .gb-file-btn {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--gb-text-on-light);
  padding: 0 22px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  transition: background var(--gb-transition);
}
.gb-field .gb-file-input:hover .gb-file-btn { background: var(--gb-accent); }
.gb-field .gb-file-name {
  font-size: 0.95rem;
  color: var(--gb-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.gb-field input:focus,
.gb-field textarea:focus,
.gb-field select:focus {
  outline: none;
  border-color: var(--gb-accent);
  box-shadow: 0 0 0 3px rgba(211, 42, 20, 0.12);
}
.gb-field textarea { resize: vertical; min-height: 140px; }
.gb-field-hint { font-size: 0.8rem; color: var(--gb-text-muted); }
.gb-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
}
.gb-check input { margin-top: 4px; accent-color: var(--gb-accent); width: 16px; height: 16px; flex-shrink: 0; }
.gb-form button[type="submit"] { align-self: flex-start; }

@media (max-width: 720px) {
  .gb-form-row { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .gb-job-grid,
  .gb-kontakt-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* =========================================================
   FOOTER (FSE part .site-footer)
   ========================================================= */
.site-footer { border-top: 1px solid rgba(255, 255, 255, 0.12); }
.site-footer-inner { width: 100%; max-width: 1200px; margin-inline: auto; padding-top: 96px !important; }
@media (max-width: 768px) { .site-footer-inner { padding-top: 64px !important; } }
/* EXCEPTION to ABSOLUTE BAN "no three-equal-card": footer brand/contact/partners
   are categorically three. Confirmed 2026-05-19. */
.gb-footer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  gap: 40px;
  margin-bottom: 40px;
  align-items: start;
}
.gb-footer-partners-col {
  display: flex;
  justify-content: flex-end;
}
.gb-footer-partners-col .gb-footer-partners {
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
}
.gb-footer-brand img {
  height: 36px;
  width: auto;
  margin-bottom: 16px;
}
.gb-footer-brand p,
.gb-footer-contact p {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}
.gb-footer-contact a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gb-footer-contact a:hover { color: var(--gb-accent); }
.gb-footer-social {
  display: flex;
  gap: 16px;
  margin-top: 16px;
}
.gb-footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  transition: background var(--gb-transition);
}
.gb-footer-social a:hover { background: var(--gb-accent); }
.gb-footer-social svg {
  width: 18px; height: 18px;
  fill: var(--gb-text-on-dark);
}
.gb-footer-partners {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: nowrap;
}
.gb-footer-partners img {
  height: 28px;
  width: auto;
  opacity: 1;
  transition: opacity var(--gb-transition), filter var(--gb-transition);
  filter: none;
}
.gb-footer-partners img:hover {
  opacity: 0.6;
  filter: grayscale(1) brightness(1.4);
}
.gb-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  flex-wrap: wrap;
  gap: 12px;
}
.gb-footer-links {
  display: flex;
  gap: 24px;
}
.gb-footer-links a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gb-footer-links a:hover { color: var(--gb-accent); }

/* Eliminate WP block-gap between top-level sections (no white seams) */
.gb-main > * + * { margin-block-start: 0 !important; }
.wp-site-blocks > * + * { margin-block-start: 0 !important; }
.gb-main .wp-block-post-content > * + *,
.gb-main .entry-content > * + * { margin-block-start: 0 !important; }

/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 1024px) {
  .gb-kompetenzen-grid { grid-template-columns: repeat(2, 1fr); }
  .gb-produkte-grid    { grid-template-columns: repeat(3, 1fr); }
  .gb-team-members     { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  :root { --gb-section-padding: 80px; --gb-section-padding-dark: 96px; }
  .gb-hero-container { padding: 120px 24px 80px !important; }
  .gb-hero-title { font-size: clamp(2rem, 8vw, 2.75rem); }
  .gb-hero-buttons { flex-direction: column; align-items: stretch; gap: 24px; }
  .gb-hero-buttons .gb-btn { width: 100%; margin: 0; }
  .gb-hero-buttons .gb-btn-primary { box-shadow: none; }

  .gb-referenzen-grid { grid-template-columns: 1fr; }
  .gb-referenz-overlay {
    opacity: 1;
    background: linear-gradient(to top, rgba(19, 16, 18, 0.9) 0%, transparent 60%);
  }
  .gb-produkte-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gb-team-members { grid-template-columns: 1fr 1fr; gap: 32px; }
  .gb-team-photo { width: 110px; height: 110px; }
  .gb-kontakt-grid { grid-template-columns: 1fr; }

  .gb-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .gb-footer-partners-col { justify-content: flex-start; }
  .gb-footer-partners-col .gb-footer-partners { justify-content: flex-start; }
  .gb-footer-partners { flex-wrap: wrap; }
  .gb-footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}

@media (max-width: 480px) {
  .gb-kompetenzen-grid { grid-template-columns: 1fr; }
  .gb-produkte-grid { grid-template-columns: 1fr 1fr; }
  .gb-team-members { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   ÜBER UNS PAGE — stats row + partner logos
   ========================================================= */
.gb-ueber-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 48px 0;
  border: 1px solid rgba(42, 39, 37, 0.1);
  border-radius: var(--gb-radius-card);
  overflow: hidden;
}
.gb-ueber-stat {
  padding: 32px 24px;
  border-right: 1px solid rgba(42, 39, 37, 0.1);
  background: white;
  text-align: center;
}
.gb-ueber-stat:last-child { border-right: none; }
.gb-ueber-stat-num {
  display: block;
  font-family: var(--gb-font-heading);
  font-size: clamp(1.75rem, 3.5vw, 2.75rem);
  font-weight: 600;
  color: var(--gb-accent);
  line-height: 1;
  margin-bottom: 8px;
}
.gb-ueber-stat-label {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
}
.gb-partner-logos {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
  margin: 24px 0 48px;
  padding: 28px 32px;
  background: white;
  border-radius: var(--gb-radius-card);
  border: 1px solid rgba(42, 39, 37, 0.08);
}
.gb-partner-logos img {
  height: 30px;
  width: auto;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity 0.3s ease, filter 0.3s ease;
}
.gb-partner-logos img:hover { opacity: 1; filter: grayscale(0); }
@media (max-width: 768px) {
  .gb-ueber-stats { grid-template-columns: repeat(2, 1fr); }
  .gb-ueber-stat:nth-child(2) { border-right: none; }
  .gb-ueber-stat:nth-child(3) { border-top: 1px solid rgba(42, 39, 37, 0.1); }
  .gb-ueber-stat:nth-child(4) { border-top: 1px solid rgba(42, 39, 37, 0.1); border-right: none; }
}

/* =========================================================
   SWISS-DESIGN PAGES (ueber-uns, team)
   Editorial layout, type-as-architecture, hairline rules
   ========================================================= */

/* eyebrow on dark page-hero (overrides global .gb-eyebrow) */
.gb-page-hero .gb-eyebrow { color: var(--gb-accent); margin: 0 0 32px; }
.gb-eyebrow-dark { color: var(--gb-text-muted); }

/* Page hero (dark substrate, typographic, left-aligned) */
/* When a custom hero is provided in content, suppress the template's fallback header (auto H1 + eyebrow). */
body:has(.gb-page-hero) .gb-page-header { display: none; }
/* When the page provides its own hero in content, kill the constrained body's
   top padding AND background so the dark hero butts right under the nav with
   no light strip showing through. */
.gb-page-body:has(.gb-page-hero) {
  padding-top: 0 !important;
  background: transparent !important;
}

/* Content pages whose hero is followed DIRECTLY by flow content (impressum,
   datenschutz): the rule above zeroes the body top padding so the dark hero
   butts under the nav — but that also removes the gap above the first white
   element. Restore it. Scoped to non-group siblings so gb-uu-section /
   gb-section pages (which own their own top padding) are unaffected. */
.gb-page-body:has(.gb-page-hero) .wp-block-post-content > .gb-page-hero + :not(.wp-block-group) {
  margin-top: var(--gb-section-padding) !important;
}

.gb-page-hero {
  padding-block: 140px 200px;
  position: relative;
  overflow: hidden;
  /* Force full-viewport-width even inside constrained gb-page-body wrappers. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* Image-hero variant — photo constrained to content width, caption below */
.gb-page-hero-image {
  padding-block: 96px 0 !important;
  background: var(--gb-primary-dark);
  overflow: visible;
  min-height: 0;
}
.gb-page-hero-image .gb-page-hero-inner {
  position: relative;
  padding-inline: 32px;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
  aspect-ratio: 16 / 9;
}
.gb-page-hero-image .gb-page-hero-bg {
  position: absolute;
  inset: 0 32px;
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
}
.gb-page-hero-caption {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  box-sizing: border-box;
  text-align: left;
}
.gb-page-hero-image .gb-eyebrow {
  color: var(--gb-accent);
  margin: 0 0 20px;
  text-align: left;
}
.gb-page-hero-image .gb-page-hero-title {
  color: #fff !important;
  margin: 0;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-align: left;
}
.gb-page-hero-image .gb-page-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  max-width: none;
  margin: 32px 0 0;
  text-align: left;
}
.gb-page-hero-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 1200px;
  box-sizing: border-box;
}
.gb-page-hero-title {
  color: var(--gb-text-on-dark) !important;
  font-size: clamp(2rem, 5vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 0 0 24px;
}
.gb-page-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.125rem, 2vw, 1.75rem);
  line-height: 1.5;
  max-width: none;
  margin: 24px 0 0;
}

/* Section scaffold for editorial pages */
.gb-section.gb-editorial,
.gb-section.gb-founders,
.gb-section.gb-trio,
.gb-section.gb-partners {
  background: var(--gb-bg-light);
  color: var(--gb-text-on-light);
  padding-block: 140px;
}
.gb-editorial-inner,
.gb-founders-inner,
.gb-trio-inner,
.gb-partners-inner,
.gb-nachhaltigkeit-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 1200px;
}

/* Editorial heading + body */
.gb-editorial-h {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 40px;
}
.gb-editorial-h-light { color: var(--gb-text-on-dark); }
.gb-editorial-body {
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
  margin: 0 0 1.25em;
}
.gb-editorial-block { max-width: 720px; }

/* Section 02 — founders grid (text 7-col, photos 5-col) */
.gb-founders-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: start;
}
.gb-founders-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 48px;
}
.gb-founders-photos figure { margin: 0; }
.gb-founders-photos img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  aspect-ratio: 3/4;
  object-fit: cover;
  filter: saturate(0.92) contrast(1.02);
}
.gb-founders-photos figcaption {
  margin-top: 12px;
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
}

/* Section — Nachhaltigkeit (dark, big 75% type-as-architecture) */
.gb-nachhaltigkeit {
  color: var(--gb-text-on-dark);
  padding-block: 160px;
}
.gb-nachhaltigkeit-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}
.gb-nachhaltigkeit-stat .gb-eyebrow { margin-bottom: 24px; }
.gb-stat-display {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(6rem, 16vw, 12rem);
  line-height: 0.9;
  letter-spacing: -0.05em;
  color: var(--gb-accent);
}
.gb-stat-display span {
  font-size: 0.5em;
  vertical-align: top;
  margin-left: 0.05em;
}
.gb-nachhaltigkeit-body { max-width: 720px; }
.gb-nachhaltigkeit-body p {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.7;
  margin: 0 0 1.25em;
}
.gb-nachhaltigkeit-body p:last-child { margin-bottom: 0; }

/* Section — partner logos */
.gb-partners-head { margin-bottom: 80px; max-width: 820px; }
.gb-partners-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid rgba(42, 39, 37, 0.12);
  border-bottom: 1px solid rgba(42, 39, 37, 0.12);
}
.gb-partner {
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid rgba(42, 39, 37, 0.12);
  min-height: 160px;
}
.gb-partner:last-child { border-right: none; }
.gb-partner img {
  max-width: 140px;
  max-height: 60px;
  width: auto;
  aspect-ratio: 4 / 3;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.7;
  transition: opacity 0.4s ease, filter 0.4s ease;
}
.gb-partner img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* CTA strip (dark) */
.gb-cta-team,
.gb-team-cta { padding-block: 120px; }
.gb-cta-team-inner,
.gb-team-cta-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 1200px;
}
.gb-cta-link { display: inline-flex; }
.gb-cta-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
}
.gb-cta-h {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  letter-spacing: -0.02em;
  color: var(--gb-text-on-dark);
  margin: 0;
  line-height: 1.15;
}

/* =========================================================
   TEAM PAGE
   ========================================================= */
.gb-team-hero-photo {
  padding-block: 0 0;
  background: var(--gb-bg-light);
}
.gb-team-hero-photo-figure {
  margin: 0 auto;
  max-width: 1280px;
  padding-inline: 32px;
}
.gb-team-hero-photo-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

.gb-team-lead {
  background: var(--gb-bg-light);
  padding-block: 80px 40px;
}
.gb-team-lead-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 880px;
}
.gb-team-lead-text {
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.65;
  color: var(--gb-text-on-light);
  margin: 0;
  text-align: center;
}

.gb-team-grid-section {
  background: var(--gb-bg-light);
  padding-block: 60px 120px;
}
.gb-team-grid-inner {
  width: 100%;
  padding-inline: 32px;
  margin-inline: auto;
  max-width: 1280px;
}

.gb-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
}
/* WP block-layout (.is-layout-flow) injects margin-block-start: 1.2rem on
   non-first children. Reset on grid children so all cards align on row baseline. */
.gb-team-grid > * { margin-block-start: 0 !important; }
/* Same fix for home team strip — cards 2-N pick up 1.2rem from WP layout injection */
.gb-team-members > * { margin-block-start: 0 !important; }

.gb-team-card {
  display: flex;
  flex-direction: column;
}
.gb-team-card-photo {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #ddd;
  margin-bottom: 20px;
}
.gb-team-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1);
}
.gb-team-card:hover .gb-team-card-photo img { transform: scale(1.04); }
.gb-team-card-name {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 6px;
  color: var(--gb-text-on-light);
}
.gb-team-card-role {
  font-size: 0.95rem;
  color: var(--gb-text-muted);
  line-height: 1.45;
  margin: 0 0 12px;
}
.gb-team-card-contact {
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0;
  color: var(--gb-text-on-light);
}
.gb-team-card-contact a {
  color: var(--gb-text-on-light);
  text-decoration: none;
  transition: color 0.3s ease;
}
.gb-team-card-contact a:hover { color: var(--gb-accent); }

/* =========================================================
   MOBILE — Swiss pages
   ========================================================= */
@media (max-width: 900px) {
  .gb-page-hero { padding-block: 64px 96px; }
  .gb-page-hero-title { letter-spacing: -0.02em; }
  .gb-section.gb-editorial,
  .gb-section.gb-founders,
  .gb-section.gb-trio,
  .gb-section.gb-partners,
  .gb-nachhaltigkeit { padding-block: 80px; }
  .gb-founders-grid,
  .gb-nachhaltigkeit-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .gb-partners-row { grid-template-columns: repeat(2, 1fr); }
  .gb-partner { border-bottom: 1px solid rgba(42, 39, 37, 0.12); }
  .gb-partner:nth-child(2) { border-right: none; }
  .gb-partner:nth-child(3), .gb-partner:nth-child(4) { border-bottom: none; }

  .gb-team-hero-photo-figure img { aspect-ratio: 4/3; }
  .gb-page-hero-image { padding-block: 88px 0 !important; }
  .gb-page-hero-image .gb-page-hero-inner { aspect-ratio: 4 / 3; padding-inline: 24px; }
  .gb-page-hero-image .gb-page-hero-bg { inset: 0 24px; }
  .gb-page-hero-caption { padding: 32px 24px 56px; }
  .gb-page-hero-image .gb-page-hero-lead { font-size: 1.1rem; line-height: 1.55; margin-top: 24px; }
  .gb-team-grid-section { padding-block: 40px 80px; }
  .gb-team-grid { grid-template-columns: repeat(3, 1fr); gap: 32px 24px; }
  .gb-team-lead { padding-block: 60px 32px; }
  .gb-team-lead-text { font-size: 1.05rem; text-align: left; }
  .gb-cta-line {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
  }
}

@media (max-width: 720px) {
  .gb-team-grid { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
}

@media (max-width: 540px) {
  .gb-page-hero-inner,
  .gb-editorial-inner,
  .gb-founders-inner,
  .gb-trio-inner,
  .gb-partners-inner,
  .gb-nachhaltigkeit-inner,
  .gb-team-roster-inner,
  .gb-team-cta-inner,
  .gb-cta-team-inner { padding-inline: 20px; }
  .gb-team-row,
  .gb-team-row-lg {
    grid-template-columns: 80px 1fr;
    gap: 20px;
  }
}

/* =========================================================
   ÜBER UNS PAGE (verbatim original, Swiss layout, full-width text)
   ========================================================= */

/* Video hero — autoplay muted, content-width frame, custom controls, caption below */
.gb-page-hero-video {
  padding-block: 96px 0 !important;
  background: var(--gb-primary-dark);
}
.gb-page-hero-video .gb-page-hero-inner {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: 32px;
  aspect-ratio: 16 / 9;
}
.gb-page-hero-video .gb-video-bg {
  position: absolute;
  inset: 0 32px;
  overflow: hidden;
  background: #000;
}
.gb-page-hero-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
/* Caption below video — matches /team image-hero caption pattern */
.gb-page-hero-video .gb-page-hero-caption {
  max-width: 1200px;
  margin: 0 auto;
  padding: 56px 32px 96px;
  box-sizing: border-box;
  text-align: left;
}
.gb-page-hero-video .gb-eyebrow {
  color: var(--gb-accent);
  margin: 0 0 20px;
}
.gb-page-hero-video .gb-page-hero-title {
  color: #fff !important;
  margin: 0;
  font-size: clamp(4rem, 11vw, 9rem);
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 600;
  text-align: left;
}
.gb-page-hero-video .gb-page-hero-lead {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.5;
  margin: 32px 0 0;
  text-align: left;
}
.gb-video-controls {
  position: absolute;
  bottom: 24px;
  left: calc(32px + 24px);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 16px;
}
.gb-video-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  background: rgba(19, 16, 18, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, border-color 0.2s;
}
.gb-video-btn:hover { background: var(--gb-accent); border-color: var(--gb-accent); }
.gb-video-btn svg { width: 22px; height: 22px; fill: currentColor; display: block; }
.gb-video-btn-play .icon-pause,
.gb-video-btn-play.is-playing .icon-play { display: none; }
.gb-video-btn-play.is-playing .icon-pause { display: block; }
.gb-video-btn-sound .icon-on,
.gb-video-btn-sound.is-muted .icon-off { display: none; }
.gb-video-btn-sound.is-muted .icon-on { display: block; }

/* Standard section scaffold for uu (all full content width) */
.gb-uu-section {
  background: var(--gb-bg-light);
  padding-block: var(--gb-section-padding);
}
.gb-uu-section-dark {
  background: var(--gb-bg-dark);
  padding-block: var(--gb-section-padding-dark);
}
.gb-uu-inner {
  max-width: var(--gb-container-max);
  margin: 0 auto;
  padding-inline: 24px;
  width: 100%;
  box-sizing: border-box;
}

/* Eyebrow above headings inside uu sections */
.gb-uu-section .gb-eyebrow { margin-bottom: 24px; }

/* Headings */
.gb-uu-h {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(2rem, 5vw, 3.5rem);
  line-height: 1.11;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  color: var(--gb-text-on-light);
}
.gb-uu-section-dark .gb-uu-h { color: #fff; }

/* Body — fills container */
.gb-uu-body {
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.618;
  margin: 0 0 1.25em;
  color: var(--gb-text-on-light);
}
.gb-uu-body:last-child { margin-bottom: 0; }
.gb-uu-section-dark .gb-uu-body { color: rgba(255, 255, 255, 0.88); }

/* Image + text split — asymmetric 5:7 grid (text gets more space, Swiss editorial) */
.gb-uu-split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 80px;
  align-items: center;
}
.gb-uu-split.gb-uu-split-reverse { grid-template-columns: 7fr 5fr; }
.gb-uu-split-photo {
  margin: 0;
  overflow: hidden;
}
.gb-uu-split-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  aspect-ratio: 4/3;
  object-fit: cover;
}
.gb-uu-split-text { min-width: 0; }
.gb-uu-split-text .gb-uu-h { margin-top: 0; }

/* §Partners — hairline 4-col logo strip below heading + body */
.gb-uu-partners-row {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--gb-rule);
  border-bottom: 1px solid var(--gb-rule);
}
.gb-uu-partner {
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--gb-rule);
  min-height: 160px;
}
.gb-uu-partner:last-child { border-right: none; }
.gb-uu-partner img {
  max-width: 140px;
  max-height: 60px;
  filter: grayscale(1) contrast(0.95);
  opacity: 0.7;
  transition: opacity 0.4s, filter 0.4s;
}
.gb-uu-partner img:hover { filter: grayscale(0); opacity: 1; }

/* §CTA */
.gb-uu-cta { background: var(--gb-primary-dark); padding-block: 120px; }
.gb-uu-cta-inner { display: flex; justify-content: flex-start; }

/* Mobile */
@media (max-width: 900px) {
  .gb-page-hero-video { padding-block: 88px 0 !important; }
  .gb-page-hero-video .gb-page-hero-inner { aspect-ratio: 4/3; padding-inline: 24px; }
  .gb-page-hero-video .gb-video-bg { inset: 0 24px; }
  .gb-video-controls { left: calc(24px + 16px); right: calc(24px + 16px); bottom: 16px; }
  .gb-video-btn { width: 48px; height: 48px; }

  .gb-uu-section { padding-block: 80px; }
  .gb-uu-section-dark { padding-block: 96px; }
  .gb-uu-cta { padding-block: 80px; }
  .gb-uu-split,
  .gb-uu-split.gb-uu-split-reverse { grid-template-columns: 1fr !important; gap: 32px; }
  .gb-uu-split.gb-uu-split-reverse .gb-uu-split-photo { order: 0; }
  .gb-uu-split.gb-uu-split-reverse .gb-uu-split-text { order: 0; }
  .gb-uu-trio-grid { grid-template-columns: 1fr; }
  .gb-uu-trio-col {
    padding: 40px 0 !important;
    border-right: none;
    border-bottom: 1px solid var(--gb-rule);
  }
  .gb-uu-trio-col:last-child { border-bottom: none; }
  .gb-uu-partners-row { grid-template-columns: repeat(2, 1fr); }
  .gb-uu-partner { border-bottom: 1px solid var(--gb-rule); }
  .gb-uu-partner:nth-child(2) { border-right: none; }
  .gb-uu-partner:nth-child(3), .gb-uu-partner:nth-child(4) { border-bottom: none; }
}
@media (max-width: 540px) {
  .gb-uu-inner { padding-inline: 20px; }
}

/* =========================================================
   REFERENZEN — archive page tiles (Swiss editorial)
   ========================================================= */
.gb-referenz-archive-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 64px 48px;
}
.gb-referenz-tile {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--gb-rule);
  padding-top: 24px;
}
.gb-referenz-tile-img {
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #ece9e5;
}
.gb-referenz-tile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gb-referenz-tile:hover .gb-referenz-tile-img img { transform: scale(1.03); }
.gb-referenz-tile-caption {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.gb-referenz-tile-eyebrow {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gb-text-muted);
}
.gb-referenz-tile-title {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.35rem, 2.4vw, 1.75rem);
  line-height: 1.15;
  color: var(--gb-text-on-light);
  margin: 4px 0 0;
}
.gb-referenz-tile-link {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--gb-font-body);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--gb-accent);
  position: relative;
  padding-right: 22px;
}
.gb-referenz-tile-link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
.gb-referenz-tile:hover .gb-referenz-tile-link::after { transform: translateX(4px); }

@media (max-width: 720px) {
  .gb-referenz-archive-grid { grid-template-columns: 1fr; gap: 48px; }
}

/* =========================================================
   FORM — dark variant (gb-uu-section-dark wrap)
   ========================================================= */
.gb-uu-section-dark .gb-form-h {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.11;
  color: var(--gb-text-on-dark);
  margin: 0 0 40px;
}
.gb-uu-section-dark .gb-field label,
.gb-uu-section-dark .gb-check { color: var(--gb-text-on-dark); }
.gb-uu-section-dark .gb-field input[type="text"],
.gb-uu-section-dark .gb-field input[type="email"],
.gb-uu-section-dark .gb-field input[type="tel"],
.gb-uu-section-dark .gb-field input[type="date"],
.gb-uu-section-dark .gb-field textarea,
.gb-uu-section-dark .gb-field select,
.gb-uu-section-dark .gb-field .gb-file-input {
  background-color: #fff;
  border-color: rgba(255, 255, 255, 0.18);
}
.gb-uu-section-dark .gb-field-hint { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; margin-top: 2px; }
.gb-uu-section-dark .gb-field input:focus,
.gb-uu-section-dark .gb-field textarea:focus,
.gb-uu-section-dark .gb-field select:focus {
  border-color: var(--gb-accent);
  box-shadow: 0 0 0 3px rgba(211, 42, 20, 0.32);
}

.gb-schnupper-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 80px;
  align-items: start;
}
.gb-schnupper-aside {
  border-left: 1px solid rgba(255, 255, 255, 0.16);
  padding-left: 48px;
}
.gb-schnupper-aside .gb-eyebrow {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gb-accent);
  display: block;
  margin-bottom: 12px;
}
.gb-schnupper-aside h3 {
  font-family: var(--gb-font-heading);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.15;
  color: var(--gb-text-on-dark);
  margin: 0 0 20px;
}
.gb-schnupper-aside p {
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.618;
  margin: 0 0 14px;
}
@media (max-width: 880px) {
  .gb-schnupper-split { grid-template-columns: 1fr; gap: 48px; }
  .gb-schnupper-aside { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,0.16); padding-top: 40px; }
}

/* =========================================================
   UNIFIED MOBILE GUTTER — 1rem (16px) left+right on EVERY section.
   Header, hero (image + video), all content inners, card grids, footer,
   CTA blocks. This is the single source of truth on mobile; later
   per-section padding rules are explicitly overridden here.
   ========================================================= */
@media (max-width: 900px) {
  :root {
    --wp--style--root--padding-left: 1rem;
    --wp--style--root--padding-right: 1rem;
  }
  .has-global-padding {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  /* Kill the alignfull breakout on heroes so they sit inside the visible
     viewport (not a 100vw box that bleeds 7-15px past the scrollbar gutter).
     Without this, the 1rem padding inside .gb-page-hero-inner ends up
     ~8.5px visible because half the scrollbar width eats the gutter. */
  .gb-page-hero,
  .gb-page-hero-image,
  .gb-page-hero-video {
    width: 100% !important;
    margin-inline: 0 !important;
  }
  .site-header-inner,
  .site-footer-inner,
  .gb-page-hero-inner,
  .gb-page-hero-image .gb-page-hero-inner,
  .gb-page-hero-video .gb-page-hero-inner,
  .gb-page-hero-caption,
  .gb-page-hero-video .gb-page-hero-caption,
  .gb-page-header > .wp-block-group,
  .gb-page-body,
  .gb-kontakt-info-inner,
  .gb-kontakt-form-inner,
  .gb-uu-inner,
  .gb-team-grid-inner,
  .gb-team-roster-inner,
  .gb-team-cta-inner,
  .gb-cta-team-inner,
  .gb-founders-inner,
  .gb-editorial-inner,
  .gb-trio-inner,
  .gb-partners-inner,
  .gb-nachhaltigkeit-inner,
  .gb-section.gb-produkte > .wp-block-group,
  .gb-cta-kontakt > .wp-block-group,
  .gb-kompetenz-page > .wp-block-group {
    padding-inline: 1rem !important;
  }
  .gb-page-hero-image .gb-page-hero-bg { inset: 0 1rem !important; }
  .gb-page-hero-video .gb-video-bg { inset: 0 1rem !important; }
  .gb-video-controls {
    left: calc(1rem + 16px) !important;
    right: calc(1rem + 16px) !important;
  }
}

/* =========================================================
   BROSCHÜRE — embedded third-party flipbook (unserebroschuere.ch)
   iframe is a justified wp:html exception (external embed, like Maps).
   ========================================================= */
.gb-broschuere-embed {
  position: relative;
  width: 100%;
  height: 80vh;
  min-height: 560px;
  border: 1px solid rgba(42, 39, 37, 0.12);
  background: #f5f4f2;
}
.gb-broschuere-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Loading hint sits behind the (initially transparent) iframe; the
   flipbook paints over it once the third-party viewer is ready. */
.gb-broschuere-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(42, 39, 37, 0.65);
}
.gb-broschuere-actions {
  margin-top: 32px;
}
@media (max-width: 900px) {
  .gb-broschuere-embed {
    height: 72vh;
    min-height: 460px;
  }
}