/* =====================================================================
   Shared video hero — mirrors the /jobs/ (160266) hero 1:1.
   Loaded on Home (159218), Agentur (159728), Leistungen (159706) and
   Kontakt (88585). The jobs page keeps its own karriere.css hero rules.

   Everything is scoped under .gmg-k-hero so nothing leaks to page bodies.
   Element selectors are nested under .gmg-k-hero (specificity 0,2,0) so
   they beat the theme's global heading rule
   `h1:not([class*="fontsize-"]) { font-size:35px }` (0,1,1) in style-custom.css
   — otherwise the hero H1 renders at 35px on these pages (jobs is immune
   because karriere.css scopes with .page-id-160266).
   ===================================================================== */

.gmg-k-hero {
	position: relative; overflow: hidden;
	--gmg-red: #E30613;
	--gmg-ink: #0B0B0C;
	--gmg-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-family: var(--gmg-font);
}
.gmg-k-hero .uncode_text_column { margin: 0; }
.gmg-k-hero em { font-style: italic; font-weight: 500; }
.gmg-k-hero .gmg-k-hero__h em { color: var(--gmg-red); }

/* pulsing dot */
@keyframes gmgpulse { 0%,100% { opacity: .5 } 50% { opacity: 1 } }

/* ---------- eyebrow + dot ---------- */
.gmg-k-hero .gmg-k-eyebrow {
	font-size: 12px; text-transform: uppercase; letter-spacing: .2em;
	color: var(--gmg-red); font-weight: 600;
}
.gmg-k-hero .gmg-k-eyebrow--light {
	display: flex; align-items: center; gap: 12px;
	letter-spacing: .22em; color: rgba(255,255,255,.7); font-weight: 400;
}
.gmg-k-hero .gmg-k-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--gmg-red);
	display: inline-block; flex: 0 0 auto; animation: gmgpulse 2.4s infinite;
}

/* ---------- buttons ---------- */
.gmg-k-hero .gmg-k-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 17px 34px; border-radius: 100px;
	font-size: 13.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
	font-family: var(--gmg-font); line-height: 1; cursor: pointer; border: 1px solid var(--gmg-red);
	background: var(--gmg-red); color: #fff; text-decoration: none;
	transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.gmg-k-hero .gmg-k-btn:hover,
.gmg-k-hero .gmg-k-btn:focus { color: #fff !important; transform: translateY(-2px); }
.gmg-k-hero .gmg-k-btn--ghost {
	background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.32);
}
.gmg-k-hero .gmg-k-btn--ghost:hover,
.gmg-k-hero .gmg-k-btn--ghost:focus { border-color: #fff; color: #fff !important; }

/* ===================== HERO ===================== */
.gmg-k-hero > .row {
	position: relative; min-height: 100vh; overflow: hidden;
	display: flex; align-items: center;
	padding-top: 0 !important; padding-bottom: 0 !important;
}
/* Neutralise Uncode's relative-positioned wrappers so the video anchors to the
   whole hero section (not just the inner text column) and fills its full height. */
.gmg-k-hero .row-inner,
.gmg-k-hero .wpb_column,
.gmg-k-hero .uncol,
.gmg-k-hero .uncoltable,
.gmg-k-hero .uncell,
.gmg-k-hero .uncont,
.gmg-k-hero .uncode_text_column,
.gmg-k-hero .gmg-k-hero__col { position: static !important; }
.gmg-k-hero .wpb_column,
.gmg-k-hero .uncell,
.gmg-k-hero .uncont,
.gmg-k-hero .uncode_text_column,
.gmg-k-hero .gmg-k-hero__col { width: 100%; }
/* Below 960px uncode/library/css/style.css re-asserts `.main-container .row .uncol{position:relative!important}`
   (0,3,0), outranking the 0,2,0 rule above. .uncol then becomes the video's containing block and
   the video/overlay shrink to the text column, leaving the page background visible on both sides.
   Match its specificity so the video stays full-bleed on mobile. */
@media (max-width: 959px) {
	.main-container .gmg-k-hero .row .uncol { position: static !important; }
}

.gmg-k-hero .gmg-k-hero__video {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; opacity: .85; display: block; z-index: 0;
}
.gmg-k-hero .gmg-k-hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11,11,12,.4) 0%, rgba(11,11,12,.18) 42%, rgba(11,11,12,.88) 100%);
}
.gmg-k-hero .gmg-k-hero__inner {
	position: relative; z-index: 2; max-width: 1280px;
	margin: 0 auto; padding: 120px 28px 70px; width: 100%;
}
.gmg-k-hero .gmg-k-hero__inner .gmg-k-eyebrow--light { margin-bottom: 26px; }
.gmg-k-hero .gmg-k-hero__h {
	font-family: var(--gmg-font);
	font-size: clamp(56px,8vw,118px); line-height: .96; font-weight: 700;
	letter-spacing: -.03em; color: #fff; margin: 0; max-width: 16ch;
}

/* Headline size steps. The Relaunch copy (GMG_Relaunch_Header-Content.docx) gives each
   page a two-sentence headline of a very different length — from "Good Men. Good Business."
   (14 chars/line) to "…Good Business beginnt mit einem Gespräch." (41). At the default
   118px the long ones overflow the 1280px inner container, so the longer copy steps down.
   Add ONE of these next to .gmg-k-hero on the row: */
.gmg-k-hero--h-md .gmg-k-hero__h { font-size: clamp(42px,5.6vw,84px); max-width: 26ch; }
.gmg-k-hero--h-sm .gmg-k-hero__h { font-size: clamp(34px,4.4vw,62px); max-width: 30ch; }
.gmg-k-hero .gmg-k-hero__lead {
	margin: 30px 0 0; max-width: 60ch; font-size: clamp(16px,1.7vw,19px);
	line-height: 1.65; color: rgba(255,255,255,.78); font-weight: 300;
}
.gmg-k-hero .gmg-k-hero__cta { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px; }

.gmg-k-hero .gmg-k-stats {
	margin-top: 64px; display: flex; flex-wrap: wrap; gap: 48px;
	border-top: 1px solid rgba(255,255,255,.14); padding-top: 30px;
}
.gmg-k-hero .gmg-k-stat__n {
	font-size: 34px; font-weight: 700; color: #fff; letter-spacing: -.02em; line-height: 1.1;
}
.gmg-k-hero .gmg-k-stat__l {
	font-size: 13px; color: rgba(255,255,255,.6); margin-top: 2px;
}

/* Compact variant — /blog/ (4274). The blog index must keep its article grid within
   reach, so the header is a band rather than a full viewport. Same video/overlay/copy
   system as every other page, just shorter. */
.gmg-k-hero--compact > .row { min-height: 0; }
.gmg-k-hero--compact .gmg-k-hero__inner { padding: 86px 28px 74px; }

/* ===================== responsive ===================== */
@media (max-width: 760px) {
	.gmg-k-hero .gmg-k-hero__h { font-size: clamp(44px,13vw,72px); }
	.gmg-k-hero--h-md .gmg-k-hero__h { font-size: clamp(36px,9.5vw,56px); }
	.gmg-k-hero--h-sm .gmg-k-hero__h { font-size: clamp(30px,7.5vw,46px); }
	.gmg-k-hero--compact .gmg-k-hero__inner { padding: 64px 24px 56px; }
}
@media (max-width: 640px) {
	.gmg-k-hero .gmg-k-stats { gap: 28px; }
}