nicht unterscheiden. */
.ind {
flex: 1 1 0; min-width: 0;
display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
color: inherit; text-decoration: none;
transition: flex-grow 560ms var(--motion-ease-out);
}
.ind:focus-visible { outline: 2px solid var(--color-white); outline-offset: 3px; }
/* the fan: hovered panel opens, siblings tuck in (from v5) */
.ind-rail:hover .ind { flex-grow: 0.82; }
.ind-rail .ind:hover { flex-grow: 3.2; }
.ind__panel { position: relative; width: 100%; height: 560px; overflow: hidden; background: var(--gradient-ind-default); }
.ind__panel img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: var(--crop, 50% 50%);
user-select: none; pointer-events: none;
transition: transform 0.6s var(--motion-ease-out), filter 0.45s ease;
}
.ind:hover .ind__panel img { transform: scale(1.12); }
.ind-rail:hover .ind:not(:hover) .ind__panel img { filter: grayscale(0.5) brightness(0.95); }
/* art-directed crops, taken from the Figma placements */
.ind--healthcare { --crop: 74% 51%; }
.ind--transport { --crop: 42% 0%; }
.ind--logistics { --crop: 62% 55%; }
.ind--construction { --crop: 78% 0%; }
.ind--energy { --crop: 52% 50%; }
.ind--public { --crop: 66% 0%; }
.ind--education { --crop: 50% 50%; }
.ind--data { --crop: 19% 68%; }
.ind__label {
font-size: clamp(13px, 1.25vw, 16px); font-weight: 400; letter-spacing: 0.04em;
text-transform: uppercase; text-align: center; color: var(--color-white);
line-height: 1.25; min-height: 40px;
transition: color 0.35s ease, font-size 0.35s ease, letter-spacing 0.35s ease;
}
/* hovering the rail dims the other labels; the active one grows and leads */
.ind-rail:hover .ind__label { color: rgba(255, 255, 255, 0.5); font-size: 12px; letter-spacing: 0.02em; }
.ind-rail .ind:hover .ind__label { color: var(--color-white); font-size: clamp(15px, 1.5vw, 22px); font-weight: 400; letter-spacing: 0.04em; }
.industries__cta { display: flex; justify-content: center; margin-top: var(--space-5); }
/* ================= CLOSING MORPH (home) =============================
Scroll-scrubbed: full-viewport white panel shrinks to a card, the
dark "with" half grows beside it, the card flips to the JAAI logo.
All sizes driven by scripts/finale.js. */
.closing { position: relative; height: 390vh; background: var(--color-bg); }
.closing__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.morph { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); perspective: 1800px; }
.morph__flip { position: relative; transform-style: preserve-3d; will-change: transform; }
.morph__front, .morph__back {
position: absolute; inset: 0;
-webkit-backface-visibility: hidden; backface-visibility: hidden;
border-radius: inherit; overflow: hidden;
}
.morph__front { display: flex; align-items: stretch; outline: 3px solid var(--color-white); outline-offset: -3px; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45); }
.morph__white, .morph__with {
display: flex; align-items: center; justify-content: center; white-space: nowrap;
font-family: var(--type-family-sans); text-transform: uppercase; line-height: 1;
}
.morph__white { flex: none; background: var(--color-white); color: var(--color-ink); font-weight: 400; }
.morph__with { flex: none; background: var(--color-bg); color: var(--color-white); font-size: 32px; font-weight: 400; overflow: hidden; border-left: 3px solid var(--color-white); }
.morph__back { transform: rotateY(180deg); background: var(--color-bg); display: grid; place-items: center; }
.morph__back svg { width: 90%; height: auto; display: block; }
/* Der Rückzug — drei Takte à 1,3 s, sobald die Karte fertig gedreht ist:
der weiße Block fährt heraus und verschluckt jaai, der Rahmen zieht
sich als Strich zurück, die Lettern spreizen zur neuen Wortmarke.
Rückwärts scrollen spielt alles gespiegelt zurück. */
.rt-jaai { fill: var(--color-bg); }
.rt-blockrect, .rt-wm .lt { will-change: transform; }
.rt-frame { stroke-dasharray: 100; stroke-dashoffset: 0; }
/* Der Schlussakkord: steht die neue Wortmarke, glüht das AI einmal im
Markenverlauf auf und kehrt zu Weiß zurück — einmal von selbst beim
Ankommen, danach bei jedem Überfahren des Logos. Das weiße Original
blendet gegengleich aus, sonst schimmert eine helle Kante durch. */
.rt-ai-shine { opacity: 0; }
.rt-wm .lt:nth-last-child(-n+2) > path:first-child { opacity: 1; }
.closing.rt-shine-auto .rt-ai-shine,
.closing.rt-done .morph:hover .rt-ai-shine {
animation: rt-shine 1.8s ease-in-out 0.1s 1;
}
.closing.rt-shine-auto .rt-wm .lt:nth-last-child(-n+2) > path:first-child,
.closing.rt-done .morph:hover .rt-wm .lt:nth-last-child(-n+2) > path:first-child {
animation: rt-shine-weg 1.8s ease-in-out 0.1s 1;
}
@keyframes rt-shine {
0% { opacity: 0; } 32% { opacity: 1; } 68% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes rt-shine-weg {
0% { opacity: 1; } 32% { opacity: 0; } 68% { opacity: 0; } 100% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.closing.rt-shine-auto .rt-ai-shine, .closing.rt-done .morph:hover .rt-ai-shine,
.closing.rt-shine-auto .rt-wm .lt:nth-last-child(-n+2) > path:first-child,
.closing.rt-done .morph:hover .rt-wm .lt:nth-last-child(-n+2) > path:first-child { animation: none; }
}
.closing__cta { position: absolute; left: 0; right: 0; margin-inline: auto; width: max-content; top: calc(50% + 148px); opacity: 0; }
@media (max-width: 768px) { .closing { height: 220vh; } }
/* ================= MARQUEE ========================================== */
.marquee { background: var(--color-black); overflow: hidden; padding: 12px 0 0; height: auto; }
.marquee__track { display: flex; gap: 10px; width: max-content; will-change: transform; animation: marquee-run 22s linear infinite; }
.marquee__track span {
font-size: var(--type-marquee-size); font-weight: var(--type-marquee-weight);
line-height: var(--type-marquee-line); letter-spacing: 0.02em;
text-transform: uppercase; color: var(--color-white); white-space: nowrap;
}
@keyframes marquee-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ================= EDITORIAL INDEX ROWS (what's included) =========== */
.index { background: var(--color-white); color: var(--color-ink); padding: var(--space-12) var(--edge); }
.index__rows { margin-top: var(--space-4); }
.index__row {
display: grid;
grid-template-columns: 56px minmax(0, 1.55fr) minmax(0, 1fr);
gap: var(--space-6);
align-items: center;
padding-block: var(--space-4);
border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}
.index__row:last-child { border-bottom: 0; }
.index__num { font-family: var(--type-family-cta); font-size: 32px; font-weight: 600; width: max-content; }
.index__title { color: var(--color-ink); }
/* long German compounds hyphenate instead of bulging the column */
.index__title:lang(de), .uc-card__name:lang(de) { hyphens: auto; -webkit-hyphens: auto; }
.index__desc { max-width: 360px; justify-self: end; color: var(--color-ink); }
/* Aufklappbare Zeilen ("Was wir bieten"). Die Geometrie der Zeile bleibt,
sie wandert nur auf den Knopf; Plus, Drehung und Bewegung sind die des
FAQ weiter unten — dieselbe Geste soll sich überall gleich anfühlen. */
.index__row--fold { display: block; padding-block: 0; }
.index__h { margin: 0; font: inherit; }
.index__head {
width: 100%; display: grid;
grid-template-columns: 56px minmax(0, 1.55fr) minmax(0, 1fr) 32px;
gap: var(--space-6); align-items: center;
padding-block: var(--space-4); text-align: left;
font: inherit; color: inherit; background: none; border: 0;
}
/* Linksbündig statt rechtsbündig wie auf den Nachbarseiten: dort sind alle
vier Kurztexte lang genug, um die Spalte zu füllen, hier sind zwei
einzeilig. Rechts ausgerichtete Blöcke mit linksbündigem Text lassen
dann die linke Kante von Zeile zu Zeile springen. */
.index__head .index__desc { justify-self: start; }
.index__plus {
font-family: var(--type-family-cta); font-size: 24px; font-weight: 400;
justify-self: end; transition: transform 0.3s var(--motion-ease-out);
}
.index__row--fold.is-open .index__plus { transform: rotate(45deg); }
.index__fold { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--motion-ease-out); }
/* Der Inhalt rückt auf die Titelspalte ein, damit die Nummernspalte frei
bleibt und die Zeile beim Aufklappen nicht nach links kippt. */
.index__foldinner {
padding: 0 0 var(--space-5) calc(56px + var(--space-6));
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.index__foldinner p { max-width: 62ch; font-weight: 300; color: var(--color-muted); }
/* Bausteine eines Workshops. Vorher standen sie als Pillen in einer Reihe
wie die Branchenchips der Referenzen — die sind aber Schaltflächen, und
die Pille direkt über dem Knopf ließ Inhalt und Aktion gleich aussehen.
Jetzt sind es zwei ruhige Spalten, getrennt von derselben Verlaufslinie,
die die FAQ-Einträge unten trennt: gelesen wird hier, nicht geklickt. */
.index__bausteine {
width: 100%; max-width: 760px;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--space-6);
list-style: none; padding: 0; margin: 0;
}
/* Haarlinie statt Verlauf: acht davon stehen hier eng untereinander, in
Farbe wird die Liste lauter als die Zeile, zu der sie gehört. Die Farbe
bleibt den Ziffern und dem Plus. */
.index__bausteine li {
padding-block: var(--space-2);
font-size: 16px; font-weight: 300; color: var(--color-ink);
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}
/* Die letzte Zeile jeder Spalte steht ohne Linie, sonst hängt unter der
Liste ein Strich, der nichts mehr trennt. Die beiden letzten Einträge
sind immer die untersten ihrer Spalte — bei gerader wie bei ungerader
Anzahl. */
.index__bausteine li:last-child, .index__bausteine li:nth-last-child(2) { border-bottom: 0; }
/* Schmal wird daraus eine Spalte — zu zweit blieben je rund 110px, die
längeren Einträge brachen dann dreizeilig um. Dann trennt wieder jede
Zeile außer der letzten. */
@media (max-width: 640px) {
.index__bausteine { grid-template-columns: 1fr; }
.index__bausteine li:nth-last-child(2) { border-bottom: 1px solid rgba(0, 0, 0, 0.15); }
.index__bausteine li:last-child { border-bottom: 0; }
}
/* Aktion im Aufklapper: Textzeile mit Pfeil statt Glas-Pille. Die Pille ist
für Bildgrund gebaut (weiß auf weiß), auf der weißen Sektion blieb von
ihr nur ein Schatten. Dieselbe Geste wie die Terminzeilen auf /events/. */
.index__link {
font-family: var(--type-family-cta); font-size: 18px; font-weight: 500;
color: var(--color-ink); white-space: nowrap;
}
.index__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.index__arrow { display: inline-block; transition: transform 0.3s var(--motion-ease-out); }
.index__link:hover .index__arrow { transform: translateX(4px); }
.index__link:hover .index__arrow--extern { transform: translate(3px, -3px); }
@media (prefers-reduced-motion: reduce) { .index__arrow { transition: none; } }
/* ================= SOLVES BAND ====================================== */
.solves { background: var(--color-black); color: var(--color-white); padding: var(--space-12) 0; position: relative; overflow: hidden; }
.solves__title { position: relative; margin: 0 var(--edge) var(--space-6); color: var(--color-white); }
.solves__list { position: relative; display: flex; flex-direction: column; gap: var(--space-5); }
.solves__item { padding-inline: var(--edge); }
.solves__item p { font-size: clamp(18px, 1.7vw, 24px); font-weight: 300; line-height: 1.9; }
/* the gradient rule with an arrowhead, drawn under each line */
.solves__item .solves__line {
position: relative; display: block; height: 1px; margin-top: var(--space-1);
background: var(--gradient-line); opacity: 0.9;
transform-origin: left center;
}
.solves__item .solves__line::after {
content: ""; position: absolute; right: -1px; top: -3.5px;
width: 8px; height: 8px;
border-top: 1.5px solid #4865C6; border-right: 1.5px solid #4865C6;
transform: rotate(45deg);
}
.solves__item:nth-child(2) { padding-left: calc(var(--edge) + 8%); }
.solves__item:nth-child(3) { padding-left: calc(var(--edge) + 16%); }
.solves__item:nth-child(4) { padding-left: calc(var(--edge) + 24%); }
/* enter from beyond the left viewport edge, then stay. The item itself
never moves (an element translated off-viewport can't intersect, so the
observer would never fire) — its content sweeps in instead. */
.solves__item[data-reveal] { opacity: 1; transform: none; }
.solves__item[data-reveal] p,
.solves__item[data-reveal] .solves__line {
transform: translateX(-110vw);
transition: transform 0.85s var(--motion-ease-out);
transition-delay: var(--reveal-delay, 0ms);
}
.solves__item[data-reveal].is-in p,
.solves__item[data-reveal].is-in .solves__line { transform: none; }
/* ================= TIMELINE (how we proceed) ======================== */
.timeline-sec { background: var(--color-black); color: var(--color-white); padding: var(--space-12) var(--edge); }
.timeline { position: relative; margin-top: var(--space-8); }
.timeline__line { position: absolute; left: 0; right: 0; top: 69px; height: 1px; background: rgba(255, 255, 255, 0.9); }
.timeline__steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.tstep { position: relative; padding-top: 108px; }
.tstep::before {
content: ""; position: absolute; left: 0; top: 64px;
width: 12px; height: 12px; border-radius: 50%; background: var(--color-white);
}
.tstep__num { position: absolute; top: 0; left: 0; font-family: var(--type-family-cta); font-size: 24px; font-weight: 600; }
.tstep__title { font-size: 24px; font-weight: 500; line-height: 1.2; margin-bottom: 5px; }
.tstep__desc { font-size: 14px; font-weight: 300; line-height: 1.45; max-width: 240px; color: var(--color-white); }
.tstep__desc--lg { font-size: clamp(16px, 1.6vw, 24px); max-width: 300px; line-height: 1.2; }
/* ================= GLASS CARDS (how we work / looking back) ========= */
/* ================= FAQ ============================================== */
.faq { background: var(--color-white); color: var(--color-ink); padding: var(--space-12) var(--edge); }
.faq__inner { width: 100%; }
.faq__item { border-bottom: 1px solid transparent; border-image: var(--gradient-line) 1; border-image-slice: 0 0 1 0; border-bottom-width: 1px; border-bottom-style: solid; }
.faq__item:last-child { border-bottom: 0; }
.faq__q {
width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding-block: var(--space-3); text-align: left;
font-size: clamp(18px, 1.8vw, 24px); font-weight: 300; line-height: 1.25; color: var(--color-ink);
}
.faq__plus { font-family: var(--type-family-cta); font-size: 24px; font-weight: 400; transition: transform 0.3s var(--motion-ease-out); }
.faq__item.is-open .faq__plus { transform: rotate(45deg); }
/* Derselbe Aufbau wie .index__foldinner: Spalte, Abstand über gap statt
über das Padding der Absätze. Der Grund ist der Verweis am Ende einer
Antwort — als Inline-Element in einem Blockcontainer klebte er unter dem
letzten Absatz und am unteren Rand, während er oben in den Aufklappern
rundum Luft hat. Mit align-items: flex-start nimmt er wie dort nur seine
eigene Breite ein, statt über die ganze Zeile zu reichen.
Der untere Abstand hängt am letzten Kind, nicht als Padding am Container:
Padding zählt nicht zu max-height und bliebe im zugeklappten Zustand als
Lücke unter jeder Frage stehen. */
.faq__a {
overflow: hidden; max-height: 0; transition: max-height 0.4s var(--motion-ease-out);
display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
}
.faq__a > :last-child { margin-bottom: var(--space-3); }
.faq__a p { max-width: 62ch; font-weight: 300; color: var(--color-muted); }
/* Wie bei .story: der Fließtext steht auf 300, und das
des Browsers
ist "bolder" — von 300 aus landet das nach CSS-Stufenregel bei 400 und
ist neben 300 nicht zu sehen. Ein eigener Wert macht die Hervorhebung
wieder zu einer. */
.faq__a b { font-weight: 500; }
/* ================= GET STARTED (glow cards) ========================= */
.getstarted { background: var(--color-white); color: var(--color-ink); padding: var(--space-12) var(--edge); }
.glowcards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.glowcard {
position: relative; overflow: hidden; min-height: 134px;
background: var(--color-black); color: var(--color-white);
border-radius: var(--radius-default);
box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.25);
padding: var(--space-4);
display: flex; flex-direction: column; gap: 11px; justify-content: center;
transition: transform 0.35s var(--motion-ease-out);
}
.glowcard:hover { transform: translateY(-6px); }
/* picture behind the content with the uc-card 50% scrim */
.glowcard__bg {
position: absolute; inset: 0; z-index: 0;
width: 100%; height: 100%; object-fit: cover;
}
.glowcard::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.glowcard > :not(.glowcard__bg) { position: relative; z-index: 2; }
.glowcard--a .glowcard__bg { object-position: center 75%; }
.glowcard--b .glowcard__bg { object-position: center 58%; }
.glowcard__title { color: var(--color-white); }
.glowcard__link { font-family: var(--type-family-cta); font-weight: 400; font-size: 16px; color: var(--color-white); position: relative; z-index: 2; }
/* ================= USE-CASE GRID ==================================== */
.ucwrap { background: var(--color-white); color: var(--color-ink); padding: var(--space-12) var(--edge); }
.uc-filter { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-9, 72px); }
.uc-chip {
padding: var(--space-1) var(--space-2);
border: 1px solid rgba(0, 0, 0, 1); border-radius: var(--radius-cta);
font-size: 14px; color: var(--color-ink); background: transparent;
transition: background 0.2s ease, color 0.2s ease;
}
.uc-chip:hover { background: rgba(0, 0, 0, 0.06); }
.uc-chip.is-active { background: var(--color-black); color: var(--color-white); }
/* Chip ohne eine einzige Referenz dahinter — main.js setzt das. */
.uc-chip.is-hidden { display: none; }
/* Branchenfilter rechts in der Leiste. Ein Klappmenü und keine weitere
Chipreihe: die Branchen sind ein Dutzend und wachsen mit jeder Referenz —
als Chips wären sie zwei Zeilen und würden die Fähigkeiten erschlagen,
die den Hauptweg durch die Seite bilden. Ausklappen statt ausbreiten.
Eigener Knopf mit eigener Liste, kein