/ 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;
}
.floating-cta {
transition: 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.
Auf dem Handy steht der Banner ueber dem Floating-CTA (z-index) und
schiebt ihn nicht weg - der CTA ist hinter der abgedunkelten Flaeche
ohnehin zweitrangig, solange die Frage offen ist.
========================================================================== */
.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);
}
}