/* ==========================================================================
   GM BAU — globales Stylesheet fuer WPCode
   Einmal hier hinterlegen, gilt fuer alle Unterseiten. Site-wide einbinden.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');

html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; overflow-x: clip; }
body.gmb-is-locked { overflow: hidden; }  /* Scroll-Sperre bei offenem Mobile-Menue */

/* --------------------------------------------------------------------------
   Weisse Streifen oben und unten entfernen
   Elementor gibt jedem Container standardmaessig 10px Polsterung oben und
   unten. Bei einer randlos gestalteten Seite entsteht dadurch ueber dem
   dunklen Hero und unter dem Footer je ein weisser Streifen (zusammen 20px).
   Auf den Canvas-Seiten dieser Website wird die Polsterung deshalb entfernt.
   -------------------------------------------------------------------------- */
body.page-template-elementor_canvas .e-con,
body.page-template-elementor_canvas .e-con-inner,
body.page-template-elementor_canvas .elementor-section,
body.page-template-elementor_canvas .elementor-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Gleiches auch dann, wenn eine Seite kein Canvas-Template nutzt: der
   Container, der unseren Wrapper enthaelt, bekommt ebenfalls keine Polsterung. */
.e-con:has(> .elementor-widget .gmbau-root),
.e-con:has(> .gmbau-root),
.elementor-widget:has(> .gmbau-root) {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Der Wrapper selbst darf keine Aussenabstaende erben. */
.gmbau-root { margin: 0 !important; padding: 0 !important; }


/* ==========================================================================
   Abwehr gegen Theme-Regeln auf Elementebene
   Themes formatieren oft img, h1-h6 oder p direkt und mit !important.
   Diese Ebene stellt die Ausgangswerte wieder her. Sie wirkt ausschliesslich
   innerhalb von .gmbau-root und laesst den Rest der Website unberuehrt.
   ========================================================================== */
.gmbau-root :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display) !important;
  color: inherit !important;
  margin: 0 !important;
  padding: 0 !important;
  text-shadow: none !important;
  border: 0 !important;
}
.gmbau-root p, .gmbau-root figure, .gmbau-root blockquote {
  margin: 0 !important;
  color: inherit;
}
.gmbau-root :is(img, video, svg, iframe) {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  max-width: 100% !important;
}
.gmbau-root a { text-decoration: none !important; }
.gmbau-root :is(button, input, select, textarea) {
  font-family: inherit !important;
  text-transform: none;
}
.gmbau-root address { font-style: normal !important; }

/* ==========================================================================
   GM BAU — Design System
   Fa. GM BAU · Baumwirtsweg 6 · 44319 Dortmund
   Vanilla CSS. Keine Framework-Abhaengigkeiten. WordPress-kompatibel.
   --------------------------------------------------------------------------
   01 Design Tokens          11 Leistungen (Karten)
   02 Reset & Basis          12 Ablauf / Prozess
   03 Typografie             13 Warum GM BAU
   04 Layout & Container     14 Projekte
   05 Motion-Primitive       15 CTA-Band
   06 Buttons & Links        16 Kontakt & Formular
   07 Header / Navigation    17 Footer
   08 Hero                   18 Unterseiten
   09 USP-Leiste             19 Platzhalter-Medien
   10 Intro                  20 Responsive
                             21 Reduced Motion / Print
   ========================================================================== */
/* ==========================================================================
   01 DESIGN TOKENS
   Farben abgeleitet aus dem GM BAU Logo:
   Navy (G/B), Anthrazit-Silber (M + Pfeil), Orange (Akzentquadrat).
   ========================================================================== */
.gmbau-root {
  /* --- Marke --- */
  --navy-900: #0C1524;   /* Tiefstes Navy — dunkle Sektionen */
  --navy-800: #12203A;
  --navy-700: #1A2E52;   /* Primaeres Marken-Navy (Logo "G" / "B") */
  --navy-600: #24406E;
  --navy-500: #345489;

  --anthracite-900: #1B1E23;
  --anthracite-700: #2E333B;
  --anthracite-500: #4A515C;

  --steel-400: #8A929D;  /* Silber-Grau aus dem Logo-Pfeil */
  --steel-300: #B4BBC4;
  --steel-200: #D7DBE0;
  --steel-100: #EBEDF0;
  --steel-50:  #F5F6F8;

  --orange-600: #C25E08;  /* Akzent dunkel — Text auf hellem Grund */
  --orange-500: #EE7A17;  /* Akzent primaer (Logo-Quadrat) */
  --orange-400: #FF9435;  /* Akzent auf dunklem Grund */
  --orange-100: #FDEBDA;

  --white: #FFFFFF;

  /* --- Semantische Tokens --- */
  --bg: var(--white);
  --bg-soft: var(--steel-50);
  --bg-dark: var(--navy-900);

  --text: #141921;                /* 15.6:1 auf Weiss */
  --text-muted: #545C68;          /*  7.4:1 auf Weiss */
  --text-on-dark: #F2F4F7;        /* 15.9:1 auf Navy-900 */
  --text-on-dark-muted: #A9B2BF;  /*  7.2:1 auf Navy-900 */

  --accent: var(--orange-500);
  --accent-ink: var(--orange-600);  /* Orange als Text auf Hell — 4.6:1 */
  --on-accent: #17202E;             /* Text auf Orange — 8.1:1 */

  --line: rgba(20, 25, 33, 0.12);
  --line-strong: rgba(20, 25, 33, 0.22);
  --line-dark: rgba(255, 255, 255, 0.14);
  --line-dark-strong: rgba(255, 255, 255, 0.26);

  /* --- Typografie --- */
  --font-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  /* Monospace fuer die technischen ( ABSCHNITT )-Labels — Systemschrift,
     kein zusaetzlicher Webfont-Download. */
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Editoriale Grossdisplays: eine Zeile fuellt 10-14vh, sehr enge Zeilenhoehe */
  /* Deutsche Komposita sind lang: 'LANDSCHAFTSBAU.' hat 15 Zeichen.
     Die Skala ist so gewaehlt, dass auch das laengste Wort in einer
     Zeile bleibt, ohne seitlich abgeschnitten zu werden. */
  --fs-mega:       clamp(2rem, 7.4vw, 7rem);
  --fs-display-xl: clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-display-l:  clamp(2.25rem, 5.4vw, 4.5rem);
  --fs-display-m:  clamp(1.9rem, 3.9vw, 3.25rem);
  --fs-h3:         clamp(1.35rem, 2vw, 1.75rem);
  --fs-h4:         clamp(1.1rem, 1.4vw, 1.3rem);
  --fs-lead:       clamp(1.05rem, 1.35vw, 1.3rem);
  --fs-body:       1rem;
  --fs-small:      0.9375rem;
  --fs-label:      0.75rem;

  --lh-tight: 1.04;
  --lh-snug: 1.18;
  --lh-body: 1.65;

  /* --- Raster (8px-System) --- */
  --s-4: 4px;   --s-8: 8px;   --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-40: 40px; --s-48: 48px;
  --s-64: 64px; --s-80: 80px; --s-96: 96px; --s-128: 128px;

  --content-max: 1320px;
  --content-wide: 1560px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 140px);

  /* --- Radius & Schatten (bewusst knapp: Bau = kantig) --- */
  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --shadow-sm: 0 1px 2px rgba(12, 21, 36, .06), 0 2px 8px rgba(12, 21, 36, .04);
  --shadow-md: 0 4px 12px rgba(12, 21, 36, .08), 0 12px 32px rgba(12, 21, 36, .07);
  --shadow-lg: 0 8px 24px rgba(12, 21, 36, .10), 0 24px 64px rgba(12, 21, 36, .12);

  /* --- Motion --- */
  --ease-editorial: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-out-soft:  cubic-bezier(0.22, 1, 0.36, 1);
  --ease-mech:      cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-hover: 240ms;
  --t-ui: 380ms;
  --t-text: 780ms;
  --t-media: 1100ms;

  /* --- Z-Index-Skala --- */
  --z-base: 1;
  --z-sticky: 40;
  --z-header: 60;
  --z-menu: 80;
  --z-skip: 100;
}
/* ==========================================================================
   02 RESET & BASIS
   ========================================================================== */
