, das ganze Quadrat traegt aria-hidden. */
.steps__badge {
position: absolute;
top: -0.5rem;
right: -0.5rem;
min-width: 1.5rem;
padding: 0.125rem 0.25rem;
border-radius: var(--ti-r-1);
background-color: var(--ti-gold);
color: var(--ti-black);
font-family: var(--ti-label);
font-weight: 600;
font-size: 0.6875rem;
letter-spacing: 0.06em;
line-height: 1.35;
text-align: center;
}
.steps__item.is-reached .steps__num {
background-color: var(--ti-gold);
color: var(--ti-black);
box-shadow: 0 0 0 6px rgba(220, 152, 50, 0.16);
--num-scale: 1.06;
}
/* Der Text steht in einer eigenen Karte. Die Oberkante ist bewusst 2px
statt 1px: sie ist die Flaeche, die beim Hover auf Gold kippt, und traegt
dieselbe Rolle wie die Oberkante der Tafeln in #vergleich. */
.steps__body {
flex: 1 1 auto;
min-width: 0;
padding: var(--ti-s-5);
background-color: var(--ti-paper);
border: 1px solid var(--ti-line);
border-top: 2px solid var(--ti-line);
border-radius: var(--ti-r-3);
transition:
transform var(--ti-dur-base) var(--ti-ease-standard),
border-color var(--ti-dur-base) var(--ti-ease-standard);
}
/* Eine Stufe unter der uebrigen h3-Groesse der Seite (--ti-fs-h4 statt
--ti-fs-h3) und der Text auf 1rem statt der 1.0625rem des Fliesstextes:
in einer viertelbreiten Karte wirkte beides sonst zu gross. Die Karte ist
ein Baustein in einer Vierer-Reihe, keine eigene Sektion. */
.steps__title {
font-family: var(--ti-display);
font-weight: 900;
font-size: var(--ti-fs-h4);
line-height: 1.2;
letter-spacing: -0.01em;
margin-bottom: var(--ti-s-2);
transition: color var(--ti-dur-base) var(--ti-ease-standard);
}
.steps__text {
color: var(--ti-fg-2);
font-size: var(--ti-fs-body);
margin-bottom: 0;
max-width: 50ch;
}
/* Hub, goldene Oberkante und goldene Ueberschrift nur mit echtem
Zeigegeraet - sonst bliebe der Zustand auf dem Handy nach einem Tap
haengen. Angefasst werden die Kinder, nicht .steps__item: das Element
traegt die Reveal-Transition (Abschnitt 11) und wuerde sie sonst
ueberschreiben - dasselbe Muster wie bei den Karten in #warum-wir. */
@media (hover: hover) and (pointer: fine) {
.steps__item:hover .steps__num {
--num-lift: -4px;
}
.steps__item:hover .steps__body {
transform: translateY(-4px);
border-top-color: var(--ti-gold);
}
.steps__item:hover .steps__title {
color: var(--ti-gold);
}
}
.steps__foot {
margin-top: var(--ti-s-8);
display: flex;
justify-content: center;
}
/* --- Ablauf auf Schwarz ---
Die noch nicht gezeichnete Linie war --ti-line (#E5E5E3). Auf Schwarz
waere das ein heller Strich, der aussieht, als waere er schon gezogen -
der Fortschritt liesse sich dann nicht mehr ablesen. Sie wird zur
Haarlinie.
Die noch nicht erreichte Nummer war ein schwarzes Quadrat; auf schwarzem
Grund ist die unsichtbar. Sie wird eine Stufe heller, die Ziffer bleibt
gold. Die erreichte Nummer (Gold mit schwarzer Ziffer) bleibt, wie sie
ist - der Umschlag ist auf Schwarz sogar deutlicher als vorher. Deren
Regel ist spezifischer und gewinnt gegen die Zeile hier. */
.section--dark .steps__line {
background-color: rgba(255, 255, 255, 0.16);
}
/* Vor dem Erreichen: dunkles Quadrat mit grauer Umrandung und WEISSER
Glyphe. Das Gold ist damit dem erreichten Zustand vorbehalten und der
Umschlag beim Scrollen deutlicher - vorher waren beide Zustaende gold
und unterschieden sich nur in der Flaeche. */
.section--dark .steps__num {
background-color: var(--ti-n-800);
color: var(--ti-paper);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
/* Der erreichte Zustand behaelt Gold mit dunkler Glyphe. Die Regel steht
hier noch einmal, weil die Zeile darueber jetzt auch color setzt und
gleich spezifisch waere. */
.section--dark .steps__item.is-reached .steps__num {
background-color: var(--ti-gold);
color: var(--ti-black);
box-shadow: 0 0 0 6px rgba(220, 152, 50, 0.16);
}
.section--dark .steps__body {
background-color: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.1);
}
.section--dark .steps__text {
color: rgba(255, 255, 255, 0.75);
}
/* Auf Schwarz traegt der Titel Weiss; beim Hover kippt er auf Gold
(7,9:1 auf der Kartenflaeche). */
@media (hover: hover) and (pointer: fine) {
.section--dark .steps__item:hover .steps__title {
color: var(--ti-gold);
}
}
/* --- Warum wir: drei gleichrangige USP-Karten unter einem mittigen Kopf.
Frueher standen hier alternierende Flag-Cut-Zeilen; die drei Gruende waren
dabei erst beim Lesen als Dreiergruppe erkennbar. Jetzt tragen drei gleich
gebaute Karten je ein Icon-Quadrat, eine "X statt Y"-Headline und drei
Zeilen Text - die Sektion ist damit auf einen Blick lesbar.
Das Icon-Quadrat ist bewusst SCHWARZ mit goldener Glyphe, nicht umgekehrt:
der orangene Signatur-Punkt bleibt so dem Markenauftritt vorbehalten und
wird nicht dreifach nebeneinander wiederholt. --- */
.reasons__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
/* max-width: none wie bei #cases/#vergleich - sonst bricht die Headline auf
dem Desktop unnoetig dreizeilig. */
.reasons__head h2 {
max-width: none;
margin-inline: auto;
}
.reasons__head .section__intro {
max-width: 58ch;
margin-inline: auto;
}
.reasons {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-5);
}
.reason {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--ti-s-6) var(--ti-s-5);
background-color: var(--ti-paper);
border: 1px solid var(--ti-line);
border-radius: var(--ti-r-3);
}
.reason:nth-child(2) { transition-delay: 60ms; }
.reason:nth-child(3) { transition-delay: 120ms; }
.reason__icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: none;
width: 3.25rem;
height: 3.25rem;
margin-bottom: var(--ti-s-5);
border-radius: var(--ti-r-2);
background-color: var(--ti-black);
color: var(--ti-gold);
/* Die Karte selbst traegt die Reveal-Transition (siehe Abschnitt 11) -
ein eigener Hover-Uebergang auf .reason wuerde sie ueberschreiben.
Deshalb reagiert nur das Icon. */
transition:
transform var(--ti-dur-base) var(--ti-ease-standard),
box-shadow var(--ti-dur-base) var(--ti-ease-standard);
}
.reason__icon svg {
stroke-linecap: square;
stroke-linejoin: miter;
}
@media (hover: hover) and (pointer: fine) {
.reason:hover .reason__icon {
transform: translateY(-2px) scale(1.06);
box-shadow: 0 10px 22px -12px rgba(14, 14, 14, 0.7);
}
}
.reason__title {
font-size: var(--ti-fs-h4);
line-height: 1.25;
max-width: none;
margin: 0 0 var(--ti-s-3);
}
.reason__text {
color: var(--ti-fg-2);
font-size: var(--ti-fs-body-s);
margin: 0;
max-width: 38ch;
}
/* --- Warum wir auf Schwarz ---
Die Karte kann nicht weiss bleiben: drei weisse Bloecke auf Schwarz
waeren drei Leuchtkaesten und lauter als die Headline darueber. Sie wird
zur leicht aufgehellten Flaeche mit Haarlinie - dieselbe Machart wie das
Termin-Panel im Abschluss-CTA.
Das Icon-Quadrat war schwarz mit goldener Glyphe und ist auf schwarzem
Grund nicht mehr zu sehen. Es wird eine Stufe heller statt gold: die
Regel "der orangene Punkt bleibt der Marke vorbehalten und steht nicht
dreimal nebeneinander" gilt auf Schwarz genauso. */
.section--dark .reason {
background-color: rgba(255, 255, 255, 0.04);
border-color: rgba(255, 255, 255, 0.12);
}
.section--dark .reason__icon {
background-color: var(--ti-n-700);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.section--dark .reason__text {
color: rgba(255, 255, 255, 0.75);
}
/* Der Hover-Schatten war ein schwarzer Schlagschatten - auf Schwarz
passiert damit sichtbar nichts. Auf der dunklen Flaeche traegt der
Gold-Glow die Rueckmeldung. */
@media (hover: hover) and (pointer: fine) {
.section--dark .reason:hover .reason__icon {
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.12),
0 10px 22px -10px rgba(220, 152, 50, 0.55);
}
}
/* ==========================================================================
9d. PASST ES? (#passt-es)
Selbstqualifizierung in zwei Tafeln: links passt es, rechts nicht.
Bewusst leiser als #vergleich - dort trennt schwarze Flaeche gegen helle,
hier bleiben beide Tafeln hell und die Farbe steckt nur in der Oberkante
und im getoenten Marker. Zweimal derselbe laute Auftritt haette den
Vergleich weiter oben entwertet.
Kontraste: Haken --ti-green-ink (#20734C) auf hellgruener Flaeche = 5,4:1,
Kreuz --ti-danger (#C4382C) auf hellroter Flaeche = 4,9:1. Beide ueber AA.
========================================================================== */
.fit__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.fit__head h2 {
max-width: none;
margin-inline: auto;
}
.fit__head .section__intro {
max-width: 56ch;
margin-inline: auto;
}
.fit__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-5);
}
.fit__panel {
position: relative;
overflow: hidden;
padding: var(--ti-s-6) var(--ti-s-5);
border: 1px solid var(--ti-line);
border-radius: var(--ti-r-3);
background-color: var(--ti-off-white);
text-align: center;
}
/* Die farbige Oberkante ist das einzige Flaechen-Signal - schmal genug,
dass die Tafeln ruhig bleiben. */
.fit__panel::before {
content: "";
position: absolute;
inset: 0 0 auto;
height: 3px;
}
.fit__panel--yes::before { background-color: var(--ti-green); }
.fit__panel--no::before { background-color: var(--ti-danger); }
.fit__panel--no { transition-delay: 80ms; }
.fit__panel-title {
font-family: var(--ti-display);
font-weight: 900;
font-size: var(--ti-fs-h3-display);
line-height: 1.15;
letter-spacing: -0.015em;
margin: 0 0 var(--ti-s-5);
}
.fit__panel--yes .fit__panel-title { color: var(--ti-green-ink); }
.fit__panel--no .fit__panel-title { color: var(--ti-fg-2); }
.fit__list {
text-align: left;
}
.fit__row {
display: flex;
align-items: flex-start;
gap: var(--ti-s-4);
padding-block: var(--ti-s-3);
}
.fit__row + .fit__row {
border-top: 1px solid var(--ti-line);
}
/* Getoent statt gefuellt: derselbe Marker wie in #vergleich, nur eine
Lautstaerke leiser. */
.fit__mark {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.5rem;
height: 1.5rem;
border-radius: var(--ti-r-2);
margin-top: 0.15rem;
}
.fit__panel--yes .fit__mark {
background-color: rgba(47, 143, 95, 0.14);
color: var(--ti-green-ink);
}
.fit__panel--no .fit__mark {
background-color: rgba(196, 56, 44, 0.12);
color: var(--ti-danger);
}
.fit__text {
display: block;
color: var(--ti-fg-2);
font-size: var(--ti-fs-body-s);
line-height: 1.5;
}
.fit__foot {
margin-top: var(--ti-s-7);
display: flex;
justify-content: center;
}
/* ==========================================================================
9e. TEAM (#team)
Zwei Zeilen, das Bild wechselt ab 1024px die Seite. Name und Position
liegen IM Bild ueber einem dunklen Verlauf, der Text steht daneben.
Der Trick gegen das Format-Problem: beide Fotos bekommen ab 1024px
dieselbe HOEHE (--team-h), die Breite ergibt sich aus dem
Seitenverhaeltnis (aspect-ratio). Hochformat 4:5 und Querformat 3:2
stehen dadurch in einer gemeinsamen Zeilenhoehe, statt als zwei
unterschiedlich grosse Bloecke zu wirken. Die Grid-Spalte des Bildes
steht auf `auto` und folgt dieser Breite.
========================================================================== */
.team__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.team__head h2 {
max-width: none;
margin-inline: auto;
}
.team__head .section__intro {
max-width: 58ch;
margin-inline: auto;
}
.team__rows {
display: grid;
gap: var(--ti-s-8);
}
.team__row {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-5);
align-items: center;
}
.team__row--crew { transition-delay: 80ms; }
.team__photo {
position: relative;
overflow: hidden;
min-width: 0;
margin: 0;
border-radius: var(--ti-r-3);
background-color: var(--ti-n-100);
box-shadow: 0 24px 48px -32px rgba(14, 14, 14, 0.55);
}
.team__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.team__photo--portrait { aspect-ratio: 4 / 5; }
.team__photo--landscape { aspect-ratio: 3 / 2; }
/* Name und Position im Bild. Der Verlauf traegt die Schrift auch dann,
wenn das spaetere Foto unten hell ist - und macht den hellen
Platzhalter darunter dunkel genug fuer weissen Text. */
.team__caption {
position: absolute;
inset: auto 0 0;
padding: var(--ti-s-4) var(--ti-s-5) var(--ti-s-5);
/* Verlauf statt deckender Flaeche, damit vom Foto mehr sichtbar bleibt.
ACHTUNG: Die Stufen sind so gesetzt, dass die goldene Positionszeile
noch im dichten Teil (>= 0,88) liegt - sie ist die kontrastkritische
Zeile, nicht der weisse Name. Erst darueber faellt der Verlauf schnell
auf 0 ab, deshalb braucht es keinen zweiten Verlauf mehr obendrauf. */
background-image: linear-gradient(
to top,
rgba(14, 14, 14, 0.92) 0%,
rgba(14, 14, 14, 0.88) 78%,
rgba(14, 14, 14, 0.45) 92%,
rgba(14, 14, 14, 0) 100%
);
color: var(--ti-paper);
text-align: left;
}
.team__role {
display: block;
font-family: var(--ti-label);
font-weight: 600;
/* Enger gesperrt als die uebrigen Labels: "GRUENDER & GESCHAEFTSFUEHRER"
muss in die rund 236px Innenbreite der Hochformat-Kachel passen. */
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: var(--ti-fs-label);
/* Gold auf dunklem Verlauf - die AA-Ausnahme gegen Gold-Text gilt nur auf
hellem Grund. */
color: var(--ti-gold);
margin: 0 0 var(--ti-s-2);
}
.team__name {
font-family: var(--ti-display);
font-weight: 900;
font-size: var(--ti-fs-h3-display);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--ti-paper);
margin: 0;
}
.team__body {
min-width: 0;
}
/* Kurze Gold-Kante als Anker fuer die Textspalte: ohne sie stuende dort
nach dem Umzug von Name und Position nur noch loser Fliesstext. */
.team__rule {
display: block;
width: 2.5rem;
height: 3px;
background-color: var(--ti-gold);
margin-bottom: var(--ti-s-5);
}
.team__lead {
font-size: var(--ti-fs-body-l);
font-weight: 600;
color: var(--ti-fg);
margin: 0 0 var(--ti-s-4);
max-width: 46ch;
}
.team__text {
color: var(--ti-fg-2);
margin: 0;
max-width: 52ch;
}
/* --- Team auf Schwarz ---
Nur die zwei Textrollen der Spalte: Ueberschriften und Subheadline
erledigt .section--dark. Die Bildunterschriften in den Fotos liegen auf
ihrem eigenen Verlauf und bleiben unveraendert - sie standen nie auf der
Sektionsflaeche.
Die Textspalte bekommt eine eigene, halbdurchsichtige Kachel
(Kundenwunsch September 2026): auf dem Buerofoto lag der Text vorher
direkt auf dem Bild und lief ueber wechselnd helle und dunkle Stellen.
Die Kachel gibt ihm einen ruhigen Grund, ohne das Foto zuzudecken -
dieselbe Machart wie die Karten in #warum-wir, nur dichter, weil hier
ein Bild darunter liegt statt einer Flaeche.
backdrop-filter ist Zugabe und keine Voraussetzung: wo er fehlt, traegt
schon die Flaeche allein. Gerechnet ist der Kontrast ohne ihn. */
.section--dark .team__body {
padding: var(--ti-s-6) var(--ti-s-5);
background-color: rgba(14, 14, 14, 0.62);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--ti-r-3);
backdrop-filter: blur(8px);
}
.section--dark .team__lead {
color: var(--ti-paper);
}
.section--dark .team__text {
color: rgba(255, 255, 255, 0.75);
}
/* --- Kennzahlen (Ergebnisse) --- */
/* Bilanz-Tafel statt Karten-Grid: keine Kaesten, keine Rundungen, nur
Haarlinien. Passt zur scharfen Editorial-Anmutung der uebrigen Seite und
spart auf dem Handy die Innenabstaende von vier einzelnen Karten. */
.stat-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0;
margin-bottom: var(--ti-s-6);
border-top: 2px solid var(--ti-fg);
}
/* Der Abstand nach unten war fuer die Kundenstimmen darunter gedacht. Die
sind auskommentiert, ohne sie stand unter den Kennzahlen 32 bzw. 64 Pixel
mehr Luft als ueber jedem anderen Abschnittsende (Kundenwunsch
2026-10-06: Abstand nach unten wie nach oben). */
.stat-grid:last-child {
margin-bottom: 0;
}
.stat {
padding: var(--ti-s-5) var(--ti-s-4) var(--ti-s-5) 0;
}
/* Senkrechte Trennlinie vor der zweiten Spalte. */
.stat:nth-child(2n) {
padding-right: 0;
padding-left: var(--ti-s-4);
border-left: 1px solid var(--ti-line);
}
/* Waagerechte Trennlinie zwischen erster und zweiter Zeile. */
.stat:nth-child(-n + 2) {
border-bottom: 1px solid var(--ti-line);
}
.stat:nth-child(2) { transition-delay: 90ms; }
.stat:nth-child(3) { transition-delay: 180ms; }
.stat__value {
display: block;
font-family: var(--ti-display);
font-size: clamp(2.25rem, 5.4vw, 3.25rem);
font-weight: 900;
line-height: 0.95;
letter-spacing: -0.02em;
/* Seit 2026-10-29 das dunklere Gold (5,4:1 auf Weiss). Das Brand-Gold
erreichte auf der hellen Flaeche nur 2,45:1 und lag unter WCAG AA
(Hinweis aus der Seitenanalyse). */
color: var(--ti-gold-ink);
margin-bottom: var(--ti-s-3);
font-variant-numeric: tabular-nums;
}
/* min-height ueber zwei Zeilen: "besetzte Stellen" laeuft einzeilig,
"guenstigste Bewerbung" zweizeilig - ohne die Reserve saessen die
.stat__note-Zeilen der vier Kacheln auf zwei verschiedenen Hoehen und
die Reihe franste unten aus. Zwei Zeilen sind das Maximum ueber alle
vier Labels; wer ein dreizeiliges ergaenzt, zieht den Wert mit. */
.stat__label {
display: block;
color: var(--ti-fg);
font-weight: 600;
font-size: 0.875rem;
line-height: 1.3;
min-height: 2.6em;
max-width: 18ch;
}
.stat__note {
display: block;
margin-top: var(--ti-s-2);
color: var(--ti-fg-3);
font-size: 0.75rem;
line-height: 1.35;
max-width: 20ch;
}
.stat-source {
font-size: var(--ti-fs-body-s);
color: var(--ti-fg-3);
margin: 0;
}
/* --- Kundenstimmen (Ergebnisse) --- */
.quote-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--ti-s-5);
}
.quote {
margin: 0;
background-color: var(--ti-paper);
border: 1px solid var(--ti-line);
border-radius: var(--ti-r-2);
padding: var(--ti-s-6);
}
.quote__text {
font-style: normal;
margin-bottom: var(--ti-s-4);
}
.quote__author {
color: var(--ti-fg-2);
font-size: var(--ti-fs-body-s);
font-weight: 600;
}
/* ==========================================================================
9b. CASE STUDIES (#cases)
Jede Referenz ist eine eigene Kachel: heller Kartenkoerper mit 8px-Radius
(Marken-Maximum), duenner Kante und flacher Tiefe, unten buendig
abgeschlossen von der schwarzen Ergebnis-Leiste. Vorher trennten nur
Linien - die Zusammengehoerigkeit einer Referenz war dadurch nicht
ablesbar.
Kein gleichfoermiges Karten-Grid: die Kacheln stehen einspaltig
untereinander, Kopf und Anzeige wechseln ab 1024px die Seite
(.case--flip). Innenabstand liegt als --case-pad an der Kachel, damit
die Ergebnis-Leiste per negativem Rand exakt bis an die Kante laeuft.
========================================================================== */
/* Kopf der Sektion steht auf jeder Breite mittig - wie im Portfolio.
max-width: none, damit die Headline auf dem Desktop in EINE Zeile passt:
.section__head wuerde sie sonst auf 65ch der Fliesstext-Schrift begrenzen,
das reicht fuer "Starke Ergebnisse fuer starke Unternehmen." nicht. */
.cases__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.cases__head h2 {
max-width: none;
margin-inline: auto;
}
.cases__head .section__intro {
margin-inline: auto;
}
.cases__list {
display: flex;
flex-direction: column;
/* Seit 2026-10-28 wie die Case Studies der anderen Leistungsseiten
(`sektionen/CaseStudies.astro`): lange Anlaufstrecke zwischen den Karten. */
gap: var(--ti-s-8);
}
@media (min-width: 1024px) {
.cases__list { gap: clamp(10rem, 55svh, 28rem); }
}
/* --- Stapel-Effekt: die Referenzen schieben sich beim Scrollen
uebereinander und treten dabei zurueck (Kundenwunsch September 2026).
Die Mechanik ist position: sticky - jede Kachel bleibt unter dem Header
stehen, die naechste laeuft darueber. Das Zuruecktreten (kleiner werden,
abdunkeln) haengt an zwei Custom Properties, die js/main.js (Abschnitt 16)
je Frame setzt.
Drei Punkte, die zusammengehoeren und beim Umbau leicht auseinanderfallen:
1. VERKLEINERT WIRD MIT scale, NICHT MIT transform. Die Kacheln tragen
.reveal, und das setzt transform: translateY(16px) mitsamt einer
500ms-Transition darauf. Ein transform: scale() hier wuerde die
Einblendung ueberschreiben - und laege es unter .is-visible, liefe der
Stapelwert durch dieselbe 500ms-Transition und haengte sichtbar hinterher.
Die eigenstaendige scale-Eigenschaft ist davon unabhaengig: sie wird
nicht transitioniert und rechnet sich mit dem translate der Einblendung
zusammen, statt es zu ersetzen.
2. transform-origin liegt OBEN (50% 0). Nur dann bleibt die Oberkante beim
Verkleinern stehen - die ist der sichtbare Teil einer gestapelten
Kachel. Nebenbei haelt das die Rechnung in main.js stabil: die dort
gemessene Oberkante wandert durch das Verkleinern nicht.
3. SEIT DEM 23.09.2026 KEIN SCHLEIER MEHR: der Inhalt der verdeckten Akte
blendet aus, ueberstehende Teile schneidet js/main.js per clip-path ab.
Gestapelt wird erst ab 1024px. Darunter sind die Akten 1000 bis 1600px
hoch, also bis zum Zweieinhalbfachen des Fensters - eine Kachel bliebe
dort ueber tausend Scrollpixel lang stehen, bevor die naechste kommt.
Das liest sich als haengende Seite, nicht als Effekt. Ohne JS und bei
prefers-reduced-motion stehen die Kacheln ebenfalls schlicht
untereinander (.is-stacked setzt nur JS).
DIE KLEBEHOEHE IST GERECHNET, NICHT GESETZT. Eine feste Hoehe waere
entweder zu gross (auf einem 900px hohen Notebook liegt der Viewport bei
rund 790px, die groesste Akte bei 774px - die Kachel klebte dann so weit
unten, dass ihre Ergebnis-Leiste nie ins Bild kaeme) oder unnoetig klein.
min() nimmt deshalb den kleineren von zwei Werten: den Wunschabstand
unter dem Header, und den Abstand, bei dem die groesste Kachel gerade
noch vollstaendig ins Fenster passt. Auf hohen Fenstern gewinnt der
Wunschabstand und die Kacheln stapeln sich sauber unter dem Header; auf
flachen rutscht der Stapel nach oben, notfalls mit negativem Wert ueber
den Fensterrand hinaus. In JEDEM Fall bleibt die Ergebnis-Leiste
erreichbar - und genau darum geht es, sie traegt die Kennzahlen.
JEDE AKTE KLEBT 14px TIEFER ALS DIE VORIGE (--case-stagger). Ohne diese
Staffelung klebten alle auf derselben Hoehe, die verdeckte Kachel laege
also exakt hinter der naechsten - und weil sie beim Zuruecktreten auch
noch schmaler wird, waere von ihr nichts mehr zu sehen. Der Effekt liefe
dann zwar, waere aber unsichtbar. Mit der Staffelung schaut von jeder
erledigten Akte ein Streifen heraus und der Stapel wird ablesbar.
--cases-stack-tallest (Hoehe der groessten Akte), --cases-stack-n (Anzahl)
und --case-stack-i (Position, 0-basiert) setzt js/main.js, Abschnitt 16.
Gerechnet wird hier: so bleibt der Breakpoint und jedes Mass im
Stylesheet. Fehlen die Werte, faellt alles auf den Wunschabstand
zurueck. --- */
@media (min-width: 1024px) {
html.js .cases__list.is-stacked {
--case-stagger: 1.5rem; /* seit 2026-10-28 wie auf den anderen Leistungsseiten (--raum-6) */
}
html.js .cases__list.is-stacked .case {
position: sticky;
/* Der verdichtete Header plus Luft. Nicht --header-h: bis die Kacheln
drankommen, ist laengst gescrollt und der Header verdichtet.
Der Platz fuer die volle Staffelung geht vom verfuegbaren Raum ab -
sonst rutschte die UNTERSTE Kachel des Stapels aus dem Fenster. */
top: calc(
min(
calc(var(--header-h-scrolled) + 1rem),
calc(
100vh - var(--cases-stack-tallest, 0px) - var(--ti-s-5) -
(var(--cases-stack-n, 1) - 1) * var(--case-stagger)
)
) + var(--case-stack-i, 0) * var(--case-stagger)
);
scale: var(--case-stack-scale, 1);
transform-origin: 50% 0;
}
/* Seit dem 23.09.2026: statt eines Schleiers blendet der Inhalt der
verdeckten Akte aus, und was unter der naechsten herausragen wuerde,
wird abgeschnitten (js/main.js, Abschnitt 16). So ueberschneidet sich
sichtbar nichts, auch bei unterschiedlich hohen Akten. */
html.js .cases__list.is-stacked .case > * {
opacity: var(--case-stack-fade, 1);
}
}
/* --- Seit dem 2026-10-21 im Look der Case Studies der anderen Seiten
(Kundenwunsch: alle Case Studies gleich, `components/sektionen/
CaseStudies.astro` und die Karten der Startseite): schwarze Karte mit
goldener Kante 2px und leisem Goldschimmer, Nummer im goldenen Kasten,
Kundenname in Versalien, darunter die Branche, gruener Titel mit dem
groessten Nutzen, Felder als dunkle Kacheln (Projekt, besetzte Stellen),
das Ergebnis gruen hervorgehoben mit grossen Kennzahlen. Rechts die
Anzeigen, so gross wie die Spalte zulaesst. Die Sektion steht auf Schwarz
(.section--dark). Die Flaeche ist deckend, sonst scheinen beim Stapeln die
Karten darunter durch. --- */
.case {
--case-pad: clamp(1.25rem, 3vw, 2.75rem);
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-5);
padding: var(--case-pad);
color: var(--ti-paper);
border: 2px solid var(--ti-gold);
border-radius: var(--ti-r-3);
background:
radial-gradient(120% 90% at 100% 0%, rgba(220, 152, 50, 0.1), transparent 62%),
var(--ti-black);
box-shadow: 0 -20px 50px -30px rgba(0, 0, 0, 0.9);
}
/* Unter 1024 Pixeln eine Spalte: die linke Spalte loest sich auf, damit die
Anzeigen direkt unter dem Projekttext stehen und nicht erst nach allen
Feldern. */
.case__spalte {
display: contents;
}
.case__kopf { order: 1; }
.case__titel { order: 2; }
.case__spalte > .case__feld:not(.case__data):not(.case__result) { order: 3; }
.case__media { order: 4; }
.case__data { order: 5; }
.case__result { order: 6; }
.case__kopf {
display: flex;
align-items: center;
gap: var(--ti-s-4);
}
.case__nummer {
flex: none;
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border: 1px solid var(--ti-gold);
border-radius: var(--ti-r-1);
font-family: var(--ti-display);
font-size: 1.125rem;
font-weight: 800;
line-height: 1;
color: var(--ti-gold);
}
.case__kopf-text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.section--dark .case__name,
.case__name {
margin: 0;
font-family: var(--ti-sans);
font-size: 0.875rem;
font-weight: 800;
line-height: 1.3;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ti-paper);
}
.case__name .dot-mark {
width: 0.4em;
height: 0.4em;
}
.case__branch {
margin: 0;
max-width: none;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.75);
}
.case__titel {
margin: 0;
max-width: none;
font-family: var(--ti-display);
font-size: clamp(1.25rem, 2vw, 1.5rem);
font-weight: 800;
line-height: 1.2;
color: var(--ti-green-fg);
}
.case__feld {
display: flex;
flex-direction: column;
gap: var(--ti-s-2);
padding: var(--ti-s-4);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--ti-r-2);
background-color: #1c1c1c;
}
.case__feld-titel,
.case__data-title {
margin: 0;
font-family: var(--ti-label);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--ti-gold);
}
.case__context {
margin: 0;
max-width: none;
font-size: 0.875rem;
line-height: 1.6;
color: rgba(255, 255, 255, 0.75);
}
.case__context strong {
color: var(--ti-paper);
font-weight: 700;
}
/* --- Besetzte Stellen als Strichliste im Feld --- */
.case__roles {
margin: 0;
padding: 0;
list-style: none;
}
.case__roles li {
display: flex;
align-items: baseline;
gap: var(--ti-s-3);
padding-block: var(--ti-s-2);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.75);
}
.case__roles li:last-child {
border-bottom: 0;
padding-block-end: 0;
}
.case__roles-num {
flex: none;
min-width: 3rem;
font-family: var(--ti-display);
font-weight: 900;
font-size: 1.125rem;
line-height: 1;
color: var(--ti-paper);
font-variant-numeric: tabular-nums;
}
/* --- Ergebnis: gruene Kante und Schleier wie auf den Leistungsseiten, die
beiden belegten Zahlen gross nebeneinander. Der Schleier liegt als
Verlaufsebene ueber der Grundfarbe, damit die Flaeche deckend bleibt. --- */
.case__feld--ergebnis {
border: 2px solid var(--ti-green-fg);
border-left-width: 4px;
background:
linear-gradient(rgba(76, 195, 138, 0.12), rgba(76, 195, 138, 0.12)),
#1c1c1c;
}
.case__feld--ergebnis .case__feld-titel {
color: var(--ti-green-fg);
}
.case__figures {
display: flex;
flex-wrap: wrap;
gap: var(--ti-s-2) var(--ti-s-6);
}
.case__figure {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0 var(--ti-s-2);
font-size: 0.875rem;
font-weight: 600;
color: var(--ti-paper);
}
.case__figure b {
font-family: var(--ti-display);
font-weight: 900;
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: 1;
letter-spacing: -0.015em;
color: var(--ti-green-fg);
font-variant-numeric: tabular-nums;
}
.case__stamp {
margin: 0;
max-width: none;
display: inline-flex;
align-items: center;
gap: var(--ti-s-2);
font-size: 0.8125rem;
font-weight: 600;
color: rgba(255, 255, 255, 0.75);
}
.case__stamp::before {
content: "";
flex: none;
width: 8px;
height: 8px;
background-color: var(--ti-green-fg);
}
/* Limitless laeuft noch: Rahmendaten statt Ergebnis, deshalb neutral statt
gruen. Gruen bleibt den belegten Zahlen vorbehalten. */
.case__feld--ergebnis:has(.case__figures--running) {
border-color: rgba(255, 255, 255, 0.35);
background: #1c1c1c;
}
.case__feld--ergebnis:has(.case__figures--running) .case__feld-titel {
color: var(--ti-gold);
}
.case__figures--running .case__figure b {
color: var(--ti-paper);
}
.case__feld--ergebnis:has(.case__figures--running) .case__stamp::before {
background-color: var(--ti-gold);
}
/* --- Original-Anzeigen. Jedes Creative behaelt sein echtes Format, nichts
wird beschnitten. Zwei Anzeigen stehen nebeneinander, eine einzelne
bekommt die volle Spaltenbreite (hochkant begrenzt). --- */
.case__media {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: var(--ti-s-4);
}
.case__shot {
margin: 0;
flex: 1 1 0;
min-width: 0;
max-width: 26rem;
}
.case__shot img {
display: block;
width: 100%;
height: auto;
border-radius: var(--ti-r-2);
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.case__shot--portrait {
flex: 0 1 auto;
width: min(100%, 17rem);
}
.case__shot--desktop {
display: none;
}
.case__shot--video .case__video-frame {
position: relative;
overflow: hidden;
border-radius: var(--ti-r-2);
background-color: var(--ti-black);
aspect-ratio: 9 / 16;
box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.case__shot figcaption {
margin-top: var(--ti-s-3);
font-family: var(--ti-label);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: 0.75rem;
color: rgba(255, 255, 255, 0.6);
}
/* Zwei Anzeigen als versetztes Paar (Steinmeister, SAS Connect): jede gut
sechs Zehntel der Spalte breit, die zweite rechts unten ueber der ersten.
So stehen beide deutlich groesser als nebeneinander und fuellen die Hoehe
der Karte. Die Unterschrift der ersten steht oben, die der zweiten unten
rechts, damit keine verdeckt wird. */
.case__media--paar {
flex-direction: column;
flex-wrap: nowrap;
align-items: stretch;
gap: 0;
}
.case__media--paar .case__shot {
flex: none;
width: 62%;
max-width: none;
}
.case__media--paar .case__shot:first-of-type {
align-self: flex-start;
display: flex;
flex-direction: column-reverse;
}
.case__media--paar .case__shot:first-of-type figcaption {
margin: 0 0 var(--ti-s-3);
}
.case__media--paar .case__shot:last-of-type {
position: relative;
align-self: flex-end;
margin-top: -24%;
text-align: right;
}
.case__media--paar .case__shot:last-of-type img {
outline: 4px solid var(--ti-black);
}
.case__shot figcaption {
overflow-wrap: anywhere;
}
/* Ab 1024 Pixeln zwei Spalten wie auf den anderen Seiten: links Kopf, Titel
und Felder, rechts die Anzeigen, senkrecht mittig und so gross wie die
Spalte zulaesst. */
@media (min-width: 1024px) {
.case {
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(1.5rem, 3vw, 2.75rem);
align-items: center;
}
.case__spalte {
display: flex;
flex-direction: column;
gap: var(--ti-s-4);
min-width: 0;
}
.case__media {
align-self: center;
}
.case__shot--desktop {
display: block;
}
.case__shot--portrait {
width: min(100%, 19rem);
}
.case__media--quad .case__shot {
flex: 0 1 calc(50% - var(--ti-s-4) / 2);
}
.case__media--paar .case__shot {
width: 64%;
}
}
@media (max-width: 480px) {
.case__name {
letter-spacing: 0.16em;
}
}
.case__video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.case__video--embed {
border: 0;
}
/* --- Zwei-Klick-Video: Poster + Einwilligung statt sofortigem Iframe ---
Der Schleier ist ein Verlauf von unten, kein flaechiger Schwarzfilm: das
Standbild ist das eigentliche Argument (echte Anzeige, echter Mitarbeiter)
und soll sichtbar bleiben. Nur unter dem Button verdichtet er sich so
weit, dass Label und Hinweiszeile sicher lesbar sind. */
.video-consent {
position: relative;
width: 100%;
height: 100%;
}
.video-consent__poster {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-consent__veil {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
gap: var(--ti-s-3);
padding: var(--ti-s-5);
text-align: center;
background: linear-gradient(
to top,
rgba(14, 14, 14, 0.94) 0%,
rgba(14, 14, 14, 0.88) 22%,
rgba(14, 14, 14, 0.55) 42%,
rgba(14, 14, 14, 0.12) 62%,
rgba(14, 14, 14, 0) 78%
);
}
.video-consent__btn {
display: inline-flex;
align-items: center;
gap: var(--ti-s-3);
min-height: 44px;
padding: var(--ti-s-3) var(--ti-s-5);
background-color: var(--ti-gold);
color: var(--ti-ink);
font-family: var(--ti-label);
font-size: var(--ti-fs-body-s);
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--ti-r-2);
transition:
background-color var(--ti-dur-base) var(--ti-ease-standard),
transform var(--ti-dur-base) var(--ti-ease-standard);
}
/* Gleiche Reaktion wie der Haupt-CTA: Gold-Schein statt Farbwechsel. */
.video-consent__btn:hover,
.video-consent__btn:focus-visible {
transform: translateY(-2px) scale(1.015);
box-shadow: 0 10px 28px rgba(220, 152, 50, 0.42);
}
.video-consent__icon svg {
display: block;
width: 1.15em;
height: 1.15em;
}
/* 0.78 Weiss auf dem dichten Teil des Verlaufs = ueber 9:1. Der Hinweis
muss lesbar sein, er ist die Einwilligung. */
.video-consent__note {
margin: 0;
max-width: 26ch;
color: rgba(255, 255, 255, 0.78);
font-size: var(--ti-fs-caption);
line-height: 1.4;
}
/* --- Abschluss der Sektion: nur der CTA, mittig - dieselbe Fusszeile wie
unter dem Portfolio und dem Vergleich. Er steht ausserhalb von
.cases__list: innerhalb wuerde ihn der Stapel-Effekt mitnehmen und der
Knopf klebte als sechste "Referenz" unter dem Header. --- */
.cases__foot {
margin-top: var(--ti-s-7);
display: flex;
justify-content: center;
}
/* ==========================================================================
9d. EINBLICKE IN DEN WERBEANZEIGENMANAGER (#einblicke)
Die Screenshots kommen in sehr unterschiedlichen Seitenverhaeltnissen
(breite Tabellen, mal 5:1, mal 10:1). Statt sie zu beschneiden, bekommt
jeder denselben Fensterrahmen: die Leiste mit den drei Punkten ist das
verbindende Element, das Bild darin behaelt sein eigenes Mass.
Mobil ist der Bildbereich waagerecht scrollbar (die Tabelle waere sonst
auf Handybreite nicht mehr lesbar), deshalb traegt er tabindex="0" - er
muss auch per Tastatur scrollbar sein.
========================================================================== */
.proof__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.proof__head h2 {
max-width: none;
margin-inline: auto;
}
/* "Werbeanzeigenmanager" ist ein langes Wort: seit die Headlines 2026-10-26
groesser sind (30 Pixel auf dem Handy), passt es unter rund 390 Pixeln nur
mit etwas kleinerer Schrift in die Zeile, ohne getrennt zu werden. */
@media (max-width: 400px) {
.proof__head h2 { font-size: min(var(--ti-fs-h2), calc((100vw - 3rem) / 11.2)); }
}
.proof__head .section__intro {
margin-inline: auto;
max-width: 56ch;
}
/* minmax(0, 1fr) statt 1fr: sonst wachsen die Rahmen auf die Mindestbreite
ihres Inhalts (46rem) und schieben die ganze Seite waagerecht auf. Scrollen
soll nur .shot__view, nie das Dokument. */
.proof__list {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-7);
}
.shot,
.shot__frame,
.shot__view {
min-width: 0;
}
.shot {
margin: 0;
}
.shot__frame {
background-color: var(--ti-paper);
border: 1px solid var(--ti-line);
border-radius: var(--ti-r-3);
overflow: hidden;
box-shadow:
0 1px 2px rgba(14, 14, 14, 0.04),
0 18px 36px -22px rgba(14, 14, 14, 0.4);
}
/* Fensterleiste: signalisiert "echter Screenshot aus einem Werkzeug" und
faengt die unterschiedlichen Bildhoehen optisch auf. */
.shot__bar {
display: flex;
align-items: center;
gap: var(--ti-s-3);
padding: var(--ti-s-3) var(--ti-s-4);
background-color: var(--ti-n-100);
border-bottom: 1px solid var(--ti-line);
}
.shot__dots {
display: inline-flex;
gap: 6px;
flex: none;
}
.shot__dots i {
width: 8px;
height: 8px;
border-radius: var(--ti-r-1);
background-color: var(--ti-n-300);
}
.shot__chrome {
font-family: var(--ti-label);
font-weight: 500;
font-size: var(--ti-fs-label);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ti-fg-3);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.shot__view {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
}
.shot__view:focus-visible {
outline: 2px solid var(--ti-gold);
outline-offset: -2px;
}
/* Mindestbreite, damit die Tabellen auf dem Handy lesbar bleiben - darunter
wird gescrollt statt geschrumpft. */
.shot__img {
display: block;
width: 100%;
min-width: 46rem;
height: auto;
}
.shot__caption {
margin-top: var(--ti-s-4);
color: var(--ti-fg-2);
font-size: var(--ti-fs-body-s);
text-align: center;
max-width: 62ch;
margin-inline: auto;
}
.proof__hint {
margin-top: var(--ti-s-5);
margin-inline: auto;
color: var(--ti-fg-3);
font-size: var(--ti-fs-body-s);
text-align: center;
max-width: none;
}
.proof__foot {
margin-top: var(--ti-s-7);
display: flex;
justify-content: center;
}
/* ==========================================================================
9c. VERGLEICH (#vergleich)
Zwei Tafeln nebeneinander: links schwarz (wir), rechts hell (die anderen).
Der Kontrast der Flaechen traegt die Aussage, deshalb kommt die rechte
Tafel bewusst zurueckhaltend daher - ohne Rot-Grell und ohne Spott.
Kopf, Tafel-Koepfe und CTA stehen mittig. Die Zeilen selbst bleiben
linksbuendig: mit Icon davor waere zentrierter Text nicht mehr lesbar.
========================================================================== */
.versus__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
/* max-width: none wie bei den Cases - damit die Headline ab Tablet in eine
Zeile passt. Mobil bricht sie am Container. */
.versus__head h2 {
max-width: none;
margin-inline: auto;
}
.versus__head .section__intro {
margin-inline: auto;
}
.versus__grid {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-6);
}
.versus__panel {
position: relative;
padding: var(--ti-s-6) var(--ti-s-5);
border-radius: var(--ti-r-3);
border: 1px solid var(--ti-line);
text-align: center;
}
/* Unsere Tafel ist die laute: schwarzer Grund mit gruenem Schimmer, gruene
Kante, gruener Schein. Dazu eine gruene Oberkante als Signal. */
.versus__panel--us {
background-color: var(--ti-black);
background-image:
radial-gradient(120% 80% at 50% 0%, rgba(47, 143, 95, 0.34), transparent 62%);
border-color: rgba(76, 195, 138, 0.55);
color: var(--ti-paper);
box-shadow:
0 0 0 1px rgba(76, 195, 138, 0.16),
0 22px 48px -26px rgba(31, 107, 71, 0.85);
}
.versus__panel--us::before,
.versus__panel--others::before {
content: "";
position: absolute;
inset: -1px -1px auto;
height: 4px;
border-radius: var(--ti-r-3) var(--ti-r-3) 0 0;
}
.versus__panel--us::before {
background-color: var(--ti-green-fg);
}
/* Die Gegenseite bleibt flach und leise: kein Schein, keine Tiefe, gedaempfte
Schrift. Der Unterschied entsteht aus der Zurueckhaltung, nicht aus Spott. */
.versus__panel--others {
background-color: var(--ti-paper);
border-color: var(--ti-n-200);
box-shadow: none;
}
.versus__panel--others::before {
background-color: var(--ti-n-300);
}
/* Hover nur mit echtem Zeigegeraet: auf dem Handy bliebe der Zustand nach
einem Tap an der Tafel haengen. Beide Tafeln heben sich an, jede aber in
ihrer eigenen Tonlage - unsere legt gruen nach, die Gegenseite bekommt
nur so viel Tiefe, dass die Reaktion spuerbar ist. */
.versus__panel {
transition:
transform var(--ti-dur-slow) var(--ti-ease-standard),
box-shadow var(--ti-dur-slow) var(--ti-ease-standard),
border-color var(--ti-dur-slow) var(--ti-ease-standard);
}
@media (hover: hover) and (pointer: fine) {
.versus__panel--us:hover {
transform: translateY(-6px);
border-color: var(--ti-green-fg);
box-shadow:
0 0 0 1px rgba(76, 195, 138, 0.35),
0 32px 60px -28px rgba(31, 107, 71, 0.95);
}
.versus__panel--us:hover .versus__panel-title {
color: var(--ti-green-fg);
}
.versus__panel--others:hover {
transform: translateY(-4px);
border-color: var(--ti-n-300);
box-shadow: 0 18px 34px -24px rgba(14, 14, 14, 0.45);
}
}
/* Die "vs."-Plakette sitzt zwischen den Tafeln. */
.versus__vs {
justify-self: center;
order: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin-block: calc(-1 * var(--ti-s-3));
font-family: var(--ti-display);
font-weight: 900;
font-size: 1rem;
letter-spacing: -0.01em;
color: var(--ti-paper);
background-color: var(--ti-black);
border-radius: var(--ti-r-3);
box-shadow: 0 8px 20px -12px rgba(14, 14, 14, 0.6);
}
.versus__panel--us { order: 1; }
.versus__panel--others { order: 3; }
.versus__panel-title {
font-family: var(--ti-display);
font-weight: 900;
font-size: var(--ti-fs-h3-display);
line-height: 1.1;
letter-spacing: -0.015em;
margin: 0 0 var(--ti-s-2);
}
.versus__panel--us .versus__panel-title {
color: var(--ti-paper);
}
/* Die Gegenseite steht bewusst leiser - sie ist der Vergleichswert, nicht
das Angebot. */
.versus__panel--others .versus__panel-title {
color: var(--ti-fg-2);
}
.versus__panel-sub {
font-size: var(--ti-fs-body-s);
margin: 0 0 var(--ti-s-5);
max-width: none;
}
.versus__panel--us .versus__panel-sub {
color: rgba(255, 255, 255, 0.7);
}
.versus__panel--others .versus__panel-sub {
color: var(--ti-fg-3);
}
.versus__list {
list-style: none;
margin: 0;
padding: 0;
text-align: left;
}
.versus__row {
display: flex;
align-items: flex-start;
gap: var(--ti-s-4);
padding-block: var(--ti-s-4);
border-top: 1px solid var(--ti-line);
}
.versus__panel--us .versus__row {
border-top-color: rgba(255, 255, 255, 0.12);
}
/* Marker: quadratisch wie das Signatur-Motiv, nicht rund. Gruen steht wie
in den Case-Kacheln fuer "belegt/erreicht", die Gegenseite bleibt neutral
grau statt alarmrot. */
.versus__mark {
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.75rem;
height: 1.75rem;
border-radius: var(--ti-r-2);
margin-top: 0.1rem;
}
/* Gefuellt statt getoent: der Haken ist gruen unterlegt, das Kreuz rot.
Beide Glyphen stehen auf ihrer Flaeche mit ueber 5:1 Kontrast. */
.versus__panel--us .versus__mark {
background-color: var(--ti-green-fg);
color: var(--ti-black);
box-shadow: 0 0 0 4px rgba(76, 195, 138, 0.16);
}
.versus__panel--others .versus__mark {
background-color: var(--ti-danger);
color: var(--ti-paper);
box-shadow: 0 0 0 4px rgba(196, 56, 44, 0.1);
}
.versus__text {
display: block;
}
.versus__label {
display: block;
font-weight: 700;
font-size: var(--ti-fs-body);
margin-bottom: var(--ti-s-1);
}
.versus__panel--others .versus__label {
color: var(--ti-fg-2);
font-weight: 600;
}
.versus__note {
display: block;
font-size: var(--ti-fs-body-s);
}
.versus__panel--us .versus__note {
color: rgba(255, 255, 255, 0.66);
}
.versus__panel--others .versus__note {
color: var(--ti-fg-3);
}
.versus__foot {
margin-top: var(--ti-s-7);
display: flex;
justify-content: center;
}
/* --- Funnel-Strecke: echte Schrittfolge, mobil horizontal scrollbar.
Liegt in derselben Kachel-Optik wie die Referenzen darueber - mit der
frueheren schwarzen Trennlinie haette der Block nach den Kacheln wie ein
Rest ausgesehen. --- */
/* ==========================================================================
4b. FUNNEL-SHOWCASE (eigener, dunkler Abschnitt mit Karussell)
Bewusst schwarz als Abwechslung zum hellen Case-Abschnitt darueber und als
eigenstaendiger Block. Globale Headline + Subheadline (auf Desktop zentriert),
darunter ein full-bleed Karussell: jede Folie ist 100% des Viewports breit
und snappt. Wischen (Touch/Trackpad), Pfeile und Punkte wechseln den Funnel.
Die Nav ist Progressive Enhancement (html.js).
========================================================================== */
.funnels-section {
background-color: var(--ti-black);
color: var(--ti-paper);
overflow: hidden;
}
.funnels__head {
max-width: 60ch;
margin-bottom: var(--ti-s-6);
}
/* Auf Desktop mittig zentriert; mobil linksbuendig (Default). Breit genug,
dass die groessere Headline in eine Zeile passt und die Subheadline (mit
eigener, schmalerer max-width) auf zwei Zeilen umbricht. */
@media (min-width: 1024px) {
.funnels__head {
max-width: 60rem;
margin-inline: auto;
text-align: center;
}
}
.funnels__title {
font-family: var(--ti-display);
font-weight: 900;
/* Groesser als eine Standard-h3, damit die globale Headline heraussticht.
Mobil bleibt sie auf der 26px-Stufe (Mobile Headline-Skala), ab ca.
1200px erreicht sie 2,75rem (44px). */
font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.75rem);
line-height: 1.06;
letter-spacing: -0.02em;
margin: 0 0 var(--ti-s-4);
color: var(--ti-paper);
}
.funnels__lead {
color: rgba(255, 255, 255, 0.78);
margin: 0;
}
/* Auf Desktop die Subheadline auf genau zwei Zeilen begrenzen (mit Montserrat
liegt die 3->2-Zeilen-Schwelle bei ~840px; 56rem/896px haelt sicheren
Abstand dazu). */
@media (min-width: 1024px) {
.funnels__lead {
max-width: 56rem;
margin-inline: auto;
}
}
/* Full-bleed Viewport: horizontales Scroll-Snap, Scrollbar versteckt (die Nav
uebernimmt die Steuerung). Die Folien tragen KEINEN gap - so ist
scrollLeft = index * clientWidth und das JS kann exakt rechnen. */
.funnels__viewport {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
overscroll-behavior-x: contain;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.funnels__viewport::-webkit-scrollbar {
display: none;
}
.fnl {
flex: 0 0 100%;
min-width: 0;
scroll-snap-align: start;
}
.fnl__inner {
max-width: min(100%, 84rem);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2.5rem);
padding-block: var(--ti-s-2);
}
/* Kunde + Branche auf einer Ebene, linksbuendig (auf jeder Breite - Wunsch
fuer mobil und Desktop). Erst der Kundenname, dann die Branche daneben;
sitzt am linken Rand der Folie, leicht links versetzt zur zentrierten
Sektions-Headline. Bricht die Branche bei schmalen Folien um, rutscht sie
linksbuendig unter den Namen. */
.fnl__head {
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: var(--ti-s-3);
row-gap: var(--ti-s-1);
text-align: left;
margin-bottom: var(--ti-s-5);
}
.fnl__client {
font-family: var(--ti-display);
font-weight: 900;
font-size: var(--ti-fs-h3-display);
line-height: 1.1;
letter-spacing: -0.01em;
color: var(--ti-paper);
margin: 0;
}
.fnl__branch {
font-family: var(--ti-label);
font-weight: 600;
font-size: var(--ti-fs-body-l);
letter-spacing: 0.02em;
color: var(--ti-gold);
margin: 0;
}
/* Alle fuenf Screenshots einer Folie in einer Reihe. Bewusst auch mobil
5-spaltig (die Folie zeigt den ganzen Funnel auf einen Blick, gewischt wird
zum naechsten Kunden - nicht innerhalb der Folie). */
.fnl__strip {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(0.35rem, 1.4vw, 1rem);
align-items: start;
}
/* Geraeterahmen. Bewusste Ausnahme von der Marken-Regel "max 8px Radius":
hier ist die Rundung kein UI-Element, sondern die Kontur eines Handys -
mit 8px wirkten die Kacheln wie Karten, nicht wie Screenshots.
Der Rahmen laeuft ueber vw-clamps mit, weil dieselbe Reihe von rund
62px (Handy, 5 Spalten) bis rund 230px (Desktop) breit wird. Auf dem
schwarzen Abschnitt traegt eine helle Haarlinie die Kontur, nicht die
Flaeche - ein schwarzer Rahmen auf Schwarz waere unsichtbar. */
.fnl__phone {
margin: 0;
min-width: 0;
padding: clamp(3px, 0.85vw, 11px);
background:
linear-gradient(155deg, #4a4a52 0%, #2a2a30 38%, #1d1d21 100%);
border: 1px solid rgba(255, 255, 255, 0.26);
border-radius: clamp(10px, 2.7vw, 32px);
box-shadow:
0 22px 40px -22px rgba(0, 0, 0, 0.95),
inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fnl__phone img {
display: block;
width: 100%;
height: auto;
border: 0;
/* Immer eine Spur enger als der Rahmen, sonst steht in den Ecken ein
heller Zwickel zwischen Bild und Kante. */
border-radius: clamp(7px, 1.9vw, 22px);
background-color: var(--ti-paper);
}
/* --- Steuerung (Pfeile + Punkte). Nur mit JS sichtbar. --- */
.funnels__nav {
display: none;
align-items: center;
justify-content: center;
gap: var(--ti-s-4);
margin-top: var(--ti-s-5);
}
html.js .funnels__nav {
display: flex;
}
.funnels__arrow {
width: 2.75rem;
height: 2.75rem;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.06);
color: var(--ti-paper);
font-size: 1.1rem;
line-height: 1;
cursor: pointer;
transition:
background-color var(--ti-dur-base) var(--ti-ease-standard),
border-color var(--ti-dur-base) var(--ti-ease-standard),
color var(--ti-dur-base) var(--ti-ease-standard);
}
.funnels__arrow:hover:not(:disabled),
.funnels__arrow:focus-visible:not(:disabled) {
border-color: var(--ti-gold);
color: var(--ti-gold);
background-color: rgba(255, 255, 255, 0.1);
}
.funnels__arrow:disabled {
opacity: 0.3;
cursor: default;
}
/* Kein gap: die Buttons sind 44px breit (Trefferflaeche), der optische
Abstand entsteht aus der Differenz zum 0,6rem-Quadrat darin. Ein zusaetz-
licher gap wuerde die Punktreihe auseinanderziehen; ein negativer Rand
wuerde die Trefferflaechen ueberlappen lassen. */
.funnels__dots {
display: inline-flex;
gap: 0;
}
/* Marken-Quadrat als Punkt. Sichtbar bleiben es 0,6rem - die Trefferflaeche
ist aber 44x44px (WCAG 2.5.8): der Button traegt die Groesse, das Quadrat
zeichnet ::before. Ohne das waere der einzige Hinweis darauf, dass es drei
Referenz-Funnel gibt, auf dem Handy kaum treffbar. */
.funnels__dot {
position: relative;
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
.funnels__dot::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0.6rem;
height: 0.6rem;
border-radius: 1px;
background-color: rgba(255, 255, 255, 0.28);
transform: translate(-50%, -50%);
transition:
background-color var(--ti-dur-base) var(--ti-ease-standard),
transform var(--ti-dur-base) var(--ti-ease-standard);
}
.funnels__dot.is-active::before {
background-color: var(--ti-gold);
transform: translate(-50%, -50%) scale(1.2);
}
/* --- FAQ-Accordion (nativ via details/summary, ohne JS bedienbar) --- */
/* Kopf und Spalte stehen mittig (Kundenwunsch August 2026). Die Fragen
selbst bleiben linksbuendig: eine Zeile mit Text links und Aufklapp-Zeichen
rechts kippt zentriert sofort aus der Achse, und zwoelf verschieden lange
zentrierte Fragen haetten zwoelf verschiedene Anfangskanten - nichts, woran
das Auge beim Ueberfliegen entlanglaeuft. Zentriert wird der Block, nicht
der Inhalt. */
.faq__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.faq__head h2 {
max-width: none;
margin-inline: auto;
}
.faq__head .section__intro {
max-width: 52ch;
margin-inline: auto;
}
.faq {
display: grid;
gap: var(--ti-s-4);
max-width: 800px;
margin-inline: auto;
}
.faq__item {
background-color: var(--ti-paper);
border: 1px solid var(--ti-line);
border-radius: var(--ti-r-2);
overflow: hidden;
}
.faq__question {
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ti-s-5);
padding: var(--ti-s-5) var(--ti-s-6);
font-family: var(--ti-sans);
font-weight: 700;
font-size: var(--ti-fs-body-l);
color: var(--ti-fg);
}
.faq__question::-webkit-details-marker {
display: none;
}
/* Rotierender +/- Indikator: zwei Balken, der vertikale rotiert bei
[open] um 90 Grad auf den horizontalen - visuell "+" -> "-". */
.faq__icon {
position: relative;
flex: 0 0 auto;
width: 1rem;
height: 1rem;
}
.faq__icon::before,
.faq__icon::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
background-color: var(--ti-gold);
}
.faq__icon::before {
width: 100%;
height: 2px;
transform: translate(-50%, -50%);
}
.faq__icon::after {
width: 2px;
height: 100%;
transform: translate(-50%, -50%);
transition: transform var(--ti-dur-base) var(--ti-ease-standard);
}
.faq__item[open] .faq__icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
/* Oeffnen-Animation rein per CSS (grid-template-rows 0fr -> 1fr), damit sie
auch ohne JS funktioniert. Das author-CSS "display:grid" ueberschreibt
die UA-Regel "details:not([open]) > *:not(summary){display:none}". */
.faq__answer {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows var(--ti-dur-slow) var(--ti-ease-standard);
}
.faq__item[open] .faq__answer {
grid-template-rows: 1fr;
}
.faq__answer-inner {
overflow: hidden;
min-height: 0;
}
.faq__answer-inner p {
padding: var(--ti-s-1) var(--ti-s-6) var(--ti-s-5);
color: var(--ti-fg-2);
margin: 0;
}
/* CTA am Ende einer Antwort. Der Innenabstand der Antwort haengt am ,
nicht am Container - deshalb sitzt der Knopf ebenfalls in einem
und
erbt ihn. Nur das obere Polster faellt weg: den Abstand zum Text traegt
schon dessen padding-bottom. */
.faq__cta {
padding-top: 0;
}
/* --- Abschluss-CTA --- */
/* --- Abschluss-CTA: Checkliste links, Termin-Panel rechts.
Uebernimmt den Aufbau der frueheren Angebot-Sektion, aber auf Schwarz -
der Abschluss bleibt damit die Klammer zum Hero. Kopf mittig, die
Checkliste und das Panel linksbuendig (mit Haken davor waere zentrierter
Text unlesbar). --- */
.final-cta {
position: relative;
background-color: var(--ti-black);
color: var(--ti-paper);
}
.final-cta__head {
max-width: none;
margin-inline: auto;
text-align: center;
}
.final-cta__title {
max-width: none;
margin-inline: auto;
color: var(--ti-paper);
}
.final-cta__intro {
color: rgba(255, 255, 255, 0.75);
max-width: 60ch;
margin: 0 auto;
}
.final-cta__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ti-s-6);
align-items: start;
}
.final-cta__eyebrow {
font-family: var(--ti-label);
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
font-size: var(--ti-fs-label);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--ti-s-5);
}
.final-cta__checklist li {
position: relative;
padding-left: var(--ti-s-6);
margin-bottom: var(--ti-s-4);
color: rgba(255, 255, 255, 0.82);
font-size: var(--ti-fs-body-l);
}
.final-cta__checklist li:last-child {
margin-bottom: 0;
}
/* Gold als Haken auf Schwarz ist unkritisch - die AA-Ausnahme gegen
Gold-Text gilt nur auf hellem Grund. */
.final-cta__checklist li::before {
content: "\2713";
position: absolute;
left: 0;
top: 0;
font-weight: 700;
color: var(--ti-gold);
}
.final-cta__panel {
background-color: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: var(--ti-r-3);
padding: var(--ti-s-6) var(--ti-s-5);
}
.final-cta__panel-meta {
display: block;
font-family: var(--ti-label);
font-weight: 600;
letter-spacing: 0.2em;
text-transform: uppercase;
font-size: var(--ti-fs-label);
color: rgba(255, 255, 255, 0.6);
margin-bottom: var(--ti-s-3);
}
.final-cta__panel-title {
color: var(--ti-paper);
margin-bottom: var(--ti-s-3);
}
.final-cta__panel-text {
color: rgba(255, 255, 255, 0.75);
margin-bottom: var(--ti-s-6);
}
.final-cta__btn {
width: 100%;
}
/* Die Bewertung sitzt direkt unter dem Button und traegt dort denselben
dunklen Chrome wie im Hero. */
.final-cta__panel .rating {
margin-top: var(--ti-s-5);
}
/* Seit 2026-09-30 steht hier der Kontakt-Funnel (Astro-Komponente
`ui/KontaktFunnel`, bringt Flaeche und Rahmen selbst mit) statt des Panels. */
.final-cta__funnel {
min-width: 0;
}
/* ==========================================================================
10. FOOTER
Schwarzer Grund, weisse Wortmarke, Abschluss-Panel im Brand-Ton,
Kontakt-/Rechtliches-Spalten, Copyright-Zeile.
========================================================================== */
.site-footer {
background-color: var(--ti-black);
color: var(--ti-paper);
padding-block: var(--ti-s-9) var(--ti-s-6);
/* Duenne Trennkante zum ebenfalls schwarzen Abschluss-CTA (Sektion 9):
macht die schwarze Klammer Hero...Abschluss-CTA/Footer als bewusste
Komposition lesbar statt als zusammengelaufene Flaeche. */
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--ti-s-8);
}
.site-footer__brand {
display: flex;
flex-direction: column;
gap: var(--ti-s-3);
}
.site-footer__logo {
display: inline-flex;
align-items: center;
margin: 0;
}
.site-footer__logo img {
height: 2.25rem;
width: auto;
}
.site-footer__logo-word {
font-family: var(--ti-display);
font-weight: 900;
font-size: 1.35rem;
letter-spacing: -0.01em;
color: var(--ti-paper);
line-height: 1;
}
.site-footer__logo-sub {
font-family: var(--ti-label);
font-weight: 500;
font-size: 0.6875rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
}
.site-footer__tagline {
color: rgba(255, 255, 255, 0.68);
font-size: var(--ti-fs-body-s);
max-width: 42ch;
margin: 0;
}
.site-footer__heading {
font-family: var(--ti-label);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.3em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.55);
margin: 0 0 var(--ti-s-3);
}
.site-footer__address {
font-style: normal;
color: rgba(255, 255, 255, 0.78);
font-size: var(--ti-fs-body-s);
}
.site-footer__address p {
margin: 0 0 var(--ti-s-2);
max-width: none;
}
.site-footer__address p:last-child {
margin-bottom: 0;
}
/* Die Kontakt- und Rechtslinks standen bei 16px Hoehe deutlich unter der
44px-Mindestgroesse (WCAG 2.5.8). Telefonnummer und E-Mail sind auf dem
Handy ein direkter Conversion-Pfad. padding-block statt Schriftgroesse:
die Zeilen behalten ihre Position, nur die Flaeche waechst. */
.site-footer__address a,
.site-footer__social a,
.site-footer__legal-list a {
display: inline-block;
padding-block: var(--ti-s-3);
}
.site-footer__address a {
color: rgba(255, 255, 255, 0.78);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.3);
}
.site-footer__address a:hover,
.site-footer__address a:focus-visible {
color: var(--ti-gold);
text-decoration-color: var(--ti-gold);
}
.site-footer__social {
display: flex;
flex-wrap: wrap;
gap: var(--ti-s-4);
margin-top: var(--ti-s-4);
}
.site-footer__social a {
color: rgba(255, 255, 255, 0.78);
font-size: var(--ti-fs-body-s);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(255, 255, 255, 0.3);
}
.site-footer__social a:hover,
.site-footer__social a:focus-visible {
color: var(--ti-gold);
text-decoration-color: var(--ti-gold);
}
.site-footer__legal-list {
display: flex;
flex-direction: column;
gap: var(--ti-s-2);
}
.site-footer__legal-list a {
color: rgba(255, 255, 255, 0.78);
font-size: var(--ti-fs-body-s);
}
.site-footer__legal-list a:hover,
.site-footer__legal-list a:focus-visible {
color: var(--ti-gold);
text-decoration: underline;
text-underline-offset: 3px;
}
.site-footer__bottom {
margin-top: var(--ti-s-8);
padding-top: var(--ti-s-5);
border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.site-footer__copyright {
color: rgba(255, 255, 255, 0.55);
font-size: var(--ti-fs-caption);
margin: 0;
}
/* ==========================================================================
11. REVEAL-ANIMATIONEN (Progressive Enhancement)
Startzustand nur setzen, wenn JS aktiv ist (html.js). Ohne JS bleibt
alles sofort sichtbar. js/main.js schaltet zusaetzlich einen Sicherheits-
Fallback (Timeout), falls der IntersectionObserver nie feuert.
========================================================================== */
html.js .reveal {
opacity: 0;
transform: translateY(16px);
transition:
opacity 500ms var(--ti-ease-standard),
transform 500ms var(--ti-ease-standard);
will-change: opacity, transform;
}
html.js .reveal.is-visible {
opacity: 1;
transform: none;
}
/* ==========================================================================
12. BREAKPOINTS (min-width, mobil-zuerst)
========================================================================== */
/* --- >= 480px: kleine Phones quer / grosse Phones --- */
@media (min-width: 480px) {
.hero__cta {
width: auto;
}
.hero__actions {
flex-direction: row;
align-items: center;
}
}
/* --- >= 768px: Tablets --- */
@media (min-width: 768px) {
/* Ab Tablet ist Platz fuer die Kennzahl-Notiz unter dem Label. */
.hero__stat-note {
display: block;
}
/* Groessere Logos und mehr Luft dazwischen; Dauer haelt das Tempo bei
rund 49px/s (2880px Gruppenbreite / 58s). */
.hero__logos {
--reel-speed-1: 58s;
--reel-speed-2: 58s;
--logo-w: 11rem;
--logo-gap: 4rem;
}
.hero__stat {
padding: var(--ti-s-5) var(--ti-s-4) 0 0;
}
.hero__stat + .hero__stat {
padding-left: var(--ti-s-4);
}
/* Ab hier passen die Tabellen in die Breite - der Scroll-Hinweis
verschwindet, weil nichts mehr zu scrollen ist. */
.shot__img {
min-width: 0;
}
.proof__hint {
display: none;
}
/* Mehr Platz -> groessere Kacheln und etwas mehr Luft dazwischen. Die
Laufgeschwindigkeit bleibt gleich, die Baender wirken dadurch ruhiger. */
.portfolio {
--reel-h: 17rem;
--reel-gap: var(--ti-s-4);
/* Gruppenbreite = Hoehe * Summe der Seitenverhaeltnisse + Abstaende,
nicht mehr Kachelzahl * feste Breite: die Kacheln sind unterschiedlich
breit. 272px * 25.2 + 29 * 16 = 7318px / 146.5s = 50px/s, dasselbe
Tempo wie mobil. tools/creatives-import.sh rechnet den Wert nach jedem
Lauf aus. */
--reel-speed-1: 146.5s;
--reel-speed-2: 36s;
}
.reel__placeholder-label {
font-size: var(--ti-fs-label);
letter-spacing: 0.2em;
}
/* Ohne diese Zeile begrenzt .section__head den Kopf auf 65ch der
Fliesstext-Schrift - die zweizeilige Headline braucht hier mehr. */
.portfolio__head {
max-width: none;
}
body {
font-size: 1.0625rem;
}
/* Ab Tablet ist Platz fuer das lange Label und die normale Button-Groesse. */
.site-header__cta {
padding: var(--ti-s-3) var(--ti-s-5);
/* Eine Stufe unter dem Standard-Button und enger gesperrt: der
Header-CTA soll den Weg zeigen, nicht mit dem Hero-CTA um
Aufmerksamkeit konkurrieren. Stand hier bis September 2026 auf
0.8125rem/0.22em - letzteres noch aus der Zeit der schmalen
Schrift. */
font-size: 0.75rem;
--btn-track: 0.10em;
}
.site-header__cta-short {
display: none;
}
.site-header__cta-long {
display: inline;
}
/* Vier Spalten nebeneinander: die waagerechte Trennlinie entfaellt, die
senkrechte steht vor jeder Spalte ausser der ersten. */
.stat-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
margin-bottom: var(--ti-s-8);
}
.stat-grid:last-child {
margin-bottom: 0;
}
.stat {
padding: var(--ti-s-6) var(--ti-s-5) var(--ti-s-6) 0;
border-bottom: 0;
}
.stat:nth-child(-n + 2) {
border-bottom: 0;
}
.stat:not(:first-child) {
padding-left: var(--ti-s-5);
padding-right: var(--ti-s-5);
border-left: 1px solid var(--ti-line);
}
.stat:last-child {
padding-right: 0;
}
.quote-grid {
grid-template-columns: repeat(2, 1fr);
}
/* Mittig statt oben ausgerichtet: die Checkliste ist deutlich kuerzer als
das Panel, oben angeschlagen bliebe links eine grosse Leerflaeche. */
.final-cta__grid {
grid-template-columns: 1fr 1fr;
gap: var(--ti-s-7);
align-items: center;
}
/* Termin-Panel links, Checkliste rechts. Die Lesereihenfolge im Markup
bleibt Checkliste -> Panel (erst was dich erwartet, dann der Termin),
getauscht wird nur die Darstellung ab zwei Spalten. Mobil stapelt es
unveraendert in Markup-Reihenfolge. */
.final-cta__col {
order: 2;
}
.final-cta__panel,
.final-cta__funnel {
order: 1;
}
.final-cta__panel {
padding: var(--ti-s-7) var(--ti-s-6);
}
/* Zwei Tafeln nebeneinander. Anders als bei #vergleich reicht dafuer schon
das Tablet-Mass: die Zeilen sind kurze Saetze ohne Zusatzzeile. */
/* Kein align-items: start - die beiden Tafeln sollen gleich hoch
abschliessen, sonst wirkt die kuerzere Seite abgeschnitten. */
.fit__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__inner {
grid-template-columns: 2fr 1fr 1fr;
gap: var(--ti-s-6);
}
.site-footer__bottom {
grid-column: 1 / -1;
}
}
/* --- >= 1024px: kleiner Desktop --- */
@media (min-width: 1024px) {
.hero {
padding-block: clamp(4rem, 7vw, 6.5rem) 0;
/* Ab hier bestimmt das Raster die Breite, nicht mehr die 44rem-Kante. */
--hero-media-w: 100%;
}
/* Fenster links, Pitch rechts daneben. Das Fenster bekommt die groessere
Spalte - es ist das Element, das oben stehen soll. */
.hero__main {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
gap: clamp(2rem, 4vw, 3.5rem);
align-items: center;
margin-bottom: var(--ti-s-8);
}
.hero__pitch {
gap: var(--ti-s-6);
}
/* Auf Desktop steht der Pitch wieder in Lesereihenfolge: Text, CTA,
Bewertung. Nur mobil wird der CTA nach oben gezogen. */
.hero__pitch > .hero__subtitle { order: 1; }
.hero__pitch > .hero__actions { order: 2; }
.hero__pitch > .rating { order: 3; }
/* Bewusst kleiner als das Token-Maximum (6rem): oberhalb von rund 72px
schiebt die dreizeilige Headline das VSL-Fenster auf 800px hohen
Notebooks unter die Falz. Ohne Fenster stand hier zwischen August und
September 2026 clamp(3.5rem, 6.1vw, 6rem) - mit dem Fenster ist dieser
Platz nicht mehr frei. Die Headline bleibt trotzdem die groesste Type
der Seite. */
.hero__title {
max-width: 17ch;
margin-bottom: var(--ti-s-6);
}
.stat-grid {
grid-template-columns: repeat(3, 1fr);
}
.stat-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.cases__list {
gap: var(--ti-s-9);
}
/* Ab hier laufen die vier Schritte waagerecht: die Linie liegt hinter den
Nummern und wird von links nach rechts gezeichnet. Sie beginnt und endet
in der Mitte der aeusseren Nummern, deshalb die 12,5%-Einzuege (vier
gleich breite Spalten). */
.steps-wrap {
max-width: none;
}
.steps {
flex-direction: row;
/* stretch statt flex-start: zusammen mit flex:1 an der Karte stehen die
vier Karten dadurch gleich hoch, egal wie lang ihr Text ist. */
align-items: stretch;
gap: var(--ti-s-5);
}
.steps__item {
flex: 1 1 0;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--ti-s-5);
}
.steps__line {
left: 12.5%;
right: 12.5%;
top: 1.625rem;
bottom: auto;
width: auto;
height: 2px;
}
.steps__line-fill {
transform: scaleX(var(--steps-progress, 1));
transform-origin: left;
}
.steps__body {
width: 100%;
flex: 1 1 auto;
}
.steps__text {
max-width: 34ch;
margin-inline: auto;
}
/* Die drei Gruende erst hier nebeneinander: auf dem Tablet waeren die
Karten rund 220px breit, die "X statt Y"-Headline liefe darin ueber
fuenf Zeilen. */
.reasons {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ti-s-6);
}
.reason {
padding: var(--ti-s-7) var(--ti-s-6);
}
.fit__panel {
padding: var(--ti-s-7) var(--ti-s-6);
}
/* Team: Bild und Text nebeneinander. Die Bildspalte steht auf `auto` und
nimmt genau die Breite an, die sich aus --team-h und dem
Seitenverhaeltnis ergibt - dadurch sind beide Fotos gleich hoch und
trotzdem jeweils im richtigen Format. Die untere Zeile dreht per
`order` die Seiten; im Markup steht das Bild weiter vorn, damit es
mobil zuerst kommt. */
.team__rows {
gap: var(--ti-s-9);
}
.team__row {
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.team__photo {
--team-h: clamp(17rem, 26vw, 25rem);
height: var(--team-h);
width: auto;
}
.team__row--crew {
grid-template-columns: minmax(0, 1fr) auto;
}
.team__row--crew .team__photo { order: 2; }
.team__row--crew .team__body { order: 1; }
/* Die drei Gruende erst hier nebeneinander: auf dem Tablet waeren die
Karten rund 220px breit, die "X statt Y"-Headline liefe darin ueber
fuenf Zeilen. */
.reasons {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--ti-s-6);
}
.reason {
padding: var(--ti-s-7) var(--ti-s-6);
}
.fit__panel {
padding: var(--ti-s-7) var(--ti-s-6);
}
/* Team: Bild und Text nebeneinander. Die Bildspalte steht auf `auto` und
nimmt genau die Breite an, die sich aus --team-h und dem
Seitenverhaeltnis ergibt - dadurch sind beide Fotos gleich hoch und
trotzdem jeweils im richtigen Format. Die untere Zeile dreht per
`order` die Seiten; im Markup steht das Bild weiter vorn, damit es
mobil zuerst kommt. */
.team__rows {
gap: var(--ti-s-9);
}
.team__row {
grid-template-columns: auto minmax(0, 1fr);
column-gap: clamp(2.5rem, 5vw, 4.5rem);
}
.team__photo {
--team-h: clamp(17rem, 26vw, 25rem);
height: var(--team-h);
width: auto;
}
.team__row--crew {
grid-template-columns: minmax(0, 1fr) auto;
}
.team__row--crew .team__photo { order: 2; }
.team__row--crew .team__body { order: 1; }
/* Erst ab hier nebeneinander: darunter waeren die Zeilen zu schmal und
die Paare stuenden ohnehin untereinander. */
.versus__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--ti-s-6);
align-items: start;
}
.versus__panel {
padding: var(--ti-s-7) var(--ti-s-6);
}
/* Unsere Tafel steht eine Spur hoeher und traegt mehr Luft - dieselbe
Hierarchie wie bei einem hervorgehobenen Tarif. */
.versus__panel--us {
margin-top: calc(-1 * var(--ti-s-4));
padding-bottom: calc(var(--ti-s-7) + var(--ti-s-4));
}
/* Aus dem Fluss genommen und genau in die Fuge gesetzt. */
.versus__vs {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-block: 0;
z-index: 1;
border: 2px solid var(--ti-bg-alt);
}
}
/* --- >= 1280px: grosser Desktop ---
(Die Hero-Headline steht bereits ab 1024px auf 17ch, siehe oben.) */
/* ==========================================================================
12b. TAP-TARGETS AUF TOUCH-GERAETEN
Textlinks sind nur so hoch wie ihre Zeile (~18px). Auf dem Handy ist das
zu klein - WCAG 2.2 (2.5.8) verlangt mindestens 24x24 CSS-Pixel, die
Plattform-Guidelines von Apple und Google empfehlen 44px. Greift per
(pointer: coarse) nur dort, wo mit dem Finger bedient wird.
========================================================================== */
@media (pointer: coarse) {
.site-footer__address a,
.site-footer__social a,
.site-footer__legal-list a,
.site-header__logo {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* Die Eltern muessen die neue Hoehe uebernehmen: ein inline-flex-Link
mit min-height ragt sonst aus der Zeilenbox seines
- /
heraus und
hinterlaesst darunter unerklaerlichen Leerraum. */
.site-footer__address p,
.site-footer__social li,
.site-footer__legal-list li {
display: flex;
}
/* Die Links bringen ihre Hoehe jetzt selbst mit - die zusaetzlichen
Abstaende der Container wuerden den Footer sonst auseinanderziehen. */
.site-footer__address p {
margin-bottom: 0;
}
.site-footer__legal-list,
.site-footer__social {
gap: 0;
}
}
/* ==========================================================================
13. prefers-reduced-motion
Bewegungen/Transitions praktisch abschalten, Reveal- und Hero-Elemente
sofort sichtbar. Smooth-Scroll deaktivieren. Parallax wird zusaetzlich in
js/main.js per matchMedia-Guard gar nicht erst gestartet.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
/* Animationen (Marquee, Puls, Hero-Stagger, Parallax) sind hier die
eigentlichen Ausloeser und werden abgeschaltet.
Transitions werden NICHT abgeschaltet, sondern auf 120ms verkuerzt:
"reduzierte Bewegung" heisst nicht "keine Rueckmeldung". Ein globales
0.001ms nimmt auch den Hover-Zustand der Buttons, das Aufklappen des
FAQ-Accordions und den Wechsel der Umschalter in #loesung mit - der
Nutzer verliert damit die Bestaetigung, dass seine Eingabe angekommen
ist. Was bleibt, sind Farb- und Deckkraftwechsel; die Wege durch den
Raum nimmt der Block darunter einzeln heraus. */
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 120ms !important;
scroll-behavior: auto !important;
}
/* Kein Element bewegt sich beim Hover/Fokus - die Zustaende bleiben
ueber Farbe, Kante und Schatten trotzdem ablesbar. */
.btn--cta:focus-visible,
.btn--cta:hover,
.reason:hover .reason__icon,
.case__shot:hover img,
.case__shot--video:hover .case__video-frame,
.versus__panel--us:hover,
.versus__panel--others:hover {
transform: none;
}
/* Der aktive Punkt behaelt seine Zentrierung, verliert nur die
Vergroesserung - sonst springt er aus der Reihe. */
.funnels__dot.is-active::before {
transform: translate(-50%, -50%);
}
html.js .reveal {
opacity: 1;
transform: none;
}
html.js .hero--animate-in .hero__word,
html.js .hero--animate-in.hero--animated .hero__word {
opacity: 1;
transform: none;
}
.scroll-progress__fill {
transition: none;
}
.hero__flag,
.hero__dots {
transform: none !important;
}
/* Die Baender stehen still. Die globale Regel oben wuerde die Animation
sonst in 0.001ms bis zum Endzustand durchlaufen lassen - das Band waere
um -50% verschoben. Stattdessen: Track zurueck auf 0, Kopie raus (sonst
stuenden alle Kacheln doppelt im Scrollbereich) und die Zeile von Hand
scrollbar machen, damit alle Kacheln erreichbar bleiben. */
.marquee {
overflow-x: auto;
-webkit-mask-image: none;
mask-image: none;
}
.marquee__track {
animation: none !important;
transform: none !important;
}
.marquee__group[aria-hidden="true"] {
display: none;
}
/* Die Linie steht sofort voll gezeichnet, die Nummern im Endzustand -
js/main.js startet die Scroll-Animation hier gar nicht erst. */
.steps-wrap {
--steps-progress: 1;
}
.steps__num,
.steps__line-fill {
transition: none;
}
.reel__img,
.reel__placeholder {
transition: none;
}
.reel:hover .reel__img,
.reel:hover .reel__placeholder {
transform: none;
}
}
/* ==========================================================================
14. EINWILLIGUNG (Banner + Einstellungen)
Das Markup baut js/consent.js, deshalb steht hier nur die Optik. Die
Flaeche ist schwarz wie Hero, Funnel und Footer - der Banner soll als
Teil der Marke lesbar sein und nicht als fremdes Plugin.
Zwei Regeln, die nicht Kosmetik sind:
- "Ablehnen" und "Akzeptieren" liegen nebeneinander, beide 44px hoch,
beide mit einem Klick erreichbar. Ein grauer, kleiner Ablehnen-Link
neben einem fetten Gold-Button waere keine freie Einwilligung.
- Der Banner sitzt unten und ist KEIN Overlay ueber der ganzen Seite:
die Seite bleibt lesbar und bedienbar, solange nicht entschieden ist.
Nur die Einstellungen legen sich als Dialog darueber.
========================================================================== */
.ti-cc {
/* Der Container selbst faengt keine Klicks ab - sonst laege eine
unsichtbare Flaeche ueber der ganzen Seite. */
pointer-events: none;
}
.ti-cc__banner,
.ti-cc__backdrop {
pointer-events: auto;
}
/* ---------- Banner ---------- */
.ti-cc__banner {
position: fixed;
inset: auto 0 0 0;
z-index: var(--z-consent);
display: none;
background: var(--ti-black);
border-top: 2px solid var(--ti-gold);
box-shadow: 0 -12px 32px rgba(14, 14, 14, .28);
color: var(--ti-paper);
padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
}
.ti-cc__banner.is-open {
display: block;
}
.ti-cc__inner {
width: min(72rem, 100%);
margin-inline: auto;
display: grid;
gap: 1rem;
}
.ti-cc__eyebrow {
font-family: var(--ti-label);
font-size: var(--ti-fs-label);
letter-spacing: .18em;
text-transform: uppercase;
color: var(--ti-gold);
margin: 0 0 .35rem;
}
.ti-cc__copy {
font-size: var(--ti-fs-body-s);
line-height: 1.6;
color: rgba(255, 255, 255, .82);
margin: 0;
max-width: 62ch;
}
.ti-cc__copy a,
.ti-cc__foot a {
color: var(--ti-paper);
text-decoration: underline;
text-underline-offset: .18em;
}
.ti-cc__actions {
display: flex;
flex-wrap: wrap;
gap: .625rem;
}
/* ---------- Buttons ----------
Bewusst nicht .btn: der Marken-Button traegt Quadrat-Punkt, Sperrung
und Gold-Glow. Drei davon nebeneinander in einer Leiste waeren lauter
als die Seite dahinter. Gleiche Hoehe (44px Trefferflaeche), gleiche
Schrift, nur die Fuellung unterscheidet Zustimmen von Ablehnen. */
.ti-cc__btn {
flex: 1 1 auto;
min-height: 44px;
padding: .625rem 1.1rem;
border-radius: var(--ti-r-1);
border: 1px solid rgba(255, 255, 255, .28);
background: transparent;
color: var(--ti-paper);
font-family: var(--ti-sans);
font-size: var(--ti-fs-body-s);
font-weight: 600;
cursor: pointer;
transition:
background-color var(--ti-dur-base) var(--ti-ease-standard),
border-color var(--ti-dur-base) var(--ti-ease-standard),
color var(--ti-dur-base) var(--ti-ease-standard);
}
.ti-cc__btn--primary {
background: var(--ti-gold);
border-color: var(--ti-gold);
color: var(--ti-black);
}
@media (hover: hover) and (pointer: fine) {
.ti-cc__btn--ghost:hover {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .5);
}
.ti-cc__btn--primary:hover {
background: #E8A945;
border-color: #E8A945;
}
}
.ti-cc__btn:focus-visible {
outline: 2px solid var(--ti-gold);
outline-offset: 2px;
}
/* ---------- Einstellungen (Dialog) ---------- */
.ti-cc__backdrop {
position: fixed;
inset: 0;
z-index: var(--z-consent-modal);
display: none;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(14, 14, 14, .72);
overflow-y: auto;
}
.ti-cc__backdrop.is-open {
display: flex;
}
.ti-cc__modal {
width: min(34rem, 100%);
background: var(--ti-black);
border: 1px solid rgba(255, 255, 255, .16);
border-top: 2px solid var(--ti-gold);
border-radius: var(--ti-r-3);
color: var(--ti-paper);
padding: 1.5rem;
margin-block: auto;
}
.ti-cc__title {
font-family: var(--ti-display);
font-size: var(--ti-fs-h3);
font-weight: 800;
line-height: 1.15;
color: var(--ti-paper);
margin: 0 0 1.25rem;
}
.ti-cc__cat {
border-top: 1px solid rgba(255, 255, 255, .14);
padding-block: 1rem;
}
.ti-cc__cat-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: .4rem;
}
.ti-cc__cat-name {
font-family: var(--ti-display);
font-size: var(--ti-fs-body-l);
font-weight: 700;
}
.ti-cc__cat-fixed {
font-family: var(--ti-label);
font-size: var(--ti-fs-label);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--ti-gold);
}
.ti-cc__cat-desc {
font-size: var(--ti-fs-body-s);
line-height: 1.6;
color: rgba(255, 255, 255, .72);
margin: 0;
max-width: none;
}
/* ---------- Schalter ----------
Das Kaestchen liegt sichtbar unter dem Regler statt display:none - so
bleibt es fuer Tastatur und Screenreader ein echtes Kaestchen, und der
Fokusring haengt am Regler. */
.ti-cc__switch {
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
cursor: pointer;
}
.ti-cc__switch input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.ti-cc__slider {
width: 3rem;
height: 1.625rem;
border-radius: var(--ti-r-pill);
background: rgba(255, 255, 255, .2);
border: 1px solid rgba(255, 255, 255, .28);
position: relative;
transition: background-color var(--ti-dur-base) var(--ti-ease-standard);
}
.ti-cc__slider::after {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 1.125rem;
height: 1.125rem;
border-radius: 50%;
background: var(--ti-paper);
transform: translateY(-50%);
transition: transform var(--ti-dur-base) var(--ti-ease-standard);
}
.ti-cc__switch input:checked + .ti-cc__slider {
background: var(--ti-gold);
border-color: var(--ti-gold);
}
.ti-cc__switch input:checked + .ti-cc__slider::after {
transform: translate(1.3125rem, -50%);
}
.ti-cc__switch input:focus-visible + .ti-cc__slider {
outline: 2px solid var(--ti-gold);
outline-offset: 2px;
}
/* Beschriftung nur fuer Screenreader - sichtbar steht der Name daneben. */
.ti-cc__sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.ti-cc__modal-actions {
display: flex;
flex-wrap: wrap;
gap: .625rem;
border-top: 1px solid rgba(255, 255, 255, .14);
padding-top: 1.25rem;
}
.ti-cc__foot {
font-size: var(--ti-fs-body-s);
color: rgba(255, 255, 255, .6);
margin: 1rem 0 0;
text-align: center;
}
/* Ab Tablet steht der Text links und die Buttons rechts daneben: der
Banner belegt dann eine statt drei Zeilen. */
@media (min-width: 768px) {
.ti-cc__banner {
padding-inline: 1.5rem;
}
.ti-cc__inner {
grid-template-columns: 1fr auto;
align-items: center;
gap: 1.75rem;
}
.ti-cc__actions {
flex-wrap: nowrap;
}
.ti-cc__btn {
flex: 0 0 auto;
}
}
@media (prefers-reduced-motion: reduce) {
.ti-cc__btn,
.ti-cc__slider,
.ti-cc__slider::after {
transition-duration: var(--ti-dur-fast);
}
}