/* webflott.com – Design im Stil des Zorven-Templates (dunkel, Inter Tight + Chivo Mono) */
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-tight-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/inter-tight-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Chivo Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/chivo-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Inter Tight Fallback'; src: local('Arial'); size-adjust: 95%; ascent-override: 96%; descent-override: 24%; line-gap-override: 0%; }

:root {
  --black: #010004; --charcoal: #0e0e0e; --gunmetal: #1a1a1d; --gray: #8b8b8b; --gray-deep: #626262; --gray-dark: #4b4b4b; --light: #e8e8e8; --white: #fff;
  --line: rgba(255, 255, 255, .1); --line-2: rgba(255, 255, 255, .2);
  --accent: #ff5841;
  --font: 'Inter Tight', 'Inter Tight Fallback', system-ui, sans-serif; --mono: 'Chivo Mono', ui-monospace, monospace;
  --h1: clamp(48px, 4.3vw, 64px); --h2: clamp(34px, 3.4vw, 48px); --h3: clamp(24px, 2.3vw, 32px); --h4: 24px; --h5: 20px; --h6: 18px;
  --display: clamp(52px, 7.3vw, 100px);
  --pad-x: 40px; --max: 1380px; --sec: 120px; --sec-m: 72px;
  --r-s: 8px; --r-m: 12px; --r-l: 16px; --r-xl: 24px; --pill: 500px;
  --ease: cubic-bezier(.455, .03, .515, .955);
}
@media (max-width: 991px) { :root { --pad-x: 24px; --sec: 88px; --sec-m: 54px; } }
@media (max-width: 767px) { :root { --pad-x: 16px; --sec: 70px; --sec-m: 44px; --h4: 22px; --h5: 18px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--black); color: var(--white); font-family: var(--font); font-size: 16px; line-height: 1.3; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 400; letter-spacing: -.02em; }
h1 { font-size: var(--h1); line-height: 1.1; }
h2 { font-size: var(--h2); line-height: 1.15; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--accent); color: var(--black); }

.container { width: 100%; max-width: var(--max); padding: 0 var(--pad-x); margin: 0 auto; }
.heading-1 { font-size: var(--h1); line-height: 1.1; letter-spacing: -.02em; }
.heading-2 { font-size: var(--h2); line-height: 1.15; letter-spacing: -.02em; }
.heading-3 { font-size: var(--h3); line-height: 1.2; letter-spacing: -.02em; }
.heading-4 { font-size: var(--h4); line-height: 1.2; letter-spacing: -.01em; }
.heading-5 { font-size: var(--h5); line-height: 1.3; }
.heading-6 { font-size: var(--h6); line-height: 1.3; }
.display-1 { font-size: var(--display); line-height: 1; font-weight: 700; letter-spacing: -.03em; text-transform: uppercase; }
.text-large { font-size: 20px; line-height: 1.35; }
.text-small { font-size: 14px; line-height: 1.35; }
.text-xs { font-size: 12px; line-height: 1.35; }
.text-gray { color: var(--gray); }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .02em; }
.uppercase { text-transform: uppercase; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 1000; background: var(--white); color: var(--black); padding: 10px 14px; border-radius: var(--pill); }
.skip-link:focus { top: 12px; }
.i { width: 1em; height: 1em; flex: none; }

/* Section-Label (Chivo Mono, Tag mit linker Kante) */
.section-label { display: inline-flex; width: fit-content; justify-self: start; padding: 4px 8px; margin-bottom: 20px; background: var(--gunmetal); border-left: 1px solid var(--white); font-family: var(--mono); font-size: 12px; line-height: 1.2; white-space: nowrap; }
.section-label.is-plain { background: none; border: 0; padding: 0; font-family: var(--font); font-size: 14px; }