.gmbau-root *,
.gmbau-root *::before,
.gmbau-root *::after { box-sizing: border-box; }
.gmbau-root {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;  /* Sticky-Header-Versatz fuer Ankerlinks */
}
.gmbau-root {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
body.gmb-is-locked .gmbau-root { overflow: hidden; }
.gmbau-root h1,
.gmbau-root h2,
.gmbau-root h3,
.gmbau-root h4,
.gmbau-root h5,
.gmbau-root p,
.gmbau-root figure,
.gmbau-root blockquote { margin: 0; }
.gmbau-root ul,
/* ul und ol gemeinsam zuruecksetzen. Beim Umbau war der ul-Teil dieser
   Regel verlorengegangen - dadurch setzte das Theme auf jeder Liste
   seine Aufzaehlungspunkte und seinen Einzug durch, auch auf der
   Navigation. !important, weil Themes hier ebenfalls !important nutzen. */
.gmbau-root :is(ul, ol) {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.gmbau-root img,
.gmbau-root svg,
.gmbau-root video { display: block; max-width: 100%; }
.gmbau-root img { height: auto; }
.gmbau-root a { color: inherit; text-decoration: none; }
.gmbau-root button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.gmbau-root input,
.gmbau-root textarea,
.gmbau-root select,
.gmbau-root button { font-family: inherit; font-size: inherit; }
.gmbau-root ::selection { background: var(--navy-700); color: var(--white); }
/* Fokus: immer sichtbar, markenkonform (A11y focus-states) */
.gmbau-root :focus-visible {
  outline: 3px solid var(--orange-500);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.gmbau-root .gmb-section--dark :focus-visible,
.gmbau-root .gmb-hero :focus-visible,
.gmbau-root .gmb-page-hero :focus-visible,
.gmbau-root .gmb-mobile-menu :focus-visible,
.gmbau-root .gmb-site-footer :focus-visible { outline-color: var(--orange-400); }
.gmbau-root .gmb-skip-link {
  position: fixed; top: var(--s-8); left: var(--s-8);
  z-index: var(--z-skip);
  padding: var(--s-12) var(--s-24);
  background: var(--orange-500); color: var(--on-accent);
  font-family: var(--font-display); font-weight: 700; letter-spacing: .02em;
  transform: translateY(-180%);
  transition: transform var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-skip-link:focus { transform: translateY(0); }
.gmbau-root .gmb-visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ==========================================================================
   03 TYPOGRAFIE
   ========================================================================== */
.gmbau-root .gmb-display-xl,
.gmbau-root .gmb-display-l,
.gmbau-root .gmb-display-m,
.gmbau-root .gmb-h3,
.gmbau-root .gmb-h4 {font-family: var(--font-display) !important; font-weight: 800 !important; letter-spacing: -0.022em !important; text-wrap: balance !important }
.gmbau-root .gmb-display-xl {font-size: var(--fs-display-xl) !important; line-height: var(--lh-tight) !important }
.gmbau-root .gmb-display-l {font-size: var(--fs-display-l) !important; line-height: var(--lh-tight) !important }
.gmbau-root .gmb-display-m {font-size: var(--fs-display-m) !important; line-height: var(--lh-snug) !important }
.gmbau-root .gmb-h3 {font-size: var(--fs-h3) !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: -0.014em !important }
.gmbau-root .gmb-h4 {font-size: var(--fs-h4) !important; line-height: 1.3 !important; font-weight: 700 !important; letter-spacing: -0.01em !important }
.gmbau-root .gmb-lead {font-size: var(--fs-lead) !important; line-height: 1.6 !important; color: var(--text-muted) !important; max-width: 62ch !important }
.gmbau-root .gmb-section--dark .gmb-lead {color: var(--text-on-dark-muted) !important }
.gmbau-root .gmb-body-text { max-width: 68ch; }
.gmbau-root .gmb-body-text p + p { margin-top: var(--s-16); }
.gmbau-root .gmb-text-muted { color: var(--text-muted); }
.gmbau-root .gmb-section--dark .gmb-text-muted { color: var(--text-on-dark-muted); }
/* Eyebrow / Kapitel-Label — technischer Charakter */
.gmbau-root .gmb-eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-12);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.gmbau-root .gmb-section--dark .gmb-eyebrow,
.gmbau-root .gmb-hero .gmb-eyebrow,
.gmbau-root .gmb-page-hero .gmb-eyebrow { color: var(--orange-400); }
.gmbau-root .gmb-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.gmbau-root .gmb-accent-word { color: var(--accent-ink); }
.gmbau-root .gmb-section--dark .gmb-accent-word,
.gmbau-root .gmb-hero .gmb-accent-word,
.gmbau-root .gmb-page-hero .gmb-accent-word { color: var(--orange-400); }
/* ==========================================================================
   04 LAYOUT & CONTAINER
   ========================================================================== */
.gmbau-root .gmb-container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); }
.gmbau-root .gmb-container--wide { max-width: var(--content-wide); }
.gmbau-root .gmb-container--narrow { max-width: 860px; }
.gmbau-root .gmb-section { padding-block: var(--section-y); position: relative; }
.gmbau-root .gmb-section--tight { padding-block: clamp(48px, 6vw, 88px); }
.gmbau-root .gmb-section--soft { background: var(--bg-soft); }
.gmbau-root .gmb-section--dark { background: var(--bg-dark); color: var(--text-on-dark); }
.gmbau-root .gmb-section--dark h1,
.gmbau-root .gmb-section--dark h2,
.gmbau-root .gmb-section--dark h3,
.gmbau-root .gmb-section--dark h4 { color: var(--text-on-dark); }
.gmbau-root .gmb-section-head { max-width: 68ch; }
.gmbau-root .gmb-section-head > * + * { margin-top: var(--s-16); }
.gmbau-root .gmb-section-head--center { margin-inline: auto; text-align: center; }
.gmbau-root .gmb-section-head--center .gmb-eyebrow { justify-content: center; }
.gmbau-root .gmb-stack > * + * { margin-top: var(--s-16); }
.gmbau-root .gmb-stack-lg > * + * { margin-top: var(--s-32); }
.gmbau-root .gmb-rule { height: 1px; background: var(--line); border: 0; margin: 0; }
.gmbau-root .gmb-section--dark .gmb-rule { background: var(--line-dark); }
/* ==========================================================================
   05 MOTION-PRIMITIVE
   Alle Reveals laufen ueber IntersectionObserver -> Klasse .gmb-is-in.
   Ausschliesslich transform/opacity: GPU-beschleunigt, kein Reflow, kein CLS.
   ========================================================================== */
/* 5.1 Fade-Up — Standard-Reveal */
.gmbau-root [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition:
    opacity var(--t-text) var(--ease-out-soft),
    transform var(--t-text) var(--ease-out-soft);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.gmbau-root [data-reveal].gmb-is-in { opacity: 1; transform: none; will-change: auto; }
.gmbau-root [data-reveal="left"] { transform: translate3d(-36px, 0, 0); }
.gmbau-root [data-reveal="right"] { transform: translate3d(36px, 0, 0); }
.gmbau-root [data-reveal="scale"] { transform: scale(.965); }
/* 5.2 Zeilenmaske — Headline laeuft Zeile fuer Zeile aus der Blende */
.gmbau-root .gmb-reveal-lines { display: block; }
.gmbau-root .gmb-reveal-lines .gmb-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.gmbau-root .gmb-reveal-lines .gmb-line > span {
  display: block;
  transform: translate3d(0, 110%, 0);
  transition: transform var(--t-text) var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * 90ms + var(--reveal-delay, 0ms));
}
.gmbau-root .gmb-reveal-lines.gmb-is-in .gmb-line > span { transform: none; }
/* 5.3 Medien-Maske — Blende faehrt hoch, Motiv zoomt zurueck */
.gmbau-root .gmb-media-mask { overflow: hidden; position: relative; background: var(--steel-100); }
.gmbau-root .gmb-media-mask > img,
.gmbau-root .gmb-media-mask > .gmb-ph,
.gmbau-root .gmb-media-mask > video {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.14);
  transition: transform var(--t-media) var(--ease-out-soft);
}
.gmbau-root .gmb-media-mask::after {
  content: ""; position: absolute; inset: 0;
  background: var(--navy-900);
  transform-origin: bottom;
  transition: transform var(--t-media) var(--ease-editorial);
}
.gmbau-root .gmb-media-mask.gmb-is-in > img,
.gmbau-root .gmb-media-mask.gmb-is-in > .gmb-ph,
.gmbau-root .gmb-media-mask.gmb-is-in > video { transform: scale(1); }
.gmbau-root .gmb-media-mask.gmb-is-in::after { transform: scaleY(0); }
/* 5.4 Stagger — Kinder erben --i fuer gestaffelte Verzoegerung (30-90ms) */
.gmbau-root [data-stagger] > * { --reveal-delay: calc(var(--i, 0) * 80ms); }
/* 5.5 Tabellenziffern fuer Zaehler */
.gmbau-root .gmb-count-up { font-variant-numeric: tabular-nums; }
/* 5.6 Scroll-Fortschrittsbalken */
.gmbau-root .gmb-scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px;
  z-index: var(--z-header);
  pointer-events: none;
}
.gmbau-root .gmb-scroll-progress__bar {
  height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--orange-500), var(--orange-400));
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 120ms linear;
}
/* 5.7 Parallax — Verschiebung kommt als --py aus dem rAF-Loop */
.gmbau-root [data-parallax] > * { transform: translate3d(0, var(--py, 0px), 0); }
/* ==========================================================================
   06 BUTTONS & LINKS
   Touch-Ziel >= 52px, Hover fuellt von links, Fokus immer sichtbar.
   ========================================================================== */
.gmbau-root .gmb-btn {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-12);
  min-height: 52px;
  padding: var(--s-16) var(--s-32);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-radius: var(--radius);
  overflow: hidden;
  text-align: center;
  transition:
    color var(--t-hover) var(--ease-out-soft),
    background-color var(--t-hover) var(--ease-out-soft),
    border-color var(--t-hover) var(--ease-out-soft),
    box-shadow var(--t-hover) var(--ease-out-soft);
  touch-action: manipulation;
}
.gmbau-root .gmb-btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-ui) var(--ease-editorial);
}
.gmbau-root .gmb-btn:hover::before,
.gmbau-root .gmb-btn:focus-visible::before { transform: scaleX(1); }
.gmbau-root .gmb-btn__icon { flex: none; transition: transform var(--t-hover) var(--ease-out-soft); }
.gmbau-root .gmb-btn:hover .gmb-btn__icon { transform: translateX(4px); }
.gmbau-root .gmb-btn--primary { background: var(--orange-500); color: var(--on-accent); box-shadow: var(--shadow-sm); }
.gmbau-root .gmb-btn--primary::before { background: var(--navy-700); }
.gmbau-root .gmb-btn--primary:hover,
.gmbau-root .gmb-btn--primary:focus-visible { color: var(--white); box-shadow: var(--shadow-md); }
.gmbau-root .gmb-btn--secondary { border: 2px solid var(--line-strong); color: var(--text); }
.gmbau-root .gmb-btn--secondary::before { background: var(--navy-700); }
.gmbau-root .gmb-btn--secondary:hover,
.gmbau-root .gmb-btn--secondary:focus-visible { color: var(--white); border-color: var(--navy-700); }
.gmbau-root .gmb-btn--ghost { border: 2px solid var(--line-dark-strong); color: var(--text-on-dark); }
.gmbau-root .gmb-btn--ghost::before { background: var(--white); }
.gmbau-root .gmb-btn--ghost:hover,
.gmbau-root .gmb-btn--ghost:focus-visible { color: var(--navy-900); border-color: var(--white); }
.gmbau-root .gmb-btn--block { width: 100%; }
/* Textlink mit Unterstrich-Sweep */
.gmbau-root .gmb-link-arrow {
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--font-display);
  font-weight: 700; font-size: var(--fs-small);
  color: var(--accent-ink);
  min-height: 44px;
}
.gmbau-root .gmb-link-arrow svg { transition: transform var(--t-hover) var(--ease-out-soft); flex: none; }
.gmbau-root .gmb-link-arrow:hover svg,
.gmbau-root .gmb-link-arrow:focus-visible svg { transform: translateX(5px); }
.gmbau-root .gmb-link-arrow__text { position: relative; }
.gmbau-root .gmb-link-arrow__text::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: currentColor;
  transform: scaleX(0); transform-origin: 100% 50%;
  transition: transform var(--t-hover) var(--ease-out-soft);
}
.gmbau-root .gmb-link-arrow:hover .gmb-link-arrow__text::after,
.gmbau-root .gmb-link-arrow:focus-visible .gmb-link-arrow__text::after { transform: scaleX(1); transform-origin: 0 50%; }
.gmbau-root .gmb-section--dark .gmb-link-arrow { color: var(--orange-400); }
/* Inline-Links auf Telefon und E-Mail: sichtbar bleibt der Text, die
   Trefferflaeche waechst ueber padding auf ein komfortables Mass. */
