/* ============================================================ DAS SYSTEM Abgeschaut ist die Bauweise, nicht das Aussehen: Augenbraue, sehr grosse Schlagzeile, zweispaltiger Fliesstext darunter, dann das Bild. Viel Luft dazwischen. Schriften, Farben und Verlaeufe bleiben unsere. ============================================================ */ :root { /* ---- Raum: eine Leiter, keine Einzelwerte ---- Apple arbeitet mit sehr grossen Abstaenden zwischen den Abschnitten und sehr kleinen innerhalb. Genau dieser Unterschied macht den ruhigen Eindruck. */ --r-1: clamp(0.5rem, 0.8vw, 0.75rem); --r-2: clamp(0.9rem, 1.4vw, 1.3rem); --r-3: clamp(1.6rem, 2.6vw, 2.4rem); --r-4: clamp(2.6rem, 4.6vw, 4.4rem); --r-5: clamp(4.5rem, 9vh, 8rem); --r-6: clamp(7rem, 15vh, 13rem); /* zwischen zwei Abschnitten */ --karte-radius: 26px; --karte-grund: rgba(255, 255, 255, 0.045); --karte-kante: rgba(245, 245, 243, 0.1); } /* ============================================================ 1 DIE DREI SCHRIFTGRADE ============================================================ */ .augenbraue { display: block; font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.72rem, 0.92vw, 0.88rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ak, var(--c-blau)); /* Die Vorzeile gehoert zur Schlagzeile, nicht als eigener Block darueber. Darum sitzt sie eng darauf. */ margin-bottom: clamp(0.5rem, 0.9vh, 0.8rem); } /* Die Schlagzeile ist der Grund, warum solche Seiten teuer wirken: sie ist deutlich groesser, als man sich zunaechst traut. */ .schlag { font-family: var(--font-headline); font-weight: 400; font-size: clamp(2.1rem, 6.2vw, 5.4rem); line-height: 0.96; letter-spacing: -0.024em; text-transform: uppercase; max-width: 20ch; } .schlag-klein { font-family: var(--font-headline); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.018em; text-transform: uppercase; } .fliess { font-size: clamp(1.02rem, 1.32vw, 1.32rem); line-height: 1.5; color: var(--c-text-sekundaer-dunkel); max-width: 42ch; } /* Frueher trat der Nebensatz farblich zurueck, damit man den Kern auch beim Ueberfliegen liest. Der Absatz sah dadurch aber aus, als waere er in zwei Farben gesetzt, und die Aufzaehlungen wirkten wie eine Bildunterschrift. Der Fliesstext hat jetzt eine Farbe. Die Klasse bleibt im Markup stehen: die Abstufung ist damit eine Zeile weit weg, falls sie zurueckkommen soll. Der Workshop-Absatz haelt es genauso, siehe .wsp-copy weiter unten. */ .fliess .matt { color: inherit; } /* Steht der Fliesstext allein, ohne Block daneben, darf die Zeile laenger laufen. 42ch waeren dann zu schmal fuer die Breite. */ /* 67ch statt 62ch: bei 62 fiel "viel" von "Wie viel" auf die zweite Zeile und trennte damit ein Wortpaar, das zusammengehoert. Ab 66ch passt es, 67 gibt noch 23 Pixel Luft, damit es nicht an einer Rundung wieder umkippt. Der Absatz bleibt dreizeilig. */ .fliess.breit { max-width: 67ch; margin-top: clamp(1.6rem, 3vw, 2.6rem); } /* Der Fliesstext bei den Koepfen steht in der breiteren der zwei Spalten von .block-zwei, 42ch liess ihn dort unnoetig oft umbrechen. */ #koepfe .fliess { max-width: 58ch; } /* ============================================================ 2 DER ABSCHNITT ============================================================ */ .block { padding-block: var(--r-6); position: relative; } /* minmax(0, 1fr) ist noetig: eine Rasterspalte nimmt sonst als Mindestbreite den laengsten unteilbaren Inhalt und waechst damit ueber ihren Container hinaus. */ .block-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r-3); } .block-zwei { margin-top: var(--r-4); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--r-4); align-items: start; } .block-neben { display: grid; gap: var(--r-2); } .block-neben .klein, .film-karte .klein { font-size: clamp(0.88rem, 1.02vw, 1rem); line-height: 1.45; color: rgba(243, 241, 237, 0.5); max-width: 30ch; } .block-neben .gross, .film-karte .gross { font-family: var(--font-headline); font-weight: 400; font-size: clamp(1.15rem, 2.1vw, 1.9rem); line-height: 1.1; letter-spacing: -0.014em; text-transform: uppercase; } /* Kleiner als die geerbte Groesse: bei zwei fest gesetzten Zeilen (Plus AI-Talente aus / internationalem Netzwerk) sprengte die groessere Schrift die schmale Spalte und drei statt zwei Zeilen fielen. */ .block-neben .gross { font-size: clamp(1rem, 1.7vw, 1.4rem); } /* Die Merkmalliste unter der Haarlinie */ .merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--r-4); margin-top: var(--r-5); } .merkmal { border-top: 1px solid rgba(245, 245, 243, 0.24); padding-top: var(--r-2); } .merkmal ul { list-style: none; margin: 0; padding: 0; } .merkmal li { font-family: var(--font-headline); font-weight: 400; font-size: clamp(1.05rem, 1.9vw, 1.7rem); line-height: 1.24; letter-spacing: -0.012em; text-transform: uppercase; } .merkmal p { font-size: clamp(0.92rem, 1.1vw, 1.05rem); line-height: 1.5; color: rgba(243, 241, 237, 0.5); } .merkmal p b { color: var(--c-text-hell); font-weight: 500; } /* ============================================================ 3 DAS KACHELFELD Gemischt: Bildkacheln und Zeichenkacheln, unterschiedlich hoch. ============================================================ */ .feld { margin-top: var(--r-4); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.2vw, 1.1rem); align-items: start; } .feld-spalte { display: grid; gap: clamp(0.7rem, 1.2vw, 1.1rem); align-content: start; } .kachel { position: relative; border-radius: var(--karte-radius); overflow: hidden; background: var(--karte-grund); border: 1px solid var(--karte-kante); will-change: transform, opacity; } .kachel-zeichen { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2vw, 1.8rem); padding: clamp(1.4rem, 2.8vw, 2.6rem); } .kachel-bild { aspect-ratio: 4 / 3; display: grid; } .kachel-bild img, .kachel-bild video { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: cover; } /* Das Video traegt dieselben Regeln wie das Bild, sonst faellt es aus der Kachel: ohne object-fit steht es in seiner eigenen Groesse da. */ .kachel-bild .darauf { /* position und z-index sind Pflicht, nicht Kosmetik: ein Video wird vom Browser auf eine eigene Ebene gelegt und deckt sonst die Schrift zu, obwohl sie im Quelltext danach kommt. Bei Bildern faellt das nicht auf. */ position: relative; z-index: 1; grid-area: 1 / 1; align-self: end; /* Der Kopfraum gehoert zum Verlauf, nicht zum Text: er gibt dem Ausklang Platz, damit die Schlagzeile nicht im duennen Ende des Verlaufs steht. */ padding: clamp(3.4rem, 7vw, 6rem) clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.2rem, 2.4vw, 2.2rem); background: linear-gradient(0deg, rgba(5, 5, 6, 0.96) 0%, rgba(5, 5, 6, 0.93) 46%, rgba(5, 5, 6, 0.70) 72%, rgba(5, 5, 6, 0) 100%); } .kachel h3 { font-family: var(--font-headline); font-weight: 400; font-size: clamp(1.05rem, 1.85vw, 1.62rem); line-height: 1.1; letter-spacing: -0.014em; text-transform: uppercase; } .kachel p { margin-top: 0.6rem; font-size: clamp(0.86rem, 1vw, 0.98rem); line-height: 1.5; color: rgba(243, 241, 237, 0.56); } /* Das Zeichen traegt die Akzentfarbe der Kachel, sonst nichts */ .zeichen { width: clamp(46px, 5vw, 70px); height: clamp(46px, 5vw, 70px); flex: none; } .zeichen svg { width: 100%; height: 100%; fill: none; stroke: var(--ak, var(--c-blau)); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ============================================================ 4 DIE LUPE Ein stehendes Bild, links Schalter, die Stellen aufdecken. ============================================================ */ .nahsicht { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: var(--r-4); align-items: center; margin-top: var(--r-4); } .nah-schalter { display: grid; gap: clamp(0.4rem, 0.8vh, 0.7rem); justify-items: start; } .nah-schalter button { display: inline-flex; align-items: center; gap: 0.8rem; padding: clamp(0.55rem, 1vw, 0.8rem) clamp(1rem, 1.7vw, 1.4rem); border-radius: 999px; border: 1px solid rgba(245, 245, 243, 0.14); background: rgba(255, 255, 255, 0.05); color: rgba(243, 241, 237, 0.72); font-family: var(--font-headline); font-weight: 400; font-size: clamp(0.85rem, 1.15vw, 1.05rem); letter-spacing: -0.008em; text-transform: uppercase; cursor: pointer; transition: background var(--t-mittel) var(--ease-out), color var(--t-mittel) var(--ease-out), border-color var(--t-mittel) var(--ease-out); } .nah-schalter button:hover { color: var(--c-text-hell); border-color: rgba(245, 245, 243, 0.3); } .nah-schalter button[aria-selected='true'] { background: var(--c-text-hell); color: #050506; border-color: transparent; } .nah-kreis { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 1px solid currentColor; display: grid; place-items: center; position: relative; } .nah-kreis::before, .nah-kreis::after { content: ''; position: absolute; background: currentColor; border-radius: 1px; transition: transform var(--t-mittel) var(--ease-out), opacity var(--t-mittel) var(--ease-out); } .nah-kreis::before { width: 9px; height: 1.2px; } .nah-kreis::after { width: 1.2px; height: 9px; } button[aria-selected='true'] .nah-kreis::after { transform: rotate(90deg); opacity: 0; } .nah-buehne { position: relative; border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 10; background: #0b0b0e; } .nah-buehne figure { position: absolute; inset: 0; margin: 0; opacity: 0; } .nah-buehne img { width: 100%; height: 100%; object-fit: cover; display: block; } .nah-buehne figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1.1rem, 2.4vw, 2rem); font-size: clamp(0.9rem, 1.1vw, 1.05rem); line-height: 1.5; color: rgba(243, 241, 237, 0.88); background: linear-gradient(0deg, rgba(5, 5, 6, 0.9), rgba(5, 5, 6, 0) 100%); } /* ============================================================ 5 RANDLOSE BILDBAENDER ============================================================ */ .band { margin-top: var(--r-5); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.7rem, 1.2vw, 1.1rem); } .band figure { margin: 0; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; background: #0b0b0e; } .band img { width: 100%; height: 100%; object-fit: cover; display: block; } .band .weit { grid-column: 1 / -1; aspect-ratio: 21 / 9; } @media (max-width: 899px) { .block-zwei, .merkmale, .feld, .nahsicht, .band { grid-template-columns: minmax(0, 1fr); } .schlag { max-width: none; } .nah-schalter { grid-auto-flow: column; overflow-x: auto; padding-bottom: 0.4rem; } .nah-schalter button { white-space: nowrap; } } /* ============================================================ 6 DER BESTAND ZIEHT NACH Die alten Sektionen tragen ihre eigenen Kopfzeilenklassen. Damit die Seite eine Schrift spricht, laufen sie ueber dieselbe Leiter. ============================================================ */ .kopfzeile, .services-headline, .team-headline, .merch-headline, .werk-headline, .ag-titel, .hl-titel { font-size: clamp(2.1rem, 6.2vw, 5.4rem); line-height: 0.96; letter-spacing: -0.024em; max-width: 20ch; } .leitsatz .ls { font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1; letter-spacing: -0.018em; max-width: 22ch; } /* Die Sektionen brauchen denselben grossen Atem wie die neuen */ #warum, #system, #services, #team, #merch, #werkproben { padding-block: var(--r-6); } /* Die Agenten-Sektion setzt ihren Rahmen selbst, siehe css/agenten.css. Sie wird gepinnt und muss deshalb genau eine Bildschirmhöhe hoch sein. */ #agenten { padding-block: 0; } .erk .copy, .team-copy, .d-text, .ag-copy { font-size: clamp(1.02rem, 1.32vw, 1.32rem); line-height: 1.5; } /* ============================================================ 7 RANDLOSE FILME UND FLAECHEN Ein Film, der ueber die ganze Breite laeuft, ist der staerkste Absatz, den eine Seite hat. Er braucht keinen Rahmen. ============================================================ */ /* ============================================================ VOM PROMPT ZUM FILM Zwei Saeulen: links der dritte Film mit der Copy direkt darunter, als eine Einheit ohne Luecke. Rechts das Duo aus grossem und kleinem Film, der kleine ueberlappt die untere Kante des grossen, aber nicht buendig am Rand. ============================================================ */ .film-einheit { display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; align-items: start; margin-top: clamp(1.2rem, 2.4vw, 2rem); } .film-einheit .buehne { /* relative ist Pflicht: sonst nimmt die Kante unten den naechsten positionierten Vorfahren als Bezug und rahmt den ganzen Block. */ position: relative; border-radius: 20px; overflow: hidden; background: #0b0b0e; /* Ohne eigenen Stapelkontext steigt ein startendes Video auf seine eigene Grafikebene und legt sich in Safari ueber die Karte. */ isolation: isolate; } .film-einheit .buehne video { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; transform: translateZ(0); } .film-einheit .buehne::after { /* Eine feine Kante, damit der Film als gesetztes Stueck steht und nicht als Loch im Hintergrund. */ content: ''; position: absolute; inset: 0; border-radius: 20px; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(243, 241, 237, 0.10); z-index: 1; } .film-spalte { display: grid; grid-template-rows: auto 1fr; gap: 16px; } .film-spalte .dritt-film { aspect-ratio: 16 / 9; } .film-karte { background: rgba(243, 241, 237, 0.045); border: 1px solid rgba(243, 241, 237, 0.12); border-radius: 20px; padding: clamp(1rem, 1.8vw, 1.6rem); display: flex; align-items: center; } .film-copy { margin: 0; max-width: 58ch; font-size: clamp(0.8rem, 0.95vw, 0.9rem); } .film-duo { position: relative; padding-bottom: 9%; } .film-duo .gross-film { aspect-ratio: 16 / 9; } /* Der kleine Film ueberlappt die untere Kante, sitzt aber rechts von der Mitte statt buendig am Rand, und bleibt spuerbar kleiner als der grosse. */ .film-duo .klein-film { position: absolute; right: 9%; bottom: 0; width: 40%; aspect-ratio: 16 / 9; z-index: 2; } @media (max-width: 900px) { .film-einheit { display: block; } .film-spalte { display: block; } .film-spalte .dritt-film { margin-bottom: 16px; } .film-duo { padding-bottom: 0; margin-top: 16px; } .film-duo .gross-film, .film-duo .klein-film { position: static; width: 100%; aspect-ratio: 16 / 9; margin-bottom: 14px; } } /* ============================================================ DER WORKSHOP Die einzige Sektion, die den Markenverlauf als Flaeche traegt. Sonst liegt das Spektrum nur als zwei Pixel hohe Kante auf der Seite. Hier ist es der Grund, und der Text steht in Tinte darauf. Randlos und deutlich flacher als die dunklen Bloecke: der Auftritt soll auffallen, nicht ausufern. ============================================================ */ .wsp-flaeche { background: linear-gradient(118deg, #ffaa6e 0%, #ff469b 34%, #69aaff 68%, #1dbdd4 100%); color: var(--c-tinte); padding-block: clamp(2.4rem, 4.8vw, 4rem); /* Nur oben Abstand. Unten schliesst der Schluss-Film direkt an: die beiden randlosen Flaechen sollen aneinanderstossen, nicht durch einen Streifen Seitengrund getrennt sein. */ margin-top: clamp(2rem, 4vw, 3.4rem); margin-bottom: 0; } /* .schlag ist auf 20 Zeichen begrenzt. Die Headline hier ist laenger und setzt ihren Umbruch selbst, sonst faellt sie vierzeilig. Die Groesse ist an der laengeren der beiden Zeilen ausgemessen: sie geht so weit, wie sie kann, ohne dass eine dritte Zeile aufgeht. Wer hier die Schrift vergroessert, muss das nachmessen. */ .wsp-schlag { color: var(--c-tinte); max-width: none; margin: 0 0 clamp(1rem, 2.2vw, 1.8rem); line-height: 0.98; letter-spacing: -0.026em; text-wrap: balance; } .wsp-lage { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(1.4rem, 3vw, 2.8rem); align-items: stretch; } /* Der Knopf soll unten buendig mit dem Video abschliessen, nicht direkt unter der Copy haengen. Die Spalte wird darum zur Saeule: Copy oben, der Rest freier Raum, Knopf am unteren Rand ueber margin-top: auto. */ .wsp-lage > div { display: flex; flex-direction: column; height: 100%; } .wsp-film { margin: 0; position: relative; border-radius: 14px; overflow: hidden; background: #050506; aspect-ratio: 16 / 9; /* Ohne eigenen Stapelkontext steigt ein startendes Video auf seine eigene Grafikebene und legt sich in Safari ueber alles daneben. */ isolation: isolate; } .wsp-film video { display: block; width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 0; transform: translateZ(0); } .wsp-film::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; box-shadow: inset 0 0 0 1px rgba(19, 19, 22, 0.34); } .wsp-copy { margin: 0 0 clamp(1rem, 2vw, 1.5rem); font-weight: 500; font-size: clamp(0.9rem, 1.08vw, 1.02rem); line-height: 1.5; color: var(--c-tinte); max-width: 52ch; } .wsp-copy .matt { color: var(--c-tinte); } .wsp-copy .stark { font-weight: 800; text-transform: uppercase; letter-spacing: -0.008em; } /* Die Seite hat sonst keinen Knopf. Naechstes Vorbild ist der aktive Schalter der Lupe: gefuellte Flaeche, Schrift in der Gegenfarbe. Auf dem Verlauf ist Tinte der staerkste Ton, also fuellt sie den Knopf. margin-top: auto schiebt ihn in der Saeule (.wsp-lage > div) ganz nach unten, buendig mit der Unterkante des Videos. */ .wsp-knopf { display: inline-flex; align-items: center; gap: 0.7em; align-self: flex-start; margin-top: auto; background: var(--c-tinte); color: var(--c-papier); text-decoration: none; border-radius: 999px; padding: clamp(0.95rem, 1.7vw, 1.25rem) clamp(0.9rem, 1.5vw, 1.2rem); font-family: var(--font-headline); font-weight: 400; text-transform: uppercase; letter-spacing: -0.008em; line-height: 1; font-size: clamp(0.94rem, 1.3vw, 1.14rem); transition: background var(--t-mittel) var(--ease-out), color var(--t-mittel) var(--ease-out); } .wsp-knopf:hover { background: var(--c-papier); color: var(--c-tinte); } .wsp-knopf:focus-visible { outline: 2px solid var(--c-tinte); outline-offset: 3px; } .wsp-pfeil { flex: none; width: clamp(16px, 1.4vw, 19px); height: auto; transition: transform var(--t-mittel) var(--ease-out); } .wsp-knopf:hover .wsp-pfeil { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .wsp-knopf, .wsp-pfeil { transition: none; } } @media (max-width: 900px) { .wsp-lage { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; } .wsp-lage > div { height: auto; } .wsp-knopf { margin-top: clamp(1rem, 2vw, 1.5rem); } } /* ============================================================ DIE TUER STEHT OFFEN Zwei Faecher nebeneinander, jedes mit eigener Farbkante. Die Sektion hat kein Bild und soll auch keines vortaeuschen: nach dem grossen Film darueber ist das die Zaesur. ============================================================ */ .talents-copy { margin-top: clamp(1.4rem, 2.6vw, 2.2rem); max-width: 54ch; } .fachpaar { margin-top: clamp(2rem, 4vw, 3.2rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 3rem); } .fachpaar > div { border-top: 3px solid var(--fk); padding-top: clamp(1rem, 1.6vw, 1.3rem); } .fachpaar h3 { font-family: var(--font-headline); font-weight: 400; text-transform: uppercase; letter-spacing: -0.014em; line-height: 1.1; color: var(--fk); font-size: clamp(1.2rem, 2.2vw, 2rem); margin: 0 0 .55rem; } .fachpaar p { margin: 0; font-size: clamp(0.82rem, 0.95vw, 0.9rem); line-height: 1.55; color: var(--c-text-sekundaer-dunkel); } .fach-mail { margin-top: clamp(1.6rem, 2.8vw, 2.4rem); padding-top: clamp(1rem, 1.8vw, 1.4rem); border-top: 1px solid rgba(243, 241, 237, 0.12); font-family: var(--font-mono); font-size: clamp(0.78rem, 0.92vw, 0.88rem); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(243, 241, 237, 0.5); } .fach-mail a { color: rgba(243, 241, 237, 0.82); text-decoration: none; border-bottom: 1px solid rgba(243, 241, 237, 0.28); } @media (max-width: 720px) { .fachpaar { grid-template-columns: minmax(0, 1fr); } } /* Die Wand aus Einzelbildern: sie soll als Menge wirken, nicht als Bildergalerie. Deshalb randlos und leicht zurueckgenommen. */ .wand { margin: var(--r-5) 0 0; position: relative; } .wand img { display: block; width: 100%; height: auto; filter: saturate(.9) brightness(.86); } .wand::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5,5,6,.8) 0%, rgba(5,5,6,0) 22%), linear-gradient(0deg, rgba(5,5,6,.8) 0%, rgba(5,5,6,0) 22%); } .block-zwei.umgekehrt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); } /* ============================================================ 8 DIE KOEPFE ============================================================ */ .koepfe { margin-top: var(--r-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.7rem, 1.4vw, 1.4rem); } .kopf { margin: 0; } .kopf img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 18px; border: 1px solid rgba(245, 245, 243, 0.1); } .kopf figcaption { display: grid; gap: 0.25rem; margin-top: clamp(0.7rem, 1.4vh, 1rem); } .kopf-name { font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.74rem, 0.95vw, 0.88rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ak, var(--c-text-hell)); } .kopf-rolle { font-size: clamp(0.8rem, 0.95vw, 0.92rem); color: rgba(243, 241, 237, 0.5); } @media (max-width: 899px) { .koepfe { grid-template-columns: repeat(2, minmax(0, 1fr)); } .koepfe .kopf:last-child { grid-column: 1 / -1; max-width: 50%; } .block-zwei.umgekehrt { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ WO WIRZAI SKALIERT Fuenf Karten nebeneinander. Die Grafik oben traegt die Farbe des Feldes, der Text darunter bleibt kurz. Ab mittlerer Breite bricht die Reihe auf zwei Zeilen um, darunter untereinander. ============================================================ */ .felder { margin-top: var(--r-4); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.7rem, 1.2vw, 1.1rem); } .feldkarte { margin: 0; border-radius: 16px; overflow: hidden; background: #0b0b0e; border: 1px solid rgba(243, 241, 237, 0.08); display: flex; flex-direction: column; } .feldkarte img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .feldkarte figcaption { padding: clamp(1rem, 1.6vw, 1.5rem); } .feldkarte h3 { font-family: var(--font-headline); font-weight: 400; text-transform: uppercase; letter-spacing: -0.014em; line-height: 1.08; font-size: clamp(1rem, 1.25vw, 1.3rem); color: var(--ak); } .feldkarte p { margin-top: 0.6rem; font-size: clamp(0.8rem, 0.95vw, 0.9rem); line-height: 1.5; color: var(--c-text-sekundaer-dunkel); } /* Vier Stufen statt zwei: der Sprung von fuenf direkt auf zwei Spalten liess die Karten in der Mitte auseinanderfallen. */ @media (max-width: 1180px) { .felder { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .felder { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .felder { grid-template-columns: minmax(0, 1fr); } } /* ============================================================ CASES ALS LAUFBAND Die Arbeiten laufen durch, ohne Halt. Kein Anhalten beim Ueberfahren: das Band ist Beiwerk, kein Bedienelement. Die Bilder bleiben in ihrer Helligkeit, gelesen wird die Typo ueber einem Verlauf am unteren Rand. ============================================================ */ .faelle { overflow: hidden; margin-top: var(--r-4); } .faelle-reihe { display: flex; gap: 14px; width: max-content; animation: faelle-lauf 34s linear infinite; } @keyframes faelle-lauf { to { transform: translateX(-50%); } } .faelle figure { margin: 0; position: relative; width: clamp(300px, 30vw, 460px); flex: none; border-radius: 14px; overflow: hidden; /* Ohne eigenen Stapelkontext steigt ein startendes Video auf seine eigene Ebene und deckt Verlauf und Schrift zu. */ isolation: isolate; } .faelle img, .faelle video { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; position: relative; z-index: 0; /* Safari legt ein laufendes Video auf eine eigene Grafikebene. Solange Verlauf und Schrift keine eigene haben, sortiert es sie darunter ein, egal welchen z-index sie tragen. Deshalb bekommt hier jede der drei Lagen ausdruecklich eine. */ transform: translateZ(0); } /* Der Verlauf sitzt ueber dem Film und unter der Schrift, sonst muesste man die Schrift mit einem Schatten aufhellen, und das sieht man. Beide brauchen eine ausdrueckliche Ebene: ein