/* Buttons */
.button { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: var(--pill); background: var(--white); color: var(--black); font-size: 16px; font-weight: 500; line-height: 1.35; white-space: nowrap; overflow: hidden; transition: background-color .3s var(--ease), color .3s var(--ease); }
.button .button-text-wrap { display: inline-block; will-change: transform; }
.button:hover { background: var(--light); }
.button-small { padding: 6px 12px; font-size: 14px; }
.button-dark { background: var(--gunmetal); color: var(--white); }
.button-dark:hover { background: #26262b; }
.button-full { width: 100%; }
.icon-button { width: 40px; height: 40px; border-radius: 50%; background: var(--white); color: var(--black); display: inline-grid; place-items: center; font-size: 18px; flex: none; }
.icon-button-icon { display: inline-grid; will-change: transform; }
.text-button { position: relative; display: inline-grid; overflow: hidden; font-size: 16px; font-weight: 500; padding-bottom: 2px; border-bottom: 1px solid var(--line-2); }
.text-button > span { grid-area: 1 / 1; display: block; }
.text-button .char { display: inline-block; transition: transform .36s var(--ease); transition-delay: calc(var(--ci) * 12ms + 70ms); }
.text-button-normal-text .char { transform-origin: 50% 0; }
.text-button-hover-text .char { transform: translateY(100%) scale(.4); transform-origin: 50% 100%; }
.text-button:hover .text-button-normal-text .char { transform: translateY(-100%) scale(.4); }
.text-button:hover .text-button-hover-text .char { transform: none; }
.link-underline { display: inline-flex; gap: 6px; align-items: center; border-bottom: 1px solid var(--line-2); padding-bottom: 2px; transition: border-color .3s; }
.link-underline:hover { border-color: var(--white); }

/* Header */
.header { position: fixed; inset: 0 0 auto; z-index: 100; transition: transform .5s var(--ease), background-color .4s; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; border-bottom: 1px solid var(--line); }
.header.is-scrolled { background: rgba(1, 0, 4, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.header.is-scrolled .header-inner { border-color: transparent; }
.header.is-hidden { transform: translateY(-100%); }
.brand img { width: 112px; height: auto; }
.header-actions { display: flex; gap: 8px; align-items: center; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pill); background: var(--gunmetal); font-size: 14px; font-weight: 500; }
.menu-lines { display: grid; gap: 3px; width: 12px; }
.menu-lines i { display: block; height: 1.5px; background: currentColor; }
.menu-backdrop { position: fixed; inset: 0; z-index: 110; background: rgba(1, 0, 4, .6); opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.menu { position: fixed; z-index: 120; top: 12px; right: 12px; width: min(720px, calc(100vw - 24px)); height: min(760px, calc(100dvh - 24px)); overflow: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 32px 32px 28px; border-radius: 20px; background: var(--white); color: var(--black); clip-path: inset(0 0 100% 50% round 20px); visibility: hidden; transition: clip-path .7s cubic-bezier(.77, 0, .175, 1), visibility 0s .7s; }
.menu-open .menu { clip-path: inset(0 0 0 0 round 20px); visibility: visible; transition: clip-path .7s cubic-bezier(.77, 0, .175, 1); }
.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }
.menu-close { position: absolute; top: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: #ececec; display: grid; place-items: center; font-size: 18px; transition: background-color .3s, transform .4s var(--ease); }
.menu-close:hover { background: #e0e0e0; transform: rotate(90deg); }
.menu-cols { display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px; padding-top: 4px; }
.menu-col-side { border-left: 1px solid #e6e6e6; padding-left: 40px; display: grid; align-content: start; gap: 6px; }
.menu-head { margin-bottom: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: #8b8b8b; }
.menu-col-side .menu-list + .menu-head { margin-top: 26px; }
.menu-list { list-style: none; display: grid; gap: 6px; align-content: start; }
.menu-list a { position: relative; display: inline-block; font-size: 30px; line-height: 1.2; letter-spacing: -.02em; transition: color .3s var(--ease), transform .4s var(--ease); }
.menu-list a:hover, .menu-list a:focus-visible { color: var(--accent); transform: translateX(6px); }
.menu-list a[aria-current] { color: var(--accent); padding-left: 18px; }
.menu-list a[aria-current]::before { content: ""; position: absolute; left: 0; top: 50%; width: 7px; height: 7px; margin-top: -3px; border-radius: 50%; background: var(--accent); }
.menu-list-small a:hover, .menu-list-small a:focus-visible, .menu-list-small a[aria-current] { color: #e2432c; }
.menu-list-small { gap: 8px; }
.menu-list-small a { font-size: 18px; letter-spacing: -.01em; }
.menu-list li, .menu-head, .menu-bottom { opacity: 0; transform: translateY(16px); transition: opacity .45s, transform .6s var(--ease); }
.menu-open .menu-list li, .menu-open .menu-head, .menu-open .menu-bottom { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 45ms + 260ms); }
.menu-open .menu-bottom { transition-delay: 620ms; }
.menu-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 24px; border-top: 1px solid #e6e6e6; }
.menu-contact { display: grid; gap: 4px; font-size: 16px; }
.menu-contact .menu-head { margin-bottom: 6px; }
.menu-contact a { transition: color .3s var(--ease); }
.menu-contact a:hover, .menu-contact a:focus-visible { color: #e2432c; }
.social { display: flex; gap: 6px; }
.social a { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: currentColor; transition: opacity .3s; }
.social a .i { width: 15px; height: 15px; color: var(--black); }
.menu .social a { background: var(--black); }
.menu .social a .i { color: var(--white); }
.social a:hover { opacity: .7; }
@media (max-width: 600px) { .menu { height: auto; max-height: calc(100dvh - 24px); padding: 24px 22px 22px; } .menu-cols { grid-template-columns: 1fr; gap: 28px; } .menu-col-side { border: 0; padding-left: 0; } .menu-list a { font-size: 26px; } .menu-list-small a { font-size: 17px; } }

/* Hero (Startseite) */
.hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; padding: 120px 0 56px; }
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-bg img, .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; }
.hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr minmax(320px, 440px); gap: 40px; align-items: end; }
.hero-content { position: relative; }
.hero-title { font-size: var(--h1); max-width: 14ch; }
.tag-cycle { position: relative; display: inline-grid; margin-bottom: 20px; padding: 4px 8px; background: var(--gunmetal); border-left: 1px solid var(--white); font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.tag-cycle > span { grid-area: 1 / 1; }
.hero-down { position: absolute; right: 0; bottom: 8px; width: 40px; height: 40px; display: grid; place-items: center; font-size: 18px; color: var(--gray); }
.hero-contact { display: grid; gap: 16px; padding: 20px; border-radius: var(--r-l); background: rgba(1, 0, 4, .78); border: 1px solid var(--line); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.tag-dot { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.tag-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.hero-contact .heading-3 { margin-bottom: 8px; }
.field { display: grid; gap: 8px; font-size: 14px; }
.field input, .field textarea { width: 100%; padding: 10px 0 12px; background: transparent; border: 0; border-bottom: 1px solid var(--line-2); color: var(--white); font: inherit; font-size: 16px; border-radius: 0; transition: border-color .3s; }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: var(--gray-deep); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--white); }
.hero-contact-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 8px; color: var(--gray); }
.hero-contact-foot a { text-decoration: underline; }
@media (max-width: 991px) { .hero-inner { grid-template-columns: 1fr; } .hero { align-items: flex-end; padding-top: 140px; } .hero-down { display: none; } }

/* Marquee (Brand-Section) */
.brand-section { padding: 60px 0; border-bottom: 1px solid var(--line); }
.brand-inner { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; }
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; width: max-content; }
.marquee-group { display: flex; align-items: center; gap: 32px; padding-right: 32px; flex: none; animation: marquee 40s linear infinite; }
.marquee-group { gap: 72px; padding-right: 72px; }
.client-logo { flex: none; width: auto; height: var(--h); max-width: none; opacity: .45; transition: opacity .35s var(--ease); }
.marquee:hover .client-logo { opacity: .7; }
.brand-label { font-size: 12px; line-height: 1.4; text-transform: uppercase; }
@media (max-width: 767px) { .client-logo { height: calc(var(--h) * .62); } .marquee-group { gap: 36px; padding-right: 36px; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@media (max-width: 767px) { .brand-inner { grid-template-columns: 1fr; gap: 20px; } }

/* About: Sticky-Story (300vh Truck, Text färbt sich beim Scrollen) */
.about-truck { height: 260vh; }
.about-camera { position: sticky; top: 0; height: 100vh; min-height: 640px; padding: 96px 0 48px; display: flex; flex-direction: column; justify-content: center; gap: 56px; }
.about-story { position: relative; }
.about-label { position: absolute; top: 14px; left: 0; display: grid; gap: 10px; }
.about-progress { width: 72px; height: 2px; background: var(--gunmetal); overflow: hidden; }
.about-progress span { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.about-story-text { font-size: var(--h1); line-height: 1.12; letter-spacing: -.02em; }
.about-indent { display: inline-block; width: 16%; }
.about-details { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 40px; }
.about-meta { display: grid; gap: 16px; max-width: 260px; }
.about-badge { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-s); width: fit-content; }
.about-badge > span { padding: 8px; display: grid; gap: 4px; align-content: center; }
.about-badge-icon { justify-items: center; border-right: 1px solid var(--line); }
.about-badge-icon .i { width: 24px; height: 24px; }
.about-gallery { position: relative; height: 280px; }
.about-img { position: absolute; overflow: hidden; }
.about-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.about-img-1 { right: 0; bottom: 0; width: 64%; aspect-ratio: 1.45; }
.about-img-2 { right: 62%; bottom: 34%; width: 24%; aspect-ratio: .95; }
.about-img-3 { right: 24%; top: 0; width: 20%; aspect-ratio: 1.4; }
@media (max-width: 991px) { .about-indent { display: none; } }

/* Services: links feststehende Titel, rechts scrollen die Karten vorbei (keine Überlappung) */
.services-section { padding: var(--sec-m) 0 var(--sec); }
.services-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 60px; }
.services-sticky { position: relative; }
.services-sticky-inner { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.services-titles { list-style: none; display: grid; gap: 2px; }
.services-title { position: relative; display: inline-flex; align-items: flex-start; gap: 14px; font-size: clamp(44px, 5.6vw, 88px); color: var(--gray-dark); transition: color .35s var(--ease); }
.services-num { font-size: 12px; font-weight: 400; letter-spacing: 0; padding-top: .9em; color: var(--gray-deep); transition: color .35s var(--ease); }
.services-title.is-current, .services-title:hover { color: var(--white); }
.services-title.is-current .services-num { color: var(--accent); }
.services-progress { width: min(320px, 60%); height: 2px; margin-top: 28px; background: var(--gunmetal); overflow: hidden; }
.services-progress span { display: block; height: 100%; width: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.services-items { display: grid; padding: 10vh 0; }
.services-item-wrap { min-height: 80vh; display: flex; align-items: center; scroll-margin-top: 10vh; }
.services-item { width: 100%; display: grid; gap: 14px; justify-items: start; padding: 14px 14px 22px; border-radius: var(--r-l); background: var(--charcoal); border: 1px solid var(--line); }
.services-banner { width: 100%; overflow: hidden; border-radius: var(--r-m); aspect-ratio: 1.6; margin-bottom: 6px; }
.services-banner img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.services-item:hover .services-banner img { transform: scale(1.05); }
@media (max-width: 991px) {
  .services-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .services-sticky-inner { position: static; height: auto; }
  .services-title { font-size: 11vw; color: var(--white); }
  .services-progress { display: none; }
  .services-items { padding: 0; gap: 16px; }
  .services-item-wrap { min-height: 0; }
}

/* Sections allgemein */
.section { padding: var(--sec-m) 0; }
.section-head { display: grid; gap: 0; margin-bottom: 48px; }
.section-head h2 { max-width: 16ch; }
.section-head.is-split { grid-template-columns: 1fr auto; align-items: end; gap: 24px; }
@media (max-width: 767px) { .section-head.is-split { grid-template-columns: 1fr; align-items: start; } }
.center-cta { display: flex; justify-content: center; margin-top: 48px; }

/* Works: Karten stapeln sich oben übereinander, die vorherige tritt zurück */
.works-section { padding: var(--sec-m) 0 var(--sec); }
.works-stack { display: grid; gap: 24px; }
.works-card { position: sticky; top: calc(96px + var(--i) * 18px); }
.works-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 48px; min-height: min(560px, 72vh); padding: 20px; border-radius: var(--r-xl); background: var(--charcoal); border: 1px solid var(--line); transform-origin: 50% 0; will-change: transform; position: relative; isolation: isolate; box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .9); }
/* Abdunkeln beim Stapeln: deckende Schicht statt Transparenz → dahinterliegende Karten scheinen nie durch */
@property --dim { syntax: "<number>"; inherits: true; initial-value: 0; }
.works-item::after { content: ''; position: absolute; inset: -1px; z-index: 10; border-radius: inherit; background: #010004; opacity: var(--dim); pointer-events: none; }
.works-body { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 8px; }
.works-body .heading-3 { margin: 8px 0 12px; }
.works-num { font-size: var(--h2); line-height: 1; letter-spacing: -.03em; }
.works-num span { font-size: .45em; margin-left: 4px; }
.works-result { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.works-banner { position: relative; display: block; overflow: hidden; border-radius: var(--r-m); min-height: 280px; }
.works-banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .8s var(--ease); }
.works-banner-overlay { position: absolute; inset: 0; display: grid; place-items: center; }
.works-banner-btn { padding: 10px 16px; border-radius: var(--pill); background: var(--white); color: var(--black); font-weight: 500; opacity: 0; transform: scale(.3); transition: opacity .35s var(--ease), transform .35s var(--ease); }
.works-banner:hover .works-banner-btn { opacity: 1; transform: none; }
.works-banner:hover img { transform: scale(1.04); }
@media (max-width: 767px) { .works-card { position: relative; top: auto; } .works-item { grid-template-columns: minmax(0, 1fr); gap: 16px; min-height: 0; padding: 14px; } .works-banner { min-height: 0; aspect-ratio: 1.6; order: -1; } }

/* Rating: Bilder-Ring um die Zahl, öffnet sich beim Scrollen; drei Kennzahlen nacheinander */
.anim-on .rating-truck { height: 320vh; }
.rating-truck { position: relative; }
html:not(.anim-on) .rating-camera { position: relative; height: auto; padding: 160px 0 80px; }
html:not(.anim-on) .rating-images, html:not(.anim-on) .rating-head p { display: none; }
html:not(.anim-on) .rating-items { gap: 24px; }
.anim-on .rating-camera { position: sticky; top: 0; height: 100vh; }
.rating-camera { overflow: hidden; display: grid; place-items: center; }
.rating-images { position: absolute; inset: 0; pointer-events: none; }
.rating-img { opacity: 0; position: absolute; left: 50%; top: 50%; width: clamp(110px, 15vw, 230px); aspect-ratio: 1.45; overflow: hidden; border-radius: 8px; will-change: transform; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.rating-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rating-head { position: absolute; top: 96px; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; z-index: 2; }
.rating-head .section-label { margin: 0; }
.rating-items { position: relative; z-index: 2; display: grid; place-items: center; width: min(560px, 86vw); }
.anim-on .rating-item { grid-area: 1 / 1; }
.rating-item { text-align: center; display: grid; gap: 16px; padding: 24px; border-radius: var(--r-xl); background: radial-gradient(closest-side, rgba(1, 0, 4, .92), rgba(1, 0, 4, .6) 70%, transparent); }
.rating-number { font-size: clamp(56px, 7vw, 104px); line-height: 1; letter-spacing: -.03em; }
.rating-item .heading-4 { color: var(--light); }
@media (max-width: 767px) { .anim-on .rating-truck { height: 280vh; } .rating-head { top: 84px; } }

/* Zug-Zähler (Ziffern rollen) */
.train-counter { display: inline-flex; align-items: flex-start; white-space: nowrap; }
.digit-window { position: relative; display: inline-block; width: .62em; height: 1em; overflow: hidden; vertical-align: top; }
.digit-train { display: block; will-change: transform; }
.digit { display: flex; align-items: center; justify-content: center; width: .62em; height: 1em; line-height: 1; }

/* Process */
.process-section { padding: var(--sec-m) 0 var(--sec); }
.process-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.process-item { position: relative; display: flex; flex-direction: column; gap: 18px; min-height: 340px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--black); transition: background-color .3s, border-color .3s; }
.process-top { display: flex; justify-content: space-between; gap: 12px; }
.process-icon { display: grid; place-items: center; width: 96px; height: 96px; margin: 28px 0 8px; border-radius: 22px; color: var(--white); background: radial-gradient(120% 120% at 30% 0%, #2a2a30 0%, var(--gunmetal) 45%, var(--black) 100%); border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -18px rgba(255, 88, 65, 0); transition: color .4s var(--ease), box-shadow .5s var(--ease), transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.pi { width: 46px; height: 46px; }
.process-item:hover { background: var(--charcoal); border-color: var(--line-2); }
.process-item:hover .process-icon { color: var(--accent); transform: translateY(-4px) rotate(-4deg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px -14px rgba(255, 88, 65, .45); }
.process-item p { margin-top: auto; }
@media (max-width: 991px) { .process-items { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .process-items { grid-template-columns: 1fr; } }

/* Pricing */
.pricing-section { padding: var(--sec) 0; }
.pricing-section.is-page { padding-top: 0; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; align-items: stretch; }
.pricing-grid.is-four { grid-template-columns: repeat(4, 1fr); }
.price-card { display: flex; flex-direction: column; gap: 16px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--black); scroll-margin-top: 100px; }
.price-card.is-popular { background: var(--charcoal); border-color: var(--line-2); }
.price-card-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.price-badge { font-family: var(--mono); font-size: 11px; text-transform: uppercase; padding: 4px 8px; border-radius: var(--pill); background: var(--accent); color: var(--black); }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.check-list { list-style: none; display: grid; gap: 10px; flex: 1; font-size: 14px; }
.check-list li { display: flex; gap: 10px; align-items: flex-start; }
.check-list .i { margin-top: 1px; color: var(--accent); }
.pricing-wide { display: grid; grid-template-columns: 1fr 2fr auto; gap: 24px; align-items: center; margin-top: 10px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); }
.pill-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; }
.pill-list li { display: inline-flex; gap: 6px; align-items: center; padding: 6px 12px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: 14px; }
.pill-list .i { color: var(--accent); }
@media (max-width: 1100px) { .pricing-grid.is-four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 991px) { .pricing-grid { grid-template-columns: 1fr; } .pricing-wide { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pricing-grid.is-four { grid-template-columns: 1fr; } }

/* Vergleichstabelle */
.compare-wrap, .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-m); }
.compare, .table-wrap table { width: 100%; border-collapse: collapse; min-width: 720px; font-size: 14px; }
.compare th, .compare td, .table-wrap th, .table-wrap td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.compare thead th { font-weight: 500; font-size: 16px; }
.compare thead th span { display: block; margin-top: 4px; font-weight: 400; }
.compare tbody th { font-weight: 400; color: var(--gray); }
.compare tr:last-child > *, .table-wrap tr:last-child > * { border-bottom: 0; }
.yes .i { color: var(--accent); width: 18px; height: 18px; } .no .i { color: var(--gray-dark); width: 18px; height: 18px; }
.table-wrap { margin: 28px 0; } .table-wrap th { font-weight: 500; background: var(--charcoal); }

/* FAQ */
.faq-section { padding: var(--sec) 0; }
.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; }
.faq-side { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.faq-side h2 { max-width: 14ch; }
.cta-box { display: grid; gap: 16px; justify-items: start; margin-top: auto; padding: 16px; max-width: 280px; border-radius: var(--r-m); background: var(--charcoal); }
.faq-side .cta-box { margin-top: 48px; }
.faq-list { display: grid; align-content: start; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-question { width: 100%; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 16px 0; text-align: left; }
.faq-item-icon { display: grid; font-size: 18px; transition: transform .35s var(--ease); }
.faq-item.is-open .faq-item-icon { transform: rotate(225deg); }
.faq-toggle-content { height: 0; overflow: hidden; transition: height .35s var(--ease); }
.faq-answer { padding: 0 40px 18px 0; color: var(--gray); }
.no-js .faq-toggle-content { height: auto; }
@media (max-width: 991px) { .faq-grid { grid-template-columns: 1fr; gap: 32px; } .faq-side .cta-box { margin-top: 24px; } }

/* Region */
.region-section { padding: var(--sec-m) 0 var(--sec); }
.region-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: end; }
.region-card { display: grid; gap: 12px; padding: 20px; border-radius: var(--r-m); background: var(--charcoal); }
.region-pin .i { width: 28px; height: 28px; color: var(--accent); }
@media (max-width: 991px) { .region-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Team */
.team-section { padding: var(--sec-m) 0; }
.team-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.team-card { display: flex; gap: 20px; align-items: flex-start; padding: 20px; border-radius: var(--r-l); background: var(--charcoal); border: 1px solid var(--line); transition: border-color .3s; }
.team-card:hover { border-color: var(--line-2); }
.team-card-text { display: grid; gap: 8px; }
.team-card .tag-list { margin: 6px 0 0; }
@media (max-width: 767px) { .team-cards { grid-template-columns: 1fr; } .team-card { flex-direction: column; } }

/* Ergebnis-Tabelle (Hover-Bild folgt Maus) */
.table-section { padding: var(--sec-m) 0 var(--sec); }
.result-table { border: 1px solid var(--line); border-radius: 4px; }
.result-row { position: relative; display: grid; grid-template-columns: 1.1fr 1fr 2fr; gap: 16px; padding: 12px; border-bottom: 1px solid var(--line); font-size: 14px; transition: background-color .3s; }
.result-row:last-child { border-bottom: 0; }
.result-row.is-head { color: var(--white); font-weight: 500; }
.result-row:not(.is-head):hover { background: var(--charcoal); }
.result-banner { position: absolute; z-index: 5; top: 50%; left: 0; width: 220px; aspect-ratio: 1.6; border-radius: 6px; overflow: hidden; opacity: 0; pointer-events: none; transform: translate(-50%, -50%) scale(.9); transition: opacity .3s, transform .3s; }
.result-banner img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.result-row:hover .result-banner { opacity: 1; transform: translate(-50%, -50%); }
.table-note { margin-top: 14px; }
@media (max-width: 767px) { .result-row { grid-template-columns: 1fr; gap: 4px; } .result-row.is-head { display: none; } .result-banner { display: none; } }

/* Blog */
.blog-section { padding: var(--sec-m) 0 var(--sec); }
.blog-feature { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: center; gap: 24px; padding: 14px; border-radius: var(--r-m); background: var(--charcoal); margin-bottom: 24px; }
.blog-feature-text { display: flex; flex-direction: column; gap: 16px; padding: 6px; }
.blog-feature-text .heading-3 { max-width: 20ch; }
.blog-feature-text .button { margin-top: auto; align-self: flex-start; }
.blog-feature-img, .blog-card-img { overflow: hidden; border-radius: var(--r-s); aspect-ratio: 16 / 9; }
.cover-size-banner { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.blog-feature:hover .cover-size-banner, .blog-card:hover .cover-size-banner { transform: scale(1.15); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.blog-grid.is-index { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.blog-card { display: flex; flex-direction: column; gap: 8px; }
.blog-card .blog-card-img { margin-top: 8px; width: 100%; }
@media (max-width: 991px) { .blog-feature { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .blog-grid, .blog-grid.is-index { grid-template-columns: 1fr; } }

/* CTA mit 3D-Bildkugel */
.cta-section { padding: var(--sec-m) 0; }
.cta-sphere { position: relative; height: 100vh; min-height: 640px; overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; }
.cta-sphere:active { cursor: grabbing; }
.cta-sphere-card { position: absolute; top: 50%; left: 50%; width: clamp(100px, 10.5vw, 160px); aspect-ratio: 1.4; border-radius: 6px; overflow: hidden; pointer-events: none; will-change: transform; }
.cta-sphere-card img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cta-sphere-text { position: absolute; z-index: 100000; inset: 50% auto auto 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 18px; text-align: center; padding: 28px 24px; border-radius: var(--r-l); background: rgba(1, 0, 4, .74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); width: min(520px, 88vw); }
.no-js .cta-sphere-card { display: none; }

/* Footer */
.footer { padding: var(--sec-m) 0 24px; border-top: 1px solid var(--line); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 60px; }
.footer-claim { display: grid; gap: 28px; align-content: start; }
.footer-claim .heading-2 { max-width: 18ch; }
.footer-cta { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; font-size: 14px; }
.footer-cols ul { list-style: none; display: grid; gap: 8px; color: var(--gray); }
.footer-cols a { transition: color .3s; }
.footer-cols a:hover { color: var(--white); }
.footer-head { margin-bottom: 14px; font-family: var(--mono); font-size: 12px; text-transform: uppercase; }
.footer-bottom { margin-top: 72px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); color: var(--gray); }
.footer-bottom a:hover { color: var(--white); }
.footer .social a { background: var(--white); }
@media (max-width: 991px) { .footer-top { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* Unterseiten */
.page-hero { position: relative; padding: 180px 0 var(--sec-m); overflow: hidden; }
.page-hero-bg { position: absolute; inset: 0; opacity: .55; -webkit-mask-image: linear-gradient(#000 40%, transparent); mask-image: linear-gradient(#000 40%, transparent); }
.page-hero .container { position: relative; }
.page-hero.is-small { padding-bottom: 20px; }
.page-hero.is-center { min-height: 80vh; display: flex; align-items: center; }
.page-title { font-size: clamp(38px, 5.2vw, 76px); line-height: 1.05; letter-spacing: -.03em; max-width: 18ch; overflow-wrap: break-word; }
.page-lead { max-width: 640px; margin-top: 24px; color: var(--light); }
.page-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; margin-top: 32px; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; font-size: 13px; color: var(--gray); }
.breadcrumbs li + li::before { content: '/'; margin-right: 6px; color: var(--gray-dark); }
.breadcrumbs a:hover { color: var(--white); }

.answer-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: start; }
.answer-box { padding: 24px; border-radius: var(--r-m); background: var(--charcoal); border-left: 2px solid var(--accent); display: grid; gap: 14px; }
.fact-list { margin: 0; display: grid; gap: 0; }
.fact-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fact-list dt { color: var(--gray); font-size: 14px; } .fact-list dd { margin: 0; text-align: right; }
.fact-list.is-row { grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 60px; }
.fact-list.is-row > div, .fact-list.is-grid > div { flex-direction: column; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-m); }
.fact-list.is-row dd, .fact-list.is-grid dd { text-align: left; }
.fact-list.is-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 991px) { .answer-grid { grid-template-columns: 1fr; } .fact-list.is-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fact-list.is-row, .fact-list.is-grid { grid-template-columns: 1fr; } }

.prose-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 60px; align-items: start; }
.prose-side { position: sticky; top: 110px; }
.prose-side h2 { max-width: 14ch; }
.prose { font-size: 18px; line-height: 1.6; color: var(--light); }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; color: var(--white); margin-top: 2em; scroll-margin-top: 100px; }
.prose h3 { font-size: 22px; line-height: 1.3; color: var(--white); margin-top: 1.6em; }
.prose a { color: var(--white); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.prose ul, .prose ol { padding-left: 1.2em; display: grid; gap: .5em; }
.prose li::marker { color: var(--accent); }
.prose strong { color: var(--white); font-weight: 600; }
.prose .note { padding: 18px 20px; border-radius: var(--r-m); background: var(--charcoal); border-left: 2px solid var(--accent); font-size: 16px; }
.prose .note > * + * { margin-top: .6em; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--gunmetal); padding: 2px 6px; border-radius: 4px; }
.prose .faq-list { margin-top: 12px; font-size: 16px; }
.legal { max-width: 760px; font-size: 16px; }
.legal h2 { font-size: 22px; margin-top: 1.8em; }
@media (max-width: 991px) { .prose-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .prose-side { position: static; } .prose { font-size: 17px; } }

.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.info-card { display: grid; gap: 12px; align-content: start; padding: 20px; min-height: 200px; border: 1px solid var(--line); border-radius: var(--r-m); transition: background-color .3s; }
.info-card:hover { background: var(--charcoal); }
@media (max-width: 991px) { .card-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

.place-table { margin-top: 28px; border-top: 1px solid var(--line); }
.place-row { display: grid; grid-template-columns: 1fr 1.6fr 1.2fr; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
@media (max-width: 767px) { .place-row { grid-template-columns: 1fr; gap: 2px; } }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.step { display: grid; gap: 12px; align-content: start; padding: 20px; border-top: 1px solid var(--white); background: linear-gradient(var(--charcoal), transparent); border-radius: 0 0 var(--r-m) var(--r-m); min-height: 240px; }
@media (max-width: 991px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } }

.ref-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ref-card { display: grid; gap: 8px; align-content: start; }
.ref-img { overflow: hidden; border-radius: var(--r-m); aspect-ratio: 1.6; margin-bottom: 8px; }
.ref-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .7s var(--ease); }
.ref-card:hover .ref-img img { transform: scale(1.08); }
@media (max-width: 767px) { .ref-grid { grid-template-columns: 1fr; } }

.check-steps { list-style: none; display: grid; gap: 0; }
.check-steps li { display: flex; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.check-steps li > div { display: grid; gap: 6px; }
.check-steps a { text-decoration: underline; text-decoration-color: var(--accent); }
.check-icon { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gunmetal); color: var(--accent); }

.cta-band { padding: var(--sec-m) 0 var(--sec); }
.cta-band-inner { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; padding: 40px; border-radius: var(--r-xl); background: radial-gradient(90% 140% at 100% 0%, rgba(255, 88, 65, .22), transparent 60%), var(--charcoal); }
.cta-band-inner .heading-2 { max-width: 18ch; margin-bottom: 14px; }
.cta-band-actions { display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: flex-end; }
@media (max-width: 767px) { .cta-band-inner { grid-template-columns: 1fr; padding: 24px; } .cta-band-actions { justify-content: flex-start; } }

.project-list { display: grid; gap: 80px; }
.project-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 48px; align-items: center; scroll-margin-top: 100px; }
.project-row.is-reverse .project-img { order: 2; }
.project-img { overflow: hidden; border-radius: var(--r-m); aspect-ratio: 1.6; }
.project-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.project-text { display: grid; gap: 14px; justify-items: start; }
.project-result { width: 100%; padding: 14px 16px; border-radius: var(--r-s); background: var(--charcoal); display: grid; gap: 4px; }
@media (max-width: 767px) { .project-row { grid-template-columns: 1fr; gap: 20px; } .project-row.is-reverse .project-img { order: 0; } .project-list { gap: 56px; } }

.tag-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 28px; }
.tag-list li { padding: 4px 10px; border-radius: var(--pill); background: var(--gunmetal); font-size: 13px; }
.person-list { display: grid; gap: 10px; }
.person { display: grid; grid-template-columns: 120px 1fr; gap: 40px; align-items: start; padding: 28px; border-radius: var(--r-l); background: var(--charcoal); border: 1px solid var(--line); scroll-margin-top: 100px; }
.person .avatar { width: 120px; height: 120px; font-size: 38px; }
.person-text { display: grid; gap: 16px; justify-items: start; color: var(--light); font-size: 17px; line-height: 1.55; }
.person-text .tag-list { margin: 0; }
@media (max-width: 767px) { .person { grid-template-columns: 1fr; gap: 20px; } }

.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: start; }
.contact-form { display: grid; gap: 24px; padding: 28px; border-radius: var(--r-l); border: 1px solid var(--line); }
.contact-form .button { justify-self: start; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.field-chips { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.field-chips legend { font-size: 14px; margin-bottom: 10px; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 8px 12px; border-radius: var(--pill); border: 1px solid var(--line-2); font-size: 14px; cursor: pointer; transition: all .25s; }
.chip input:checked + span { background: var(--white); color: var(--black); border-color: var(--white); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--gray); }
.consent input { margin-top: 2px; accent-color: var(--accent); width: 16px; height: 16px; }
.consent a { text-decoration: underline; }
.contact-side { display: grid; gap: 10px; }
.contact-card { display: grid; gap: 6px; padding: 18px; border-radius: var(--r-m); background: var(--charcoal); }
@media (max-width: 991px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } .contact-form { padding: 18px; } }

/* Artikel: eine gemeinsame Achse für Kopf, Titelbild, Inhaltsverzeichnis und Text */
.article-wrap { max-width: 1080px; margin: 0 auto; }
.article-hero { padding: 150px 0 0; }
.article-hero .breadcrumbs ol { margin-bottom: 36px; }
.article-kicker { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; font-size: 14px; }
.article-cat { padding: 5px 12px; border-radius: var(--pill); background: rgba(255, 88, 65, .12); border: 1px solid rgba(255, 88, 65, .35); color: #ff8a76; font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.article-title { font-size: clamp(36px, 4.6vw, 64px); line-height: 1.06; letter-spacing: -.03em; max-width: 20ch; }
.article-lead { max-width: 62ch; margin-top: 24px; font-size: 20px; line-height: 1.5; color: var(--light); }
.article-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 28px; align-items: center; margin: 40px 0 0; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-author { display: flex; gap: 12px; align-items: center; }
.article-author > span:last-child { display: grid; gap: 2px; }
.article-cover { margin: 48px 0 0; aspect-ratio: 16 / 9; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--line); background: #09090c; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; }
.article-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 72px; padding: 72px 0 var(--sec-m); }
.article-body { max-width: 720px; }
.article-toc { position: sticky; top: 110px; align-self: start; display: grid; gap: 14px; padding-top: 6px; }
.article-toc ol { list-style: none; display: grid; gap: 10px; font-size: 14px; color: var(--gray); counter-reset: toc; padding-left: 14px; border-left: 1px solid var(--line); }
.article-toc li { counter-increment: toc; display: flex; gap: 8px; line-height: 1.35; }
.article-toc li::before { content: counter(toc, decimal-leading-zero); font-family: var(--mono); font-size: 11px; color: var(--gray-dark); padding-top: 2px; }
.article-toc a { transition: color .3s; } .article-toc a:hover, .article-toc a.is-active { color: var(--white); }
.article-toc a.is-active { color: var(--accent); }
.article-body > h2:first-child, .article-body > p:first-child { margin-top: 0; }
@media (max-width: 991px) { .article-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-top: 48px; } .article-toc { position: static; padding: 18px; border: 1px solid var(--line); border-radius: var(--r-m); } .article-toc ol { border: 0; padding-left: 0; } .article-hero { padding-top: 120px; } .article-lead { font-size: 18px; } .article-cover { margin-top: 32px; border-radius: var(--r-l); } }

/* ===== Leistungs-Illustrationen (alle Maße relativ zur Kartenbreite: cqw) ===== */
.services-banner { container-type: inline-size; background: #09090c; border: 1px solid var(--line); }
.svc-ill { position: absolute; inset: 0; overflow: hidden; font-size: 2.6cqw; color: var(--light);
  background: radial-gradient(80% 90% at 85% 0%, rgba(255, 88, 65, .16), transparent 60%), radial-gradient(70% 80% at 0% 100%, rgba(120, 90, 255, .08), transparent 60%), #09090c; }
.services-banner { position: relative; }
.svc-ill::after { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px); background-size: 4cqw 4cqw; pointer-events: none; }
.ill-line { display: block; height: 1.2cqw; border-radius: 1cqw; background: #2a2a31; }
.ill-line.is-p { height: .9cqw; background: #222228; }
.ill-line.is-short { width: 60%; }

/* 1) Webdesign */
.ill-web .ill-browser { position: absolute; left: 9%; right: 9%; top: 11%; bottom: -4%; border-radius: 2.2cqw 2.2cqw 0 0; background: #121216; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 4cqw 8cqw -3cqw rgba(0, 0, 0, .8); overflow: hidden; }
.ill-bar { display: flex; align-items: center; gap: 1cqw; height: 6.5cqw; padding: 0 2.4cqw; border-bottom: 1px solid rgba(255, 255, 255, .07); background: #18181d; }
.ill-bar i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #34343c; }
.ill-bar i:first-child { background: #ff5f57; } .ill-bar i:nth-child(2) { background: #febc2e; } .ill-bar i:nth-child(3) { background: #28c840; }
.ill-url { margin-left: 2cqw; padding: .6cqw 2.4cqw; border-radius: 3cqw; background: #0e0e12; font-size: 1.7cqw; color: var(--gray); font-family: var(--mono); }
.ill-page { padding: 3cqw 4cqw; display: grid; gap: 3.4cqw; }
.ill-nav { display: flex; align-items: center; justify-content: space-between; }
.ill-logo { width: 9cqw; height: 2.2cqw; border-radius: 1cqw; background: var(--accent); }
.ill-navlinks { display: flex; gap: 2cqw; } .ill-navlinks b { width: 6cqw; height: 1cqw; border-radius: 1cqw; background: #2e2e35; }
.ill-navbtn { width: 9cqw; height: 3.2cqw; border-radius: 3cqw; background: #fff; }
.ill-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4cqw; align-items: center; }
.ill-hero-text { display: grid; gap: 1.6cqw; justify-items: start; }
.ill-h1 { display: block; width: 100%; height: 3.4cqw; border-radius: 1cqw; background: #e8e8e8; }
.ill-h1.is-short { width: 70%; }
.ill-hero-text .ill-line { width: 92%; } .ill-hero-text .ill-line + .ill-line { width: 75%; }
.ill-cta { margin-top: 1cqw; padding: 1.2cqw 2.8cqw; border-radius: 3cqw; background: var(--accent); color: #fff; font-size: 1.8cqw; font-weight: 600; white-space: nowrap; transition: transform .2s; }
.ill-cta.is-clicked { transform: scale(.94); box-shadow: 0 0 0 1cqw rgba(255, 88, 65, .25); }
.ill-hero-img { position: relative; aspect-ratio: 1.25; border-radius: 1.6cqw; overflow: hidden; background: linear-gradient(160deg, #2a1a2e, #3b1f1a 60%, #ff5841); }
.ill-sun { position: absolute; right: 16%; top: 16%; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #ffd2a8; opacity: .85; }
.ill-hill { position: absolute; left: -10%; right: -10%; bottom: -30%; height: 70%; border-radius: 50%; background: #120c14; }
.ill-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.ill-cards span { height: 9cqw; border-radius: 1.4cqw; background: #18181d; border: 1px solid rgba(255, 255, 255, .06); }
.ill-cursor { position: absolute; left: 0; top: 0; width: 4.4cqw; height: 4.4cqw; filter: drop-shadow(0 .6cqw 1cqw rgba(0, 0, 0, .6)); z-index: 3; }
.ill-cursor svg { width: 100%; height: 100%; }

/* 2) Relaunch */
.ill-relaunch .ill-mini { position: absolute; top: 18%; width: 31%; height: 64%; padding: 2.2cqw; border-radius: 1.8cqw; display: grid; align-content: start; gap: 1.6cqw; }
.ill-mini.is-old { left: 5%; background: #1a1916; border: 1px dashed rgba(255, 255, 255, .18); filter: sepia(.5) saturate(.6); }
.ill-mini.is-new { right: 5%; background: #141418; border: 1px solid rgba(255, 88, 65, .45); box-shadow: 0 0 6cqw -2cqw rgba(255, 88, 65, .45); }
.ill-tag { justify-self: start; padding: .5cqw 1.6cqw; border-radius: 3cqw; font-family: var(--mono); font-size: 1.6cqw; background: #2b2a26; color: #a8a294; }
.ill-tag.is-accent { background: var(--accent); color: #fff; }
.ill-mini-head { display: block; height: 2.4cqw; width: 80%; border-radius: 1cqw; background: #3a382f; }
.is-old .ill-mini-img { display: block; height: 11cqw; border-radius: .4cqw; background: repeating-linear-gradient(45deg, #2b2a24 0 1cqw, #24231e 1cqw 2cqw); }
.is-old .ill-line { background: #2f2d27; }
.is-new .ill-mini-head { background: #e8e8e8; }
.is-new .ill-mini-img { display: block; height: 11cqw; border-radius: 1.2cqw; background: linear-gradient(160deg, #2a1a2e, #3b1f1a 60%, #ff5841); }
.ill-mini-btn { display: block; width: 45%; height: 3cqw; border-radius: 3cqw; background: var(--accent); }
.ill-redirects { position: absolute; left: 37%; right: 37%; top: 22%; bottom: 22%; display: grid; align-content: space-around; }
.ill-redirect { position: relative; display: grid; gap: .6cqw; }
.ill-from { font-family: var(--mono); font-size: 1.55cqw; color: var(--gray); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ill-arrow { position: relative; height: 2.6cqw; display: flex; align-items: center; }
.ill-arrow::before { content: ''; position: absolute; left: 0; right: 1.2cqw; top: 50%; height: 2px; transform: translateY(-50%) scaleX(var(--p, 0)); transform-origin: 0 50%; background: linear-gradient(90deg, rgba(255, 88, 65, .2), var(--accent)); }
.ill-arrow::after { content: ''; position: absolute; right: 0; top: 50%; width: 1.4cqw; height: 1.4cqw; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: translateY(-50%) rotate(45deg); opacity: var(--p, 0); }
.ill-code { position: relative; z-index: 1; margin: 0 auto; padding: .2cqw 1.2cqw; border-radius: 2cqw; background: #09090c; border: 1px solid rgba(255, 88, 65, .6); color: var(--accent); font-family: var(--mono); font-size: 1.6cqw; font-weight: 500; opacity: var(--p, 0); }
.ill-chip { position: absolute; left: 50%; bottom: 7%; display: flex; align-items: center; gap: 1cqw; padding: 1.2cqw 2.6cqw; border-radius: 4cqw; background: #fff; color: #010004; font-size: 2cqw; font-weight: 600; white-space: nowrap; transform: translateX(-50%); }
.ill-chip svg { width: 2.4cqw; height: 2.4cqw; color: #1f9d55; }

/* 3) Lokales SEO */
.ill-seo .ill-search { position: absolute; left: 8%; right: 8%; top: 9%; height: 9cqw; display: flex; align-items: center; gap: 1.8cqw; padding: 0 3cqw; border-radius: 5cqw; background: #fff; color: #010004; font-size: 2.8cqw; box-shadow: 0 2cqw 5cqw -2cqw rgba(0, 0, 0, .8); }
.ill-search svg { width: 3.2cqw; height: 3.2cqw; color: #5f6368; flex: none; }
.ill-query { white-space: nowrap; }
.ill-caret { width: 2px; height: 3.6cqw; background: #010004; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.ill-results { position: absolute; left: 8%; right: 8%; top: 26%; bottom: 7%; display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.4cqw; }
.ill-map { position: relative; border-radius: 2cqw; overflow: hidden; background: #15171b; border: 1px solid rgba(255, 255, 255, .08); }
.ill-road { position: absolute; background: #23262c; }
.ill-road.r1 { left: -10%; right: -10%; top: 46%; height: 1.4cqw; transform: rotate(-12deg); }
.ill-road.r2 { top: -10%; bottom: -10%; left: 40%; width: 1.2cqw; transform: rotate(8deg); }
.ill-road.r3 { left: -10%; right: -10%; top: 78%; height: .9cqw; transform: rotate(6deg); }
.ill-river { position: absolute; left: -20%; right: -20%; top: 14%; height: 3cqw; border-radius: 50%; border-bottom: 1.4cqw solid rgba(80, 140, 220, .35); transform: rotate(-6deg); }
.ill-pin { position: absolute; width: 3.2cqw; height: 3.2cqw; margin: -3.2cqw 0 0 -1.6cqw; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #4a4d55; }
.ill-pin::after { content: ''; position: absolute; inset: 30%; border-radius: 50%; background: #15171b; }
.ill-pin.is-me { width: 4.6cqw; height: 4.6cqw; margin: -4.6cqw 0 0 -2.3cqw; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 88, 65, .5); z-index: 2; }
.ill-pin.is-me::after { background: #fff; }
.ill-list { list-style: none; position: relative; margin: 0; padding: 0; }
.ill-row { position: absolute; left: 0; right: 0; height: 22%; display: flex; align-items: center; gap: 1.8cqw; padding: 0 2cqw; border-radius: 1.6cqw; background: #141418; border: 1px solid rgba(255, 255, 255, .06); }
.ill-row[data-row="0"] { top: 0; } .ill-row[data-row="1"] { top: 26%; } .ill-row[data-row="2"] { top: 52%; } .ill-row[data-row="3"] { top: 78%; }
.ill-rank { flex: none; width: 3.8cqw; height: 3.8cqw; display: grid; place-items: center; border-radius: 50%; background: #23232a; font-size: 1.8cqw; font-family: var(--mono); color: var(--gray); }
.ill-row-text { display: grid; gap: .3cqw; line-height: 1.1; }
.ill-row-text b { font-size: 2.1cqw; font-weight: 500; color: #cfcfcf; }
.ill-row-text small { font-size: 1.5cqw; color: var(--gray); }
.ill-row-text em { font-style: normal; color: #f4b400; letter-spacing: -.05em; }
.ill-row.is-me { z-index: 2; background: #1c1414; border-color: rgba(255, 88, 65, .55); box-shadow: 0 1.6cqw 4cqw -1.6cqw rgba(255, 88, 65, .5); }
.ill-row.is-me b { color: #fff; }
.ill-row.is-me .ill-rank { background: var(--accent); color: #fff; }

/* 4) Ratgeber */
.ill-blog .ill-cal { position: absolute; left: 6%; top: 10%; bottom: 10%; width: 46%; padding: 2.4cqw; border-radius: 2cqw; background: #121216; border: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-rows: auto 1fr; gap: 2cqw; }
.ill-cal-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1cqw; font-size: 1.8cqw; color: var(--gray); }
.ill-cal-head b { font-weight: 500; color: #fff; font-size: 1.7cqw; }
.ill-cal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.ill-month { position: relative; display: grid; align-content: space-between; padding: 1cqw; border-radius: 1.2cqw; background: #18181d; border: 1px solid rgba(255, 255, 255, .05); }
.ill-month b { font-size: 1.5cqw; font-weight: 400; color: var(--gray-deep); font-family: var(--mono); }
.ill-month i { display: block; height: 2.6cqw; border-radius: .8cqw; background: linear-gradient(135deg, #ff7a5c, var(--accent)); transform: scale(var(--m, 0)); transform-origin: 0 100%; opacity: var(--m, 0); }
.ill-month.is-on { border-color: rgba(255, 88, 65, .35); }
.ill-month.is-on b { color: #fff; }
.ill-blog .ill-chart { position: absolute; right: 6%; top: 10%; bottom: 10%; width: 40%; padding: 2.2cqw; border-radius: 2cqw; background: #121216; border: 1px solid rgba(255, 255, 255, .08); display: grid; grid-template-rows: auto 1fr auto; gap: 1.2cqw; }
.ill-chart-head { display: flex; justify-content: space-between; align-items: center; gap: 1cqw; }
.ill-chart-label { font-size: 1.7cqw; color: var(--gray); }
.ill-chart-tag { padding: .3cqw 1.1cqw; border-radius: 2cqw; background: #1e1e24; font-family: var(--mono); font-size: 1.2cqw; color: var(--gray-deep); white-space: nowrap; }
.ill-plot { position: relative; min-height: 0; }
.ill-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ill-grid { stroke: rgba(255, 255, 255, .06); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.ill-base { fill: none; stroke: #5a5a64; stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ill-curve { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ill-area { fill: rgba(255, 88, 65, .14); }
.ill-dot { position: absolute; left: 0; top: 0; width: 2.2cqw; height: 2.2cqw; margin: -1.1cqw 0 0 -1.1cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .7cqw rgba(255, 88, 65, .45); }
.ill-bubble { position: absolute; left: 0; top: 0; padding: .5cqw 1.2cqw; border-radius: 1cqw; background: var(--accent); color: #fff; font-size: 1.7cqw; font-weight: 600; white-space: nowrap; }
.ill-bubble::after { content: ''; position: absolute; left: 50%; bottom: -.6cqw; width: 1.2cqw; height: 1.2cqw; margin-left: -.6cqw; background: var(--accent); transform: rotate(45deg); z-index: -1; }
.ill-bubble.is-left::after { left: auto; right: -.5cqw; bottom: 50%; margin: 0 0 -.6cqw; }
.ill-chart-foot { display: flex; justify-content: space-between; align-items: flex-end; gap: 1cqw; }
.ill-chart-value { display: grid; gap: .3cqw; line-height: 1; }
.ill-chart-value b { font-size: 4.2cqw; font-weight: 500; letter-spacing: -.03em; color: #fff; }
.ill-chart-value small { font-size: 1.3cqw; color: var(--gray); }
.ill-legend { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: .8cqw; row-gap: .4cqw; font-size: 1.3cqw; color: var(--gray); }
.ill-legend i { display: block; width: 2.6cqw; height: 0; border-top: 2px solid var(--accent); }
.ill-legend i.is-without { border-top: 2px dashed #5a5a64; }
.ill-month-now { position: absolute; right: 2.2cqw; bottom: 2.2cqw; font-family: var(--mono); font-size: 1.3cqw; color: var(--gray-deep); display: none; }
@media (max-width: 991px) { .svc-ill { font-size: 3cqw; } }

/* Eigener Mauszeiger (nur Maus-Geräte, per JS aktiviert): Kreis + Punkt exakt auf der Mausposition.
   Zentrierung über ganzzahlige Ränder (keine -50%-Verschiebung) → keine halben Pixel, keine Unschärfe */
@property --s { syntax: "<length>"; inherits: false; initial-value: 24px; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input, .has-cursor textarea, .has-cursor select, .has-cursor [contenteditable] { cursor: text !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 2147483000; width: 0; height: 0; pointer-events: none; opacity: 0; will-change: transform; contain: layout style; transition: opacity .12s linear; }
.cursor.is-visible { opacity: 1; }
.cursor-ring { --s: 24px; position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: 50%; border: 1px solid #fff; box-shadow: 0 0 0 1px rgba(1, 0, 4, .22), inset 0 0 0 1px rgba(1, 0, 4, .12); display: grid; place-items: center; transition: --s .2s cubic-bezier(.2, .8, .2, 1), background-color .2s, border-color .2s, box-shadow .2s, transform .12s; }
.cursor-ring.is-down { transform: scale(.84); }
.cursor-dot { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(1, 0, 4, .22); transition: opacity .15s, background-color .2s, transform .2s; }
.cursor-label { font-size: 12px; font-weight: 500; letter-spacing: .01em; color: #fff; opacity: 0; transition: opacity .15s; white-space: nowrap; }
/* über Links & Buttons */
.cursor-ring[data-state="link"] { --s: 44px; border-color: var(--accent); background: rgba(255, 88, 65, .14); box-shadow: none; }
.cursor-ring[data-state="link"] .cursor-dot { background: var(--accent); box-shadow: none; transform: scale(1.25); }
/* über verlinkten Projektbildern / Bildkugel */
.cursor-ring[data-state="view"], .cursor-ring[data-state="drag"] { --s: 84px; border-color: transparent; background: var(--accent); box-shadow: none; }
.cursor-ring[data-state="view"] .cursor-label, .cursor-ring[data-state="drag"] .cursor-label { opacity: 1; }
.cursor-ring[data-state="view"] .cursor-dot, .cursor-ring[data-state="drag"] .cursor-dot { opacity: 0; }
/* in Formularfeldern: normaler Text-Cursor */
.cursor-ring[data-state="text"] { opacity: 0; }

/* ===== Handy-Optimierungen ===== */
.services-dots { display: none; }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
@media (max-width: 991px) {
  /* Über Webflott: rastet auch auf Tablet/Handy ein, Text wird beim Scrollen weiß */
  .about-truck { height: 230vh; }
  .about-camera { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; padding: 84px 0 28px; justify-content: center; gap: 28px; }
  .about-story-text { font-size: clamp(24px, 6.4vw, 38px); line-height: 1.16; }
  .about-label { position: static; display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
  .about-label .section-label { margin: 0; }
  .about-progress { display: block; width: 56px; }
  .about-details { grid-template-columns: 1fr; gap: 20px; }
  .about-gallery { height: 170px; }
}
@media (max-width: 991px) and (max-height: 760px) { .about-gallery { display: none; } }
@media (max-width: 767px) {
  /* Hero: Inhalt nach oben, kein leerer Bereich */
  .hero { min-height: 0; align-items: flex-start; padding: 108px 0 44px; }
  .hero-inner { gap: 28px; }

  /* Leistungen: Tabs + seitlich wischbare Karten */
  .services-section { padding-top: var(--sec-m); }
  .services-sticky-inner { gap: 14px; }
  .services-titles { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--pad-x) * -1); padding: 2px var(--pad-x); position: relative; }
  .services-titles::-webkit-scrollbar { display: none; }
  .services-titles li { flex: none; }
  .services-title { font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 1; text-transform: none; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--pill); border: 1px solid var(--line-2); color: var(--gray); }
  .services-num { padding-top: 0; font-size: 11px; }
  .services-title.is-current { background: var(--white); border-color: var(--white); color: var(--black); }
  .services-title.is-current .services-num { color: var(--accent); }
  .services-items { position: relative; display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--pad-x) * -1); padding: 4px var(--pad-x) 0; scroll-padding: 0 var(--pad-x); -webkit-overflow-scrolling: touch; }
  .services-items::-webkit-scrollbar { display: none; }
  .services-item-wrap { flex: 0 0 86%; display: flex; align-items: stretch; scroll-snap-align: start; scroll-margin-top: 0; }
  .services-item { height: 100%; }
  .services-dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
  .services-dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--gunmetal); transition: width .3s var(--ease), background-color .3s; }
  .services-dots i.is-on { width: 22px; background: var(--accent); }
}

/* Animations-Startzustände (nur mit JS, verhindert Aufblitzen; ohne JS alles sichtbar) */
.js [fade-up="true"], .js [fade="true"], .js [group-fade-up-item="true"], .js [data-hero-contact], .js .hero-down { opacity: 0; }
.js [title-anim="true"], .js [zoom-out="true"], .js [data-hero-title] { visibility: hidden; }
.js .tag-cycle [anim-two-item], .js .tag-cycle [anim-three-item] { opacity: 0; }
.is-ready [title-anim="true"], .is-ready [zoom-out="true"], .is-ready [data-hero-title] { visibility: visible; }
@media (prefers-reduced-motion: reduce) {
  .marquee-group { animation-duration: 90s; }
}