.gmbau-root .gmb-contact-link {
  display: inline-block;
  padding-block: 10px;
  font-weight: 600;
  border-bottom: 1px solid currentColor;
  transition: color var(--t-hover);
}
.gmbau-root .gmb-contact-link:hover { color: var(--accent-ink); }
.gmbau-root .gmb-section--dark .gmb-contact-link:hover,
.gmbau-root .gmb-site-footer .gmb-contact-link:hover { color: var(--orange-400); }
/* ==========================================================================
   07 HEADER / NAVIGATION
   ========================================================================== */
.gmbau-root .gmb-site-header {
  position: fixed; inset: 0 0 auto 0;
  z-index: var(--z-header);
  color: var(--text);
  transition:
    background-color var(--t-ui) var(--ease-out-soft),
    box-shadow var(--t-ui) var(--ease-out-soft),
    transform var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-site-header__inner {
  display: flex; align-items: center; gap: var(--s-24);
  min-height: 88px;
  transition: min-height var(--t-ui) var(--ease-out-soft);
}
/* Gescrollt: weisser Balken, kompakter */
.gmbau-root .gmb-site-header.gmb-is-scrolled {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 1px 0 var(--line), var(--shadow-sm);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  color: var(--text);
}
.gmbau-root .gmb-site-header.gmb-is-scrolled .gmb-site-header__inner { min-height: 68px; }
/* Abwaerts scrollen: Header faehrt weg und gibt Inhalt frei */
.gmbau-root .gmb-site-header.gmb-is-hidden { transform: translateY(-100%); }
/* Ueber dunklem Hero: helle Schrift, solange nicht gescrollt */
.gmbau-root .gmb-site-header.gmb-on-dark:not(.gmb-is-scrolled) { color: var(--text-on-dark); }
.gmbau-root .gmb-brand { display: inline-flex; align-items: center; gap: var(--s-12); flex: none; margin-right: auto; min-height: 48px; }
.gmbau-root .gmb-brand__logo {height: 46px !important; width: auto !important; transition: height var(--t-ui) var(--ease-out-soft) }
.gmbau-root .gmb-is-scrolled .gmb-brand__logo {height: 38px !important }
.gmbau-root .gmb-brand__text { display: flex; flex-direction: column; line-height: 1; }
.gmbau-root .gmb-brand__mark { font-family: var(--font-display); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; }
.gmbau-root .gmb-brand__mark { display: inline-flex; align-items: center; }
/* Oranges Akzentquadrat — Zitat des Logo-Details im "G" */
.gmbau-root .gmb-brand__dot {
  display: inline-block; width: .34em; height: .34em; flex: none;
  margin-inline: .14em .1em;
  background: var(--orange-500);
  transform: translateY(.02em);
}
.gmbau-root .gmb-brand__sub { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--text-muted); margin-top: 5px; }
.gmbau-root .gmb-on-dark:not(.gmb-is-scrolled) .gmb-brand__sub { color: var(--text-on-dark-muted); }
/* --- Desktop-Navigation --- */
.gmbau-root .gmb-nav { display: none; }
.gmbau-root .gmb-nav__list { display: flex; align-items: center; gap: var(--s-4); }
.gmbau-root .gmb-nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: var(--s-12) var(--s-16);
  min-height: 44px;
  font-family: var(--font-display);
  font-size: var(--fs-small); font-weight: 600;
  transition: color var(--t-hover) var(--ease-out-soft);
}
.gmbau-root .gmb-nav__link::after {
  content: ""; position: absolute; left: var(--s-16); right: var(--s-16); bottom: 12px; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform var(--t-hover) var(--ease-out-soft);
}
.gmbau-root .gmb-nav__link:hover::after,
.gmbau-root .gmb-nav__link:focus-visible::after { transform: scaleX(1); }
/* Aktuelle Seite deutlich markiert (nav-state-active) */
.gmbau-root .gmb-nav__link[aria-current="page"] { color: var(--accent-ink); }
.gmbau-root .gmb-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.gmbau-root .gmb-on-dark:not(.gmb-is-scrolled) .gmb-nav__link[aria-current="page"] { color: var(--orange-400); }
.gmbau-root .gmb-nav__chevron { transition: transform var(--t-hover) var(--ease-out-soft); }
.gmbau-root .gmb-nav__item--has-menu:hover .gmb-nav__chevron,
.gmbau-root .gmb-nav__item--has-menu:focus-within .gmb-nav__chevron { transform: rotate(180deg); }
/* --- Mega-Menue Leistungen --- */
.gmbau-root .gmb-nav__item--has-menu { position: relative; }
.gmbau-root .gmb-mega {
  position: absolute; top: calc(100% + 4px); left: 50%;
  width: min(740px, 78vw);
  transform: translate(-50%, 10px);
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: var(--s-16);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition:
    opacity var(--t-ui) var(--ease-out-soft),
    transform var(--t-ui) var(--ease-out-soft),
    visibility 0s linear var(--t-ui);
}
.gmbau-root .gmb-nav__item--has-menu:hover .gmb-mega,
.gmbau-root .gmb-nav__item--has-menu:focus-within .gmb-mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
.gmbau-root .gmb-mega__item {
  display: block; padding: var(--s-16);
  border-radius: var(--radius);
  transition: background-color var(--t-hover) var(--ease-out-soft);
}
.gmbau-root .gmb-mega__item:hover,
.gmbau-root .gmb-mega__item:focus-visible { background: var(--steel-50); }
.gmbau-root .gmb-mega__num {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 800;
  letter-spacing: .12em; color: var(--accent-ink); display: block; margin-bottom: var(--s-8);
}
.gmbau-root .gmb-mega__title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; display: block; margin-bottom: 6px; }
.gmbau-root .gmb-mega__desc { font-size: var(--fs-small); color: var(--text-muted); line-height: 1.5; }
/* --- Header-Aktionen --- */
.gmbau-root .gmb-header-actions { display: none; align-items: center; gap: var(--s-16); flex: none; }
.gmbau-root .gmb-header-phone {
  display: inline-flex; align-items: center; gap: var(--s-8);
  min-height: 44px; padding-inline: var(--s-8);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-small);
  transition: color var(--t-hover);
}
.gmbau-root .gmb-header-phone:hover { color: var(--accent-ink); }
.gmbau-root .gmb-on-dark:not(.gmb-is-scrolled) .gmb-header-phone:hover { color: var(--orange-400); }
.gmbau-root .gmb-header-actions .gmb-btn { min-height: 46px; padding: var(--s-12) var(--s-24); }
/* --- Burger --- */
.gmbau-root .gmb-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 48px; height: 48px; flex: none; margin-left: auto;
  padding: 12px;
  touch-action: manipulation;
}
.gmbau-root .gmb-burger__bar {
  display: block; height: 2px; width: 100%; background: currentColor;
  transition: transform var(--t-ui) var(--ease-editorial), opacity var(--t-fast) linear;
}
.gmbau-root .gmb-burger[aria-expanded="true"] .gmb-burger__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.gmbau-root .gmb-burger[aria-expanded="true"] .gmb-burger__bar:nth-child(2) { opacity: 0; }
.gmbau-root .gmb-burger[aria-expanded="true"] .gmb-burger__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* --- Mobile-Menue --- */
.gmbau-root .gmb-menu-backdrop {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: rgba(12, 21, 36, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-ui) var(--ease-out-soft), visibility 0s linear var(--t-ui);
}
.gmbau-root .gmb-menu-backdrop.gmb-is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.gmbau-root .gmb-mobile-menu {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-menu) + 1);
  width: min(440px, 92vw);
  background: var(--navy-900); color: var(--text-on-dark);
  display: flex; flex-direction: column;
  padding: var(--s-24) var(--s-32) var(--s-40);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--t-ui) var(--ease-editorial);
}
.gmbau-root .gmb-mobile-menu.gmb-is-open { transform: none; }
.gmbau-root .gmb-mobile-menu__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-16); margin-bottom: var(--s-24); }
.gmbau-root .gmb-mobile-menu__close {
  width: 48px; height: 48px; display: grid; place-items: center;
  border: 1px solid var(--line-dark-strong); border-radius: var(--radius);
  transition: background-color var(--t-hover);
}
.gmbau-root .gmb-mobile-menu__close:hover { background: rgba(255,255,255,.08); }
.gmbau-root .gmb-mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-16);
  padding: var(--s-16) 0; min-height: 56px;
  font-family: var(--font-display); font-size: 1.28rem; font-weight: 700;
  border-bottom: 1px solid var(--line-dark);
  /* Gestaffelter Einflug beim Oeffnen */
  opacity: 0; transform: translateX(28px);
  transition:
    opacity var(--t-ui) var(--ease-out-soft),
    transform var(--t-ui) var(--ease-out-soft),
    color var(--t-hover);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.gmbau-root .gmb-mobile-menu.gmb-is-open .gmb-mobile-nav__link { opacity: 1; transform: none; }
