/*
 * Landing sections (Leistungen pages): hero, landing-intro, contact, gif-field.
 * Values ported 1:1 from the Oxygen universal.css of gap.new (2026-09-24); Oxygen used cqw without a
 * container, i.e. viewport-relative, hence vw here. Overrides the first-pass rules in components.css.
 */
:root {
	--gap-l-pad-y: clamp(2.3rem, 6.2vw, 4.6875rem);   /* --base-75 */
	--gap-l-huge: clamp(6rem, 14vw, 11.875rem);       /* --base-huge */
	--gap-l-xxl: clamp(3rem, 8vw, 6rem);              /* --base-xxl */
	--gap-l-xl: clamp(2rem, 6vw, 4.375rem);           /* --base-xl */
	--gap-l-48: clamp(1.6rem, 5vw, 3rem);             /* --base-3rem */
	--gap-l-contact: clamp(7rem, 30vw, 21rem);        /* --base-21rem */
	--gap-l-gap: clamp(1.4rem, 4vw, 2rem);            /* --base-2rem */
}

/* Brand page themes (Oxygen .theme-* / .bg-* + .text-*) */
.gap-surface--light { background: #f2f2f2; color: #000; }   /* Figma 1:890 Werbung */
.gap-surface--silver { background: #a6a6a6; color: #1408ff; }   /* Figma 1:993 Digital */
.gap-surface--gold { background: #999852; color: #fff; }
.gap-surface--orange { background: #d28539; color: #f2ff00; }
.gap-surface--rust { background: #a8422e; color: #f6ff00; }
.gap-surface--mint { background: #c2f7bb; color: #000; }
/* Leistungen pages are one colour top to bottom: the page takes the hero's surface, so fractional section heights never show a white seam. */
body:has(.gap-hero--landing.gap-surface--light) { background: #f2f2f2; }
body:has(.gap-hero--landing.gap-surface--silver) { background: #a6a6a6; }
body:has(.gap-hero--landing.gap-surface--gold) { background: #999852; }
body:has(.gap-hero--landing.gap-surface--orange) { background: #d28539; }
body:has(.gap-hero--landing.gap-surface--rust) { background: #a8422e; }
.gap-surface--silver a,
.gap-surface--gold a,
.gap-surface--orange a,
.gap-surface--rust a { color: inherit; }

/* Shared frame: Oxygen .ct-section-inner-wrap (max 1440, 17px sides) */
.gap-hero--landing,
.gap-landing-intro,
.gap-contact,
.gap-gif-field {
	padding: var(--gap-l-pad-y) max(17px, calc((100% - 1440px) / 2 + 17px));
}

/* Underline style used by all big headlines (.underline.underline__light) */
.gap-hero__headline,
.gap-landing-intro__title,
.gap-contact__title,
.gap-gif-field__title {
	display: inline-block;
	text-decoration: underline;
	text-decoration-thickness: 0.047em;
	text-underline-offset: 0.12em;
}

/* Section spacing overrides from the Oxygen pages: contact sits tight (--base-28) */
.gap-contact { padding-top: clamp(1rem, 2vw, 1.75rem); padding-bottom: clamp(1rem, 2vw, 1.75rem); }
.gap-hero--landing.gap-space-bottom--large,
.gap-landing-intro.gap-space-bottom--large,
.gap-contact.gap-space-bottom--large,
.gap-gif-field.gap-space-bottom--large { padding-bottom: clamp(7rem, 30vw, 21rem); }   /* --base-21rem */

/* ---- Hero (landing) ---- */
.gap-hero--landing {
	position: relative;
	display: block;
	min-height: 0;
	overflow: hidden;
	background: var(--gap-paper);
	color: var(--gap-ink);
	padding-top: clamp(6.4rem, 16vw, 12.5rem);      /* --base-200 */
	padding-bottom: clamp(2.8rem, 10vw, 7.5rem);    /* --base-120 */
}
/* .gap-hero in components.css is dark by default; the landing hero follows the block's surface choice */
.gap-hero--landing.gap-surface--paper { background: #fff; color: #000; }
.gap-hero--landing.gap-surface--ink { background: #000; color: #fff; }
.gap-hero--landing.gap-surface--coral { background: #ff9393; color: #000; }
.gap-hero--landing.gap-surface--yellow { background: #ffe271; color: #000; }
.gap-hero--landing.gap-surface--light { background: #f2f2f2; color: #000; }
.gap-hero--landing.gap-surface--silver { background: #a6a6a6; color: #1408ff; }
.gap-hero--landing.gap-surface--gold { background: #999852; color: #fff; }
.gap-hero--landing.gap-surface--orange { background: #d28539; color: #f2ff00; }
.gap-hero--landing.gap-surface--rust { background: #a8422e; color: #f6ff00; }
.gap-hero__inner {
	width: 100%;
	position: relative;
	z-index: 2;
	pointer-events: none;           /* let the interaction layer receive pointer events */
}
.gap-hero__inner a { pointer-events: auto; }
.gap-hero__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 30px;
	font-family: var(--gap-sans);
}
.gap-hero__label {
	margin: 0;
	font-family: var(--gap-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0;
	text-decoration: none;
}
.gap-hero__info { margin: 0 0 0 auto; max-width: none; font-size: 16px; line-height: 1.6; }
.gap-hero__headline {
	margin: 0 0 30px;
	max-width: 100%;
	font-size: var(--gap-l-huge);
	line-height: 0.95;
	letter-spacing: -0.052em;
	overflow-wrap: anywhere;
}
.gap-hero__intro {
	max-width: var(--gap-hero-intro-width, 1300px);
	font-size: var(--gap-l-xl);
	font-weight: 500;
	line-height: 1.07;
	letter-spacing: -1.2px;
}
.gap-hero__intro p { margin: 0; }
.gap-hero__canvas {
	position: absolute;
	inset: 0;
	z-index: 1;
}
/* Interaction layer (assets/js/hero-interactions.js). Sketch canvases cover the hero like Oxygen's .canvas-bg;
   drawing is off on touch screens (pointer: coarse), so touch users can still scroll the page (deliberate deviation). */
canvas.gap-hero__canvas { display: block; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
/* Interactive heroes only (drawing, shapes per click) show the pen from Werbung; animations further down keep the arrow. */
.gap-hero--sketch,
.gap-hero--sketch-alt,
.gap-hero--sketch-dots,
.gap-hero--logos { cursor: url("../../../../uploads/2025/05/pen.png") 15 100, auto; }
@media (pointer: coarse) { canvas.gap-hero__canvas { pointer-events: none; } .gap-hero--sketch, .gap-hero--sketch-alt, .gap-hero--sketch-dots, .gap-hero--logos { cursor: auto; } }
.gap-hero__spawn { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.gap-hero--logos .gap-hero__inner { position: relative; z-index: 1; }
.gap-hero__shape { position: absolute; display: block; color: inherit; }

/* ---- Hero v2 (field "Darstellung: Neu") — Figma "GAP - Webdesign" 1:820 (1512: page name + keywords sans 500 24/27.6 side by
   side, gap 150; headline sans 500 210/199.5 -5% underlined at the bottom of a 923px stage) · mobile 1:236 (18/21.6 400, 96px). */
.gap-hero--v2 { padding: clamp(40px, 5.3vw, 80px) var(--gap-card-gutter); }
.gap-hero--v2 .gap-hero__inner { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(80px, 10.7vw, 162px); min-height: clamp(480px, 50vw, 763px); }
.gap-hero--v2 .gap-hero__breadcrumb { flex-wrap: nowrap; align-items: flex-start; justify-content: flex-start; gap: clamp(20px, 10vw, 150px); margin: 0; }
.gap-hero--v2 .gap-hero__label,
.gap-hero--v2 .gap-hero__info { margin: 0; font-family: var(--gap-sans); font-size: clamp(1.125rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; }
.gap-hero--v2 .gap-hero__label { flex: 1 1 0; }
.gap-hero--v2 .gap-hero__info { flex: 0 1 999px; max-width: none; }
/* One size for every page headline at every width (2026-10, by request): 13.9vw = 210 at 1512 (Figma), never larger. At this size the
   longest unbreakable word in use ("Gruppenarbeit?", 6.2em) fits from 320px up, so words only break where the editor sets a break. */
.gap-hero--v2 .gap-hero__headline { margin: 0; font-family: var(--gap-sans); font-size: clamp(2.75rem, 13.9vw, 13.125rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; overflow-wrap: normal; }
@media (max-width: 767px) {
	.gap-hero--v2 .gap-hero__breadcrumb { flex-direction: column; gap: 20px; }
	.gap-hero--v2 .gap-hero__label, .gap-hero--v2 .gap-hero__info { flex: none; font-size: 18px; font-weight: 400; line-height: 1.2; }
	.gap-hero--v2 .gap-hero__inner { min-height: 0; gap: 90px; }
}

/* ---- Landing intro ---- */
.gap-landing-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: left;
}
.gap-landing-intro__media {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	margin-bottom: 15px;
	max-width: 100%;
}
.gap-landing-intro__media--overlap-small { margin-bottom: -20px; }
.gap-landing-intro__media--overlap-large { margin-bottom: calc(-1 * clamp(2rem, 10vw, 5rem)); }
.gap-landing-intro__media--overlap-small + .gap-landing-intro__title,
.gap-landing-intro__media--overlap-large + .gap-landing-intro__title { position: relative; z-index: 1; }
.gap-landing-intro__symbol {
	width: var(--gap-symbol-width, 226px);
	max-width: 100%;
	margin: 0;
}
.gap-landing-intro__symbol img,
.gap-landing-intro__image img { display: block; width: 100%; height: auto; }
.gap-landing-intro__image { width: min(1040px, 100%); }
.gap-landing-intro__title {
	max-width: 100%;
	margin: 0 auto 30px;
	font-size: var(--gap-l-xxl);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.1125rem;
	text-align: center;
}
.gap-landing-intro__text {
	width: 100%;
	max-width: 1400px;
	align-self: flex-start;
	font-size: var(--gap-l-48);
	font-weight: 500;
	line-height: 1.042;
	letter-spacing: -0.025rem;
	text-align: left;
}
.gap-landing-intro__text p { margin: 0; }
/* Figma 2026 (1:910 / 1:1016 / 1:1230 = statement section 1:838 with an image above; mobile 1:329): image sits on the
   headline, headline serif 500 106/100.7 centred underlined (48), text serif 400 48/50.4 left (26 500), card gutter.
   Image only (title + text empty) = centred image section (1:947). */
.gap-landing-intro { padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); }
.gap-landing-intro__media { margin-bottom: 0; }
.gap-landing-intro__title { margin: 0 auto 30px; padding-bottom: 0.15em; font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; }
.gap-landing-intro__text { max-width: none; font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
@media (max-width: 767px) { .gap-landing-intro__text { font-weight: 500; } }

/* ---- Contact ---- */
.gap-contact { position: relative; font-family: var(--gap-sans); }
.gap-contact__title {
	display: inline-block;
	position: relative;
	z-index: 1;
	margin: 0 0 40px;
	font-family: var(--gap-serif);
	font-size: var(--gap-l-xxl);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.1125rem;
}
.gap-contact__links {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0 2rem;
	width: 100%;
	font-size: var(--gap-l-contact);
	font-weight: 500;
	line-height: 1.32;
	letter-spacing: -0.5rem;
}
.gap-contact__links a { color: inherit; text-decoration: none; }
.gap-contact__links a:hover,
.gap-contact__links a:focus-visible { text-decoration: underline; }

/* Compact (Startseite) — Figma "GAP - Webdesign" 1:814: only the links, sans 500 260/247 at 1512 (-5%), card gutter;
   mobile 1:227: 96/91.2, weight 400, underlined, still side by side. */
.gap-contact--compact { padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter) clamp(60px, 8vw, 120px); }
.gap-contact--compact .gap-contact__links { flex-wrap: nowrap; align-items: center; gap: clamp(1rem, 4vw, 60px); font-size: clamp(5rem, 17.2vw, 16.25rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; }
.gap-contact--compact .gap-contact__links a { white-space: nowrap; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; }
/* Figma 1:855: "↘ Noch Fragen?" serif 400 106/100.7 underlined, 60px above the links (mobile 48/45.6). */
.gap-contact--compact .gap-contact__title { margin: 0 0 clamp(30px, 4vw, 60px); padding-bottom: 0.15em; font-size: clamp(3rem, 7vw, 6.625rem); line-height: 0.95; letter-spacing: -0.05em; }

/* ---- GIF field (spawned GIFs float above the copy, like the Oxygen original) ---- */
.gap-gif-field { min-height: 0; }
.gap-gif-field__content { max-width: 100%; }
.gap-gif-field__title {
	display: inline-block;
	margin: 0 0 30px;
	font-size: var(--gap-l-huge);
	font-weight: 400;
	line-height: 0.95;
	letter-spacing: -0.052em;
	overflow-wrap: anywhere;
}
.gap-gif-field__intro {
	max-width: 1400px;
	margin-bottom: 470px;
	font-size: var(--gap-l-xl);
	font-weight: 500;
	line-height: 1.07;
	letter-spacing: -1.2px;
}
.gap-gif-field__statement {
	font-size: var(--gap-l-48);
	line-height: 1.042;
	letter-spacing: -0.025rem;
	text-align: center;
}
.gap-gif-field__intro p,
.gap-gif-field__statement p { margin: 0; }
.gap-gif-field .gap-gif-field__item,
.gap-contact .gap-gif-field__item { z-index: 3; }
/* Figma 2026 (1:927 Big Picture, 1:1244 Verbal DNA, 1:1042 E-Commerce; mobile 1:329): card gutter like the other sections,
   title serif 400 210/199.5 (-5%), intro serif 500 68/71.4, closing text serif 400 48/50.4 left (centred on mobile) 300px lower.
   Variant "static": one GIF centred above the title, overlapping it (1:1058, 515x600, 220px over the title). */
.gap-gif-field { padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); }
.gap-gif-field__title { display: inline; margin: 0; font-size: clamp(4rem, 13.9vw, 13.125rem); line-height: 0.95; letter-spacing: -0.05em; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; overflow-wrap: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gap-gif-field__title + .gap-gif-field__intro { margin-top: 30px; }
.gap-gif-field__intro, .gap-gif-field__intro:last-child { max-width: none; margin-bottom: 0; font-size: clamp(2.25rem, 4.5vw, 4.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.gap-gif-field__intro:not(:last-child) { margin-bottom: clamp(160px, 19.8vw, 300px); }
.gap-gif-field__statement { font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; text-align: left; }
.gap-gif-field__static { position: relative; z-index: 2; display: block; width: var(--gap-gif-static, 515px); max-width: 60%; height: auto; margin: 0 auto calc(-0.43 * min(var(--gap-gif-static, 515px), 60%)); left: 5.6%; }
@media (max-width: 767px) {
	.gap-gif-field__statement { font-weight: 500; text-align: center; }
	.gap-gif-field__static { max-width: 45%; left: 0; }
}


@media (max-width: 767px) {
	.gap-hero__label { font-size: 14px; }
	.gap-contact__links { flex-direction: column; align-items: center; }
	.gap-contact--compact .gap-contact__links { flex-direction: row; justify-content: space-between; font-size: 24.4vw; font-weight: 400; }
	.gap-contact--compact .gap-contact__links a { text-decoration: underline; }
	.gap-gif-field .gap-gif-field__item,
	.gap-contact .gap-gif-field__item { max-width: 30%; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.gap-hero__canvas { display: none; }
}

/*
 * ---- Art-directed media compositions (landing-intro "Komposition") ----
 * Ported 1:1 from the per-page Oxygen CSS (uploads/oxygen/css/16xx.css). Children of
 * .gap-landing-intro__media in order: symbol first, then the gallery images.
 */
[class*="gap-landing-intro--comp-"] .gap-landing-intro__media { position: relative; width: 100%; }
[class*="gap-landing-intro--comp-"] .gap-landing-intro__media > * { width: auto; }
[class*="gap-landing-intro--comp-"] .gap-landing-intro__media img { width: 100%; }

/* Digital · Website: three copies of one GIF, two floating (Oxygen #image-26/23/27-1636) */
/* Figma 1:1012: three 698px copies in an 869x400 frame at (0,8) · (0,-68) · (179,97). */
.gap-landing-intro--comp-digital-website .gap-landing-intro__media { width: min(869px, 100%); padding-top: 1%; }
.gap-landing-intro--comp-digital-website .gap-landing-intro__title { position: relative; z-index: 1; }   /* the third copy runs under the headline */
.gap-landing-intro--comp-digital-website .gap-landing-intro__media > * { width: 80.3%; align-self: flex-start; }
.gap-landing-intro--comp-digital-website .gap-landing-intro__media > :nth-child(2) { position: absolute; left: 0; top: -17%; }
.gap-landing-intro--comp-digital-website .gap-landing-intro__media > :nth-child(3) { position: absolute; left: 20.6%; top: 26%; }
/* Digital · UX / Social: symbol overlaps the headline (#image-42/57-1636) */
.gap-landing-intro--comp-digital-overlap .gap-landing-intro__media > :nth-child(1) { width: 360px; max-width: 100%; position: relative; z-index: 2; margin-bottom: -143px; }
/* Digital · E-Commerce: large GIF shifted left, overlapping (#image-64-1636) */
.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media { align-items: center; }
.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media > :nth-child(1) { width: 690px; max-width: 100%; position: relative; left: -18%; z-index: 2; margin-bottom: -368px; }

/* Kultur · Family: handshake above the "Family" lettering (#image-15/21-1640) */
.gap-landing-intro--comp-kultur-family .gap-landing-intro__media { min-height: 180px; }
.gap-landing-intro--comp-kultur-family .gap-landing-intro__media > :nth-child(1) { width: 208px; margin-bottom: -20px; position: relative; z-index: 1; }
.gap-landing-intro--comp-kultur-family .gap-landing-intro__media > :nth-child(2) { width: 390px; max-width: 90%; position: absolute; left: 50%; top: 25%; transform: translate(-50%); z-index: 2; }
/* Kultur · Identität: frog "I" next to the "D" (#image-23/24-1640) */
.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(1) { width: 344px; max-width: 80%; position: relative; right: -13%; margin-bottom: -55px; }
.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(2) { width: 417px; max-width: 90%; position: absolute; left: 43%; top: 14%; transform: translate(-50%); }

/* Marke · Brand Essence: stacked wordmarks with floating firemen (#image-14…27-1643) */
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media { gap: 0; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(1) { width: 1490px; max-width: 100%; margin-bottom: -79px; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(2) { width: 1340px; max-width: 100%; margin-bottom: -53px; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(3) { width: 1100px; max-width: 100%; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(n+4):nth-child(-n+9) { position: absolute; width: 200px; z-index: 2; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(4) { top: 71%; right: 32%; transform: rotate(-24deg); }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(5) { top: 62%; left: 20%; transform: rotate(-19deg); }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(6) { top: 26%; left: 54%; z-index: 5; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(7) { top: 7%; left: 28%; z-index: 5; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(8) { top: 18%; left: 20%; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(9) { top: 11%; left: 10%; }
.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(10) { position: absolute; width: 864px; left: 50%; top: 65%; transform: translate(-50%); }
/* Marke · Visual Identity: sparkle GIF lightened into the orange (#div_block-32-1643) */
.gap-landing-intro--comp-marke-sparkle .gap-landing-intro__media > :nth-child(1) { width: 296px; max-width: 100%; mix-blend-mode: lighten; }

@media (max-width: 1440px) {
	.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media > :nth-child(1) { width: 500px; margin-bottom: -299px; left: 8%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(1) { margin-bottom: -39px; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(2) { width: 1192px; max-width: 95%; margin-bottom: -43px; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(3) { width: 900px; max-width: 87%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(n+4):nth-child(-n+9) { width: 170px; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(6) { top: 19%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(10) { width: 700px; max-width: 60%; }
}
@media (max-width: 991px) {
	.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media > :nth-child(1) { max-width: 80%; margin-bottom: -167px; left: -6%; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(1) { width: 280px; margin-bottom: -41px; right: -21%; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(2) { width: 380px; left: 32%; top: 7%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(1),
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(2) { margin-bottom: -5%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(n+4):nth-child(-n+9) { width: 147px; }
}
@media (max-width: 767px) {
	.gap-landing-intro--comp-digital-overlap .gap-landing-intro__media > :nth-child(1) { margin-bottom: -125px; max-width: 80%; }
	.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media > :nth-child(1) { left: 0; width: 431px; max-width: 60%; margin-bottom: -83px; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(1) { max-width: 80%; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(2) { max-width: 90%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(n+4):nth-child(-n+9) { width: 110px; }
	.gap-landing-intro--comp-marke-sparkle .gap-landing-intro__media > :nth-child(1) { max-width: 80%; }
}
@media (max-width: 479px) {
	.gap-landing-intro--comp-digital-overlap .gap-landing-intro__media > :nth-child(1) { max-width: 73%; margin-bottom: -80px; }
	.gap-landing-intro--comp-digital-commerce .gap-landing-intro__media > :nth-child(1) { margin-bottom: -69px; left: -6%; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(1) { max-width: 60%; }
	.gap-landing-intro--comp-kultur-identity .gap-landing-intro__media > :nth-child(2) { max-width: 60%; top: 11%; }
	.gap-landing-intro--comp-marke-essence .gap-landing-intro__media > :nth-child(n+4):nth-child(-n+9) { width: 55px; }
	.gap-landing-intro--comp-marke-sparkle .gap-landing-intro__media > :nth-child(1) { max-width: 60%; }
}

/* ---- Section rhythm on the Leistungen pages ----
   Figma "GAP - Webdesign" (1:818 Kultur, 1:890 Werbung, 1:993 Digital, 1:1203 Marke): "Spacer 200px" between sections,
   one gap everywhere (also above project pairs and stat rows, by request); mobile about 60. Each section carries the space below it,
   so the gap is the same whatever block follows. "Abstand unten: Kein / Groß" in the block keep their meaning. */
:root {
	--gap-l-section: clamp(60px, 13.2vw, 200px);
	--gap-l-section-s: clamp(40px, 7.9vw, 120px);
}
main:has(> .gap-hero--landing) > section:not(.gap-hero):not(.gap-stat-rows) { padding-top: 0; }
main:has(> .gap-hero--landing) > section:not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large) { padding-bottom: var(--gap-l-section); }
main:has(> .gap-hero--landing) > .gap-hero--landing + section:not(.gap-hero):not(.gap-stat-rows):not(.gap-statement) { padding-top: var(--gap-l-section); }   /* Figma Karriere 1:3887: hero, then Spacer 200; a lead statement (Leistungen) follows the hero directly */
main:has(> .gap-hero--landing) > .gap-space-bottom--none + section:not(.gap-hero):not(.gap-stat-rows) { padding-top: clamp(30px, 4vw, 60px); }   /* lead text straight into an image composition: the composition sets the overlap */
/* Parts of one section that are separate blocks keep their inner spacing (Figma Über uns 1:3803, Team 1:4117):
   service rows (rule on top, 50–80 above and 12–20 below the content) form one list, the pill "Alle Leistungen →" sits 20 below it
   and carries the section gap; "Sag Hallo" sits 60 above the phone / e-mail line. */
/* (the :not() chain repeats the rhythm selector so these win over it) */
main:has(> .gap-hero--landing) > section.gap-service-tile--row:not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large) { padding-top: clamp(50px, 5.3vw, 80px); padding-bottom: clamp(12px, 1.3vw, 20px); }   /* design: more air above, the next rule follows closely */
main:has(> .gap-hero--landing) > .gap-space-bottom--none + section.gap-service-tile--row { margin-top: clamp(30px, 4vw, 60px); }
main:has(> .gap-hero--landing) > section.gap-service-tile--row:not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large):not(:has(+ .gap-service-tile--row, + .gap-button-block--pill)) { padding-bottom: var(--gap-l-section); }
main:has(> .gap-hero--landing) > .gap-button-block--pill { padding-top: clamp(10px, 1.3vw, 20px); padding-bottom: var(--gap-l-section); }
main:has(> .gap-hero--landing) > section.gap-feature-row--statement:not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large):has(+ .gap-feature-row--statement) { padding-bottom: clamp(60px, 7.9vw, 120px); }   /* image/text rows in a list (Commitment 1:4063) */
main:has(> .gap-hero--landing) > section.gap-cta--hello:not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large):has(+ .gap-contact--compact) { padding-bottom: clamp(30px, 4vw, 60px); }
/* Picture alone (e.g. the door on Kampagne) straight before „↘ Noch Fragen?“: half the section gap, they belong together. */
main:has(> .gap-hero--landing) > section.gap-landing-intro:not(:has(.gap-landing-intro__title)):has(+ .gap-contact):not(.gap-hero):not(.gap-stat-rows):not(.gap-space-bottom--none):not(.gap-space-bottom--large) { padding-bottom: calc(var(--gap-l-section) / 2); }

/* Title variant: large left-aligned (Oxygen .text-xxxl without centring, e.g. Digital · E-Commerce) */
.gap-landing-intro--title-large .gap-landing-intro__title {
	align-self: flex-start;
	margin-left: 0;
	margin-right: 0;
	font-size: clamp(4rem, 10vw, 9rem);
	line-height: 1;
	letter-spacing: 0;
	text-align: left;
}