/* Erzeugt von daten/css_teilen.py, nicht von Hand aendern. Quelle: style.css */
@font-face{
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-normal-100-900-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212;
}
@font-face{
font-family: "Archivo";
font-style: normal;
font-weight: 100 900;
font-stretch: 62% 125%;
font-display: swap;
src: url("../fonts/archivo-normal-100-900-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0;
}
@font-face{
font-family: "Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/plexmono-normal-400-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face{
font-family: "Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("../fonts/plexmono-normal-500-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
@font-face{
font-family: "Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("../fonts/plexmono-normal-600-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+2000-206F, U+20AC;
}
:root{
--bg: #f5f7fb;
--surface: #ffffff;
--ink: #0c1626;
--ink-2: #46536b;
--line: #dde4ef;
--blue: #2f4d9e;
--blue-deep: #223a7c;
--teal: #2fa3ba;
--teal-ink: #1e7b90;
--grad: linear-gradient(115deg, var(--blue) 10%, var(--teal-ink) 90%);
--dark: #0a1322;
--dark-2: #0e1a30;
--dark-line: rgba(255, 255, 255, 0.09);
--dark-text: #b9c4d8;
--ok: #2ec98b;
--info: #4f8ef7;
--font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
--font-mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
--radius: 16px;
--radius-sm: 10px;
--shadow: 0 1px 2px rgba(12, 22, 38, 0.05), 0 12px 32px -12px rgba(12, 22, 38, 0.12);
--shadow-lg: 0 2px 4px rgba(12, 22, 38, 0.06), 0 24px 56px -16px rgba(34, 58, 124, 0.22);
--wrap: 1180px;
}
*, *::before, *::after{ box-sizing: border-box; margin: 0; padding: 0; }
html{
scroll-behavior: smooth;
scroll-padding-top: 96px;
scrollbar-color: var(--teal) #0d1930;
}
body{
font-family: var(--font-sans);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }
.wrap{ max-width: var(--wrap); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); }
section, .footer, .hero{ overflow-x: clip; }
::selection{ background: rgba(47, 163, 186, 0.25); }
h1, h2, h3{ line-height: 1.12; letter-spacing: -0.022em; text-wrap: balance; }
h1{
font-size: clamp(2.5rem, 5.4vw, 4.1rem);
font-weight: 740;
font-stretch: 108%;
}
h2{
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 720;
font-stretch: 106%;
}
.grad{
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.kicker{
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blue);
margin-bottom: 1.1rem;
}
.kicker--light{ color: #7fd0e0; }
.kicker--center{ text-align: center; }
:focus-visible{
outline: 2px solid var(--teal-ink);
outline-offset: 3px;
}
.skip{
position: fixed;
top: 14px; left: 14px;
z-index: 300;
background: var(--ink);
color: #fff;
font-weight: 600;
padding: 0.8rem 1.3rem;
border-radius: 99px;
transform: translateY(-250%);
transition: transform 0.2s ease;
}
.sr-only{
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.dot{
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-2);
flex: none;
}
.dot--ok{ background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.18); }
.dot--info{ background: var(--info); box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18); }
.btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 620;
line-height: 1;
padding: 1rem 1.8rem;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.btn--primary{
background: var(--grad);
color: #fff;
box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.55);
}
.btn--primary:hover{ transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(47, 77, 158, 0.65); }
.btn--ghost{
border-color: var(--line);
background: var(--surface);
color: var(--ink);
}
.btn--ghost:hover{ border-color: var(--blue); transform: translateY(-2px); }
.btn--ghost-light{
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn--ghost-light:hover{ border-color: #fff; }
.btn--small{ padding: 0.72rem 1.15rem; font-size: 0.92rem; }
@property --nav-angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.nav{
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
padding: 14px clamp(0.9rem, 3vw, 2rem) 0;
pointer-events: none;
transform: translateZ(0);
will-change: transform;
backface-visibility: hidden;
transition: transform 0.38s ease, opacity 0.3s ease;
}
.nav__inner{
position: relative;
pointer-events: auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
max-width: var(--wrap);
margin-inline: auto;
padding: 0.6rem 0.9rem 0.6rem 1.4rem;
border-radius: 999px;
background: rgba(245, 247, 251, 0.78);
border: 1px solid rgba(12, 22, 38, 0.08);
box-shadow: 0 12px 34px -14px rgba(12, 22, 38, 0.25);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
transform: translateZ(0);
backface-visibility: hidden;
transition: background-color 0.3s ease, border-color 0.3s ease;
}
.nav__inner::before{
content: "";
--nav-angle: 0deg;
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1.6px;
background: conic-gradient(
from var(--nav-angle),
transparent 0turn 0.62turn,
rgba(63, 214, 232, 0.0) 0.68turn,
rgba(63, 214, 232, 0.55) 0.78turn,
#3fd6e8 0.86turn,
rgba(111, 149, 232, 0.9) 0.93turn,
transparent 0.995turn
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: navlaser 5.5s linear infinite;
transform: translateZ(0);
will-change: transform;
pointer-events: none;
}
.nav__brand{ display: flex; align-items: center; gap: 0.18rem; }
.nav__brand img{ width: 36px; height: 36px; }
.nav__brandname{ font-size: 1.42rem; font-weight: 750; font-stretch: 105%; letter-spacing: -0.015em; margin-top: 0.1em; }
.nav__branddot{ color: var(--teal); }
.nav__links{ display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav__links a,
.nav__links button.nav__gruppenlink{
font-size: 0.97rem;
font-weight: 550;
color: var(--ink-2);
transition: color 0.15s ease;
}
.nav__links a:hover,
.nav__links button.nav__gruppenlink:hover{ color: var(--ink); }
.nav__actions{ display: flex; align-items: center; gap: 0.9rem; }
.nav__burger{
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px; height: 42px;
background: none;
border: 1px solid rgba(12, 22, 38, 0.12);
border-radius: 50%;
padding: 10px;
cursor: pointer;
}
.nav__burger span{
display: block;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav.is-open .nav__burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2){ opacity: 0; transform: scaleX(0); visibility: hidden; }
.nav.is-open .nav__burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
.nav__mobile{
display: none;
pointer-events: auto;
flex-direction: column;
gap: 0.4rem;
max-width: var(--wrap);
margin: 0.6rem auto 0;
padding: 1rem 1.4rem 1.4rem;
border-radius: 22px;
background: rgba(245, 247, 251, 0.96);
border: 1px solid rgba(12, 22, 38, 0.08);
box-shadow: 0 24px 50px -18px rgba(12, 22, 38, 0.35);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.nav__mobile a:not(.btn){
padding: 0.65rem 0.25rem;
font-weight: 550;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.nav__mobile .btn{ margin-top: 0.9rem; }
.nav.is-open .nav__mobile{ display: flex; }
.nav__logo--light{ display: none; }
.nav--dark .nav__logo--dark{ display: none; }
.nav--dark .nav__logo--light{ display: block; }
.nav--dark .nav__inner{
background: rgba(10, 20, 38, 0.55);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 40px -14px rgba(0, 0, 0, 0.6);
}
.nav--dark .nav__brandname{ color: #fff; }
.nav--dark .nav__links a,
.nav--dark .nav__links button.nav__gruppenlink{ color: #b9c4d8; }
.nav--dark .nav__links a:hover,
.nav--dark .nav__links button.nav__gruppenlink:hover{ color: #fff; }
.nav--dark .nav__burger{ border-color: rgba(255, 255, 255, 0.2); }
.nav--dark .nav__burger span{ background: #fff; }
.nav--dark .nav__mobile{
background: rgba(10, 18, 34, 0.97);
border-color: rgba(255, 255, 255, 0.1);
}
.nav--dark .nav__mobile a:not(.btn){ color: #b9c4d8; border-color: rgba(255, 255, 255, 0.08); }
.nav.is-scrolled .nav__inner{
background: rgba(245, 247, 251, 0.97);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav--dark.is-scrolled .nav__inner{
background: rgba(10, 18, 34, 0.95);
}
.hero{
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
background: var(--dark);
color: #fff;
}
.hero__particles{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: translateZ(0);
}
.hero__bg{
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(52rem 34rem at 78% 12%, rgba(47, 163, 186, 0.16), transparent 62%),
radial-gradient(44rem 30rem at 4% 90%, rgba(47, 77, 158, 0.22), transparent 62%),
radial-gradient(30rem 20rem at 50% 110%, rgba(79, 142, 247, 0.1), transparent 70%);
}
.hero__bg::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
}
.hero__bg::after{
content: "";
position: absolute;
inset: 0;
opacity: 0.05;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.6"/></svg>');
}
.hero__grid{
position: relative;
z-index: 2;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
gap: clamp(2rem, 4.5vw, 4rem);
align-items: center;
flex: 1;
padding-top: clamp(6rem, 13vh, 8rem);
padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
width: 100%;
}
.hero .wrap{ max-width: 1260px; }
.hero__l1{
display: block;
font-size: 0.55em;
font-weight: 600;
font-stretch: 100%;
letter-spacing: 0.035em;
color: #cfdcef;
margin-bottom: 0.3em;
}
.hero h1{
font-size: clamp(2.05rem, 3.7vw, 3.4rem);
font-stretch: 100%;
letter-spacing: -0.028em;
line-height: 1.1;
white-space: nowrap;
}
.grad-glow{
background: linear-gradient(115deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 26px rgba(63, 214, 232, 0.3));
}
@property --badge-angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.hero__badge{
position: relative;
display: inline-flex;
align-items: stretch;
gap: 0;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #cfe0f2;
background: rgba(10, 20, 38, 0.55);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 99px;
padding: 0;
margin-bottom: 1.6rem;
overflow: hidden;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.hero__badge::before{
content: "";
--badge-angle: 0deg;
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 1.4px;
background: conic-gradient(
from var(--badge-angle),
transparent 0turn 0.7turn,
rgba(63, 214, 232, 0.5) 0.82turn,
#3fd6e8 0.9turn,
transparent 0.995turn
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
animation: badgelaser 7s linear infinite;
transform: translateZ(0);
will-change: transform;
pointer-events: none;
}
.hero__badge::after{
content: "";
position: absolute;
top: 0; bottom: 0;
left: -60%;
width: 45%;
background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
transform: translateX(0) skewX(-12deg);
opacity: 0;
animation: badgeshine 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
pointer-events: none;
will-change: transform, opacity;
}
.hero__badge-status{
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 0.95rem 0.6rem 1.1rem;
background: rgba(46, 201, 139, 0.1);
border-right: 1px solid rgba(255, 255, 255, 0.1);
color: #4be3a8;
font-weight: 600;
}
.hero__badge-ping{
position: relative;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ok);
flex: none;
}
.hero__badge-ping::after{
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid rgba(46, 201, 139, 0.7);
animation: ping 1.8s cubic-bezier(0, 0.6, 0.4, 1) infinite;
}
.hero__badge-text{
display: inline-flex;
align-items: center;
gap: 0.55rem;
padding: 0.6rem 1.15rem 0.6rem 0.95rem;
}
.hero__badge-text i{ font-style: normal; color: rgba(255, 255, 255, 0.35); }
.hero__type{
display: flex;
align-items: center;
margin-top: 1.2rem;
font-family: var(--font-mono);
font-size: clamp(1.05rem, 1.7vw, 1.35rem);
font-weight: 600;
color: #3fd6e8;
height: 1.6em;
overflow: hidden;
white-space: nowrap;
}
.hero__caret{
width: 2px;
height: 1.15em;
margin-left: 3px;
background: #3fd6e8;
animation: caret 0.9s steps(1) infinite;
}
.hero__sub{
font-size: clamp(1.05rem, 1.5vw, 1.18rem);
color: var(--dark-text);
max-width: 32em;
margin-top: 1.2rem;
}
.hero__cta{ display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero__trust{
display: flex;
align-items: center;
gap: 0.6rem;
margin-top: 1.9rem;
font-family: var(--font-mono);
font-size: 0.8rem;
color: #8b98af;
}
.hero__orbit{
position: absolute;
top: 50%; left: 50%;
border: 1px dashed rgba(127, 208, 224, 0.16);
border-radius: 50%;
transform: translate(-50%, -50%);
opacity: 0;
animation: orbit 40s linear infinite, orbitin 0.9s ease 0.7s forwards;
pointer-events: none;
}
.hero__orbit i{
position: absolute;
top: -3px; left: 50%;
width: 6px; height: 6px;
border-radius: 50%;
background: #3fd6e8;
box-shadow: 0 0 12px 2px rgba(63, 214, 232, 0.55);
}
.hero__orbit--1{ width: 115%; aspect-ratio: 1; }
.hero__orbit--2{
width: 138%;
aspect-ratio: 1;
animation: orbit 64s linear reverse infinite, orbitin 0.9s ease 0.85s forwards;
border-color: rgba(79, 142, 247, 0.13);
}
.hero__orbit--2 i{ background: #5b83e0; box-shadow: 0 0 12px 2px rgba(91, 131, 224, 0.55); }
.hero__marquee{
position: relative;
z-index: 2;
overflow: hidden;
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(255, 255, 255, 0.02);
animation: risein 0.8s cubic-bezier(0.3, 1.25, 0.45, 1) 0.7s backwards;
}
.hero__marquee-track{
--mq-gap: 2.2rem;
display: flex;
align-items: center;
gap: var(--mq-gap);
width: max-content;
padding: 0.95rem 0;
animation: marquee 40s linear infinite;
will-change: transform;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
.hero__marquee-track span{
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8b98af;
white-space: nowrap;
}
.hero__marquee-track i{ font-style: normal; font-size: 0.5rem; color: #2fa3ba; }
.hero__marquee:hover .hero__marquee-track{ animation-play-state: paused; }
.bootfx{ display: none; }
html.intro .bootfx{
display: block;
position: fixed;
inset: 0;
z-index: 400;
background: rgba(10, 19, 34, 0.22);
pointer-events: none;
animation: bootout 0.5s ease 1.75s forwards;
}
html.intro .bootfx canvas{ width: 100%; height: 100%; display: block; }
html.intro .hero [data-explode]{ animation-delay: calc(var(--ed, 0s) + 1.7s); }
html.intro .hero__marquee{ animation-delay: 2.25s; }
html.intro .hero__orbit--1{ animation-delay: 0s, 2.25s; }
html.intro .hero__orbit--2{ animation-delay: 0s, 2.35s; }
.orbwrap{
position: relative;
aspect-ratio: 1;
max-width: 600px;
margin-inline: auto;
}
.orbwrap canvas{
position: absolute;
inset: -26%;
width: 152%;
height: 152%;
}
.orbwrap__glow{
position: absolute;
inset: 8%;
border-radius: 50%;
background:
radial-gradient(circle at 38% 42%, rgba(47, 77, 158, 0.5), transparent 55%),
radial-gradient(circle at 64% 58%, rgba(63, 214, 232, 0.34), transparent 55%);
filter: blur(46px);
animation: orbglow 5.5s ease-in-out infinite alternate;
pointer-events: none;
}
.orbwrap__tilt--glass{ position: relative; }
.orbwrap__tilt--glass > i{
position: absolute;
inset: 0;
-webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
mask: url("../img/adence_logo.webp") center / contain no-repeat;
pointer-events: none;
}
.orbwrap__tilt--glass::before{
content: "";
display: block;
padding-top: 100%;
}
.g-disp{
transform: translateZ(10px);
background:
radial-gradient(circle at 16% 18%, rgba(52, 86, 240, 1), transparent 68%),
radial-gradient(circle at 86% 84%, rgba(38, 220, 240, 1), transparent 66%),
radial-gradient(circle at 66% 8%, rgba(140, 96, 255, 0.65), transparent 58%);
filter: blur(16px) saturate(1.35);
opacity: 0.95;
}
.g-edge{
transform: translateZ(21px);
background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(200, 245, 255, 0.6) 45%, rgba(150, 220, 255, 0.45) 75%, rgba(255, 255, 255, 0.55));
-webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
-webkit-mask-size: 100%, 99%;
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, center;
-webkit-mask-composite: source-out;
mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
mask-size: 100%, 98.6%;
mask-repeat: no-repeat, no-repeat;
mask-position: center, center;
mask-composite: subtract;
mix-blend-mode: screen;
opacity: 0.9;
}
.g-frost{
transform: translateZ(12px);
-webkit-backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) 60%, rgba(255, 255, 255, 0.025));
}
.g-body{
transform: translateZ(calc(12px - var(--i) * 1.6px));
background: linear-gradient(150deg, rgba(120, 175, 255, 0.09), rgba(90, 215, 235, 0.07));
opacity: calc(0.08 - var(--i) * 0.009);
}
.g-tint{
transform: translateZ(13px);
background-image: url("../img/adence_logo.webp");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
opacity: 0.08;
filter: saturate(2) brightness(1.2);
mix-blend-mode: screen;
}
.g-ab{
transform: translateZ(14px);
mix-blend-mode: screen;
opacity: 0.3;
-webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
-webkit-mask-size: contain, contain;
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-composite: source-out;
mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
mask-size: contain, contain;
mask-repeat: no-repeat, no-repeat;
mask-composite: subtract;
}
.g-ab--r{
background: rgba(255, 90, 140, 0.85);
-webkit-mask-position: center, calc(50% + 3px) calc(50% + 2px);
mask-position: center, calc(50% + 3px) calc(50% + 2px);
}
.g-ab--b{
background: rgba(80, 190, 255, 0.9);
-webkit-mask-position: center, calc(50% - 3px) calc(50% - 2px);
mask-position: center, calc(50% - 3px) calc(50% - 2px);
}
.g-inner{
transform: translateZ(15px);
background: linear-gradient(135deg, transparent 40%, rgba(6, 16, 40, 0.55) 85%, rgba(4, 10, 28, 0.8));
-webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
-webkit-mask-size: contain, contain;
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, calc(50% - 9px) calc(50% - 9px);
-webkit-mask-composite: source-out;
mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
mask-size: contain, contain;
mask-repeat: no-repeat, no-repeat;
mask-position: center, calc(50% - 9px) calc(50% - 9px);
mask-composite: subtract;
filter: blur(3px);
opacity: 0.68;
}
.g-rim{
transform: translateZ(16px);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(190, 240, 255, 0.42) 40%, rgba(120, 200, 255, 0.14) 70%, transparent);
opacity: 0.6;
-webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
-webkit-mask-size: contain, contain;
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
-webkit-mask-composite: source-out;
mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
mask-size: contain, contain;
mask-repeat: no-repeat, no-repeat;
mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
mask-composite: subtract;
mix-blend-mode: screen;
}
.g-gloss{
transform: translateZ(17px);
background:
linear-gradient(118deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 44%),
linear-gradient(118deg, transparent 64%, rgba(120, 220, 255, 0.16) 88%, rgba(255, 255, 255, 0.2) 100%);
mix-blend-mode: screen;
opacity: 0.26;
}
.g-spec{
transform: translateZ(18px);
background:
radial-gradient(18% 9% at 30% 12%, rgba(255, 255, 255, 0.95), transparent 72%),
radial-gradient(9% 6% at 62% 23%, rgba(255, 255, 255, 0.5), transparent 72%),
radial-gradient(13% 7% at 73% 83%, rgba(180, 240, 255, 0.4), transparent 72%);
filter: blur(1.2px);
mix-blend-mode: screen;
opacity: 0.55;
}
.g-cast{
transform: translateZ(-26px) translate(12px, 18px);
background: rgba(4, 10, 26, 0.7);
filter: blur(30px);
opacity: 0.45;
}
.orbwrap__aurora{
position: absolute;
top: 50%; left: 50%;
width: 118%; aspect-ratio: 1;
transform: translate(-50%, -50%);
border-radius: 50%;
background:
radial-gradient(circle at 30% 32%, rgba(52, 86, 240, 1), transparent 62%),
radial-gradient(circle at 72% 70%, rgba(38, 220, 240, 0.98), transparent 60%),
radial-gradient(circle at 58% 22%, rgba(140, 96, 255, 0.6), transparent 55%);
filter: blur(20px);
opacity: 0;
transition: opacity 1.2s ease 0.2s;
animation: auroradrift 12s ease-in-out infinite alternate;
pointer-events: none;
}
.orbwrap.is-final .orbwrap__aurora{ opacity: 1; }
.g-lens{
transform: translateZ(11px);
-webkit-backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
-webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
-webkit-mask-size: contain, contain;
-webkit-mask-repeat: no-repeat, no-repeat;
-webkit-mask-position: center, center;
-webkit-mask-composite: source-out;
mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
mask-size: 100%, 88%;
mask-repeat: no-repeat, no-repeat;
mask-position: center, center;
mask-composite: subtract;
}
.orbwrap__rings{
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
transition: opacity 1.2s ease 0.3s;
pointer-events: none;
}
.orbwrap.is-final .orbwrap__rings{ opacity: 1; }
.orbwrap__rings i{
position: absolute;
border-radius: 50%;
border: 1px solid rgba(127, 208, 224, 0.28);
animation: ringpulse 5s ease-in-out infinite;
}
.orbwrap__rings i:nth-child(1){ width: 54%; aspect-ratio: 1; }
.orbwrap__rings i:nth-child(2){
width: 72%; aspect-ratio: 1;
border-color: rgba(88, 122, 224, 0.22);
animation-delay: 1.2s;
}
.orbwrap__rings i:nth-child(3){
width: 92%; aspect-ratio: 1;
border-style: dashed;
border-color: rgba(127, 208, 224, 0.14);
animation-delay: 2.4s;
animation-duration: 6.5s;
}
.orbwrap__final{
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0;
transform: scale(0.985);
transition: opacity 1.05s cubic-bezier(0.33, 0, 0.2, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
pointer-events: none;
}
.orbwrap.is-final .orbwrap__final{ opacity: 1; transform: none; }
.orbwrap__final::after{
content: "";
position: absolute;
inset: -6%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%, rgba(200, 245, 255, 0.85), rgba(120, 190, 255, 0.35) 45%, transparent 68%);
opacity: 0;
pointer-events: none;
mix-blend-mode: screen;
}
.orbwrap.is-final .orbwrap__final::after{ animation: logobloom 1.15s cubic-bezier(0.2, 0, 0.2, 1) forwards; }
.orbwrap.is-final .orbwrap__glow{
inset: -4%;
animation: orbglowfinal 4.5s ease-in-out infinite alternate;
}
.orbwrap canvas{ transition: opacity 0.9s ease, filter 0.9s ease; }
.orbwrap.is-final canvas{
opacity: 0;
filter: blur(13px);
transition: opacity 0.95s cubic-bezier(0.4, 0, 0.25, 1) 0.2s, filter 0.95s ease 0.2s;
}
.orbwrap__logo{
position: relative;
width: 54%;
animation: logofloat 7s ease-in-out infinite;
}
.orbwrap__final{ perspective: 900px; }
.orbwrap__tilt{
position: relative;
transform-style: preserve-3d;
animation: logosway 9s ease-in-out infinite;
transition: transform 0.25s ease-out;
}
.orbwrap__tilt.is-tilting{ animation: none; }
.hero__system{ position: relative; perspective: 1400px; }
.sys{
container-type: inline-size;
position: relative;
aspect-ratio: 660 / 600;
max-width: 640px;
margin-inline: auto;
transform-style: preserve-3d;
transition: transform 0.25s ease-out;
will-change: transform;
backface-visibility: hidden;
}
.sys__node{ cursor: default; }
.sys .sys__node.is-zoom{
border-color: rgba(63, 214, 232, 0.85);
transform: scale(1.85);
z-index: 6;
animation-play-state: paused;
}
.sys .sys__node.is-zoom::after{ opacity: 1; }
.sys__node--web{ transform-origin: top left; --fa: 10px; --fb: 14px; --fd: 26s; }
.sys__node--crm{ transform-origin: top right; --fa: 13px; --fb: 9px; --fd: 30s; }
.sys__node--ki{ transform-origin: center center; --fa: 8px; --fb: 11px; --fd: 24s; }
.sys__node--task{ transform-origin: bottom left; --fa: 11px; --fb: 13px; --fd: 32s; }
.sys__node--dash{ transform-origin: bottom right; --fa: 14px; --fb: 9px; --fd: 28s; }
.hero [data-explode]{
animation: assemble 0.95s cubic-bezier(0.3, 1.25, 0.45, 1) var(--ed, 0s) backwards;
}
.sys__lines{
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
opacity: 0;
animation: linesin 0.7s ease 1.15s forwards;
transform: translateZ(0);
}
.sys__lines path{
stroke: url(#beam);
stroke-opacity: 0.8;
stroke-width: 1.8;
stroke-dasharray: 7 9;
animation: dashflow 1.2s linear infinite;
}
.sys__pulse--teal{ fill: #3fd6e8; filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.9)); }
.sys__pulse--blue{ fill: #6f95e8; filter: drop-shadow(0 0 6px rgba(111, 149, 232, 0.9)); }
.sys__node{
position: absolute;
background: rgba(13, 25, 46, 0.9);
border: 1px solid rgba(127, 208, 224, 0.16);
border-radius: var(--radius);
box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6);
padding: 2.8cqw 3.1cqw;
transition:
border-color 0.35s ease,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
transform: translateZ(0);
will-change: transform;
}
.sys__node::after{
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
box-shadow:
0 0 0 3px rgba(63, 214, 232, 0.16),
0 0 70px -8px rgba(63, 214, 232, 0.55),
0 46px 100px -22px rgba(0, 0, 0, 0.85);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.sys__node.is-active{
border-color: rgba(63, 214, 232, 0.7);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.12), 0 0 34px -4px rgba(63, 214, 232, 0.35), 0 20px 50px -18px rgba(0, 0, 0, 0.6);
transform: translateY(-3px);
}
.sys__node--web{ left: 3.6%; top: 5%; width: 33.5%; }
.sys__node--crm{ left: 65%; top: 3%; width: 31.6%; }
.sys__node--ki{ left: 32%; top: 32%; width: 36.6%; }
.sys__node--task{ left: 3.6%; top: 64.5%; width: 34%; }
.sys__node--dash{ left: 63.5%; top: 56.5%; width: 33%; }
.sys__head{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1cqw;
margin-bottom: 1.6cqw;
}
.sys__tag{
font-family: var(--font-mono);
font-size: 1.7cqw;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7fd0e0;
}
.sys__status{
display: inline-flex;
align-items: center;
gap: 0.9cqw;
font-family: var(--font-mono);
font-size: 1.6cqw;
color: #8b98af;
}
.sys__status .dot, .sys__rail .dot{ width: 1.2cqw; height: 1.2cqw; }
.sys__title{ font-size: 2.5cqw; font-weight: 680; letter-spacing: -0.01em; color: #fff; }
.sys__form{ display: flex; flex-direction: column; gap: 1.3cqw; margin-top: 1.6cqw; }
.sys__line{
display: block;
height: 1.5cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.1);
}
.sys__line--w80{ width: 80%; }
.sys__line--w70{ width: 70%; }
.sys__line--w55{ width: 55%; }
.sys__line--w50{ width: 50%; }
.sys__btn{
align-self: flex-start;
background: var(--grad);
color: #fff;
font-size: 1.8cqw;
font-weight: 620;
padding: 1.1cqw 2.4cqw;
border-radius: 1.2cqw;
margin-top: 0.5cqw;
}
.sys__row{ display: flex; align-items: center; gap: 1.8cqw; margin-top: 1.8cqw; }
.sys__row > div{ flex: 1; display: flex; flex-direction: column; gap: 1.1cqw; }
.sys__avatar{
width: 5.4cqw; height: 5.4cqw;
flex: none;
border-radius: 50%;
background: rgba(63, 214, 232, 0.16);
color: #3fd6e8;
font-family: var(--font-mono);
font-size: 1.8cqw;
font-weight: 600;
display: grid;
place-items: center;
}
.sys__avatar--b{ background: rgba(111, 149, 232, 0.18); color: #9db7f2; }
.sys__assig{ font-family: var(--font-mono); font-size: 1.7cqw; color: #8b98af; }
.sys__chips{ display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.6cqw; }
.sys__chip{
font-family: var(--font-mono);
font-size: 1.6cqw;
padding: 0.8cqw 1.6cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.07);
color: #b9c4d8;
}
.sys__chip--hot{ background: rgba(63, 214, 232, 0.16); color: #3fd6e8; }
.sys__meter{
height: 1.4cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.1);
margin-top: 2cqw;
overflow: hidden;
}
.sys__meter span{
display: block;
height: 100%;
width: 86%;
border-radius: inherit;
background: var(--grad);
transform-origin: left center;
animation: meter 3.4s ease-in-out infinite alternate;
}
.sys__bars{ display: flex; align-items: flex-end; gap: 1.2cqw; height: 7cqw; margin-top: 1.6cqw; }
.sys__bars i{
flex: 1;
height: var(--h);
border-radius: 0.7cqw 0.7cqw 0 0;
background: linear-gradient(180deg, var(--teal), var(--blue));
opacity: 0.85;
transform-origin: bottom;
animation: bar 3s ease-in-out infinite alternate;
}
.sys__bars i:nth-child(2n){ animation-delay: 0.5s; }
.sys__bars i:nth-child(3n){ animation-delay: 0.9s; }
.sys__kpi{
font-family: var(--font-mono);
font-size: 1.7cqw;
font-weight: 600;
color: #3fd6e8;
margin-top: 1.2cqw;
}
.sys__rail{
position: absolute;
left: 3.6%; right: 3.4%; bottom: 0;
display: flex;
align-items: center;
gap: 3cqw;
background: rgba(13, 25, 46, 0.85);
border: 1px solid rgba(127, 208, 224, 0.22);
border-radius: var(--radius-sm);
padding: 1.9cqw 3cqw;
transition: box-shadow 0.4s ease;
}
.sys__rail.is-active{ box-shadow: 0 0 0 4px rgba(47, 163, 186, 0.18); }
.sys__rail .sys__tag{ color: #7fd0e0; }
.sys__railitem{
display: inline-flex;
align-items: center;
gap: 1cqw;
font-family: var(--font-mono);
font-size: 1.6cqw;
color: var(--dark-text);
}
.logos{
padding: clamp(2.5rem, 5vw, 4rem) 0;
border-block: 1px solid var(--line);
background: var(--surface);
}
.logos .kicker{ margin-bottom: 1.6rem; }
.logos__grid{
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: clamp(0.8rem, 1.6vw, 1.4rem);
align-items: center;
}
.logos__item{
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.9rem 1rem;
min-height: 74px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.logos__item:hover{ border-color: rgba(47, 163, 186, 0.4); transform: translateY(-2px); }
.logos__item img{
max-height: 44px;
width: auto;
filter: grayscale(1);
opacity: 0.6;
transition: filter 0.25s ease, opacity 0.25s ease;
}
.logos__item:hover img{ filter: none; opacity: 1; }
.logos--dunkel{
--dunkel-sektion: #142440;
border-block: 0;
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 140px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 140px),
radial-gradient(44rem 24rem at 82% 12%, rgba(63, 214, 232, 0.14), transparent 62%),
radial-gradient(38rem 22rem at 12% 88%, rgba(47, 77, 158, 0.3), transparent 62%),
var(--dunkel-sektion);
color: var(--dark-text);
}
.logos--dunkel .logos__item{
background: rgba(255, 255, 255, 0.94);
border-color: rgba(255, 255, 255, 0.14);
}
.logos--dunkel .logos__item img{ filter: none; opacity: 1; }
.logos--dunkel .logos__item:hover{
background: #fff;
border-color: rgba(63, 214, 232, 0.55);
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}
.logos--dunkel .logos__item:hover img{ filter: grayscale(1); opacity: 0.72; }
.section{ padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section--tint{ background: linear-gradient(180deg, #eef2f8, var(--bg)); }
.section--dark{
--dunkel-sektion: #142440;
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
radial-gradient(50rem 30rem at 85% 14%, rgba(63, 214, 232, 0.16), transparent 60%),
radial-gradient(40rem 26rem at 0% 86%, rgba(70, 110, 210, 0.2), transparent 60%),
var(--dunkel-sektion);
color: #fff;
}
.section__head{ max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--breit{ max-width: none; }
.section__head--breit > h2,
.section__head--breit > .kicker{ max-width: 46rem; }
.section__head--voll{ max-width: none; }
.section__head--voll > h2{ font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.section__head--marke{ max-width: none; }
.section__head--marke > h2{
font-size: clamp(1.9rem, 3.35vw, 3rem);
font-stretch: 100%;
letter-spacing: -0.03em;
line-height: 1.08;
white-space: nowrap;
}
@media (max-width: 900px){.section__head--marke > h2{
white-space: normal;
text-wrap: balance;
font-size: clamp(1.75rem, 6.4vw, 2.3rem);
}}
.section__intro{ font-size: 1.13rem; color: var(--ink-2); margin-top: 1.1rem; }
.section__intro--light{ color: var(--dark-text); }
.core{
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(1.8rem, 4vw, 4rem);
align-items: center;
padding: clamp(1.8rem, 3.5vw, 3rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 6px);
box-shadow: var(--shadow);
}
.core + .core{ margin-top: 1.4rem; }
.core--flip .core__copy{ order: 2; }
.core--flip .core__visual{ order: 1; }
.core__index{
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
color: var(--teal-ink);
margin-bottom: 0.6rem;
}
.core__index::after{ content: " /"; color: var(--line); }
.core h3{ font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 720; font-stretch: 106%; margin-bottom: 0.8rem; }
.core > .core__copy > p{ color: var(--ink-2); }
.ticks{ list-style: none; margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.ticks li{ position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.ticks li::before{
content: "";
position: absolute;
left: 0; top: 0.42em;
width: 15px; height: 15px;
border-radius: 50%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.4l2.7 2.7L12 5.6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 100% no-repeat,
linear-gradient(115deg, var(--blue), var(--teal));
}
.ticks--cols{ grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.ticks--cols li{ white-space: nowrap; }
@media (max-width: 620px){.ticks--cols{ grid-template-columns: 1fr; }.ticks--cols li{ white-space: normal; }}
.ticks--big{ gap: 0.9rem; }
.ticks--big li{ font-size: 1.13rem; color: var(--ink); padding-left: 2rem; }
.ticks--big li::before{ top: 0.35em; width: 18px; height: 18px; }
.mock{
background: #fbfcfe;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.mock__bar{
display: flex;
align-items: center;
gap: 6px;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--line);
background: #f2f5fa;
}
.mock__bar i{ width: 9px; height: 9px; border-radius: 50%; background: #d5dce8; }
.mock__url{
margin-left: 0.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-2);
background: #fff;
border: 1px solid var(--line);
border-radius: 99px;
padding: 0.15rem 0.8rem;
}
.mock__body{ padding: 1.3rem; }
.mock__hero{ display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
.mock__h{ width: 62%; height: 14px; border-radius: 99px; background: #dfe6f1; }
.mock__l{ height: 9px; border-radius: 99px; background: #e8edf5; }
.mock__l--w60{ width: 60%; }
.mock__pill{
align-self: flex-start;
margin-top: 0.4rem;
background: var(--grad);
color: #fff;
font-size: 0.78rem;
font-weight: 620;
padding: 0.45rem 1rem;
border-radius: 8px;
}
.mock__cols{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.mock__cols span{ height: 52px; border-radius: 8px; background: #eef2f9; border: 1px solid var(--line); }
.mock--app{ display: grid; grid-template-columns: 52px 1fr; }
.mock__side{ display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.8rem; background: var(--dark); }
.mock__side i{ width: 100%; aspect-ratio: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.mock__side i.is-on{ background: linear-gradient(115deg, var(--blue), var(--teal)); }
.mock__main{ padding: 1.1rem 1.2rem; }
.mock__kpis{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.mock__kpis span{
display: flex;
flex-direction: column;
gap: 0.15rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.6rem 0.7rem;
font-size: 0.68rem;
color: var(--ink-2);
}
.mock__kpis b{ font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }
.mock__rows{ display: flex; flex-direction: column; gap: 0.5rem; }
.mock__rows i{ height: 26px; border-radius: 6px; background: #eef2f9; border: 1px solid var(--line); }
.mock__rows i:first-child{ background: rgba(47, 163, 186, 0.1); border-color: rgba(47, 163, 186, 0.3); }
.mock--chat{ padding: 1.1rem 1.2rem; }
.mock__chathead{
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-2);
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1rem;
}
.mock__msg{
max-width: 88%;
font-size: 0.86rem;
line-height: 1.5;
padding: 0.65rem 0.9rem;
border-radius: 12px;
margin-bottom: 0.7rem;
}
.mock__msg--user{
margin-left: auto;
background: var(--grad);
color: #fff;
border-bottom-right-radius: 4px;
}
.mock__msg--ai{
background: #eef2f9;
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.mock__input{ height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; padding-inline: 0.9rem; }
.mock__input span{ width: 34%; height: 8px; border-radius: 99px; background: #e8edf5; }
.dsgpt{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.dsgpt h2{ font-size: clamp(1.9rem, 3vw, 2.6rem); }
.dmock{
background: var(--dark-2);
border: 1px solid var(--dark-line);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.dmock__top{
display: flex;
align-items: center;
gap: 1.2rem;
padding: 0.85rem 1.2rem;
border-bottom: 1px solid var(--dark-line);
}
.dmock__logo{
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.9rem;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dmock__tabs{ display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dmock__tabs i{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--dark-text);
padding: 0.3rem 0.7rem;
border-radius: 99px;
}
.dmock__tabs i.is-on{ background: rgba(47, 163, 186, 0.16); color: #7fd0e0; }
.dmock__body{ padding: 1.2rem; }
.dmock__msg{
font-size: 0.88rem;
line-height: 1.55;
padding: 0.7rem 1rem;
border-radius: 12px;
margin-bottom: 0.8rem;
max-width: 92%;
}
.dmock__msg--user{ margin-left: auto; background: rgba(79, 142, 247, 0.16); color: #dce6f7; border-bottom-right-radius: 4px; }
.dmock__msg--ai{ background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dark-line); color: var(--dark-text); border-bottom-left-radius: 4px; }
.dmock__model{
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
color: #7fd0e0;
margin-bottom: 0.45rem;
}
.dmock__stat{
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.4rem;
padding-top: 0.9rem;
border-top: 1px solid var(--dark-line);
}
.dmock__stat span{
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--dark-text);
}
.steps{
list-style: none;
--spalten: 4;
--luecke: 1.1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
counter-reset: step;
}
.steps > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.step{
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.7rem 1.5rem;
}
.step::before{
content: "";
position: absolute;
top: 2.35rem;
right: -1.1rem;
width: 1.1rem;
height: 2px;
background: repeating-linear-gradient(90deg, var(--teal) 0 4px, transparent 4px 8px);
}
.step:last-child::before{ display: none; }
.step__num{
display: inline-grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 12px;
background: var(--grad);
color: #fff;
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.85rem;
margin-bottom: 1rem;
}
.step h3{ font-size: 1.2rem; font-weight: 700; margin-bottom: 0.5rem; }
.step p{ color: var(--ink-2); font-size: 0.97rem; }
.ops{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.op{
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--dark-line);
border-radius: var(--radius);
padding: 1.6rem 1.5rem;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.op:hover{ background: rgba(255, 255, 255, 0.07); border-color: rgba(47, 163, 186, 0.4); }
.op h3{ font-size: 1.08rem; font-weight: 680; color: #fff; margin-bottom: 0.45rem; }
.op p{ color: var(--dark-text); font-size: 0.94rem; }
.stats{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.1rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stats > *{ flex: 1 1 10rem; max-width: 15rem; }
.stat{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem 1.2rem 1.3rem;
text-align: center;
}
.stat b{
display: block;
font-size: clamp(1.9rem, 3vw, 2.6rem);
font-weight: 760;
font-stretch: 106%;
letter-spacing: -0.02em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat b::after{ content: "+"; }
.stat span,
.stat .stat__label{
display: block;
margin-top: 0.35rem;
font-weight: 500;
line-height: 1.35;
text-wrap: balance;
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
}
.why{
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.why__team .team{ --spalten: 3; margin-top: 1.2rem; }
.member img{ border-radius: var(--radius); box-shadow: var(--shadow); }
.member figcaption{ margin-top: 0.7rem; }
.member b{ display: block; font-size: 0.98rem; }
.member span{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }
.posts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.post{
display: flex;
flex-direction: column;
gap: 0.9rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.7rem 1.5rem;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.post:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.lexikon{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 1.4rem;
background: linear-gradient(115deg, rgba(47, 77, 158, 0.07), rgba(47, 163, 186, 0.09));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.8rem 2rem;
}
.lexikon h3{ font-size: 1.25rem; font-weight: 720; margin-bottom: 0.3rem; }
.lexikon p{ color: var(--ink-2); }
.cta{
position: relative;
padding: clamp(5rem, 9vw, 8rem) 0;
background: var(--dark);
color: #fff;
text-align: center;
}
.cta__bg{
position: absolute;
inset: 0;
background:
linear-gradient(0deg, #071020 0, transparent 180px),
linear-gradient(180deg, var(--dark) 0, transparent 140px),
radial-gradient(42rem 26rem at 50% 12%, rgba(47, 163, 186, 0.18), transparent 65%),
radial-gradient(36rem 24rem at 15% 88%, rgba(47, 77, 158, 0.25), transparent 60%);
}
.cta__bg::after{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
}
.cta__inner{ position: relative; max-width: 46rem; }
.cta h2{ font-size: clamp(2rem, 4vw, 3.1rem); }
.cta p{ color: var(--dark-text); font-size: 1.13rem; margin-top: 1.1rem; }
.footer{ background: #071020; color: var(--dark-text); padding-top: clamp(3.5rem, 6vw, 5rem); }
.footer__grid{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: clamp(2rem, 4vw, 3.5rem);
padding-bottom: 3rem;
}
.footer__brand img{ width: 44px; height: 44px; margin-bottom: 1rem; }
.footer__claim{
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fd0e0;
margin-bottom: 0.8rem;
}
.footer__col h3{
font-size: 0.82rem;
font-family: var(--font-mono);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #fff;
margin-bottom: 1.1rem;
}
.footer__col a, .footer__col address{
display: block;
font-style: normal;
font-size: 0.95rem;
line-height: 1.9;
color: var(--dark-text);
transition: color 0.15s ease;
}
.footer__col a:hover{ color: #fff; }
.footer__bottom{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding-block: 1.4rem;
border-top: 1px solid var(--dark-line);
font-size: 0.85rem;
}
.footer__made{ display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-mono); font-size: 0.75rem; }
.totop{
position: fixed;
right: clamp(10px, 1.4vw, 22px);
bottom: 22px;
z-index: 90;
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--grad);
border: 1px solid transparent;
color: #fff;
cursor: pointer;
box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.65);
opacity: 0;
transform: translateY(16px) scale(0.8);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.totop.is-visible{
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.totop svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; }
.totop:hover{
transform: translateY(-3px) scale(1.12);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.rail{
position: fixed;
right: clamp(10px, 1.4vw, 22px);
top: 50%;
transform: translateY(-50%);
z-index: 90;
display: flex;
flex-direction: column;
gap: 10px;
}
.rail__btn{
position: relative;
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
background: rgba(10, 20, 38, 0.82);
border: 1px solid rgba(127, 208, 224, 0.3);
color: #9fdceb;
box-shadow: 0 10px 26px -10px rgba(0, 0, 0, 0.55);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease, box-shadow 0.3s ease;
}
.rail__btn svg{
width: 20px; height: 20px;
stroke: currentColor;
fill: none;
transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail__btn:hover{
transform: scale(1.22);
border-color: #3fd6e8;
color: #fff;
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.6);
z-index: 2;
}
.rail__btn:hover svg{ transform: scale(1.08) rotate(-8deg); }
.rail__btn::after{
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
border: 1.5px solid rgba(63, 214, 232, 0.6);
opacity: 0;
pointer-events: none;
}
.rail__btn:hover::after{ animation: ping 0.9s cubic-bezier(0, 0.6, 0.4, 1); }
.rail__label{
position: absolute;
right: calc(100% + 14px);
top: 50%;
transform: translateY(-50%) translateX(10px);
font-family: var(--font-mono);
font-size: 0.74rem;
font-weight: 600;
letter-spacing: 0.06em;
white-space: nowrap;
color: #eaf6fb;
background: rgba(10, 20, 38, 0.92);
border: 1px solid rgba(127, 208, 224, 0.3);
border-radius: 99px;
padding: 0.45rem 0.9rem;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.rail__btn:hover .rail__label, .rail__btn:focus-visible .rail__label{
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.rail__btn--cta{
background: var(--grad);
border-color: transparent;
color: #fff;
}
.rail__btn--cta:hover{ border-color: rgba(255, 255, 255, 0.6); }
.rail__sr{
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
@media (max-width: 1340px){.rail{
top: auto;
bottom: 12px;
right: 50%;
transform: translateX(50%);
flex-direction: row;
gap: 9px;
background: rgba(10, 20, 38, 0.75);
border: 1px solid rgba(127, 208, 224, 0.25);
border-radius: 999px;
padding: 7px;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.6);
}.rail__btn{ width: 42px; height: 42px; box-shadow: none; }.rail__btn svg{ width: 18px; height: 18px; }.rail__btn:hover{ transform: scale(1.12); }.rail__label{ display: none; }.totop{ bottom: 76px; right: 12px; width: 42px; height: 42px; }.totop svg{ width: 18px; height: 18px; }}
.section{ position: relative; }
.section:not(.section--dark)::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(40rem 26rem at 90% 0%, rgba(47, 163, 186, 0.08), transparent 60%),
radial-gradient(34rem 24rem at 2% 100%, rgba(47, 77, 158, 0.07), transparent 60%),
linear-gradient(rgba(47, 77, 158, 0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(47, 77, 158, 0.04) 1px, transparent 1px);
background-size: auto, auto, 46px 46px, 46px 46px;
}
.section:not(.section--dark)::after{
content: "";
position: absolute;
width: 360px;
aspect-ratio: 1;
right: -140px;
top: 50px;
border: 1.5px dashed rgba(47, 77, 158, 0.16);
border-radius: 50%;
animation: ringspin 70s linear infinite;
pointer-events: none;
}
.section--tint::after{
right: auto;
left: -150px;
top: auto;
bottom: 60px;
animation-direction: reverse;
border-color: rgba(47, 163, 186, 0.2);
}
.section > .wrap{ position: relative; z-index: 1; }
.spot{ position: relative; }
.spot::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 163, 186, 0.14), transparent 65%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.spot:hover::before{ opacity: 1; }
.section--dark .spot::before{
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(63, 214, 232, 0.13), transparent 65%);
}
.core .mock, .case .mock{
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s ease;
}
.core:hover .mock, .case:hover .mock{
transform: translateY(-3px) scale(1.01);
box-shadow: 0 6px 12px rgba(12, 22, 38, 0.06), 0 30px 70px -22px rgba(34, 58, 124, 0.34);
}
.core, .case{ transition: border-color 0.3s ease; }
.core:hover, .case:hover{ border-color: rgba(47, 163, 186, 0.45); }
.step{ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease; }
.step:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }
.step__num{ transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step:hover .step__num{ transform: rotate(-8deg) scale(1.12); }
.stat{ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.stat:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.45); }
.stat b{ transition: filter 0.3s ease; }
.stat:hover b{ filter: drop-shadow(0 0 14px rgba(47, 163, 186, 0.45)); }
.member{ overflow: visible; }
.member img{ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.member:hover img{
transform: translateY(-6px) scale(1.03);
box-shadow: 0 8px 16px rgba(12, 22, 38, 0.1), 0 30px 60px -18px rgba(34, 58, 124, 0.4);
}
.logos__item{ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease; }
.logos__item:hover{ transform: translateY(-4px); border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }
.op{ transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.op:hover{ transform: translateY(-4px); }
.lexikon{ transition: border-color 0.3s ease, box-shadow 0.35s ease; }
.lexikon:hover{ border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }
.dmock{ transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease; }
.dsgpt__visual:hover .dmock{
transform: translateY(-8px) rotate(0.4deg);
box-shadow: 0 40px 90px -22px rgba(0, 0, 0, 0.7), 0 0 50px -10px rgba(63, 214, 232, 0.25);
}
.dmock.play .dmock__msg{
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dmock.play .dmock__msg--user{ transform: translateX(16px); }
.dmock.play .dmock__msg.is-on{ opacity: 1; transform: none; }
.dmock__msg--ai{ position: relative; }
.dmock__msg--ai.is-typing .dmock__text,
.dmock__msg--ai.is-typing .dmock__model{ visibility: hidden; }
.dmock__dots{
position: absolute;
top: 0.95rem;
left: 1rem;
display: none;
gap: 5px;
}
.dmock__msg--ai.is-typing .dmock__dots{ display: flex; }
.dmock__dots i{
width: 7px; height: 7px;
border-radius: 50%;
background: #7fd0e0;
animation: chatdot 1s ease-in-out infinite;
}
.dmock__dots i:nth-child(2){ animation-delay: 0.15s; }
.dmock__dots i:nth-child(3){ animation-delay: 0.3s; }
.section__particles{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.cta{ overflow-x: clip; }
.cta .section__particles{ z-index: 0; }
html.js [data-reveal]{
opacity: 0;
translate: 0 22px;
scale: 0.985;
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s);
}
html.js [data-reveal].in{ opacity: 1; translate: none; scale: none; }
html.js [data-reveal][data-plx]{ translate: none; }
@media (max-width: 1080px){.steps{ --spalten: 2; }.step:nth-child(2)::before{ display: none; }.stats{ grid-template-columns: repeat(3, 1fr); }.logos__grid{ grid-template-columns: repeat(4, 1fr); }}
@media (max-width: 940px){.nav__links{ display: none; }.nav__burger{ display: flex; }.nav__actions .btn{ display: none; }.hero{ min-height: 0; }.hero__grid{ padding-top: 6.5rem; }.hero__grid{ grid-template-columns: minmax(0, 1fr); }.hero__system{ order: 2; }.hero__copy{ order: 1; }.hero h1{ font-size: clamp(2.05rem, 5vw, 2.6rem); }.core, .core--flip{ grid-template-columns: 1fr; }.core--flip .core__copy{ order: 1; }.core--flip .core__visual{ order: 2; }.dsgpt{ grid-template-columns: 1fr; }.why{ grid-template-columns: 1fr; }.posts{ grid-template-columns: 1fr; }.ops{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 620px){body{ font-size: 1rem; }.hero h1{ white-space: normal; text-wrap: balance; font-size: clamp(1.9rem, 8.4vw, 2.3rem); }.hero__l1{ font-size: 0.62em; margin-bottom: 0.25em; }.hero__type{ font-size: 1rem; }.hero__badge{
font-size: 0.64rem;
letter-spacing: 0.06em;
white-space: normal;
max-width: 100%;
}.hero__badge-status{ padding: 0.5rem 0.7rem 0.5rem 0.85rem; }.hero__badge-text{ flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.85rem; }.steps{ --spalten: 1; }.step::before{ display: none; }.stats{ grid-template-columns: 1fr 1fr; }.stat:last-child{ grid-column: 1 / -1; }.logos__grid{ grid-template-columns: repeat(2, 1fr); }.ops{ grid-template-columns: 1fr; }.why__team .team.team{ --spalten: 3; --luecke: 0.6rem; }.member b{ font-size: 0.82rem; }.hero__cta .btn{ width: 100%; }.lexikon{ padding: 1.5rem 1.3rem; }}
@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto; }html.js [data-reveal]{ opacity: 1; translate: none; scale: none; transition: none; }.sys__meter span, .sys__bars i{ animation: none; }.sys__pulse--teal, .sys__pulse--blue{ display: none; }.btn, .goal, .post, .case-sm{ transition: none; }.sys__node, .sys__rail, .sys__lines path,
.hero__orbit, .hero__marquee-track, .hero__caret{ animation: none; }.hero__particles{ display: none; }.orbwrap canvas{ display: none; }.orbwrap__final{ opacity: 1; transform: none; transition: none; }.orbwrap__final::after{ animation: none; opacity: 0; }.orbwrap__logo, .orbwrap__front{ animation: none; }.orbwrap__tilt{ animation: none; transition: none; }.orbwrap__glow{ animation: none; }.orbwrap__rings{ opacity: 1; transition: none; }.orbwrap__rings i{ animation: none; }.orbwrap__aurora{ animation: none; opacity: 0.9; transition: none; }.nav__inner::before{ animation: none; }.sys{ transition: none; }.sys__node{ transition: none; }.hero__badge::before, .hero__badge::after, .hero__badge-ping::after{ animation: none; }.rail__btn, .rail__btn svg, .rail__label{ transition: none; }.rail__btn:hover::after{ animation: none; }.totop{ transition: opacity 0.2s ease; transform: none; }.totop.is-visible{ transform: none; }.hero [data-explode], .hero .sys__node[data-explode]{ animation: none; }.section:not(.section--dark)::after{ animation: none; }.spot::before{ transition: none; }.core .mock, .case .mock, .step, .stat, .member img, .logos__item, .quote, .op, .dmock{ transition: none; }.sys__node::after{ transition: none; }.sys__lines{ animation: none; opacity: 1; }.hero__orbit, .hero__orbit--2{ animation: none; opacity: 1; }.hero__marquee{ animation: none; }.nav{ transition: none; }}
.scrollbeam{
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 210;
pointer-events: none;
}
.scrollbeam i{
display: block;
height: 100%;
background: linear-gradient(90deg, var(--blue), #3fd6e8);
box-shadow: 0 0 12px rgba(63, 214, 232, 0.75), 0 0 4px rgba(63, 214, 232, 0.9);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
.splitline .w{
display: inline-block;
overflow: hidden;
padding: 0.12em 0.06em 0.18em;
margin: -0.12em -0.06em -0.18em;
}
.splitline .w > *{
display: inline-block;
font-style: normal;
transform: translateY(120%) rotate(3deg);
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--wi, 0) * 0.11s);
}
.splitline.in .w > *{ transform: none; }
.deco-orb{
position: absolute;
width: clamp(260px, 34vw, 460px);
aspect-ratio: 1;
border-radius: 50%;
pointer-events: none;
filter: blur(58px);
opacity: 0.6;
z-index: 0;
}
.deco-orb--teal{ background: radial-gradient(circle at 40% 40%, rgba(47, 163, 186, 0.34), transparent 66%); }
.deco-orb--blue{ background: radial-gradient(circle at 60% 40%, rgba(47, 77, 158, 0.32), transparent 66%); }
.section--system{
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
radial-gradient(46rem 30rem at 10% 12%, rgba(47, 77, 158, 0.24), transparent 60%),
radial-gradient(52rem 34rem at 96% 82%, rgba(47, 163, 186, 0.16), transparent 62%),
var(--dunkel-sektion);
}
.section--system::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
}
.sysgrid{
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.sysgrid h2{ color: #fff; }
.section--system{ padding: 0; }
.sysstage{ position: relative; height: 205vh; }
.syspin{
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
align-items: center;
padding: clamp(4.5rem, 8vh, 6.5rem) 0 clamp(2rem, 4vh, 3.5rem);
}
.syspin > .wrap{ width: 100%; }
@media (max-width: 900px){.sysstage{ height: auto; }.syspin{ position: static; min-height: 0; padding: clamp(4.5rem, 8vw, 7.5rem) 0; }}
@media (prefers-reduced-motion: reduce){.sysstage{ height: auto !important; }.syspin{ position: static; min-height: 0; padding: 4rem 0; }}
.syswrap{ position: relative; perspective: 1400px; }
.syswrap .sys{ max-width: 600px; }
html.js .syswrap:not(.is-live) [data-explode]{ opacity: 0; }
html.js .syswrap:not(.is-live) .sys__lines{ opacity: 0; }
html.js .syswrap.is-live [data-explode]{
--b: clamp(0, calc((var(--bau, 0) - var(--bo, 0)) / 0.62), 1);
--bw: calc(var(--b) * var(--b) * (3 - 2 * var(--b)));
opacity: var(--bw);
transform:
translate(calc((1 - var(--bw)) * var(--ex, 0px)), calc((1 - var(--bw)) * var(--ey, 0px)))
rotate(calc((1 - var(--bw)) * var(--er, 0deg)))
scale(calc(var(--es, 0.85) + (1 - var(--es, 0.85)) * var(--bw)));
filter: blur(calc((1 - var(--bw)) * 8px));
}
html.js .syswrap.is-live.ist-bereit .sys .sys__node.is-zoom{
transform: scale(1.85);
filter: none;
opacity: 1;
}
html.js .syswrap.is-live .sys__node--ki{ --bo: 0; }
html.js .syswrap.is-live .sys__node--web{ --bo: 0.1; }
html.js .syswrap.is-live .sys__node--crm{ --bo: 0.16; }
html.js .syswrap.is-live .sys__node--task{ --bo: 0.24; }
html.js .syswrap.is-live .sys__node--dash{ --bo: 0.3; }
html.js .syswrap.is-live .sys__rail{ --bo: 0.36; }
html.js .syswrap.ist-gebaut .sys__node[data-explode]{
animation: floaty var(--fd, 8s) ease-in-out infinite;
}
html.js .syswrap.is-live .sys__lines{
opacity: clamp(0, calc((var(--bau, 0) - 0.42) / 0.3), 1);
animation: none;
}
.sysflow{ list-style: none; margin-top: 1.6rem; display: grid; gap: 0.45rem; }
.sysflow__item{
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
text-align: left;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--dark-text);
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.4;
padding: 0.6rem 0.9rem;
cursor: pointer;
transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.sysflow__item b{
flex: none;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
color: #7fd0e0;
border: 1px solid rgba(127, 208, 224, 0.3);
border-radius: 8px;
padding: 0.22rem 0.5rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sysflow__item:hover{ border-color: rgba(63, 214, 232, 0.45); background: rgba(255, 255, 255, 0.055); color: #fff; }
.sysflow__item.is-on{
border-color: rgba(63, 214, 232, 0.75);
background: rgba(63, 214, 232, 0.09);
color: #fff;
transform: translateX(7px);
box-shadow: 0 0 26px -8px rgba(63, 214, 232, 0.45);
}
.sysflow__item.is-on b{ background: var(--grad); color: #fff; border-color: transparent; }
.sysflow__hint{ margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.74rem; color: #8b98af; }
@media (min-width: 941px){html.js .cores-stack .core{
position: sticky;
top: calc(104px + var(--si, 0) * 30px);
scale: var(--ss, 1);
filter: brightness(var(--sb, 1));
transform-origin: 50% 0;
}html.js .cores-stack .core:nth-of-type(1){ --si: 0; }html.js .cores-stack .core:nth-of-type(2){ --si: 1; }html.js .cores-stack .core:nth-of-type(3){ --si: 2; }html.js .cores-stack .core + .core{ margin-top: 3.5rem; }}
.prozess__count{ display: none; }
.steps--flow .step::before{ display: none; }
.steps--flow{ position: relative; }
html.js .steps--flow .step{
opacity: 0.35;
transform: translateY(26px) scale(0.97);
filter: saturate(0.4);
transition:
opacity 0.5s ease,
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.5s ease,
border-color 0.3s ease,
box-shadow 0.35s ease;
}
html.js .steps--flow .step.is-on{
opacity: 1;
transform: none;
filter: none;
border-color: rgba(47, 163, 186, 0.5);
box-shadow: var(--shadow-lg);
}
.steps--flow .step{ z-index: 1; }
.steps--flow .step.is-on .step__num{ animation: numpulse 2.2s ease-out infinite; }
@media (min-width: 1081px) and (min-height: 640px){html.js .prozess{ padding: 0; }html.js .prozess__stage{ height: 220vh; }html.js .prozess__pin{
position: sticky;
top: 0;
min-height: 100vh;
height: 100vh;
display: flex;
align-items: stretch;
padding: 5.2rem 0 3.6rem;
}html.js .prozess__pin > .wrap{
width: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
row-gap: clamp(1.6rem, 4vh, 3rem);
align-items: center;
}html.js .prozess__pin .steps--flow{ align-self: center; }html.js .prozess__pin .section__head{ margin-bottom: 0; padding-bottom: 0; }html.js .prozess__pin .prozess__spur{ margin-bottom: 0; }html.js .prozess .prozess__count{
display: block;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--ink-2);
margin-top: 1.2rem;
}html.js .prozess .prozess__count b{
color: var(--teal-ink);
font-size: 1.5rem;
font-weight: 600;
}html.js .prozess .prozess__spur{
display: block;
width: min(360px, 34%);
height: 3px;
margin-top: 0.85rem;
border-radius: 3px;
background: rgba(34, 58, 124, 0.1);
overflow: hidden;
}html.js .prozess .prozess__spur i{
display: block;
height: 100%;
border-radius: 3px;
background: var(--grad);
transform: scaleX(var(--flow, 0));
transform-origin: left center;
transition: transform 140ms linear;
}.steps--flow::before, .steps--flow::after{
content: "";
position: absolute;
top: 3.05rem;
left: 2rem;
right: 2rem;
height: 2px;
z-index: 0;
}.steps--flow::before{ background: var(--line); }.steps--flow::after{
background: linear-gradient(90deg, var(--blue), #3fd6e8);
box-shadow: 0 0 14px rgba(63, 214, 232, 0.6);
transform: scaleX(var(--flow, 0));
transform-origin: left;
}}
.posts, .cases, .quotes, .ops, .stats{ perspective: 1100px; }
.post, .case-sm{ transition: transform 0.22s ease, box-shadow 0.22s ease, rotate 0.3s ease-out; }
.stat{ transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease, rotate 0.3s ease-out; }
.op{ transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease-out; }
.footer__word{
position: relative;
margin: clamp(1.5rem, 4vw, 3rem) auto 0;
max-width: var(--wrap);
padding-inline: 1rem;
font-size: clamp(3.2rem, 13vw, 10.5rem);
line-height: 1;
font-weight: 830;
font-stretch: 110%;
letter-spacing: -0.03em;
text-align: center;
user-select: none;
}
.footer__word-line, .footer__word-fill{ display: block; }
.footer__word-line{
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
}
.footer__word-line i{ font-style: normal; -webkit-text-stroke: 1.5px rgba(63, 214, 232, 0.55); }
.footer__word-fill{
position: absolute;
inset: 0;
padding-inline: 1rem;
background: linear-gradient(100deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 34px rgba(63, 214, 232, 0.22));
clip-path: inset(-5% 100% -5% 0);
transition: clip-path 1.5s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
}
.footer__word-fill i{ font-style: normal; }
.footer__word.in .footer__word-fill{ clip-path: inset(-5% 0% -5% 0); }
.cursorfx{ display: none; }
html.js .cursorfx.is-on{ display: block; }
.cursorfx__dot, .cursorfx__ring, .cursorfx__glow{
position: fixed;
top: 0; left: 0;
z-index: 3500;
border-radius: 50%;
pointer-events: none;
will-change: transform;
}
.cursorfx__dot{
width: 7px; height: 7px;
margin: -3.5px 0 0 -3.5px;
background: #3fd6e8;
box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}
.cursorfx__ring{
width: 34px; height: 34px;
margin: -17px 0 0 -17px;
border: 1.5px solid rgba(63, 214, 232, 0.5);
transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease;
}
.cursorfx.is-link .cursorfx__ring{
width: 54px; height: 54px;
margin: -27px 0 0 -27px;
border-color: rgba(63, 214, 232, 0.95);
}
.cursorfx__glow{
width: 380px; height: 380px;
margin: -190px 0 0 -190px;
background: radial-gradient(circle, rgba(63, 214, 232, 0.075), transparent 60%);
mix-blend-mode: screen;
}
@media (max-width: 940px){.sysgrid{ grid-template-columns: 1fr; }.syswrap{ margin-top: 1.5rem; }.sysflow__hint{ display: none; }}
@media (pointer: coarse){.cursorfx{ display: none !important; }}
@media (prefers-reduced-motion: reduce){.scrollbeam i{ box-shadow: none; }.cursorfx{ display: none !important; }.splitline .w > *{ transform: none !important; transition: none; }html.js .syswrap:not(.is-live) [data-explode]{ opacity: 1; animation: none; }html.js .syswrap.is-live [data-explode]{ opacity: 1; transform: none; filter: none; }html.js .syswrap.is-live .sys__lines{ opacity: 1; }html.js .syswrap:not(.is-live) .sys__lines{ opacity: 1; animation: none; }.syswrap.is-live [data-explode], .syswrap.is-live .sys__node[data-explode]{ animation: none; }.sysflow__item, .sysflow__item b{ transition: none; }.sysflow__item.is-on{ transform: none; }html.js .cores-stack .core{ position: static; scale: none; filter: none; }html.js .steps--flow .step{ opacity: 1; transform: none; filter: none; transition: none; }.steps--flow .step.is-on .step__num{ animation: none; }html.js .prozess{ padding: clamp(4.5rem, 8vw, 7.5rem) 0; }html.js .prozess__stage{ height: auto; }html.js .prozess__pin{ position: static; min-height: 0; display: block; padding: 0; }html.js .prozess .prozess__count,
html.js .prozess .prozess__spur{ display: none; }.steps--flow::after{ transform: none; }.post, .case-sm, .quote, .stat, .op{ rotate: none !important; }.goal, .post, .case-sm, .quote, .stat, .op{ transition: none; }.deco-orb{ display: none; }.footer__word-fill{ transition: none; clip-path: inset(-5% 0% -5% 0); }}
.core__link{ margin-top: 1.4rem; }
.core__link a{
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--teal-ink);
border-bottom: 1px solid rgba(30, 123, 144, 0.35);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.core__link a::after{ content: " →"; }
.core__link a:hover{ color: var(--blue); border-color: var(--blue); }
html.js .goal,
html.js .post,
html.js .case-sm,
html.js .quote,
html.js .stat,
html.js .op,
html.js .step,
html.js .lkarte,
html.js .preis,
html.js .teamer,
html.js .leistung__liste,
html.js .galerie__bild,
html.js .member{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease,
background-color 0.35s ease,
rotate 0.35s ease-out;
}
@media (prefers-reduced-motion: reduce){html.js .step,
html.js .lkarte,
html.js .preis,
html.js .teamer,
html.js .leistung__liste,
html.js .galerie__bild,
html.js .member,
html.js .goal,
html.js .post,
html.js .case-sm,
html.js .quote,
html.js .stat,
html.js .op{ transition: none; }}
html.js .goals [data-fold]:nth-child(1){ --fx: -160px; --fy: 70px; --fz: -0.45; --fk: 12deg; --ft: -420px; }
html.js .goals [data-fold]:nth-child(2){ --fx: 160px; --fy: 70px; --fz: 0.45; --fk: 12deg; --ft: -360px; }
html.js .goals [data-fold]:nth-child(3){ --fx: -140px; --fy: 120px; --fz: 0.35; --fk: 15deg; --ft: -520px; }
html.js .goals [data-fold]:nth-child(4){ --fx: 140px; --fy: 120px; --fz: -0.35; --fk: 15deg; --ft: -460px; }
html.js .goals-pin > .goals{
perspective: 1400px;
perspective-origin: 50% 42%;
}
html.js .goals-pin > .goals::before{
content: "";
position: absolute;
inset: -12% -8%;
z-index: -1;
pointer-events: none;
background:
radial-gradient(38rem 22rem at 50% 45%, rgba(47, 163, 186, 0.16), transparent 68%),
radial-gradient(26rem 18rem at 22% 78%, rgba(47, 77, 158, 0.12), transparent 70%);
filter: blur(6px);
}
html.js .goals-pin{ position: sticky; }
html.js .goals-pin > .goals{ position: relative; isolation: isolate; }
@media (max-height: 820px){html.js .goals [data-fold]:nth-child(1),
html.js .goals [data-fold]:nth-child(2){ --fy: 18px; }html.js .goals [data-fold]:nth-child(3),
html.js .goals [data-fold]:nth-child(4){ --fy: 24px; }}
html.js .goals [data-fold] .goal__num{
opacity: calc(-0.4 + 1.4 * var(--auf));
scale: calc(0.7 + 0.3 * var(--auf));
transform-origin: 100% 0;
}
html.js [data-fold]{
--auf: 0;
translate:
calc(var(--fx, 0px) * (1 - var(--auf)))
calc(var(--fy, 0px) * (1 - var(--auf)))
calc(var(--ft, 0px) * (1 - var(--auf)));
rotate: 1 0 var(--fz, 0) calc(var(--fk, 0deg) * (1 - var(--auf)));
scale: calc(0.94 + 0.06 * var(--auf));
opacity: calc(0.15 + 0.85 * var(--auf));
transition:
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: translate, scale, opacity;
}
html.js [data-fold].is-fertig{
--auf: 1;
translate: none;
rotate: none;
scale: none;
opacity: 1;
will-change: auto;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.35s ease;
}
@media (max-width: 620px){html.js .goals [data-fold]:nth-child(1),
html.js .goals [data-fold]:nth-child(2),
html.js .goals [data-fold]:nth-child(3),
html.js .goals [data-fold]:nth-child(4){
--fx: 0px;
--fy: 30px;
--fr: 0deg;
}html.js [data-fold]{ scale: calc(0.97 + 0.03 * var(--auf)); }}
@media (prefers-reduced-motion: reduce){html.js [data-fold],
html.js [data-fold].is-fertig{
translate: none;
rotate: none;
scale: none;
opacity: 1;
transition: none;
will-change: auto;
}}
.section--system::after{
content: "";
position: absolute;
left: 50%;
bottom: 0;
translate: -50% 0;
width: min(var(--wrap), 88%);
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(127, 208, 224, 0.14) 18%,
rgba(127, 208, 224, 0.42) 50%,
rgba(127, 208, 224, 0.14) 82%,
transparent);
pointer-events: none;
}
html.js [data-rise]{
--auf: 0;
transform-origin: 50% 100%;
rotate: x calc(-72deg * (1 - var(--auf)));
translate: 0 calc(28px * (1 - var(--auf)));
opacity: calc(0.1 + 0.9 * var(--auf));
transition:
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: rotate, translate, opacity;
backface-visibility: hidden;
}
html.js [data-rise].is-fertig{
--auf: 1;
rotate: none;
translate: none;
opacity: 1;
will-change: auto;
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 620px){html.js [data-rise]{
rotate: x calc(-38deg * (1 - var(--auf)));
translate: 0 calc(20px * (1 - var(--auf)));
}}
@media (prefers-reduced-motion: reduce){html.js [data-rise],
html.js [data-rise].is-fertig{
rotate: none;
translate: none;
opacity: 1;
transition: none;
will-change: auto;
}}
html.js [data-turn]{
--auf: 0;
scale: calc(0.93 + 0.07 * var(--auf));
opacity: calc(0.3 + 0.7 * var(--auf));
transition:
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1);
will-change: scale, opacity;
}
html.js [data-turn] .case__visual{
translate: 0 calc(34px * (1 - var(--auf)));
transition: translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
will-change: translate;
}
html.js [data-turn] .case__copy{
translate: 0 calc(14px * (1 - var(--auf)));
transition: translate 0.32s cubic-bezier(0.16, 1, 0.3, 1);
will-change: translate;
}
html.js [data-turn].is-fertig,
html.js [data-turn].is-fertig .case__visual,
html.js [data-turn].is-fertig .case__copy{
scale: none;
translate: none;
opacity: 1;
will-change: auto;
}
html.js [data-turn].is-fertig{
transition:
transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.3s ease;
}
@media (prefers-reduced-motion: reduce){html.js [data-turn],
html.js [data-turn] .case__visual,
html.js [data-turn] .case__copy,
html.js [data-turn].is-fertig{
scale: none;
translate: none;
opacity: 1;
transition: none;
will-change: auto;
}}
.steps__laeufer{ display: none; }
@media (min-width: 1081px) and (min-height: 640px){html.js .steps__laeufer{
display: block;
position: absolute;
top: 3.05rem;
left: 2rem;
z-index: 2;
width: 14px;
height: 14px;
margin: -6px 0 0 -7px;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, #eaffff, #3fd6e8 45%, #2f4d9e);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.18), 0 0 18px 3px rgba(63, 214, 232, 0.7);
translate: calc(var(--flow, 0) * (100cqw - 0px)) 0;
opacity: calc(0.15 + 0.85 * min(1, var(--flow, 0) * 8));
transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
pointer-events: none;
}html.js .steps--flow{ container-type: inline-size; }}
html.js .steps--flow .step.is-on .step__num{
background: linear-gradient(150deg, #2f4d9e, #1e7b90);
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num{
color: transparent;
position: relative;
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num::after{
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12.6l4 4L18 8" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 60% no-repeat;
}
html.js .steps--flow .step.is-aktuell{
border-color: transparent;
box-shadow:
0 0 0 1.5px rgba(63, 214, 232, 0.55),
0 6px 14px rgba(12, 22, 38, 0.06),
0 26px 54px -20px rgba(34, 58, 124, 0.4);
scale: 1.035;
}
html.js .steps--flow .step.is-aktuell .step__num{
box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.16), 0 10px 22px -8px rgba(47, 77, 158, 0.7);
}
html.js .steps--flow .step.is-aktuell h3{ color: var(--blue); }
html.js .steps--flow .step:not(.is-on) .step__num{
background: #dde4ef;
color: #8b98af;
box-shadow: none;
}
html.js .prozess .prozess__count b{
display: inline-block;
min-width: 2.1ch;
animation: zaehlerpuls 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@media (prefers-reduced-motion: reduce){html.js .steps__laeufer{ display: none; }html.js .steps--flow .step.is-aktuell{ scale: none; }html.js .prozess .prozess__count b{ animation: none; }}
.note{
display: inline-flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.4rem;
padding: 0.7rem 1.2rem 0.7rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 99px;
background: rgba(255, 255, 255, 0.05);
}
.note__wert{
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
}
.note__rechts{ display: grid; gap: 0.15rem; }
.note__sterne{ font-size: 0.82rem; letter-spacing: 0.12em; color: #ffc857; line-height: 1; }
.note__text{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--dark-text); }
.stimmen{
position: relative;
display: grid;
gap: 1.1rem;
margin-top: clamp(1.6rem, 3vw, 2.6rem);
overflow: hidden;
padding-block: 0.4rem;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stimmen__band{
display: flex;
align-items: stretch;
gap: 1.1rem;
width: max-content;
animation: stimmenlauf 72s linear infinite;
will-change: transform;
}
.stimmen:hover .stimmen__band,
.stimmen:focus-within .stimmen__band{ animation-play-state: paused; }
.stimme{
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
flex: 0 0 clamp(290px, 26vw, 400px);
padding: 1.6rem 1.5rem 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: var(--radius);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
color: #fff;
transition: border-color 0.35s ease, background 0.35s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.stimme::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 45%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
pointer-events: none;
}
@media (hover: hover){.stimme:hover{
translate: 0 -5px;
border-color: rgba(103, 209, 226, 0.45);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
}}
.stimme blockquote{
position: relative;
font-size: 1.02rem;
line-height: 1.62;
color: rgba(255, 255, 255, 0.9);
}
.stimme blockquote::before{
content: "";
display: block;
width: 30px;
height: 22px;
margin-bottom: 0.85rem;
background: var(--grad);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.85;
}
.stimme figcaption{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.8rem;
margin-top: auto;
padding-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stimme__ava{
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: #fff;
background: var(--grad);
}
.stimme[style*="--ton: 1"] .stimme__ava{ background: linear-gradient(140deg, #2fa3ba, #5ad0c8); }
.stimme[style*="--ton: 2"] .stimme__ava{ background: linear-gradient(140deg, #3f6fd8, #7f5ae0); }
.stimme__wer{ display: grid; gap: 0.1rem; min-width: 0; }
.stimme__wer b{ font-size: 0.95rem; font-weight: 650; }
.stimme__wer span{
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--dark-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stimme__sterne{ font-size: 0.72rem; letter-spacing: 0.1em; color: #ffc857; }
@media (max-width: 620px){.stimme{ flex-basis: 80vw; padding: 1.4rem 1.25rem 1.2rem; gap: 1rem; }.stimme blockquote{ font-size: 0.96rem; }.stimmen__band{ animation-duration: 52s; }.note{ margin-top: 1.1rem; }}
@media (prefers-reduced-motion: reduce){.stimmen{ overflow: visible; -webkit-mask-image: none; mask-image: none; }.stimmen__band{
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
}.stimme{ flex: 1 1 300px; transition: none; }.stimme[aria-hidden="true"]{ display: none; }}
@media (min-width: 1081px) and (min-height: 640px){html.js .cases-stage{ height: 185vh; }html.js .cases-pin{
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 3.4rem;
padding-bottom: clamp(0.8rem, 2vh, 2rem);
}html.js #projekte .section__head{ margin-bottom: 0; }html.js .cases-pin > .case--featured{ margin-bottom: 45px; }html.js .cases-pin > .cases{ width: 100%; }@media (max-height: 880px){
html.js .cases-pin { padding-top: 1.5rem; padding-bottom: 0.4rem; }
html.js #projekte .section__head { margin-bottom: 1.9rem; }
html.js .cases-pin > .case--featured {
margin-bottom: 20px;
padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
}}
@media (prefers-reduced-motion: reduce){html.js .cases-stage{ height: auto; }html.js .cases-pin{ position: static; min-height: 0; display: block; padding-block: 0; }}
html.eigenerzeiger,
html.eigenerzeiger a,
html.eigenerzeiger button,
html.eigenerzeiger summary,
html.eigenerzeiger [role="button"]{ cursor: none; }
html.eigenerzeiger input,
html.eigenerzeiger textarea,
html.eigenerzeiger select{ cursor: auto; }
@media (min-width: 1081px) and (min-height: 640px){html.js .goals-stage{ height: 190vh; }html.js .goals-pin{
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(3rem, 7.5vh, 4.5rem);
padding-bottom: clamp(0.8rem, 2vh, 2rem);
}html.js .goals-pin > .section__head{ margin-bottom: clamp(1.6rem, 4vh, 3rem); }html.js .goals-pin > .goals{ width: 100%; }}
@media (prefers-reduced-motion: reduce){html.js .goals-stage{ height: auto; }html.js .goals-pin{ position: static; min-height: 0; display: block; padding: 0; }}
html.glitchlauf .nav{ filter: url('#glitchfx'); will-change: filter; }
html.glitchlauf .hero__bg{ filter: url('#glitchfx') brightness(1.5) saturate(1.25); will-change: filter; }
html.glitchlauf .hero__particles{ filter: url('#glitchfx'); will-change: filter; }
html.intro .bootfx::after{
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, rgba(8, 14, 26, 0.3) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce){html.glitchlauf .nav,
html.glitchlauf .hero__bg,
html.glitchlauf .hero__particles{ filter: none; will-change: auto; }}
.fxdefs{ position: absolute; width: 0; height: 0; overflow: hidden; }
html.intro .bootfx__marke{
position: absolute;
top: 50%;
left: 50%;
translate: calc(-50% - 0.3em) -50%;
display: flex;
align-items: center;
gap: 0.06em;
font-size: clamp(64px, 9vw, 128px);
filter: drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
animation: bootlogoein 0.3s ease both;
}
html.intro .bootfx__marke img{
width: auto;
height: 1.6em;
}
html.intro .bootfx__marke span{
font-family: var(--font-sans);
font-weight: 750;
font-stretch: 105%;
letter-spacing: -0.015em;
color: #fff;
line-height: 1;
margin-top: 0.08em;
}
html.intro .bootfx__marke span i{ font-style: normal; color: var(--teal); }
html.glitchlauf .bootfx__marke{
filter: url('#glitchfx') drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
}
.orbwrap.is-glitch .orbwrap__final{ filter: url('#glitchlogo'); will-change: filter; }
@media (prefers-reduced-motion: reduce){.orbwrap.is-glitch .orbwrap__final{ filter: none; will-change: auto; }}
@media (max-width: 1080px){.lkarten.lkarten, .galerie.galerie, .preise.preise, .steps.steps{ --spalten: 2; }}
@media (max-width: 720px){.lkarten.lkarten, .galerie.galerie, .goals.goals, .preise.preise,
.steps.steps{ --spalten: 1; }}
html.js .lkarten [data-fold]:nth-child(3n+1),
html.js .preise [data-fold]:nth-child(3n+1){ --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten [data-fold]:nth-child(3n+2),
html.js .preise [data-fold]:nth-child(3n+2){ --fx: 0px; --fy: 40px; --fr: 0deg; }
html.js .lkarten [data-fold]:nth-child(3n+3),
html.js .preise [data-fold]:nth-child(3n+3){ --fx: 38px; --fy: 30px; --fr: 3deg; }
html.js .lkarten.sp-2 [data-fold]:nth-child(odd),
html.js .preise.sp-2 [data-fold]:nth-child(odd){ --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten.sp-2 [data-fold]:nth-child(even),
html.js .preise.sp-2 [data-fold]:nth-child(even){ --fx: 38px; --fy: 30px; --fr: 3deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+1),
html.js .preise.sp-4 [data-fold]:nth-child(4n+1){ --fx: -38px; --fy: 30px; --fr: -3deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+2),
html.js .preise.sp-4 [data-fold]:nth-child(4n+2){ --fx: -12px; --fy: 40px; --fr: -1deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+3),
html.js .preise.sp-4 [data-fold]:nth-child(4n+3){ --fx: 12px; --fy: 40px; --fr: 1deg; }
html.js .lkarten.sp-4 [data-fold]:nth-child(4n+4),
html.js .preise.sp-4 [data-fold]:nth-child(4n+4){ --fx: 38px; --fy: 30px; --fr: 3deg; }
@media (max-width: 860px){html.js .lkarten [data-fold]:nth-child(n),
html.js .preise [data-fold]:nth-child(n),
html.js .goals [data-fold]:nth-child(n),
html.js .lkarten.sp-2 [data-fold]:nth-child(n),
html.js .lkarten.sp-4 [data-fold]:nth-child(n),
html.js .preise.sp-2 [data-fold]:nth-child(n),
html.js .preise.sp-4 [data-fold]:nth-child(n){ --fx: 0px; --fy: 26px; --fr: 0deg; }}
.goal__title, .goal__text,
.lkarte h3, .lkarte__text, .lkarte .ticks li,
.preis__name, .preis__text, .preis .ticks li,
.case-sm h3, .case-sm p,
.step h3, .step p,
.faq__item summary{
overflow-wrap: break-word;
}
.goal__title, .lkarte h3, .preis__name, .case-sm h3, .step h3{
hyphens: auto;
}
.section--dark .section__head h2{ color: #fff; }
.footer__col{ min-width: 0; }
.footer__col a{ overflow-wrap: break-word; }
@media (max-width: 940px){.footer__grid{ grid-template-columns: 1fr 1fr; }.footer__brand{ grid-column: 1 / -1; }}
@media (max-width: 540px){.footer__grid{ grid-template-columns: 1fr; }}
.lkarte, .preis, .member, .step,
.btn--primary, .btn--ghost, .btn--light, .btn--ghost-light,
.dsgpt__visual{
transition:
transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s ease,
border-color 0.35s ease,
background-color 0.35s ease,
color 0.25s ease;
}
@media (hover: hover){.step:hover{
transform: translateY(-5px);
box-shadow: var(--shadow-lg);
border-color: rgba(47, 163, 186, 0.4);
}}
@media (prefers-reduced-motion: reduce){.lkarte, .preis, .member, .step,
.btn--primary, .btn--ghost, .btn--light, .btn--ghost-light,
.dsgpt__visual{ transition: none; }.step:hover{ transform: none; }}
.team{
--spalten: 4;
--luecke: clamp(1rem, 1.8vw, 1.6rem);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.team > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
@media (max-width: 1080px){.team.team{ --spalten: 3; }}
@media (max-width: 780px){.team.team{ --spalten: 2; }}
.prozess__spur{ display: none; }
.prozess{ position: relative; overflow-x: clip; }
.prozess__pin{ position: relative; }
.prozess__orb{
opacity: 0.5;
z-index: 0;
}
.prozess__orb--a{ top: -14%; left: -10%; }
.prozess__orb--b{ bottom: -16%; right: -8%; }
.prozess .prozess__stage,
.prozess .wrap{ position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce){.prozess__spur i{ transition: none; }}
.nav__gruppe{ position: relative; display: flex; align-items: center; gap: 0.25rem; }
.nav__unter{
position: absolute;
top: calc(100% + 0.7rem);
left: 50%;
translate: -50% 0;
min-width: 12rem;
display: grid;
gap: 0.1rem;
padding: 0.55rem;
border-radius: 16px;
background:
linear-gradient(160deg, rgba(19, 34, 58, 0.99), rgba(9, 17, 31, 0.99));
border: 1px solid rgba(127, 208, 224, 0.18);
box-shadow: 0 24px 55px -20px rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
isolation: isolate;
opacity: 0;
visibility: hidden;
translate: -50% 6px;
transition: opacity 0.22s ease, translate 0.22s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.22s;
z-index: 60;
}
.nav__unter::before{
content: "";
position: absolute;
inset: -0.8rem 0 100% 0;
}
.nav__gruppe:hover .nav__unter,
.nav__gruppe:focus-within .nav__unter,
.nav__unter.offen{
opacity: 1;
visibility: visible;
translate: -50% 0;
transition-delay: 0s;
}
.nav__unter a,
.nav--dark .nav__links .nav__unter a{
color: var(--dark-text);
padding: 0.45rem 0.75rem;
border-radius: 9px;
font-size: 0.93rem;
white-space: nowrap;
transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
.nav__unter a:hover,
.nav__unter a:focus-visible,
.nav--dark .nav__links .nav__unter a:hover,
.nav--dark .nav__links .nav__unter a:focus-visible{
background: rgba(127, 208, 224, 0.1);
color: #fff;
translate: 3px 0;
}
.nav__mobile-unter{
padding-left: 1.4rem !important;
font-size: 0.95rem;
opacity: 0.85;
}
.nav__mobile-unter::before{
content: "";
display: inline-block;
width: 0.7rem;
height: 1px;
margin-right: 0.5rem;
vertical-align: middle;
background: currentColor;
opacity: 0.5;
}
@media (prefers-reduced-motion: reduce){.nav__pfeil, .nav__unter{ transition: none; }}
html.js .preisgruppe{ display: none; }
html.js .preisgruppe.is-aktiv{ display: block; animation: gruppeauf 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }
@media (prefers-reduced-motion: reduce){html.js .preisgruppe.is-aktiv{ animation: none; }}
.rail__btn, .rail__btn--cta,
.krumen a, .footer__col a, .nav__mobile a,
.faq__item summary, .tabelle tr,
.galerie__bild, .bildrahmen,
.leistung__liste, .teamer{
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease,
border-color 0.32s ease,
background-color 0.32s ease,
color 0.22s ease,
opacity 0.28s ease;
}
@media (prefers-reduced-motion: reduce){.rail__btn, .rail__btn--cta, .krumen a, .footer__col a, .nav__mobile a,
.faq__item summary, .tabelle tr, .galerie__bild, .bildrahmen,
.leistung__liste, .teamer{ transition: none; }}
.section__head--mittig{
text-align: center;
margin-inline: auto;
max-width: 52rem;
}
.section__head--mittig .kicker{
display: inline-flex;
align-items: center;
}
.section__head--mittig h2,
.section__head--mittig h3,
.section__head--mittig p,
.section__head--mittig .section__intro{ margin-inline: auto; }
@media (max-width: 1080px){.lkarten.lkarten > :last-child:nth-child(odd),
.galerie.galerie > :last-child:nth-child(odd),
.preise.preise > :last-child:nth-child(odd),
.steps.steps > :last-child:nth-child(odd){ flex-basis: 100%; }}
.team.team > :last-child:nth-child(odd),
.team.team > :last-child:nth-child(3n + 1),
.team.team > :last-child:nth-child(4n + 1){
flex-basis: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}
.portfoliostrecke{
--accent: #3fd6e8;
--bg-card: #11172e;
--border: rgba(244, 244, 240, 0.1);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--header-h: 84px;
--ink-muted: rgba(244, 244, 240, 0.65);
--r-lg: 28px;
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
--t-fast: 200ms; --t-med: 400ms;
--font-serif: var(--font-sans);
}
.portfoliostrecke{ --ink: #f4f4f0; }
.pv3-stage{
position: relative;
width: 100%;
aspect-ratio: 16/9;
margin-bottom: var(--s-5);
z-index: 1;
animation: pv3-float 6s ease-in-out infinite;
}
.pv3-laptop{
position: absolute;
inset: 0 15% 0 0;
display: flex;
flex-direction: column;
}
.pv3-laptop__bezel{
background: #050818;
border: 1px solid rgba(244, 244, 240, 0.15);
border-radius: 10px 10px 0 0;
padding: 8px 8px 4px;
box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.7);
flex: 1;
overflow: hidden;
}
.pv3-laptop__bezel img{
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 4px;
display: block;
}
.pv3-laptop__bezel img[src*="valtea"]{
object-position: left center;
}
.pv3-laptop__base{
width: 115%;
height: 6px;
margin-left: -7.5%;
background: linear-gradient(to bottom,
rgba(244, 244, 240, 0.2),
rgba(244, 244, 240, 0.08));
border-radius: 0 0 6px 6px;
position: relative;
}
.pv3-laptop__base::before{
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20%;
height: 2px;
background: rgba(244, 244, 240, 0.2);
border-radius: 0 0 4px 4px;
}
.pv3-phone{
position: absolute;
bottom: 0;
right: 0;
width: 22%;
aspect-ratio: 9/19;
background: #050818;
border: 1px solid rgba(244, 244, 240, 0.18);
border-radius: 14px;
padding: 4px;
box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7);
overflow: hidden;
animation: pv3-float-phone 5s ease-in-out infinite;
}
.pv3-phone img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
border-radius: 10px;
display: block;
}
.pscroll{
position: relative;
}
.pscroll__sticky{
position: relative;
height: 100vh;
overflow-x: clip;
overflow-y: visible;
display: flex;
flex-direction: column;
padding-top: 0;
}
.portfoliostrecke{ scroll-margin-top: var(--header-h); }
.pscroll__nav{
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--s-3);
margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}
.pscroll__arrow{
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(244, 244, 240, 0.06);
border: 1px solid rgba(244, 244, 240, 0.18);
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
}
.pscroll__arrow:hover{
background: rgba(244, 244, 240, 0.12);
border-color: var(--accent);
color: var(--accent);
}
.pscroll__arrow:disabled{
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.pscroll__arrow svg{ width: 20px; height: 20px; }
.pscroll__viewport{
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.pscroll__track{
display: flex;
height: 100%;
will-change: transform;
}
.pslide{
flex: 0 0 100%;
height: 100%;
overflow-x: clip;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 4vw, 4rem) clamp(4rem, 6vh, 5rem);
align-content: start;
}
.pslide__visual{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pslide__visual{
height: 100%;
container-type: size;
}
.pslide__visual .pv3-stage{
width: 100%;
width: min(100%, calc(100cqh * 16 / 9), 860px);
height: auto;
margin-bottom: 0;
}
.pslide__body{ align-self: center; }
.pslide__cat{
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.pslide__title{
font-family: var(--font-serif);
font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
margin: var(--s-3) 0 var(--s-4);
text-transform: none;
}
.pslide__text{
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
line-height: 1.6;
color: var(--ink-muted);
margin: 0 0 var(--s-5);
max-width: 50ch;
}
.pslide__link{
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.pslide__link span{ transition: transform var(--t-fast) var(--ease); }
.pslide__link:hover span{ transform: translateX(5px); }
.pscroll__progress{
flex: 1 1 auto;
max-width: 22rem;
margin: 0 clamp(1rem, 3vw, 2.5rem);
height: 3px;
background: rgba(244, 244, 240, 0.08);
border-radius: 1px;
overflow: hidden;
}
.pscroll__sticky .portfolio__cta{
flex: 0 0 auto;
display: flex;
justify-content: center;
margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}
.portfoliostrecke .portfolio__cta .btn--ghost{
background: rgba(244, 244, 240, 0.06);
border-color: rgba(244, 244, 240, 0.28);
color: var(--ink);
}
.portfoliostrecke .portfolio__cta .btn--ghost:hover{
background: rgba(244, 244, 240, 0.12);
border-color: rgba(244, 244, 240, 0.5);
}
.pscroll__progress span{
display: block;
height: 100%;
width: 8%;
background: var(--accent);
border-radius: 1px;
transition: transform 100ms linear;
}
@media (min-width: 760px){.pslide{
grid-template-columns: 1.65fr 1fr;
grid-template-rows: 1fr;
gap: clamp(2.5rem, 4.5vw, 4.5rem);
align-items: center;
padding-inline: var(--s-7);
}.pslide__visual{ align-self: stretch; }}
@media (min-width: 761px) and (max-height: 900px){.pslide{ padding-bottom: clamp(1.25rem, 4vh, 4rem); }.pscroll__nav{ margin-top: var(--s-3); }}
@media (max-width: 760px){.pscroll__progress{ display: none; }.pscroll__sticky .portfolio__cta{
display: flex;
justify-content: center;
margin: var(--s-4) 0 var(--s-2);
}.pscroll__sticky{ padding-top: 0; }.pscroll__viewport{ flex: 0 1 auto; }.pscroll__track{ height: auto; }.pscroll__sticky{
height: auto;
min-height: 100svh;
overflow: visible;
padding-bottom: var(--s-4);
}.pslide{ height: auto; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-2); align-content: center; }.pslide__visual{
height: auto;
container-type: normal;
}.pslide__visual .pv3-stage{
width: 100%;
height: auto;
max-width: min(100%, 520px);
margin-inline: auto;
margin-bottom: 0;
}.pslide__title{ margin: var(--s-2) 0 var(--s-2); }.pslide__text{ margin-bottom: var(--s-3); }.pscroll__nav{ margin-top: var(--s-5); margin-bottom: var(--s-3); }}
h1, h2, h3, .teamer__name, .lkarte h3, .goal__title{
hyphens: auto;
overflow-wrap: break-word;
}
.footer__col a{ hyphens: auto; }
.mock--index{
display: grid;
gap: 0.75rem;
padding: 1.2rem;
}
.mock__idx{
display: grid;
gap: 0.45rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
}
.mock__idx b{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
}
.mock__idx i{
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--line), transparent);
}
.mock__idx i:nth-child(2){ width: 78%; }
.mock__idx i:nth-child(3){ width: 56%; }
.mock__idx i:nth-child(4){ width: 66%; }
@media (max-width: 700px){.hero__system{ display: none; }.hero__grid{
padding-top: clamp(5.2rem, 12vh, 8rem);
padding-bottom: clamp(2rem, 6vh, 5rem);
align-content: center;
}.hero__copy{ display: flex; flex-direction: column; }.hero__badge{ margin-bottom: 0.6rem; }.hero h1{
font-size: clamp(2.1rem, 8.2vw, 2.7rem);
line-height: 1.14;
white-space: normal;
}.hero__type{ margin-top: 1.6rem; }.hero__sub{ margin-top: 1.6rem; }.hero__cta{ margin-top: 2.4rem; gap: 0.8rem; }.hero__cta .btn{ width: 100%; justify-content: center; }.hero__trust{ margin-top: 2.2rem; }}
.nav__mobile-kontakt{ display: none; }
@media (max-width: 700px){.rail{ display: none; }.nav__mobile-kontakt{
display: block;
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}.nav__mobile-titel{
margin: 0 0 0.7rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7fd0e0;
}.nav__mobile-kontakt > a{
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0;
font-size: 0.95rem;
color: var(--dark-text);
}.nav__mobile-kontakt > a svg{ width: 19px; height: 19px; flex: 0 0 19px; }.nav__mobile-social{ display: flex; gap: 0.7rem; margin-top: 0.9rem; }.nav__mobile-social a{
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--dark-text);
}.nav__mobile-social svg{ width: 19px; height: 19px; }.hero{ min-height: 100svh; }.hero__grid{ min-height: 0; }.hero__trust{
align-items: flex-start;
font-size: 0.85rem;
line-height: 1.55;
}.hero__trust .dot{ margin-top: 0.42em; flex: 0 0 auto; }}
.nav__mobile{
max-height: calc(100svh - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px){.hero__copy{ align-items: center; text-align: center; }.hero__badge{ justify-content: center; }.hero__type{ justify-content: center; }.hero__sub{ margin-inline: auto; }.hero__cta{ justify-content: center; width: 100%; }.hero__trust{ justify-content: center; text-align: center; }.hero__badge{ margin-bottom: clamp(0.9rem, 2.2vh, 1.6rem); }.hero__type{ margin-top: clamp(1.2rem, 3vh, 2.4rem); }.hero__sub{ margin-top: clamp(1.2rem, 3vh, 2.4rem); }.hero__cta{ margin-top: clamp(1.6rem, 4vh, 3rem); gap: 0.8rem; }.hero__trust{ margin-top: clamp(1.5rem, 3.8vh, 3rem); }}
@media (max-width: 700px) and (max-height: 700px){.hero__grid{ padding-top: 4.6rem; padding-bottom: 1.4rem; }.hero h1{ font-size: clamp(1.75rem, 6.6vw, 2.2rem); }.hero__sub{ font-size: 0.98rem; }.hero__cta .btn{ padding-block: 0.7rem; }.hero__trust{ font-size: 0.78rem; }}
@media (max-width: 700px){.hero__trust{
max-width: 30ch;
margin-inline: auto;
text-wrap: balance;
}}
.nav__gruppe--mega{ position: static; }
.mega{
position: absolute;
top: calc(100% + 0.6rem);
left: 50%;
translate: -50% 0;
width: min(1120px, calc(100vw - 2rem));
padding: clamp(1.4rem, 2.4vw, 2rem);
border-radius: 22px;
background:
linear-gradient(160deg, rgba(19, 34, 58, 0.99), rgba(9, 17, 31, 0.99));
border: 1px solid rgba(127, 208, 224, 0.18);
box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
isolation: isolate;
transform: translateZ(0);
backface-visibility: hidden;
pointer-events: auto;
z-index: 120;
max-height: calc(100svh - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.mega[hidden]{ display: block; visibility: hidden; opacity: 0; translate: -50% -8px; pointer-events: none; }
.mega{ transition: opacity 0.24s ease, translate 0.24s ease, visibility 0s linear 0s; }
.mega[hidden]{ transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s; }
.mega__inner{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
gap: clamp(1.2rem, 2.4vw, 2.2rem);
align-items: stretch;
}
.mega__spalten{
display: grid;
grid-template-columns: repeat(4, minmax(min-content, 1fr));
gap: clamp(0.5rem, 1.2vw, 1.2rem);
}
.mega__spalte + .mega__spalte{
padding-left: clamp(0.7rem, 1.4vw, 1.4rem);
border-left: 1px solid rgba(127, 208, 224, 0.13);
}
.mega__titel{
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.7rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
min-height: 3.05rem;
box-sizing: content-box;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fd0e0;
}
.mega__icon{
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.22);
}
.mega__icon svg{ width: 15px; height: 15px; }
.mega__spalte a{
display: block;
white-space: nowrap;
padding: 0.34rem 0.5rem;
margin-left: -0.5rem;
border-radius: 8px;
font-size: 0.92rem;
color: var(--dark-text);
transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
.mega__spalte a:hover,
.mega__spalte a:focus-visible{
background: linear-gradient(90deg, rgba(127, 208, 224, 0.18), rgba(127, 208, 224, 0.04));
box-shadow: inset 2px 0 0 rgba(127, 208, 224, 0.75);
color: #fff;
translate: 3px 0;
}
.mega__alle{
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.3rem;
padding: 1.2rem;
border-radius: 16px;
background: var(--grad);
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
.mega__alle::before{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 62%;
background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
background-size: 13px 13px;
-webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
z-index: -1;
pointer-events: none;
}
.mega__alle::after{
content: "";
position: absolute;
inset: auto -30% -60% auto;
width: 70%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
z-index: -1;
transition: scale 0.5s ease;
}
.mega__alle:hover::after{ scale: 1.35; }
.nav__links .mega__alle,
.nav__links .mega__alle:hover,
.nav--dark .nav__links .mega__alle,
.nav--dark .nav__links .mega__alle:hover{ color: #fff; }
.mega__alle-kicker{
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.85;
}
.mega__alle-titel{ font-size: 1.15rem; font-weight: 650; line-height: 1.2; }
.mega__alle-text{ font-size: 0.85rem; opacity: 0.9; line-height: 1.45; }
.mega__alle-pfeil{
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-top: 0.6rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
transition: translate 0.25s ease, background-color 0.25s ease;
}
.mega__alle-pfeil svg{ width: 17px; height: 17px; }
.mega__alle:hover .mega__alle-pfeil{ translate: 4px 0; background: rgba(255, 255, 255, 0.3); }
@media (max-width: 1180px){.mega__inner{ grid-template-columns: minmax(0, 1fr); }.mega__spalten{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.8rem); }.mega__spalte + .mega__spalte{ padding-left: 0; border-left: 0; }.mega__titel{ min-height: 0; }.mega__alle{ flex-direction: row; align-items: center; justify-content: space-between; }.mega__alle-text{ display: none; }.mega__alle-pfeil{ margin-top: 0; }}
@media (max-width: 940px){.mega{ display: none !important; }}
@media (prefers-reduced-motion: reduce){.mega, .mega__spalte a, .mega__alle-pfeil, .mega__alle::after{ transition: none; }}
.section--dark :is(.goal, .case, .case-sm, .quote, .post, .stat, .lkarte, .preis, .teamer, .member, .step){
color: var(--ink-2);
}
.section--dark :is(.goal, .case, .case-sm, .quote, .post, .stat, .lkarte, .preis, .teamer, .member, .step)
:is(h2, h3, h4, b, strong, .goal__title, .teamer__name, .preis__name, .stat b){
color: var(--ink);
}
.cores-stack .core{
position: relative;
overflow: hidden;
--akzent: var(--grad);
}
.cores-stack .core::before{
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 26px;
border-radius: calc(var(--radius) + 7px) calc(var(--radius) + 7px) 0 0;
padding: 3px 3px 0;
transition: opacity 0.3s ease;
background: var(--akzent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 1;
z-index: 2;
pointer-events: none;
transition: opacity 0.35s ease;
}
@property --oeffnung{
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.cores-stack .core::after{
content: "";
--oeffnung: 0deg;
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 3px;
background: conic-gradient(
from 180deg,
transparent 0deg,
transparent calc(180deg - var(--oeffnung)),
var(--akz-a) calc(180deg - var(--oeffnung)),
var(--akz-a) calc(180deg + var(--oeffnung)),
transparent calc(180deg + var(--oeffnung)),
transparent 360deg
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.45));
pointer-events: none;
z-index: 3;
transition: --oeffnung 1.9s cubic-bezier(0.25, 0.6, 0.3, 1);
}
.cores-stack .core:hover::after{ --oeffnung: 180deg; }
.cores-stack .core{ --akz-a: #2f4d9e; }
.cores-stack .core{
transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.cores-stack .core:hover{
border-color: rgba(63, 214, 232, 0.35);
box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.55);
}
.cores-stack .core__index.core__index{
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 1rem;
border-radius: 12px;
background: var(--akzent);
color: #fff;
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 10px 20px -12px rgba(47, 77, 158, 0.75);
}
.cores-stack .core__index::after{ content: none; }
.cores-stack .core__copy .ticks{
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 1.1rem;
}
.cores-stack .core__copy .ticks li{
position: relative;
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.4rem 0.85rem 0.4rem 0.7rem;
border: 1px solid rgba(12, 22, 38, 0.09);
border-radius: 99px;
background: linear-gradient(180deg, #fff, #f4f7fb);
box-shadow: 0 1px 2px rgba(12, 22, 38, 0.05);
font-size: 0.86rem;
font-weight: 500;
color: var(--ink);
transition: border-color 0.25s ease, color 0.25s ease,
background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cores-stack .core__copy .ticks li::before{
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--akzent);
flex: 0 0 6px;
position: static;
top: auto;
left: auto;
}
.cores-stack .core:hover .ticks li{
border-color: rgba(47, 163, 186, 0.4);
box-shadow: 0 6px 14px -8px rgba(47, 77, 158, 0.4);
}
.cores-stack .core__copy .ticks li:hover{
transform: translateY(-2px);
border-color: rgba(63, 214, 232, 0.6);
background: #fff;
}
.cores-stack .core__index.core__index,
.cores-stack .core__kicker.core__kicker{ vertical-align: middle; }
.cores-stack .core__kicker.core__kicker{ position: relative; top: -3px; }
.cores-stack .core__kicker.core__kicker{
display: inline-block;
padding: 0.34rem 0.8rem;
border-radius: 99px;
background: rgba(47, 163, 186, 0.14);
border: 1px solid rgba(47, 163, 186, 0.3);
color: #1a5f70;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.09em;
margin-bottom: 0.7rem;
}
.cores-stack .core__link{ margin-top: 1.6rem; }
.cores-stack .core__link a{
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.72rem 1.45rem;
border: 0;
border-radius: 999px;
background: var(--akzent);
color: #fff;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cores-stack .core__link a::after{
content: "\2192";
transition: transform 0.25s ease;
}
.cores-stack .core__link a:hover{
transform: translateY(-2px);
box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95);
}
.cores-stack .core__link a:hover::after{ transform: translateX(4px); }
@media (min-width: 861px){html.js .cores-stack .core:nth-of-type(4){ --si: 3; }}
.cores-stack .core__kicker{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.35rem;
}
.faelle{ position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.fall{
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: clamp(1rem, 2.5vw, 2.4rem);
padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.fall:last-of-type{ border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.fall::before{
content: "";
position: absolute;
inset: 0 -1.2rem;
z-index: -1;
border-radius: var(--radius);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.fall__nr{
font-family: var(--font-mono);
font-size: 0.82rem;
color: #7fd0e0;
letter-spacing: 0.1em;
}
.fall__titel{
display: block;
font-size: clamp(1.15rem, 2vw, 1.65rem);
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.015em;
}
.fall__text{
display: block;
margin-top: 0.4rem;
max-width: 52ch;
font-size: 0.95rem;
color: var(--dark-text);
}
.fall__tags{ display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.fall__tags i{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark-text);
padding: 0.28rem 0.66rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 99px;
white-space: nowrap;
}
.fall__pfeil{
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
transition: border-color 0.34s ease, opacity 0.34s ease,
translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil::after{
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: var(--grad);
opacity: 0;
transition: opacity 0.34s ease;
}
.fall__pfeil svg{ position: relative; z-index: 1; width: 19px; height: 19px; }
.fall__nr, .fall__haupt, .fall__meta{
opacity: var(--dim, 1);
transition: opacity 0.34s ease, translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil{ opacity: var(--dim, 1); }
@media (hover: hover){.fall::before{ transition-duration: 0.34s; }.fall:hover::before{ opacity: 1; }.fall:hover :is(.fall__nr, .fall__haupt){ translate: 12px 0; }.fall:hover .fall__pfeil{ border-color: transparent; translate: 4px 0; }.fall:hover .fall__pfeil::after{ opacity: 1; }.faelle:hover .fall{ --dim: 0.5; }.faelle:hover .fall:hover{ --dim: 1; }}
.fall:focus-visible :is(.fall__nr, .fall__haupt){ translate: 12px 0; }
@media (max-width: 900px){.fall{ grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem 1rem; }.fall__nr{ grid-column: 1; grid-row: 1; }.fall__haupt{ grid-column: 2; grid-row: 1; }.fall__pfeil{ grid-column: 3; grid-row: 1; width: 38px; height: 38px; }.fall__meta{ grid-column: 2 / -1; grid-row: 2; }.fall__tags{ justify-content: flex-start; }}
@media (prefers-reduced-motion: reduce){.fall, .fall::before, .fall__pfeil,
.fall__nr, .fall__haupt, .fall__meta{ transition: none; }}
.beitrag__tag{
padding: 0.24rem 0.62rem;
border-radius: 99px;
background: rgba(47, 163, 186, 0.12);
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
}
.mehr{ display: grid; justify-items: center; gap: 0.6rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.mehr[hidden]{ display: none; }
.chatknopf{
position: fixed;
right: clamp(10px, 1.4vw, 22px);
bottom: 82px;
z-index: 90;
display: grid;
place-items: center;
width: 48px; height: 48px;
border-radius: 50%;
border: 1px solid transparent;
background: linear-gradient(140deg, #22397c, #2fa3ba);
color: #fff;
cursor: pointer;
box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.65);
opacity: 0;
transform: translateY(16px) scale(0.8);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.chatknopf.is-visible{ opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.chatknopf svg{ width: 21px; height: 21px; }
.chatknopf__zu{ display: none; }
.chatknopf[aria-expanded="true"] .chatknopf__auf{ display: none; }
.chatknopf[aria-expanded="true"] .chatknopf__zu{ display: block; }
.chatknopf:hover{
transform: translateY(-3px) scale(1.12);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.15), 0 0 30px -2px rgba(63, 214, 232, 0.45), 0 14px 30px -10px rgba(0, 0, 0, 0.5);
}
.chatknopf__hinweis{
position: absolute;
right: calc(100% + 10px);
padding: 0.34rem 0.7rem;
border-radius: 99px;
background: #0f1c30;
color: #fff;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
transform: translateX(6px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover){.chatknopf:hover .chatknopf__hinweis, .chatknopf:focus-visible .chatknopf__hinweis{
opacity: 1; transform: translateX(0);
}}
.chatknopf[aria-expanded="true"] .chatknopf__hinweis{ display: none; }
.chatfenster{
position: fixed;
right: clamp(10px, 1.4vw, 22px);
bottom: 142px;
z-index: 95;
width: min(380px, calc(100vw - 24px));
height: min(620px, calc(100vh - 190px));
border-radius: 24px;
overflow: hidden;
background: #fff;
box-shadow: 0 24px 60px -18px rgba(6, 14, 30, 0.45);
animation: none;
}
.chatfenster[hidden]{ display: none; }
.chatfenster iframe{ display: block; width: 100%; height: 100%; border: 0; }
.chatfenster{ background: #0d1a30; }
.chatfenster iframe{ background: #fff; }
@media (max-width: 620px){.chatknopf{ bottom: 126px; right: 12px; width: 42px; height: 42px; }.chatknopf svg{ width: 19px; height: 19px; }.chatfenster{ bottom: 178px; height: min(560px, calc(100vh - 220px)); }}
@media (prefers-reduced-motion: reduce){.chatknopf, .chatknopf__hinweis{ transition: none; }.chatfenster{ animation: none; }}
.jubi__lead{ max-width: 46ch; color: var(--dark-text); line-height: 1.7; }
.jubi__knopf{ gap: 0.5rem; margin-top: 0.4rem; }
.jubi__knopf svg{ width: 17px; height: 17px; transition: translate 0.3s ease; }
.jubi__knopf:hover svg{ translate: 4px 0; }
.jubi__foto{
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 34px 70px -28px rgba(4, 10, 24, 0.85);
}
.jubi-sektion,
#arbeiten.section--dark{ position: relative; }
.jubi-sektion::after,
#arbeiten.section--dark::after{
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: min(1180px, calc(100% - 2.5rem));
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent);
pointer-events: none;
}
.nav__gruppe{ gap: 0; }
.jubi__knoepfe{ display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
@media (max-width: 760px){.jubi__knoepfe{
justify-self: stretch;
width: 100%;
flex-direction: column;
align-items: stretch;
}.jubi__knoepfe .jubi__knopf{ width: 100%; justify-content: center; }}
.nav__unter{ min-width: 19rem; padding: 0.7rem; gap: 0.15rem; }
.nav__unter-titel{
margin: 0.15rem 0.6rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #7fd0e0;
}
.nav__unter a{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.6rem;
border-radius: 12px;
transition: background-color 0.2s ease, translate 0.2s ease;
}
.nav__unter-icon{
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
color: #7fd0e0;
background: rgba(127, 208, 224, 0.1);
border: 1px solid rgba(127, 208, 224, 0.2);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav__unter-icon svg{ width: 17px; height: 17px; }
.nav__unter-text{ display: grid; gap: 0.1rem; min-width: 0; }
.nav__unter-name{ font-size: 0.93rem; font-weight: 600; color: #eef3fb; }
.nav__unter-info{ font-size: 0.78rem; line-height: 1.35; color: rgba(233, 240, 250, 0.6); }
.nav__unter-pfeil{
display: grid;
place-items: center;
width: 22px;
color: rgba(127, 208, 224, 0.75);
opacity: 0;
translate: -4px 0;
transition: opacity 0.2s ease, translate 0.2s ease;
}
.nav__unter-pfeil svg{ width: 15px; height: 15px; }
.nav__unter a:hover,
.nav__unter a:focus-visible{
background: rgba(127, 208, 224, 0.1);
translate: 2px 0;
}
.nav__unter a:hover .nav__unter-icon,
.nav__unter a:focus-visible .nav__unter-icon{
background: var(--grad);
border-color: transparent;
color: #fff;
}
.nav__unter a:hover .nav__unter-pfeil,
.nav__unter a:focus-visible .nav__unter-pfeil{ opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce){.nav__unter a, .nav__unter-icon, .nav__unter-pfeil{ transition: none; }}
.datei input[type="file"]:focus-visible + .datei__flaeche{
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 14px;
}
.cookie[hidden]{ display: none; }
.cookie{
position: fixed;
inset: 0;
z-index: 3000;
display: grid;
place-items: end center;
padding: clamp(0.75rem, 2vw, 1.5rem);
}
.cookie__hof{
position: absolute;
inset: 0;
background: rgba(10, 19, 34, 0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
.cookie__karte{
position: relative;
width: min(100%, 46rem);
max-height: calc(100vh - 2rem);
overflow-y: auto;
background: #fff;
color: var(--ink);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 26px 60px -18px rgba(10, 19, 34, 0.45);
padding: clamp(1.25rem, 3vw, 2rem);
animation: cookie-auf 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie__titel{
font-size: clamp(1.15rem, 2.2vw, 1.4rem);
font-weight: 700;
margin: 0 0 0.6rem;
line-height: 1.25;
}
.cookie__text{
margin: 0 0 1.1rem;
color: var(--ink-2);
font-size: 0.95rem;
line-height: 1.6;
}
.cookie__knoepfe{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem;
}
.cookie__knopf{ flex: 1 1 12rem; justify-content: center; }
.cookie__mehr{
flex: 0 0 auto;
background: none;
border: 0;
padding: 0.6rem 0.4rem;
font: inherit;
font-size: 0.92rem;
color: var(--ink-2);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.cookie__mehr:hover{ color: var(--ink); }
.cookie__fuss{
margin: 1rem 0 0;
font-size: 0.82rem;
line-height: 1.55;
color: var(--ink-2);
}
.cookie__fuss a{ color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie__fuss a:hover{ color: var(--blue); }
.cookie__liste{
list-style: none;
margin: 0 0 1.2rem;
padding: 0;
display: grid;
gap: 0.7rem;
}
.cookie__gruppe{
border: 1px solid var(--line);
border-radius: 12px;
padding: 0.85rem 1rem;
background: rgba(47, 77, 158, 0.02);
}
.cookie__kopf{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.4rem;
}
.cookie__name{ font-weight: 650; font-size: 0.98rem; }
.cookie__fest{
font-size: 0.78rem;
color: var(--ink-2);
background: var(--line);
border-radius: 999px;
padding: 0.15rem 0.6rem;
}
.cookie__info{
margin: 0 0 0.35rem;
font-size: 0.88rem;
line-height: 1.55;
color: var(--ink-2);
}
.cookie__meta{
margin: 0;
font-family: var(--font-mono);
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0.85;
}
.cookie__schalter{
display: flex;
align-items: center;
gap: 0.65rem;
cursor: pointer;
width: 100%;
}
.cookie__schalter input{
position: absolute;
opacity: 0;
width: 44px;
height: 24px;
margin: 0;
cursor: pointer;
}
.cookie__bahn{
flex: 0 0 44px;
width: 44px;
height: 24px;
border-radius: 999px;
background: var(--line);
position: relative;
transition: background-color 0.22s ease;
}
.cookie__bahn::after{
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 3px rgba(10, 19, 34, 0.3);
transition: translate 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.cookie__schalter input:checked + .cookie__bahn{ background: var(--blue); }
.cookie__schalter input:checked + .cookie__bahn::after{ translate: 20px 0; }
html.cookie-offen, html.cookie-offen body{ overflow: hidden; }
@media (max-width: 560px){.cookie{ place-items: end stretch; }.cookie__karte{ border-radius: 16px; }.cookie__knoepfe{ flex-direction: column; align-items: stretch; }.cookie__knopf{ width: 100%; }.cookie__mehr{ width: 100%; }}
@media (prefers-reduced-motion: reduce){.cookie__karte{ animation: none; }.cookie__bahn::after{ transition: none; }}
html.cookie-warten .hero *,
html.cookie-warten .hero::before,
html.cookie-warten .hero::after,
html.cookie-warten .bootfx,
html.cookie-warten .bootfx *,
html.cookie-warten .bootfx::before,
html.cookie-warten .bootfx::after{
animation-play-state: paused !important;
transition: none !important;
}
p, li, dd, figcaption, blockquote, .section__intro, .prosa p{
text-wrap: pretty;
}
.nav__burger{ min-width: 44px; min-height: 44px; }
.btn{ min-height: 44px; }
.netz{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
}
[data-stage] .section__head,
[data-zug] .section__head,
.prozess__stage .section__head{
--kopf: 0;
transform: translateY(calc(var(--kopf) * -1.6rem)) scale(calc(1 - var(--kopf) * 0.06));
transform-origin: left center;
opacity: calc(1 - var(--kopf) * 0.45);
will-change: transform;
}
@media (prefers-reduced-motion: reduce){[data-stage] .section__head,
[data-zug] .section__head,
.prozess__stage .section__head{ transform: none; opacity: 1; }}
.demat{ padding: 0; }
.demat__stage{ position: relative; height: 400vh; }
.demat__pin{
position: sticky;
top: 0;
height: 100vh;
outline: none;
display: flex;
align-items: center;
overflow: hidden;
padding-top: clamp(4.5rem, 9vh, 6.2rem);
}
.demat__pin > .wrap{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
padding-block: clamp(1.2rem, 4vh, 2.8rem);
}
.demat__deko{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.demat__deko i{
position: absolute;
right: 4vw; top: 8vh;
width: 38vw; height: 38vw;
border-radius: 50%;
border: 1px solid rgba(47, 77, 158, 0.16);
box-shadow: inset 0 0 0 1px rgba(47, 163, 186, 0.07);
opacity: 0.5;
transform: translate3d(calc(var(--fort, 0) * -16vw), calc((var(--fort, 0) - 0.35) * 46vh), 0)
rotate(calc(var(--fort, 0) * 40deg))
scale(calc(0.9 + var(--fort, 0) * 0.3));
}
@property --ein{
syntax: '<number>';
inherits: true;
initial-value: 1;
}
.demat__stage:not(.ist-eingelaufen) .demat__kopf > *,
.demat__stage:not(.ist-eingelaufen) [data-demattext="0"] > *,
.demat__stage:not(.ist-eingelaufen) [data-dematbild="0"],
.demat__stage:not(.ist-eingelaufen) .demat__fort{ --ein: 0; }
.demat__stage.ist-eingelaufen .demat__kopf > *,
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:not(:nth-child(5)),
.demat__stage.ist-eingelaufen [data-dematbild="0"],
.demat__stage.ist-eingelaufen .demat__fort{
animation: deinlauf 0.95s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
.demat__stage.ist-eingelaufen .demat__kicker{ animation-delay: 0.02s; --ex: -40px; }
.demat__stage.ist-eingelaufen .demat__h2{ animation-delay: 0.1s; --ex: -60px; }
.demat__stage.ist-eingelaufen .demat__unter{ animation-delay: 0.18s; --ex: -45px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(1){ animation-delay: 0.3s; --ex: -70px; }
.demat__stage.ist-eingelaufen [data-dematbild="0"]{
animation-duration: 1.1s;
animation-delay: 0.36s;
--ex: 110px;
}
.demat__stage.ist-eingelaufen .demat__fort{ animation-delay: 0.72s; --ex: 0px; }
.demat__kopf > *{
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), calc((1 - var(--ein, 1)) * 14px), 0);
opacity: var(--ein, 1);
}
.demat__fort{
transform: translate3d(0, calc((1 - var(--ein, 1)) * 22px), 0);
opacity: var(--ein, 1);
}
.demat__texte,
.demat__buehnen{ perspective: 1500px; perspective-origin: 50% 45%; }
.demat__text,
.dbild{
grid-area: 1 / 1;
--auf: 0;
--ri: 1;
--weg: calc(1 - var(--auf));
--weg2: calc((1 - var(--auf)) * (1 - var(--auf)));
--weg3: calc((1 - var(--auf)) * (1 - var(--auf)) * (1 - var(--auf)));
--sicht: calc(var(--auf) * var(--auf) * (3 - 2 * var(--auf)));
opacity: var(--sicht);
pointer-events: none;
transform-style: preserve-3d;
}
.demat__text.is-vorn{ pointer-events: auto; }
.demat__text{
transform:
translate3d(calc(var(--weg2) * var(--ri) * 60px), 0, calc(var(--weg2) * -180px))
rotateY(calc(var(--weg2) * var(--ri) * 16deg));
}
.dbild{
transform:
translate3d(calc(var(--weg2) * var(--ri) * 110px + (1 - var(--ein, 1)) * var(--ex, 0px)),
calc(var(--weg2) * -24px), calc(var(--weg2) * -280px))
rotateY(calc(var(--weg2) * var(--ri) * 26deg + (1 - var(--ein, 1)) * -14deg))
rotateX(calc(var(--weg2) * -8deg))
scale(calc(1 - (1 - var(--ein, 1)) * 0.06));
opacity: calc(var(--sicht) * var(--ein, 1));
filter: blur(calc(var(--weg3) * 7px + (1 - var(--ein, 1)) * 5px));
}
.demat__text > *{
transform:
translate3d(calc(var(--weg2) * var(--dx, 0px) + (1 - var(--ein, 1)) * var(--ex, 0px)),
calc(var(--weg2) * var(--dy, 22px)), calc(var(--weg2) * var(--dz, -40px)))
rotateX(calc(var(--weg2) * var(--rx, 24deg)));
opacity: var(--ein, 1);
filter: blur(calc(var(--weg3) * var(--bl, 6px)));
transform-origin: 0 50%;
}
.demat__text > *:nth-child(1){ --dx: -22px; --dy: -16px; --dz: -50px; --rx: -18deg; --bl: 3px; }
.demat__text > *:nth-child(2){ --dx: 16px; --dy: -9px; --dz: -80px; --rx: 14deg; --bl: 4px; }
.demat__text > *:nth-child(3){ --dx: -13px; --dy: 15px; --dz: -65px; --rx: 20deg; --bl: 5px; }
.demat__text > *:nth-child(4){ --dx: 15px; --dy: 20px; --dz: -80px; --rx: -12deg; --bl: 4px; }
.demat__text > *:nth-child(5){
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 22px, 0);
opacity: 0;
filter: none;
transition:
transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1),
opacity 0.45s ease,
box-shadow 0.25s ease;
}
.demat__text.is-vorn > *:nth-child(5){
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 0, 0);
opacity: var(--ein, 1);
transition-delay: 0.12s, 0.12s, 0s;
}
.demat__text.is-vorn > a:nth-child(5):hover{ transform: translateY(-2px); }
.dbild .dfenster{ position: relative; overflow: hidden; }
.dbild .dfenster::after{
content: "";
position: absolute;
inset: -40% -10%;
background: linear-gradient(105deg, transparent 42%, rgba(63, 214, 232, 0.28) 50%, transparent 58%);
transform: translateX(calc((var(--auf) - 0.5) * 230%));
opacity: calc(var(--weg) * var(--auf) * 3.2);
pointer-events: none;
}
.demat__kicker,
.kicker--marke{
display: block;
margin: 0 0 1.15rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-2);
}
.demat__kicker::before,
.kicker--marke::before{
content: "";
display: block;
width: 2.6rem;
height: 3px;
margin-bottom: 0.7rem;
border-radius: 999px;
background: var(--grad);
}
.demat__h2{
margin: 0;
font-size: clamp(1.9rem, 4.15vw, 3.7rem);
font-stretch: 100%;
letter-spacing: -0.032em;
line-height: 1.06;
white-space: nowrap;
}
.demat__h2 .grad{
background: linear-gradient(100deg, var(--blue) 10%, var(--teal) 40%, var(--blue) 70%, var(--teal) 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: dgradzug 9s ease-in-out infinite;
}
.demat__unter{
margin: 1.1rem 0 0;
max-width: 34rem;
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.6;
color: var(--ink-2);
}
.demat__lage{
align-self: center;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.6rem, 5vw, 4.5rem);
align-items: center;
margin-top: clamp(0.5rem, 2vh, 1.4rem);
}
.demat__texte{ display: grid; }
.demat__text{ display: grid; gap: 0.8rem; align-content: center; }
.demat__nr{
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.15rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
}
.demat__nr b{
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.demat__nr span{ font-weight: 400; opacity: 0.65; }
.demat__nr::after{
content: "";
flex: 1;
height: 1px;
max-width: 4.5rem;
background: linear-gradient(90deg, rgba(47, 163, 186, 0.5), transparent);
}
.demat__text h3{
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.3rem);
font-stretch: 100%;
letter-spacing: -0.028em;
line-height: 1.08;
text-wrap: balance;
}
.demat__text h3 em{
font-style: normal;
background: linear-gradient(100deg, var(--blue) 15%, var(--teal) 85%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.demat__lead{ color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.65; margin: 0; }
.demat__text ul{ list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.demat__text li{ position: relative; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.97rem; }
.demat__text li::before{
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--teal);
}
.demat__text a{
justify-self: start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
padding: 0.72rem 1.5rem;
border-radius: 999px;
background: var(--grad);
color: #fff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demat__text a::after{
content: "\2192";
transition: transform 0.25s ease;
}
.demat__text a:hover{ transform: translateY(-2px); box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95); }
.demat__text a:hover::after{ transform: translateX(4px); }
.demat__buehnen{ position: relative; display: grid; align-content: center; min-height: clamp(15rem, 30vh, 19rem); }
.dbild{ display: grid; align-content: center; }
.dfenster{
border-radius: 16px;
background: #fff;
border: 1px solid rgba(12, 22, 38, 0.08);
box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.5);
overflow: hidden;
}
.dfenster__leiste{
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid rgba(12, 22, 38, 0.06);
background: rgba(12, 22, 38, 0.02);
}
.dfenster__leiste i{ width: 8px; height: 8px; border-radius: 50%; background: rgba(12, 22, 38, 0.13); }
.dfenster__leiste em{
margin-left: 0.5rem;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink-2);
background: rgba(12, 22, 38, 0.04);
padding: 0.15rem 0.6rem;
border-radius: 999px;
}
.dfenster__inhalt{
display: grid;
gap: clamp(0.55rem, 1.1vw, 0.85rem);
padding: clamp(0.8rem, 1.5vw, 1.15rem);
min-height: clamp(11rem, 24vh, 15rem);
align-content: center;
}
.dsz{ display: grid; align-content: center; }
.dsz--1{ grid-template-columns: 1fr; gap: 0.4rem; }
.dsz--2{ grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); }
.dsz--3{ grid-template-columns: 1fr; gap: 0.9rem; align-content: center; }
.dsz--4{ grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem clamp(1rem, 2.5vw, 2rem); align-items: center; padding-right: 0.4rem; }
.dform{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; align-items: end; }
.dform .dweb__knopf{ grid-column: 1 / -1; }
.dfeld{
display: grid;
gap: 1px;
padding: 0.26rem 0.5rem;
border-radius: 8px;
border: 1px solid rgba(12, 22, 38, 0.1);
background: rgba(12, 22, 38, 0.02);
opacity: 0;
}
.is-vorn .dfeld{ animation: dfeldan 12s ease-out infinite; }
.is-vorn .dfeld:nth-child(1){ animation-delay: 0.7s; }
.is-vorn .dfeld:nth-child(2){ animation-delay: 1.5s; }
.is-vorn .dfeld:nth-child(3){ animation-delay: 2.3s; }
.dfeld em{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dfeld b{
display: flex;
align-items: center;
font-size: 0.76rem;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.dfeld b > span{ display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.is-vorn .dfeld:nth-child(1) b > span{ animation: dtipp 12s steps(11, end) infinite 0.85s; }
.is-vorn .dfeld:nth-child(2) b > span{ animation: dtipp 12s steps(15, end) infinite 1.65s; }
.is-vorn .dfeld:nth-child(3) b > span{ animation: dtipp 12s steps(12, end) infinite 2.45s; }
.dcursor{
width: 1.5px; height: 0.85em;
margin-left: 1px;
background: var(--teal-ink);
opacity: 0;
}
.is-vorn .dcursor{ animation: dblink 0.9s steps(2, end) infinite, dcursoran 12s linear infinite; }
.dweb__knopf{
position: relative;
justify-self: start;
padding: 0.38rem 0.95rem;
border-radius: 999px;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
font-size: 0.78rem;
font-weight: 600;
opacity: 0;
}
.is-vorn .dweb__knopf{ animation: dknopf 12s ease-out infinite; }
.dklick{
position: absolute;
left: 50%; top: 50%;
width: 16px; height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.35);
opacity: 0;
}
.is-vorn .dklick{ animation: dklick 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.dklick::after{
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
opacity: 0;
}
.is-vorn .dklick::after{ animation: dwelle 12s ease-out infinite; }
.dfluss{ position: relative; height: 20px; }
.dfluss::before{
content: "";
position: absolute;
left: 3%; right: 16%; top: 50%;
height: 2px;
border-radius: 2px;
background: repeating-linear-gradient(90deg,
rgba(47, 163, 186, 0.4) 0 6px, transparent 6px 12px);
opacity: 0;
}
.is-vorn .dfluss::before{ animation: dbahnan 12s linear infinite; }
.dfluss__ziel{
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
padding: 0.18rem 0.5rem;
border-radius: 6px;
background: rgba(47, 77, 158, 0.07);
border: 1px solid rgba(47, 77, 158, 0.16);
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.05em;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dfluss__ziel{ animation: dzielan 12s ease-out infinite; }
.dfluss__paket{
position: absolute;
top: 50%;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(47, 163, 186, 0.5);
box-shadow: 0 6px 16px -8px rgba(12, 22, 38, 0.4);
font-size: 0.66rem;
font-weight: 600;
color: var(--teal-ink);
white-space: nowrap;
opacity: 0;
}
.dfluss__paket i{ font-style: normal; }
.is-vorn .dfluss__paket{ animation: dpaket 12s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
.dkalender{ display: grid; gap: 0.3rem; }
.dkalender__kopf{
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dkalender__kopf em{ font-style: normal; opacity: 0.7; }
.dkalender__raster{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dkalender__raster i{
height: 16px;
border-radius: 4px;
background: rgba(12, 22, 38, 0.05);
}
.dkalender__raster i.ist-alt{ background: rgba(12, 22, 38, 0.12); }
.is-vorn .dkalender__raster i.ist-belegt{ animation: dbelegt 12s ease-out infinite; }
.dabschluss{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dkalender__termin{
display: grid;
grid-template-columns: auto 1fr;
gap: 0.05rem 0.5rem;
align-items: center;
padding: 0.35rem 0.6rem;
border-radius: 10px;
background: rgba(46, 201, 139, 0.08);
border: 1px solid rgba(46, 201, 139, 0.3);
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dkalender__termin{ animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.dkalender__termin i{
grid-row: 1 / 3;
display: grid; place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.16);
color: #1a7f4e;
font-style: normal;
}
.dkalender__termin em{ font-style: normal; color: var(--ink); font-weight: 650; font-size: 0.82rem; }
.dtoast{
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(12, 22, 38, 0.1);
box-shadow: 0 10px 24px -14px rgba(12, 22, 38, 0.5);
font-size: 0.7rem;
color: var(--ink-2);
opacity: 0;
}
.dtoast i{ font-style: normal; color: var(--teal-ink); }
.is-vorn .dtoast{ animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite 1.1s; }
.dtab, .dsys{ display: grid; gap: 0.4rem; align-content: start; }
.dtab__kopf{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 0.1rem;
}
.dtab__kopf em{ font-style: normal; }
.dtab__kopf em.ist-gut{ color: #1a7f4e; }
.dtab__zeile{ display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.dtab__zeile i{ height: 9px; border-radius: 5px; background: rgba(12, 22, 38, 0.1); }
.dtab__zeile i:last-child{ width: 26px; background: rgba(12, 22, 38, 0.06); }
.is-vorn .dtab__zeile{ animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.is-vorn .dtab__zeile:nth-of-type(2){ animation-delay: 0.5s; }
.is-vorn .dtab__zeile:nth-of-type(3){ animation-delay: 1s; }
.is-vorn .dtab__zeile:nth-of-type(4){ animation-delay: 1.5s; }
.is-vorn .dtab__zeile:nth-of-type(5){ animation-delay: 2s; }
.dtab__mail{
justify-self: start;
margin-top: 0.15rem;
padding: 0.2rem 0.5rem;
border-radius: 6px;
background: rgba(217, 139, 74, 0.12);
color: #b0702f;
font-size: 0.64rem;
font-weight: 600;
}
.is-vorn .dtab__mail{ animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.4s; }
.dwandern{ position: relative; width: clamp(1.8rem, 4.5vw, 3rem); height: 60px; }
.dwandern i{
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
opacity: 0;
}
.dwandern i:nth-child(1){ top: 14%; }
.dwandern i:nth-child(2){ top: 32%; }
.dwandern i:nth-child(3){ top: 50%; }
.dwandern i:nth-child(4){ top: 68%; }
.dwandern i:nth-child(5){ top: 86%; }
.is-vorn .dwandern i{ animation: dwandern 12s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
.is-vorn .dwandern i:nth-child(2){ animation-delay: 0.55s; }
.is-vorn .dwandern i:nth-child(3){ animation-delay: 1.1s; }
.is-vorn .dwandern i:nth-child(4){ animation-delay: 1.65s; }
.is-vorn .dwandern i:nth-child(5){ animation-delay: 2.2s; }
.dsys__kacheln{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.15rem; }
.dsys__kacheln b{
padding: 0.38rem 0.45rem;
border-radius: 9px;
background: rgba(47, 77, 158, 0.06);
border: 1px solid rgba(47, 77, 158, 0.14);
color: var(--ink);
font-size: 0.92rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
opacity: 0;
}
.is-vorn .dsys__kacheln b{ animation: dkachel 12s ease-out infinite; }
.is-vorn .dsys__kacheln b:nth-child(2){ animation-delay: 0.2s; }
.is-vorn .dsys__kacheln b:nth-child(3){ animation-delay: 0.4s; }
.dsys__kacheln i{
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.52rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 500;
margin-top: 1px;
}
.dsys__lauf{ display: grid; gap: 0.3rem; }
.dsys__zeile{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-radius: 7px;
background: rgba(47, 163, 186, 0.06);
border-left: 2px solid var(--teal);
font-size: 0.7rem;
color: var(--ink-2);
opacity: 0;
}
.dsys__zeile em{ font-style: normal; font-family: var(--font-mono); font-size: 0.65rem; }
.dstatus{
font-style: normal;
font-size: 0.6rem;
font-weight: 600;
color: #1a7f4e;
background: rgba(46, 201, 139, 0.14);
padding: 0.08rem 0.4rem;
border-radius: 999px;
}
.is-vorn .dsys__zeile{ animation: dlauf 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.is-vorn .dsys__zeile:nth-child(2){ animation-delay: 0.7s; }
.is-vorn .dsys__zeile:nth-child(3){ animation-delay: 1.4s; }
.dsys__takt{
display: flex;
align-items: center;
gap: 3px;
margin-top: 0.2rem;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0;
}
.dsys__takt i{
width: 4px; height: 12px;
border-radius: 2px;
background: rgba(47, 163, 186, 0.25);
}
.is-vorn .dsys__takt{ animation: dtaktan 12s ease-out infinite; }
.is-vorn .dsys__takt i{ animation: dtakt 1.6s ease-in-out infinite; }
.is-vorn .dsys__takt i:nth-child(2){ animation-delay: 0.1s; }
.is-vorn .dsys__takt i:nth-child(3){ animation-delay: 0.2s; }
.is-vorn .dsys__takt i:nth-child(4){ animation-delay: 0.3s; }
.is-vorn .dsys__takt i:nth-child(5){ animation-delay: 0.4s; }
.is-vorn .dsys__takt i:nth-child(6){ animation-delay: 0.5s; }
.is-vorn .dsys__takt i:nth-child(7){ animation-delay: 0.6s; }
.is-vorn .dsys__takt i:nth-child(8){ animation-delay: 0.7s; }
.dsz--3{ position: relative; }
.is-vorn .dsz--3{ animation: dverlauf 13s linear infinite; }
.dchatlauf{ display: grid; gap: 0.42rem; align-content: start; }
.dchat{
display: block;
padding: 0.45rem 0.75rem;
border-radius: 12px;
font-size: 0.78rem;
line-height: 1.45;
opacity: 0;
}
.dchat--frage{
justify-self: start;
background: rgba(12, 22, 38, 0.05);
color: var(--ink-2);
border-bottom-left-radius: 4px;
transform-origin: 0 100%;
}
.dchat--frage > span{ display: inline-block; }
.dchat--antwort{
justify-self: end;
max-width: 88%;
background: linear-gradient(125deg, var(--blue), #2f7f9e);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 10px 22px -16px rgba(47, 77, 158, 0.9);
transform-origin: 100% 100%;
}
.dchat__text, .dchat__text2{ display: inline-block; }
.dpaar{ display: grid; }
.dpaar > *{ grid-area: 1 / 1; }
.dpaar .dtippt{ align-self: center; }
.is-vorn .dchat--f1{ animation: dblase1 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--1{ animation: dtippt1 13s linear infinite; }
.is-vorn .dchat--a1{ animation: dblase2 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dquellen{ animation: dquellen 13s ease-out infinite; }
.is-vorn .dchat--f2{ animation: dblase3 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--2{ animation: dtippt2 13s linear infinite; }
.is-vorn .dchat--a2{ animation: dblase4 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.dquellen{
display: flex;
align-items: center;
gap: 0.28rem;
margin-top: 4px;
font-size: 0.63rem;
opacity: 0;
}
.dquellen i{
display: grid; place-items: center;
width: 14px; height: 14px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.22);
font-style: normal;
font-size: 0.55rem;
font-weight: 700;
}
.dtippt{
display: flex; gap: 4px;
justify-self: end;
padding: 0.22rem 0.5rem;
border-radius: 999px;
background: rgba(12, 22, 38, 0.05);
opacity: 0;
}
.dtippt i{ width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.3); }
.is-vorn .dtippt i{ animation: dtippt 1.1s ease-in-out infinite; }
.is-vorn .dtippt i:nth-child(2){ animation-delay: 0.15s; }
.is-vorn .dtippt i:nth-child(3){ animation-delay: 0.3s; }
.dsicher{ display: grid; gap: 0.3rem; margin-top: 0.3rem; }
.dsicher__zeile{
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dsicher__zeile{ animation: dsicher1 13s ease-out infinite; }
.is-vorn .dsicher__zeile:nth-child(2){ animation-name: dsicher2; }
.is-vorn .dsicher__zeile:nth-child(3){ animation-name: dsicher3; }
.dsicher__zeile i{
flex: 0 0 8px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.16);
}
.dmess{ grid-column: 1; display: grid; gap: 0.6rem; }
.dmess__zeile{ display: grid; grid-template-columns: 3.6rem 1fr 3rem; align-items: center; gap: 0.55rem; }
.dmess__zeile em{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dbahn{ display: block; height: 10px; border-radius: 6px; background: rgba(12, 22, 38, 0.07); overflow: hidden; }
.dbahn i{ display: block; height: 100%; border-radius: 6px; width: 0; }
.is-vorn .dalt{ background: #d98b4a; animation: dbalken 12s cubic-bezier(0.3, 0, 0.4, 1) infinite; --breit: 92%; }
.is-vorn .dneu{ background: linear-gradient(90deg, var(--blue), var(--teal)); animation: dbalken 12s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 2.6s; --breit: 22%; }
.dmess__zeile b{ font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-align: right; opacity: 0; }
.is-vorn .dmess__zeile b{ animation: dwertan 12s ease-out infinite 2s; }
.is-vorn .dmess__zeile:nth-child(2) b{ animation-delay: 4.4s; }
.dpruef{ grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.6rem; }
.dpruef__zeile{
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: var(--ink-2);
opacity: 0;
}
.dpruef__zeile i{
flex: 0 0 14px;
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(12, 22, 38, 0.18);
position: relative;
}
.dpruef__zeile i::after{
content: "";
position: absolute;
left: 3px; top: 1px;
width: 4px; height: 7px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg) scale(0);
}
.is-vorn .dpruef__zeile{ animation: dpruefan 12s ease-out infinite 3.4s; }
.is-vorn .dpruef__zeile:nth-child(2){ animation-delay: 3.9s; }
.is-vorn .dpruef__zeile:nth-child(3){ animation-delay: 4.4s; }
.is-vorn .dpruef__zeile:nth-child(4){ animation-delay: 4.9s; }
.is-vorn .dpruef__zeile i{ animation: dhakenan 12s ease-out infinite 3.7s; }
.is-vorn .dpruef__zeile:nth-child(2) i{ animation-delay: 4.2s; }
.is-vorn .dpruef__zeile:nth-child(3) i{ animation-delay: 4.7s; }
.is-vorn .dpruef__zeile:nth-child(4) i{ animation-delay: 5.2s; }
.is-vorn .dpruef__zeile i::after{ animation: dhaken 12s cubic-bezier(0.2, 1.4, 0.4, 1) infinite 3.75s; }
.is-vorn .dpruef__zeile:nth-child(2) i::after{ animation-delay: 4.25s; }
.is-vorn .dpruef__zeile:nth-child(3) i::after{ animation-delay: 4.75s; }
.is-vorn .dpruef__zeile:nth-child(4) i::after{ animation-delay: 5.25s; }
.dring{ grid-column: 2; grid-row: 1 / 3; position: relative; justify-self: center; align-self: center; width: clamp(6rem, 11vw, 8rem); }
.dring svg{ width: 100%; display: block; transform: rotate(-90deg); }
.dring__bahn{ fill: none; stroke: rgba(12, 22, 38, 0.08); stroke-width: 9; }
.dring__wert{
fill: none;
stroke: var(--teal);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 302;
stroke-dashoffset: 302;
}
.is-vorn .dring__wert{ animation: dring 12s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 1.2s; }
.dring__zahl{
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
}
.dring__zahl b{ font-size: 1.6rem; font-weight: 750; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.dring__zahl i{
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin-top: 2px;
}
.dhaken{ grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.dhaken span{
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dhaken span{ animation: dpruefan 12s ease-out infinite 6.2s; }
.is-vorn .dhaken span:nth-child(2){ animation-delay: 6.6s; }
.is-vorn .dhaken span:nth-child(3){ animation-delay: 7s; }
.dhaken i{
display: grid; place-items: center;
width: 19px; height: 19px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.12);
color: #1a7f4e;
font-style: normal;
font-size: 0.66rem;
}
.demat__fort{ margin-top: clamp(1.2rem, 3vh, 2.2rem); display: grid; gap: 0.7rem; }
.demat__bahn{
position: relative;
display: block;
height: 3px;
border-radius: 2px;
background: rgba(47, 77, 158, 0.12);
overflow: hidden;
}
.demat__bahn i{
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--fort, 0) * 100%);
border-radius: 2px;
background: var(--grad);
}
.demat__bahn::after{
content: "";
position: absolute;
top: 50%;
left: calc(var(--fort, 0) * 100%);
width: 9px; height: 9px;
margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.22), 0 0 14px rgba(63, 214, 232, 0.6);
}
.demat__marken{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.demat__marken span{
display: grid;
gap: 2px;
font-size: 0.82rem;
font-weight: 500;
color: var(--ink-2);
opacity: 0.5;
transition: opacity 0.4s ease, color 0.4s ease;
}
.demat__marken span em{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
color: var(--ink-2);
}
.demat__marken span.ist-durch{ opacity: 0.75; }
.demat__marken span.is-vorn{ opacity: 1; color: var(--ink); font-weight: 650; }
.demat__marken span.is-vorn em{ color: var(--teal-ink); }
@media (min-width: 901px) and (max-height: 800px){.demat__kopf{ margin-bottom: 0.6rem; }.demat__h2{ font-size: clamp(1.8rem, 3.2vw, 2.6rem); }.demat__unter{ display: none; }.demat__kicker{ margin-bottom: 0.6rem; font-size: 0.74rem; }.demat__lage{ gap: clamp(1.4rem, 4vw, 3rem); margin-top: 0.4rem; }.demat__text{ gap: 0.5rem; }.demat__text h3{ font-size: clamp(1.35rem, 2vw, 1.8rem); }.demat__lead{ font-size: 0.98rem; line-height: 1.5; }.demat__text a{ margin-top: 0.15rem; padding: 0.6rem 1.25rem; }.demat__buehnen{ min-height: clamp(15rem, 40vh, 20rem); }.dfenster__inhalt{ min-height: clamp(12rem, 32vh, 17rem); }.demat__fort{ margin-top: 0.9rem; }}
@media (max-width: 900px){.demat__pin{ padding-top: clamp(3.8rem, 8vh, 5rem); }.demat__h2{ white-space: normal; text-wrap: balance; font-size: clamp(1.75rem, 7vw, 2.4rem); }.demat__stage{ height: 360vh; }.demat__lage{ grid-template-columns: 1fr; gap: 1.4rem; }.demat__buehnen{ order: -1; min-height: 15rem; }.demat__text h3{ font-size: 1.5rem; }.dfenster__inhalt{ min-height: 12rem; }}
@media (prefers-reduced-motion: reduce){.demat__stage{ height: auto !important; }.demat__pin{ position: static; height: auto; padding: 3rem 0; }.demat__texte, .demat__buehnen{ display: grid; gap: 2.5rem; }.demat__text, .dbild{ grid-area: auto; opacity: 1; filter: none; }.demat__text > *, .dbild > *{ transform: none; }.is-vorn *{ animation: none !important; }.dalt{ width: 92%; }.dneu{ width: 22%; }.dchat--antwort, .dquellen, .dsicher__zeile, .dkalender__termin, .dhaken span{ opacity: 1; }.dchat__text{ width: 100%; }.dring__wert{ stroke-dashoffset: 54; }}
.cores-stack .mock{ --takt: 1; }
.cores-stack .core:hover .mock{ --takt: 0.55; }
.cores-stack .mock--browser{ position: relative; overflow: hidden; }
.cores-stack .mock--browser .mock__pill{
animation: mockpuls calc(4.4s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--browser .mock__cols span{
animation: mockatem calc(5.2s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--browser .mock__cols span:nth-child(2){ animation-delay: 0.5s; }
.cores-stack .mock--browser .mock__cols span:nth-child(3){ animation-delay: 1s; }
.cores-stack .mock--browser::after{
content: "";
position: absolute;
inset: 0 auto 0 -40%;
width: 40%;
background: linear-gradient(100deg, transparent, rgba(63, 214, 232, 0.16), transparent);
animation: mockstreif calc(6.5s * var(--takt)) ease-in-out infinite;
pointer-events: none;
}
.cores-stack .mock--app .mock__side i{
animation: mockmenue calc(6s * var(--takt)) steps(1, end) infinite;
}
.cores-stack .mock--app .mock__side i:nth-child(2){ animation-delay: calc(1.5s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(3){ animation-delay: calc(3s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(4){ animation-delay: calc(4.5s * var(--takt)); }
.cores-stack .mock--app .mock__rows i{
animation: mockzeile calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__rows i:nth-child(2){ animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(3){ animation-delay: calc(0.7s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(4){ animation-delay: calc(1.05s * var(--takt)); }
.cores-stack .mock--app .mock__kpis span{
animation: mockkpi calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__kpis span:nth-child(2){ animation-delay: calc(0.2s * var(--takt)); }
.cores-stack .mock--app .mock__kpis span:nth-child(3){ animation-delay: calc(0.4s * var(--takt)); }
.cores-stack .mock--chat .dot--ok{
animation: mockdot calc(2.6s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--chat .mock__msg--user,
.cores-stack .mock--chat .mock__msg--ai,
.cores-stack .mock--chat .mock__tippt{ opacity: 0; }
html.js .core.in .mock--chat .mock__msg--user{
transform-origin: 100% 100%;
animation: chatuser 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__tippt{
animation: chattippt 11s linear infinite;
}
html.js .core.in .mock--chat .mock__msg--ai{
transform-origin: 0 100%;
animation: chatai 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__input span{
animation: chatschreib 11s steps(1, end) infinite;
}
html:not(.js) .cores-stack .mock--chat .mock__msg--user,
html:not(.js) .cores-stack .mock--chat .mock__msg--ai{ opacity: 1; }
.cores-stack .mock--index .mock__idx{
animation: mockidx calc(6.4s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--index .mock__idx:nth-child(2){ animation-delay: calc(1.6s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(3){ animation-delay: calc(3.2s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(4){ animation-delay: calc(4.8s * var(--takt)); }
@media (prefers-reduced-motion: reduce){.cores-stack .mock *,
.cores-stack .mock::after,
.cores-stack .core::after{ animation: none !important; }}
.cores-stack .mock--browser .mock__pill{ position: relative; }
.mock__zeiger{
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.35);
opacity: 0;
pointer-events: none;
}
.cores-stack .mock--browser .mock__zeiger{
animation: mockzeiger calc(6.4s * var(--takt)) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.mock__quittung{
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.5rem;
padding: 0.26rem 0.6rem;
border-radius: 99px;
background: rgba(46, 201, 139, 0.12);
border: 1px solid rgba(46, 201, 139, 0.3);
font-size: 0.68rem;
font-weight: 600;
color: #1a7f4e;
opacity: 0;
}
.mock__quittung i{ font-style: normal; }
.cores-stack .mock--browser .mock__quittung{
animation: mockquitt calc(6.4s * var(--takt)) ease-out infinite;
}
.mock__balken{
display: flex;
align-items: flex-end;
gap: 5px;
height: 42px;
margin-top: 0.7rem;
}
.mock__balken i{
flex: 1;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, #3fd6e8, #2f4d9e);
height: 20%;
}
.cores-stack .mock--app .mock__balken i{
height: var(--hoch, 60%);
transform-origin: bottom center;
animation: mockbalken calc(5.4s * var(--takt)) cubic-bezier(0.3, 0.9, 0.3, 1) infinite;
}
.cores-stack .mock--app .mock__balken i:nth-child(1){ --hoch: 45%; animation-delay: calc(0.05s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(2){ --hoch: 72%; animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(3){ --hoch: 38%; animation-delay: calc(0.25s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(4){ --hoch: 88%; animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(5){ --hoch: 60%; animation-delay: calc(0.45s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(6){ --hoch: 100%; animation-delay: calc(0.55s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(7){ --hoch: 52%; animation-delay: calc(0.65s * var(--takt)); }
.mock__tippt{
display: inline-flex;
gap: 4px;
align-self: flex-start;
padding: 0.3rem 0.6rem;
margin: 0.2rem 0;
border-radius: 99px;
background: rgba(12, 22, 38, 0.06);
opacity: 0;
}
.mock__tippt i{ width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.35); }
.cores-stack .mock--chat .mock__tippt{
animation: mocktippt calc(7s * var(--takt)) linear infinite;
}
.cores-stack .mock--chat .mock__tippt i{
animation: mockhuepf calc(1.1s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--chat .mock__tippt i:nth-child(2){ animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--chat .mock__tippt i:nth-child(3){ animation-delay: calc(0.3s * var(--takt)); }
.cores-stack .mock--index{ position: relative; }
.mock__marker{
position: absolute;
left: 0; right: 0;
height: 26%;
border-radius: 10px;
background: linear-gradient(90deg, rgba(63, 214, 232, 0.16), rgba(47, 77, 158, 0.08));
border-left: 2px solid var(--teal);
pointer-events: none;
}
.cores-stack .mock--index .mock__marker{
top: 0;
animation: mockmarker calc(6.4s * var(--takt)) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@media (prefers-reduced-motion: reduce){.mock__zeiger, .mock__quittung, .mock__tippt, .mock__marker{ display: none; }.mock__balken i{ height: var(--hoch, 60%); }}
.cores-stack .core--alle .core__copy .ticks{
display: grid;
gap: 0;
margin-top: 1.2rem;
border-top: 1px solid rgba(12, 22, 38, 0.09);
}
.cores-stack .core--alle .core__copy .ticks li{
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.7rem;
padding: 0.62rem 0.2rem;
border: 0;
border-bottom: 1px solid rgba(12, 22, 38, 0.09);
border-radius: 0;
background: none;
box-shadow: none;
font-size: 0.94rem;
color: var(--ink-2);
transform: none;
transition: color 0.25s ease, padding-left 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li::before{
width: 7px;
height: 7px;
flex: none;
background: var(--akz-a);
opacity: 0.55;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li:hover{
color: var(--ink);
padding-left: 0.5rem;
background: none;
border-color: rgba(12, 22, 38, 0.09);
transform: none;
}
.cores-stack .core--alle .core__copy .ticks li:hover::before{
opacity: 1;
transform: scale(1.35);
}
.cores-stack .core--alle:hover .core__copy .ticks li{
border-color: rgba(12, 22, 38, 0.09);
box-shadow: none;
}
html.js [data-fliegt]{
opacity: 0;
transition:
opacity 0.9s cubic-bezier(0.16, 0.84, 0.28, 1),
translate 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
scale 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
filter 0.9s ease;
filter: blur(6px);
scale: 0.94;
}
html.js [data-fliegt="links"]{ translate: -230px 0; }
html.js [data-fliegt="rechts"]{ translate: 260px 0; }
html.js [data-fliegt].ist-da{
opacity: 1;
translate: 0 0;
scale: 1;
filter: blur(0);
}
html.js [data-fliegt="links"] > *{
opacity: 0;
translate: -60px 0;
transition:
opacity 0.7s ease var(--fd, 0s),
translate 0.8s cubic-bezier(0.18, 0.86, 0.28, 1) var(--fd, 0s),
transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
border-color 0.5s ease,
background-color 0.5s ease;
}
html.js [data-fliegt="links"].ist-da > *{ opacity: 1; translate: 0 0; }
html.js [data-fliegt="links"] > *:nth-child(1){ --fd: 0.14s; }
html.js [data-fliegt="links"] > *:nth-child(2){ --fd: 0.26s; }
html.js [data-fliegt="links"] > *:nth-child(3){ --fd: 0.38s; }
html.js [data-fliegt="links"] > *:nth-child(4){ --fd: 0.5s; }
html.js [data-fliegt="links"] > *:nth-child(5){ --fd: 0.62s; }
html.js [data-fliegt="rechts"] .dmock{
transform: perspective(1100px) rotateY(22deg) rotateX(4deg) scale(0.9);
transform-origin: 100% 50%;
transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.28, 1);
}
html.js [data-fliegt="rechts"].ist-da .dmock{
transform: perspective(1100px) rotateY(0deg) rotateX(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce){html.js [data-fliegt],
html.js [data-fliegt] > *{
opacity: 1; translate: none; scale: none; filter: none; transition: none;
}html.js [data-fliegt="rechts"] .dmock{ transform: none; }}
html.js [data-fliegt="auf"]{
opacity: 0;
translate: 0 0;
scale: 1;
filter: none;
perspective: 1600px;
transition: opacity 0.7s ease;
}
html.js [data-fliegt="auf"].ist-da{ opacity: 1; }
html.js [data-fliegt="auf"] .pslide__visual{
transform: rotateX(74deg) scale(0.86);
transform-origin: 50% 100%;
opacity: 0;
transition:
transform 1.15s cubic-bezier(0.16, 0.86, 0.26, 1),
opacity 0.6s ease;
}
html.js [data-fliegt="auf"].ist-da .pslide__visual{
transform: rotateX(0deg) scale(1);
opacity: 1;
}
html.js [data-fliegt="auf"] .pv3-stage,
html.js [data-fliegt="auf"] .pv3-phone{ animation-play-state: paused; }
html.js [data-fliegt="auf"].ist-da .pv3-stage,
html.js [data-fliegt="auf"].ist-da .pv3-phone{ animation-play-state: running; }
html.js [data-fliegt="auf"] .pv3-phone{
translate: 70px 20px;
opacity: 0;
transition:
translate 0.9s cubic-bezier(0.16, 0.86, 0.26, 1) 0.45s,
opacity 0.6s ease 0.45s;
}
html.js [data-fliegt="auf"].ist-da .pv3-phone{ translate: 0 0; opacity: 1; }
html.js [data-fliegt="auf"] .pslide__body > *{
opacity: 0;
translate: 0 22px;
transition:
opacity 0.6s ease var(--pd, 0s),
translate 0.7s cubic-bezier(0.18, 0.86, 0.28, 1) var(--pd, 0s);
}
html.js [data-fliegt="auf"].ist-da .pslide__body > *{ opacity: 1; translate: 0 0; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(1){ --pd: 0.5s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(2){ --pd: 0.58s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(3){ --pd: 0.66s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(4){ --pd: 0.74s; }
@media (prefers-reduced-motion: reduce){html.js [data-fliegt="auf"],
html.js [data-fliegt="auf"] .pslide__visual,
html.js [data-fliegt="auf"] .pv3-phone,
html.js [data-fliegt="auf"] .pslide__body > *{
opacity: 1; transform: none; translate: none; transition: none;
}}
.steps--flow .step{
display: grid;
gap: 0.55rem;
align-content: start;
}
.step__bild{
position: relative;
display: block;
height: 62px;
margin: 0.2rem 0 0.35rem;
border-radius: 10px;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.07), rgba(63, 214, 232, 0.06));
border: 1px solid rgba(12, 22, 38, 0.06);
overflow: hidden;
}
.step__bild i{ position: absolute; display: block; }
.step__bild--verstehen i{
height: 11%;
border-radius: 3px;
background: rgba(47, 77, 158, 0.3);
left: 8%;
}
.step__bild--verstehen i:nth-child(1){ top: 22%; width: 46%; }
.step__bild--verstehen i:nth-child(2){ top: 44%; width: 32%; }
.step__bild--verstehen i:nth-child(3){ top: 66%; width: 40%; }
.step__bild--verstehen i:nth-child(4){
top: 24%; right: 9%; left: auto;
width: 22%; height: 52%;
border-radius: 7px;
background: linear-gradient(140deg, var(--blue), var(--teal));
opacity: 0.85;
}
.step.is-on .step__bild--verstehen i:nth-child(4){ animation: stpLupe 2.8s ease-in-out infinite; }
.step.is-on .step__bild--verstehen i:nth-child(1){ animation: stpZeile 2.6s ease-in-out infinite; }
.step.is-on .step__bild--verstehen i:nth-child(2){ animation: stpZeile 2.6s ease-in-out infinite 0.2s; }
.step.is-on .step__bild--verstehen i:nth-child(3){ animation: stpZeile 2.6s ease-in-out infinite 0.4s; }
.step__bild--konzept i{
border-radius: 5px;
background: rgba(47, 77, 158, 0.22);
border: 1px solid rgba(47, 77, 158, 0.28);
}
.step__bild--konzept i:nth-child(1){ left: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(2){ left: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(3){ right: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(4){ right: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(5){
left: 50%; top: 50%;
width: 13px; height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background: var(--teal);
border: 0;
}
.step.is-on .step__bild--konzept i:nth-child(1){ animation: stpZuMitteR 3s ease-in-out infinite; }
.step.is-on .step__bild--konzept i:nth-child(2){ animation: stpZuMitteR 3s ease-in-out infinite 0.3s; }
.step.is-on .step__bild--konzept i:nth-child(3){ animation: stpZuMitteL 3s ease-in-out infinite 0.15s; }
.step.is-on .step__bild--konzept i:nth-child(4){ animation: stpZuMitteL 3s ease-in-out infinite 0.45s; }
.step.is-on .step__bild--konzept i:nth-child(5){ animation: stpPuls 2.4s ease-in-out infinite; }
.step__bild--bauen i{
left: 8%;
height: 13%;
border-radius: 4px;
background: rgba(12, 22, 38, 0.08);
width: 84%;
}
.step__bild--bauen i:nth-child(1){ top: 20%; }
.step__bild--bauen i:nth-child(2){ top: 44%; }
.step__bild--bauen i:nth-child(3){ top: 68%; }
.step__bild--bauen i::after{
content: "";
position: absolute;
inset: 0 auto 0 0;
border-radius: 4px;
background: linear-gradient(90deg, var(--blue), var(--teal));
width: var(--w, 40%);
}
.step__bild--bauen i:nth-child(1)::after{ --w: 92%; }
.step__bild--bauen i:nth-child(2)::after{ --w: 64%; }
.step__bild--bauen i:nth-child(3)::after{ --w: 35%; }
.step.is-on .step__bild--bauen i::after{ animation: stpFuell 3s cubic-bezier(0.3, 0.9, 0.3, 1) infinite; }
.step.is-on .step__bild--bauen i:nth-child(2)::after{ animation-delay: 0.25s; }
.step.is-on .step__bild--bauen i:nth-child(3)::after{ animation-delay: 0.5s; }
.step__bild--betrieb i:nth-child(1){
left: 8%; right: 8%; top: 50%;
height: 2px;
margin-top: -1px;
background: repeating-linear-gradient(90deg,
rgba(46, 201, 139, 0.5) 0 8px, transparent 8px 16px);
background-size: 16px 2px;
}
.step__bild--betrieb i:nth-child(2){
left: 8%; top: 22%;
width: 26%; height: 20%;
border-radius: 5px;
background: rgba(46, 201, 139, 0.25);
}
.step__bild--betrieb i:nth-child(3){
right: 8%; bottom: 22%;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--ok);
}
.step.is-on .step__bild--betrieb i:nth-child(1){ animation: stpTakt 2.4s linear infinite; }
.step.is-on .step__bild--betrieb i:nth-child(2){ animation: stpLupe 2.8s ease-in-out infinite; }
.step.is-on .step__bild--betrieb i:nth-child(3){ animation: stpPuls 2.2s ease-in-out infinite; }
.step__liste{ display: grid; gap: 0.28rem; margin-top: 0.1rem; }
.step__liste em{
position: relative;
padding-left: 0.95rem;
font-style: normal;
font-size: 0.86rem;
color: var(--ink-2);
}
.step__liste em::before{
content: "";
position: absolute;
left: 0; top: 0.52em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--teal);
opacity: 0.7;
}
.step__meta{
display: grid;
gap: 0.1rem;
margin-top: 0.45rem;
padding-top: 0.6rem;
border-top: 1px solid rgba(12, 22, 38, 0.08);
font-size: 0.82rem;
color: var(--ink-2);
}
.step__meta b{
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
}
.step__erg{ font-size: 0.78rem; opacity: 0.75; }
@media (max-width: 900px){.step__bild{ height: 54px; }}
@media (min-width: 901px){.steps--flow{ align-items: stretch; }.steps--flow .step{
gap: 0.5rem;
padding-bottom: 1.5rem;
grid-template-rows: auto auto auto 1fr auto;
}.step__bild{ height: 82px; margin: 0.3rem 0 0.5rem; }.step__liste{ align-content: start; }.step__liste em{ font-size: 0.84rem; }.step__meta{ margin-top: 0.5rem; padding-top: 0.6rem; font-size: 0.8rem; }}
@media (min-width: 901px) and (max-height: 900px){.step__bild{ height: 68px; }.steps--flow .step{ padding-bottom: 1.4rem; }.step__liste em:nth-child(3){ display: none; }}
@media (min-width: 901px) and (max-height: 820px){.step__bild{ display: none; }.step__liste{ display: none; }}
@media (prefers-reduced-motion: reduce){.step__bild i, .step__bild i::after{ animation: none !important; }}
.betriebLage{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(1.6rem, 4vw, 3.4rem);
align-items: stretch;
}
.betriebLage .lage,
.betriebLage .lage__karte{ height: 100%; }
.lage__karte{ align-content: space-between; }
.betriebLage .ops{ grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.betriebLage .op{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 0.15rem 0.85rem;
align-items: start;
padding: clamp(0.9rem, 1.6vw, 1.2rem);
transition:
transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
border-color 0.5s ease,
background-color 0.5s ease,
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){.betriebLage .op:hover{
border-color: rgba(63, 214, 232, 0.4);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-4px);
box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.9);
}}
.betriebLage .op h3{ grid-column: 2; font-size: 1rem; line-height: 1.3; margin: 0; }
.betriebLage .op p{ grid-column: 2; font-size: 0.88rem; line-height: 1.55; margin: 0; }
.op__icon{
grid-row: 1 / 3;
position: relative;
display: block;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(63, 214, 232, 0.1);
border: 1px solid rgba(63, 214, 232, 0.22);
}
.op__icon i{ position: absolute; display: block; background: #7fd0e0; }
.op__icon i:nth-child(1){ left: 11px; top: 9px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.op__icon i:nth-child(2){ left: 9px; bottom: 9px; width: 16px; height: 2px; border-radius: 1px; opacity: 0.5; }
.op__icon--cloud i:nth-child(1){ left: 8px; top: 10px; width: 18px; height: 6px; border-radius: 3px; transform: none; }
.op__icon--cloud i:nth-child(2){ left: 12px; top: 20px; width: 14px; height: 6px; border-radius: 3px; opacity: 0.55; }
.op__icon--rollen i{ border-radius: 2px; height: 4px; transform: none; }
.op__icon--rollen i:nth-child(1){ left: 9px; top: 10px; width: 18px; }
.op__icon--rollen i:nth-child(2){ left: 9px; top: 17px; width: 12px; opacity: 0.7; }
.op__icon--rollen i:nth-child(3){ left: 9px; top: 24px; width: 7px; opacity: 0.45; }
.op__icon--backup i:nth-child(1){
left: 8px; top: 8px; width: 20px; height: 20px;
border-radius: 50%; background: none;
border: 2px solid #7fd0e0; transform: none;
}
.op__icon--backup i:nth-child(2){ left: 16px; top: 16px; width: 4px; height: 4px; border-radius: 50%; transform: none; }
.op__icon--update i:nth-child(1){ left: 17px; top: 9px; width: 2px; height: 18px; border-radius: 1px; transform: none; }
.op__icon--update i:nth-child(2){
left: 12px; top: 12px;
width: 12px; height: 12px;
background: none;
border: solid #7fd0e0;
border-width: 2px 0 0 2px;
border-radius: 2px 0 0 0;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
.op__icon--support i:nth-child(1){ left: 8px; top: 9px; width: 20px; height: 14px; border-radius: 4px; transform: none; }
.op__icon--support i:nth-child(2){ left: 12px; top: 22px; width: 6px; height: 5px; border-radius: 0 0 3px 3px; transform: none; opacity: 0.7; }
.op__icon{
transition:
background-color 0.5s ease,
border-color 0.5s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.betriebLage .op:hover .op__icon{
background: rgba(63, 214, 232, 0.18);
border-color: rgba(63, 214, 232, 0.45);
transform: rotate(-6deg) scale(1.07);
}
.lage{ position: relative; }
.lage__karte{
border-radius: calc(var(--radius) + 4px);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8);
padding: clamp(1.1rem, 2.2vw, 1.6rem);
display: grid;
gap: clamp(0.9rem, 2vw, 1.3rem);
}
.lage__kopf{ display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.lage__titel{
display: flex; align-items: center; gap: 0.55rem;
font-weight: 650; color: #fff; font-size: 1.02rem;
}
.lage__ort{
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--dark-text);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 0.2rem 0.55rem;
border-radius: 99px;
}
.lage__puls{
flex: 0 0 9px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--ok);
animation: lagePuls 2.4s ease-in-out infinite;
}
.lage__puls--klein{ width: 7px; height: 7px; flex-basis: 7px; }
.lage__werte{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.lage__wert{
display: grid;
gap: 2px;
padding: 0.6rem 0.65rem;
border-radius: 11px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lage__wert b{ font-size: 1.18rem; font-weight: 720; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lage__wert em{
font-style: normal;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--dark-text);
}
.lage__label{
display: block;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark-text);
opacity: 0.75;
margin-bottom: 0.45rem;
}
.lage__balken{ display: flex; gap: 3px; height: 34px; align-items: flex-end; }
.lage__balken i{
flex: 1;
border-radius: 2px;
background: linear-gradient(180deg, #3fd6e8, #2ec98b);
height: 40%;
opacity: 0.85;
}
.lage.ist-da .lage__balken i{ animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both; }
.lage__balken i:nth-child(1){ --h: 96%; animation-delay: 0.0s; }
.lage__balken i:nth-child(2){ --h: 100%; animation-delay: 0.03s; }
.lage__balken i:nth-child(3){ --h: 92%; animation-delay: 0.06s; }
.lage__balken i:nth-child(4){ --h: 100%; animation-delay: 0.09s; }
.lage__balken i:nth-child(5){ --h: 98%; animation-delay: 0.12s; }
.lage__balken i:nth-child(6){ --h: 100%; animation-delay: 0.15s; }
.lage__balken i:nth-child(7){ --h: 100%; animation-delay: 0.18s; }
.lage__balken i:nth-child(8){ --h: 88%; animation-delay: 0.21s; }
.lage__balken i:nth-child(9){ --h: 100%; animation-delay: 0.24s; }
.lage__balken i:nth-child(10){ --h: 96%; animation-delay: 0.27s; }
.lage__balken i:nth-child(11){ --h: 100%; animation-delay: 0.3s; }
.lage__balken i:nth-child(12){ --h: 100%; animation-delay: 0.33s; }
.lage__balken i:nth-child(13){ --h: 94%; animation-delay: 0.36s; }
.lage__balken i:nth-child(14){ --h: 100%; animation-delay: 0.39s; }
.lage__balken i:nth-child(15){ --h: 90%; animation-delay: 0.42s; }
.lage__balken i:nth-child(16){ --h: 100%; animation-delay: 0.45s; }
.lage__balken i:nth-child(17){ --h: 100%; animation-delay: 0.48s; }
.lage__balken i:nth-child(18){ --h: 97%; animation-delay: 0.51s; }
.lage__balken i:nth-child(19){ --h: 100%; animation-delay: 0.54s; }
.lage__balken i:nth-child(20){ --h: 100%; animation-delay: 0.57s; }
.lage__balken i:nth-child(21){ --h: 93%; animation-delay: 0.6s; }
.lage__balken i:nth-child(22){ --h: 100%; animation-delay: 0.63s; }
.lage__balken i:nth-child(23){ --h: 100%; animation-delay: 0.66s; }
.lage__balken i:nth-child(24){ --h: 99%; animation-delay: 0.69s; }
.lage__balken i:nth-child(25){ --h: 100%; animation-delay: 0.72s; }
.lage__balken i:nth-child(26){ --h: 86%; animation-delay: 0.75s; }
.lage__balken i:nth-child(27){ --h: 100%; animation-delay: 0.78s; }
.lage__balken i:nth-child(28){ --h: 100%; animation-delay: 0.81s; }
.lage__balken i:nth-child(29){ --h: 95%; animation-delay: 0.84s; }
.lage__balken i:nth-child(30){ --h: 100%; animation-delay: 0.87s; }
.lage__zeilen{ display: grid; gap: 0.4rem; }
.lage__zeile{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem;
font-size: 0.85rem;
color: var(--dark-text);
}
.lage__zeile i{
position: relative;
width: 15px; height: 15px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.18);
}
.lage__zeile i::after{
content: "";
position: absolute;
left: 5px; top: 3px;
width: 4px; height: 7px;
border: solid var(--ok);
border-width: 0 1.6px 1.6px 0;
transform: rotate(45deg);
}
.lage__zeile em{ font-style: normal; font-size: 0.74rem; opacity: 0.7; }
.lage__fuss{
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8rem;
color: var(--dark-text);
}
@media (max-width: 1100px){.betriebLage{ grid-template-columns: 1fr; }.betriebLage .ops{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 700px){.betriebLage .ops{ grid-template-columns: 1fr; }.lage__werte{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){.lage__puls, .lage__balken i{ animation: none !important; }}
.lage__balken{ position: relative; overflow: hidden; border-radius: 3px; }
.lage__balken::after{
content: "";
position: absolute;
inset: 0 auto 0 -30%;
width: 30%;
background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.35), transparent);
animation: lageScan 5.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
pointer-events: none;
}
.lage.ist-da .lage__balken i{ animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both, lageAtem 4.5s ease-in-out infinite; }
.lage__zeile i::after{ transform: rotate(45deg) scale(0); transform-origin: 50% 50%; }
.lage.ist-da .lage__zeile i::after{
animation: lageHaken 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
.lage.ist-da .lage__zeile:nth-child(1) i::after{ animation-delay: 0.55s; }
.lage.ist-da .lage__zeile:nth-child(2) i::after{ animation-delay: 0.85s; }
.lage.ist-da .lage__zeile:nth-child(3) i::after{ animation-delay: 1.15s; }
.lage.ist-da .lage__zeile{ animation: lageZeile 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.lage.ist-da .lage__zeile:nth-child(1){ animation-delay: 0.45s; }
.lage.ist-da .lage__zeile:nth-child(2){ animation-delay: 0.75s; }
.lage.ist-da .lage__zeile:nth-child(3){ animation-delay: 1.05s; }
.lage__wert{ position: relative; overflow: hidden; }
.lage__wert::after{
content: "";
position: absolute;
inset: 0 auto 0 -40%;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
animation: lageBlitz 7s ease-in-out infinite;
pointer-events: none;
}
.lage__wert:nth-child(2)::after{ animation-delay: 0.5s; }
.lage__wert:nth-child(3)::after{ animation-delay: 1s; }
.lage__karte{ position: relative; }
.lage__karte::after{
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(63, 214, 232, 0.3);
opacity: 0;
animation: lageGlimmen 4.5s ease-in-out infinite;
pointer-events: none;
}
@media (prefers-reduced-motion: reduce){.lage__balken::after, .lage__wert::after, .lage__karte::after{ display: none; }.lage.ist-da .lage__zeile, .lage.ist-da .lage__zeile i::after,
.lage.ist-da .lage__balken i{ animation: none !important; opacity: 1; transform: none; }.lage.ist-da .lage__zeile i::after{ transform: rotate(45deg) scale(1); }}
#unternehmen .stats{
position: relative;
margin-top: clamp(1.4rem, 3vw, 2.2rem);
padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
border-block: 1px solid rgba(12, 22, 38, 0.09);
gap: 0;
}
#unternehmen .stats::before{
content: "";
position: absolute;
inset: auto 0 -1px 0;
height: 2px;
border-radius: 2px;
background: var(--grad);
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s;
}
#unternehmen .stats.in::before{ transform: scaleX(1); }
#unternehmen .stat{
position: relative;
background: none;
border: 0;
border-radius: 0;
padding: 0.2rem clamp(0.8rem, 2vw, 1.6rem);
max-width: none;
}
#unternehmen .stat + .stat::before{
content: "";
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(12, 22, 38, 0.14), transparent);
}
#unternehmen .stat b{
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
#unternehmen .stat span{
display: block;
margin-top: 0.35rem;
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
line-height: 1.45;
}
#unternehmen .stats.in .stat b{ animation: statAn 1.6s ease-out both; }
#unternehmen .stats.in .stat:nth-child(2) b{ animation-delay: 0.08s; }
#unternehmen .stats.in .stat:nth-child(3) b{ animation-delay: 0.16s; }
#unternehmen .stats.in .stat:nth-child(4) b{ animation-delay: 0.24s; }
#unternehmen .stats.in .stat:nth-child(5) b{ animation-delay: 0.32s; }
.member{ margin: 0; }
.member__bild{
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
isolation: isolate;
}
.member__bild img{
display: block;
width: 100%;
border-radius: 0;
box-shadow: none;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.member__bild::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.22), rgba(63, 214, 232, 0.1));
mix-blend-mode: multiply;
opacity: 0.3;
transition: opacity 0.6s ease;
pointer-events: none;
}
@media (hover: hover){.member__bild:hover img{ transform: scale(1.06); }.member__bild:hover::after{ opacity: 0.12; }}
.member figcaption{ margin-top: 0.8rem; }
.member figcaption b{ display: block; font-size: 1.02rem; }
.member figcaption span{
display: block;
margin-top: 0.1rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--teal-ink);
}
#unternehmen .ticks--big li{
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){#unternehmen .ticks--big li:hover{ color: var(--ink); transform: translateX(4px); }}
@media (max-width: 860px){#unternehmen .stat + .stat::before{ display: none; }}
@media (prefers-reduced-motion: reduce){#unternehmen .stats.in .stat b{ animation: none !important; }#unternehmen .stats::before{ transition: none; transform: scaleX(1); }}
html.js [data-auftritt="zahlen"] .stat{
opacity: 0;
transform: translateY(26px) rotateX(30deg);
transform-origin: 50% 100%;
transition:
opacity 0.6s ease var(--zd, 0s),
transform 0.85s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zd, 0s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat{ opacity: 1; transform: none; }
html.js [data-auftritt="zahlen"] .stat:nth-child(1){ --zd: 0.12s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(2){ --zd: 0.22s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(3){ --zd: 0.32s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(4){ --zd: 0.42s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(5){ --zd: 0.52s; }
html.js [data-auftritt="zahlen"] .stat + .stat::before{
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zd, 0s) + 0.25s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat + .stat::before{ transform: scaleY(1); }
#unternehmen [data-auftritt="zahlen"].ist-auf::before{ transform: scaleX(1); }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat b{ animation: statAn 1.6s ease-out both; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(2) b{ animation-delay: 0.1s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(3) b{ animation-delay: 0.2s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(4) b{ animation-delay: 0.3s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(5) b{ animation-delay: 0.4s; }
html.js [data-auftritt="args"] li{
opacity: 0;
translate: -44px 0;
transition:
opacity 0.55s ease var(--ad, 0s),
translate 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) var(--ad, 0s),
color 0.4s ease,
transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
html.js [data-auftritt="args"].ist-auf li{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="args"] li:nth-child(1){ --ad: 0.05s; }
html.js [data-auftritt="args"] li:nth-child(2){ --ad: 0.13s; }
html.js [data-auftritt="args"] li:nth-child(3){ --ad: 0.21s; }
html.js [data-auftritt="args"] li:nth-child(4){ --ad: 0.29s; }
html.js [data-auftritt="args"] li:nth-child(5){ --ad: 0.37s; }
html.js [data-auftritt="args"] li:nth-child(6){ --ad: 0.45s; }
html.js [data-auftritt="args"] li:nth-child(7){ --ad: 0.53s; }
html.js [data-auftritt="args"] li::before{
transform: scale(0.4);
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--ad, 0s) + 0.16s),
opacity 0.35s ease calc(var(--ad, 0s) + 0.16s);
}
html.js [data-auftritt="args"].ist-auf li::before{ transform: none; opacity: 1; }
html.js [data-auftritt="team"]{ perspective: 1300px; }
html.js [data-auftritt="team"] > .kicker{
opacity: 0;
translate: 0 16px;
transition: opacity 0.5s ease 0.1s, translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="team"].ist-auf > .kicker{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="team"] .member{
opacity: 0;
transform: translateY(56px) rotateX(26deg) scale(0.94);
transform-origin: 50% 100%;
transition:
opacity 0.6s ease var(--td, 0s),
transform 1s cubic-bezier(0.18, 0.88, 0.26, 1) var(--td, 0s);
}
html.js [data-auftritt="team"].ist-auf .member{ opacity: 1; transform: none; }
html.js [data-auftritt="team"] .member:nth-child(1){ --td: 0.2s; }
html.js [data-auftritt="team"] .member:nth-child(2){ --td: 0.34s; }
html.js [data-auftritt="team"] .member:nth-child(3){ --td: 0.48s; }
@media (prefers-reduced-motion: reduce){html.js [data-auftritt] .stat,
html.js [data-auftritt] li,
html.js [data-auftritt] li::before,
html.js [data-auftritt] .member,
html.js [data-auftritt] > .kicker{
opacity: 1; transform: none; translate: none; transition: none;
}}
.siegel{
position: absolute;
left: clamp(-1.5rem, -2vw, -1rem);
bottom: clamp(-1.5rem, -2vw, -1rem);
width: clamp(6.5rem, 11vw, 9rem);
aspect-ratio: 1;
display: grid;
place-items: center;
pointer-events: none;
}
.siegel__ring{
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(63, 214, 232, 0) 0deg,
rgba(63, 214, 232, 0.9) 90deg,
rgba(111, 149, 232, 0.7) 180deg,
rgba(63, 214, 232, 0) 300deg);
-webkit-mask: radial-gradient(circle, transparent 63%, #000 64%);
mask: radial-gradient(circle, transparent 63%, #000 64%);
animation: siegelRing 9s linear infinite;
}
.siegel__kern{
position: relative;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-content: center;
text-align: center;
background:
radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
linear-gradient(150deg, #16294a, #0d1a30);
border: 1px solid rgba(127, 208, 224, 0.35);
box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.siegel__kern b{
display: block;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
font-weight: 780;
font-stretch: 106%;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(140deg, #fff 20%, #7fd0e0 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.siegel__kern em{
display: block;
margin-top: 1px;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dark-text);
}
.siegel__band{
position: absolute;
left: 50%;
bottom: -0.35rem;
transform: translateX(-50%);
padding: 0.2rem 0.7rem;
border-radius: 99px;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
font-family: var(--font-mono);
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.8);
}
html.js [data-auftritt="jubitext"] > *{
opacity: 0;
translate: -48px 0;
transition:
opacity 0.6s ease var(--jd, 0s),
translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--jd, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf > *{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] > *:nth-child(1){ --jd: 0.05s; }
html.js [data-auftritt="jubitext"] > *:nth-child(2){ --jd: 0.14s; }
html.js [data-auftritt="jubitext"] > *:nth-child(3){ --jd: 0.23s; }
html.js [data-auftritt="jubitext"] > *:nth-child(4){ --jd: 0.32s; }
html.js [data-auftritt="jubitext"] > *:nth-child(5){ --jd: 0.41s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div{
opacity: 0;
translate: 0 18px;
transition:
opacity 0.5s ease var(--zz, 0s),
translate 0.65s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zz, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .jubi__zahlen > div{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(1){ --zz: 0.4s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(2){ --zz: 0.5s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(3){ --zz: 0.6s; }
html.js [data-auftritt="jubibild"]{ perspective: 1300px; }
html.js [data-auftritt="jubibild"] .jubi__foto{
opacity: 0;
transform: perspective(1300px) rotateY(-16deg) translateX(70px) scale(0.94);
transform-origin: 0 50%;
transition:
opacity 0.7s ease 0.15s,
transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__foto{
opacity: 1;
transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}
html.js [data-auftritt="jubibild"] .siegel{
opacity: 0;
transform: rotate(-35deg) scale(0.5);
transition:
opacity 0.5s ease 0.65s,
transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.65s;
}
html.js [data-auftritt="jubibild"].ist-auf .siegel{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){.siegel__ring{ animation: none; }html.js [data-auftritt="jubitext"] > *,
html.js [data-auftritt="jubitext"] .jubi__zahlen > div,
html.js [data-auftritt="jubibild"] .jubi__foto,
html.js [data-auftritt="jubibild"] .siegel{
opacity: 1; transform: none; translate: none; transition: none;
}}
.note__wert b{ font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.note__sterne i{
font-style: normal;
display: inline-block;
opacity: 0;
transform: scale(0.4) rotate(-25deg);
transition:
opacity 0.3s ease var(--sd, 0s),
transform 0.55s cubic-bezier(0.24, 1.5, 0.4, 1) var(--sd, 0s);
}
html.js [data-auftritt="note"].ist-auf .note__sterne i{ opacity: 1; transform: none; }
.note__sterne i:nth-child(1){ --sd: 0.35s; }
.note__sterne i:nth-child(2){ --sd: 0.45s; }
.note__sterne i:nth-child(3){ --sd: 0.55s; }
.note__sterne i:nth-child(4){ --sd: 0.65s; }
.note__sterne i:nth-child(5){ --sd: 0.75s; }
html.js [data-auftritt="note"]{
opacity: 0;
translate: -40px 0;
transition: opacity 0.6s ease 0.1s, translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="note"].ist-auf{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="band"]{
opacity: 0;
translate: 90px 0;
transition: opacity 0.7s ease 0.25s, translate 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.25s;
}
html.js [data-auftritt="band"].ist-auf{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="band"] .stimmen__band{ perspective: 1400px; }
html.js [data-auftritt="band"] .stimme{
transform: perspective(1400px) rotateY(-12deg) scale(0.95);
opacity: 0.5;
transition:
transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.35s,
opacity 0.8s ease 0.35s,
border-color 0.35s ease,
background 0.35s ease,
translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js [data-auftritt="band"].ist-auf .stimme{
transform: perspective(1400px) rotateY(0deg) scale(1);
opacity: 1;
}
.stimmen::after{
content: "";
position: absolute;
inset: 0 auto 0 -25%;
width: 25%;
background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.1), transparent);
animation: stimmenSchein 11s ease-in-out infinite 1.5s;
pointer-events: none;
z-index: 2;
}
@media (prefers-reduced-motion: reduce){.stimmen::after{ display: none; }html.js [data-auftritt="note"],
html.js [data-auftritt="band"],
html.js [data-auftritt="band"] .stimme,
html.js [data-auftritt="note"] .note__sterne i{
opacity: 1; transform: none; translate: none; transition: none;
}}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl::before{ transform: scaleY(1); }
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li::before{ transform: scale(1); }
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li.ist-jetzt::before{
animation: lagePuls 2.6s ease-in-out infinite 1.6s;
}
html.js [data-auftritt="jubitext"] .zeitstrahl li > span{
opacity: 0;
translate: -16px 0;
transition:
opacity 0.45s ease var(--zt, 0s),
translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zt, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li > span{ opacity: 1; translate: 0 0; }
.jubi__link{
position: relative;
display: block;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.jubi__link .jubi__foto{
display: block;
width: 100%;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis{
position: absolute;
right: 0.8rem; top: 0.8rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.75rem;
border-radius: 99px;
background: rgba(10, 20, 38, 0.72);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 0.76rem;
font-weight: 600;
opacity: 0;
translate: 0 -8px;
transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis i{
width: 13px; height: 11px;
border: 1.6px solid currentColor;
border-radius: 2px;
position: relative;
}
.jubi__hinweis i::after{
content: "";
position: absolute;
left: 1px; bottom: 1px;
width: 6px; height: 4px;
border-radius: 1px;
background: currentColor;
}
@media (hover: hover){.jubi__link:hover .jubi__foto{ transform: scale(1.05); }.jubi__link:hover .jubi__hinweis{ opacity: 1; translate: 0 0; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubitext"] .zeitstrahl li > span{ opacity: 1; translate: none; }}
.siegel{ left: clamp(-2.6rem, -3.4vw, -2rem); bottom: clamp(-2rem, -2.6vw, -1.4rem); }
@media (max-width: 900px){.siegel{ width: clamp(5.4rem, 20vw, 7rem); left: -1.2rem; bottom: -1.2rem; }}
html.js [data-auftritt="zeitquer"].ist-auf::before{ transform: scaleX(1); }
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__punkt{ transform: scale(1); }
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__was{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="zeitquer"].ist-auf li.ist-jetzt .zeitquer__punkt{
animation: lagePuls 2.6s ease-in-out infinite 1.4s;
}
@media (min-width: 901px){.jubi__link{ display: block; height: 100%; }.jubi__link .jubi__foto{ height: 100%; object-fit: cover; }}
.jubi__ecke{
position: absolute;
width: clamp(3.4rem, 6vw, 5.2rem);
height: clamp(3.4rem, 6vw, 5.2rem);
pointer-events: none;
z-index: 2;
}
.jubi__ecke::before{
content: "";
position: absolute;
inset: 0;
border-style: solid;
border-color: var(--teal);
border-width: 0;
filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.55));
}
.jubi__ecke::after{
content: "";
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}
.jubi__ecke--ol{ left: -0.7rem; top: -0.7rem; }
.jubi__ecke--ol::before{
border-top-width: 2px;
border-left-width: 2px;
border-radius: 14px 0 0 0;
}
.jubi__ecke--ol::after{ left: -3px; top: -3px; }
.jubi__ecke--ur{ right: -0.7rem; bottom: -0.7rem; }
.jubi__ecke--ur::before{
border-bottom-width: 2px;
border-right-width: 2px;
border-radius: 0 0 14px 0;
}
.jubi__ecke--ur::after{ right: -3px; bottom: -3px; }
html.js [data-auftritt="jubibild"] .jubi__ecke{
opacity: 0;
transform: scale(0.55);
transition:
opacity 0.45s ease var(--ed2, 0s),
transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
.jubi__ecke--ol{ transform-origin: 0 0; --ed2: 0.45s; }
.jubi__ecke--ur{ transform-origin: 100% 100%; --ed2: 0.6s; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke{ opacity: 1; transform: none; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after{
animation: eckePuls 3.2s ease-in-out infinite;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke--ur::after{ animation-delay: 1.6s; }
@media (max-width: 900px){.jubi__ecke{ width: 2.8rem; height: 2.8rem; }.jubi__ecke--ol{ left: -0.4rem; top: -0.4rem; }.jubi__ecke--ur{ right: -0.4rem; bottom: -0.4rem; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubibild"] .jubi__ecke{ opacity: 1; transform: none; transition: none; }html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after{ animation: none; }}
.jubi-sektion{ padding-block: clamp(4.5rem, 9vw, 8rem); }
.jubi__lead{ margin: 0; }
.jubi__knoepfe{ margin-top: clamp(0.6rem, 1.6vh, 1.2rem); gap: 0.9rem; }
.jubi__ecke--ol{ left: -1.1rem; top: -1.1rem; }
.jubi__ecke--ur{ right: -1.1rem; bottom: -1.1rem; }
@media (max-width: 900px){.jubi__ecke--ol{ left: -0.6rem; top: -0.6rem; }.jubi__ecke--ur{ right: -0.6rem; bottom: -0.6rem; }}
.jubi__link{ position: relative; }
.jubi__link::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(165deg, #1b3a6b, #16305c);
mix-blend-mode: color;
opacity: 0.12;
pointer-events: none;
transition: opacity 0.6s ease;
z-index: 1;
}
.jubi__link::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(165deg, rgba(13, 26, 48, 0.1), rgba(20, 36, 64, 0.06));
pointer-events: none;
transition: opacity 0.6s ease;
z-index: 1;
}
.jubi__link .jubi__foto{ filter: saturate(0.97); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
@media (hover: hover){.jubi__link:hover::after{ opacity: 0; }.jubi__link:hover::before{ opacity: 0.3; }.jubi__link:hover .jubi__foto{ filter: saturate(1) contrast(1); }}
.jubi__hinweis{ z-index: 2; }
html.js [data-auftritt="jubiband"] > div{
opacity: 0;
transform: translateY(22px);
transition:
opacity 0.55s ease var(--bd, 0s),
transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--bd, 0s);
}
html.js [data-auftritt="jubiband"].ist-auf > div{ opacity: 1; transform: none; }
html.js [data-auftritt="jubiband"] > div:nth-child(1){ --bd: 0.05s; }
html.js [data-auftritt="jubiband"] > div:nth-child(2){ --bd: 0.15s; }
html.js [data-auftritt="jubiband"] > div:nth-child(3){ --bd: 0.25s; }
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubiband"] > div{ opacity: 1; transform: none; transition: none; }}
.zeitkarten{
list-style: none;
margin: clamp(2.6rem, 6vh, 4.2rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(0.8rem, 2vw, 1.4rem);
}
.zeitkarten li{
position: relative;
display: grid;
gap: 0.75rem;
padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.3rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: border-color 0.5s ease, background-color 0.5s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.zeitkarten li::before{
content: "";
position: absolute;
left: -1px; right: -1px;
top: -1px;
height: 2px;
background: linear-gradient(90deg, rgba(63, 214, 232, 0.5), rgba(47, 77, 158, 0.3));
}
.zeitkarten li:first-child::before{ border-radius: 2px 0 0 0; }
.zeitkarten li:last-child::before{ border-radius: 0 2px 0 0; }
.zeitkarten li::after{
content: "";
position: absolute;
left: clamp(1rem, 2vw, 1.3rem);
top: -5px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--dark);
border: 2px solid var(--teal);
}
.zeitkarten li.ist-jetzt::after{ background: var(--teal); }
.zeitkarten li.ist-jetzt{
background: rgba(63, 214, 232, 0.07);
border-color: rgba(63, 214, 232, 0.3);
}
.zeitkarte__jahr{
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.09em;
color: #7fd0e0;
}
.zeitkarte__text{ font-size: 0.92rem; line-height: 1.55; color: var(--dark-text); }
.zeitkarten li.ist-jetzt .zeitkarte__jahr,
.zeitkarten li.ist-jetzt .zeitkarte__text{ color: #fff; }
@media (hover: hover){.zeitkarten li:hover{
transform: translateY(-4px);
border-color: rgba(63, 214, 232, 0.4);
background: rgba(255, 255, 255, 0.07);
}}
html.js [data-auftritt="jubikopf"] > *{
opacity: 0;
translate: 0 26px;
transition: opacity 0.65s ease var(--kd, 0s), translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > *{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubikopf"] > *:nth-child(1){ --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2){ --kd: 0.18s; }
html.js [data-auftritt="jubibuehne"] .jubi__link{
opacity: 0;
transform: scale(1.04);
transition: opacity 0.9s ease 0.1s, transform 1.3s cubic-bezier(0.18, 0.88, 0.26, 1) 0.1s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link{ opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span{
opacity: 0;
translate: 0 20px;
transition: opacity 0.6s ease var(--wd, 0s), translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubiBuehne__werte span{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(1){ --wd: 0.45s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(2){ --wd: 0.57s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(3){ --wd: 0.69s; }
html.js [data-auftritt="jubibuehne"] .siegel{
opacity: 0;
transform: rotate(-30deg) scale(0.5);
transition: opacity 0.5s ease 0.7s, transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.7s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel{ opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubi__ecke{
opacity: 0;
transform: scale(0.55);
transition: opacity 0.45s ease var(--ed2, 0s), transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke{ opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke::after{ animation: eckePuls 3.2s ease-in-out infinite; }
html.js [data-auftritt="zeitkarten"] li{
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease var(--zk, 0s), transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zk, 0s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li{ opacity: 1; transform: none; }
.zeitkarten li:nth-child(1){ --zk: 0.05s; }
.zeitkarten li:nth-child(2){ --zk: 0.14s; }
.zeitkarten li:nth-child(3){ --zk: 0.23s; }
.zeitkarten li:nth-child(4){ --zk: 0.32s; }
.zeitkarten li:nth-child(5){ --zk: 0.41s; }
html.js [data-auftritt="zeitkarten"].ist-auf li.ist-jetzt::after{
animation: lagePuls 2.6s ease-in-out infinite 1s;
}
@media (max-width: 900px){.zeitkarten{ grid-template-columns: 1fr 1fr; }}
@media (max-width: 560px){.zeitkarten{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubikopf"] > *,
html.js [data-auftritt="jubibuehne"] .jubi__link,
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span,
html.js [data-auftritt="jubibuehne"] .siegel,
html.js [data-auftritt="jubibuehne"] .jubi__ecke,
html.js [data-auftritt="zeitkarten"] li{
opacity: 1; transform: none; translate: none; transition: none;
}}
.jubiOben{
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(2.2rem, 5.5vw, 4.5rem);
align-items: center;
}
.jubiOben__text{ display: grid; gap: 1.5rem; justify-items: start; }
.jubiOben__text h2{
margin: 0;
font-size: clamp(2rem, 3.7vw, 3rem);
line-height: 1.12;
letter-spacing: -0.028em;
}
.jubiOben__text .jubi__lead{ margin: 0; max-width: 44ch; }
.jubiOben__text .jubi__knoepfe{ margin-top: 0.4rem; gap: 0.9rem; }
.jubiBild{ position: relative; margin: 0; }
.jubiBild .jubi__link{
display: block;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.jubiBild .jubi__foto{
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.jubiBild .siegel{
left: clamp(-2.4rem, -3vw, -1.6rem);
bottom: clamp(-1.8rem, -2.4vw, -1.2rem);
right: auto; top: auto;
width: clamp(6rem, 10vw, 8rem);
z-index: 4;
}
.zeitkarten{ margin-top: clamp(2.4rem, 5vh, 3.6rem); }
html.js [data-auftritt="jubiwerte"] > span{
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.55s ease var(--wd2, 0s),
transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd2, 0s);
}
html.js [data-auftritt="jubiwerte"].ist-auf > span{ opacity: 1; transform: none; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(1){ --wd2: 0.05s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(2){ --wd2: 0.15s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(3){ --wd2: 0.25s; }
html.js [data-auftritt="jubibuehne"] .jubi__link{
opacity: 0;
transform: perspective(1300px) rotateY(-14deg) translateX(60px) scale(0.95);
transform-origin: 0 50%;
transition: opacity 0.7s ease 0.15s, transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link{
opacity: 1;
transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}
@media (max-width: 900px){.jubiOben{ grid-template-columns: 1fr; gap: 2.2rem; }.jubiBild .siegel{ left: -1rem; bottom: -1rem; width: 5.4rem; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubiwerte"] > span,
html.js [data-auftritt="jubibuehne"] .jubi__link{
opacity: 1; transform: none; transition: none;
}}
@media (max-width: 900px){.jubiBild{ max-width: 32rem; }.jubiBild .jubi__foto{ aspect-ratio: 16 / 10; }}
.zeitkarten{
margin-top: clamp(3rem, 6.5vh, 4.8rem);
padding-top: clamp(2rem, 4vh, 3rem);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.js [data-auftritt="jubikopf"] > *{
opacity: 0;
translate: -70px 0;
filter: blur(5px);
transition:
opacity 0.7s ease var(--kd, 0s),
translate 0.95s cubic-bezier(0.16, 0.86, 0.26, 1) var(--kd, 0s),
filter 0.7s ease var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > *{
opacity: 1; translate: 0 0; filter: blur(0);
}
html.js [data-auftritt="jubikopf"] > *:nth-child(1){ --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2){ --kd: 0.16s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(3){ --kd: 0.27s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(4){ --kd: 0.38s; }
html.js [data-auftritt="jubibuehne"]{ perspective: 1400px; }
html.js [data-auftritt="jubibuehne"] .jubi__link{
opacity: 0;
transform: perspective(1400px) rotateY(-26deg) rotateX(6deg) translateX(150px) scale(0.88);
transform-origin: 100% 50%;
filter: blur(8px);
transition:
opacity 0.85s ease 0.2s,
transform 1.35s cubic-bezier(0.16, 0.88, 0.24, 1) 0.2s,
filter 0.8s ease 0.2s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link{
opacity: 1;
transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateX(0) scale(1);
filter: blur(0);
}
html.js [data-auftritt="jubibuehne"] .siegel{
opacity: 0;
transform: rotate(-140deg) scale(0.3);
transition:
opacity 0.5s ease 0.75s,
transform 1.1s cubic-bezier(0.22, 1.4, 0.38, 1) 0.75s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel{ opacity: 1; transform: none; }
html.js [data-auftritt="zeitkarten"]{ perspective: 1500px; }
html.js [data-auftritt="zeitkarten"] li{
opacity: 0;
transform: perspective(1500px) translateY(60px) rotateX(32deg) scale(0.92);
transform-origin: 50% 0;
filter: blur(4px);
transition:
opacity 0.6s ease var(--zk, 0s),
transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--zk, 0s),
filter 0.6s ease var(--zk, 0s),
border-color 0.5s ease,
background-color 0.5s ease;
}
html.js [data-auftritt="zeitkarten"].ist-auf li{
opacity: 1;
transform: perspective(1500px) translateY(0) rotateX(0deg) scale(1);
filter: blur(0);
}
.zeitkarten li:nth-child(1){ --zk: 0.1s; }
.zeitkarten li:nth-child(2){ --zk: 0.22s; }
.zeitkarten li:nth-child(3){ --zk: 0.34s; }
.zeitkarten li:nth-child(4){ --zk: 0.46s; }
.zeitkarten li:nth-child(5){ --zk: 0.58s; }
html.js [data-auftritt="zeitkarten"] li::before{
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zk, 0s) + 0.1s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::before{ transform: scaleX(1); }
html.js [data-auftritt="zeitkarten"] li::after{
transform: scale(0);
transition: transform 0.55s cubic-bezier(0.24, 1.6, 0.4, 1) calc(var(--zk, 0s) + 0.3s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::after{ transform: scale(1); }
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="jubikopf"] > *,
html.js [data-auftritt="jubibuehne"] .jubi__link,
html.js [data-auftritt="jubibuehne"] .siegel,
html.js [data-auftritt="zeitkarten"] li,
html.js [data-auftritt="zeitkarten"] li::before,
html.js [data-auftritt="zeitkarten"] li::after{
opacity: 1; transform: none; translate: none; filter: none; transition: none;
}}
.bvis{ position: absolute; inset: 0; }
.bvis i{ position: absolute; display: block; }
.bvis--recht .bvis__balken{
left: 12%;
height: 7px;
border-radius: 4px;
background: rgba(47, 77, 158, 0.26);
}
.bvis--recht .bvis__balken:nth-child(1){ top: 30%; width: 44%; }
.bvis--recht .bvis__balken:nth-child(2){ top: 48%; width: 32%; }
.bvis--recht .bvis__balken:nth-child(3){ top: 66%; width: 38%; }
.bvis--recht .bvis__siegel{
right: 13%; top: 50%;
width: clamp(2.6rem, 5vw, 4rem);
aspect-ratio: 1;
margin-top: calc(clamp(2.6rem, 5vw, 4rem) / -2);
border-radius: 50%;
border: 2px dashed rgba(47, 163, 186, 0.5);
background: radial-gradient(circle, rgba(63, 214, 232, 0.18), transparent 70%);
animation: bvisDreh 22s linear infinite;
}
.bvis--chat .bvis__blase{ border-radius: 10px; background: rgba(47, 77, 158, 0.2); }
.bvis--chat .bvis__blase:nth-child(1){ left: 12%; top: 26%; width: 42%; height: 22%; border-bottom-left-radius: 3px; }
.bvis--chat .bvis__blase:nth-child(2){ right: 12%; top: 56%; width: 34%; height: 20%; border-bottom-right-radius: 3px; background: linear-gradient(120deg, var(--blue), var(--teal)); opacity: 0.55; }
.bvis--chat .bvis__schloss{
left: 50%; top: 50%;
width: 16px; height: 13px;
margin: -6px 0 0 -8px;
border-radius: 3px;
background: var(--teal-ink);
opacity: 0.75;
}
.bvis--chat .bvis__schloss::before{
content: "";
position: absolute;
left: 50%; top: -7px;
width: 10px; height: 9px;
margin-left: -5px;
border: 2px solid var(--teal-ink);
border-bottom: 0;
border-radius: 5px 5px 0 0;
}
.bvis--suche .bvis__treffer{
left: 12%;
height: 8px;
border-radius: 4px;
background: rgba(47, 77, 158, 0.22);
}
.bvis--suche .bvis__treffer:nth-child(1){ top: 28%; width: 52%; background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.6; }
.bvis--suche .bvis__treffer:nth-child(2){ top: 50%; width: 38%; }
.bvis--suche .bvis__treffer:nth-child(3){ top: 72%; width: 44%; }
.bvis--suche .bvis__lupe{
right: 15%; top: 50%;
width: 26px; height: 26px;
margin-top: -13px;
border: 2.5px solid var(--teal-ink);
border-radius: 50%;
opacity: 0.7;
}
.bvis--suche .bvis__lupe::after{
content: "";
position: absolute;
right: -7px; bottom: -4px;
width: 11px; height: 2.5px;
border-radius: 2px;
background: var(--teal-ink);
transform: rotate(45deg);
}
#wissen .bvis i{ transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), opacity 0.5s ease; }
html.js [data-auftritt="beitraege"] .beitrag{
opacity: 0;
transform: perspective(1400px) translateY(46px) rotateX(20deg) scale(0.95);
transform-origin: 50% 0;
filter: blur(4px);
transition:
opacity 0.6s ease var(--bg2, 0s),
transform 0.95s cubic-bezier(0.16, 0.9, 0.26, 1) var(--bg2, 0s),
filter 0.6s ease var(--bg2, 0s),
border-color 0.5s ease,
box-shadow 0.6s ease;
}
html.js [data-auftritt="beitraege"].ist-auf .beitrag{
opacity: 1;
transform: perspective(1400px) translateY(0) rotateX(0) scale(1);
filter: blur(0);
}
html.js [data-auftritt="beitraege"] .beitrag:nth-child(1){ --bg2: 0.05s; }
html.js [data-auftritt="beitraege"] .beitrag:nth-child(2){ --bg2: 0.2s; }
html.js [data-auftritt="beitraege"] .beitrag:nth-child(3){ --bg2: 0.35s; }
@media (prefers-reduced-motion: reduce){.bvis--recht .bvis__siegel{ animation: none; }html.js [data-auftritt="beitraege"] .beitrag{
opacity: 1; transform: none; filter: none; transition: none;
}}
.posts{
list-style: none;
margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0;
padding: 0;
border-top: 1px solid rgba(12, 22, 38, 0.1);
}
.posts li{ border-bottom: 1px solid rgba(12, 22, 38, 0.1); }
.post{
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1.1rem, 2.6vw, 2.2rem);
padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(0.6rem, 1.4vw, 1.1rem);
text-decoration: none;
transition: padding-left 0.5s cubic-bezier(0.4, 0.05, 0.25, 1), background-color 0.45s ease;
}
.post::before{
content: "";
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 3px;
border-radius: 3px;
background: var(--grad);
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.post__zeichen{
position: relative;
display: block;
width: clamp(5.5rem, 11vw, 8.5rem);
height: clamp(3.6rem, 7vw, 5.4rem);
border-radius: 12px;
background: linear-gradient(150deg, rgba(47, 77, 158, 0.09), rgba(63, 214, 232, 0.07));
border: 1px solid rgba(12, 22, 38, 0.07);
overflow: hidden;
flex: none;
transition: background 0.5s ease, border-color 0.5s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.post__mitte{ display: grid; gap: 0.4rem; }
.post__kopf{ display: flex; align-items: center; gap: 0.6rem; }
.post__neu{
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: var(--grad);
padding: 0.16rem 0.5rem;
border-radius: 99px;
}
.post__titel{
display: block;
font-size: clamp(1.1rem, 1.7vw, 1.4rem);
font-weight: 700;
line-height: 1.25;
color: var(--ink);
transition: color 0.4s ease;
}
.post__text{
display: block;
font-size: 0.94rem;
line-height: 1.6;
color: var(--ink-2);
max-width: 62ch;
}
.post__rechts{ display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.post__zeit{
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.07em;
color: var(--ink-2);
white-space: nowrap;
}
.post__pfeil{
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--blue);
flex: none;
transition: background 0.5s ease, border-color 0.5s ease, color 0.4s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.post__pfeil svg{ width: 18px; height: 18px; }
@media (hover: hover){.post:hover{ background: rgba(47, 77, 158, 0.035); padding-left: clamp(1.2rem, 2.4vw, 2rem); }.post:hover::before{ transform: scaleY(1); }.post:hover .post__titel{ color: var(--blue); }.post:hover .post__zeichen{
background: linear-gradient(150deg, rgba(47, 77, 158, 0.15), rgba(63, 214, 232, 0.13));
border-color: rgba(63, 214, 232, 0.35);
transform: scale(1.03);
}.post:hover .post__pfeil{
background: var(--grad);
border-color: transparent;
color: #fff;
transform: translateX(4px);
}.post:hover .bvis--recht .bvis__balken:nth-child(1){ transform: translateX(6px); }.post:hover .bvis--recht .bvis__balken:nth-child(2){ transform: translateX(10px); }.post:hover .bvis--recht .bvis__balken:nth-child(3){ transform: translateX(4px); }.post:hover .bvis--chat .bvis__blase:nth-child(1){ transform: translateY(-3px); }.post:hover .bvis--chat .bvis__blase:nth-child(2){ transform: translateY(3px); }.post:hover .bvis--suche .bvis__lupe{ transform: scale(1.12) rotate(-8deg); }}
.post .bvis i{ transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1); }
.post__zeichen .bvis--recht .bvis__balken{ height: 5px; }
.post__zeichen .bvis--recht .bvis__siegel{ right: 12%; width: 34%; }
.post__zeichen .bvis--suche .bvis__treffer{ height: 5px; }
.post__zeichen .bvis--suche .bvis__lupe{ width: 20px; height: 20px; margin-top: -10px; border-width: 2px; }
.post__zeichen .bvis--suche .bvis__lupe::after{ right: -6px; bottom: -3px; width: 9px; }
.post__zeichen .bvis--chat .bvis__schloss{ width: 13px; height: 11px; margin: -5px 0 0 -6.5px; }
.post__zeichen .bvis--chat .bvis__schloss::before{ top: -6px; width: 9px; height: 8px; margin-left: -4.5px; }
html.js [data-auftritt="posts"] li{
opacity: 0;
transform: perspective(1400px) translateX(-70px) translateY(30px) rotateY(14deg) rotateX(12deg);
transform-origin: 0 50%;
filter: blur(5px);
transition:
opacity 0.6s ease var(--pz, 0s),
transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--pz, 0s),
filter 0.6s ease var(--pz, 0s);
}
html.js [data-auftritt="posts"].ist-auf li{
opacity: 1;
transform: perspective(1400px) translateX(0) translateY(0) rotateY(0) rotateX(0);
filter: blur(0);
}
html.js [data-auftritt="posts"] li:nth-child(1){ --pz: 0.08s; }
html.js [data-auftritt="posts"] li:nth-child(2){ --pz: 0.22s; }
html.js [data-auftritt="posts"] li:nth-child(3){ --pz: 0.36s; }
html.js [data-auftritt="posts"] .post__zeichen{
opacity: 0;
transform: scale(0.6) rotate(-8deg);
transition:
opacity 0.45s ease calc(var(--pz, 0s) + 0.2s),
transform 0.7s cubic-bezier(0.24, 1.5, 0.4, 1) calc(var(--pz, 0s) + 0.2s);
}
html.js [data-auftritt="posts"].ist-auf .post__zeichen{ opacity: 1; transform: none; }
@media (max-width: 760px){.post{ grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }.post__zeichen{ width: 4.4rem; height: 3.2rem; }.post__rechts{
grid-column: 2;
justify-content: space-between;
margin-top: 0.5rem;
}}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="posts"] li,
html.js [data-auftritt="posts"] .post__zeichen{
opacity: 1; transform: none; filter: none; transition: none;
}}
#wissen .posts{
display: block;
grid-template-columns: none;
gap: 0;
}
#wissen .posts li{ display: block; }
#wissen .post{
transition:
padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
background-color 0.55s ease;
}
#wissen .post::before{
transition: transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__zeichen{
transition:
background 0.6s ease,
border-color 0.6s ease,
transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__titel{ transition: color 0.5s ease; }
#wissen .post__pfeil{
transition:
background 0.6s ease,
border-color 0.6s ease,
color 0.5s ease,
transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post .bvis i{
transition: transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){#wissen .post:hover{ padding-left: clamp(0.9rem, 1.8vw, 1.5rem); }#wissen .post:hover .post__zeichen{ transform: scale(1.02); }#wissen .post:hover .post__pfeil{ transform: translateX(3px); }#wissen .post:hover .bvis--recht .bvis__balken:nth-child(1){ transform: translateX(4px); }#wissen .post:hover .bvis--recht .bvis__balken:nth-child(2){ transform: translateX(7px); }#wissen .post:hover .bvis--recht .bvis__balken:nth-child(3){ transform: translateX(3px); }#wissen .post:hover .bvis--chat .bvis__blase:nth-child(1){ transform: translateY(-2px); }#wissen .post:hover .bvis--chat .bvis__blase:nth-child(2){ transform: translateY(2px); }#wissen .post:hover .bvis--suche .bvis__lupe{ transform: scale(1.08) rotate(-5deg); }}
#wissen .post{
background-color: transparent;
background-image: linear-gradient(90deg, rgba(47, 77, 158, 0.05), rgba(47, 77, 158, 0.02));
background-repeat: no-repeat;
background-size: 0% 100%;
transition:
padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
background-size 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){#wissen .post:hover{ background-color: transparent; background-size: 100% 100%; }}
#wissen .post{
background-image: none;
background-color: transparent;
isolation: isolate;
}
#wissen .post::after{
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(47, 77, 158, 0.055), rgba(47, 77, 158, 0.015));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
pointer-events: none;
}
@media (hover: hover){#wissen .post:hover::after{ transform: scaleX(1); }}
#wissen .post{
padding-left: clamp(0.6rem, 1.4vw, 1.1rem);
transition: none;
}
@media (hover: hover){#wissen .post:hover{ padding-left: clamp(0.6rem, 1.4vw, 1.1rem); }}
#wissen .post__zeichen,
#wissen .post__mitte{
transition:
transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1),
background 0.6s ease,
border-color 0.6s ease;
}
@media (hover: hover){#wissen .post:hover .post__zeichen{ transform: translateX(8px) scale(1.02); }#wissen .post:hover .post__mitte{ transform: translateX(8px); }}
html.chat-offen .rail{
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(14px);
transition: none;
}
.rail{
transition:
opacity 0.35s ease 0.15s,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.ctaLage{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2.2rem, 6vw, 5rem);
align-items: center;
text-align: left;
}
.ctaLage__text{ display: grid; gap: 1.3rem; }
.ctaLage__text h2{
margin: 0;
font-size: clamp(2rem, 3.7vw, 3rem);
line-height: 1.12;
letter-spacing: -0.028em;
text-wrap: balance;
}
.ctaLage__lead{ margin: 0; color: var(--dark-text); font-size: 1.05rem; line-height: 1.65; max-width: 42ch; }
.ctaLage__punkte{ list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ctaLage__punkte li{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
font-size: 0.95rem;
color: var(--dark-text);
}
.ctaLage__punkte i{
position: relative;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.18);
}
.ctaLage__punkte i::after{
content: "";
position: absolute;
left: 6px; top: 4px;
width: 4px; height: 8px;
border: solid var(--ok);
border-width: 0 1.8px 1.8px 0;
transform: rotate(45deg);
}
html.js [data-auftritt="cta"] .ctaLage__text > *{
opacity: 0;
translate: -50px 0;
transition:
opacity 0.65s ease var(--cd, 0s),
translate 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > *{ opacity: 1; translate: 0 0; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(1){ --cd: 0.05s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(2){ --cd: 0.15s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(3){ --cd: 0.25s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(4){ --cd: 0.35s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *{
opacity: 0;
transform: translateX(55px);
transition:
opacity 0.6s ease var(--wg, 0s),
transform 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--wg, 0s),
border-color 0.6s ease,
box-shadow 0.65s ease;
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__wege > *{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(1){ --wg: 0.2s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(2){ --wg: 0.32s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(3){ --wg: 0.44s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(4){ --wg: 0.56s; }
@media (max-width: 900px){.ctaLage{ grid-template-columns: 1fr; gap: 2rem; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="cta"] .ctaLage__text > *,
html.js [data-auftritt="cta"] .ctaLage__wege > *{
opacity: 1; transform: none; translate: none; transition: none;
}}
#kontakt .cta__inner{ max-width: var(--wrap); }
#kontakt .ctaLage__lead{ font-size: 1.05rem; }
@media (min-width: 1100px){#kontakt .ctaLage{ padding-right: clamp(3.5rem, 5vw, 5.5rem); }}
.footer__grid{
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(1.8rem, 3.5vw, 3rem);
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand{ max-width: 22rem; }
.footer__claim{ margin-bottom: 0.9rem; }
.footer__adresse{
display: grid;
gap: 0.5rem;
font-style: normal;
line-height: 1.6;
}
.footer__adresse a{
display: inline-block;
width: fit-content;
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.footer__col h3{
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fd0e0;
margin-bottom: 1rem;
}
.footer__col a{
display: block;
padding: 0.24rem 0;
font-size: 0.94rem;
color: var(--dark-text);
width: fit-content;
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){.footer__col a:hover,
.footer__adresse a:hover{ color: #fff; transform: translateX(4px); }}
@media (max-width: 980px){.footer__grid{ grid-template-columns: 1fr 1fr; }.footer__brand{ grid-column: 1 / -1; max-width: 34rem; }}
@media (max-width: 560px){.footer__grid{ grid-template-columns: 1fr; }.footer__brand{ grid-column: auto; }}
.footer__grid{
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(1.6rem, 3vw, 2.6rem);
padding-bottom: clamp(1.8rem, 3vw, 2.4rem);
align-items: start;
}
.footer__brand{ max-width: 20rem; }
.footer__brand p:last-of-type{ font-size: 0.9rem; line-height: 1.6; max-width: 24em; }
.footer__social{ display: flex; gap: 0.5rem; margin-top: 1.1rem; }
.footer__social a{
display: grid; place-items: center; width: 36px; height: 36px;
border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 10px;
color: rgba(255, 255, 255, 0.6);
transition: color 0.28s ease, border-color 0.28s ease, background-color 0.28s ease;
}
.footer__social a svg{ width: 17px; height: 17px; fill: none; stroke: currentColor; }
.footer__social a:hover{
color: var(--teal); border-color: rgba(63, 214, 232, 0.4);
background: rgba(63, 214, 232, 0.07);
}
.footer__word{ margin-top: clamp(1rem, 2vw, 1.8rem); }
@media (max-width: 900px){.footer__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }.footer__brand{ grid-column: 1 / -1; max-width: 34rem; }}
@media (max-width: 680px){.footer__grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 460px){.footer__grid{ grid-template-columns: 1fr; }}
.footer__word{ margin-bottom: clamp(0.9rem, 2vw, 1.6rem); }
.ctaFeld{
display: grid;
gap: 0.7rem;
align-content: start;
max-width: 34rem;
width: 100%;
justify-self: end;
}
.ctaFeld__haupt{
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: clamp(1.05rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.4rem);
border-radius: var(--radius);
text-decoration: none;
isolation: isolate;
background: linear-gradient(122deg, rgba(47, 77, 158, 0.62), rgba(47, 163, 186, 0.42));
border: 1px solid rgba(127, 208, 224, 0.34);
box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
transition:
border-color 0.55s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaFeld__haupt::after{
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%);
opacity: 0;
transition: opacity 0.55s ease;
}
.ctaFeld__zeichen{
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.17);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__zeichen svg{ width: 22px; height: 22px; }
.ctaFeld__inhalt{ display: grid; gap: 0.16rem; }
.ctaFeld__titel{ font-size: 1.08rem; font-weight: 660; color: #fff; line-height: 1.3; }
.ctaFeld__text{ font-size: 0.86rem; color: rgba(233, 243, 250, 0.78); line-height: 1.45; }
.ctaFeld__pfeil{
display: grid;
place-items: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.08);
color: #fff;
transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__pfeil svg{ width: 16px; height: 16px; }
.ctaFeld__paar{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ctaDirekt{
position: relative;
display: grid;
gap: 0.1rem;
padding: clamp(0.95rem, 1.8vw, 1.2rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.12);
text-decoration: none;
overflow: hidden;
transition:
border-color 0.55s ease,
background-color 0.55s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen{
display: grid;
place-items: center;
width: 34px; height: 34px;
margin-bottom: 0.55rem;
border-radius: 10px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.2);
color: #7fd0e0;
transition: background 0.55s ease, border-color 0.55s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen svg{ width: 17px; height: 17px; }
.ctaDirekt__art{
font-family: var(--font-mono);
font-size: 0.63rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(127, 208, 224, 0.82);
}
.ctaDirekt__wert{
font-size: 0.98rem;
font-weight: 620;
color: #fff;
line-height: 1.3;
overflow-wrap: anywhere;
}
.ctaDirekt__zusatz{ font-size: 0.78rem; color: var(--dark-text); line-height: 1.4; margin-top: 0.12rem; }
.ctaFeld__ort{
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.2rem 0 0;
padding: 0.75rem 0.9rem;
border-radius: var(--radius);
border: 1px dashed rgba(255, 255, 255, 0.12);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: rgba(233, 243, 250, 0.66);
}
.ctaFeld__ort svg{ width: 15px; height: 15px; flex: none; color: #7fd0e0; }
@media (hover: hover){.ctaFeld__haupt:hover{
transform: translateY(-3px);
border-color: rgba(127, 208, 224, 0.55);
box-shadow: 0 30px 56px -34px rgba(0, 0, 0, 0.95);
}.ctaFeld__haupt:hover::after{ opacity: 1; }.ctaFeld__haupt:hover .ctaFeld__zeichen{ transform: scale(1.05); background: rgba(255, 255, 255, 0.24); }.ctaFeld__haupt:hover .ctaFeld__pfeil{ transform: translateX(3px); background: rgba(255, 255, 255, 0.18); }.ctaDirekt:hover{
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.075);
border-color: rgba(127, 208, 224, 0.36);
}.ctaDirekt:hover .ctaDirekt__zeichen{
transform: scale(1.06);
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.4);
}}
html.js [data-auftritt="cta"] .ctaFeld > *{
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease var(--wg, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--wg, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld > *{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(1){ --wg: 0.18s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(2){ --wg: 0.3s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(3){ --wg: 0.42s; }
@media (max-width: 900px){.ctaFeld{ justify-self: start; max-width: 40rem; }}
@media (max-width: 460px){.ctaFeld__paar{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="cta"] .ctaFeld > *{ opacity: 1; transform: none; transition: none; }.ctaFeld__haupt, .ctaDirekt, .ctaFeld__zeichen, .ctaDirekt__zeichen, .ctaFeld__pfeil{ transition: none; }}
.ctaFeld__text{ font-size: 0.83rem; }
#kontakt .ctaFeld__ort{ font-size: 0.73rem; gap: 0.55rem; padding: 0.7rem 0.85rem; }
#kontakt .ctaLage__punkte{
gap: 0;
margin-top: 0.75rem;
max-width: 30rem;
padding: 0.15rem 1.15rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.03);
}
#kontakt .ctaLage__punkte li:last-child{ border-bottom: 0; }
#kontakt .ctaLage__punkte li{
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
padding: 0.72rem 0;
font-size: 0.92rem;
color: rgba(233, 243, 250, 0.86);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
#kontakt .ctaLage__punkte i{
width: 30px; height: 30px;
border-radius: 9px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.2);
transition: background-color 0.5s ease, border-color 0.5s ease;
}
#kontakt .ctaLage__punkte i::after{
left: 11px; top: 8px;
width: 5px; height: 9px;
border-color: #7fd0e0;
border-width: 0 1.9px 1.9px 0;
}
@media (hover: hover){#kontakt .ctaLage__punkte li:hover i{
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.38);
}}
#kontakt .ctaLage__text{ gap: 1.1rem; }
#kontakt .ctaLage__lead{ max-width: 34ch; color: rgba(233, 243, 250, 0.78); }
@media (prefers-reduced-motion: reduce){#kontakt .ctaLage__punkte i{ transition: none; }}
@media (min-width: 901px){#kontakt .ctaLage{ align-items: stretch; }#kontakt .ctaFeld{ height: 100%; align-content: space-between; gap: 0.9rem; }#kontakt .ctaLage__text{ align-content: start; }}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(4){ --wg: 0.54s; }
#kontakt .ctaFeld .ctaLage__punkte{ max-width: none; margin-top: 0; }
@media (min-width: 901px){#kontakt .ctaLage{ align-items: center; }#kontakt .ctaFeld{ height: auto; align-content: start; gap: 0.7rem; }}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(5){ --wg: 0.66s; }
#kontakt .ctaFeld__ort{ margin: 0; }
#kontakt .ctaLage__lead:last-of-type{ color: rgba(233, 243, 250, 0.62); font-size: 0.95rem; }
#kontakt .ctaLage__text{ gap: 0.85rem; }
#kontakt .ctaLage__text .kicker{ margin-bottom: 0.15rem; }
#kontakt .ctaLage__text h2{ margin-bottom: 0.35rem; }
@media (min-width: 901px){#kontakt .ctaLage{
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 3.5vw, 2.8rem);
justify-items: center;
text-align: center;
padding-right: 0;
}#kontakt .ctaLage__text{ justify-items: center; max-width: 44rem; gap: 1rem; }#kontakt .ctaFeld{ justify-self: center; max-width: 40rem; height: auto; }}
#kontakt .ctaLage__lead{ max-width: 52ch; margin-inline: auto; }
#kontakt .ctaFeld, #kontakt .ctaFeld *{ text-align: left; }
#kontakt .ctaFeld__ort{ justify-content: flex-start; }
@media (min-width: 1100px){#kontakt .ctaLage{ padding-right: 0; }}
html.js [data-auftritt="cta"] .ctaLage__text > *{
opacity: 0;
translate: 0 42px;
scale: 0.96;
filter: blur(6px);
transition:
opacity 0.85s ease var(--cd, 0s),
translate 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
scale 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
filter 0.8s ease var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > *{
opacity: 1; translate: 0 0; scale: 1; filter: blur(0);
}
html.js [data-auftritt="cta"] .ctaFeld__haupt{
opacity: 0;
transform: translateY(60px) scale(0.9);
transition:
opacity 0.8s ease 0.34s,
transform 1s cubic-bezier(0.18, 1.02, 0.3, 1) 0.34s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__haupt{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld__paar{ opacity: 1; transform: none; transition: none; }
html.js [data-auftritt="cta"] .ctaDirekt{
opacity: 0;
transition:
opacity 0.75s ease var(--dz, 0s),
transform 0.95s cubic-bezier(0.18, 1.02, 0.3, 1) var(--dz, 0s);
}
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(1){ transform: translateX(-70px) scale(0.94); --dz: 0.48s; }
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(2){ transform: translateX(70px) scale(0.94); --dz: 0.58s; }
html.js [data-auftritt="cta"].ist-auf .ctaDirekt{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte{
opacity: 0;
transform: translateY(46px);
transition: opacity 0.8s ease 0.68s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.68s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld .ctaLage__punkte{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li{
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.6s ease var(--pz, 0s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte li{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(1){ --pz: 0.86s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(2){ --pz: 0.96s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(3){ --pz: 1.06s; }
html.js [data-auftritt="cta"] .ctaLage__punkte i{
opacity: 0;
transform: scale(0.4);
transition: opacity 0.45s ease var(--pz, 0s), transform 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte i{ opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld__ort{
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease 1.16s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.16s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__ort{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){html.js [data-auftritt="cta"] .ctaLage__text > *,
html.js [data-auftritt="cta"] .ctaFeld__haupt,
html.js [data-auftritt="cta"] .ctaDirekt,
html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte,
html.js [data-auftritt="cta"] .ctaLage__punkte li,
html.js [data-auftritt="cta"] .ctaLage__punkte i,
html.js [data-auftritt="cta"] .ctaFeld__ort{
opacity: 1; transform: none; translate: none; scale: none; filter: none; transition: none;
}}
.footer__col h3{
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.05rem;
}
.footer__col h3::before{
content: "";
width: 14px; height: 1px;
background: currentColor;
opacity: 0.55;
}
.footer__col a{
position: relative;
display: grid;
grid-template-columns: 0fr minmax(0, 1fr);
align-items: center;
gap: 0;
padding: 0.3rem 0;
width: fit-content;
transition: color 0.4s ease, grid-template-columns 0.45s cubic-bezier(0.4, 0.05, 0.25, 1), gap 0.45s ease;
}
.footer__col a::before{
content: "";
width: 0;
height: 1px;
overflow: hidden;
background: #7fd0e0;
transition: width 0.45s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.footer__col a > span,
.footer__col a{ white-space: nowrap; }
.footer__adresse{ gap: 0.75rem; }
.footer__adresse span,
.footer__adresse a{
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: start;
gap: 0.6rem;
width: fit-content;
}
.footer__adresse svg{
width: 15px; height: 15px;
margin-top: 0.28rem;
color: rgba(127, 208, 224, 0.75);
flex: none;
transition: color 0.4s ease;
}
@media (hover: hover){.footer__col a:hover{
color: #fff;
grid-template-columns: 10px minmax(0, 1fr);
gap: 0.55rem;
transform: none;
}.footer__col a:hover::before{ width: 10px; }.footer__adresse a:hover{ color: #fff; transform: none; }.footer__adresse a:hover svg{ color: var(--teal); }}
@media (prefers-reduced-motion: reduce){.footer__col a, .footer__col a::before, .footer__adresse a, .footer__adresse svg{ transition: none; }}
.footer__adresse a::before{ content: none; display: none; }
.footer__adresse a{ grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; white-space: normal; }
@media (hover: hover){.footer__adresse a:hover{ grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; }}
@media (max-width: 700px){html.ballzuerst .hero__system{
display: grid;
place-items: center;
position: fixed;
inset: 0;
z-index: 420;
pointer-events: none;
background: #0a1322;
}html.ballzuerst .hero__orbit{ display: none; }html.ballzuerst .orbwrap{
width: min(76vw, 340px);
margin: 0;
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}html.ballzuerst .bootfx,
html.ballzuerst .bootfx__marke,
html.ballzuerst .bootfx__marke *{ animation-play-state: paused !important; }html.ballzuerst .bootfx__marke{ opacity: 0; }.hero__system{ transition: opacity 0.45s ease; }html.ballaus .hero__system{ opacity: 0; }}
@media (prefers-reduced-motion: reduce){html.ballzuerst .hero__system{ display: none; }}
@media (max-width: 700px){html.ballzuerst .hero [data-explode],
html.ballzuerst .hero__marquee,
html.ballzuerst .hero__marquee-track,
html.ballzuerst .hero__orbit,
html.ballzuerst .hero__caret{ animation-play-state: paused !important; }}
@media (max-width: 700px){html.ballzuerst .bootfx{ background: transparent; }html.ballzuerst .bootfx::after{ display: none; }html.ballzuerst #bootfx{ opacity: 0; }html.ballzuerst .orbwrap{ width: min(88vw, 400px); }}
@media (min-width: 761px) and (max-width: 1100px){.pscroll__sticky{ height: auto; padding-bottom: var(--s-4); }.pscroll__viewport{ flex: 0 1 auto; }.pscroll__track{ height: auto; }.pslide{
height: auto;
align-content: center;
padding-block: clamp(1.5rem, 3vh, 2.5rem);
}}
@media (max-width: 1100px){.pscroll__nav{ margin-bottom: clamp(3.5rem, 8vh, 5rem); }}
@media (max-width: 1100px){.pslide__link{ padding-block: 0.55rem; }}
@media (max-width: 760px){.demat__pin{ padding-top: 1.1rem; }.demat__lage{ padding-bottom: 0; gap: 0.9rem; }.demat__text{ gap: 0.55rem; }.demat__text h3{ font-size: clamp(1.25rem, 5.6vw, 1.5rem); }.demat__lead{ font-size: 0.92rem; line-height: 1.5; }.demat__text ul{ gap: 0.3rem; }.demat__text ul li{ font-size: 0.88rem; line-height: 1.4; }.demat__text a{ margin-top: 0.35rem; }.dfenster{ max-height: 30vh; }.dfenster__inhalt{ max-height: calc(30vh - 34px); overflow: hidden; }}
@media (max-width: 620px){.core{ padding: 1.4rem 1.25rem 1.5rem; }.core__copy{ gap: 0.7rem; }.core__index{ margin-bottom: 0; }}
@media (max-width: 620px){.stats{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0.2rem 0;
border-top: 1px solid rgba(47, 77, 158, 0.13);
border-bottom: 1px solid rgba(47, 77, 158, 0.13);
}.stats > *{ max-width: none; }#unternehmen .stat{
padding: 1.15rem 0.6rem;
border: 0;
border-radius: 0;
background: transparent;
border-bottom: 1px solid rgba(47, 77, 158, 0.1);
}#unternehmen .stat:nth-child(odd){ border-right: 1px solid rgba(47, 77, 158, 0.1); }#unternehmen .stat:nth-child(4){ border-bottom: 0; }#unternehmen .stat:nth-child(5){ grid-column: 1 / -1; border-right: 0; border-bottom: 0; }}
@media (max-width: 760px) and (max-height: 880px){.demat__pin{ padding-top: 0.7rem; }.demat__lage{ gap: 0.7rem; }.dfenster{ max-height: 21vh; }.dfenster__inhalt{ max-height: calc(21vh - 30px); }.demat__fort{ margin-top: 0.5rem; }.demat__marken{ gap: 0.3rem; }.demat__text{ gap: 0.45rem; }.demat__text h3{ font-size: clamp(1.2rem, 5.2vw, 1.4rem); }.demat__lead{ font-size: 0.88rem; line-height: 1.45; }.demat__text ul li{ font-size: 0.85rem; }.demat__nr{ font-size: 0.78rem; }}
@media (max-width: 760px){.demat__marken{ gap: 0.4rem; }.demat__marken span{ font-size: 0; gap: 0; }.demat__marken span em{ font-size: 0.72rem; letter-spacing: 0.1em; }}
@media (max-width: 760px) and (max-height: 820px){.demat__marken{ display: none; }.dfenster{ max-height: 19vh; }.dfenster__inhalt{ max-height: calc(19vh - 28px); }}
@media (max-width: 760px) and (max-height: 770px){.dfenster{ max-height: 16vh; }.dfenster__inhalt{ max-height: calc(16vh - 26px); }.demat__text ul li{ font-size: 0.82rem; }}
@media (max-width: 1100px), (hover: none){.cores-stack .core::before{
inset: -1px;
height: auto;
border-radius: inherit;
padding: 2px;
}.cores-stack .core::after{ display: none; }}
@media (min-width: 761px) and (max-width: 1100px){.steps.steps.steps{ --spalten: 1; }}
@media (min-width: 940px) and (max-width: 1119px){.dsgpt .ticks--cols{ grid-template-columns: minmax(0, 1fr); }}
html.js .kanal[data-reveal],
.kanal{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.75s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}
.stat b{ text-wrap: balance; }
.stat b, .zahl__wert{ white-space: nowrap; }
.stat b{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
html.js .eignung__siegel[data-reveal],
.eignung__siegel{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.9s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.siegel__ring{
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg, var(--blue), var(--teal), var(--blue));
-webkit-mask: radial-gradient(circle, transparent 58%, #000 59%);
mask: radial-gradient(circle, transparent 58%, #000 59%);
opacity: 0.85;
animation: siegel-dreht 22s linear infinite;
transform: translateZ(0);
will-change: transform;
}
@media (prefers-reduced-motion: reduce){.siegel__ring{ animation: none; }}
html.js .ikachel[data-reveal],
.ikachel{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce){html.js .ikachel[data-reveal],
.ikachel, .ikachel__symbol{ transition: none; }}
html.js .fbox[data-reveal],
.fbox{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1),
filter 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce){html.js .fbox[data-reveal],
.fbox{ transition: none; }}
html.js .shopbild[data-reveal],
.shopbild{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (prefers-reduced-motion: reduce){html.js .shopbild[data-reveal], .shopbild{ transition: none; }}
.prosa--getrennt > :is(h2, h3):first-child{ margin-top: 0; }
html.js .balken .balken__spur span{ transform: scaleX(0); }
html.js .balken.ist-auf .balken__spur span{
animation: balken-fuellen 1.1s cubic-bezier(0.22, 1, 0.36, 1) var(--verzug, 0s) both;
}
@media (prefers-reduced-motion: reduce){html.js .balken .balken__spur span,
html.js .balken.ist-auf .balken__spur span{ transform: none; animation: none; }}
.page-hero h1,
.section__head h2,
.section__head h3{ hyphens: manual; }
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1) ~ *{
flex-basis: calc((100% - var(--luecke)) / 2);
}
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1) ~ *{
flex-basis: calc((100% - 2 * var(--luecke)) / 3);
}
@media (max-width: 900px){:is(.lkarten, .goals, .tkarten, .preise, .team) > *{
flex-basis: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}}
main :is(h1, h2, h3, h4){ hyphens: manual; }
.lkarte--dunkel :is(h2, h3, h4, .lkarte__titel, b, strong){ color: #fff; }
.preis--dunkel :is(.preis__name, .preis__betrag b){ color: #fff; }
.preis--dunkel :is(.preis__text, .preis__einheit, .preis__ersparnis){ color: rgba(255, 255, 255, 0.76); }
.preise .preis--band :is(.preis__name, .preis__text){ grid-column: 1; }
.section--dark .case :is(h2, h3, h4, b, strong){ color: #fff; }
.aufruf :is(h2, h3){ color: #fff; text-wrap: balance; margin: 0 0 0.8rem; }
.aufruf :is(h2, h3) .grad{
background: none;
-webkit-text-fill-color: currentColor;
color: rgba(255, 255, 255, 0.82);
}
.rechner__kopf :is(h2, h3){ color: #fff; margin: 0; }
.rechner__kopf :is(h2, h3) .grad{ background: none; -webkit-text-fill-color: currentColor; color: rgba(255, 255, 255, 0.82); }
.case__copy .case__block :is(h3, h4){ margin: 0 0 0.25rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.section--dark .case.case :is(h2, h3, h4, b, strong){ color: #fff; }
:is(.lkarten, .goals, .tkarten, .preise).sp-3 > :last-child:nth-child(3n + 1){
flex-basis: calc((100% - var(--luecke)) / 2);
margin-inline: auto;
}
@media (max-width: 780px){:is(.lkarten, .goals, .tkarten, .preise).sp-3 > :last-child:nth-child(3n + 1){ flex-basis: 100%; }}
.lkarte :is(h2, h4){ font-size: 1.2rem; margin-bottom: 0.6rem; line-height: 1.3; }
.lkarte :is(h2, h4){ overflow-wrap: break-word; }
.paket__inhalt :is(h2, h3){ font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 0.6rem; }
main :is(h1, h2, h3, h4, h5, h6, p, li, span, b, strong, cite){ overflow-wrap: anywhere; }
.aufruf--schlicht :is(h2, h3){ color: var(--ink); margin: 0 0 0.9rem; }
.aufruf--schlicht :is(h2, h3):last-child{ margin-bottom: 0; }
.aufruf--schlicht :is(h2, h3) .grad{
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.section__head--gross > :is(h3, h4){
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 720;
font-stretch: 106%;
}
.lkarte--symbol :is(h3, h4){ hyphens: manual; overflow-wrap: normal; }
.lkarten--letzte-breit > :last-child > :is(h3, h4, .lkarte__text, .ticks){ max-width: 62ch; margin-inline: auto; }
.section--dark .lkarte.lkarte--dunkel :is(h2, h3, h4){ color: #fff; }
.section--dark .paket .paket__inhalt :is(h2, h3){ color: var(--ink); }
.lkarten--links .lkarte--symbol :is(h2, h3, h4){ hyphens: manual; }
.lkarten--letzte-breit.lkarten--links > :last-child > :is(h3, h4, .lkarte__text, .ticks){ margin-inline: 0; max-width: none; }
.merkmal__text :is(h2, h3, h4){ margin: 0.35rem 0 0.7rem; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; }
.section--dark .merkmal__text :is(h2, h3, h4){ color: #fff; }
:is(.interview, .fettzeilen) :is(.merkmal__text, .case__copy) > p > strong:only-child{ display: block; color: var(--ink); font-size: clamp(1.1rem, 1.7vw, 1.3rem); line-height: 1.35; font-weight: 700; }
.interview :is(.merkmal__text, .case__copy) > p > em{ color: var(--teal-ink); font-style: normal; font-weight: 600; }
html.js .plattform[data-reveal],
html.js .plattform[data-reveal].in{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.9s ease,
border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce){html.js .plattform[data-reveal], html.js .plattform[data-reveal].in{ transition: none; }}
.mock{ position: relative; padding: clamp(1.2rem, 2.4vw, 1.7rem); border: 1px solid var(--line); border-radius: var(--radius); background: #fff; box-shadow: var(--shadow-lg); font-size: 0.86rem; }
.mock__pill{ flex: 0 0 auto; padding: 0.28rem 0.7rem; border-radius: 999px; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; }
html.js .angebot[data-reveal], html.js .angebot[data-reveal].in{
transition: opacity 0.7s ease var(--d, 0s), translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s), scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
@media (prefers-reduced-motion: reduce){.angebot, .angebot__symbol, .angebot__pfeil, html.js .angebot[data-reveal]{ transition: none; }}
html.js .beitrag[data-fold], html.js .beitrag[data-fold].is-fertig{
transition:
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.9s ease,
border-color 0.7s ease;
}
html.js .lkarte[data-fold], html.js .lkarte[data-fold].is-fertig{
transition:
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.8s ease,
border-color 0.8s ease;
}
html.js .kachel[data-reveal], html.js .kachel[data-reveal].in{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.8s ease,
border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce){html.js .kachel[data-reveal], html.js .kachel[data-reveal].in{ transition: none; }}
html.js .preis[data-fold], html.js .preis[data-fold].is-fertig{
transition:
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.8s ease,
border-color 0.7s ease;
}
html.js .staffel[data-reveal], html.js .staffel[data-reveal].in,
html.js .paket[data-reveal], html.js .paket[data-reveal].in{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.8s ease,
border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce){html.js .preis[data-fold], html.js .preis[data-fold].is-fertig, .paket,
html.js .staffel[data-reveal], html.js .staffel[data-reveal].in,
html.js .paket[data-reveal], html.js .paket[data-reveal].in{ transition: none; }}
.case--dunkel :is(h2, h3, h4, b, strong){ color: #fff; }
html.js .case[data-turn], html.js .case[data-turn].is-fertig{
transition:
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.8s ease,
border-color 0.7s ease;
}
@media (prefers-reduced-motion: reduce){.case, html.js .case[data-turn], html.js .case[data-turn].is-fertig, .bildrahmen img, .videobox video, .case__blocksymbol{ transition: none; }}
.section__head--voll.section__head--mittig > :is(p, .section__intro){ max-width: 52rem; margin-inline: auto; }
.section__head--gross > :is(h3, h4){ font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
html.js .case-sm[data-reveal], html.js .case-sm[data-reveal].in{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.8s ease;
}
@media (prefers-reduced-motion: reduce){.case-sm, html.js .case-sm[data-reveal], html.js .case-sm[data-reveal].in{ transition: none; }}
.lkarte--ruht > :is(h3, h4){ color: var(--ink-2); }
@media (max-width: 560px){.cookie__knopf{ flex: 0 0 auto; padding-block: 0.85rem; }.cookie__karte{ padding: 1.3rem 1.2rem 1.1rem; }.cookie__titel{ font-size: 1.15rem; }.cookie__text{ font-size: 0.9rem; line-height: 1.5; }.cookie__fuss{ font-size: 0.78rem; }}
@media (max-width: 620px){.chatfenster{ height: min(560px, calc(100dvh - 178px - 96px)); }html.chat-offen .totop{ opacity: 0; visibility: hidden; pointer-events: none; }}
@media (max-width: 700px){.section__head,
.cta__inner,
.aufruf,
.page-hero__inner,
.hero__copy,
.termin__platz,
.tabelle__hinweis{ text-align: center; }.section__head > :is(h2, h3, h4, p, .kicker, .section__intro){ margin-inline: auto; }.section__head--breit > h2,
.section__head--breit > .kicker{ max-width: none; }.lkarte, .lkarte--symbol,
.lkarte--symbol :is(h3, h4, p),
.case__copy, .case__copy :is(p, li, h3, h4),
.prosa, .prosa :is(p, li),
.preis, .preis :is(p, li),
.feld, .karte, .karte :is(p, li, h3, h4),
.schritt, .schritt :is(p, li),
.faq, .faq :is(p, li),
.kform, .kform :is(p, label){ text-align: left; }}
.nav__mobile-gruppe{
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
width: 100%;
padding: 0.65rem 0.25rem;
background: none;
border: 0;
border-bottom: 1px solid var(--line);
font: inherit;
font-weight: 550;
color: var(--ink-2);
text-align: left;
cursor: pointer;
}
.nav__mobile-gruppe svg{ width: 18px; height: 18px; flex: 0 0 18px; transition: transform 0.3s ease; }
.nav__mobile-gruppe[aria-expanded="true"]{ color: var(--ink); }
.nav__mobile-gruppe[aria-expanded="true"] svg{ transform: rotate(180deg); }
.nav__mobile-liste{ display: flex; flex-direction: column; gap: 0.2rem; padding-bottom: 0.4rem; }
.nav__mobile-liste[hidden]{ display: none; }
.nav--dark .nav__mobile-gruppe{ color: #b9c4d8; border-color: rgba(255, 255, 255, 0.08); }
.nav--dark .nav__mobile-gruppe[aria-expanded="true"]{ color: #fff; }
@media (prefers-reduced-motion: reduce){.nav__mobile-gruppe svg{ transition: none; }}
@media (max-width: 700px){.demat__kopf,
.sysgrid__copy > :is(.kicker, h2, .section__intro),
.dsgpt__copy > :is(.kicker, h2, p),
.jubiOben__text > :is(.kicker, h2, p),
.ctaLage__text > :is(.kicker, h2, .ctaLage__lead){ text-align: center; }}
html.js .feed__karte[data-reveal]{
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.8s ease,
border-color 0.8s ease;
}
@media (prefers-reduced-motion: reduce){html.js .feed__karte[data-reveal]{ transition: none; }}
html.js .ukarte[data-fold], html.js .ukarte[data-fold].is-fertig{
transition:
translate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
rotate 0.32s cubic-bezier(0.16, 1, 0.3, 1),
scale 0.32s cubic-bezier(0.16, 1, 0.3, 1),
opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.8s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.8s ease,
border-color 0.8s ease;
}
@media (prefers-reduced-motion: reduce){.ukarte__bild img, html.js .ukarte[data-fold], html.js .ukarte[data-fold].is-fertig{ transition: none; }}
html.js .stimmen__band:not(.ist-geklont){ animation: none; }
.ist-fern, .ist-fern *, .ist-fern *::before, .ist-fern *::after{ animation-play-state: paused; }
@keyframes navlaser{ to { --nav-angle: 360deg; } }
@keyframes badgelaser{ to { --badge-angle: 360deg; } }
@keyframes badgeshine{
0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
8% { opacity: 1; }
30% { opacity: 1; }
40% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
100% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
}
@keyframes ping{
from { transform: scale(0.6); opacity: 1; }
to { transform: scale(2.4); opacity: 0; }
}
@keyframes caret{ 50% { opacity: 0; } }
@keyframes orbitin{ to { opacity: 1; } }
@keyframes orbit{ to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes risein{
from { opacity: 0; transform: translateY(46px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes marquee{ to { transform: translate3d(calc(-50% - var(--mq-gap) / 2), 0, 0); } }
@keyframes bootout{ to { opacity: 0; visibility: hidden; } }
@keyframes orbglow{
from { opacity: 0.5; transform: scale(0.92); }
to { opacity: 0.85; transform: scale(1.05); }
}
@keyframes auroradrift{
0% { transform: translate(-52%, -48%) rotate(0deg) scale(1); }
100% { transform: translate(-48%, -52%) rotate(22deg) scale(1.08); }
}
@keyframes ringpulse{
0%, 100% { transform: scale(0.97); opacity: 0.45; }
50% { transform: scale(1.06); opacity: 1; }
}
@keyframes logobloom{
0% { opacity: 0; transform: scale(0.86); }
18% { opacity: 0.55; }
100% { opacity: 0; transform: scale(1.3); }
}
@keyframes orbglowfinal{
from { opacity: 0.75; transform: scale(0.95); }
to { opacity: 1; transform: scale(1.12); }
}
@keyframes logosway{
0%, 100% { transform: rotateX(9deg) rotateY(-11deg); }
50% { transform: rotateX(4deg) rotateY(11deg); }
}
@keyframes logofloat{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes floaty{
0%, 100% { translate: 0 0; }
25% { translate: var(--fa, 5px) calc(var(--fb, 7px) * -1); }
50% { translate: calc(var(--fb, 7px) * -0.8) var(--fa, 5px); }
75% { translate: calc(var(--fa, 5px) * 0.6) calc(var(--fb, 7px) * 0.7); }
}
@keyframes assemble{
from {
opacity: 0;
transform: translate(var(--ex, 0px), var(--ey, 0px)) rotate(var(--er, 0deg)) scale(var(--es, 0.85));
filter: blur(8px);
}
55% { filter: blur(0); }
to {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
filter: blur(0);
}
}
@keyframes linesin{ to { opacity: 1; } }
@keyframes dashflow{ to { stroke-dashoffset: -32; } }
@keyframes meter{ from { transform: scaleX(0.395); } to { transform: scaleX(1); } }
@keyframes bar{ from { transform: scaleY(0.75); } to { transform: scaleY(1); } }
@keyframes ringspin{ to { rotate: 360deg; } }
@keyframes chatdot{
0%, 100% { opacity: 0.3; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-4px); }
}
@keyframes numpulse{
0% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.45); }
70%, 100% { box-shadow: 0 0 0 14px rgba(63, 214, 232, 0); }
}
@keyframes zaehlerpuls{
0% { transform: translateY(6px) scale(0.9); opacity: 0.3; }
100% { transform: none; opacity: 1; }
}
@keyframes stimmenlauf{
to { transform: translate3d(calc(-50% - 0.55rem), 0, 0); }
}
@keyframes bootlogoein{
from { opacity: 0; scale: 0.94; }
to { opacity: 1; scale: 1; }
}
@keyframes gruppeauf{
from { opacity: 0; translate: 0 14px; }
to { opacity: 1; translate: none; }
}
@keyframes pv3-float-phone{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes pv3-float{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
@keyframes cookie-auf{
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@keyframes deinlauf{ from { --ein: 0; } to { --ein: 1; } }
@keyframes dgradzug{
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@keyframes dfeldan{
0% { opacity: 0; transform: translateY(5px); border-color: rgba(12, 22, 38, 0.1); }
4% { opacity: 1; transform: none; }
6%, 12% { border-color: rgba(47, 163, 186, 0.55); background: rgba(47, 163, 186, 0.05); }
16%, 92% { opacity: 1; transform: none; border-color: rgba(12, 22, 38, 0.1); background: rgba(12, 22, 38, 0.02); }
100% { opacity: 0; transform: translateY(5px); }
}
@keyframes dtipp{
0% { width: 0; }
5%, 90% { width: 100%; }
100% { width: 0; }
}
@keyframes dblink{ 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes dcursoran{ 0%, 19% { visibility: hidden; } 20%, 31% { visibility: visible; } 32%, 100% { visibility: hidden; } }
@keyframes dknopf{
0%, 4% { opacity: 0; transform: translateY(6px); }
8%, 30% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
33% { transform: scale(0.95); box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
36%, 92% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
100% { opacity: 0; transform: translateY(6px); }
}
@keyframes dklick{
0%, 24% { transform: translate(38px, 30px) scale(0.85); opacity: 0; }
27% { opacity: 1; }
32% { transform: translate(0, 0) scale(1); opacity: 1; }
34% { transform: translate(0, 0) scale(0.55); opacity: 1; }
37% { transform: translate(0, 0) scale(1); opacity: 1; }
42%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
@keyframes dwelle{
0%, 33% { transform: scale(0.5); opacity: 0; }
35% { transform: scale(1); opacity: 0.9; }
44%, 100% { transform: scale(2.6); opacity: 0; }
}
@keyframes dbahnan{ 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes dzielan{
0%, 30% { opacity: 0; }
36%, 47% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); }
50% { opacity: 1; border-color: var(--teal); background: rgba(47, 163, 186, 0.14); }
56%, 92% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); background: rgba(47, 77, 158, 0.07); }
100% { opacity: 0; }
}
@keyframes dpaket{
0%, 35% { left: 3%; transform: translate(0, -50%) scale(0.7); opacity: 0; }
38% { opacity: 1; transform: translate(0, -50%) scale(1); }
48% { left: 62%; opacity: 1; transform: translate(0, -50%) scale(1); }
51% { left: 70%; opacity: 0.2; transform: translate(0, -50%) scale(0.75); }
54%, 100% { left: 70%; opacity: 0; transform: translate(0, -50%) scale(0.7); }
}
@keyframes dbelegt{
0%, 52% { background: rgba(12, 22, 38, 0.05); transform: scale(1); box-shadow: none; }
57% { background: var(--teal); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.25); }
63%, 92% { background: rgba(47, 163, 186, 0.45); transform: scale(1); box-shadow: none; }
100% { background: rgba(12, 22, 38, 0.05); }
}
@keyframes dspaet{
0%, 55% { opacity: 0; transform: translateY(8px); }
63%, 93% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(8px); }
}
@keyframes dweg{
0%, 12% { opacity: 1; transform: none; filter: none; }
26% { opacity: 0.5; transform: translateX(8px); filter: blur(1px); }
34%, 90% { opacity: 0.12; transform: translateX(16px); filter: blur(2px); }
100% { opacity: 1; transform: none; filter: none; }
}
@keyframes dwandern{
0%, 10% { left: 0; opacity: 0; transform: scale(0.6); }
14% { opacity: 1; transform: scale(1); }
28% { left: calc(100% - 6px); opacity: 1; transform: scale(1); }
32%, 100% { left: calc(100% - 6px); opacity: 0; transform: scale(0.5); }
}
@keyframes dkachel{
0%, 14% { opacity: 0; transform: translateY(8px) scale(0.96); }
24%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(8px) scale(0.96); }
}
@keyframes dlauf{
0%, 34% { opacity: 0; transform: translateX(-12px); }
44%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateX(-12px); }
}
@keyframes dtaktan{
0%, 58% { opacity: 0; }
66%, 92% { opacity: 1; }
100% { opacity: 0; }
}
@keyframes dtakt{
0%, 100% { background: rgba(47, 163, 186, 0.22); transform: scaleY(0.6); }
50% { background: var(--teal); transform: scaleY(1); }
}
@keyframes dverlauf{
0%, 90% { opacity: 1; }
97%, 99.9% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes dblase1{
0%, 4% { opacity: 0; transform: translateY(8px) scale(0.82); }
6.5% { opacity: 1; transform: translateY(0) scale(1.05); }
9%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt1{
0%, 9% { opacity: 0; }
11%, 17% { opacity: 1; }
19%, 100% { opacity: 0; }
}
@keyframes dblase2{
0%, 21% { opacity: 0; transform: translateY(8px) scale(0.82); }
23.5% { opacity: 1; transform: translateY(0) scale(1.05); }
26%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dquellen{
0%, 28% { opacity: 0; transform: translateY(4px); }
32%, 99.9% { opacity: 0.92; transform: none; }
100% { opacity: 0; }
}
@keyframes dblase3{
0%, 46% { opacity: 0; transform: translateY(8px) scale(0.82); }
48.5% { opacity: 1; transform: translateY(0) scale(1.05); }
51%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt2{
0%, 55% { opacity: 0; }
57%, 62% { opacity: 1; }
64%, 100% { opacity: 0; }
}
@keyframes dblase4{
0%, 66% { opacity: 0; transform: translateY(8px) scale(0.82); }
68.5% { opacity: 1; transform: translateY(0) scale(1.05); }
71%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt{
0%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes dsicher1{
0%, 78% { opacity: 0; transform: translateY(6px); }
83%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
@keyframes dsicher2{
0%, 81% { opacity: 0; transform: translateY(6px); }
86%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
@keyframes dsicher3{
0%, 84% { opacity: 0; transform: translateY(6px); }
89%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
@keyframes dbalken{
0%, 4% { width: 0; }
22%, 88% { width: var(--breit); }
100% { width: 0; }
}
@keyframes dwertan{
0% { opacity: 0; transform: translateX(-4px); }
4%, 76% { opacity: 1; transform: none; }
84%, 100% { opacity: 0; }
}
@keyframes dpruefan{
0% { opacity: 0; transform: translateY(5px); }
4%, 68% { opacity: 1; transform: none; }
76%, 100% { opacity: 0; }
}
@keyframes dhakenan{
0% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
3%, 66% { background: var(--ok); border-color: var(--ok); }
74%, 100% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
}
@keyframes dhaken{
0% { transform: rotate(45deg) scale(0); }
3%, 66% { transform: rotate(45deg) scale(1); }
74%, 100% { transform: rotate(45deg) scale(0); }
}
@keyframes dring{
0% { stroke-dashoffset: 302; }
32%, 78% { stroke-dashoffset: 54; }
90%, 100% { stroke-dashoffset: 302; }
}
@keyframes mockpuls{
0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0); }
70% { box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
86% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}
@keyframes mockatem{
0%, 100% { opacity: 0.55; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-3px); }
}
@keyframes mockstreif{
0%, 55% { transform: translateX(0); opacity: 0; }
62% { opacity: 1; }
92%, 100% { transform: translateX(350%); opacity: 0; }
}
@keyframes mockmenue{
0%, 24% { opacity: 1; }
25%, 100% { opacity: 0.35; }
}
@keyframes mockzeile{
0%, 8% { opacity: 0.25; transform: translateX(-8px); }
22%, 80% { opacity: 1; transform: none; }
100% { opacity: 0.25; transform: translateX(-8px); }
}
@keyframes mockkpi{
0%, 6% { opacity: 0.4; transform: translateY(6px); }
20%, 86% { opacity: 1; transform: none; }
100% { opacity: 0.4; transform: translateY(6px); }
}
@keyframes mockdot{
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5); }
60%, 100% { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); }
}
@keyframes chatuser{
0%, 10% { opacity: 0; transform: translateY(8px) scale(0.84); }
14% { opacity: 1; transform: translateY(0) scale(1.04); }
18%, 86% { opacity: 1; transform: none; }
92%, 100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
@keyframes chattippt{
0%, 20% { opacity: 0; }
24%, 38% { opacity: 1; }
42%, 100% { opacity: 0; }
}
@keyframes chatai{
0%, 42% { opacity: 0; transform: translateY(8px) scale(0.84); }
46% { opacity: 1; transform: translateY(0) scale(1.03); }
50%, 86% { opacity: 1; transform: none; }
92%, 100% { opacity: 0; transform: translateY(-6px) scale(0.97); }
}
@keyframes chatschreib{
0%, 1% { opacity: 0.18; }
3%, 5% { opacity: 1; }
6%, 8% { opacity: 0.18; }
9% { opacity: 1; }
11%, 100% { opacity: 0.18; }
}
@keyframes mockidx{
0%, 12%, 40%, 100% { opacity: 0.55; transform: translateX(0); }
20%, 32% { opacity: 1; transform: translateX(6px); }
}
@keyframes mockzeiger{
0%, 26% { transform: translate(34px, 26px) scale(0.85); opacity: 0; }
30% { opacity: 1; }
40% { transform: translate(0, 0) scale(1); opacity: 1; }
44% { transform: translate(0, 0) scale(0.6); }
48% { transform: translate(0, 0) scale(1); }
56%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
@keyframes mockquitt{
0%, 50% { opacity: 0; transform: translateY(6px); }
58%, 88% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: translateY(-3px); }
}
@keyframes mockbalken{
0%, 6% { transform: scaleY(0.2); opacity: 0.45; }
30%, 82% { transform: scaleY(1); opacity: 1; }
100% { transform: scaleY(0.2); opacity: 0.45; }
}
@keyframes mocktippt{
0%, 12% { opacity: 0; }
16%, 26% { opacity: 1; }
30%, 100% { opacity: 0; }
}
@keyframes mockhuepf{
0%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-4px); opacity: 1; }
}
@keyframes mockmarker{
0%, 14% { transform: translateY(0); }
25%, 39% { transform: translateY(96%); }
50%, 64% { transform: translateY(192%); }
75%, 89% { transform: translateY(285%); }
100% { transform: translateY(0); }
}
@keyframes stpLupe{
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.08); opacity: 1; }
}
@keyframes stpZeile{
0%, 100% { transform: translateX(0); opacity: 0.55; }
50% { transform: translateX(5px); opacity: 1; }
}
@keyframes stpZuMitteR{
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(14%); opacity: 1; }
}
@keyframes stpZuMitteL{
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(-14%); opacity: 1; }
}
@keyframes stpPuls{
0%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.55); }
70%, 100% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}
@keyframes stpFuell{
0%, 6% { width: 6%; }
45%, 88% { width: var(--w, 40%); }
100% { width: 6%; }
}
@keyframes stpTakt{
from { background-position: 0 0; }
to { background-position: 16px 0; }
}
@keyframes lagePuls{
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.6); }
70%, 100% { box-shadow: 0 0 0 10px rgba(46, 201, 139, 0); }
}
@keyframes lageBalken{
from { height: 8%; opacity: 0.3; }
to { height: var(--h, 100%); opacity: 0.85; }
}
@keyframes lageScan{
0%, 8% { transform: translateX(0); opacity: 0; }
14% { opacity: 1; }
56% { transform: translateX(430%); opacity: 1; }
64%, 100% { transform: translateX(430%); opacity: 0; }
}
@keyframes lageAtem{
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
@keyframes lageHaken{ to { transform: rotate(45deg) scale(1); } }
@keyframes lageZeile{
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: none; }
}
@keyframes lageBlitz{
0%, 82% { transform: translateX(0); opacity: 0; }
86% { opacity: 1; }
96%, 100% { transform: translateX(350%); opacity: 0; }
}
@keyframes lageGlimmen{
0%, 100% { opacity: 0; }
50% { opacity: 0.6; }
}
@keyframes statAn{
0% { opacity: 0.25; transform: translateY(10px); filter: blur(4px); }
55% { opacity: 1; transform: none; filter: blur(0); }
100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes siegelRing{ to { transform: rotate(360deg); } }
@keyframes stimmenSchein{
0%, 6% { transform: translateX(0); opacity: 0; }
12% { opacity: 1; }
62% { transform: translateX(500%); opacity: 1; }
70%, 100% { transform: translateX(500%); opacity: 0; }
}
@keyframes eckePuls{
0%, 100% { box-shadow: 0 0 10px rgba(63, 214, 232, 0.9); opacity: 0.85; }
50% { box-shadow: 0 0 18px rgba(63, 214, 232, 1); opacity: 1; }
}
@keyframes bvisDreh{ to { transform: rotate(360deg); } }
@keyframes siegel-dreht{ to { transform: rotate(360deg) translateZ(0); } }
@keyframes balken-fuellen{
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}