.gmbau-root .gmb-mobile-nav__link:hover,
.gmbau-root .gmb-mobile-nav__link[aria-current="page"] { color: var(--orange-400); }
.gmbau-root .gmb-mobile-nav__sub { padding-left: var(--s-16); }
.gmbau-root .gmb-mobile-nav__sub .gmb-mobile-nav__link { font-size: 1rem; font-weight: 600; min-height: 48px; color: var(--text-on-dark-muted); }
.gmbau-root .gmb-mobile-nav__sub .gmb-mobile-nav__link:hover { color: var(--orange-400); }
.gmbau-root .gmb-mobile-menu__foot { margin-top: auto; padding-top: var(--s-32); display: grid; gap: var(--s-12); }
/* ==========================================================================
   08 HERO
   ========================================================================== */
.gmbau-root .gmb-hero {
  position: relative; isolation: isolate;
  min-height: min(96svh, 900px);
  display: flex; align-items: flex-end;
  padding-top: 140px; padding-bottom: clamp(48px, 7vw, 96px);
  background: var(--navy-900); color: var(--text-on-dark);
  overflow: hidden;
}
.gmbau-root .gmb-hero__bg { position: absolute; inset: -8% 0; z-index: -2; }
.gmbau-root .gmb-hero__bg > * { width: 100%; height: 100%; object-fit: cover; }
/* Verlauf sichert Textkontrast auf jedem Motiv */
.gmbau-root .gmb-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,21,36,.84) 0%, rgba(12,21,36,.52) 38%, rgba(12,21,36,.9) 100%),
    linear-gradient(90deg, rgba(12,21,36,.86) 0%, rgba(12,21,36,.28) 62%, rgba(12,21,36,.06) 100%);
}
.gmbau-root .gmb-hero__inner { width: 100%; position: relative; }
/* Die Zeilen der Hero-Ueberschrift sind einzelne Bloecke; eine Breiten-
   begrenzung wuerde sie zusaetzlich umbrechen. Deshalb keine max-width. */
.gmbau-root .gmb-hero__title { max-width: none; margin-top: var(--s-24); }
.gmbau-root .gmb-hero__support { max-width: 56ch; margin-top: var(--s-24); color: var(--text-on-dark-muted); font-size: var(--fs-lead); }
.gmbau-root .gmb-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--s-16); margin-top: var(--s-40); }
/* Scroll-Hinweis */
.gmbau-root .gmb-scroll-cue {
  display: none;
  position: absolute; right: 0; bottom: 4px;
  align-items: center; gap: var(--s-12);
  font-family: var(--font-display); font-size: var(--fs-label);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.gmbau-root .gmb-scroll-cue__track { width: 1px; height: 56px; background: var(--line-dark-strong); position: relative; overflow: hidden; }
.gmbau-root .gmb-scroll-cue__track::after {
  content: ""; position: absolute; inset: 0; background: var(--orange-500);
  animation: cue-run 2.1s var(--ease-editorial) infinite;
}
@keyframes cue-run {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
/* ==========================================================================
   09 USP-LEISTE
   ========================================================================== */
.gmbau-root .gmb-usp { background: var(--navy-700); color: var(--text-on-dark); position: relative; z-index: var(--z-base); }
.gmbau-root .gmb-usp__grid { display: grid; grid-template-columns: 1fr; }
.gmbau-root .gmb-usp__item {
  display: flex; align-items: flex-start; gap: var(--s-16);
  padding: var(--s-24) 0;
  border-bottom: 1px solid var(--line-dark);
}
.gmbau-root .gmb-usp__grid > .gmb-usp__item:last-child { border-bottom: 0; }
.gmbau-root .gmb-usp__icon {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 1px solid var(--line-dark-strong); border-radius: var(--radius);
  color: var(--orange-400);
  transition: background-color var(--t-hover) var(--ease-out-soft), border-color var(--t-hover);
}
.gmbau-root .gmb-usp__item:hover .gmb-usp__icon { background: rgba(255,255,255,.07); border-color: var(--orange-400); }
/* Icon-Strichzeichnung laeuft beim Reveal ein */
.gmbau-root .gmb-usp__icon svg * {
  stroke-dasharray: 96; stroke-dashoffset: 96;
  transition: stroke-dashoffset 900ms var(--ease-out-soft);
  transition-delay: calc(var(--i, 0) * 90ms + 140ms);
}
.gmbau-root .gmb-usp__item.gmb-is-in .gmb-usp__icon svg * { stroke-dashoffset: 0; }
.gmbau-root .gmb-usp__title {font-family: var(--font-display) !important; font-weight: 800 !important; font-size: var(--fs-label) !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--white) !important }
.gmbau-root .gmb-usp__text { font-size: var(--fs-small); color: var(--text-on-dark-muted); margin-top: 6px; line-height: 1.5; }
/* ==========================================================================
   10 INTRO
   ========================================================================== */
.gmbau-root .gmb-intro__grid { display: grid; gap: var(--s-48); align-items: start; }
.gmbau-root .gmb-intro__media { position: relative; isolation: isolate; }
.gmbau-root .gmb-intro__media .gmb-media-mask { aspect-ratio: 4 / 5; }
/* Oranger Akzentblock hinter dem Bild */
.gmbau-root .gmb-intro__accent { position: absolute; right: -14px; bottom: -14px; width: 46%; aspect-ratio: 1; z-index: -1; background: var(--orange-500); }
.gmbau-root .gmb-intro__facts { display: grid; gap: var(--s-24); margin-top: var(--s-32); }
.gmbau-root .gmb-intro__fact { padding-left: var(--s-24); border-left: 3px solid var(--accent); }
.gmbau-root .gmb-intro__fact-title {font-family: var(--font-display) !important; font-weight: 700 !important; font-size: var(--fs-h4) !important }
.gmbau-root .gmb-intro__fact-text { color: var(--text-muted); font-size: var(--fs-small); margin-top: 6px; }
/* ==========================================================================
   11 LEISTUNGEN (KARTEN)
   ========================================================================== */
.gmbau-root .gmb-services__grid { display: grid; gap: var(--s-32); margin-top: var(--s-64); }
.gmbau-root .gmb-service-card {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition:
    transform var(--t-ui) var(--ease-out-soft),
    box-shadow var(--t-ui) var(--ease-out-soft),
    border-color var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-service-card:hover,
.gmbau-root .gmb-service-card:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.gmbau-root .gmb-service-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel-100); }
.gmbau-root .gmb-service-card__media > img,
.gmbau-root .gmb-service-card__media > .gmb-ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 900ms var(--ease-out-soft);
}
.gmbau-root .gmb-service-card:hover .gmb-service-card__media > img,
.gmbau-root .gmb-service-card:hover .gmb-service-card__media > .gmb-ph { transform: scale(1.07); }
.gmbau-root .gmb-service-card__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(12,21,36,0) 45%, rgba(12,21,36,.55) 100%);
}
.gmbau-root .gmb-service-card__num {
  position: absolute; left: var(--s-24); top: var(--s-24); z-index: 2;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-label);
  letter-spacing: .16em; color: var(--white);
  padding: 6px 10px; background: rgba(12,21,36,.62); border-radius: var(--radius-sm);
}
.gmbau-root .gmb-service-card__body { padding: var(--s-32); display: flex; flex-direction: column; flex: 1; gap: var(--s-16); }
.gmbau-root .gmb-service-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); letter-spacing: -.015em; }
.gmbau-root .gmb-service-card__text { color: var(--text-muted); font-size: var(--fs-small); }
.gmbau-root .gmb-service-card__list { display: grid; gap: var(--s-8); }
.gmbau-root .gmb-service-card__list li { position: relative; padding-left: var(--s-24); font-size: var(--fs-small); color: var(--text-muted); }
.gmbau-root .gmb-service-card__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); }
.gmbau-root .gmb-service-card__foot { margin-top: auto; padding-top: var(--s-8); }
/* Ganze Karte klickbar, ohne Semantik zu brechen */
.gmbau-root .gmb-service-card__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
/* Orange Kante links, faehrt beim Hover hoch */
.gmbau-root .gmb-service-card::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 3px; height: 100%; z-index: 4;
  background: var(--accent); transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform var(--t-ui) var(--ease-editorial);
}
.gmbau-root .gmb-service-card:hover::after,
.gmbau-root .gmb-service-card:focus-within::after { transform: scaleY(1); }
/* ==========================================================================
   12 ABLAUF / PROZESS
   ========================================================================== */
.gmbau-root .gmb-process__grid { display: grid; gap: var(--s-40); margin-top: var(--s-64); }
.gmbau-root .gmb-process__step { position: relative; padding-top: var(--s-32); }
/* Grundlinie + orange Linie, die beim Scrollen einlaeuft */
.gmbau-root .gmb-process__step::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: rgba(255,255,255,.16); }
.gmbau-root .gmb-process__step::after {
  content: ""; position: absolute; top: 0; left: 0; height: 2px; width: 100%;
  background: var(--accent);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 780ms var(--ease-editorial);
  transition-delay: calc(var(--i, 0) * 140ms);
}
.gmbau-root .gmb-process__step.gmb-is-in::after { transform: scaleX(1); }
.gmbau-root .gmb-process__num {font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(2.4rem, 4.4vw, 3.6rem) !important; line-height: 1 !important; color: var(--orange-400) !important; letter-spacing: -.04em !important; font-variant-numeric: tabular-nums !important }
.gmbau-root .gmb-process__title {font-family: var(--font-display) !important; font-weight: 700 !important; font-size: var(--fs-h4) !important; margin-top: var(--s-16) !important }
.gmbau-root .gmb-process__text { color: var(--text-on-dark-muted); font-size: var(--fs-small); margin-top: var(--s-8); }
/* Variante auf hellem Grund */
.gmbau-root .gmb-section--soft .gmb-process__step::before { background: var(--line); }
.gmbau-root .gmb-section--soft .gmb-process__num {color: var(--accent-ink) !important }
.gmbau-root .gmb-section--soft .gmb-process__text { color: var(--text-muted); }
/* ==========================================================================
   13 WARUM GM BAU
   ========================================================================== */
