/* * Project/content sections: project-intro, media-full, media-duo, quote, section-header, cta banner, counters. * Values from the Oxygen project sections (uploads/oxygen/css/91.css + universal .h1/.h2/.copy/.label), * measured against gap.new on 2026-09-24. Project sections run full width with 17px gutters (no 1440 cap). */ :root { --gap-s-gutter: var(--gap-card-gutter); /* one page gutter everywhere (= header, new sections: 17–30px) */ --gap-s-copy: 21px; --gap-s-h2: 36px; --gap-s-h1: 72px; } @media (max-width: 991px) { :root { --gap-s-copy: 18px; --gap-s-h2: 28px; --gap-s-h1: 44px; } } @media (max-width: 767px) { :root { --gap-s-copy: 16px; --gap-s-h2: 24px; --gap-s-h1: 36px; } } /* ---- Project intro ---- */ .gap-project-intro { display: flex; gap: 15px; padding: 20px var(--gap-s-gutter); } .gap-project-intro__lead, .gap-project-intro__body { width: 50%; } .gap-project-intro__label { margin: 4px 0 0; font-size: clamp(0.75rem, 1.6vw, 1rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; } .gap-project-intro__headline { margin: 0 10px 0 0; font-size: 30px; font-weight: 400; line-height: 1.5; letter-spacing: 0.58px; } .gap-project-intro__text { font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-project-intro__text > * { margin: 0 0 1em; } .gap-project-intro__text h2, .gap-project-intro__text h3, .gap-project-intro__text h4 { margin: 0; font-size: 16px; font-weight: 400; line-height: 1.5; letter-spacing: 0.58px; } .gap-project-intro__text[data-gap-collapsed="true"] { max-height: calc(24px + 1em + 4.5em); overflow: hidden; } /* Oxygen: subheading + 3 lines */ .gap-project-intro__more { margin-top: 10px; padding: 0; border: 0; background: none; font: inherit; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; color: inherit; text-decoration: underline; cursor: pointer; } /* ---- Media full width ---- */ .gap-media-full { padding: 20px var(--gap-s-gutter); } .gap-media-full--bleed { padding: 0; } .gap-media-full__image { display: block; width: 100%; height: 54vw; object-fit: cover; } /* Oxygen #image-66: 54vw */ .gap-media-full--bleed .gap-media-full__image { height: 40vw; } /* project header #image-41: 40vw */ .gap-media-full__link { display: block; } .gap-media-full__video, .gap-media-duo__video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; } .gap-media-full__video iframe, .gap-media-duo__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* ---- Media duo ---- */ .gap-media-duo { display: flex; gap: 15px; padding: 0 var(--gap-s-gutter) 20px; } .gap-media-duo__cell { display: flex; flex-direction: column; width: 50%; min-width: 0; } .gap-media-duo__image { display: block; width: 100%; height: 56vw; object-fit: cover; } /* Oxygen #image-63: 56vw */ .gap-media-duo__cell--text.gap-media-duo__cell--left { align-items: flex-end; text-align: right; } .gap-media-duo__cell--text.gap-media-duo__cell--right { align-items: flex-start; text-align: left; } .gap-media-duo__text { width: 100%; font-size: var(--gap-s-h2); line-height: 1.3; letter-spacing: 1px; } .gap-media-duo__text p { margin: 0; } .gap-media-duo__icon { display: block; width: 24px; height: 24px; margin-bottom: 4px; } .gap-media-duo__icon svg { display: block; width: 100%; height: 100%; } .gap-media-duo__icon--left svg { transform: rotate(180deg); } .gap-media-duo__icon--up svg { transform: rotate(-90deg); } .gap-media-duo--stack { flex-direction: column; } .gap-media-duo--stack .gap-media-duo__cell--left { width: 100%; } .gap-media-duo--stack .gap-media-duo__cell--right { width: 50%; } /* ---- Quote (Oxygen "Zitat") ---- */ .gap-quote { max-width: none; /* reset first-pass components.css (.gap-quote{max-width:28ch;font-size:clamp(…)}) */ font-size: inherit; line-height: inherit; display: flex; align-items: flex-end; margin: 0; padding: clamp(2.3rem, 6.2vw, 4.6875rem) var(--gap-s-gutter) clamp(2.3rem, 6.2vw, 4.6875rem) calc(35% + 17px); /* Oxygen: 35% spacer column */ } .gap-quote__mark { flex: 0 0 auto; align-self: flex-end; margin-right: 10px; padding-bottom: 100px; font-family: var(--gap-serif); font-size: 150px; line-height: 1.5; } .gap-quote__body { flex: 1 1 auto; min-width: 0; } .gap-quote blockquote { margin: 0 0 10px; font-size: 34px; line-height: 1.6; } .gap-quote blockquote p { margin: 0; } .gap-quote figcaption { font-size: 16px; line-height: 1; } /* ---- Section header (Oxygen "Subheadline Headline Text ohne HG") ---- */ .gap-section-header { padding: clamp(2.3rem, 6.2vw, 4.6875rem) var(--gap-s-gutter); text-align: center; } .gap-section-header .gap-section__eyebrow { margin: 0 0 20px; font-family: var(--gap-sans); font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .gap-section-header .gap-section__title { max-width: 1170px; margin: 0 auto 30px; font-size: var(--gap-s-h1); line-height: 1; letter-spacing: 0; } .gap-section-header .gap-section__intro { width: min(1170px, 90%); margin: 0 auto; font-size: var(--gap-s-h2); line-height: 1.2; letter-spacing: 0; } /* Oxygen #text_block-6-21: 36px/1.2 centred */ .gap-section-header .gap-section__intro p { margin: 0; } .gap-section-header--small .gap-section__intro { width: auto; margin: 10px 0 0; text-align: left; } /* ---- CTA banner "Sag Hallo" (Oxygen "Element 6") ---- */ .gap-cta--banner { display: flex; align-items: center; justify-content: center; height: 35vw; padding: 0; border-top: 1px solid #000; text-align: center; } .gap-cta--banner.gap-surface--paper { background: #ff9393; } .gap-cta--banner.gap-surface--mint { background: #c2f7bb; } .gap-cta__banner-link { color: #000; font-size: var(--gap-s-h1); font-weight: 600; line-height: 1; text-decoration: underline; } /* ---- Counters ---- */ .gap-counters { padding: clamp(2.3rem, 6.2vw, 4.6875rem) var(--gap-s-gutter); text-align: center; } .gap-counters__label { margin: 0 0 20px; font-family: var(--gap-sans); font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .gap-counters__title { max-width: 1170px; margin: 0 auto 50px; font-size: var(--gap-s-h1); font-weight: 400; line-height: 1; } .gap-counters__grid { display: flex; justify-content: space-between; gap: 15px; } .gap-counters__item { flex: 1 1 0; } .gap-counters__before, .gap-counters__caption { margin: 0; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-counters__number { margin: 0; font-size: clamp(3rem, 10vw, 9rem); line-height: 1; } @media (max-width: 991px) { .gap-quote { padding-left: var(--gap-s-gutter); } .gap-media-duo__cell--text .gap-media-duo__text { width: 90%; } } @media (max-width: 767px) { .gap-project-intro, .gap-media-duo, .gap-counters__grid { flex-direction: column; } .gap-project-intro__lead, .gap-project-intro__body, .gap-media-duo__cell, .gap-media-duo--stack .gap-media-duo__cell--right { width: 100%; } .gap-project-intro__lead, .gap-media-duo__cell--left { margin-bottom: 30px; } .gap-project-intro__label { font-size: 12px; } .gap-quote__mark { font-size: 100px; padding-bottom: 60px; } .gap-quote blockquote { font-size: 24px; } .gap-quote figcaption { font-size: 14px; } .gap-cta--banner { height: 50vw; } .gap-media-duo__image, .gap-media-full__image { height: 54vw; } .gap-media-full--bleed .gap-media-full__image { height: auto; } } @media (max-width: 479px) { .gap-cta--banner { height: 60vw; } } /* ---- Project template tail: "Projekte · Mehr bitte…" (Oxygen Single-project-template #section-2-1221) ---- */ .gap-project-more { padding: 20px var(--gap-s-gutter); border-top: 1px solid #000; } .gap-project-more__label { margin: 0; font-family: var(--gap-sans); font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .gap-project-more__title { margin: 0 0 30px; font-size: var(--gap-s-h2); font-weight: 400; line-height: 1.3; letter-spacing: 1px; } .gap-project-more__list { display: flex; justify-content: space-between; gap: 15px; } .gap-project-more__card { display: flex; flex: 1 1 0; flex-direction: column; align-items: flex-start; color: inherit; text-decoration: none; } .gap-project-more__image { width: 100%; height: 19vw; object-fit: cover; margin-bottom: 5px; } .gap-project-more__name { font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-project-more__branch { margin-top: 4px; font-size: clamp(0.75rem, 1.6vw, 1rem); font-weight: 500; line-height: 1.4; } .gap-project-more__card:hover .gap-project-more__name, .gap-project-more__card:focus-visible .gap-project-more__name { text-decoration: underline; } .screen-reader-text { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (max-width: 767px) { .gap-project-more__list { flex-direction: column; } .gap-project-more__card { margin-bottom: 30px; } .gap-project-more__image { height: 54vw; } } /* ---- Icon grid (Oxygen "Icon-grid 6 mit headline und button", #section-1132-1138) ---- */ .gap-icon-grid { display: flex; flex-direction: column; align-items: center; padding: clamp(2.3rem, 6.2vw, 4.6875rem) var(--gap-s-gutter); text-align: center; } .gap-icon-grid__label { margin: 0 0 40px; font-family: var(--gap-sans); font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .gap-icon-grid__title { width: min(1170px, 90%); margin: 0 0 50px; font-size: var(--gap-s-h1); font-weight: 400; line-height: 1; } .gap-icon-grid__row { display: flex; justify-content: flex-start; width: 100%; margin-bottom: 50px; } .gap-icon-grid__row:last-child { margin-bottom: 0; } /* Oxygen: no gap after the last row (a button follows otherwise) */ .gap-icon-grid__item { display: flex; flex-direction: column; align-items: center; width: 33%; } .gap-icon-grid__icon { width: 85px; height: 85px; margin-bottom: 30px; } .gap-icon-grid__text { margin: 0; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; text-align: center; } @media (max-width: 767px) { .gap-icon-grid { padding-top: 50px; padding-bottom: 50px; } .gap-icon-grid__row { flex-direction: column; align-items: center; margin-bottom: 0; } .gap-icon-grid__item { width: 100%; margin-bottom: 50px; } } /* media-full caption (Oxygen: arrow + .h2 text under the medium, e.g. #text_block-467-1685) */ .gap-media-full__caption { display: flex; flex-direction: column; margin-top: 5px; } .gap-media-full__caption--right { align-items: flex-end; text-align: right; } .gap-media-full__caption--left { align-items: flex-start; text-align: left; } @media (max-width: 991px) { .gap-media-full__caption .gap-media-duo__text { width: 90%; } } /* section-header small: .h3-label + .h2 left-aligned (e.g. IT rocks "STEP 2 …") */ .gap-section-header--small { text-align: left; padding-top: 20px; padding-bottom: 20px; } .gap-section-header--small .gap-section__title { max-width: none; margin: 0; font-size: var(--gap-s-h2); line-height: 1.3; letter-spacing: 1px; } .gap-section-header--small .gap-section__eyebrow { margin-bottom: 10px; } .gap-section-header__action { margin: 30px 0 0; } /* ---- Buttons (Oxygen .button: sans 16px, 10px 16px, radius 8, 1px border, black on hover) ---- */ .gap-button { display: inline-block; padding: 10px 16px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--gap-sans); font-size: 16px; font-weight: 400; line-height: 1.2; color: inherit; text-decoration: none; background: transparent; } /* Buttons and pills, one behaviour everywhere (= the project pills on the home page): outline in the text colour, hover / focus / pressed invert to a fill in the text colour. --gap-fg / --gap-bg come from the surface (tokens.css). */ .gap-button:hover, .gap-button:focus-visible, .gap-button:active, .gap-pill:hover, .gap-pill:focus-visible, .gap-pill:active, .gap-job-list__pill:hover, .gap-job-list__pill:active, .gap-job-list__row:hover .gap-job-list__pill, .gap-stat-rows__pill:hover, .gap-stat-rows__pill:focus-visible, .gap-stat-rows__pill:active, .gap-projects__toggle:hover, .gap-projects__toggle:focus-visible, .gap-projects__toggle:active { background: var(--gap-fg); border-color: var(--gap-fg); color: var(--gap-bg); text-decoration: none; } .gap-button-block { padding: 20px var(--gap-s-gutter) clamp(2.3rem, 6.2vw, 4.6875rem); } .gap-button-block--center { text-align: center; } .gap-section-header__pairs { display: flex; width: min(1170px, 90%); margin: 30px auto 0; gap: 10px; font-size: 28px; line-height: 1.2; } .gap-section-header__pairs p { width: 50%; margin: 0; } .gap-section-header__pairs-left { text-align: right; } .gap-section-header__pairs-right { text-align: left; text-decoration: line-through; } /* ---- Job list (Oxygen Karriere #section-9-21) ---- */ /* Job list — Figma "GAP - Webdesign" 1:3905: label sans 500 24 (as the hero keywords), headline serif 500 106 underlined (as the Leistungen section headlines), intro serif 400 48, rows with the stat-rows wave line, "↘ Job" serif 64 underlined, info sans 500 24 and the stat-rows pill. */ .gap-job-list { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); } .gap-job-list__label, .gap-photo-grid__label, .gap-card-grid__label, .gap-section-header.gap-section-header--statement:not(.gap-section-header--small) .gap-section__eyebrow { margin: 0 0 clamp(20px, 2.6vw, 40px); 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; text-transform: none; } .gap-job-list__headline, .gap-photo-grid__headline, .gap-card-grid__headline, .gap-section-header.gap-section-header--statement:not(.gap-section-header--small) .gap-section__title { width: auto; max-width: none; margin: 0 0 clamp(20px, 2.6vw, 40px); padding-bottom: 0.15em; font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } .gap-job-list__intro, .gap-card-grid__intro, .gap-section-header.gap-section-header--statement:not(.gap-section-header--small) .gap-section__intro { width: auto; max-width: 32em; margin: 0; font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .gap-job-list__gif { width: var(--gap-job-gif, 337px); max-width: 60%; margin: 0 auto clamp(40px, 4vw, 60px); } /* like the Werbung finger (landing-intro symbol) */ .gap-job-list__gif img { display: block; width: 100%; height: auto; } .gap-hero--landing + .gap-job-list .gap-job-list__gif { width: max(var(--gap-job-gif, 337px), clamp(220px, 36vw, 540px)); max-width: 80%; margin-top: calc(-1 * clamp(40px, 9vw, 150px)); } /* Karriere: larger finger right below "Lust auf Gruppenarbeit?" */ .gap-job-list__list { margin: clamp(40px, 4vw, 60px) 0 0; padding: 0; list-style: none; } .gap-job-list__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: clamp(20px, 2.6vw, 40px); padding: clamp(40px, 4.2vw, 64px) 0 clamp(24px, 2.6vw, 40px); } .gap-job-list__wave { display: block; width: 100%; height: clamp(18px, 2.2vw, 34px); overflow: visible; } .gap-job-list__row > .gap-job-list__wave { position: absolute; top: 0; left: 0; } .gap-job-list__name { margin: 0; font-size: clamp(1.75rem, 4.2vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.03em; } .gap-job-list__name a { color: inherit; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-job-list__name a:hover, .gap-job-list__name a:focus-visible { text-decoration-thickness: 0.09em; } .gap-job-list__info { margin: 0; font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1; text-align: right; } .gap-job-list__pill, .gap-pill { display: inline-block; padding: 6px 20px; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1; text-decoration: none; white-space: nowrap; } /* = .gap-stat-rows__pill */ /* Section header "Linksbündig, große Headline" — Figma 1:3935: same head as the job list, "x statt y" rows (serif 500 80 / sans 500 24 / serif 400 80 struck through, 45 % ink), 1px rules, pills below. */ .gap-section-header.gap-section-header--statement:not(.gap-section-header--small) { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); text-align: left; } .gap-section-header.gap-section-header--statement.gap-section-header--first:not(.gap-section-header--small) { padding-top: clamp(60px, 7.9vw, 120px); } /* page without hero (Kontakt): room below the site header */ .gap-section-header__statt { margin: clamp(40px, 4vw, 60px) 0 0; padding: 0; list-style: none; } .gap-section-header__statt-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: clamp(16px, 2.6vw, 40px); padding: clamp(16px, 2vw, 30px) 0; border-top: 1px solid currentColor; font-size: clamp(2.5rem, 5.3vw, 5rem); line-height: 1; letter-spacing: -0.03em; } .gap-section-header__statt-yes { font-weight: 500; } .gap-section-header__statt-word { font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 500; letter-spacing: 0; } .gap-section-header__statt-no { font-weight: 400; text-decoration: line-through; text-decoration-thickness: 0.047em; opacity: 0.45; } /* Optional row animation (data-gap-statt, assets/js/sections.js): the struck word is typed in black, gets struck and greyed, then "x statt" slides in from the left and pushes it aside (yellow row while active). States are only set by JS; without it (or with reduced motion) the list is final. */ .gap-section-header__statt-row .is-statt-off { display: none; } .gap-section-header:has([data-gap-statt]) { overflow-x: clip; } /* "x statt" enters from the page edge, not the padding */ [data-gap-statt] .gap-section-header__statt-row { position: relative; isolation: isolate; } [data-gap-statt] .gap-section-header__statt-row::before { content: ""; position: absolute; inset: 0 calc(-1 * var(--gap-card-gutter)); z-index: -1; background: #f6ff00; opacity: 0; transition: opacity 0.3s ease; } /* full page width; the rule above stays inside the padding */ .gap-section-header__statt-row.is-statt-active::before { opacity: 1; } .gap-section-header__statt-row .is-statt-fade { opacity: 0; transition: opacity 0.5s var(--gap-ease); } .gap-section-header__statt-row .is-statt-fade.is-statt-in { opacity: 1; } .gap-section-header__statt-no.is-statt-plain { opacity: 1; text-decoration-color: transparent; } .gap-section-header__statt-no { transition: opacity 0.3s ease, text-decoration-color 0.3s ease; } .gap-section-header__statt-no .is-statt-char { visibility: hidden; } /* Photo grid — Figma 1:3974: rows of 2 and 3 photos (repeating), 480 high at 1512, radius 30, gap 30, caption sans 500 20 14 below. Leftovers fill their row. Lightbox: assets/js/lightbox.js. */ .gap-photo-grid { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); } .gap-photo-grid__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(20px, 2vw, 30px) clamp(16px, 2vw, 30px); margin: clamp(0px, 1.3vw, 20px) 0 0; padding: 0; list-style: none; } .gap-photo-grid__item { grid-column: span 2; min-width: 0; } .gap-photo-grid__item:nth-child(5n+1), .gap-photo-grid__item:nth-child(5n+2) { grid-column: span 3; } .gap-photo-grid__item:nth-child(5n+1):last-child, .gap-photo-grid__item:nth-child(5n+3):last-child { grid-column: span 6; } .gap-photo-grid__item:nth-child(5n+3):nth-last-child(2), .gap-photo-grid__item:nth-child(5n+4):last-child { grid-column: span 3; } .gap-photo-grid__figure { margin: 0; } .gap-photo-grid__open { display: block; border-radius: var(--gap-card-radius); cursor: zoom-in; } .gap-photo-grid__open:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .gap-photo-grid__image { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--gap-card-radius); transition: opacity 0.2s var(--gap-ease); } /* Figma 1:3974: rows of three are square, rows of two (and a lone last photo) keep the 355 × 240 format. */ @media (min-width: 768px) { .gap-photo-grid__item:nth-child(5n+1) .gap-photo-grid__image, .gap-photo-grid__item:nth-child(5n+2) .gap-photo-grid__image, .gap-photo-grid__item:nth-child(5n+3):last-child .gap-photo-grid__image, .gap-photo-grid__item:nth-child(5n+3):nth-last-child(2) .gap-photo-grid__image, .gap-photo-grid__item:nth-child(5n+4):last-child .gap-photo-grid__image { aspect-ratio: 355 / 240; } } .gap-photo-grid__open:hover .gap-photo-grid__image { opacity: 0.85; } .gap-photo-grid__caption { margin: 14px 0 0; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 500; line-height: 1.2; } @media (max-width: 767px) { .gap-photo-grid__grid { grid-template-columns: 1fr; } .gap-photo-grid__item, .gap-photo-grid__item:nth-child(n) { grid-column: auto; } .gap-photo-grid__image { height: auto; aspect-ratio: 4 / 3; } } .gap-lightbox { --gap-fg: #fff; --gap-bg: #000; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: clamp(60px, 6vw, 90px) clamp(16px, 6vw, 100px); border: 0; background: transparent; color: #fff; } .gap-lightbox::backdrop { background: rgba(0, 0, 0, 0.92); } .gap-lightbox[open] { display: flex; align-items: center; justify-content: center; } .gap-lightbox__figure { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; margin: 0; } .gap-lightbox__image { display: block; max-width: 100%; max-height: calc(100vh - clamp(170px, 14vw, 230px)); width: auto; height: auto; object-fit: contain; border-radius: var(--gap-card-radius); } .gap-lightbox__caption { margin: 14px 0 0; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 500; line-height: 1.2; text-align: center; } .gap-lightbox .gap-pill { min-height: 44px; min-width: 44px; cursor: pointer; } .gap-lightbox__close, .gap-lightbox__nav { background: transparent; } /* single class: hover / focus / pressed (.gap-pill:hover) still fill white */ .gap-lightbox__close { position: absolute; top: clamp(12px, 2vw, 30px); right: clamp(12px, 2vw, 30px); } .gap-lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); } .gap-lightbox__nav--prev { left: clamp(12px, 2vw, 30px); } .gap-lightbox__nav--next { right: clamp(12px, 2vw, 30px); } .gap-lightbox__count { position: absolute; top: clamp(12px, 2vw, 30px); left: clamp(12px, 2vw, 30px); margin: 0; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 44px; } html.gap-lightbox-open { overflow: hidden; } @media (max-width: 767px) { .gap-lightbox__nav { top: auto; bottom: 16px; transform: none; } } @media (prefers-reduced-motion: reduce) { .gap-photo-grid__image { transition: none; } } /* Cards — Figma 1:3712 (two columns, 711 wide at 1512, gap 30): card 4 % ink on the surface (#f5f5f5 on white), radius 30, padding 50/40; number sans 500 24 or label sans 500 14 caps, title serif 500 56, text serif 400 30/34.5, "Mehr lesen". */ .gap-card-grid { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); } .gap-card-grid__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(16px, 2vw, 30px); margin: clamp(40px, 4vw, 60px) 0 0; padding: 0; list-style: none; } .gap-card-grid__headline + .gap-card-grid__grid { margin-top: 0; } .gap-card-grid__card { min-width: 0; padding: clamp(28px, 3.3vw, 50px) clamp(20px, 2.6vw, 40px); border-radius: var(--gap-card-radius); background: color-mix(in srgb, currentColor 4%, transparent); } .gap-card-grid__eyebrow { margin: 0 0 clamp(10px, 1vw, 15px); font-family: var(--gap-sans); font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } .gap-card-grid__eyebrow--number { font-size: clamp(1.125rem, 1.6vw, 1.5rem); letter-spacing: 0; } .gap-card-grid__card--color { background: var(--gap-bg); color: var(--gap-fg); } /* field "Farbe der Kachel": surface pair from tokens.css, like the home service cards */ .gap-card-grid__title { margin: 0 0 clamp(12px, 1.3vw, 20px); padding-bottom: 0.1em; font-size: clamp(2rem, 3.7vw, 3.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.03em; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } .gap-card-grid__text { overflow: hidden; font-size: clamp(1.25rem, 2vw, 1.875rem); line-height: 1.15; letter-spacing: -0.01em; transition: max-height 0.6s ease; } .gap-card-grid__text p { margin: 0 0 0.6em; } .gap-card-grid__text > :last-child { margin-bottom: 0; } .gap-card-grid__more { min-height: 28px; margin: clamp(10px, 1vw, 16px) 0 0; padding: 4px 0; border: 0; background: none; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.2; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .gap-card-grid__more:hover { text-decoration-thickness: 2px; } @media (max-width: 767px) { .gap-card-grid__grid { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .gap-card-grid__text { transition: none; } } /* card-grid variants (Tourismus 1:4599): columns, "steps" with line + big number, "projects" with image + pill */ .gap-card-grid--cols-3 .gap-card-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gap-card-grid--cols-1 .gap-card-grid__grid { grid-template-columns: minmax(0, 1fr); } .gap-card-grid--cols-3:not(.gap-card-grid--steps):not(.gap-card-grid--projects) .gap-card-grid__title { font-size: clamp(1.75rem, 2.9vw, 2.75rem); text-decoration: none; } .gap-card-grid--cols-3:not(.gap-card-grid--steps):not(.gap-card-grid--projects) .gap-card-grid__text { font-size: clamp(1.125rem, 1.7vw, 1.625rem); line-height: 1.3; } .gap-card-grid--steps .gap-card-grid__card, .gap-card-grid--projects .gap-card-grid__card { padding: 0; border-radius: 0; background: none; } .gap-card-grid--steps .gap-card-grid__card { padding-top: clamp(24px, 2.6vw, 40px); border-top: 1px solid currentColor; } .gap-card-grid--steps .gap-card-grid__eyebrow.gap-card-grid__eyebrow--number { margin: 0 0 16px; font-family: inherit; font-size: clamp(4rem, 7.9vw, 7.5rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.02em; } .gap-card-grid--steps .gap-card-grid__title, .gap-card-grid--projects .gap-card-grid__title { margin: 0 0 16px; font-size: clamp(1.75rem, 2.6vw, 2.5rem); text-decoration: none; } .gap-card-grid--steps .gap-card-grid__text { font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; } .gap-card-grid__media { display: block; aspect-ratio: 711 / 520; margin: 0 0 18px; overflow: hidden; border-radius: var(--gap-card-radius); background: #e0e3db; } .gap-card-grid--cols-1 .gap-card-grid__media { aspect-ratio: 1452 / 520; } .gap-card-grid__media img { display: block; width: 100%; height: 100%; object-fit: cover; } .gap-card-grid--projects .gap-card-grid__eyebrow { margin: 0 0 18px; font-size: clamp(1rem, 1.3vw, 1.25rem); letter-spacing: 0; text-transform: none; } .gap-card-grid--projects .gap-card-grid__title { margin: 0; } .gap-card-grid__action { margin: 24px 0 0; } @media (max-width: 767px) { .gap-card-grid .gap-card-grid__grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; } .gap-card-grid--cols-1 .gap-card-grid__media { aspect-ratio: 711 / 520; } .gap-card-grid:not(.gap-card-grid--steps):not(.gap-card-grid--projects) .gap-card-grid__grid { row-gap: 16px; } } /* section-header statement: dark rounded box (CTA 1:4694) and closing text below the "statt" list (1:4723) */ .gap-section-header--box .gap-section-header__box { --gap-fg: #fff; --gap-bg: #000; padding: clamp(40px, 7.9vw, 120px) clamp(24px, 6.6vw, 100px); border-radius: var(--gap-card-radius); background: #000; color: #fff; } .gap-section-header.gap-section-header--statement:not(.gap-section-header--small) .gap-section__intro.gap-section__intro--after { max-width: none; margin-top: clamp(30px, 2.6vw, 40px); font-size: clamp(1.25rem, 2.1vw, 2rem); line-height: 1.05; } .gap-section-header__pills { display: flex; flex-wrap: wrap; gap: 10px; margin: clamp(40px, 4vw, 60px) 0 0; } .gap-job-list__empty { margin: clamp(40px, 4vw, 60px) 0 0; font-size: clamp(1.625rem, 3.2vw, 3rem); line-height: 1.05; } /* ---- Text duo (Oxygen Karriere #section-291-21) ---- */ /* ---- Feature row (Oxygen Commitment "Element 5": 1170 container, image 695, text 460) ---- */ .gap-feature-row { padding: 20px var(--gap-s-gutter); } .gap-feature-row__inner { display: flex; align-items: center; justify-content: space-between; gap: 15px; width: min(1170px, 100%); margin: 0 auto; } .gap-feature-row--image-right .gap-feature-row__inner { flex-direction: row-reverse; } .gap-feature-row__media { width: 59.4%; } .gap-feature-row__image { display: block; width: 100%; height: auto; aspect-ratio: 695 / 464; object-fit: cover; } .gap-feature-row__content { width: 39.3%; } .gap-feature-row__label { margin: 10px 0; font-size: 16px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .gap-feature-row__headline { margin: 0 0 10px; font-size: var(--gap-s-h2); font-weight: 400; line-height: 1.3; letter-spacing: 1px; } .gap-feature-row__text { font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } @media (max-width: 767px) { .gap-job-list__intro { font-weight: 500; } .gap-job-list__row { grid-template-columns: 1fr; row-gap: 14px; padding: 42px 0 30px; } .gap-job-list__row > .gap-job-list__wave, .gap-job-list__wave { height: 26px; } .gap-job-list__info { text-align: left; } .gap-job-list__pill { justify-self: start; } .gap-feature-row__inner, .gap-feature-row--image-right .gap-feature-row__inner { flex-direction: column; } .gap-feature-row__media, .gap-feature-row__content { width: 100%; } .gap-section-header__pairs { font-size: 22px; } } .gap-icon-grid__img { width: auto; height: 85px; margin-bottom: 30px; } .gap-section-header .gap-section__eyebrow--below { margin: 0; } /* Legal pages (Impressum, Datenschutz): core blocks in a .gap-legal group. Oxygen #section-2-42: padding-right 1% · ≤1120 15% · ≤991 10% · ≤767 17%; title 50px above copy; copy 21/1.5; paragraphs carry the 1em rhythm, headings have no margin (h4 sits flush on h5). */ .gap-page > .gap-legal { max-width: var(--gap-grid); margin: 0 auto; padding: 75px 1% 75px var(--gap-s-gutter); } /* Oxygen caps the legal section at 1440 */ .gap-legal__title { margin: 0 0 50px; font-size: var(--gap-s-h1); font-weight: 400; line-height: 1; letter-spacing: 0; } .gap-legal p { margin: var(--gap-s-copy) 0; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-legal h2, .gap-legal h3, .gap-legal h4 { margin: 0; font-weight: 400; letter-spacing: 0.58px; } .gap-legal h2 { font-size: 16px; line-height: 1.5; } /* Oxygen h3 */ .gap-legal h3 { font-size: 20px; line-height: 1.5; } /* Oxygen h4 */ .gap-legal h4 { font-size: 18px; line-height: 1.5; } /* Oxygen h5 */ .gap-legal a { text-decoration: none; overflow-wrap: anywhere; } .gap-legal a:hover, .gap-legal a:focus-visible { text-decoration: underline; } @media (max-width: 1120px) { .gap-page > .gap-legal { padding-inline: 15%; } } @media (max-width: 991px) { .gap-page > .gap-legal { padding-inline: 10%; } } @media (max-width: 767px) { .gap-page > .gap-legal { padding: 37px 17%; } } .gap-legal p:last-child { margin-bottom: 0; } /* group has an inner container in classic themes */ /* "Alle Projekte" (gap/project-archive + CPT archive) ↔ Oxygen page 17 (#section-18-17, .project-thumb-2026, .project-thumb-text-link, #filters, .button / [class*=-expanded] .button). */ .gap-projects { padding: 75px var(--gap-s-gutter); } .gap-projects__header { display: flex; align-items: center; margin: 0 0 30px; } .gap-projects__toggle { display: flex; align-items: center; justify-content: center; margin: 0; padding: 12px 18px; border: 1px solid #000; border-radius: 999px; background: #fff; color: #000; font: 700 18px/1.6 var(--gap-sans); letter-spacing: 1.71px; cursor: pointer; } .gap-projects__toggle[aria-expanded="true"] { position: relative; width: 60px; height: 50px; padding: 0; background: #000; } .gap-projects__toggle[aria-expanded="true"] span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .gap-projects__toggle[aria-expanded="true"]::before, .gap-projects__toggle[aria-expanded="true"]::after { content: ""; position: absolute; width: 26px; height: 3px; background: #fff; transform: rotate(45deg); } .gap-projects__toggle[aria-expanded="true"]::after { transform: rotate(-45deg); } .gap-projects__title { margin: 0 0 0 60px; font-size: 36px; font-weight: 400; line-height: 1.3; letter-spacing: 1px; } .gap-projects__title sup { position: relative; top: -18px; font-size: 18px; line-height: 0; vertical-align: baseline; } .gap-projects__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 15px; row-gap: 32px; } .gap-projects__card { display: grid; row-gap: 10px; align-content: start; } .gap-projects__card[hidden] { display: none; } /* Figma 1:1495: centred intro, "Kategorie / Branche auswählen" + toggle pills; category tag in the image like the Magazin cards */ .gap-projects__head { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 30px); margin: 0 0 clamp(40px, 4vw, 60px); } .gap-projects__intro { max-width: 30em; margin: 0 0 clamp(10px, 1.3vw, 20px); font-family: var(--gap-serif); font-size: clamp(1.75rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; text-align: center; } .gap-projects__filter-label { margin: 0; font-family: var(--gap-sans); font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1; text-align: center; } .gap-projects__pills { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(5px, 0.65vw, 10px) clamp(5px, 1vw, 15px); width: 100%; margin: 0; padding: 0; list-style: none; } /* Filter pills = the site pill (.gap-pill: outline in the text colour, hover / focus / pressed / selected filled). The four main categories keep the home page colours (Kultur gold, Marke rust, Digital blue), the rest is black. */ .gap-projects__pill { background: transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .gap-projects__pill--gold { --gap-fg: #999852; color: #999852; } .gap-projects__pill--rust { --gap-fg: #a8422e; color: #a8422e; } .gap-projects__pill--blue { --gap-fg: #1408ff; color: #1408ff; } .gap-projects__pill.is-active { background: var(--gap-fg); border-color: var(--gap-fg); color: var(--gap-bg); } .gap-projects__pill:focus-visible { outline: 2px solid var(--gap-fg); outline-offset: 3px; } .gap-projects__pill { display: inline-flex; align-items: baseline; gap: 10px; } .gap-projects__pill-count { position: relative; top: -0.7em; font-size: 12px; line-height: 1; } /* Figma 1:1382: number of linked projects, superscript */ .gap-projects__pill-x { display: none; line-height: 1; } .gap-projects__pill.is-active .gap-projects__pill-count { display: none; } /* active: "×" instead of the number, so the pill reads as removable */ .gap-projects__pill.is-active .gap-projects__pill-x { display: inline; } .gap-projects__more.is-animating { overflow: hidden; transition: height 0.45s ease, opacity 0.45s ease; } /* "+ mehr Filter anzeigen": ease open / close (project-archive.js) */ /* Filters (Projekte header): max 700 wide; the four main categories first, "+ mehr Filter anzeigen" opens the other categories and the branches (assets/js/project-archive.js). */ .gap-projects__filter-area, .gap-projects__more { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2vw, 30px); width: 100%; max-width: 860px; } /* 860: the four services (incl. "Kulturkommunikation") fit in one row */ .gap-projects__more[hidden] { display: none; } .gap-projects__more-toggle { padding: 0; border: 0; background: none; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.2; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; cursor: pointer; } .gap-projects__more-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Head 2026-10 (prototype "GAP Projektfilter"): page name, headline whose first word is the service filter (menu in the service colours), the line on the right follows the choice; "feiner sieben" opens Leistung | Branche (the pills above, left-aligned). */ .gap-projects .gap-projects__head { display: block; margin: 0 0 clamp(28px, 3vw, 48px); } .gap-projects__crumb p { 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-projects__hero { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; padding-top: clamp(54px, 6.4vw, 96px); } .gap-projects__head .gap-projects__title { max-width: 1000px; margin: 0; font-family: var(--gap-sans); font-size: clamp(62px, 9.6vw, 120px); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .gap-projects__cat { display: inline-flex; padding: 0; border: 0; background: none; color: var(--cat, #000); font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color 0.35s; } .gap-projects__cat:focus-visible { outline: 2px solid #000; outline-offset: 6px; } .gap-projects__word { display: inline-block; text-decoration: underline; text-decoration-thickness: 0.04em; text-underline-offset: 0.16em; transition: opacity 0.22s, transform 0.22s; } .gap-projects__word.is-out { opacity: 0; transform: translateY(0.15em); } .gap-projects__word.is-long { font-size: min(1em, 10vw); } /* "Kulturkommunikation," stays on the screen on phones */ .gap-projects__rest { display: block; } .gap-projects__sub { min-height: 2.6em; max-width: 24em; margin: 0 0 10px; font-family: var(--gap-sans); font-size: clamp(17px, 1.35vw, 20px); font-weight: 500; line-height: 1.3; } .gap-projects__catmenu { position: absolute; top: 100%; left: 0; z-index: 5; display: flex; flex-direction: column; min-width: 260px; padding: 12px 26px 12px 22px; border: 1px solid #000; border-radius: 16px; background: #fff; } .gap-projects__catmenu[hidden] { display: none; } .gap-projects__catmenu button { display: flex; align-items: baseline; gap: 10px; padding: 6px 0; border: 0; background: none; color: var(--cat); font-family: var(--gap-serif); font-size: clamp(28px, 4vw, 42px); font-weight: 400; line-height: 1.15; text-align: left; cursor: pointer; } .gap-projects__catmenu button sup { position: relative; top: -16px; font-family: var(--gap-sans); font-size: 12px; font-weight: 500; line-height: 0; } .gap-projects__catmenu button.is-on { font-weight: 500; text-decoration: underline; text-underline-offset: 6px; } .gap-projects__catmenu button:hover span { text-decoration: underline; text-underline-offset: 6px; } .gap-projects__catmenu button:focus-visible { outline: 2px solid #000; outline-offset: 4px; border-radius: 4px; } .gap-projects__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; padding-top: clamp(28px, 3vw, 44px); } .gap-projects__bar .gap-projects__more-toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; font-size: 17px; font-weight: 500; line-height: 1; text-decoration: none; } .gap-projects__bar .gap-projects__more-toggle > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .gap-projects__bar .gap-projects__more-toggle .gap-nav__pm { position: relative; top: 1px; margin-left: 3px; } .gap-projects__reset { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 5px 0 12px; border: 1px solid #000; border-radius: 999px; background: #fff; color: #000; font-family: var(--gap-sans); font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; } .gap-projects__reset[hidden] { display: none; } .gap-projects__reset-x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #000; color: #fff; font-size: 13px; } .gap-projects__reset:focus-visible { outline: 2px solid #000; outline-offset: 3px; } .gap-projects__head .gap-projects__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 0 64px; max-width: none; } .gap-projects__head .gap-projects__more[hidden] { display: none; } .gap-projects__group { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-block: 20px 28px; } .gap-projects__head .gap-projects__filter-label { font-size: 15px; font-weight: 500; text-align: left; } .gap-projects__head .gap-projects__pills { justify-content: flex-start; } .gap-projects__pill:disabled { opacity: 0.3; cursor: default; } .gap-projects__pill:disabled:hover { background: transparent; border-color: currentColor; color: inherit; } @media (max-width: 760px) { .gap-projects__head .gap-projects__more { grid-template-columns: 1fr; } } @media (max-width: 640px) { .gap-projects__hero { gap: 22px; } .gap-projects__sub { min-height: 0; margin: 0 0 0 33%; font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .gap-projects__word, .gap-projects__cat { transition: none; } } .gap-projects__image { position: relative; display: block; } @media (prefers-reduced-motion: reduce) { .gap-projects__pill { transition: none; } } .gap-projects__image img { width: 100%; height: 27vw; border-radius: 30px; object-fit: cover; } .gap-projects__text { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.4rem, 0.7vw, 0.625rem); color: #000; text-decoration: none; } .gap-projects__label { margin-top: 4px; font-size: clamp(0.75rem, 1.12vw, 1rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; } .gap-projects__name { margin: 0 10px 0 0; padding: 6px 20px; border: 1px solid #000; border-radius: 999px; font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.01em; /* same size as the filter pills (.gap-pill) */ text-align: left; } .gap-projects__load { display: flex; justify-content: center; margin: clamp(40px, 4vw, 60px) 0 0; } .gap-projects__load:has(> [hidden]) { display: none; } .gap-projects__text:focus-visible { outline: none; } .gap-projects__text:focus-visible .gap-projects__name { outline: 2px solid #000; outline-offset: 3px; } /* Same states as every pill on the site: black outline, hover / focus / pressed filled black with white text (case links and „Mehr Projekte anzeigen“). */ .gap-projects__name { transition: background-color 0.2s ease, color 0.2s ease; } .gap-projects__card:has(a:hover) .gap-projects__name, .gap-projects__text:is(:focus-visible, :active) .gap-projects__name, .gap-projects__load-more:is(:hover, :focus-visible, :active) { background: #000; border-color: #000; color: #fff; } .gap-projects__load-more { background: transparent; color: #000; transition: background-color 0.2s ease, color 0.2s ease; } @media (prefers-reduced-motion: reduce) { .gap-projects__name, .gap-projects__load-more { transition: none; } } @media (max-width: 991px) { .gap-projects__title { font-size: 28px; } } @media (max-width: 767px) { .gap-projects { padding-block: 36.8px; } .gap-projects__toggle { font-size: 16px; } .gap-projects__title { font-size: 24px; } .gap-projects__grid { grid-template-columns: 1fr; row-gap: 30px; } .gap-projects__image img { height: 48vw; } } @media (max-width: 479px) { } /* ── Home (Oxygen page 1611). Fluid sizes = Oxygen --base-* with cqw → vw. ─────────────────────────── */ :root { --gap-h-pad: clamp(2.3rem, 6.2vw, 4.6875rem); /* section padding 75 → 36.8 */ --gap-h-xxl: clamp(3rem, 8vw, 6rem); /* .text-xxl */ --gap-h-xxxl: clamp(4rem, 10vw, 9rem); /* .text-xxxl */ --gap-h-48: clamp(1.6rem, 5vw, 3rem); /* .text-48 */ --gap-h-28: clamp(1rem, 2vw, 1.75rem); /* .text-28 */ --gap-h-70: clamp(2.2rem, 6vw, 4.375rem); /* .mb-70 */ } .gap-page > .gap-gap-hero, .gap-page > .gap-service, .gap-page > .gap-statement, .gap-page > .gap-cta--hello, .gap-page > .gap-button-block--text { max-width: none; margin: 0; } /* mindthegap. (.gap / .gap-char / .gap-spacer) */ .gap-gap-hero { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-gap-hero__word { display: flex; flex-wrap: wrap; max-width: 100%; margin: 0 0 var(--gap-h-70); font-size: 213px; font-weight: 400; line-height: 1.2; letter-spacing: 0; } .gap-gap-hero__char, .gap-gap-hero__spacer { position: relative; display: inline-block; cursor: url("../../../../uploads/2025/05/T.jpg") 56 56, auto; } /* custom cursor over the whole word, the gap effect stays on the spacers */ .gap-gap-hero__char::after, .gap-gap-hero__spacer::after { content: ""; position: absolute; bottom: 0.085em; left: 0; width: 100%; height: 10px; background: currentColor; } .gap-gap-hero__spacer { z-index: 9; min-width: 0.16em; margin: 0 -0.08em; transition: width 1.6s ease-in-out; } .gap-gap-hero__spacer::before { content: ""; position: absolute; inset: 0 -0.06em; } /* wider invisible hit area: the gap opens a little before the pointer reaches it */ .gap-gap-hero__intro { margin: 0; font-size: var(--gap-h-48); line-height: 1.05; letter-spacing: -0.025rem; text-align: center; } .gap-gap-hero__sticker-row { display: flex; justify-content: flex-end; padding-right: clamp(0px, 14vw, 210px); margin: calc(var(--gap-h-70) * -0.6) 0 clamp(1rem, 2vw, 1.75rem); } .gap-gap-hero__sticker { display: inline-flex; flex-direction: column; align-items: flex-start; padding: clamp(0.6rem, 1vw, 0.9rem) clamp(1.2rem, 2vw, 1.8rem); border: 1.5px solid #000; border-radius: 30px; background: #fcbaff; color: #000; font-family: var(--gap-sans); font-size: clamp(1.4rem, 2.75vw, 2.5rem); line-height: 1.05; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.12em; transform: rotate(8deg); transition: transform 0.3s ease; } .gap-gap-hero__sticker:hover, .gap-gap-hero__sticker:focus-visible { transform: rotate(0deg); } .gap-gap-hero__sticker-arrow { display: block; text-decoration: none; } .gap-gap-hero__sticker-text { display: block; width: min-content; } /* Figma: one word per line ("Zusammenarbeit / starten"), no manual break needed */ @media (prefers-reduced-motion: reduce) { .gap-gap-hero__sticker { transition: none; } } @media (max-width: 1440px) { .gap-gap-hero__word { font-size: 150px; } } @media (max-width: 991px) { .gap-gap-hero__word { font-size: 120px; } } @media (max-width: 479px) { .gap-gap-hero__word { font-size: 96px; } } @media (prefers-reduced-motion: reduce) { .gap-gap-hero__spacer { transition: none; } } /* Service teaser — Figma "GAP - Webdesign" 1:670: rounded card in the page gutter, project pills below */ :root { --gap-card-gutter: clamp(17px, 2vw, 30px); --gap-card-radius: clamp(20px, 2vw, 30px); } .gap-service { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter) 0; } /* Figma: 60px spacer between sections */ .gap-service__card { position: relative; display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 30px; width: 100%; padding: clamp(3rem, 8.3vw, 7.5rem) 30px clamp(2rem, 4.1vw, 3.75rem); border-radius: var(--gap-card-radius); overflow: hidden; } .gap-service__gifs { position: absolute; inset: 0; z-index: 0; overflow: hidden; } .gap-service__gif { position: absolute; inset: 0; display: none; width: 100%; height: 100%; object-fit: cover; } .gap-service__gif.is-visible { display: block; } .gap-service__main, .gap-service__image { position: relative; z-index: 1; } .gap-service__main { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; max-width: min(922px, 64%); color: inherit; text-align: left; text-decoration: none; } .gap-service__label { font-family: var(--gap-sans); font-size: var(--gap-h-28); line-height: 1; text-transform: uppercase; } .gap-service__headline { margin: 0; font-size: clamp(3rem, 7.3vw, 6.625rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.1125rem; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-service__text { margin: 15px 0 0; font-size: var(--gap-h-48); line-height: 1.05; letter-spacing: -0.025rem; } .gap-service__image { flex: 0 0 auto; width: clamp(140px, 30.8vw, 447px); margin: calc(clamp(3rem, 8.3vw, 7.5rem) * -1 + clamp(20px, 2.5vw, 36px)) clamp(0px, 1.6vw, 23px) 0 0; } .gap-service__image img, .gap-service__image svg { display: block; width: 100%; height: auto; overflow: visible; } .gap-motion-template.is-pending [data-mt-entrance] { visibility: hidden; } .gap-service .gap-motion-template { --gap-tile-accent: var(--gap-service-fg); } /* home cards: animation in the card's text colour */ /* until the scene is mounted: no flash of the finished artwork */ .gap-service__projects { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 0; list-style: none; } .gap-service { --gap-service-bg: #fff; --gap-service-fg: #000; } .gap-service--ink { --gap-service-bg: #000; --gap-service-fg: #fff; } .gap-service--coral { --gap-service-bg: #ff9393; --gap-service-fg: #000; } .gap-service--yellow { --gap-service-bg: #ffe271; --gap-service-fg: #000; } .gap-service--silver { --gap-service-bg: #a6a6a6; --gap-service-fg: #1408ff; } .gap-service--gold { --gap-service-bg: #999852; --gap-service-fg: #fff; } .gap-service--orange { --gap-service-bg: #d28539; --gap-service-fg: #f2ff00; } .gap-service--rust { --gap-service-bg: #a8422e; --gap-service-fg: #f6ff00; } .gap-service--mint { --gap-service-bg: #c2f7bb; --gap-service-fg: #000; } .gap-service__pill { display: inline-block; padding: 6px 20px; border: 1px solid currentColor; border-radius: 999px; background: var(--gap-service-fg); color: var(--gap-service-bg); font-family: var(--gap-sans); font-size: clamp(1rem, 1.7vw, 1.5rem); line-height: 1; text-decoration: none; } .gap-service__pill:hover, .gap-service__pill:focus-visible, .gap-service__pill:active { background: var(--gap-service-bg); color: var(--gap-service-fg); } .gap-service__pill:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } @media (max-width: 991px) { .gap-service__card { flex-direction: column; padding-inline: 20px; } .gap-service__main { max-width: none; } .gap-service__image { width: min(60%, 300px); margin: 0 0 0 auto; } .gap-service__gifs { display: none; } } /* Statement (home "Intro", .gap-medium) */ .gap-statement { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-statement__headline { width: 100%; margin: 0; font-size: var(--gap-h-xxl); font-weight: 400; line-height: 0.95; letter-spacing: -0.1125rem; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-statement--center .gap-statement__headline { text-align: center; } .gap-statement__label { margin: 0; font-size: 17px; line-height: 1.6; } .gap-statement__text { margin: 0; font-size: var(--gap-h-48); font-weight: 500; line-height: 1.042; letter-spacing: -0.025rem; } /* "Fließtext" variant — Figma "GAP - Webdesign" 1:772: sans 500 24/27.6, -2% tracking, card gutter (30px at 1512) */ .gap-statement--copy { padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); } .gap-statement--copy .gap-statement__text { font-family: var(--gap-sans); font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.15; letter-spacing: -0.02em; } /* Leistungs-Landingpages (Figma 1:835 / 1:838; mobile 1:241 / 1:243): lead text serif 500 68/71.4 (36/37.4), section headline serif 500 106/100.7 centred (48/49.9), body serif 400 48/50.4 (26/27 500). */ .gap-statement--lead, .gap-statement--body { gap: 30px; padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); } .gap-statement--lead { padding-bottom: clamp(80px, 13.2vw, 200px); } /* Figma: 200px spacer after the lead text */ .gap-statement--lead .gap-statement__text { font-size: clamp(2.25rem, 4.5vw, 4.25rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; } .gap-statement--body .gap-statement__text { font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .gap-statement--hl-section .gap-statement__headline { padding-bottom: 0.15em; font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; } @media (max-width: 767px) { .gap-statement--body .gap-statement__text { font-weight: 500; } } /* Project pair — Figma "GAP - Webdesign" 1:775 / 1:785 / 1:794 (desktop 1512: columns 766 · 594 · round 310, gap 100, captions serif 500 48/51.8 underlined, "↘ zu allen Projekten" 106/100.7) and mobile 1:94 (stacked, captions 26/27 400, link 48px right-aligned). */ .gap-page > .gap-project-pair { max-width: none; margin: 0; } .gap-project-pair { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(30px, 6.6vw, 100px); padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter) 0; } .gap-project-pair__col { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(40px, 7vw, 106px); min-width: 0; } .gap-project-pair__col--wide { flex: 0 1 52.75%; } .gap-project-pair__col--narrow { flex: 0 1 40.9%; } .gap-project-pair__col--circle { flex: 1 1 0; } .gap-project-pair__card { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(10px, 2vw, 30px); width: 100%; color: inherit; text-decoration: none; } .gap-project-pair__media { display: block; width: 100%; } .gap-project-pair__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gap-card-radius); } .gap-project-pair__col--circle .gap-project-pair__media img { width: clamp(190px, 20.5vw, 310px); aspect-ratio: 1; border-radius: 50%; } .gap-project-pair__caption { font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 500; line-height: 1.08; letter-spacing: -0.02em; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-project-pair__card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .gap-project-pair__more { display: inline-block; color: inherit; font-family: var(--gap-serif); font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-project-pair__arrow, .gap-project-pair__more-text { display: block; } .gap-project-pair__more-text { width: min-content; } /* Figma: "zu allen / Projekten" */ .gap-project-pair__more:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* Leistungen variants (Figma 1:1025 / 1:1034 / 1:1234): "free" = image/GIF in its own proportions, pushed towards the middle; empty side keeps its half; image + link pairs ("inline") split 50/50 and stay side by side on phones (1:410 / 1:486). */ .gap-project-pair__col--free, .gap-project-pair__col--empty, .gap-project-pair--inline .gap-project-pair__col { flex: 1 1 0; } .gap-project-pair__col--free { align-items: flex-end; } .gap-project-pair__col--free .gap-project-pair__card { align-items: flex-end; } .gap-project-pair__col--free .gap-project-pair__media { display: flex; justify-content: flex-end; width: 100%; } .gap-project-pair__col--free .gap-project-pair__media img { width: auto; max-width: 100%; aspect-ratio: auto; object-fit: cover; object-position: top; border-radius: 0; } @media (max-width: 767px) { .gap-project-pair { flex-direction: column; gap: 30px; padding-top: 30px; } .gap-project-pair__col, .gap-project-pair__col--wide, .gap-project-pair__col--narrow, .gap-project-pair__col--circle { flex: none; width: 100%; gap: 30px; } .gap-project-pair__caption { font-weight: 400; line-height: 1.04; } .gap-project-pair__more { align-self: flex-end; } /* Figma mobile 1:247–1:256: "↘ zum Strauss" left, "↘ zum Case" from ~45%, the round case right-aligned. */ .gap-project-pair__more--card { align-self: flex-start; } .gap-project-pair__col + .gap-project-pair__col .gap-project-pair__more--card { margin-left: 44%; } .gap-project-pair__col--circle .gap-project-pair__more--card ~ .gap-project-pair__card { align-items: flex-end; } /* not on the home page */ .gap-project-pair__col--circle .gap-project-pair__more--card ~ .gap-project-pair__card .gap-project-pair__media { width: auto; } .gap-project-pair--inline { flex-direction: row; gap: 20px; } .gap-project-pair--inline .gap-project-pair__col { flex: 1 1 0; width: auto; } .gap-project-pair--inline .gap-project-pair__col .gap-project-pair__more--card { margin-left: 0; font-size: clamp(2rem, 9.5vw, 3rem); } } /* Page intro (/leistungen) — Figma 2:212 (1512: label + intro sans 500 24/27.6, h1 sans 500 210/199.5 -5% underlined) · mobile 1:268 (18/21.6 400 stacked, h1 96/91.2). */ .gap-page > .gap-page-intro, .gap-page > .gap-service-tile { max-width: none; margin: 0; } .gap-page-intro { padding: clamp(40px, 5.3vw, 80px) var(--gap-card-gutter) 0; } .gap-page-intro__top { display: flex; align-items: flex-start; gap: clamp(20px, 10vw, 150px); } .gap-page-intro__label, .gap-page-intro__text { 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-page-intro__label { flex: 1 1 0; } .gap-page-intro__text { flex: 0 1 999px; } .gap-page-intro__headline { margin: clamp(80px, 15vw, 225px) 0 0; font-family: var(--gap-sans); font-size: clamp(4rem, 13.9vw, 13.125rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } /* Service tile (/leistungen) — Figma 2:229 ff. (pill centred on top, "↘ Service" serif 400 106 accent + claim serif 500 106 right, copy serif 400 48/50.4, illustration floating top-left) · mobile 1:273 ff. (illustration, label, pill, claim, copy 26/27 500). */ /* Figma: the illustration belongs to its own tile — it sits in the top row next to the pill and reaches down behind its own heading (text stays on top), but keeps clear of the tile above (padding-top). */ .gap-service-tile { --gap-tile-mw: min(29vw, 441px); position: relative; display: grid; grid-template-columns: 1fr; grid-template-areas: "top" "head" "text" "pill"; align-items: end; gap: 30px; padding: clamp(60px, 6.6vw, 100px) var(--gap-card-gutter) 0; } .gap-service-tile > :not(.gap-service-tile__media) { position: relative; z-index: 1; } .gap-service-tile__media { grid-area: top; justify-self: start; align-self: end; width: var(--gap-tile-mw); margin: 0 0 calc(var(--gap-tile-mw) * var(--gap-tile-overlap, -0.45)) 13%; } .gap-service-tile__media--medium { --gap-tile-overlap: -0.6; } /* Figma: the tall Digital bundle reaches ~⅔ into the heading row */ .gap-service-tile__media--large { --gap-tile-overlap: -0.4; } .gap-service-tile__media--x-inner { margin-left: 19%; } .gap-service-tile:has(.gap-service-tile__media--small) { --gap-tile-mw: min(24vw, 362px); } .gap-service-tile:has(.gap-service-tile__media--large) { --gap-tile-mw: min(43vw, 647px); } .gap-service-tile__pill { grid-area: pill; align-self: start; justify-self: start; padding: 0 20px; border: 1px solid var(--gap-tile-accent); border-radius: 999px; color: var(--gap-tile-accent); font-family: var(--gap-sans); font-size: 24px; font-weight: 400; line-height: 1; text-decoration: none; } /* always below the copy, every breakpoint */ .gap-service-tile__pill:hover, .gap-service-tile__pill:focus-visible { background: var(--gap-tile-accent); color: #fff; } .gap-service-tile__label, .gap-service-tile__claim { margin: 0; font-family: var(--gap-serif); font-size: clamp(3rem, 7vw, 6.625rem); line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-service-tile__label { grid-area: head; justify-self: start; padding-bottom: 0.15em; color: var(--gap-tile-accent); font-weight: 400; } .gap-service-tile__label a { color: inherit; text-decoration: inherit; } .gap-service-tile__arrow, .gap-service-tile__name { display: block; } .gap-service-tile__arrow { letter-spacing: 0.1em; } .gap-service-tile__claim { grid-area: head; justify-self: end; padding-bottom: 0.15em; font-weight: 500; text-align: right; } .gap-service-tile__text { grid-area: text; font-family: var(--gap-serif); font-size: clamp(1.625rem, 3.2vw, 3rem); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; } .gap-service-tile__text p { margin: 0 0 1em; } .gap-service-tile__text > :last-child { margin-bottom: 0; } .gap-service-tile:last-child { padding-bottom: clamp(120px, 15.9vw, 240px); } /* Figma: 2 × 120 spacer before the footer */ /* Motion Template tinted in the tile accent (bundles are white/yellow for the home cards); mask strokes stay white. */ .gap-motion-template--tint :not(mask) > [stroke]:not([stroke="none"]) { stroke: var(--gap-tile-accent); } .gap-motion-template--tint [fill]:not([fill="none"]) { fill: var(--gap-tile-accent); } .gap-service-tile__media svg { display: block; width: 100%; height: auto; overflow: visible; } /* Label and claim share one cell (Figma lets their boxes overlap, the right-aligned lines never touch); below 1100px they would collide, so the tile switches to the stacked mobile order. */ @media (max-width: 1099px) { .gap-service-tile { padding-top: 30px; grid-template-areas: "media" "label" "claim" "text" "pill"; gap: 15px; } .gap-service-tile__label { grid-area: label; } .gap-service-tile__claim { grid-area: claim; } .gap-service-tile__media, .gap-service-tile__media--x-inner { grid-area: media; justify-self: center; width: min(75%, 300px); margin: 0 0 15px; } .gap-service-tile__pill { align-self: auto; } .gap-service-tile__pill { grid-area: pill; justify-self: start; margin-top: 15px; } } /* Tablet: label sits left of the claim (bottom-aligned), the pill below the copy; animation closer to the text. */ @media (min-width: 768px) and (max-width: 1099px) { .gap-service-tile { grid-template-columns: auto 1fr; grid-template-rows: auto 1fr auto auto auto; grid-template-areas: "media media" ". claim" "label claim" "text text" "pill pill"; column-gap: 30px; } .gap-service-tile__claim { align-self: end; } .gap-service-tile__media, .gap-service-tile__media--x-inner { margin-bottom: -30px; } } @media (max-width: 767px) { .gap-page-intro__top { flex-direction: column; gap: 20px; } .gap-page-intro__label, .gap-page-intro__text { flex: none; font-size: 18px; font-weight: 400; line-height: 1.2; } .gap-page-intro__headline { margin-top: 90px; font-size: 18.5vw; } /* Figma 96px breaks "zusamm-en."; 18.5vw keeps the longest word whole */ .gap-service-tile__text { font-weight: 500; line-height: 1.04; } } /* Key-figure rows — Figma "GAP - Webdesign" 1:862 (1512: wave 2px, title serif 400 48/45.6, pill sans 24, figures serif 400 101/96 with 48px unit, big figure 200/190, text 48/45.6) · mobile 1:390 (title 23, figures 49, big 97 indented ~20%). */ .gap-page > .gap-stat-rows { max-width: none; margin: 0; } .gap-stat-rows { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); } .gap-stat-rows__row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 44%); grid-template-areas: "title pill big" "stats stats big" "stats stats note"; align-items: start; column-gap: clamp(20px, 2.6vw, 40px); row-gap: clamp(10px, 1.2vw, 18px); padding: clamp(40px, 3.9vw, 59px) clamp(0px, 0.6vw, 8px) clamp(40px, 4vw, 60px); } .gap-stat-rows__wave { position: absolute; top: 0; left: 0; width: 100%; height: clamp(18px, 2.2vw, 34px); overflow: visible; } .gap-stat-rows__title, .gap-stat-rows__stat, .gap-stat-rows__big, .gap-stat-rows__note { margin: 0; font-family: var(--gap-serif); font-weight: 400; letter-spacing: -0.05em; } .gap-stat-rows__title { grid-area: title; max-width: 9.5em; font-size: clamp(1.45rem, 3.2vw, 3rem); line-height: 0.95; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-stat-rows__pill { grid-area: pill; justify-self: end; padding: 6px 20px; border: 1px solid currentColor; border-radius: 999px; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1; text-decoration: none; white-space: nowrap; } .gap-stat-rows__stats { grid-area: stats; } .gap-stat-rows__stat { font-size: clamp(1.45rem, 3.2vw, 3rem); line-height: 1; } .gap-stat-rows__value { font-size: 2.1em; line-height: 0.95; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-stat-rows__big { grid-area: big; padding-bottom: 0.1em; font-size: clamp(6rem, 13.2vw, 12.5rem); line-height: 0.95; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; white-space: nowrap; } .gap-stat-rows__note { grid-area: note; max-width: 9.5em; font-size: clamp(1.45rem, 3.2vw, 3rem); line-height: 0.95; } @media (max-width: 767px) { .gap-stat-rows__row { grid-template-columns: 1fr; grid-template-areas: "title" "stats" "big" "note" "pill"; row-gap: 12px; padding: 42px 0 40px; } .gap-stat-rows__wave { height: 26px; } .gap-stat-rows__stat { font-size: 1.45rem; } .gap-stat-rows__big { margin-top: 8px; padding-left: 17%; font-size: 21vw; } .gap-stat-rows__note, .gap-stat-rows__pill { margin-left: 17%; } .gap-stat-rows__pill { justify-self: start; } } /* gap/button "Großer unterstrichener Link" (home "Alle Projekte") */ .gap-button-block--text { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-text-link { color: inherit; font-family: var(--gap-sans); font-size: var(--gap-h-48); font-weight: 500; line-height: 1.042; letter-spacing: -0.025rem; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } /* gap/button "Riesiger Link mit Pfeil" — Figma "GAP - Webdesign" 1:807 (↘ Preisliste downloaden): serif 260/247 at 1512, -5% tracking */ .gap-page > .gap-button-block--huge { max-width: none; margin: 0; } .gap-button-block--huge { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-huge-link { display: inline-block; color: inherit; font-family: var(--gap-serif); font-size: clamp(3.5rem, 17.2vw, 16.25rem); font-weight: 400; line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-huge-link__arrow, .gap-huge-link__text { display: block; } .gap-huge-link__text { width: min-content; } /* Figma: one word per line ("Preisliste / downloaden") */ .gap-huge-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* gap/cta "hello" (home "Sag Hallo") */ /* Figma 1:810 (1512: serif 400 106/100.7, -5%, image 269×215, gap 40, bottom-aligned) · mobile 1:224 (48px, image 102×82, gap 10) */ .gap-cta--hello { display: flex; flex-direction: row; align-items: flex-end; gap: clamp(10px, 2.6vw, 40px); padding: clamp(40px, 5.3vw, 80px) var(--gap-card-gutter) 0; text-align: left; } .gap-cta__hello-image { display: block; flex: 0 0 auto; width: clamp(102px, 17.8vw, 269px); } .gap-cta__hello-image img { display: block; width: 100%; height: auto; } .gap-cta__hello-link { display: inline-block; padding-bottom: 0.22em; color: inherit; font-family: var(--gap-serif); font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 400; line-height: 0.95; /* padding: room for the g descender + underline, the next section paints over overflow */ letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } .gap-cta__hello-arrow, .gap-cta__hello-text { display: block; } /* Figma: the underline under "↘" runs a little past the arrow — letter-spacing after the glyph is underlined, a trailing space is not */ .gap-cta__hello-arrow, .gap-project-pair__arrow, .gap-huge-link__arrow { letter-spacing: 0.1em; } .gap-cta__hello-link:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } /* gap/media-duo image cells with link + caption (home project teasers) */ .gap-media-duo__link { display: block; color: inherit; text-decoration: none; } .gap-media-duo__caption { display: block; font-family: var(--gap-sans); margin: 5px 10px 0 0; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; text-align: left; } /* Home project teasers (Oxygen .project-thumb in "Teaser volle Breite" / "Teaser Zweispaltig" on page 1611): sections padded 75/36.8, "Projekte" 36px/1.6 with 70px below, images cropped to 54vw (full) / 27vw (half), captions in copy size. Scoped to the front page; the same blocks keep their project-page look elsewhere. */ .gap-home-blocks .gap-section-header--small { padding: var(--gap-h-pad) var(--gap-s-gutter) 0; } .gap-home-blocks .gap-section-header--small .gap-section__title { margin: 0 0 var(--gap-h-70); font-size: 36px; line-height: 1.6; letter-spacing: 0; } .gap-home-blocks .gap-section-header--small + .gap-media-full { padding-top: 0; } .gap-home-blocks .gap-media-full { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-home-blocks .gap-media-full__link .gap-media-full__image { width: 100%; height: 54vw; object-fit: cover; } .gap-home-blocks .gap-media-full__caption p { margin: 0; font-family: var(--gap-sans); font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-home-blocks .gap-media-duo { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-media-duo__link .gap-media-duo__image { width: 100%; height: 27vw; object-fit: cover; } .gap-home-blocks .gap-media-full__caption, .gap-media-duo__link .gap-media-duo__caption { margin-top: 5px; } .gap-text-link { display: inline-block; } @media (max-width: 767px) { .gap-media-duo__link .gap-media-duo__image { height: 54vw; } .gap-home-blocks .gap-media-full__caption .gap-media-duo__text { width: auto; } .gap-home-blocks .gap-media-full { padding-bottom: calc(var(--gap-h-pad) + 30px); } /* Oxygen #link-38: margin-bottom 30px on mobile */ } /* Page width model (like Oxygen): GAP section blocks span the full viewport with their own gutters. Only loose core text blocks placed directly on a page keep a 1440px reading width. */ .gap-page > :where(p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, pre, table, .wp-block-image, .wp-block-quote, .wp-block-buttons, .wp-block-embed) { max-width: var(--gap-grid); margin-inline: auto; } /* Team grid (gap/team-list) — Figma 1:4135 "Alle auf einen Blick": label sans 500 24, three columns gap 30 (rows 60 apart), photo 464 × 560 radius 30, 20 between parts; role sans 500 14 caps +0.06em, name serif 500 40/40, bio serif 400 22/28.6 shortened to 6 lines, "Mehr lesen" sans 20 underlined; links in a bio ("↘ Zur Karriereseite") look like "Mehr lesen". Scoped under .gap-team-list so the old side-by-side card rules in components.css / team.css don't apply. */ .gap-team-list { padding: 0 var(--gap-card-gutter) clamp(60px, 8vw, 120px); } .gap-page > .gap-team-list { max-width: none; margin: 0; } .gap-team-list__label { margin: 0 0 clamp(40px, 4.6vw, 70px); 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-team-list .gap-team-page__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 60px) clamp(16px, 2vw, 30px); align-items: start; } .gap-team-list .gap-team-card { display: flex; flex-direction: column; gap: 20px; min-height: 0; margin: 0; padding: 0; border: 0; } .gap-team-list .gap-team-card__image { display: block; width: 100%; height: auto; max-height: none; aspect-ratio: 464 / 560; object-fit: cover; border-radius: var(--gap-card-radius); } .gap-team-list .gap-team-card__content { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; } .gap-team-list .gap-team-card__role { margin: 0; font-family: var(--gap-sans); font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } .gap-team-list .gap-team-card__name { margin: 0; font-family: var(--gap-serif); font-size: clamp(1.75rem, 2.65vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .gap-team-list .gap-team-card__bio { max-width: none; overflow: hidden; font-family: var(--gap-serif); font-size: clamp(1.125rem, 1.45vw, 1.375rem); font-weight: 400; line-height: 1.3; letter-spacing: 0; transition: max-height 0.6s ease; } .gap-team-list .gap-team-card__bio p { margin: 0; } .gap-team-list .gap-team-card__bio p + p, .gap-team-list .gap-team-card__bio p + div { margin-top: 0.6em; } .gap-team-list .gap-team-card__bio .yrm-inner-content-wrapper > p + p { margin-top: 0; } /* Shortened bio: whole lines only, "…" at the end (sections.js data-gap-clamp-ellipsis). */ .gap-team-card__bio.is-line-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--gap-clamp-lines, 6); line-clamp: var(--gap-clamp-lines, 6); overflow: hidden; } .gap-team-list .gap-team-card__bio a, .gap-team-list .gap-team-card__more { display: inline-block; min-height: 24px; margin: 0; padding: 2px 0; border: 0; background: none; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); font-weight: 400; line-height: 1.2; letter-spacing: 0; text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; } .gap-team-list .gap-team-card__more { margin-top: -10px; } .gap-team-list .gap-team-card__more[hidden] { display: none; } /* only when there is more to read */ @media (max-width: 991px) { .gap-team-list .gap-team-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .gap-team-list .gap-team-page__grid { grid-template-columns: 1fr; row-gap: 40px; } } @media (prefers-reduced-motion: reduce) { .gap-team-list .gap-team-card__bio { transition: none; } } /* Word carousel ↔ Oxygen #section-487-24 + "Vertical slider" code block: 1170px row centred, prefix + word window (fixed width, longest word may overhang like in Oxygen); words slide in from above (overshoot) and out downwards, 0.6 s each. */ .gap-page > .gap-word-carousel { max-width: none; margin: 0; } .gap-word-carousel { display: flex; justify-content: center; padding: 75px 0; text-align: center; } .gap-word-carousel__inner { display: flex; align-items: center; justify-content: center; width: 1170px; max-width: 100%; margin: 0; font-size: var(--gap-s-h1); font-weight: 400; line-height: 1; letter-spacing: 0; } .gap-word-carousel__prefix { margin-right: 16px; } .gap-word-carousel__words { position: relative; display: inline-block; width: 4.51em; height: 1em; text-align: left; } /* measured Oxygen: 325px @72px, 166px @36px (mobile) */ .gap-word-carousel__word { position: absolute; top: 0; left: 0; white-space: nowrap; opacity: 0; transform: translateY(-101%); } .gap-word-carousel__word.is-visible { opacity: 1; transform: none; animation: gap-wc-in 0.6s 1 forwards; } .gap-word-carousel__word.is-hidden { opacity: 0; animation: gap-wc-out 0.6s; } @keyframes gap-wc-in { 0% { opacity: 0; transform: translateY(-101%); } 60% { opacity: 1; transform: translateY(20%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes gap-wc-out { 0% { opacity: 1; transform: translateY(0); } 60% { opacity: 0; transform: translateY(120%); } 100% { opacity: 0; transform: translateY(100%); } } @media (max-width: 1120px) { .gap-word-carousel__inner { width: 90%; } } @media (max-width: 991px) { .gap-word-carousel__prefix { margin-right: 10px; } } @media (max-width: 767px) { .gap-word-carousel { padding: 50px 0; } } @media (max-width: 479px) { .gap-word-carousel__inner { flex-direction: column; } .gap-word-carousel__prefix { margin: 0 10px 20px 0; } .gap-word-carousel__words { width: 4.61em; } } @media (prefers-reduced-motion: reduce) { .gap-word-carousel__word { animation: none !important; } } /* Oxygen mobile: no gap after the last icon item */ @media (max-width: 767px) { .gap-icon-grid__row:last-child .gap-icon-grid__item:last-child { margin-bottom: 0; } } /* "Sag Hallo" banner: Oxygen weight 400 on every page, thin underline like .underline__light */ .gap-cta__banner-link { font-weight: 400; text-decoration-thickness: 0.047em; text-underline-offset: 0.12em; } /* Locations (gap/locations) ↔ Oxygen Kontakt #section-2-28: label, 3-column grid (gap 20px 17px), headline 36px/1.6 in column 1, per location: address (copy, margin 40), maps link (underlined, margin 20), key 16/12px 500 (margin 10), value (copy, margin 20). Mobile: one column, 20px gaps. */ .gap-page > .gap-locations { max-width: none; margin: 0; } .gap-locations { padding: var(--gap-h-pad) var(--gap-s-gutter); } .gap-locations__label { margin: 0; font-family: var(--gap-sans); font-size: 16px; font-weight: 400; line-height: 1.6; letter-spacing: 2px; text-transform: uppercase; } .gap-locations__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 17px; } .gap-locations__headline { margin: 0; font-size: 36px; font-weight: 400; line-height: 1.6; letter-spacing: 0; } .gap-locations__item { display: flex; flex-direction: column; align-items: flex-start; } .gap-locations__address { margin: 0 0 40px; font-size: var(--gap-s-copy); font-style: normal; line-height: 1.5; letter-spacing: 0.58px; } .gap-locations__address strong { font-weight: inherit; } .gap-locations__maps, .gap-locations__value { display: block; margin: 0 0 20px; color: inherit; font-size: var(--gap-s-copy); line-height: 1.5; letter-spacing: 0.58px; } .gap-locations__maps { text-decoration: underline; } .gap-locations__value { text-decoration: none; } .gap-locations__value:hover, .gap-locations__value:focus-visible { text-decoration: underline; } .gap-locations__value--email { margin-bottom: 0; } /* Oxygen: only the e-mail has no margin below; a trailing phone keeps its 20px */ .gap-locations__key { margin: 0 0 10px; font-size: clamp(0.75rem, 1.12vw, 1rem); font-weight: 500; line-height: 1.4; letter-spacing: 0.02em; } @media (max-width: 767px) { .gap-locations__label { font-size: 14px; } .gap-locations__grid { display: flex; flex-direction: column; } } /* Large section header ↔ Oxygen "Element 6 ohne Bild" / "Subheadline Headline Text ohne HG" (verified on Kontakt, Team, Agrana): section 75px 0 (mobile 50px 0), label sans 16/14px weight 400 line-height 1.6 with 40px below, headline 1170px (90% ≤1120). The small variant keeps its own rules. */ .gap-section-header:not(.gap-section-header--small) { padding: 75px 0; } .gap-section-header:not(.gap-section-header--small) .gap-section__eyebrow { margin: 0 0 40px; font-weight: 400; line-height: 1.6; } .gap-section-header:not(.gap-section-header--small) .gap-section__title { width: 1170px; max-width: 100%; } .gap-section-header:not(.gap-section-header--small) .gap-section__eyebrow--below { margin: 0 0 40px; } @media (min-width: 768px) { .gap-space-bottom--none { padding-bottom: 0 !important; } } /* Oxygen keeps the bottom padding on mobile */ @media (max-width: 1120px) { .gap-section-header:not(.gap-section-header--small) .gap-section__title { width: 90%; } } @media (max-width: 767px) { .gap-section-header:not(.gap-section-header--small) { padding: 50px 0; } .gap-section-header:not(.gap-section-header--small) .gap-section__eyebrow { font-size: 14px; } } /* Gravity Forms ↔ Oxygen (.lvl-form-styling + universal.css): primary colour #99EB9F site-wide, form section full width with 20px sides (46px top; mobile 50/50), serif 16px, 8px radius, 20px inner padding, centred 18px button. */ .gform-theme, [data-parent-form] { --gf-color-primary: #99EB9F !important; } .gap-page > .gap-contact-page__form { max-width: none; margin: 0; padding: 46px 20px 75px; } .gap-contact-page__form .gform_wrapper { font-family: var(--gap-serif); } .gap-contact-page__form .gform-theme--framework { --gf-font-family-base: var(--gap-serif); --gf-font-family-primary: var(--gap-serif); --gf-font-family-secondary: var(--gap-serif); --gf-local-font-family: var(--gap-serif); --gf-ctrl-btn-font-family: var(--gap-serif); font-family: var(--gap-serif) !important; --gf-local-font-size: 16px; --gf-font-size-primary: 16px; --gf-form-gap-y: 12px; --gf-ctrl-size: var(--gf-ctrl-size-lg); --gf-padding-x: 20px; } .gap-contact-page__form .gform-theme--framework ::placeholder { color: #a7a7a7; opacity: 1; } .gap-contact-page__form .gform-theme--framework .gfield--type-consent { padding-left: 20px; margin-block-start: 15px; } .gap-contact-page__form .gform-theme--framework .gfield--type-consent input, .gap-contact-page__form .gform-theme--framework .gfield--type-consent label { cursor: pointer !important; } .gap-contact-page__form .gform-theme--framework button, .gap-contact-page__form .gform-theme--framework input, .gap-contact-page__form .gform-theme--framework textarea { letter-spacing: 1.71px !important; font-family: var(--gap-serif); --gf-ctrl-radius: 8px; --gf-local-radius: 8px; --gf-ctrl-size: var(--gf-ctrl-size-lg); --gf-padding-x: 20px; } .gap-contact-page__form .gform-theme--framework textarea { letter-spacing: 0.9px !important; --gf-ctrl-textarea-padding-y: 26px; } .gap-contact-page__form .gform-theme--framework .gform_button { font-family: var(--gap-serif) !important; border: 1px solid #000 !important; border-radius: 999px !important; letter-spacing: 1.71px !important; --gf-ctrl-btn-border-color-primary: #000; --gf-ctrl-btn-color-primary: #000; --gf-local-font-size: 18px; --gf-ctrl-btn-font-size: 18px; --gf-ctrl-btn-padding-y: 5px; --gf-ctrl-btn-size: var(--gf-ctrl-size-lg); --gf-ctrl-btn-bg-color-hover-primary: #000; } .gap-contact-page__form .gform-theme--framework .gform_footer.top_label { justify-content: center; } @media (max-width: 767px) { .gap-page > .gap-contact-page__form { padding: 50px 20px; } } /* Section header with label + text but no headline (Oxygen "Subheadline Headline Text ohne HG", e.g. Kontakt "Einfach ausfüllen und absenden!"): the text is the headline — 36px/1.2 at every width, 1170px / 90%. */ .gap-section-header--no-title:not(.gap-section-header--small) .gap-section__intro { width: 1170px; max-width: 90%; font-size: 36px; line-height: 1.2; } /* Großes Zitat mit Quelle — Figma 1:4286: quote serif 500 80/80, source sans 500 24 24 below, card gutter; left or right. */ .gap-page > .gap-big-quote { max-width: none; margin: 0; } .gap-big-quote { margin: 0; padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); } /* vertical rhythm: landing.css "Section rhythm" */ .gap-big-quote__figure { display: flex; flex-direction: column; gap: clamp(16px, 1.6vw, 24px); margin: 0; } .gap-big-quote__text { margin: 0; padding: 0; border: 0; } .gap-big-quote__text p { margin: 0; font-family: var(--gap-serif); font-size: clamp(2.25rem, 5.3vw, 5rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .gap-big-quote__source { 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-big-quote--right .gap-big-quote__figure { align-items: flex-end; text-align: right; } /* Variant "box" — Figma 1:4546: black box radius 30, padding 100, quote serif 500 64/67.2 white, source sans 500 24, gap 30. */ .gap-big-quote--box .gap-big-quote__figure { gap: clamp(16px, 2vw, 30px); padding: clamp(30px, 6.6vw, 100px); border-radius: var(--gap-card-radius); background: #000; color: #fff; } .gap-big-quote--box .gap-big-quote__text p { font-size: clamp(1.75rem, 4.2vw, 4rem); line-height: 1.05; } /* ==== Magazin post (Figma 1:4476) ==== */ /* Post head (single.php): the landing hero v2 with "Kategorie · Datum" left, pill "← Zur Übersicht" right, title sans 500 150. */ .gap-hero--post .gap-hero__breadcrumb { justify-content: space-between; align-items: flex-start; } .gap-hero--post .gap-hero__label { flex: 0 1 auto; white-space: pre-wrap; } .gap-hero--post .gap-hero__back { flex: none; pointer-events: auto; } .gap-hero--post .gap-hero__headline { font-size: clamp(3rem, 9.9vw, 9.375rem); } @media (max-width: 767px) { .gap-hero--post .gap-hero__breadcrumb { flex-direction: row; flex-wrap: wrap; } .gap-hero--post .gap-hero__headline { font-size: 13vw; overflow-wrap: anywhere; } } /* Shared section head (label sans 500 24, headline serif 500 106 underlined) for the new Magazin blocks. */ .gap-tip-list, .gap-faq, .gap-post-teasers { padding: clamp(30px, 4vw, 60px) var(--gap-card-gutter); } .gap-page > .gap-tip-list, .gap-page > .gap-faq, .gap-page > .gap-post-teasers { max-width: none; margin: 0; } .gap-tip-list__label, .gap-faq__label, .gap-post-teasers__label { margin: 0 0 clamp(20px, 2.6vw, 40px); 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-faq__headline, .gap-post-teasers__headline { margin: 0 0 clamp(30px, 4vw, 60px); padding-bottom: 0.15em; font-size: clamp(3rem, 7vw, 6.625rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.05em; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } /* Tips — Figma 1:4515: headline serif 500 80/76 underlined, rows 1px rule on top, 30 padding, number sans 500 24 + text serif 400 64, gap 60. */ .gap-tip-list__headline { margin: 0 0 clamp(24px, 2.6vw, 40px); padding-bottom: 0.15em; font-size: clamp(2.25rem, 5.3vw, 5rem); font-weight: 500; line-height: 0.95; letter-spacing: -0.04em; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } .gap-tip-list__list { margin: 0; padding: 0; list-style: none; } .gap-tip-list__item { display: flex; align-items: baseline; gap: clamp(20px, 4vw, 60px); padding: clamp(18px, 2vw, 30px) 0; border-top: 1px solid currentColor; } .gap-tip-list__number { flex: none; min-width: 1.6em; font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 500; line-height: 1; } .gap-tip-list__text { font-family: var(--gap-serif); font-size: clamp(1.75rem, 4.2vw, 4rem); font-weight: 400; line-height: 1; letter-spacing: -0.02em; } /* FAQ — Figma 1:4528: question serif 400 40/44 with + / – right, 1px rule on top, 36 padding; answer serif 400 24/31.2, 20 below. */ .gap-faq__list { border-bottom: 1px solid currentColor; } .gap-faq__item { border-top: 1px solid currentColor; } .gap-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: clamp(20px, 2.4vw, 36px) 0; font-family: var(--gap-serif); font-size: clamp(1.375rem, 2.65vw, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; list-style: none; cursor: pointer; } .gap-faq__question::-webkit-details-marker { display: none; } .gap-faq__question:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; } .gap-faq__icon { flex: none; font-family: var(--gap-sans); font-size: 1em; line-height: 1; } .gap-faq__icon::before { content: "+"; } .gap-faq__item[open] .gap-faq__icon::before { content: "–"; } .gap-faq__answer { max-width: 1200px; padding: 0 0 clamp(20px, 2.4vw, 36px); font-family: var(--gap-serif); font-size: clamp(1.125rem, 1.6vw, 1.5rem); line-height: 1.3; } .gap-faq__answer > * { margin: 0; } .gap-faq__answer > * + * { margin-top: 0.8em; } /* More posts — Figma 1:4551: three columns gap 30; image 464 × 320 radius 30, category as black pill 20 in; title serif 500 40, date serif 400 22, "Lesen" sans 20 underlined, 18 apart; pill "Alles lesen →" 30 below. */ .gap-post-teasers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 4vw, 60px) clamp(16px, 2vw, 30px); margin: 0; padding: clamp(0px, 1.3vw, 20px) 0 0; list-style: none; } .gap-post-teasers__card { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; } .gap-post-teasers__media { position: relative; display: block; width: 100%; } .gap-post-teasers__image { display: block; width: 100%; height: auto; aspect-ratio: 464 / 320; object-fit: cover; border-radius: var(--gap-card-radius); background: #e0e3db; } .gap-post-teasers__tag { position: absolute; top: 20px; left: 20px; padding: 6px 20px; border-radius: 999px; background: #000; color: #fff; font-family: var(--gap-sans); font-size: clamp(1rem, 1.6vw, 1.5rem); line-height: 1; } .gap-post-teasers__title { margin: 0; font-family: var(--gap-serif); font-size: clamp(1.625rem, 2.65vw, 2.5rem); font-weight: 500; line-height: 1; letter-spacing: -0.02em; } .gap-post-teasers__title a { color: inherit; text-decoration: none; } .gap-post-teasers__title a:hover, .gap-post-teasers__title a:focus-visible { text-decoration: underline; text-decoration-thickness: 0.05em; } .gap-post-teasers__date { margin: 0; font-family: var(--gap-serif); font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.3; } .gap-post-teasers__more { display: inline-block; padding: 4px 0; color: inherit; font-family: var(--gap-sans); font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.2; text-decoration: underline; text-underline-offset: 0.15em; } .gap-post-teasers__all { margin: clamp(20px, 2vw, 30px) 0 0; } .gap-post-teasers__excerpt { margin: 0; font-family: var(--gap-serif); font-size: clamp(1.125rem, 1.45vw, 1.375rem); line-height: 1.3; } .gap-post-teasers__card[hidden], .gap-pill[hidden], .gap-post-archive__empty[hidden] { display: none; } /* All posts with filter — Figma 1:4368: pills 10 apart under the label ("Alle" active = filled), grid 30 below, "Mehr laden →" 30 below. */ .gap-post-archive__filter { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(20px, 2vw, 30px); padding: 0; list-style: none; } /*