/*
Theme Name: GeSK
Theme URI: https://gesk.berlin
Author: aitema GmbH
Author URI: https://aitema.de
Description: Custom Theme für GeSK – PR & Kommunikationsagentur Berlin. Pixelgenaue Umsetzung des Figma-Designs (Stand 18.05.2026): 6 Seiten, ACF-basierte Inhaltspflege, Presselounge, Scroll-Interaktionen gemäß Interaktions-PDF, DE-Erstumsetzung. Typografie: Archivo / Syne / Montserrat / Playfair Display.
Version: 1.1.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.1
Tags: custom-theme, agency, portfolio, editorial, one-column, custom-menu
Text Domain: gesk
*/
/* ============================================================
GeSK Berlin — PR & Communications Agency
Full-fidelity edition (matches all 8 Figma frames)
============================================================ */
/* ============================================================
ECHTE HAUSSCHRIFTEN (GeSK-Lieferung 16.07.2026, self-hosted)
Kommon Grotesk Extended UltraBold = Display (bisher Archivo-Ersatz),
Playfair Display Italic (variabel) = Serif-Kursive,
Poppins = Fliesstext/UI. Poppins+Playfair: OFL; Kommon: Lizenz GeSK.
============================================================ */
/**
* @license
* MyFonts Webfont Build ID 3867246 — Kommon Grotesk Extended UltraBold by TypeK
* Lizenz: MyFonts-Bestellung #7297303 vom 23.07.2026 (Konto GeSK,
* Webfonts / 10.000 Pageviews pro Monat). Die Schrift unterliegt dem EULA des
* Website-Betreibers; Nutzung durch Dritte ist ausgeschlossen.
* URL: https://www.myfonts.com/collections/typek-foundry
*/
@font-face {
font-family: "Kommon Grotesk Extended";
src: url("assets/fonts/kommon-grotesk-extended-ultrabold.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
}
/* Playfair Display und Poppins (SIL Open Font License 1.1): GK-06, 24.09.2026 — Latin als eigene Datei (pyftsubset, Latin-Bereich
wie Googles CSS; Poppins 50 → 9 KB, Playfair 104 → 52 KB, vorher über 300 KB Schriften vor der ersten Darstellung). Die
vollständige Datei bleibt für Latin-Ext-Zeichen und lädt nur, wenn eine Seite solche Zeichen enthält. */
@font-face {
font-family: "Playfair Display";
src: url("assets/fonts/playfair-display-italic-var.woff2") format("woff2");
font-weight: 400 900;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Playfair Display";
src: url("assets/fonts/playfair-display-italic-var-latin.woff2") format("woff2");
font-weight: 400 900;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-400.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-400-latin.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-500.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-500-latin.woff2") format("woff2");
font-weight: 500;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-600.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-600-latin.woff2") format("woff2");
font-weight: 600;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-700.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-700-latin.woff2") format("woff2");
font-weight: 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-400i.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Poppins";
src: url("assets/fonts/poppins-400i-latin.woff2") format("woff2");
font-weight: 400;
font-style: italic;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Montserrat, Roboto, Roboto Condensed — bis 22.09.2026 von fonts.googleapis.com geladen (render-blockierend,
~0,8 s auf Slow 4G, und jede Seite übermittelte die IP-Adresse der Besucher an Google). Jetzt selbst gehostet:
dieselben variablen WOFF2-Dateien, die Google an Chrome ausliefert (Stand 22.09.2026), nur Latin + Latin-Ext,
unicode-range und Schnittbereiche wie in Googles CSS. Lizenz: SIL Open Font License 1.1. */
@font-face {
font-family: "Montserrat";
src: url("assets/fonts/montserrat-var-latin-ext.woff2") format("woff2");
font-weight: 500 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Montserrat";
src: url("assets/fonts/montserrat-var-latin.woff2") format("woff2");
font-weight: 500 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto";
src: url("assets/fonts/roboto-var-latin-ext.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Roboto";
src: url("assets/fonts/roboto-var-latin.woff2") format("woff2");
font-weight: 400 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Roboto Condensed";
src: url("assets/fonts/roboto-condensed-var-latin-ext.woff2") format("woff2");
font-weight: 100 300;
font-style: normal;
font-display: swap;
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Roboto Condensed";
src: url("assets/fonts/roboto-condensed-var-latin.woff2") format("woff2");
font-weight: 100 300;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--bg: #ffffff;
--bg-alt: #efefef;
--ink: #000000;
--ink-soft: #1a1a1a;
--ink-muted: #6c6c6c;
--line: #c4c4c4;
/* Display-Font: Archivo als Kommon-Grotesk-Ersatz. Figma-Update 06.07.2026:
das neue Design nutzt KEINE Extended-Breite mehr — Normalbreite (wdth 100),
Headlines kleiner und kompakter. Siehe README. */
--font-display: "Kommon Grotesk Extended", "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-italic: "Playfair Display", Georgia, serif;
--font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
/* Neues Design-System (Figma 30.06.2026): zusätzliche Familien.
Roboto ExtraBold = DE-Sublines/Nav, Poppins = Meta/Labels/Body,
Montserrat Black = Stats. Display bleibt Archivo (Kommon-Ersatz). */
--font-roboto: "Roboto", "Helvetica Neue", Arial, sans-serif;
--font-meta: "Poppins", "Helvetica Neue", Arial, sans-serif;
--font-stats: "Montserrat", "Helvetica Neue", Arial, sans-serif;
--container: 1560px;
--pad-x: clamp(20px, 4vw, 64px);
/* Notch/Dynamic Island (GK-05): Ränder im Querformat; 0 auf allen anderen Geräten */
--sa-l: env(safe-area-inset-left, 0px);
--sa-r: env(safe-area-inset-right, 0px);
--sa-b: env(safe-area-inset-bottom, 0px);
--pad-x: max(clamp(20px, 4vw, 64px), var(--sa-l), var(--sa-r));
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body { overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
.display {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal; /* Figma 06.07.2026: Normalbreite statt Extended */
font-variation-settings: "wght" 900, "wdth" 100;
/* Feedback #43 (23.07.2026): Headlines überall lh 96,2 %, Kerning -5 %
(Figma-Headline-Nodes: letterSpacing -5 %, lineHeight 96.2 %). */
letter-spacing: -0.05em;
/* Feedback-Button #98/#106 (Moritz, 09.09.2026): Wortabstände wirkten zu eng
und uneinheitlich. Der Browser zieht letter-spacing auch vom Leerzeichen ab;
word-spacing gibt genau diesen Betrag zurück — Kerning zwischen den
Buchstaben bleibt −5 % wie im Figma, die Wortlücke hat wieder Schriftbreite
(Entscheidung Kolja 09.09.). Gilt über die Kaskade für alle Display-Headlines. */
word-spacing: 0.05em;
line-height: 0.962;
text-transform: uppercase;
}
/* #98/#106, Fortsetzung: dieselbe Wortlücken-Korrektur für alle Headline-Regeln,
die letter-spacing −5 % ohne die Klasse .display tragen (Kaskade greift dort
nicht). Liste = alle Vorkommen von „letter-spacing: -0.05em“ in dieser Datei. */
.hero-headline, .aboutblend-title, .accordion-trigger, .refz-hero-title, .projects-hero-title,
.recent-works-wordmark, .rw-title, .agentur-hero-title, .agentur-prose-title, .reveal-hero-title,
.career-intro-title, .page-hero-title, .proj-rotated, .proj-highlights-title, .proj-mosaic-card-title,
.case-next-marker, .contacts-hero-title { word-spacing: 0.05em; }
.italic-accent {
font-family: var(--font-italic);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: -0.01em;
}
.section-eyebrow {
display: inline-block;
font-family: var(--font-display);
font-weight: 700;
font-size: 11px;
letter-spacing: 0.25em;
color: var(--ink-muted);
text-transform: uppercase;
margin-bottom: 16px;
}
/* ============================================================
NAV
============================================================ */
/* Feedback #8 (20.07.2026): Navbar kompakter skaliert (68→56px, Logo 30→26px)
und Logo IMMER exakt zentriert (absolut positioniert — das Grid schob es bei
schmalen Fenstern nach rechts, sobald die linke Spalte breiter als ihr
1fr-Anteil wurde; @1280 waren das 83px Versatz).
Feedback #25 (21.07.): Seitenränder enger (Figma: 28px @1728), Menüpunkte
kleiner — die Logo-Schutzzone links hält jetzt.
Feedback #36/#38 (21.07.): KEINE weiße Leiste mehr — Balken transparent,
Logo + Menüpunkte weiß im Blend-Mode "Exclusion" wie die Referenzen-Headline.
Der Blend liegt auf .nav SELBST (fixed + z-index = eigener Stacking-Context;
auf Kindern käme er nie unten an — Lehre aus #24). Fallback ohne
Blend-Support: weiße Leiste wie bisher. */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 50;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: clamp(14px, 2vw, 32px);
height: 56px;
padding: 0 clamp(16px, 1.62vw, 28px);
background: #fff;
box-shadow: 0 2px 12px 2px rgba(0,0,0,0.05);
transition: background .25s ease, color .25s ease, box-shadow .25s ease;
}
@supports (mix-blend-mode: exclusion) {
.nav {
background: transparent;
box-shadow: none;
mix-blend-mode: exclusion;
color: #fff;
}
/* 23.07.2026: Klasse `.nav` vorangestellt — die Basisregeln `.nav-cta` und
`.lang-switch-btn` (color:#000) stehen SPÄTER im File und schlugen diese
Regel bei gleicher Spezifität. Folge: „Für Redaktionen", „Kontakt" und
„English" blieben schwarz — und schwarz ist unter mix-blend-mode:exclusion
die Identität (a=0 ⇒ Ergebnis = Hintergrund), die Einträge waren also
unsichtbar. Gleiche Kaskadenfalle wie beim Logo-Invert (#36/#38). */
.nav .nav-links,
.nav .nav-links a,
.nav .nav-cta,
.nav .lang-switch-btn { color: #fff; }
/* doppelte Klasse: muss die spätere Basisregel .nav-logo img (brightness(0)) schlagen */
.nav .nav-logo img { filter: brightness(0) invert(1); }
/* Ales Korrekturen 28.09.2026: Burger auf seinem iPhone unsichtbar (Logo daneben sichtbar). Die Striche hingen
über currentColor an der geerbten Button-Farbe — jetzt wie die übrigen Einträge ausdrücklich weiß. */
.nav .nav-burger span { background: #fff; }
}
.admin-bar .nav { top: 32px; }
/* Scroll-Verhalten lt. Interaktions-PDF (18.05.2026): Transform/Opacity
der Navbar setzt das JS progressiv am Scrollweg. */
.nav-links {
display: flex; gap: clamp(13px, 1.4vw, 22px);
justify-self: start;
font-family: var(--font-roboto); /* Figma: Nav-Items klein, fett, uppercase */
/* 23.07.2026: 800 → 700. Der Live-Proto (Frame „MacBook Pro 16" - 12",
Group 14) setzt die Nav-Items in Roboto BOLD 700, nicht ExtraBold —
daher wirkte die Leiste fetter als im Entwurf. Nichts mit der
Kommon-Grotesk-Lizenz zu tun: die Nav war nie Kommon. */
font-weight: 700;
font-size: 10.5px; /* Feedback #25: etwas kleiner zugunsten der Logo-Schutzzone */
letter-spacing: 0.05em;
text-transform: uppercase;
color: #000;
}
.nav-links ul { display: contents; list-style: none; margin: 0; padding: 0; }
.nav-links li { display: contents; }
/* Feedback #21 (20.07.2026): Beim Hover wechselt nur die Schriftart — die
Einträge dürfen nicht mehr springen. Feste Höhe fixiert die Zeile vertikal;
zwei unsichtbare Ghost-Zeilen (je eine pro Schriftart, Höhe 0) reservieren
die breitere der beiden Breiten, damit auch horizontal nichts rückt. */
.nav-links a {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 24px;
line-height: 1;
padding: 0 2px;
white-space: nowrap;
}
.nav-links a::before,
.nav-links a::after,
.nav-cta--kontakt::before,
.nav-cta--kontakt::after {
content: attr(data-label);
display: block;
height: 0;
overflow: hidden;
visibility: hidden;
}
.nav-links a::before,
.nav-cta--kontakt::before {
font-family: var(--font-italic);
font-style: italic;
font-weight: 500;
letter-spacing: 0.02em;
}
.nav-links a::after,
.nav-cta--kontakt::after {
font-family: var(--font-roboto);
font-weight: 700; /* muss dem sichtbaren Schnitt folgen, sonst misst der Ghost falsch */
letter-spacing: 0.05em;
}
/* Hover nach Figma-Proto (Kolja-Abgleich 16.07.): Menüeintrag wechselt in
die kursive Serif-Schrift — keine Unterstreichung. */
@media (hover: hover) { .nav-links a:hover,
.nav-cta--kontakt:hover {
font-family: var(--font-italic);
font-style: italic;
font-weight: 500;
letter-spacing: 0.02em;
} }
/* Feedback #27 (21.07.): "Kontakt" rechts neben "Für Redaktionen" — gleiche
Optik wie die Menüpunkte links, mit Breiten-Ghosts gegen Hover-Springen. */
.nav-cta--kontakt {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 24px;
line-height: 1;
white-space: nowrap;
}
/* Logo absolut zentriert im Balken, komplett schwarz (Figma: kein rotes 360°) */
.nav-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: center;
}
.nav-logo img {
height: 26px;
width: auto;
filter: brightness(0); /* PNG hat rotes 360°-Zeichen — Design ist 100% schwarz */
}
.nav-right {
display: flex; gap: clamp(16px, 1.6vw, 24px); align-items: center;
grid-column: 2;
justify-self: end;
}
.nav-cta {
font-family: var(--font-roboto); /* Figma: "Für Redaktionen" klein, fett, uppercase */
font-weight: 700; /* wie .nav-links: Figma-Proto = Roboto Bold 700 (23.07.2026) */
font-size: 11.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
color: #000;
}
/* Sprachumschalter (Figma: Flagge + "English" + Caret; Dropdown rein per CSS) */
.lang-switch { position: relative; }
.lang-switch-btn {
display: inline-flex;
align-items: center;
gap: 7px;
border: 0;
background: transparent;
padding: 6px 0;
/* Figma 15.07.2026: „English" gemischt-groß, regular (~14px) — nicht
uppercase/fett wie die Nav-Punkte. */
font-family: var(--font-meta);
font-weight: 500;
font-size: 14px;
letter-spacing: 0;
text-transform: none;
color: #000;
}
.lang-flag { border-radius: 2px; flex-shrink: 0; }
.lang-caret { font-size: 9px; line-height: 1; }
.lang-switch-menu {
position: absolute;
top: 100%;
right: 0;
min-width: 128px;
margin: 0;
padding: 8px 0;
list-style: none;
background: #fff;
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
opacity: 0;
pointer-events: none;
transform: translateY(-4px);
transition: opacity .2s ease, transform .2s ease;
}
/* Offen per Klasse (js/main.js, GK-05); ohne JavaScript per Tastaturfokus */
.lang-switch.is-open .lang-switch-menu,
.lang-switch:not(.is-bereit):focus-within .lang-switch-menu {
opacity: 1;
pointer-events: auto;
transform: none;
}
@media (hover: hover) { .lang-switch:hover .lang-switch-menu {
opacity: 1;
pointer-events: auto;
transform: none;
} }
.lang-switch-menu a {
display: block;
padding: 7px 16px;
font-family: var(--font-roboto);
font-weight: 700;
font-size: 12px;
color: #000;
}
@media (hover: hover) { .lang-switch-menu a:hover { background: #f0f0f0; } }
.lang-switch-menu a[aria-current="true"] { font-weight: 800; }
/* Burger + Fullscreen-Overlay (Mobil) */
.nav-burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 6px;
width: 40px; height: 40px;
background: transparent;
border: 0;
padding: 8px;
}
.nav-burger span {
display: block;
width: 24px;
height: 2px;
background: currentColor;
transition: transform .3s ease, opacity .3s ease;
}
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
/* Zwischenbreiten: Menü kompakter, damit es dem absolut zentrierten Logo
nicht in die Quere kommt; darunter übernimmt der Burger (vorher 900px —
zwischen 900 und ~1180px kollidierten Links und Logo sonst). */
@media (max-width: 1360px) {
.nav-links { gap: clamp(8px, 1vw, 14px); font-size: 10px; }
}
@media (max-width: 1100px) {
.nav-burger { display: flex; }
.nav-right .nav-cta { display: none; }
.nav-right .lang-switch { display: none; }
}
.nav-overlay {
position: fixed;
inset: 0;
z-index: 49;
background: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity .3s ease;
}
.nav-overlay.open { opacity: 1; pointer-events: auto; }
.nav-overlay ul { list-style: none; margin: 0; padding: 0; text-align: center; }
.nav-overlay li { margin: 4px 0; }
.nav-overlay a {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(32px, 9vw, 56px);
text-transform: uppercase;
line-height: 1.15;
display: inline-block;
transition: opacity .2s ease;
}
@media (hover: hover) { .nav-overlay a:hover { opacity: .6; } }
.nav-overlay-cta {
margin-top: 28px;
font-size: 16px !important;
font-weight: 700 !important;
letter-spacing: .14em;
opacity: .7;
}
/* Sprachwahl im Overlay (21.09.2026): eigene Zeile unter „Für Redaktionen“, gleiche Schrift */
/* Selektor mit „a“: .nav-overlay a (inline-block) hat sonst die höhere Spezifität und die Zeile rutscht neben den Knopf. */
.nav-overlay a.nav-overlay-lang { display: block; margin-top: 14px; } /* linksbündig wie „Für Redaktionen“ darüber (abgenommener Stand) */
/* Globale Politur */
::selection { background: #000; color: #fff; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
outline: 2px solid #000;
outline-offset: 3px;
}
.fade-up {
opacity: 0;
transform: translateY(28px);
}
.fade-up.is-visible {
opacity: 1;
transform: none;
transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
/* ============================================================
PAGE HEAD (Unterseiten ohne Hero)
============================================================ */
.page-head {
padding: clamp(160px, 18vw, 240px) var(--pad-x) clamp(40px, 5vw, 64px);
background: var(--bg);
}
.page-head-inner {
max-width: var(--container);
margin: 0 auto;
}
.page-head h1 {
margin: 0;
font-size: clamp(36px, 3.85vw, 58px); /* Figma 06.07.2026: Headlines kompakter */
}
.page-head .lede {
max-width: 640px;
margin: 28px 0 0;
font-size: 18px;
line-height: 1.55;
color: var(--ink-soft);
}
/* ============================================================
HERO (Figma: weiße Fläche, schwarze Headline mit kursivem "pr",
Bild darunter — der Text scrollt langsamer und verschwindet
hinter dem Bild, vgl. Interaktions-PDF S.1)
============================================================ */
.hero {
position: relative;
background: var(--bg);
}
.hero-headline-wrap {
position: relative;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
/* Feedback Alessandro 07.09.2026 (PDF „GeSK_Webseite_edits“, Punkt 1): die
Bildoberkante liegt auf allen Above-the-Fold-Seiten auf derselben Höhe —
Referenz ist „Über uns“ (.projects-hero: 72vh + Polster 240/100 @1728).
Vorher 65vh/150px → Bild begann 7 % Viewport höher als auf „Über uns“. */
min-height: 72vh;
min-height: 72svh; /* iOS: Adressleiste (GK-05) */
padding: clamp(160px, 20vw, 240px) var(--pad-x) clamp(60px, 8vw, 100px);
will-change: opacity, transform;
}
/* Figma 06.07.2026: Hero auf WEISSEM Grund, Headline SCHWARZ, zwei zentrierte
Zeilen, Block ~55–60% Viewportbreite, kein Scrim. Die Zeilen setzt das
explizite
im Content; die Box darf die Zeile "pr & KOMMUNIKATIONS-
AGENTUR" nie umbrechen (sonst 3 Zeilen + schief zentrierter Überlauf),
deshalb Font per vw so skaliert, dass die lange Zeile ~60vw bleibt. */
.hero-headline {
text-align: center;
color: #000;
max-width: min(1100px, 66vw);
/* Figma-Vermessung 15.07.2026 (Proto Website_Final, Frame DE-Home @1728):
Cap-Höhe 42px → ~58px Font (vorher 52px). Zeile 2 „pr & KOMMUNIKATIONS-
AGENTUR" ist 1021px breit → max-width 1100px, sonst Zwangsumbruch. */
font-size: clamp(28px, 3.35vw, 58px);
line-height: 0.962; /* Feedback #43 */
letter-spacing: -0.05em;
margin: 0;
}
.hero-headline .italic-accent {
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
}
.hero-media-block {
position: relative;
z-index: 1;
/* Feedback #9 (20.07.2026): Above-the-Fold-Medium exakt im Proto-Maß
1728×1267 → proportional 73.32vw (gilt für Start UND Agentur). */
height: min(73.32vw, 1267px);
overflow: hidden;
background: #0a0a0a;
}
.hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-image: url('assets/figma/db-gesk-3bc23b96.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
animation: heroPan 18s ease-in-out infinite alternate;
}
@keyframes heroPan {
0% { transform: scale(1.04) translate(0, 0); }
100% { transform: scale(1.10) translate(-1.5%, -1%); }
}
/* ============================================================
SECTION: STATEMENT
============================================================ */
/* Figma 06.07.2026: CLAIM als hellgrauer Band (#eaeaea–#ececec), schwarz,
zentriert, Display-Font (nicht-extended), "Eure" kursiv-serif. */
.statement {
background: #ececec;
/* Feedback-Button #121 (Moritz, 11.09.2026): Band „minimal zu hoch“ — Polster
160 → 120 px @1728, „nicht zu dünn“. */
padding: clamp(60px, 9vw, 120px) var(--pad-x);
}
.statement-inner {
max-width: var(--container);
margin: 0 auto;
font-size: clamp(28px, 3.2vw, 48px);
}
.statement-subline {
max-width: var(--container);
margin: 0 auto;
text-align: center;
font-size: clamp(28px, 3.2vw, 55px); /* Figma 1:1876: 60px @1728 ≈ 55px Cap */
line-height: 0.962; /* Feedback #43 */
color: #000;
}
.statement .italic-accent {
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
}
/* ============================================================
CLIENTS
============================================================ */
.clients {
/* Feedback-Button #119 (Moritz, 10.09.2026): Abstand über der Überschrift
(„REFERENZEN“) war etwas zu groß — 138 → 80 px @1728. */
padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 6vw, 80px);
background: var(--bg);
}
.clients h2 {
margin: 0 0 clamp(40px, 5vw, 60px);
padding: 0 var(--pad-x);
font-size: clamp(30px, 3.2vw, 48px); /* Figma 06.07.2026: Sektions-Headlines ~40–48px */
}
/* Two horizontal logo marquees, one per row, second runs reverse */
/* Feedback #20 (20.07.2026): keine grauen Linien mehr über/unter den Logos —
das Figma (1:1876) zeigt die Reihen ohne Rahmen. */
.clients-marquee {
position: relative;
width: 100%;
overflow: hidden;
padding: 22px 0;
contain: layout paint;
mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.clients-marquee + .clients-marquee {
margin-top: -1px;
}
.clients-marquee-track {
display: inline-flex;
align-items: center;
gap: 69px;
/* Feedback 06.07.: lief viel zu langsam (200s) — flottes, sichtbares Tempo */
animation: clientsMarquee 42s linear infinite;
white-space: nowrap;
will-change: transform;
}
.clients-marquee.reverse .clients-marquee-track {
animation-direction: reverse;
animation-duration: 52s;
}
/* Feedback #44 + #47 (23.07.2026): Logos laufen beim Hover WEITER —
die frühere Hover-Pause ist bewusst entfernt. */
/* #96 (09.09.2026): Laufweg = genau ein Set. js/main.js setzt --marquee-shift in px,
sobald es Sets angehängt hat (schmales Set); ohne JS bleibt −50 % = ein Set
von zweien. */
@keyframes clientsMarquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(var(--marquee-shift, -50%), 0, 0); }
}
/* Referenzen: Logo-Wand STATISCH (Feedback #13, 20.07.2026) — 5 Reihen à
6 Logos wie im Proto, keine Marquee-Bewegung mehr. */
.refz-logos {
padding: clamp(50px, 6vw, 90px) var(--pad-x);
background: var(--bg);
}
.refz-logos-inner {
max-width: var(--container);
margin: 0 auto;
display: flex;
flex-direction: column;
/* Feedback-Button #94 (Moritz, 09.09.2026): die Reihen hatten unterschiedliche
Abstände — der Flex-Gap war gleich, aber Reihen mit Gmundner/Leonardo
(Höhenbudget 104/97 px) waren höher als Reihen mit nur 56-px-Logos, also
schwankte der Pitch zwischen 151 und 199 px. Jetzt hat JEDE Reihe die Höhe
des größten Logo-Budgets (min-height) und der Gap ist so gesetzt, dass der
Pitch überall ≈ 176 px @1728 beträgt (wie ursprünglich gemeint). */
gap: clamp(30px, 4.2vw, 72px);
}
.refz-logo-row { min-height: clamp(48px, 6vw, 104px); }
/* Feedback-Mail 23.07.2026 (Alessandro, Referenzbild): striktes 6-Spalten-
Raster — alle Reihen teilen dieselben Spalten (gleichmäßige vertikale
Reihen), jedes Logo mittig in seiner Zelle. Die einheitliche Logo-Box
(max-height/max-width) ersetzt die früheren Einzelhöhen, damit alle
Logos die gleichen Proportionen bekommen. */
.refz-logo-row {
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: center;
justify-items: center;
column-gap: clamp(20px, 3vw, 48px);
}
.refz-logo-row .brand { justify-content: center; }
.refz-logos .refz-logo-row img {
height: auto;
width: auto;
max-height: var(--refz-logo-h, clamp(26px, 3.24vw, 56px));
max-width: min(11vw, 190px);
}
/* Feedback #58/#59 (03.08.2026): Gmundner und Leonardo wirkten im
einheitlichen Höhen-Raster deutlich kleiner als ihre Nachbarn. Grund ist
die Kontur, nicht die Regel: beide Marken sind nahezu quadratisch
(Gmundner 1:1,15) bzw. hochformatig (Leonardo 1:0,77), während die übrigen
Logos 1:3 bis 1:6 laufen. Bei gleicher Boxhöhe bleibt davon nur rund die
halbe Fläche übrig. Deshalb ein größeres Höhenbudget für genau diese
zwei — die Spalten fluchten unverändert (Feedback-Mail 23.07.). */
/* Feedback #78 (10.08.2026): Gmundner „noch ein bisschen größer" — 5,2 → 6vw. */
.refz-logo-row .brand-logo--gmundner { --refz-logo-h: clamp(48px, 6vw, 104px); }
.refz-logo-row .brand-logo--leonardo { --refz-logo-h: clamp(45px, 5.6vw, 97px); }
/* Feedback #55 (23.07.2026): mobil 3 Logos pro Zeile, kleiner und homogen
im Raum — gleicher vertikaler Rhythmus zwischen allen Zeilen. */
@media (max-width: 760px) {
.refz-logos-inner { gap: 34px; }
.refz-logo-row {
grid-template-columns: repeat(3, 1fr);
row-gap: 34px;
column-gap: 18px;
}
.refz-logos .refz-logo-row img {
max-height: var(--refz-logo-h-mob, 30px);
max-width: 24vw;
}
/* Feedback #78: mobil im gleichen Verhältnis mitgezogen */
.refz-logo-row .brand-logo--gmundner { --refz-logo-h-mob: 48px; }
.refz-logo-row .brand-logo--leonardo { --refz-logo-h-mob: 46px; }
}
/* Referenzen: Magazin-Wand (Feedback #13, 20.07.2026) — Überschrift, graues
Band 735px @1728 (42.53vw); Magazin-Logos laufen von LINKS nach RECHTS und
verschwinden hinter dem Folie-Mockup: das Marquee-Fenster endet an der
Mockup-Kante (Figma Frame 2206 clippt bei x≈1064). Bandfarbe = Hintergrund
des Original-Mockup-PNGs (#c9c9ca) → nahtloser Übergang. */
.refz-media { padding: clamp(40px, 5vw, 80px) 0 0; margin-bottom: clamp(48px, 5.6vw, 100px); }
.refz-media-heading {
padding: 0 var(--pad-x);
text-transform: uppercase;
font-size: clamp(30px, 3.4vw, 52px);
margin: 0 0 clamp(28px, 3.5vw, 56px);
}
.refz-media-band {
position: relative;
background: #c9c9ca;
height: clamp(300px, 42.53vw, 735px);
overflow: hidden;
}
.refz-media-marquee {
position: absolute;
left: 0;
/* Feedback #23 (21.07.): Fenster reicht bis UNTER die Folie (74%) — die
Logos bleiben bis zur sichtbaren Magazin-Kante zu sehen und tauchen erst
dort ab (Mockup ist jetzt Freisteller mit Alpha, s. page-referenzen.php);
der harte Schnitt bei 74% liegt unsichtbar hinter der Folie. */
width: 74%;
top: 50%;
transform: translateY(-50%);
padding: 0;
/* weiche Einlauf-Kante links, harte Kante rechts (hinter der Folie) */
mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 100%);
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 100%);
}
.refz-media-marquee .clients-marquee-track {
/* Feedback #47 (23.07.2026): Kantenabstand nach Figma ≈106px @1728 (6,1vw) */
gap: clamp(60px, 6.1vw, 106px);
animation-duration: 60s;
}
/* Feedback #47 (23.07.2026): Logos kleiner, korrekt nach Figma. Die 12,1vw
aus #40 waren die UNSKALIERTE Reihenhöhe der Komponente — die Instanz
(1:2057, 3778px) skaliert ihren Inhalt (Group 30, 7421px) mit Faktor 0,509;
real sind die Magazin-Logos 60–86px @1728 (≈ 3,5–5vw). Einheitlich 4,05vw.
(Doppelte Klasse weiterhin nötig — Kaskade gegen .brand-logo img.) */
.refz-media .refz-media-marquee img {
height: clamp(36px, 4.05vw, 70px);
width: auto;
max-width: none;
}
/* Feedback Alessandro 07.09.2026 (PDF Punkt 3): das F.A.Z.-Magazin-Logo wirkt zu
klein und zu hoch — die Unterlänge des „g“ gehört zur Bildhöhe, deshalb ist
„mathematisch zentriert“ nicht „optisch zentriert“ (Wortbild-Mitte liegt bei
39 % der Bildhöhe statt 50 %, gemessen am PNG). Um ein Viertel größer und um
die halbe Unterlänge nach unten; die Serife darf die Unterkante der Nachbarn
kreuzen (ausdrücklich freigegeben). Greift über die Logo-Kennung (Slug mag-faz,
s. gesk_get_medienlogos / brand-logo-- in page-referenzen.php) — ein neu
angelegter F.A.Z.-Eintrag mit anderem Slug bekommt die Sonderregel nicht. */
.refz-media .refz-media-marquee .brand-logo--mag-faz img {
height: clamp(45px, 5.06vw, 87px);
transform: translateY(10.7%);
}
/* Feedback #40 (22.07.): Original-Freisteller Mockup_6 — Platzierung exakt nach
der Figma-Transformationsmatrix von Node 1:2055 (relativeTransform):
Bildrechteck 1537,9×1153,4 @1728 (= Quell-Seitenverhältnis 4:3), Rotation
+40,48°, Ursprung x1083/y-558 relativ zum Band. Beschnitt auf die Bandhöhe
übernimmt overflow:hidden des Bandes. */
/* Feedback #47 + #55 (23.07.2026): Magazin minimal verkleinert (scale 0.94)
und über top:50% vertikal im grauen Band zentriert — die 51vw sind der
Abstand Rotationsursprung → Hüllenmitte (108,6vw Hüllhöhe × 0,94 / 2),
dadurch stimmt die Zentrierung auf ALLEN Viewports (auch mobil, #55). */
.refz-media-mockup {
position: absolute;
left: 0;
top: 50%;
width: 89vw;
height: 66.75vw;
transform: translate(62.68vw, -51vw) rotate(40.48deg) scale(0.94);
transform-origin: 0 0;
z-index: 1;
pointer-events: none;
}
.brand {
display: inline-flex;
align-items: center;
font-family: var(--font-display);
color: #000;
font-weight: 700;
letter-spacing: -0.005em;
font-size: 28px;
line-height: 1;
flex-shrink: 0;
}
/* Echte Kundenlogos (PNG von gesk.berlin), vereinheitlicht auf Schwarz */
.brand-logo img {
height: 36px;
width: auto;
max-width: 220px;
object-fit: contain;
filter: grayscale(1) brightness(0);
opacity: 0.9;
}
/* — Artemide — serif italic w/ ® */
.brand-artemide {
font-family: "Times New Roman", Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: 32px;
letter-spacing: -0.01em;
}
.brand-artemide sup { font-size: 12px; font-style: normal; margin-left: 2px; vertical-align: super; }
/* — TEAM 7 — bold geometric + framed 7 */
.brand-team7 {
font-weight: 900;
letter-spacing: 0.06em;
font-size: 26px;
gap: 6px;
}
.brand-team7 .seven {
display: inline-block;
border: 2px solid #000;
padding: 2px 6px;
font-size: 22px;
line-height: 1;
}
/* — KLAFS — bold sans, A as upward triangle */
.brand-klafs {
font-weight: 900;
font-size: 30px;
letter-spacing: 0.04em;
display: inline-flex;
align-items: baseline;
}
.brand-klafs .a-mark {
display: inline-block;
width: 0; height: 0;
border-left: 11px solid transparent;
border-right: 11px solid transparent;
border-bottom: 22px solid #000;
margin: 0 1px;
position: relative;
top: 2px;
}
/* — Alape — light italic w/ smile */
.brand-alape {
font-family: "Times New Roman", Georgia, serif;
font-weight: 400;
font-style: italic;
font-size: 30px;
}
.brand-alape .alape-mark {
font-style: normal;
font-size: 18px;
margin-left: 2px;
vertical-align: super;
}
/* — DORNBRACHT — black box double line */
.brand-dornbracht {
font-weight: 900;
font-size: 18px;
letter-spacing: 0.06em;
display: inline-flex;
flex-direction: column;
align-items: center;
background: #000;
color: #fff;
padding: 8px 14px;
line-height: 1.05;
}
/* — fm Büromöbel */
.brand-fm {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.brand-fm .fm-mark {
display: inline-flex;
align-items: center;
justify-content: center;
background: #000;
color: #fff;
font-weight: 800;
font-size: 22px;
padding: 4px 8px;
letter-spacing: -0.04em;
}
/* — Gmundner Keramik */
.brand-gmundner {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 12px;
letter-spacing: 0.18em;
font-weight: 700;
}
.brand-gmundner .gk-frame {
border: 1px solid #000;
padding: 6px 8px;
font-size: 14px;
letter-spacing: 0.08em;
}
.brand-gmundner .gk-name { font-size: 16px; letter-spacing: 0.16em; }
.brand-gmundner .gk-sub { font-size: 9px; letter-spacing: 0.32em; opacity: 0.75; }
/* — BORN to be ALIVE — boxed three-line lockup */
.brand-born {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
padding: 6px 14px;
border: 1px solid #000;
font-family: "Playfair Display", Georgia, serif;
line-height: 1;
text-align: center;
}
.brand-born em { font-style: italic; font-weight: 600; font-size: 18px; letter-spacing: 0.04em; }
.brand-born small { font-style: italic; font-size: 11px; opacity: 0.85; letter-spacing: 0.04em; }
.brand-born strong { font-family: var(--font-display, "Kommon Grotesk Extended", "Inter", sans-serif); font-weight: 700; font-size: 14px; letter-spacing: 0.18em; margin-top: 2px; }
/* — NCS — round dot + wordmark */
.brand-ncs {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display, "Kommon Grotesk Extended", "Inter", sans-serif);
font-weight: 700;
font-size: 22px;
letter-spacing: 0.04em;
}
.brand-ncs .ncs-mark {
display: inline-block;
width: 18px; height: 18px;
border-radius: 999px;
background: #000;
font-size: 0;
}
/* — kymo — script lowercase */
.brand-kymo {
font-family: "Brush Script MT", "Snell Roundhand", cursive;
font-weight: 400;
font-size: 38px;
letter-spacing: -0.02em;
}
.brand-kymo sup { font-size: 11px; }
/* — DOVIT */
.brand-dovit {
font-weight: 900;
font-size: 28px;
letter-spacing: 0.05em;
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.brand-dovit small { font-size: 8px; letter-spacing: 0.4em; margin-top: 4px; }
/* — sedda */
.brand-sedda {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 13px;
}
.brand-sedda .sedda-mark { font-size: 26px; font-weight: 400; }
.brand-sedda .sedda-name { font-size: 28px; font-weight: 800; letter-spacing: -0.01em; }
.brand-sedda .sedda-sub { font-size: 11px; letter-spacing: 0.04em; }
/* — AOA */
.brand-aoa {
font-weight: 900;
font-size: 32px;
letter-spacing: 0.04em;
}
.brand-aoa .aoa-tri { font-size: 22px; margin: 0 1px; vertical-align: 1px; }
/* — ewe */
.brand-ewe {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 800;
font-size: 36px;
letter-spacing: -0.02em;
}
/* — vist */
.brand-vist {
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 800;
font-size: 32px;
letter-spacing: -0.02em;
font-style: italic;
}
/* — Christine Kröncke */
.brand-kroncke {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
line-height: 1.15;
}
.brand-kroncke .kk-sub { font-size: 9px; letter-spacing: 0.18em; font-weight: 500; opacity: 0.75; }
/* — Gerd van Well — condensed */
.brand-gerd {
font-family: "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
font-weight: 900;
font-size: 22px;
letter-spacing: 0.02em;
font-stretch: condensed;
}
/* — CONTI+ */
.brand-conti {
font-weight: 900;
font-size: 28px;
letter-spacing: 0.04em;
}
.brand-conti .conti-plus { font-weight: 800; margin-left: 2px; }
/* — walden Austria */
.brand-walden {
display: inline-flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.brand-walden em {
font-family: "Brush Script MT", "Snell Roundhand", cursive;
font-style: normal;
font-size: 38px;
font-weight: 400;
}
.brand-walden small { font-size: 9px; letter-spacing: 0.3em; margin-top: 4px; }
/* — recozy+ */
.brand-recozy {
font-family: "Times New Roman", Georgia, serif;
font-weight: 700;
font-size: 30px;
letter-spacing: -0.01em;
font-style: italic;
}
.brand-recozy sup { font-size: 18px; vertical-align: super; }
/* ============================================================
STATS (WAS UNS ANTREIBT / UNSER ANSPRUCH)
============================================================ */
.stats {
background: var(--bg-alt);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
position: relative;
overflow: hidden;
}
.stats::before {
content: "";
position: absolute;
left: -3%;
right: -3%;
top: 8%;
height: 38%;
background: rgb(239,239,239);
transform: rotate(-0.4deg);
z-index: 0;
}
.stats-inner {
max-width: var(--container);
margin: 0 auto;
position: relative;
z-index: 1;
}
.stats-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
align-items: end;
border-bottom: 1px solid var(--ink);
padding: 32px 0;
}
.stats-row > div {
padding: 0 32px;
position: relative;
}
.stats-row > div:first-child { padding-left: 0; }
.stats-row > div:last-child { padding-right: 0; }
.stats-row > div + div::before {
content: "";
position: absolute;
left: 0;
top: 8%;
bottom: 8%;
width: 5px;
background: #000;
}
.stat-num {
font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
font-weight: 900; /* Figma: Montserrat Black */
font-size: clamp(80px, 12vw, 170px);
line-height: 0.85;
letter-spacing: -0.04em;
color: #000;
}
.stat-num .plus {
font-weight: 700;
font-size: 0.62em;
vertical-align: 0.16em;
margin-left: 0.02em;
}
.stat-num .deg {
font-weight: 600;
font-size: 0.55em;
vertical-align: 0.32em;
margin-left: -0.02em;
}
.stat-label {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(14px, 1.4vw, 24px); /* Figma: Stat-Labels 24px @1728 */
letter-spacing: 0.18em;
text-transform: uppercase;
color: #000; /* Figma: Stat-Labels schwarz, nicht muted */
margin-top: 16px;
}
.stats-text-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
margin-top: clamp(60px, 8vw, 100px);
}
.stats-text-row h3 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(22px, 2vw, 32px); /* Figma: 32px @1728 */
letter-spacing: 0.04em;
text-transform: uppercase;
margin: 0 0 24px;
display: inline-block;
transform: rotate(-0.7deg);
transform-origin: 0 50%;
position: relative;
padding-bottom: 14px;
}
.stats-text-row h3::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 60%;
height: 5px;
background: #000;
}
.stats-text-row p {
font-size: clamp(17px, 1.4vw, 20px); /* Figma: Body 20px @1728 */
line-height: 1.55;
color: var(--ink-soft);
margin: 0;
}
@media (max-width: 760px) {
.stats-row, .stats-text-row { grid-template-columns: 1fr; }
}
/* ============================================================
ABOUT BLEND (Playfair italic + big sans, mix-blend over photo)
============================================================ */
.aboutblend {
position: relative;
background: #000;
overflow: hidden;
isolation: isolate;
min-height: clamp(600px, 80vh, 880px);
min-height: clamp(600px, 80svh, 880px); /* iOS: Adressleiste (GK-05) */
display: flex;
align-items: center;
justify-content: center;
}
.aboutblend-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
}
.aboutblend-bg::after {
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,0.18);
}
.aboutblend-inner {
position: relative;
z-index: 1;
text-align: center;
padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 80px);
max-width: 1100px;
width: 100%;
}
.aboutblend-eyebrow {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 700;
font-size: clamp(40px, 5.5vw, 64px);
color: #fff; /* Feedback #57: kein Blend mehr */
line-height: 1;
margin: 0 0 28px;
}
.aboutblend-title {
font-family: var(--font-display);
font-weight: 800; /* Figma: UltraBold */
font-size: clamp(28px, 4vw, 48px);
line-height: 0.962; /* Feedback #43 */
letter-spacing: -0.05em;
color: #fff; /* Feedback #57: kein Blend mehr */
margin: 0;
text-transform: uppercase;
}
@media (max-width: 760px) {
.aboutblend { min-height: 520px; }
}
/* ============================================================
ABOUT-PAIR (image + text)
============================================================ */
.aboutpair {
background: var(--bg);
padding: clamp(60px, 8vw, 120px) var(--pad-x);
}
.aboutpair-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.aboutpair .photo {
aspect-ratio: 5/3;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.aboutpair h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(36px, 4.5vw, 64px);
text-transform: uppercase;
margin: 0 0 24px;
line-height: 0.96;
}
.aboutpair p {
margin: 0;
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
}
@media (max-width: 900px) {
.aboutpair-inner { grid-template-columns: 1fr; }
}
/* ============================================================
PROJECTS — TILTED LEAD (matches MacBook 7)
============================================================ */
.projects-lead {
background: var(--bg);
position: relative;
padding: clamp(60px, 8vw, 100px) var(--pad-x) clamp(40px, 6vw, 80px);
overflow: hidden;
}
.projects-lead-inner {
position: relative;
max-width: 1700px;
margin: 0 auto;
min-height: 720px;
}
.projects-tilt-card {
position: relative;
aspect-ratio: 5/4;
max-width: 720px;
margin-left: auto;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-color: #ebebeb;
transform: rotate(-4.8deg);
box-shadow: 0 30px 80px -10px rgba(0,0,0,0.18);
}
.projects-rotated-title {
position: absolute;
left: clamp(60px, 8vw, 140px);
bottom: 80px;
transform-origin: left bottom;
transform: rotate(-90deg) translateX(0);
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(80px, 9vw, 126px);
line-height: 0.96;
letter-spacing: -0.005em;
text-transform: uppercase;
pointer-events: none;
}
.projects-rotated-meta {
position: absolute;
left: 6px;
bottom: 80px;
transform-origin: left bottom;
transform: rotate(-90deg);
font-family: var(--font-display);
font-weight: 800;
font-size: 14px;
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
}
.projects-card-caption {
position: absolute;
right: 0;
bottom: 60px;
max-width: 320px;
padding: 24px 28px;
background: #000;
color: #fff;
transform: rotate(-4.8deg) translate(20px, 60px);
font-family: var(--font-italic);
font-size: 16px;
line-height: 1.4;
}
.projects-card-caption strong {
display: block;
font-family: var(--font-display);
font-weight: 800;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
margin-bottom: 8px;
}
@media (max-width: 900px) {
.projects-lead-inner { min-height: auto; }
.projects-tilt-card { transform: none; max-width: none; margin-top: 80px; }
.projects-rotated-title {
position: static;
transform: none;
margin-bottom: 16px;
font-size: 64px;
}
.projects-rotated-meta { display: none; }
.projects-card-caption {
position: static;
transform: none;
max-width: none;
margin-top: 24px;
}
}
/* ============================================================
PROJECTS LIST (alternating hero + label sections)
============================================================ */
.projects-list {
background: var(--bg);
padding: clamp(40px, 6vw, 80px) 0;
}
.project-section-title {
padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(20px, 3vw, 32px);
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(28px, 3vw, 40px);
text-transform: uppercase;
letter-spacing: 0.01em;
max-width: var(--container);
margin: 0 auto;
}
/* Aktuell head — eyebrow + tag list (matches Figma frame 8) */
.aktuell-head {
max-width: var(--container);
margin: clamp(60px, 7vw, 100px) auto clamp(20px, 3vw, 32px);
padding: 0 var(--pad-x);
display: grid;
grid-template-columns: 220px 1fr;
gap: 24px 56px;
align-items: start;
border-top: 1px solid rgba(0,0,0,0.18);
padding-top: 28px;
}
.aktuell-label {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(24px, 3.2vw, 48px); /* Figma: Sektions-Köpfe 48px @1728 */
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000;
}
.aktuell-tags {
display: flex;
flex-wrap: wrap;
gap: 16px 32px;
align-items: center;
}
.aktuell-tag {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #000;
padding: 8px 14px;
border: 1px solid rgba(0,0,0,0.6);
border-radius: 999px;
white-space: nowrap;
}
.aktuell-tag.is-empty {
width: 36px;
height: 36px;
padding: 0;
border-radius: 50%;
border-color: rgba(0,0,0,0.5);
}
@media (max-width: 700px) {
.aktuell-head { grid-template-columns: 1fr; }
.aktuell-tag { font-size: 11px; letter-spacing: 0.14em; padding: 6px 10px; }
}
.project-banner.is-event {
aspect-ratio: 16/9;
}
.project-banner {
position: relative;
aspect-ratio: 5/2;
margin: 24px 0;
overflow: hidden;
background: #000;
isolation: isolate;
}
.project-banner.dark { background: #000; aspect-ratio: 16/7; }
.project-banner .img {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
transition: transform .9s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .project-banner:hover .img { transform: scale(1.03); } }
.project-banner .meta {
position: relative;
z-index: 2;
padding: clamp(40px, 6vw, 100px) var(--pad-x);
color: #fff;
display: flex;
flex-direction: column;
justify-content: flex-end;
height: 100%;
background: linear-gradient(180deg, transparent, rgba(0,0,0,0.5));
max-width: var(--container);
margin: 0 auto;
}
.project-banner .eyebrow {
font-family: var(--font-display);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.22em;
text-transform: uppercase;
opacity: 0.9;
margin-bottom: 10px;
}
.project-banner h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(32px, 5vw, 64px);
text-transform: uppercase;
letter-spacing: 0.005em;
line-height: 0.96;
max-width: 16ch;
}
/* Centered text-only project tile (CRAFT OVER CODE on dark) */
.project-text {
background: #000;
color: #fff;
padding: clamp(60px, 8vw, 120px) var(--pad-x);
text-align: left;
}
.project-text-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 48px;
align-items: center;
}
.project-text h3 {
margin: 0 0 16px;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(36px, 4.5vw, 64px);
text-transform: uppercase;
}
.project-text p {
margin: 0;
font-size: clamp(20px, 1.45vw, 25px); /* Figma: Projektbeschreibung ~25px Syne @1728 */
line-height: 1.6;
opacity: 0.9;
}
@media (max-width: 760px) {
.project-text-inner { grid-template-columns: 1fr; }
}
/* Two-up split (DORNBRACHT + OBJECT CARPET) */
.projects-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.projects-split .project-banner { margin: 0; aspect-ratio: 4/3; }
@media (max-width: 760px) {
.projects-split { grid-template-columns: 1fr; }
}
/* ============================================================
SERVICES
============================================================ */
/* Feedback #64 (03.08.2026): Der Abstand zwischen Above-the-Fold-Bereich und
den Leistungs-Dropdowns war zu groß (140px @1512). Oben deutlich enger,
unten unverändert — das Akkordeon rückt näher an den Hero. */
.services {
background: var(--bg);
padding: clamp(36px, 4.1vw, 62px) var(--pad-x) clamp(80px, 10vw, 140px);
}
.services-inner {
max-width: var(--container);
margin: 0 auto;
}
.services h2 {
margin: 0 0 clamp(40px, 5vw, 60px);
font-size: clamp(40px, 5vw, 64px);
max-width: 16ch;
}
.accordion {
border-top: 1px solid var(--ink);
}
.accordion-item {
border-bottom: 1px solid var(--ink);
}
.accordion-trigger {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 28px 8px;
background: transparent;
border: 0;
text-align: left;
font-family: var(--font-display);
/* Figma Website_Final 15.07.2026: Trigger deutlich größer (~52px @1728);
4.2vw wie .career-intro-title, damit Trigger und Section-Headline auch
unterhalb der Design-Breite gleich groß bleiben. */
font-weight: 900;
font-size: clamp(26px, 4.2vw, 52px);
line-height: 1; /* Figma Leistungen-Panels: lh 100 % */
text-transform: uppercase;
letter-spacing: -0.05em; /* Feedback #43 */
transition: padding-left .25s ease;
}
/* Feedback #10/#12 (20.07.2026): Trigger bleibt beim Hover STABIL — der
frühere Einrück-Shift (padding-left 18px) und der Bounce sind raus. */
.accordion-trigger .icon {
width: 28px; height: 28px; position: relative;
flex-shrink: 0;
}
.accordion-trigger .icon::before,
.accordion-trigger .icon::after {
content: ""; position: absolute; background: currentColor;
transition: transform .3s ease;
}
.accordion-trigger .icon::before {
left: 0; right: 0; top: 50%; height: 2px; transform: translateY(-50%);
}
.accordion-trigger .icon::after {
top: 0; bottom: 0; left: 50%; width: 2px; transform: translateX(-50%);
}
.accordion-item.open .accordion-trigger .icon::after { transform: translateX(-50%) scaleY(0); }
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height .5s cubic-bezier(.2,.7,.2,1);
}
.accordion-inner {
/* Figma Website_Final: einspaltig — Kicker (fett) + Liste, kein rechter Absatz */
padding: 0 8px 36px;
font-size: 16px;
line-height: 1.5;
color: var(--ink-soft);
}
.accordion-inner ul { margin: 0; padding-left: 20px; list-style: disc; }
.accordion-inner ul li { margin-bottom: 5px; font-family: var(--font-meta); }
.accordion-inner h4.accordion-kicker {
margin: 0 0 10px;
font-family: var(--font-meta);
font-weight: 700;
font-size: 16px;
letter-spacing: 0;
/* kein text-transform: die Kicker stehen teils gemischt-groß im Design */
text-transform: none;
}
/* ============================================================
ABOUT (UNSERE AUFGABE) + OFFENE STELLEN
============================================================ */
.about {
background: var(--bg);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
border-top: 1px solid var(--line);
}
.about-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 2fr;
gap: clamp(40px, 6vw, 100px);
}
.about h2 {
margin: 0;
font-size: clamp(32px, 3.5vw, 48px);
}
.about p {
margin: 0 0 16px;
font-size: clamp(17px, 1.4vw, 20px); /* Figma: Body 20px */
line-height: 1.55;
color: var(--ink-soft);
}
.about p strong { font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
.about-inner { grid-template-columns: 1fr; }
}
/* Feedback #67 (03.08.2026, Figma-Prototyp aktualisiert): „Offene Stellen" ist
jetzt die Sektions-Überschrift, darunter trägt JEDES Dropdown den Titel der
konkreten Stelle (Aufbau wie „Leistungen"). Die Trennlinien liefert das
Akkordeon selbst (border-top + border-bottom je Item) — die früheren Rahmen
der .jobs-row hätten sie oben und unten verdoppelt. */
.jobs {
background: var(--bg);
padding: clamp(40px, 5vw, 64px) var(--pad-x) clamp(80px, 10vw, 140px);
}
.jobs-inner {
max-width: var(--container);
margin: 0 auto;
}
.jobs-heading {
margin: 0 0 clamp(24px, 3vw, 44px);
/* wie die übrigen Sektions-Headlines (Figma 1:2513: 52px @1728) */
font-size: clamp(30px, 3.4vw, 52px);
}
.jobs-row {
max-width: var(--container);
margin: 0 auto;
}
/* Trigger erbt die Basisgröße aus .accordion-trigger. */
/* ============================================================
FORSCHUNG SECTION (matches MacBook 6)
============================================================ */
.forschung {
background: var(--bg);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.forschung-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.forschung .photo {
aspect-ratio: 3/4;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.forschung .brochure-mockup {
aspect-ratio: 4/5;
background-size: contain;
background-color: #ebebeb;
background-position: center;
background-repeat: no-repeat;
transform: rotate(-2.4deg);
filter: drop-shadow(0 30px 50px rgba(0,0,0,0.18));
}
.forschung h3 {
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(34px, 4vw, 52px); /* Spec: "KONTAKTE MIT SUBSTANZ" 52px (neue, kleinere Skala) */
text-transform: uppercase;
margin: 0 0 24px;
}
/* Forschung: einspaltiger ACF-Fallback ohne Mockup-Spalte */
.forschung-inner--single { grid-template-columns: 1fr; }
.forschung p {
margin: 0 0 24px;
font-size: clamp(18px, 1.6vw, 24px); /* Figma: 24px Syne @1728 */
line-height: 1.6;
color: var(--ink-soft);
}
@media (max-width: 900px) {
.forschung-inner { grid-template-columns: 1fr; }
}
/* ============================================================
PRESSELOUNGE (erhaltenes Element — GeSK-Branding)
============================================================ */
.presselounge {
background: var(--bg);
padding: clamp(40px, 6vw, 80px) var(--pad-x) clamp(80px, 10vw, 140px);
}
.presselounge-inner {
max-width: var(--container);
margin: 0 auto;
}
.presse-intro {
max-width: 640px;
font-size: 17px;
line-height: 1.6;
color: var(--ink-soft);
margin: 0 0 clamp(40px, 5vw, 64px);
}
.presse-list {
border-top: 1px solid var(--ink);
}
.presse-item {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 24px 40px;
align-items: center;
padding: 28px 8px;
border-bottom: 1px solid var(--ink);
transition: padding-left .25s ease;
}
@media (hover: hover) { .presse-item:hover { padding-left: 18px; } }
.presse-date {
font-family: var(--font-display);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.14em;
color: var(--ink-muted);
text-transform: uppercase;
}
.presse-item h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(18px, 2vw, 26px);
text-transform: uppercase;
letter-spacing: 0.01em;
}
.presse-item .presse-client {
display: block;
font-family: var(--font-body);
font-weight: 400;
font-size: 14px;
text-transform: none;
color: var(--ink-muted);
margin-top: 6px;
letter-spacing: 0;
}
@media (max-width: 760px) {
.presse-item { grid-template-columns: 1fr; gap: 12px; }
}
/* ============================================================
UNSERE VERTEILER (Press distribution — magazine mockup + media logos)
============================================================ */
.verteiler {
position: relative;
background: #efeeec;
padding: 140px var(--pad-x) 160px;
overflow: hidden;
}
.verteiler::before {
content: "";
position: absolute;
left: -6%;
right: -6%;
top: 0;
height: 1px;
background: rgba(0,0,0,0.18);
transform: rotate(-1.4deg);
}
.verteiler-mockup {
position: absolute;
top: -40px;
right: -8%;
width: 60%;
max-width: 880px;
transform: rotate(4.6deg);
z-index: 1;
pointer-events: none;
}
.verteiler-mockup img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 30px 60px rgba(0,0,0,0.18));
}
.verteiler-content {
position: relative;
z-index: 2;
max-width: 1560px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 56px;
}
.verteiler-title {
font-size: clamp(56px, 8vw, 132px);
margin: 0;
line-height: 0.92;
letter-spacing: -0.01em;
color: #000;
transform: rotate(-0.6deg);
transform-origin: 0 0;
}
.verteiler-lede {
max-width: 520px;
font-family: var(--font-body);
font-size: 18px;
line-height: 1.55;
color: #1a1a1a;
margin: 0;
}
.verteiler-logos {
list-style: none;
margin: 40px 0 0;
padding: 56px 0 0;
border-top: 1px solid rgba(0,0,0,0.2);
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
gap: 56px 40px;
align-items: center;
justify-items: center;
}
.verteiler-logos li {
font-family: var(--font-display);
font-weight: 800;
font-size: 22px;
letter-spacing: 0.02em;
color: #000;
text-align: center;
line-height: 1;
text-transform: uppercase;
display: flex;
flex-direction: column;
gap: 2px;
align-items: center;
}
.verteiler-logos li.vl-schoener {
font-style: italic;
font-weight: 900;
font-size: 17px;
letter-spacing: 0;
line-height: 0.95;
}
.verteiler-logos li.vl-ideat {
font-size: 28px;
font-weight: 900;
letter-spacing: 0;
}
.verteiler-logos li.vl-ideat small {
font-size: 9px;
font-weight: 600;
letter-spacing: 0.18em;
margin-top: 4px;
}
.verteiler-logos li.vl-deco {
font-family: "Times New Roman", serif;
font-weight: 700;
font-size: 32px;
letter-spacing: -0.02em;
}
.verteiler-logos li.vl-hauser {
font-family: "Times New Roman", serif;
font-weight: 700;
font-size: 28px;
letter-spacing: 0.04em;
}
.verteiler-logos li.vl-ad {
font-family: "Times New Roman", serif;
font-weight: 700;
font-size: 36px;
letter-spacing: 0.02em;
}
.verteiler-logos li.vl-goodlife {
font-family: "Times New Roman", serif;
font-weight: 600;
font-size: 18px;
line-height: 0.95;
letter-spacing: 0.02em;
}
@media (max-width: 1100px) {
.verteiler-mockup { position: relative; top: 0; right: 0; width: 80%; margin: 0 auto 32px; transform: rotate(2deg); }
.verteiler { padding: 80px var(--pad-x); }
.verteiler-title { font-size: 56px; }
}
/* ============================================================
CONNECT (Figma: langsam durchlaufende Design-Bilder mit
Overlay-Titel "CONNECT WITH us / GEMACHT FÜR DIE EWIGKEIT",
darunter schwarze Pills auf Weiß)
============================================================ */
/* Feedback #18 (20.07.2026): jedes Strip-Bild exakt im Figma-Maß 1120×630
(Component 6, 2356:1634) — proportional 64.81vw × 36.46vw, Gap 20px @1728
(1.16vw). Die Bilder behalten damit ihr 16:9-Format (vorher 63.9×23.8vw
beschnitten). KEIN Scrim — weißer Titel direkt auf den Bildern. */
.connect {
position: relative;
background: var(--bg);
overflow: hidden;
height: clamp(320px, 36.46vw, 630px);
isolation: isolate;
}
/* Feedback #60 + #62 (03.08.2026): Auf Forschung stieß die animierte Galerie
direkt an das Above-the-Fold-Bild, auf der Startseite direkt an das graue
Band „Aktuelle Themen" (gemessen: 0px). Referenz ist laut Alessandro der
Abstand auf „Referenzen" zwischen Media-Outlets-Band und Galerie — das ist
exakt `.refz-media`s margin-bottom, deshalb hier derselbe Wert. */
.reveal-hero + .connect,
.reveal-hero + .connect-pills, /* #91: Forschung ohne Bildstreifen — Pills bekommen denselben Abstand zum Kopfbereich */
.recent-works + .connect {
margin-top: clamp(48px, 5.6vw, 100px);
}
.connect-strip {
position: absolute;
inset: 0;
overflow: hidden;
}
.connect-strip-track {
display: flex;
gap: 1.16vw;
height: 100%;
width: max-content;
/* Spec: Loop-Carousel deutlich langsamer/ruhiger (~2x: 90s → 180s) */
animation: marquee 180s linear infinite;
will-change: transform;
}
.connect-img {
width: 64.81vw;
height: 100%;
align-self: stretch;
background-size: cover;
background-position: center;
flex-shrink: 0;
}
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
.connect-overlay {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: clamp(6px, 1vw, 14px);
text-align: center;
color: #fff;
padding: 0 var(--pad-x);
pointer-events: none;
}
/* Figma 06.07.2026: nur noch die Display-Headline "GEMACHT FÜR DIE EWIGKEIT" —
die Eyebrow-Zeile "Connect with us" existiert im neuen Design nicht mehr. */
.connect-title {
font-size: clamp(28px, 3vw, 46px);
line-height: 0.96;
text-shadow: 0 0 24px rgba(0, 0, 0, 0.18);
}
.connect-overlay .italic-accent {
font-family: "Playfair Display", Georgia, serif;
font-weight: 600;
}
.connect-pills {
display: flex;
gap: clamp(48px, 9vw, 136px);
justify-content: center;
padding: clamp(40px, 5vw, 64px) var(--pad-x);
background: var(--bg);
}
/* GK-06 Runde 1 (23.09.2026, Nachmessung 320–412 px): zwei Pillen à 154 px + 48 px Abstand = 356 px,
zentriert in 345 px (375) bzw. 330 px (360) — die linke Pille rückte auf 9 bzw. 2 px an den Rand,
bei 320 px lief die Reihe beidseitig über. Bis 380 px engerer Abstand, notfalls zwei Reihen. */
@media (max-width: 380px) {
.connect-pills { flex-wrap: wrap; gap: 16px clamp(12px, 4vw, 48px); } /* Innenbreite 375 px: 335 → eine Reihe; 360 px: 320 → zwei Reihen (2 × 156 + Abstand passen nicht) */
}
/* Figma 06.07.2026: Pill-Labels "Kontakt" / "Rufe uns an" in Mischschreibung,
Regular-Gewicht, weißer Kreis mit dünnem Pfeil rechts. */
/* Feedback #68 (03.08.2026): „E-Mail" und „Jetzt kontaktieren" laufen in
Poppins Medium statt in der Display-Schrift (--font-meta = Poppins, 500). */
.connect-pills .pill { font-family: var(--font-meta); text-transform: none; letter-spacing: 0.01em; font-size: 14px; font-weight: 500; }
/* Hover (Fedo 06.07. + Kolja-Korrektur 16.07. + Feedback #7 20.07.): der weiße
Kreis wächst von rechts nach links auf, bis die Pille weiß gefüllt ist —
das Label bleibt sichtbar und wechselt auf Schwarz (vorher blendete es aus);
der Pfeil bleibt RECHTS stehen (nicht mittig). */
.pill.solid {
background: #000;
color: #fff;
border-color: #000;
min-width: clamp(156px, 11vw, 190px); /* 190 @1728 wie im Figma, s. --pill-h */
position: relative;
overflow: hidden;
padding-right: var(--pill-h); /* Platz für den absolut gesetzten Kreis */
}
.pill.solid .dot {
background: #fff;
color: #000;
position: absolute;
top: 2px;
right: 2px;
bottom: 2px;
height: auto;
width: calc(var(--pill-h) - 6px); /* echter Kreis: Höhe minus Rand (1px) und Abstand (2px) je Seite */
/* Feedback #50 (23.07.2026): SVG-Pfeil (20px, 2px-Strich) EXAKT im
Ruhekreis zentriert: (Kreis − 20) / 2 Randabstand — 11px @48, 7px @40.
Beim Hover-Aufwachsen bleibt er rechts an Ort und Stelle (flex-end). */
justify-content: flex-end;
padding-right: calc((var(--pill-h) - 6px - 20px) / 2);
transition: width 0.38s cubic-bezier(0.65, 0, 0.35, 1);
}
.pill .dot .dot-arrow { display: block; flex-shrink: 0; }
.pill.solid > span:first-child {
position: relative;
z-index: 1; /* Label liegt über dem aufwachsenden weißen Kreis */
transition: color 0.25s ease;
}
@media (hover: hover) { .pill.solid:hover { background: #000; color: #fff; transform: none; } }
@media (hover: hover) { .pill.solid:hover .dot { width: calc(100% - 4px); background: #fff; color: #000; } }
@media (hover: hover) { .pill.solid:hover > span:first-child { color: #000; } }
/* Feedback-Button #92 (Moritz, 09.09.2026): Forschung-CTA in umgekehrten Farben —
weiße Pille, schwarze Schrift, schwarzer Kreis mit weißem Pfeil; beim Hover
wächst der schwarze Kreis über die Pille, die Schrift wird weiß (Spiegelbild
der schwarzen Pille). */
.pill.solid.pill--invert { background: #fff; color: #000; border-color: #fff; }
.pill.solid.pill--invert .dot { background: #000; color: #fff; }
@media (hover: hover) { .pill.solid.pill--invert:hover { background: #fff; color: #000; } }
@media (hover: hover) { .pill.solid.pill--invert:hover .dot { background: #000; color: #fff; } }
@media (hover: hover) { .pill.solid.pill--invert:hover > span:first-child { color: #fff; } }
/* ============================================================
BUTTONS
============================================================ */
.pill {
/* Feedback Alessandro 07.09.2026 (PDF Punkt 2): Call-to-Actions „ein bisschen
kleiner“ — Referenzgröße ist der Absenden-Pill im Figma (≈190×48 @1728 =
11vw × 2,78vw). Die Pille skaliert deshalb wie der Rest des Designs mit der
Viewportbreite, statt auf jedem Bildschirm fix 190×48 zu bleiben: auf einem
~1365px-Fenster (Ales Screenshots) 156×40, ab 1728px unverändert wie im
Figma. Kreis, Platz für den Kreis und Pfeil-Zentrierung hängen an --pill-h. */
--pill-h: clamp(40px, 2.78vw, 48px);
display: inline-flex; align-items: center; gap: 8px;
padding: 2px 2px 2px 16px;
min-width: clamp(132px, 9.2vw, 159px);
height: var(--pill-h);
background: #fff; color: #000;
border: 1px solid #000;
border-radius: 192px;
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.04em;
text-transform: uppercase;
transition: transform .2s ease, background .25s ease, color .25s ease;
justify-content: space-between;
}
.pill > span:first-child {
flex: 1;
text-align: left;
padding-left: 4px;
}
.pill .dot {
width: calc(var(--pill-h) - 4px); height: calc(var(--pill-h) - 4px);
border-radius: 136px;
background: rgb(30,30,30);
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
/* Figma Buttons/03+4: solider Pfeil. Der Display-Font rendert "→" als dünnen
Strich-Pfeil → neutraler System-Font mit klarem Glyph. */
font-family: Arial, "Helvetica Neue", sans-serif;
font-size: 18px;
font-weight: 700;
flex-shrink: 0;
transition: background .25s ease;
}
@media (hover: hover) { .pill:hover { transform: translateY(-1px); background: #000; color: #fff; } }
@media (hover: hover) { .pill:hover .dot { background: #fff; color: #000; } }
.pill.outline { background: transparent; color: inherit; border-color: currentColor; }
.pill.outline .dot { background: currentColor; color: #000; }
@media (hover: hover) { .pill.outline:hover { background: currentColor; color: #000; } }
@media (hover: hover) { .pill.outline:hover .dot { background: #000; color: currentColor; } }
/* ============================================================
NEWSLETTER (slightly tilted as in figma)
============================================================ */
.newsletter {
background: var(--bg);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
border-top: 1px solid var(--line);
}
.newsletter-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: clamp(24px, 4vw, 64px);
align-items: end;
transform: rotate(-1deg);
transform-origin: left center;
}
.newsletter h2 {
margin: 0;
font-size: clamp(40px, 4.5vw, 48px); /* Figma: BLEIB VERBUNDEN 48px @1728 */
line-height: 0.95;
}
.newsletter .subtitle {
margin: 0;
font-size: 20px; /* Figma: 20px */
font-family: var(--font-italic);
font-weight: 500;
line-height: 1.3;
}
.newsletter form { width: 100%; }
.email-field {
display: flex; align-items: center;
border-bottom: 1.5px solid var(--ink);
padding-bottom: 12px;
}
.email-field input {
flex: 1;
border: 0; outline: 0;
background: transparent;
padding: 8px 0;
font: inherit;
font-family: var(--font-display);
font-weight: 800;
font-size: 24px; /* Figma: E-MAIL ADRESSE 24px @1728 */
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
}
.email-field input::placeholder { color: var(--ink); }
.email-field button {
width: 44px; height: 44px;
border: 0; background: transparent;
display: inline-flex; align-items: center; justify-content: center;
transition: transform .25s ease;
}
@media (hover: hover) { .email-field button:hover { transform: translateX(4px); } }
.email-field button svg { width: 28px; height: 28px; }
.newsletter .pill { margin-top: 18px; }
.newsletter .thanks {
display: inline-block;
margin-left: 12px;
font-size: 13px;
}
@media (max-width: 900px) {
.newsletter-inner { grid-template-columns: 1fr; transform: none; }
}
/* ============================================================
FOOTER LINKS BAR
============================================================ */
.foot-bar {
/* Feedback #52 (23.07.2026): alle Einträge auf gemeinsamer Text-Unterkante */
display: flex; justify-content: space-between; align-items: baseline;
padding: 24px var(--pad-x);
/* kein border-top: im Figma trennt keine Linie den Footer */
background: #fff;
font-family: var(--font-display);
font-weight: 700;
font-size: clamp(11px, 0.9vw, 14px); /* Figma 06.07.2026: eine Zeile, klein, fett */
letter-spacing: 0.04em;
text-transform: uppercase;
color: #000; /* Figma 06.07.2026: schwarz */
flex-wrap: wrap;
gap: 16px;
}
.foot-bar nav { display: flex; gap: 32px; flex-wrap: wrap; }
.foot-bar nav ul { display: contents; list-style: none; margin: 0; padding: 0; }
.foot-bar nav li { display: contents; }
@media (hover: hover) { .foot-bar a:hover { opacity: .6; } }
/* ============================================================
BIG GESK FOOTER MARK (Figma 06.07.2026: riesige, komplett schwarze
360°-Wortmarke über die volle Breite, Baseline unten angeschnitten)
============================================================ */
.giant-mark {
background: var(--bg);
padding: clamp(24px, 3vw, 48px) 0 0;
overflow: hidden;
position: relative;
}
/* 17.07.2026: Wortmarke = Vektor-Render des Original-Logos (600dpi aus
GeSK_logo_schwarz.pdf) statt CSS-Nachbau — die Figma-Wortmarke IST das
Logo-Lockup (schmalere Letterformen als Kommon Extended, Kreis mit
feiner "360" + Grad-Ring). Randlos volle Breite; Anschnitt unten:
sichtbare Ink-Höhe 224/1413 Screenbreite (Figma f05) — Bildhöhe
24.74vw (Aspekt 4.0416), Soll sichtbar 15.85vw → Rest wegschneiden. */
.giant-mark-img {
display: block;
width: 100%;
height: auto;
/* srcset-Stufen (22.09.2026) haben durch Rundung ein minimal anderes Seitenverhältnis als das
4200×1039-Original — die Höhe bleibt so exakt wie vorher. */
aspect-ratio: 4200 / 1039;
margin-bottom: -8.89vw;
}
/* ============================================================
AKTUELLE THEMEN (Interaktions-PDF S.2 — Kartenreihe mit
rotierter Überschrift und Headline-Reveal im #efefef-Streifen)
============================================================ */
.aktuell {
position: relative;
background: var(--bg-alt);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
overflow: hidden;
}
.aktuell-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 80px 1fr;
gap: clamp(24px, 4vw, 56px);
align-items: stretch;
}
.aktuell-rotated {
writing-mode: vertical-rl;
transform: rotate(180deg);
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(28px, 3vw, 44px);
text-transform: uppercase;
letter-spacing: 0.01em;
align-self: end;
}
.aktuell-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 3vw, 40px);
}
.aktuell-card .img {
aspect-ratio: 3/4;
background-size: cover;
background-position: center;
background-color: #ddd;
}
.aktuell-card .month {
font-family: var(--font-display);
font-weight: 700;
font-size: 12px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-muted);
margin: 16px 0 6px;
}
.aktuell-card h3 {
margin: 0;
font-family: var(--font-display);
font-weight: 900;
font-size: clamp(18px, 1.8vw, 24px);
text-transform: uppercase;
}
.aktuell-card h3 .serif { font-family: "Times New Roman", Georgia, serif; font-style: italic; font-weight: 600; text-transform: none; }
.aktuell-card .sub {
font-size: 14px;
color: var(--ink-muted);
margin: 4px 0 14px;
}
.aktuell-card .more {
font-family: var(--font-display);
font-weight: 800;
font-size: 12px;
letter-spacing: 0.16em;
text-transform: uppercase;
border-bottom: 2px solid #000;
padding-bottom: 3px;
}
@media (hover: hover) { .aktuell-card .more:hover { opacity: .6; } }
@media (max-width: 900px) {
.aktuell-inner { grid-template-columns: 1fr; }
.aktuell-rotated { writing-mode: horizontal-tb; transform: none; }
.aktuell-cards { grid-template-columns: 1fr; }
}
/* Headline-Reveal (Interaktions-PDF S.2): Überschrift blendet beim
Scrollen ein, feine Linie verschwindet, sobald sie ganz sichtbar ist */
.reveal-init {
opacity: 0;
transform: translateY(24px);
position: relative;
}
.reveal-init::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 1px;
/* Spec: sehr feine, kaum sichtbare Linie, die verschwindet sobald
die Überschrift vollständig sichtbar ist */
background: rgba(0,0,0,0.10);
transform: scaleX(0);
transform-origin: left center;
opacity: 1;
transition: transform .55s ease, opacity .4s ease .5s;
}
.reveal-init.is-revealed::after {
transform: scaleX(1);
}
.reveal-init.is-revealed {
opacity: 1;
transform: none;
transition: opacity .7s ease, transform .7s ease;
}
.reveal-init.is-revealed::after { opacity: 0; }
/* Rotierte Überschrift behält ihre Rotation in beiden Reveal-Zuständen */
.aktuell-rotated.reveal-init { transform: rotate(180deg) translateY(-24px); }
.aktuell-rotated.reveal-init.is-revealed { transform: rotate(180deg); }
/* ============================================================
SERVICES-HERO-LABEL (Leistungen: „Services"-Eyebrow — der Hero selbst
ist seit dem Figma-Update 20.07.2026 ein .reveal-hero, s. oben)
============================================================ */
.services-hero-label {
/* Figma Website_Final 15.07.2026: "Services" kursiv-serif, gemischt-groß —
wie die "Über uns"-Eyebrows (Playfair Bold Italic), nicht Display-Caps. */
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 700;
font-stretch: normal;
font-size: clamp(24px, 2.2vw, 34px);
letter-spacing: 0;
line-height: 1;
text-transform: none;
margin: 0 0 10px;
color: #fff;
}
/* ============================================================
PROJEKTE-HERO (Interaktions-PDF S.1 — "Projects / AUS BERLIN.
FÜR DIE WELT." auf Weiß; Text scrollt langsamer und verschwindet
hinter dem nachfolgenden Bildbereich)
============================================================ */
.projects-hero {
position: relative;
background: var(--bg);
min-height: 72vh;
min-height: 72svh; /* iOS: Adressleiste (GK-05) */
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: clamp(160px, 20vw, 240px) var(--pad-x) clamp(60px, 8vw, 100px);
z-index: 0;
}
.projects-hero .eyebrow-serif,
.refz-hero .eyebrow-serif {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 700; /* Figma: Playfair Display Bold Italic */
font-size: clamp(22px, 2.4vw, 34px);
margin: 0 0 8px;
}
.projects-hero h1 {
margin: 0;
font-size: clamp(36px, 4.4vw, 66px); /* Figma 06.07.2026: Headlines kompakter */
}
.projects-hero-headline {
will-change: opacity, transform;
}
/* Referenzen-Hero (Proto 9/21, 17.07.2026): Vollflaechen-Medium bleibt
stehen (sticky, 100vh), die Ueberschrift liegt im Scrollfluss und
schiebt sich von unten ueber das Bild (Sektion 200vh = Scrollstrecke,
danach schiebt die Logo-Wand den Hero regulaer hinaus). */
.refz-hero {
position: relative;
height: 200vh;
height: 200svh; /* iOS: Adressleiste (GK-05) */
isolation: isolate; /* Blend-Boundary: Exclusion-Titel invertiert nur das Hero-Bild, nicht die Seite */
}
.refz-hero-media {
position: sticky;
top: 0;
height: 100vh;
height: 100svh; /* iOS: Adressleiste (GK-05) */
overflow: hidden;
}
.refz-hero-media video,
.refz-hero-img {
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center;
}
/* Feedback #24 (21.07.): Chrome komponiert H.264-Videos in einen Hardware-
Overlay-Layer, auf den mix-blend-mode NICHT angewendet wird — die
Exclusion-Headline stand dann statisch weiß auf dem Video statt dynamisch
zu invertieren. Ein (unsichtbarer) Filter zwingt das Video in den
regulären Compositing-Pfad, damit der Blend greift. Seit der Exclusion-
Navbar (#36, 22.07.) global: die Navbar überfährt JEDES Video. */
video {
filter: brightness(1.001);
}
.refz-hero-headline {
position: absolute;
/* Startzustand wie im Proto: Eyebrow + 1. Zeile lugen unten heraus */
top: calc(100vh - 180px);
top: calc(100svh - 180px); /* iOS: Adressleiste (GK-05) */
left: 0;
right: 0;
/* KEIN z-index (Feedback #24, 21.07.): z-index erzeugt einen Stacking-
Context = isolierte Blend-Gruppe — der Exclusion-Blend erreichte das
Bild darunter nicht und die Headline stand statisch weiß. Über dem
Sticky-Medium liegt der Text trotzdem (positioniert + später im DOM). */
padding: 0 var(--pad-x);
}
/* Figma (Node 662:2494): Eyebrow + Headline sind EIN Textknoten, Fill #ffffff
mit blendMode EXCLUSION. Der Blend invertiert den Hintergrund darunter — daher
erscheint der Titel über dem hellen Hero dunkel und verschiebt beim Scrollen
über die farbige Fläche den Farbton (das war die vermeintliche „Lavendel/Schiefer"-
Färbung: ein Sampling-Artefakt des Exclusion-Blends, keine Buchstabenfarben). */
.refz-hero-eyebrow {
color: #fff;
/* 29.07.2026 (Kolja): Exclusion wiederhergestellt — der invertierende
Hero steht so im Figma (Node „References…" = weiß + EXCLUSION).
#57 galt dem Leistungen-Hero, der im Figma OHNE Blend angelegt ist. */
mix-blend-mode: exclusion;
margin: 0 0 6px;
}
.refz-hero-title {
color: #fff;
mix-blend-mode: exclusion; /* 29.07.2026: wiederhergestellt, s. Eyebrow */
font-size: clamp(30px, 3.2vw, 50px);
line-height: 0.962; /* Feedback #43 */
letter-spacing: -0.05em;
text-transform: none;
margin: 0;
}
/* Alt-Markup (gespeicherte ACF-Werte) neutralisieren: Akzent-Spans erben Weiß. */
.refz-hero-title .hl-lav,
.refz-hero-title .hl-slate { color: inherit; }
/* GK-06 Runde 1 (23.09.2026, iPhone 15/16 Safari, Befund A3 Referenzen): Die Überschrift
invertierte nur, solange ihre Einblend-Transition lief, danach stand sie weiß auf dem Bild —
Eyebrow („References“) von Anfang an. WebKit rechnet den Blend einer NICHT komposit
gezeichneten Schrift nur gegen die eigene Zeichenfläche der Gruppe, nicht gegen das
gepinnte Medium, das auf iOS immer eine eigene Compositing-Ebene ist (die fixe
Exclusion-Menüleiste invertiert dagegen — sie ist komposit). will-change hält die
Schriftelemente dauerhaft komposit; nur die Elemente selbst, nicht der Rahmen (ein
Stacking-Context am Rahmen isolierte den Blend, s. Feedback #24). Desktop-Chromium: Geometrie
und Screenshots des Heros unverändert (Beleg Runbook §16). */
.refz-hero-eyebrow,
.refz-hero-title,
.reveal-hero--exclusion .reveal-hero-eyebrow,
.reveal-hero--exclusion .reveal-hero-title,
.reveal-hero--exclusion .services-hero-label,
.reveal-hero--exclusion .reveal-hero-copy p { will-change: transform; }
/* Referenzen-Hero (frame-3): Titel weiß, 52px, gemischte Schreibweise
(text-transform:none, da "References" literal gemischt ist). */
.projects-title {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
text-transform: none;
line-height: 0.96;
letter-spacing: -0.005em;
font-size: clamp(34px, 4.2vw, 52px);
color: #000;
margin: 0;
}
/* Weiße Hero-Headline braucht dunklen Grund: Referenzen-Hero (kein Media-BG). */
.projects-hero:has(.projects-title),
body.page-template-page-referenzen .projects-hero {
background: #fff;
color: #000;
}
/* Projekte-Hero (frame-8): dunkel/bildbasiert, weiße Wortmarke 64px. */
.projects-hero--dark {
background: #fff;
color: #000;
}
.projects-hero-eyebrow {
font-family: "Playfair Display", Georgia, serif; /* Live-Figma 06.07.2026: kursives Serif-Eyebrow */
font-style: italic;
font-weight: 700;
font-stretch: normal;
text-transform: none;
color: #000;
font-size: clamp(22px, 2.4vw, 34px);
line-height: 1.1;
letter-spacing: 0;
margin: 0 0 8px;
}
.projects-hero-title {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
text-transform: uppercase;
color: #000;
font-size: clamp(32px, 3.85vw, 58px);
line-height: 0.962; /* Feedback #43 */
letter-spacing: -0.05em;
margin: 0;
}
/* Der nachfolgende Inhalt schiebt sich über den Hero-Text */
.projects-hero + * {
position: relative;
z-index: 1;
background: var(--bg);
}
/* ============================================================
LOGO-WAND (Referenzen, Figma f07)
============================================================ */
.logo-wall {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: clamp(32px, 4vw, 64px) clamp(24px, 3vw, 48px);
align-items: center;
justify-items: center;
}
.logo-wall-item img {
max-height: 44px;
max-width: 180px;
object-fit: contain;
filter: grayscale(1) brightness(0);
opacity: 0.85;
transition: opacity .25s ease;
}
@media (hover: hover) { .logo-wall-item:hover img { opacity: 1; } }
/* ============================================================
KONTAKT (Figma f16 — Formular + Karte)
============================================================ */
.kontakt-form {
background: var(--bg-alt);
padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.kontakt-form-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
}
.kontakt-form h2 { margin: 0 0 16px; font-size: clamp(32px, 3.5vw, 56px); }
.kontakt-form p { font-size: 16px; line-height: 1.55; color: var(--ink-soft); }
.kontakt-form .form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 16px;
}
.kontakt-form input,
.kontakt-form textarea {
width: 100%;
border: 0;
border-bottom: 1.5px solid var(--ink);
background: transparent;
padding: 12px 4px;
font: inherit;
font-size: 15px;
outline: 0;
}
.kontakt-form textarea { margin-bottom: 24px; resize: vertical; }
@media (max-width: 900px) {
.kontakt-form-inner { grid-template-columns: 1fr; }
.kontakt-form .form-grid { grid-template-columns: 1fr; }
}
.kontakt-map iframe {
display: block;
width: 100%;
height: clamp(360px, 50vh, 560px);
height: clamp(360px, 50svh, 560px); /* iOS: Adressleiste (GK-05) */
border: 0;
filter: grayscale(1) contrast(1.05);
}
/* ============================================================
LEGAL PAGES (Impressum / Datenschutz / Barrierefreiheit)
============================================================ */
.legal-content {
max-width: 860px;
margin: 0 auto;
padding: 0 var(--pad-x) clamp(80px, 10vw, 140px);
font-size: 16px;
line-height: 1.6;
color: var(--ink-soft);
}
.legal-content h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: 24px;
text-transform: uppercase;
margin: 40px 0 16px;
}
/* ============================================================
HERO-CTA (Feedback #39, 22.07.2026) — Figma 2735:1805–1807:
Block unten rechts der Mitte auf dem Hero-Video (x 63,7 %, Unterkante
~8 % über Medium-Ende), weiß; Titel/CTA 32px Kommon Extended,
Sub Poppins 24px, CTA unterstrichen.
============================================================ */
.hero-media-block { position: relative; }
.hero-cta {
position: absolute;
left: 63.66%;
bottom: 8.3%;
max-width: 33vw;
color: #fff;
text-shadow: 0 1px 14px rgba(0,0,0,0.25); /* Lesbarkeit über hellem Himmel */
}
.hero-cta-title {
font-weight: 900;
font-stretch: normal;
text-transform: uppercase;
font-size: clamp(18px, 1.85vw, 32px);
line-height: 0.96;
color: #fff;
margin: 0 0 clamp(6px, 0.6vw, 10px);
}
.hero-cta-text {
font-family: var(--font-meta);
font-weight: 400;
font-size: clamp(13px, 1.39vw, 24px);
line-height: 1.12;
color: #fff;
/* Feedback #71 (07.08.2026): Abstand zu „Erfahre hier mehr" war zu groß —
2,6vw → 1,6vw, bleibt sichtbar abgesetzt. */
margin: 0 0 clamp(14px, 1.6vw, 28px);
}
.hero-cta-link {
display: inline-block;
font-weight: 900;
font-stretch: normal;
text-transform: uppercase;
font-size: clamp(16px, 1.85vw, 32px);
line-height: 1;
color: #fff;
border-bottom: 3px solid #fff;
padding-bottom: 4px;
}
@media (max-width: 760px) {
.hero-cta { left: var(--pad-x); right: var(--pad-x); max-width: none; }
}
/* Feedback #48 (23.07.2026): FORSCHUNG-GALERIE (#34) entfernt — die Sektion
stand doppelt zum Connect-Strip; die Motive laufen jetzt im Footer-Strip. */
/* ============================================================
RESPONSIVE — Mobile + Tablet (Kickoff: Tablet via Media Queries)
============================================================ */
@media (max-width: 1100px) {
.nav-links { display: none; }
}
/* Mobile/kleine Tablets: Hero-Headline darf nicht überlaufen (Figma Mobil-Mockup).
Längstes Wort "COMMUNICATIONS" muss ohne Umbruch in den Viewport passen. */
@media (max-width: 760px) {
.hero-headline { font-size: clamp(22px, 6.4vw, 40px); max-width: none; }
.statement-inner { font-size: clamp(24px, 6.4vw, 40px); }
.statement-subline { font-size: clamp(24px, 6.4vw, 40px); }
}
/* Tablet refinements 761–1100px */
@media (min-width: 761px) and (max-width: 1100px) {
/* gleiche vw-Skalierung wie Desktop, sonst bricht die lange Hero-Zeile um */
.hero-headline { font-size: clamp(26px, 3.3vw, 52px); max-width: none; }
.statement-inner { font-size: clamp(28px, 4vw, 44px); }
.statement-subline { font-size: clamp(28px, 4vw, 44px); }
.stats-row > div { padding: 0 20px; }
.stat-num { font-size: clamp(64px, 10vw, 110px); }
.aboutpair-inner { gap: 40px; }
.accordion-trigger { font-size: 24px; }
.projects-lead-inner { min-height: 560px; }
.projects-tilt-card { max-width: 520px; }
.projects-rotated-title { font-size: 72px; }
}
/* ============================================================
TILT-CLAIM (Frame-53 — black tilted blocks with type)
============================================================ */
.tilt-claim {
position: relative;
background: #fff;
padding: clamp(80px, 12vw, 160px) var(--pad-x);
overflow: hidden;
isolation: isolate;
}
/* Ein einziges, sauberes schwarzes Panel mit leichter Neigung (statt der
zwei versetzten Flächen, die als zerrissene Treppe renderten). */
.tilt-claim-panel {
position: relative;
max-width: 1180px;
margin: 0 auto;
background: #000;
border-radius: 6px;
padding: clamp(48px, 7vw, 110px) clamp(32px, 6vw, 96px);
transform: rotate(-2deg);
box-shadow: 0 40px 90px -40px rgba(0,0,0,0.5);
}
.tilt-claim-text {
margin: 0;
text-align: right;
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(28px, 3.4vw, 56px);
line-height: 1.05;
color: #fff;
letter-spacing: -0.005em;
}
@media (max-width: 900px) {
.tilt-claim { padding: 64px 20px; }
.tilt-claim-panel { transform: rotate(-1.4deg); padding: 40px 28px; }
.tilt-claim-text { font-size: 28px; }
}
/* ============================================================
NEUES FIGMA-DESIGN (Export 30.06.2026) — geteilte Sektions-
Klassen, konsolidiert aus den Change-Requests der Seiten-Agenten.
Display = Archivo (Kommon-Ersatz, Normalbreite via .display — Figma 06.07.2026).
============================================================ */
/* ---------- HOME: RECENT WORKS (frame-0) ---------- */
/* Figma 06.07.2026: hellgraue Sektion, vertikale Wortmarke links (liest von
unten nach oben), daneben horizontale Karten-Reihe — 3 Karten sichtbar,
die vierte läuft rechts aus dem Bild (Overflow-Scroll, ohne Scrollbar). */
.recent-works {
position: relative;
background: #f0f0f0;
padding: clamp(64px, 8vw, 110px) 0 clamp(64px, 8vw, 110px) var(--pad-x);
overflow: hidden;
/* Feedback-Mail 23.07.2026 (Alessandro, Safari): WebKit berechnet die
max-content-Breite verschachtelter Flex-Container mit clamp()-Basis
falsch — die Set-Box wurde schmaler als ihre Karten, Set 2 überlappte
Karte 5 und die Bildboxen kollabierten (Cover-Crop wirkte wie Zoom).
Deshalb: alle Breiten deterministisch aus Variablen ableiten,
kein Intrinsic-Sizing mehr. --rw-count liefert das Template inline. */
--rw-card-w: clamp(250px, 27vw, 420px);
--rw-gap: clamp(18px, 1.9vw, 30px);
--rw-set-w: calc(var(--rw-count, 5) * (var(--rw-card-w) + var(--rw-gap)));
}
.recent-works-inner {
display: flex;
align-items: stretch;
gap: clamp(24px, 3.2vw, 56px);
position: relative;
}
/* Feedback #29 (21.07.2026): EINE Zeile, Schriftgröße nach Figma 80,5px @1728
(Node 312:1586: ls -5%, lh 0.96); js/main.js passt die Größe zusätzlich an
die tatsächliche Kachel-Spaltenhöhe an (Faktor 80,58/856), damit die
Wortmarke nie über die Kacheln inkl. Text/CTA hinausragt. */
.recent-works-wordmark {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
font-size: clamp(34px, 4.66vw, 80.58px);
letter-spacing: -0.05em;
color: #000;
text-transform: uppercase;
line-height: 0.96;
white-space: nowrap;
writing-mode: vertical-rl;
transform: rotate(180deg);
align-self: stretch;
flex-shrink: 0;
margin: 0;
}
/* Feedback #6 (20.07.2026): Galerie ist manuell horizontal scrollbar —
der Autolauf kommt jetzt aus js/main.js (scrollLeft-Marquee, Hover
pausiert), nicht mehr aus einer CSS-Transform-Animation. */
.recent-works-cards {
overflow-x: auto;
overflow-y: hidden;
flex: 1;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.recent-works-cards::-webkit-scrollbar { display: none; }
.recent-works-marquee-track {
display: flex;
/* Feedback #70 (07.08.2026): drei Sets (Puffer-Set für die manuelle Geste) */
width: calc(3 * var(--rw-set-w));
}
.recent-works-set {
display: flex;
gap: var(--rw-gap);
padding-right: var(--rw-gap);
flex: 0 0 var(--rw-set-w);
box-sizing: border-box;
}
/* Feedback #37 (21.07.2026): Karten als Flex-Spalte, CTA per margin-top:auto
auf gemeinsamer Unterkante (Figma: alle "MEHR ERFAHREN" auf einer Höhe). */
.rw-card {
flex: 0 0 var(--rw-card-w);
width: var(--rw-card-w);
display: flex;
flex-direction: column;
}
/* Feedback #6: Zoom-Effekt beim Hover (Figma-Proto) — das Motiv skaliert
sanft im festen Rahmen (::before erbt das Inline-Background des Rahmens). */
.rw-img {
aspect-ratio: 1/1;
width: 100%;
flex: 0 0 auto;
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
background-color: #ddd;
}
.rw-img::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
background-size: cover;
background-position: center;
transition: transform .7s cubic-bezier(.2,.7,.2,1);
}
@media (hover: hover) { .rw-card:hover .rw-img::before { transform: scale(1.06); } }
/* GK-06 Runde 1 (Befund B5): ganze Karte ist Klickziel (js/main.js), Zeiger zeigt es an. */
@media (hover: hover) { .rw-card { cursor: pointer; } }
.rw-month {
font-family: var(--font-meta);
font-weight: 400;
font-size: clamp(12px, 1.05vw, 16px);
color: #000;
margin: 16px 0 6px;
}
.rw-title {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
/* Figma 1:1876: Kartentitel 52px @520px-Karte = 10% der Kartenbreite.
Feedback #28 (21.07.): Deckel 52→42px — die Karte selbst ist auf 420px
gedeckelt; bei 52px ragte "PERSPECTIVES" in die Nachbarkachel. */
font-size: clamp(24px, 3vw, 42px);
line-height: 0.962; /* Feedback #43 */
letter-spacing: -0.05em;
text-transform: uppercase;
color: #000;
margin: 0;
}
.rw-title .italic-accent {
font-family: "Playfair Display", Georgia, serif;
font-style: italic;
font-weight: 600;
text-transform: none;
}
.rw-sub {
font-family: var(--font-meta);
font-weight: 400;
font-size: clamp(12px, 1.05vw, 16px);
color: #000;
margin: 6px 0 0;
}
.rw-more {
display: inline-block;
align-self: flex-start;
font-family: var(--font-display);
font-weight: 800;
font-stretch: normal;
/* Feedback #49 (23.07.2026): Figma 24pt @1728 → 1.39vw, Deckel 24px */
font-size: clamp(14px, 1.39vw, 24px);
letter-spacing: 0.02em;
text-transform: uppercase;
color: #000;
border-bottom: 2px solid #000;
padding-bottom: 3px;
/* Feedback #37: auto schiebt den CTA in allen Karten auf dieselbe Unterkante */
margin-top: auto;
padding-top: clamp(18px, 2.4vw, 36px);
}
/* Feedback #53 (23.07.2026): Kartenbreite mobil über die Variable steuern —
die Set-/Track-Breiten rechnen dann automatisch mit (Safari-Fix s. o.).
Die Wortmarken-Größe regelt js/main.js jetzt auf allen Breiten (Fit an
die Kachelspalte), daher kein fester 32px-Wert mehr. */
@media (max-width: 900px) { .recent-works { --rw-card-w: 44vw; } }
/* Ales Korrekturen 28.09.2026: 78vw war breiter als die sichtbare Spalte neben der Wortmarke (307 statt 298 px bei 393 px) —
eine eingerastete Karte war nie ganz zu sehen. 72vw: Karte ganz sichtbar, die nächste lugt als Wisch-Hinweis herein. */
@media (max-width: 600px) { .recent-works { --rw-card-w: 72vw; } }
/* ---------- ABOUT / AGENTUR (frame-1) ---------- */
.agentur-hero { background: #fff; color: #000; }
.agentur-hero .eyebrow-serif { color: #000; font-size: clamp(34px, 3.7vw, 64px); margin-bottom: 4px; }
.agentur-hero .agentur-hero-title { color: #000; font-size: clamp(36px, 3.85vw, 58px); letter-spacing: -0.05em; line-height: 0.962; /* Feedback #43 */ }
.agentur-office { background: var(--bg); padding: clamp(60px, 8vw, 120px) var(--pad-x); }
.agentur-office-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
}
/* Figma 1:1958: Überschrift 52px / Adresse 30px, beide Kommon Grotesk Extended
(vorher: ganzer Block uniform 60px Montserrat — Adresse doppelt zu groß). */
.agentur-office-head { color: #000; }
.agentur-office-title {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
font-size: clamp(30px, 3vw, 52px);
line-height: 0.96;
text-transform: uppercase;
}
.agentur-office-addr {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
font-size: clamp(18px, 1.74vw, 30px);
line-height: 1.1;
margin-top: 1em;
}
.agentur-office-body p {
font-family: var(--font-meta);
font-weight: 400;
font-size: clamp(18px, 1.7vw, 30px);
line-height: 1.2;
color: #000;
margin: 0 0 1em;
}
.agentur-prose { background: var(--bg); padding: clamp(50px, 7vw, 110px) var(--pad-x); }
/* Feedback-Button #104 (Moritz, 09.09.2026): der Abstand zwischen „Berliner Büro“
und „Wer wir sind“ war zu groß (zwei volle Sektions-Paddings = 259 px @1728).
Beide Blöcke bleiben erkennbar getrennt, der Abstand halbiert sich (≈ 120 px). */
.agentur-office { padding-bottom: clamp(30px, 3.5vw, 60px); }
.agentur-office + .agentur-prose { padding-top: clamp(30px, 3.5vw, 60px); }
.agentur-prose-inner {
max-width: var(--container);
margin: 0 auto;
display: grid;
/* Feedback #75 (10.08.2026): Fließtext-Spalte exakt wie beim Berliner Büro
(.agentur-office-inner) — vorher 1.3fr, dadurch stand „Wer wir sind"
~24px weiter links als der Büro-Text. */
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 100px);
align-items: start;
}
.agentur-prose-title {
font-family: var(--font-display);
font-weight: 900;
font-stretch: normal;
font-size: clamp(32px, 3vw, 52px);
line-height: 0.96;
/* Feedback-Button-Issue #85 (08.09.2026, Agentur): „Abstand zwischen den
Worten zu eng … im Figma-Prototyp auf -5 eingestellt.“ Die Figma-Nodes
„WER WIR SIND“ / „IT´S A FAMILY STORY.“ stehen wie alle Headlines auf
letterSpacing -5 % (vgl. #43 für .display); hier stand seit dem Rebuild
vom 30.06. -0.005em (Faktor 10 daneben). Gemessen gegen den Prototyp
(09.09.): Buchstabenlücke Ø 0,13 statt 0,08 Versalhöhen. */
letter-spacing: -0.05em;
text-transform: none;
color: #000;
margin: 0;
}
/* Figma Website_Final 15.07.2026: "IT´S A FAMILY STORY." in CAPS,
Titel über der Copy in der rechten Spalte */
.agentur-prose-title--caps { text-transform: uppercase; margin-bottom: clamp(24px, 3vw, 44px); }
.agentur-prose-body p {
font-family: var(--font-meta);
font-weight: 400;
font-size: clamp(18px, 1.7vw, 30px);
line-height: 1.18;
color: #000;
margin: 0 0 1em;
}
@media (max-width: 900px) {
.agentur-office-inner { grid-template-columns: 1fr; }
.agentur-prose-inner { grid-template-columns: 1fr; }
}
/* ---------- BILD ODER VIDEO (09.09.2026, Kolja) ----------
Jedes Hauptmedien-Feld nimmt Bild oder Video an. Wo ein Bild als
background-image liegt (Kontakt-Hero, Case-Kacheln, „Nächstes Projekt“),
sitzt ein Video als absolut positioniertes Element im selben Rahmen und
deckt ihn wie background-size: cover; der Ausschnitt kommt per
object-position inline mit. Slots mit ![]()
bekommen das