.gmbau-root .gmb-why__grid { display: grid; gap: var(--s-24); margin-top: var(--s-64); }
.gmbau-root .gmb-why__card {
  padding: var(--s-32);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  transition: transform var(--t-ui) var(--ease-out-soft), box-shadow var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-why__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.gmbau-root .gmb-why__icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--orange-100); color: var(--orange-600);
  border-radius: var(--radius); margin-bottom: var(--s-24);
}
.gmbau-root .gmb-why__title { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-h4); }
.gmbau-root .gmb-why__text { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--s-8); }
/* ==========================================================================
   14 PROJEKTE
   ========================================================================== */
.gmbau-root .gmb-projects__grid { display: grid; gap: var(--s-32); margin-top: var(--s-48); }
.gmbau-root .gmb-project-card { position: relative; display: block; overflow: hidden; border-radius: var(--radius-lg); background: var(--navy-900); }
.gmbau-root .gmb-project-card__media { aspect-ratio: 4 / 3; overflow: hidden; }
.gmbau-root .gmb-project-card__media > img,
.gmbau-root .gmb-project-card__media > .gmb-ph {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1000ms var(--ease-out-soft);
}
.gmbau-root .gmb-project-card:hover .gmb-project-card__media > img,
.gmbau-root .gmb-project-card:hover .gmb-project-card__media > .gmb-ph { transform: scale(1.06); }
.gmbau-root .gmb-project-card__overlay {
  position: absolute; inset: auto 0 0 0;
  padding: var(--s-32);
  color: var(--text-on-dark);
  background: linear-gradient(180deg, rgba(12,21,36,0) 0%, rgba(12,21,36,.88) 62%);
}
.gmbau-root .gmb-project-card__cat {
  display: inline-block; font-family: var(--font-display); font-size: var(--fs-label);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange-400); margin-bottom: var(--s-8);
}
.gmbau-root .gmb-project-card__title {font-family: var(--font-display) !important; font-weight: 800 !important; font-size: var(--fs-h3) !important }
.gmbau-root .gmb-project-card__meta { font-size: var(--fs-small); color: var(--text-on-dark-muted); margin-top: 6px; }
.gmbau-root .gmb-project-card__desc {
  font-size: var(--fs-small); color: var(--text-on-dark-muted);
  max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height var(--t-ui) var(--ease-out-soft), opacity var(--t-ui) var(--ease-out-soft), margin-top var(--t-ui);
}
.gmbau-root .gmb-project-card:hover .gmb-project-card__desc,
.gmbau-root .gmb-project-card:focus-within .gmb-project-card__desc { max-height: 9rem; opacity: 1; margin-top: var(--s-12); }
/* Filter-Chips */
.gmbau-root .gmb-filters { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-32); }
.gmbau-root .gmb-filter-chip {
  min-height: 44px; padding: var(--s-8) var(--s-24);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-small);
  transition: background-color var(--t-hover), color var(--t-hover), border-color var(--t-hover);
  touch-action: manipulation;
}
.gmbau-root .gmb-filter-chip:hover { border-color: var(--navy-700); }
.gmbau-root .gmb-filter-chip[aria-pressed="true"] { background: var(--navy-700); color: var(--white); border-color: var(--navy-700); }
.gmbau-root .gmb-project-item[hidden] { display: none; }
/* ==========================================================================
   15 CTA-BAND
   ========================================================================== */
.gmbau-root .gmb-cta-band { position: relative; isolation: isolate; overflow: hidden; background: var(--navy-800); color: var(--text-on-dark); }
.gmbau-root .gmb-cta-band__bg { position: absolute; inset: -10% 0; z-index: -2; opacity: .3; }
.gmbau-root .gmb-cta-band__bg > * { width: 100%; height: 100%; object-fit: cover; }
.gmbau-root .gmb-cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(120deg, rgba(18,32,58,.96) 0%, rgba(18,32,58,.74) 55%, rgba(26,46,82,.62) 100%);
}
.gmbau-root .gmb-cta-band__inner { display: grid; gap: var(--s-40); align-items: center; }
.gmbau-root .gmb-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--s-16); }
/* ==========================================================================
   16 KONTAKT & FORMULAR
   ========================================================================== */
.gmbau-root .gmb-contact__grid { display: grid; gap: var(--s-48); align-items: start; }
.gmbau-root .gmb-contact-details { display: grid; gap: var(--s-32); }
.gmbau-root .gmb-contact-block__label {
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted);
  margin-bottom: var(--s-8);
}
.gmbau-root .gmb-section--dark .gmb-contact-block__label { color: var(--text-on-dark-muted); }
.gmbau-root .gmb-contact-block address { font-style: normal; line-height: 1.7; }
.gmbau-root .gmb-contact-block__value {font-family: var(--font-display) !important; font-weight: 700 !important; font-size: var(--fs-h4) !important }
/* Formular */
.gmbau-root .gmb-form { display: grid; gap: var(--s-24); }
.gmbau-root .gmb-form__row { display: grid; gap: var(--s-24); }
.gmbau-root .gmb-field { display: flex; flex-direction: column; gap: var(--s-8); }
.gmbau-root .gmb-field__label { font-weight: 600; font-size: var(--fs-small); }
.gmbau-root .gmb-field__req { color: var(--orange-600); margin-left: 2px; }
.gmbau-root .gmb-field__hint { font-size: .8125rem; color: var(--text-muted); }
.gmbau-root .gmb-field__control {
  min-height: 52px;                  /* Touch-Ziel + kein iOS-Auto-Zoom */
  padding: var(--s-12) var(--s-16);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  color: var(--text);
  transition: border-color var(--t-hover), box-shadow var(--t-hover);
}
.gmbau-root textarea.gmb-field__control { min-height: 148px; resize: vertical; line-height: 1.6; }
.gmbau-root .gmb-field__control::placeholder { color: #77808C; }
.gmbau-root .gmb-field__control:hover { border-color: var(--anthracite-500); }
.gmbau-root .gmb-field__control:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(26,46,82,.16); }
.gmbau-root .gmb-field__control:focus-visible { outline: 3px solid var(--orange-500); outline-offset: 2px; }
/* Fehler: Farbe + Icon + Text, nie Farbe allein */
.gmbau-root .gmb-field.gmb-has-error .gmb-field__control { border-color: #B3261E; box-shadow: 0 0 0 3px rgba(179,38,30,.14); }
.gmbau-root .gmb-field__error { display: none; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600; color: #8C1D18; }
.gmbau-root .gmb-field.gmb-has-error .gmb-field__error { display: flex; }
.gmbau-root .gmb-consent { display: flex; align-items: flex-start; gap: var(--s-12); }
.gmbau-root .gmb-consent input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; flex: none; accent-color: var(--navy-700); }
.gmbau-root .gmb-consent label { font-size: .875rem; color: var(--text-muted); line-height: 1.55; }
.gmbau-root .gmb-consent a { color: var(--accent-ink); border-bottom: 1px solid currentColor; }
.gmbau-root .gmb-form__status {
  display: none; gap: var(--s-12); align-items: flex-start;
  padding: var(--s-16); border-radius: var(--radius);
  font-size: var(--fs-small); font-weight: 600;
}
.gmbau-root .gmb-form__status.gmb-is-visible { display: flex; }
.gmbau-root .gmb-form__status--error { background: #FCEEEC; color: #8C1D18; border: 1px solid #F2C4BF; }
.gmbau-root .gmb-form__status--ok { background: #E9F5EC; color: #1B5E2A; border: 1px solid #BEE0C6; }
/* ==========================================================================
   17 FOOTER
   ========================================================================== */
.gmbau-root .gmb-site-footer { background: var(--navy-900); color: var(--text-on-dark); padding-top: clamp(56px, 7vw, 96px); }
.gmbau-root .gmb-footer__grid { display: grid; gap: var(--s-40); padding-bottom: var(--s-48); }
.gmbau-root .gmb-footer__brand-text { color: var(--text-on-dark-muted); font-size: var(--fs-small); margin-top: var(--s-16); max-width: 40ch; }
.gmbau-root .gmb-footer__title {font-family: var(--font-display) !important; font-size: var(--fs-label) !important; font-weight: 700 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--white) !important; margin-bottom: var(--s-16) !important }
.gmbau-root .gmb-footer__list { display: grid; gap: var(--s-12); }
.gmbau-root .gmb-footer__list a,
.gmbau-root .gmb-footer__list span,
.gmbau-root .gmb-footer__list address { color: var(--text-on-dark-muted); font-size: var(--fs-small); font-style: normal; }
.gmbau-root .gmb-footer__list a { display: inline-flex; align-items: center; min-height: 44px; transition: color var(--t-hover), transform var(--t-hover); }
.gmbau-root .gmb-footer__list a:hover { color: var(--orange-400); transform: translateX(3px); }
.gmbau-root .gmb-footer__bar {
  display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-24);
  align-items: center; justify-content: space-between;
  padding-block: var(--s-24);
  border-top: 1px solid var(--line-dark);
  font-size: .8125rem; color: var(--text-on-dark-muted);
}
.gmbau-root .gmb-footer__legal { display: flex; flex-wrap: wrap; gap: var(--s-24); }
.gmbau-root .gmb-footer__legal a,
.gmbau-root .gmb-footer__legal button {
  min-height: 44px; display: inline-flex; align-items: center;
  font-size: .8125rem; color: var(--text-on-dark-muted);
  transition: color var(--t-hover);
}
.gmbau-root .gmb-footer__legal a:hover,
.gmbau-root .gmb-footer__legal button:hover { color: var(--orange-400); }
/* Zurueck nach oben */
.gmbau-root .gmb-to-top {
  position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  z-index: var(--z-sticky);
  width: 52px; height: 52px; display: grid; place-items: center;
  background: var(--navy-700); color: var(--white);
  border-radius: var(--radius); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition:
    opacity var(--t-ui) var(--ease-out-soft), transform var(--t-ui) var(--ease-out-soft),
    visibility 0s linear var(--t-ui), background-color var(--t-hover);
}
.gmbau-root .gmb-to-top.gmb-is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gmbau-root .gmb-to-top:hover { background: var(--orange-500); color: var(--on-accent); }
/* ==========================================================================
   18 UNTERSEITEN
   ========================================================================== */
.gmbau-root .gmb-page-hero {
  position: relative; isolation: isolate;
  padding-top: clamp(140px, 17vw, 210px); padding-bottom: clamp(48px, 7vw, 88px);
  background: var(--navy-900); color: var(--text-on-dark); overflow: hidden;
}
.gmbau-root .gmb-page-hero__bg { position: absolute; inset: -8% 0; z-index: -2; opacity: .45; }
.gmbau-root .gmb-page-hero__bg > * { width: 100%; height: 100%; object-fit: cover; }
.gmbau-root .gmb-page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(12,21,36,.9) 0%, rgba(12,21,36,.66) 60%, rgba(12,21,36,.94) 100%);
}
.gmbau-root .gmb-page-hero__title { max-width: 20ch; margin-top: var(--s-24); }
.gmbau-root .gmb-page-hero__lead { margin-top: var(--s-24); max-width: 60ch; color: var(--text-on-dark-muted); font-size: var(--fs-lead); }
.gmbau-root .gmb-breadcrumb { font-size: .8125rem; color: var(--text-on-dark-muted); }
.gmbau-root .gmb-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8); }
.gmbau-root .gmb-breadcrumb li { display: flex; align-items: center; gap: var(--s-8); }
.gmbau-root .gmb-breadcrumb li + li::before { content: "/"; color: rgba(255,255,255,.35); }
/* Brotkrumen sind Navigation: volle Trefferflaeche, auch wenn der Text
   optisch klein bleibt. */
.gmbau-root .gmb-breadcrumb a {
  display: inline-flex; align-items: center; min-height: 44px;
  transition: color var(--t-hover);
}
.gmbau-root .gmb-breadcrumb a:hover { color: var(--orange-400); }
.gmbau-root .gmb-breadcrumb [aria-current="page"] { color: var(--white); }
/* Zweispaltiger Detailinhalt */
.gmbau-root .gmb-detail__grid { display: grid; gap: var(--s-48); align-items: start; }
.gmbau-root .gmb-detail__body h2 { margin-top: var(--s-48); }
.gmbau-root .gmb-detail__body > h2:first-child { margin-top: 0; }
.gmbau-root .gmb-detail__body h3 { margin-top: var(--s-32); }
.gmbau-root .gmb-detail__body p { margin-top: var(--s-16); color: var(--text-muted); max-width: 68ch; }
.gmbau-root .gmb-detail__body ul { margin-top: var(--s-16); display: grid; gap: var(--s-12); }
.gmbau-root .gmb-detail__body ul li { position: relative; padding-left: var(--s-32); color: var(--text-muted); }
.gmbau-root .gmb-detail__body ul li::before { content: ""; position: absolute; left: 0; top: .58em; width: 14px; height: 2px; background: var(--accent); }
.gmbau-root .gmb-detail__media { margin-top: var(--s-48); }
.gmbau-root .gmb-detail__media .gmb-media-mask { aspect-ratio: 16 / 9; border-radius: var(--radius-lg); }
/* Sticky Seitenspalte */
.gmbau-root .gmb-detail__aside { display: grid; gap: var(--s-24); }
.gmbau-root .gmb-aside-card { padding: var(--s-32); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-soft); }
.gmbau-root .gmb-aside-card--dark { background: var(--navy-900); color: var(--text-on-dark); border-color: transparent; }
.gmbau-root .gmb-aside-card--dark .gmb-aside-card__text { color: var(--text-on-dark-muted); }
.gmbau-root .gmb-aside-card__title {font-family: var(--font-display) !important; font-weight: 700 !important; font-size: var(--fs-h4) !important }
.gmbau-root .gmb-aside-card__text { color: var(--text-muted); font-size: var(--fs-small); margin-top: var(--s-12); }
.gmbau-root .gmb-aside-card .gmb-btn { margin-top: var(--s-24); }
.gmbau-root .gmb-aside-nav { display: grid; gap: var(--s-4); }
.gmbau-root .gmb-aside-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-12);
  min-height: 48px; padding: var(--s-12) var(--s-16);
  border-radius: var(--radius); font-weight: 600; font-size: var(--fs-small);
  transition: background-color var(--t-hover), color var(--t-hover);
}
.gmbau-root .gmb-aside-nav a:hover { background: var(--steel-100); }
.gmbau-root .gmb-aside-nav a[aria-current="page"] { background: var(--navy-700); color: var(--white); }
/* Rechtstexte */
.gmbau-root .gmb-legal { max-width: 80ch; }
.gmbau-root .gmb-legal h2 { margin-top: var(--s-48); font-size: var(--fs-h3); font-family: var(--font-display); font-weight: 700; }
.gmbau-root .gmb-legal h3 { margin-top: var(--s-32); font-size: var(--fs-h4); font-family: var(--font-display); font-weight: 700; }
.gmbau-root .gmb-legal p,
.gmbau-root .gmb-legal li { color: var(--text-muted); }
.gmbau-root .gmb-legal p { margin-top: var(--s-16); }
.gmbau-root .gmb-legal ul { margin-top: var(--s-16); display: grid; gap: var(--s-8); padding-left: var(--s-24) !important; list-style: disc !important; }
.gmbau-root .gmb-legal address { font-style: normal; margin-top: var(--s-16); line-height: 1.8; color: var(--text-muted); }
.gmbau-root .gmb-notice {
  margin-top: var(--s-24); padding: var(--s-24);
  background: var(--orange-100); border-left: 3px solid var(--orange-500);
  border-radius: var(--radius); color: var(--anthracite-900); font-size: var(--fs-small);
}
.gmbau-root .gmb-notice strong { color: var(--anthracite-900); }
/* ==========================================================================
   19 PLATZHALTER-MEDIEN
   Bewusst gestaltete technische Blaupausen-Flaeche in Markenfarben.
   Wird 1:1 durch <img> ersetzt, sobald echte Fotos vorliegen.
   ========================================================================== */
.gmbau-root .gmb-ph {
  position: relative; width: 100%; height: 100%;
  background-color: var(--navy-800);
  background-image:
    repeating-linear-gradient(135deg, rgba(255,255,255,.045) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--navy-700) 0%, var(--navy-900) 58%, var(--anthracite-900) 100%);
  display: grid; place-items: center;
  overflow: hidden;
}
/* Feines Konstruktionsraster */
.gmbau-root .gmb-ph::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
/* Oranger Eckwinkel — Erkennungszeichen der Platzhalter */
.gmbau-root .gmb-ph::after {
  content: ""; position: absolute; right: 18px; bottom: 18px;
  width: 34px; height: 34px;
  border-right: 3px solid var(--orange-500);
  border-bottom: 3px solid var(--orange-500);
}
.gmbau-root .gmb-ph__label {
  position: relative; z-index: 1; text-align: center;
  font-family: var(--font-display); font-size: var(--fs-label); font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
  padding: var(--s-16); max-width: 26ch; line-height: 1.8;
}
.gmbau-root .gmb-ph--light {
  background-color: var(--steel-100);
  background-image:
    repeating-linear-gradient(135deg, rgba(26,46,82,.05) 0 2px, transparent 2px 11px),
    linear-gradient(160deg, var(--steel-100) 0%, var(--steel-200) 100%);
}
.gmbau-root .gmb-ph--light::before {
  background-image:
    linear-gradient(to right, rgba(26,46,82,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(26,46,82,.06) 1px, transparent 1px);
}
.gmbau-root .gmb-ph--light .gmb-ph__label { color: rgba(20,25,33,.48); }
/* In Projektkarten sitzt unten die Beschriftung: Platzhaltertext nach oben
   ruecken, damit er nicht mit dem Overlay kollidiert. */
.gmbau-root .gmb-project-card__media .gmb-ph { align-content: start; }
.gmbau-root .gmb-project-card__media .gmb-ph__label { padding-top: var(--s-32); }
/* ==========================================================================
   20 RESPONSIVE — Mobile First: 640 / 900 / 1100 / 1440
   ========================================================================== */
@media (min-width: 640px) {
.gmbau-root .gmb-usp__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-32); }
.gmbau-root .gmb-usp__grid > .gmb-usp__item:nth-last-child(-n+2) { border-bottom: 0; }
.gmbau-root .gmb-why__grid { grid-template-columns: repeat(2, 1fr); }
.gmbau-root .gmb-form__row--2 { grid-template-columns: repeat(2, 1fr); }
.gmbau-root .gmb-projects__grid { grid-template-columns: repeat(2, 1fr); }
.gmbau-root .gmb-process__grid { grid-template-columns: repeat(2, 1fr); column-gap: var(--s-32); }
}
@media (min-width: 900px) {
.gmbau-root .gmb-services__grid { grid-template-columns: repeat(3, 1fr); }
.gmbau-root .gmb-intro__grid { grid-template-columns: 1fr 1fr; gap: var(--s-64); align-items: center; }
.gmbau-root .gmb-detail__grid { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-64); }
.gmbau-root .gmb-detail__aside { position: sticky; top: 110px; }
.gmbau-root .gmb-contact__grid { grid-template-columns: 1fr 1.15fr; gap: var(--s-64); }
.gmbau-root .gmb-cta-band__inner { grid-template-columns: 1.4fr auto; gap: var(--s-64); }
.gmbau-root .gmb-footer__grid { grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: var(--s-48); }
.gmbau-root .gmb-scroll-cue { display: flex; }
}
@media (min-width: 1100px) {
.gmbau-root .gmb-burger { display: none; }
.gmbau-root .gmb-nav { display: block; }
.gmbau-root .gmb-header-actions { display: flex; }
.gmbau-root .gmb-process__grid { grid-template-columns: repeat(4, 1fr); }
.gmbau-root .gmb-usp__grid { grid-template-columns: repeat(4, 1fr); }
.gmbau-root .gmb-usp__grid > .gmb-usp__item { border-bottom: 0; }
.gmbau-root .gmb-why__grid { grid-template-columns: repeat(4, 1fr); }
.gmbau-root .gmb-projects__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1440px) {
.gmbau-root { --section-y: clamp(96px, 8vw, 160px); }
}
/* Kurze Viewports / Handy im Querformat */
@media (max-height: 620px) and (orientation: landscape) {
.gmbau-root .gmb-hero { min-height: auto; padding-top: 120px; }
.gmbau-root .gmb-scroll-cue { display: none; }
}
/* ==========================================================================
   21 REDUCED MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
.gmbau-root { scroll-behavior: auto; }
.gmbau-root *,
.gmbau-root *::before,
.gmbau-root *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
/* Inhalte sofort sichtbar — nie hinter einer stillgelegten Animation verstecken */
.gmbau-root [data-reveal] { opacity: 1 !important; transform: none !important; }
.gmbau-root .gmb-reveal-lines .gmb-line > span { transform: none !important; }
.gmbau-root .gmb-media-mask::after { transform: scaleY(0) !important; }
.gmbau-root .media-mask > img,
.gmbau-root .media-mask > .ph,
.gmbau-root .gmb-media-mask > video { transform: none !important; }
.gmbau-root .gmb-process__step::after { transform: scaleX(1) !important; }
.gmbau-root .gmb-usp__icon svg * { stroke-dashoffset: 0 !important; }
.gmbau-root .gmb-mobile-nav__link { opacity: 1 !important; transform: none !important; }
.gmbau-root [data-parallax] > * { transform: none !important; }
.gmbau-root .gmb-scroll-cue__track::after { animation: none; }
}
@media print {
.gmbau-root .site-header,
.gmbau-root .mobile-menu,
.gmbau-root .menu-backdrop,
.gmbau-root .to-top,
.gmbau-root .scroll-progress,
.gmbau-root .scroll-cue,
.gmbau-root .hero__bg,
.gmbau-root .cta-band__bg,
.gmbau-root .gmb-page-hero__bg { display: none !important; }
.gmbau-root { color: #000; background: #fff; }
.gmbau-root .section--dark,
.gmbau-root .hero,
.gmbau-root .page-hero,
.gmbau-root .site-footer,
.gmbau-root .usp,
.gmbau-root .gmb-cta-band { background: #fff !important; color: #000 !important; }
.gmbau-root .section--dark h1,
.gmbau-root .section--dark h2,
.gmbau-root .section--dark h3,
.gmbau-root .hero h1,
.gmbau-root .gmb-page-hero h1 { color: #000 !important; }
.gmbau-root a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
.gmbau-root .gmb-section { padding-block: 24px; }
}
/* ==========================================================================
   22 EDITORIALE EBENE
   Umsetzung der Referenz (Apex Roadster / Toyokoh-Stil):
   Wechsel heller und dunkler Sektionen, ueberdimensionierte Versalzeilen,
   technische ( ABSCHNITT )-Marken, eigener Cursor, klebende Splitkarten.
   ========================================================================== */
/* --- 22.1 Technisches Abschnittslabel: ( LEISTUNGEN ) --- */
.gmbau-root .gmb-tag {display: inline-block !important; font-family: var(--font-mono) !important; font-size: .7rem !important; font-weight: 500 !important; letter-spacing: .18em !important; text-transform: uppercase !important; color: var(--text-muted) !important }
.gmbau-root .gmb-tag::before {content: "( " !important }
.gmbau-root .gmb-tag::after {content: " )" !important }
.gmbau-root .gmb-section--dark .gmb-tag,
.gmbau-root .gmb-hero .gmb-tag,
.gmbau-root .gmb-page-hero .gmb-tag {color: var(--text-on-dark-muted) !important }
.gmbau-root .gmb-tag--accent {color: var(--accent-ink) !important }
.gmbau-root .gmb-section--dark .gmb-tag--accent,
.gmbau-root .gmb-hero .gmb-tag--accent {color: var(--orange-400) !important }
/* Klebendes Label in der linken Spalte langer Sektionen */
.gmbau-root .gmb-tag--sticky {position: sticky !important; top: 104px !important; z-index: 2 !important }
/* --- 22.2 Ueberdimensionierte Versalzeilen --- */
.gmbau-root .gmb-mega-type {font-family: var(--font-display) !important; overflow-wrap: break-word !important; font-size: var(--fs-mega) !important; font-weight: 800 !important; line-height: .92 !important; letter-spacing: -.035em !important; text-transform: uppercase !important; text-wrap: balance !important }
/* Konturschrift fuer den Wechsel voll/hohl in der Kontaktueberschrift */
.gmbau-root .gmb-ghost-word {
  color: transparent;
  -webkit-text-stroke: 1.5px currentColor;
}
/* --- 22.3 Eigener Cursor
   Duenner Ring plus Punkt, Differenzmodus, laeuft verzoegert nach.
   Nur auf Zeigegeraeten; auf Touch komplett aus. --- */
.gmbau-root .gmb-cursor {
  position: fixed; top: 0; left: 0;
  z-index: 9999;
  pointer-events: none;
  mix-blend-mode: difference;
  display: none;
}
.gmbau-root .gmb-cursor__ring {
  position: absolute; top: 0; left: 0; will-change: transform;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: grid; place-items: center;
  transition: width .32s var(--ease-out-soft), height .32s var(--ease-out-soft),
              margin .32s var(--ease-out-soft);
}
.gmbau-root .gmb-cursor__dot {
  position: absolute; top: 0; left: 0; will-change: transform;
  width: 4px; height: 4px; margin: -2px 0 0 -2px;
  background: #fff; border-radius: 50%;
  transition: opacity .2s var(--ease-out-soft);
}
.gmbau-root .gmb-cursor__label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  opacity: 0; transition: opacity .2s var(--ease-out-soft);
  white-space: nowrap;
}
/* Ueber interaktiven Flaechen waechst der Ring und zeigt ein Label */
.gmbau-root .gmb-cursor.gmb-is-active .gmb-cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; }
.gmbau-root .gmb-cursor.gmb-is-active .gmb-cursor__label { opacity: 1; }
.gmbau-root .gmb-cursor.gmb-is-active .gmb-cursor__dot { opacity: 0; }
/* Nur bei echter Maussteuerung einblenden */
@media (hover: hover) and (pointer: fine) {
html[data-cursor="on"] .gmbau-root .gmb-cursor { display: block; }
}
/* --- 22.4 Vorhang zwischen hellen und dunklen Sektionen --- */
.gmbau-root .gmb-curtain { position: relative; height: 0; z-index: 3; }
.gmbau-root .gmb-curtain__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 40vh;
  transform: scaleY(0); transform-origin: 50% 100%;
  transition: transform 900ms var(--ease-editorial);
  pointer-events: none;
}
.gmbau-root .gmb-curtain.gmb-is-in .gmb-curtain__panel { transform: scaleY(1); }
/* --- 22.5 Hero mit Video --- */
.gmbau-root .gmb-hero__video,
.gmbau-root .gmb-hero__poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.gmbau-root .gmb-hero__poster { z-index: 0; }
.gmbau-root .gmb-hero__video { z-index: 1; opacity: 0; transition: opacity 900ms var(--ease-out-soft); }
.gmbau-root .gmb-hero__video.gmb-is-ready { opacity: 1; }
/* Ladeanimation: Blende oeffnet sich, Motiv zoomt zurueck */
.gmbau-root .gmb-hero__bg {
  clip-path: inset(6% 5% 6% 5%);
  transform: scale(1.10);
  transition: clip-path 1500ms var(--ease-editorial), transform 1900ms var(--ease-out-soft);
}
html[data-loaded="true"] .gmbau-root .gmb-hero__bg { clip-path: inset(0 0 0 0); transform: scale(1); }
/* Kopfzeile des Heros unten verankert, wie in der Referenz */
.gmbau-root .gmb-hero__meta {
  display: flex; flex-wrap: wrap; gap: var(--s-16) var(--s-40);
  margin-top: var(--s-40);
  padding-top: var(--s-24);
  border-top: 1px solid var(--line-dark);
}
.gmbau-root .gmb-hero__meta-item {font-family: var(--font-mono) !important; font-size: .68rem !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--text-on-dark-muted) !important }
.gmbau-root .gmb-hero__meta-item strong {display: block !important; font-family: var(--font-display) !important; font-size: .95rem !important; color: var(--white) !important; letter-spacing: .02em !important; margin-top: 6px !important }
/* --- 22.6 Klebende Splitkarten (Leistungen) --- */
.gmbau-root .gmb-stack-cards { display: grid; gap: var(--s-24); }
.gmbau-root .gmb-split-card {
  position: relative;
  display: grid;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.gmbau-root .gmb-split-card__media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--steel-100); }
.gmbau-root .gmb-split-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 1200ms var(--ease-out-soft);
}
.gmbau-root .gmb-split-card.gmb-is-in .gmb-split-card__media img { transform: scale(1); }
.gmbau-root .gmb-split-card:hover .gmb-split-card__media img { transform: scale(1.04); }
.gmbau-root .gmb-split-card__body {
  padding: clamp(24px, 4vw, 56px);
  display: flex; flex-direction: column; gap: var(--s-16);
}
.gmbau-root .gmb-split-card__index {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .18em;
  color: var(--accent-ink);
}
.gmbau-root .gmb-split-card__title {font-family: var(--font-display) !important; font-weight: 800 !important; font-size: clamp(1.6rem, 3vw, 2.6rem) !important; line-height: 1.06 !important; letter-spacing: -.025em !important; text-transform: uppercase !important }
.gmbau-root .gmb-split-card__text { color: var(--text-muted); font-size: var(--fs-small); max-width: 46ch; }
.gmbau-root .gmb-split-card__list { display: grid; gap: var(--s-8); }
.gmbau-root .gmb-split-card__list li { position: relative; padding-left: var(--s-24); font-size: var(--fs-small); color: var(--text-muted); }
.gmbau-root .gmb-split-card__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: var(--accent); }
.gmbau-root .gmb-split-card__foot { margin-top: auto; padding-top: var(--s-16); }
.gmbau-root .gmb-split-card__link::before { content: ""; position: absolute; inset: 0; z-index: 3; }
/* --- 22.7 Kreisfoermige Aktion (Kontakt-CTA) --- */
.gmbau-root .gmb-circle-cta {
  position: relative;
  display: grid; place-items: center;
  width: clamp(150px, 17vw, 232px); aspect-ratio: 1;
  border-radius: 50%;
  background: var(--white); color: var(--navy-900);
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-small); letter-spacing: .08em; text-transform: uppercase;
  text-align: center; padding: var(--s-16);
  transition: background-color var(--t-ui) var(--ease-out-soft),
              color var(--t-ui) var(--ease-out-soft),
              transform var(--t-ui) var(--ease-out-soft);
  will-change: transform;
}
.gmbau-root .gmb-circle-cta:hover,
.gmbau-root .gmb-circle-cta:focus-visible { background: var(--orange-500); color: var(--on-accent); }
.gmbau-root .gmb-circle-cta__arrow { display: block; margin: 8px auto 0; transition: transform var(--t-hover) var(--ease-out-soft); }
.gmbau-root .gmb-circle-cta:hover .gmb-circle-cta__arrow { transform: translateY(3px); }
.gmbau-root .gmb-circle-ghost {
  width: clamp(64px, 7vw, 96px); aspect-ratio: 1; border-radius: 50%;
  border: 1px solid var(--line-dark-strong); flex: none;
}
/* --- 22.8 Listenzeilen (Projektliste) --- */
.gmbau-root .gmb-rows { border-top: 1px solid var(--line); }
.gmbau-root .gmb-section--dark .gmb-rows { border-color: var(--line-dark); }
.gmbau-root .gmb-row-item {
  position: relative;
  display: grid; gap: var(--s-8);
  padding: var(--s-32) var(--s-40) var(--s-32) 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-section--dark .gmb-row-item { border-color: var(--line-dark); }
.gmbau-root .gmb-row-item:hover,
.gmbau-root .gmb-row-item:focus-within { padding-left: var(--s-16); }
.gmbau-root .gmb-row-item__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-12); }
.gmbau-root .gmb-row-item__date { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--text-muted); }
.gmbau-root .gmb-section--dark .gmb-row-item__date { color: var(--text-on-dark-muted); }
.gmbau-root .gmb-pill {
  display: inline-block; padding: 5px 12px; border-radius: 999px;
  background: var(--navy-700); color: var(--white);
  font-family: var(--font-display); font-size: .66rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.gmbau-root .gmb-pill--ghost { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
.gmbau-root .gmb-section--dark .gmb-pill--ghost { border-color: var(--line-dark-strong); color: var(--text-on-dark); }
.gmbau-root .gmb-row-item__title {font-family: var(--font-display) !important; font-weight: 700 !important; font-size: clamp(1.15rem, 2.1vw, 1.7rem) !important; letter-spacing: -.015em !important }
.gmbau-root .gmb-row-item__arrow {
  position: absolute; right: 0; top: 50%; margin-top: -12px;
  opacity: 0; transform: translateX(-8px);
  transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-out-soft);
}
.gmbau-root .gmb-row-item:hover .gmb-row-item__arrow,
.gmbau-root .gmb-row-item:focus-within .gmb-row-item__arrow { opacity: 1; transform: none; }
.gmbau-root .gmb-row-item__link::before { content: ""; position: absolute; inset: 0; }
/* --- 22.9 Kinematische Zwischensequenz --- */
.gmbau-root .gmb-interlude { padding-block: clamp(48px, 8vw, 120px); overflow: hidden; }
.gmbau-root .gmb-interlude__frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  aspect-ratio: 21 / 9;
  width: min(100%, 1100px);
  margin-inline: auto;
  transition: width 1100ms var(--ease-editorial), border-radius 1100ms var(--ease-editorial);
}
.gmbau-root .gmb-interlude__frame.gmb-is-in { width: 100%; border-radius: 0; }
.gmbau-root .gmb-interlude__frame img { width: 100%; height: 100%; object-fit: cover; }
/* --- 22.10 Manifest mit ueberlagerten Ebenen --- */
.gmbau-root .gmb-manifest { position: relative; overflow: hidden; }
.gmbau-root .gmb-manifest__inner { position: relative; z-index: 2; text-align: center; }
.gmbau-root .gmb-manifest__layer { position: absolute; z-index: 1; overflow: hidden; border-radius: var(--radius); opacity: .45; }
.gmbau-root .gmb-manifest__layer img { width: 100%; height: 100%; object-fit: cover; }
.gmbau-root .gmb-manifest__layer--a { width: 26%; aspect-ratio: 16/9; left: 2%;   top: 10%; }
.gmbau-root .gmb-manifest__layer--b { width: 18%; aspect-ratio: 4/5;  right: 3%;  top: 20%; }
.gmbau-root .gmb-manifest__layer--c { width: 22%; aspect-ratio: 4/3;  right: 14%; bottom: 6%; }
@media (max-width: 899px) {
.gmbau-root .gmb-manifest__layer { display: none; }
}
/* --- 22.11 Horizontale Galerie --- */
.gmbau-root .gmb-hgallery { position: relative; overflow: hidden; }
.gmbau-root .gmb-hgallery__track {
  display: flex; gap: var(--s-24);
  padding-inline: var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gmbau-root .gmb-hgallery__track::-webkit-scrollbar { display: none; }
.gmbau-root .gmb-hgallery__item {
  flex: 0 0 clamp(240px, 34vw, 420px);
  scroll-snap-align: center;
  border-radius: var(--radius-lg); overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--navy-800);
}
.gmbau-root .gmb-hgallery__item img { width: 100%; height: 100%; object-fit: cover; }
/* --- 22.12 Karte / Standort --- */
.gmbau-root .gmb-map-frame {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: var(--steel-100);
}
.gmbau-root .gmb-map-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
/* Einwilligungsschicht: die Karte laedt erst nach Klick (DSGVO) */
.gmbau-root .gmb-map-consent {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-content: center; justify-items: center; gap: var(--s-16);
  padding: var(--s-32); text-align: center;
  background: var(--navy-900); color: var(--text-on-dark);
}
.gmbau-root .gmb-map-consent__text { font-size: var(--fs-small); color: var(--text-on-dark-muted); max-width: 40ch; }
.gmbau-root .gmb-map-frame.gmb-is-loaded .gmb-map-consent { display: none; }
/* --- 22.13 Marke im Header: Bilddatei statt Schriftzug --- */
.gmbau-root .gmb-brand__logo {height: 56px !important; width: auto !important; transition: height var(--t-ui) var(--ease-out-soft) }
.gmbau-root .gmb-is-scrolled .gmb-brand__logo {height: 44px !important }
/* Zwei Fassungen: farbig auf Hell, weiss auf Dunkel */
.gmbau-root .gmb-brand__logo--white {display: none !important }
.gmbau-root .gmb-on-dark:not(.gmb-is-scrolled) .gmb-brand__logo--white {display: block !important }
.gmbau-root .gmb-on-dark:not(.gmb-is-scrolled) .gmb-brand__logo--color {display: none !important }
/* --- 22.14 Splitkarten und Raster ab Tablet --- */
@media (min-width: 900px) {
.gmbau-root .gmb-split-card { grid-template-columns: 1fr 1fr; align-items: stretch; }
.gmbau-root .gmb-split-card__media { aspect-ratio: auto; height: 100%; min-height: 440px; }
.gmbau-root .gmb-split-card--flip .gmb-split-card__media { order: 2; }
/* Karten bleiben beim Scrollen kurz stehen und stapeln sich */
.gmbau-root .gmb-stack-cards { gap: var(--s-40); }
.gmbau-root .gmb-stack-cards .gmb-split-card { position: sticky; }
.gmbau-root .gmb-stack-cards .gmb-split-card:nth-child(1) { top: 100px; }
.gmbau-root .gmb-stack-cards .gmb-split-card:nth-child(2) { top: 128px; }
.gmbau-root .gmb-stack-cards .gmb-split-card:nth-child(3) { top: 156px; }
}
/* --- 22.15 Bewegung aus, wenn der Nutzer das wuenscht --- */
@media (prefers-reduced-motion: reduce) {
.gmbau-root .gmb-cursor { display: none !important; }
.gmbau-root .gmb-hero__bg { clip-path: none !important; transform: none !important; }
.gmbau-root .gmb-curtain__panel { transform: scaleY(0) !important; }
.gmbau-root .gmb-interlude__frame { width: 100% !important; }
.gmbau-root .gmb-split-card__media img { transform: none !important; }
.gmbau-root .gmb-stack-cards .gmb-split-card { position: static; }
}