/* 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); }
.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__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>');
}
@property --badge-angle{
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
.hero__cta{ display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
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; }
.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; }
.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__intro{ font-size: 1.13rem; color: var(--ink-2); margin-top: 1.1rem; }
.section__intro--light{ color: var(--dark-text); }
.goals{
--spalten: 2;
--luecke: 1.2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.goals > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.goal{
position: relative;
display: flex;
flex-direction: column;
gap: 0.85rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.7rem 1.5rem 1.5rem;
transition:
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease;
}
.goal::after{
content: "";
position: absolute;
inset: auto 0 0 0;
height: 3px;
border-radius: 0 0 var(--radius) var(--radius);
background: var(--grad);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
@media (hover: hover){.goal:hover{ border-color: transparent; }}
.goal__num{
position: absolute;
top: 1.3rem; right: 1.4rem;
font-family: var(--font-mono);
font-size: 0.78rem;
color: var(--ink-2);
opacity: 0.55;
}
.goal__title{ font-size: 1.18rem; font-weight: 700; letter-spacing: -0.015em; }
.goal__text{ color: var(--ink-2); font-size: 0.97rem; line-height: 1.55; }
.goal__link{
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal-ink);
}
.goal__link::after{ content: " →"; }
.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--light li{ color: var(--dark-text); }
.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__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;
}
.case{
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(1.8rem, 4vw, 3.5rem);
align-items: center;
background: var(--surface);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 6px);
box-shadow: var(--shadow);
padding: clamp(1.8rem, 3.5vw, 3rem);
margin-bottom: 1.4rem;
}
.case h3{ font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 720; margin-bottom: 0.8rem; }
.case__copy > p{ color: var(--ink-2); }
.cases{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.case-sm{
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;
}
.case-sm:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.case-sm h3{ font-size: 1.14rem; font-weight: 700; margin-bottom: 0.6rem; line-height: 1.3; }
.case-sm p{ color: var(--ink-2); font-size: 0.96rem; }
.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;
}
.steps--n5{
display: grid;
grid-template-columns: repeat(6, 1fr);
align-items: stretch;
}
.steps--n5 > *{ grid-column: span 2; flex: none; }
.steps--n5 > *:nth-last-child(-n+2){ grid-column: span 3; }
@media (max-width: 1080px){.steps--n5{ grid-template-columns: repeat(2, 1fr); }.steps--n5 > *,
.steps--n5 > *:nth-last-child(-n+2){ grid-column: auto; }.steps--n5 > *:last-child{ grid-column: span 2; }}
@media (max-width: 700px){.steps--n5{ grid-template-columns: 1fr; }.steps--n5 > *:last-child{ grid-column: auto; }}
.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; }
.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--exakt b::after{ content: none; }
.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);
}
.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; }
.cta__note{ font-family: var(--font-mono); font-size: 0.8rem !important; margin-top: 2rem !important; color: #8b98af !important; }
.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)); }
.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); }
.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; }.case{ grid-template-columns: 1fr; }.case__visual{ order: 2; }.cases{ grid-template-columns: 1fr; }}
@media (max-width: 620px){body{ font-size: 1rem; }.goals{ --spalten: 1; }.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); }.hero__cta .btn{ width: 100%; }}
@media (prefers-reduced-motion: reduce){html{ scroll-behavior: auto; }html.js [data-reveal]{ opacity: 1; translate: none; scale: none; transition: none; }.btn, .goal, .post, .case-sm{ transition: none; }.hero__particles{ display: none; }.nav__inner::before{ 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; }.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; }.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; }
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; }}
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);
}
@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;
}}
.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; }
.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){.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; }.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; }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; }.post, .case-sm, .quote, .stat, .op{ rotate: none !important; }.goal, .post, .case-sm, .quote, .stat, .op{ transition: none; }.footer__word-fill{ transition: none; clip-path: inset(-5% 0% -5% 0); }}
.page-hero{
position: relative;
background: var(--dark);
color: #fff;
min-height: 100vh;
min-height: 100svh;
display: grid;
align-items: center;
padding: clamp(7rem, 12vh, 9rem) 0 clamp(4rem, 8vh, 6rem);
overflow-x: clip;
text-align: center;
}
.page-hero .hero__particles{ z-index: 1; }
.page-hero__inner{
position: relative;
z-index: 2;
max-width: 58rem;
margin-inline: auto;
}
.page-hero .krumen ol{ justify-content: center; }
.page-hero .hero__cta{ justify-content: center; }
.page-hero h1{
font-size: clamp(2rem, 4.4vw, 3.3rem);
font-stretch: 102%;
letter-spacing: -0.026em;
margin-top: 0.2rem;
}
.page-hero__text{
font-size: clamp(1.05rem, 1.5vw, 1.2rem);
color: var(--dark-text);
max-width: 42em;
margin: 1.2rem auto 0;
}
.page-hero .hero__cta{ margin-top: 2rem; }
.page-hero::after{
content: "";
position: absolute;
inset: auto 0 0 0;
height: 120px;
background: linear-gradient(180deg, transparent, rgba(245, 247, 251, 0.06));
pointer-events: none;
}
.krumen ol{
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.7rem;
list-style: none;
font-family: var(--font-mono);
font-size: 0.76rem;
color: #8b98af;
margin-bottom: 1.4rem;
}
.krumen li + li::before{ content: "/"; margin-right: 0.7rem; color: rgba(255, 255, 255, 0.25); }
.krumen a{ color: #7fd0e0; transition: color 0.15s ease; }
.krumen a:hover{ color: #fff; }
.krumen [aria-current]{ color: var(--dark-text); }
.prosa{ max-width: 46rem; }
.prosa > * + *{ margin-top: 1.1rem; }
.prosa h3{
font-size: clamp(1.2rem, 1.9vw, 1.5rem);
font-weight: 700;
letter-spacing: -0.015em;
margin-top: 2.2rem;
}
.prosa p{ color: var(--ink-2); }
.section--dark .prosa p{ color: var(--dark-text); }
.prosa .ticks{ margin-top: 1rem; }
.prosa strong{ font-weight: 660; color: var(--ink); }
.prosa__bild{
margin-top: 1.8rem;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-lg);
}
.prosa__bild img{ width: 100%; }
.faq{ display: grid; gap: 0.7rem; max-width: 52rem; margin-inline: auto; }
.faq__item{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0 1.4rem;
transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.faq__item[open]{ border-color: rgba(47, 163, 186, 0.45); box-shadow: var(--shadow); }
.faq__item summary{
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.15rem 0;
font-weight: 620;
font-size: 1.04rem;
cursor: pointer;
list-style: none;
}
.faq__item summary::-webkit-details-marker{ display: none; }
.faq__item summary::after{
content: "";
flex: none;
width: 11px; height: 11px;
border-right: 2px solid var(--teal-ink);
border-bottom: 2px solid var(--teal-ink);
rotate: 45deg;
transition: rotate 0.3s ease;
}
.faq__item[open] summary::after{ rotate: -135deg; }
.faq__item p{ color: var(--ink-2); padding-bottom: 1.2rem; max-width: 44em; }
a.case-sm{ display: block; }
a.case-sm::after{
content: "Weiterlesen →";
display: block;
margin-top: 0.9rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--blue);
}
@media (max-width: 620px){.page-hero{ padding-top: 7rem; }.page-hero h1{ font-size: clamp(1.8rem, 7.6vw, 2.2rem); }}
@media (prefers-reduced-motion: reduce){.faq__item, .faq__item summary::after{ transition: none; }.page-hero .hero__particles{ display: none; }}
.abc{
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-bottom: clamp(2rem, 4vw, 3rem);
padding-bottom: 1.4rem;
border-bottom: 1px solid var(--line);
}
.abc a{
display: grid;
place-items: center;
min-width: 40px;
height: 40px;
padding-inline: 0.5rem;
border-radius: 10px;
border: 1px solid var(--line);
background: var(--surface);
font-family: var(--font-mono);
font-size: 0.88rem;
font-weight: 600;
color: var(--blue);
transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
}
.abc a:hover{
transform: translateY(-3px);
border-color: transparent;
background: var(--grad);
color: #fff;
box-shadow: 0 10px 24px -10px rgba(47, 77, 158, 0.55);
}
.abc__gruppe{ margin-bottom: clamp(2rem, 4vw, 3.2rem); scroll-margin-top: 120px; }
.abc__titel{
font-family: var(--font-mono);
font-size: 1.5rem;
font-weight: 600;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
margin-bottom: 1.1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--line);
}
.abc__liste{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 0.7rem;
}
.abc__eintrag{
display: flex;
flex-direction: column;
gap: 0.3rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 1rem 1.15rem;
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, box-shadow 0.3s ease;
}
.abc__eintrag:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.5);
box-shadow: var(--shadow);
}
.abc__eintrag b{ font-size: 1rem; font-weight: 660; letter-spacing: -0.01em; }
.abc__eintrag span{
font-size: 0.9rem;
line-height: 1.5;
color: var(--ink-2);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
@media (prefers-reduced-motion: reduce){.abc a, .abc__eintrag{ transition: none; }.abc a:hover, .abc__eintrag:hover{ transform: none; }}
.section--lese{ padding: clamp(3rem, 5.5vw, 5rem) 0; }
.prosa--lang{ max-width: 44rem; }
.prosa--lang h2{
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-weight: 720;
letter-spacing: -0.02em;
line-height: 1.18;
margin-top: 2.8rem;
}
.prosa--lang > h2:first-child{ margin-top: 0; }
.prosa--lang h3{
font-size: clamp(1.1rem, 1.7vw, 1.32rem);
margin-top: 1.9rem;
}
.prosa--lang p + p{ margin-top: 0.9rem; }
.prosa--lang .ticks{ margin-block: 1.2rem; }
.prosa--lang .prosa__bild{ margin-block: 1.8rem; }
.section--lese + .section--lese{ padding-top: 0; }
.section--lese:not(.section--tint) + .section--lese.section--tint,
.section--lese.section--tint + .section--lese:not(.section--tint){ padding-top: clamp(3rem, 5.5vw, 5rem); }
.goal{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon titel"
"text text"
"link link";
column-gap: 0;
row-gap: 0.8rem;
align-items: center;
border-radius: calc(var(--radius) + 2px);
padding: 1.7rem 1.6rem 1.5rem;
transition:
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.goal__title{ grid-area: titel; }
.goal__text{ grid-area: text; }
.goal__link{ grid-area: link; }
@media (hover: hover){.goal{
transition:
transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.4s ease,
background-color 0.4s ease;
}.goal:hover{
transform: translateY(-4px);
box-shadow: 0 4px 10px rgba(12, 22, 38, 0.05), 0 26px 56px -22px rgba(34, 58, 124, 0.32);
}.goals.sp-2 .goal > .goal__num.goal__num{
transition:
background 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
border-color 0.5s ease,
color 0.5s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}.goals.sp-2 .goal:hover > .goal__num{ transform: rotate(-5deg) scale(1.06); }}
.goal{ background: var(--surface); border: 1px solid var(--line); }
.goal__title{ line-height: 1.25; padding-right: 2.1rem; }
.goal__title{ font-size: 1.22rem; letter-spacing: -0.018em; }
.goal__text{ position: relative; z-index: 1; }
.goal__link{
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding-top: 0.3rem;
}
.goal__link::after{
content: "→";
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){.goal:hover .goal__link::after{ transform: translateX(5px); }}
.goal::after{
inset: 0;
top: 0;
bottom: 0;
height: auto;
width: auto;
border-radius: inherit;
padding: 1.6px;
background: linear-gradient(170deg,
#3fd6e8 0%,
var(--blue) 22%,
rgba(47, 77, 158, 0.35) 48%,
transparent 78%);
-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;
transform: none;
opacity: 0;
transition: opacity 0.5s ease;
}
@media (hover: hover){.goal:hover::after{ opacity: 1; }}
@media (prefers-reduced-motion: reduce){.goal, .goal__num, .goal__icon, .goal__link::after{ transition: none; }.goal:hover{ transform: none; }.goal:hover .goal__num{ transform: none; }.goal:hover .goal__link::after{ transform: none; }}
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;
}}
.cases{ perspective: 1400px; }
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;
}}
@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; }}
.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;
}
@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; }}
@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; }}
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));
}
.case--split{ align-items: start; }
@media (min-width: 861px){.case--split .case__visual{ position: sticky; top: 6rem; }}
.case--split .case__copy h3{ font-size: clamp(1.45rem, 2.4vw, 2rem); margin-bottom: 0.9rem; }
.case--split .case__copy p + p{ margin-top: 0.85rem; }
.case--flip .case__visual{ order: 2; }
.bildrahmen{
margin: 0;
border-radius: calc(var(--radius) - 2px);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg);
box-shadow: var(--shadow);
}
.bildrahmen img{ display: block; width: 100%; height: auto; }
.lkarten{
--spalten: 3;
--luecke: clamp(1rem, 1.8vw, 1.6rem);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.lkarten > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.lkarte{
position: relative;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 2.4vw, 2.1rem);
box-shadow: var(--shadow);
overflow: hidden;
}
.lkarte::after{
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 2px;
background: linear-gradient(90deg, transparent, var(--teal), var(--blue), transparent);
opacity: 0;
transition: opacity 0.35s ease;
}
.lkarte__label{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.5rem;
}
.lkarte h3{ font-size: 1.2rem; margin-bottom: 0.6rem; }
.lkarte__text{ color: var(--ink-2); margin-bottom: 0.9rem; }
.lkarte .ticks{ margin-top: 0; }
.lkarte .ticks + .lkarte__text{ margin-top: 0.9rem; }
.ticks--klein li{ font-size: 0.95rem; padding-left: 1.5rem; }
.galerie{
--spalten: 3;
--luecke: clamp(0.9rem, 1.6vw, 1.4rem);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.galerie > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.galerie__bild{
margin: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: var(--bg);
box-shadow: var(--shadow);
}
.galerie__bild img{
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.tabellenrahmen{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
overflow-x: auto;
}
.tabelle{ width: 100%; border-collapse: collapse; min-width: 480px; }
.tabelle th, .tabelle td{
padding: 0.9rem 1.1rem;
text-align: left;
border-bottom: 1px solid var(--line);
}
.tabelle th{
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal-ink);
background: var(--bg);
}
.tabelle td{ color: var(--ink-2); }
.tabelle tr:last-child td{ border-bottom: 0; }
@media (hover: hover){.tabelle tbody tr{ transition: background-color 0.25s ease; }.tabelle tbody tr:hover{ background: var(--bg); }}
@media (hover: hover){.lkarte{ transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease, border-color 0.8s ease; }.lkarte:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: rgba(47, 163, 186, 0.4);
}.lkarte:hover::after{ opacity: 1; }.galerie__bild{ transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease; }.galerie__bild:hover{ transform: translateY(-5px); box-shadow: var(--shadow-lg); }.galerie__bild img{ transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }.galerie__bild:hover img{ transform: scale(1.04); }}
@media (max-width: 860px){.case--flip .case__visual{ order: 0; }}
@media (prefers-reduced-motion: reduce){.lkarte, .galerie__bild, .galerie__bild img{ transition: none; }.lkarte:hover, .galerie__bild:hover{ transform: none; }.galerie__bild:hover img{ transform: none; }}
.sp-1.sp-1{ --spalten: 1; }
.sp-2.sp-2{ --spalten: 2; }
.sp-3.sp-3{ --spalten: 3; }
.sp-4.sp-4{ --spalten: 4; }
@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; }}
.preise{
--spalten: 4;
--luecke: clamp(0.9rem, 1.5vw, 1.4rem);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
align-items: stretch;
}
.preise > *{
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.preis{
position: relative;
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.4rem, 2vw, 1.9rem);
box-shadow: var(--shadow);
}
.preis--hervor{
border-color: transparent;
background:
linear-gradient(var(--surface), var(--surface)) padding-box,
var(--grad) border-box;
box-shadow: var(--shadow-lg);
}
.preis__marke{
position: absolute;
top: -0.7rem;
left: 50%;
translate: -50% 0;
padding: 0.28rem 0.85rem;
border-radius: 999px;
background: var(--grad);
color: #fff;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
.preis__label{
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.45rem;
}
.preis__name{ font-size: 1.35rem; margin-bottom: 0.5rem; }
.preis__text{ color: var(--ink-2); font-size: 0.94rem; margin-bottom: 1rem; }
.preis__betrag{
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.45rem 0.5rem;
margin-bottom: 0.25rem;
}
.preis__vorher{ flex-basis: 100%; }
.preis__betrag b{ white-space: nowrap; }
.preis__einheit{ white-space: nowrap; }
.preis__vorher{ color: var(--ink-2); font-size: 0.9rem; }
.preis__betrag b{
font-size: clamp(1.5rem, 2.4vw, 1.95rem);
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.preis__einheit{ color: var(--ink-2); font-size: 0.85rem; }
.preis__ersparnis{
display: inline-block;
align-self: flex-start;
margin-bottom: 1rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: rgba(47, 163, 186, 0.12);
color: var(--teal-ink);
font-size: 0.78rem;
font-weight: 600;
}
.preis .ticks{ margin-top: 0; margin-bottom: 1.3rem; }
.preis__cta{ margin-top: auto; width: 100%; justify-content: center; }
.preise__hinweis{
margin-top: 1.6rem;
text-align: center;
color: var(--ink-2);
font-size: 0.9rem;
}
@media (hover: hover){.preis{ transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease, border-color 0.7s ease; }.preis:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }.preis:not(.preis--hervor):hover{ border-color: rgba(47, 163, 186, 0.45); }}
@media (max-width: 720px){.preise{ --spalten: 1; }}
@media (prefers-reduced-motion: reduce){.preis{ transition: none; }.preis:hover{ transform: none; }}
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;
}
.goal__bild, .lkarte__bild{
display: block;
margin: -0.4rem 0 1rem;
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--bg);
border: 1px solid var(--line);
}
.lkarte__bild{ margin: -0.4rem 0 1.1rem; }
.goal__bild img, .lkarte__bild img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.goal__bild + .goal__num{ top: 1rem; }
@media (hover: hover){.goal__bild img, .lkarte__bild img{ transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }.goal:hover .goal__bild img, .lkarte:hover .lkarte__bild img{ transform: scale(1.05); }}
@media (prefers-reduced-motion: reduce){.goal__bild img, .lkarte__bild img{ transition: none; }.goal:hover .goal__bild img, .lkarte:hover .lkarte__bild img{ transform: none; }}
.preis{ gap: 0; }
.preis__label{ margin-bottom: 0.5rem; }
.preis__name{ font-size: clamp(1.15rem, 1.8vw, 1.4rem); letter-spacing: -0.015em; }
.preis__text{ margin-top: 0.4rem; color: var(--ink-2); line-height: 1.6; }
.preis__betrag{ margin-top: 0.9rem; }
.preis__ersparnis{ margin-top: 0.5rem; }
.preis .ticks{
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
}
.preis .ticks li{ margin-bottom: 0.45rem; }
.preis .ticks{ margin-bottom: 1.3rem; }
.preis__cta{
margin-top: auto;
width: 100%;
justify-content: center;
}
@media (min-width: 900px){.preise.sp-2 .preis{ padding: clamp(1.6rem, 2.2vw, 2.2rem); }}
.goal--mitbild{
grid-template-areas:
"bild bild"
"icon titel"
"text text"
"link link";
}
.goal--mitbild .goal__bild{ grid-area: bild; width: 100%; }
.goal--mitbild .goal__title{ grid-column: 1 / -1; }
.preis__label{
display: inline-block;
align-self: flex-start;
padding: 0.26rem 0.7rem;
border-radius: 999px;
background: rgba(47, 163, 186, 0.1);
border: 1px solid rgba(47, 163, 186, 0.22);
margin-bottom: 0.75rem;
}
.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; }}
.leistung{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.8rem, 4vw, 3.5rem);
align-items: start;
}
.leistung--flip .leistung__text{ order: 2; }
.leistung__text h2{ margin-bottom: 1rem; }
.leistung__text .kicker{ margin-bottom: 0.7rem; }
.leistung__text p + p{ margin-top: 0.9rem; }
.leistung__text > p{ color: var(--ink-2); }
.leistung__liste{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.5rem, 2.6vw, 2.2rem);
box-shadow: var(--shadow);
}
.section--tint .leistung__liste{ background: #fff; }
.leistung__listentitel{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 1rem;
}
.leistung__liste .ticks{ margin-top: 0; }
@media (max-width: 900px){.leistung{ grid-template-columns: 1fr; }.leistung--flip .leistung__text{ order: 0; }}
.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 (min-width: 1100px){.team--gross .teamer{
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 17.5rem;
padding: 1.6rem 2rem 1.6rem calc(14rem + 2rem);
text-align: left;
}.team--gross .teamer__bild{
position: absolute;
inset: 0 auto 0 0;
width: 14rem;
margin: 0;
}.team--gross .teamer__bild img,
.team--gross .teamer__bild--platzhalter{
aspect-ratio: auto;
width: 100%;
height: 100%;
object-fit: cover;
}.team--gross .teamer__name,
.team--gross .teamer__rolle,
.team--gross .teamer__motto{ margin-inline: 0; }.team--gross .teamer__name{ font-size: 1.4rem; margin-block: 0 0.35rem; }.team--gross .teamer__rolle{ margin-block: 0 0.7rem; }}
@media (max-width: 1080px){.team.team--gross.team--gross{ --spalten: 2; }}
@media (max-width: 640px){.team.team--gross.team--gross{ --spalten: 1; }}
.teamer{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 0 0 1.4rem;
overflow: hidden;
box-shadow: var(--shadow);
text-align: center;
}
.teamer__bild{ margin: 0 0 1rem; background: var(--bg); }
.teamer__bild img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 5;
object-fit: cover;
object-position: center 20%;
}
.teamer__name{ font-size: 1.15rem; margin: 0 1rem 0.2rem; }
.teamer__rolle{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
margin: 0 1rem 0.7rem;
}
@media (hover: hover){.teamer{ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.35s ease; }.teamer:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }.teamer__bild img{ transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }.teamer:hover .teamer__bild img{ transform: scale(1.05); }}
@media (max-width: 1080px){.team.team{ --spalten: 3; }}
@media (max-width: 780px){.team.team{ --spalten: 2; }}
@media (prefers-reduced-motion: reduce){.teamer, .teamer__bild img{ transition: none; }.teamer:hover{ transform: none; }.teamer:hover .teamer__bild img{ transform: none; }}
.section--lese .prosa--lang{ margin-inline: auto; }
.prosa--lang h3{
margin-top: 3.4rem;
padding-top: 1.7rem;
border-top: 1px solid var(--line);
}
.prosa--lang h3:first-child{ margin-top: 0; padding-top: 0; border-top: 0; }
.prosa--lang h2 + h3{ margin-top: 1.6rem; padding-top: 0; border-top: 0; }
.section--lese .prosa--lang .ticks{
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: clamp(1.2rem, 2vw, 1.7rem) clamp(1.2rem, 2vw, 1.8rem);
box-shadow: var(--shadow);
margin-top: 1.4rem;
}
.section--lese.section--tint .prosa--lang .ticks{ background: #fff; }
.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; }}
.preisgruppen > .wrap{ max-width: min(1460px, 94vw); }
.preislayout{
display: grid;
grid-template-columns: 17.5rem minmax(0, 1fr);
gap: clamp(1.6rem, 3vw, 3rem);
align-items: start;
}
.reiter{
position: sticky;
top: 6rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
padding: 0.85rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.reiter__titel{
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
padding: 0.3rem 0.7rem 0.6rem;
}
.reiter__knopf{
display: flex;
align-items: center;
gap: 0.55rem;
width: 100%;
padding: 0.7rem 0.8rem;
border: 0;
border-radius: 11px;
background: transparent;
color: var(--ink-2);
font-family: inherit;
font-size: 0.92rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background-color 0.28s ease, color 0.22s ease, box-shadow 0.28s ease;
}
.reiter__icon{ font-size: 1.1em; line-height: 1; flex: 0 0 auto; }
.reiter__text{
flex: 1 1 auto;
min-width: 0;
overflow-wrap: break-word;
hyphens: auto;
line-height: 1.25;
}
.reiter__zahl{
flex: 0 0 auto;
min-width: 1.6em;
padding: 0.1rem 0.4rem;
border-radius: 999px;
background: rgba(12, 22, 38, 0.07);
color: var(--ink-2);
font-family: var(--font-mono);
font-size: 0.72rem;
text-align: center;
transition: background-color 0.28s ease, color 0.22s ease;
}
.reiter__knopf:hover{ color: var(--ink); background: rgba(47, 163, 186, 0.09); }
.reiter__knopf.is-aktiv{
background: var(--grad);
color: #fff;
box-shadow: 0 8px 20px -10px rgba(34, 58, 124, 0.65);
}
.reiter__knopf.is-aktiv .reiter__zahl{ background: rgba(255, 255, 255, 0.22); color: #fff; }
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; }
.preisgruppe__intro{
margin: 0 0 clamp(1.4rem, 2.5vw, 2rem);
color: var(--ink-2);
max-width: 46rem;
}
.preisblock__kopf{ margin: clamp(1.8rem, 3vw, 2.6rem) 0 clamp(1rem, 1.8vw, 1.5rem); }
.preisblock__kopf h3{ font-size: clamp(1.2rem, 1.9vw, 1.5rem); margin-bottom: 0.35rem; }
.preisblock__kopf p{ color: var(--ink-2); max-width: 44rem; }
.preisgruppe .preise + .preisblock__kopf{ margin-top: clamp(2.2rem, 3.6vw, 3rem); }
.preisinhalt .preise{ --spalten: 2; }
@media (max-width: 780px){.preisinhalt .preise, .preisinhalt .preise.preise{ --spalten: 1; }}
@media (prefers-reduced-motion: reduce){html.js .preisgruppe.is-aktiv{ animation: none; }.reiter__knopf, .reiter__zahl{ transition: none; }}
@media (max-width: 1080px){.preislayout{ grid-template-columns: 1fr; }.reiter{
position: static;
flex-direction: row;
flex-wrap: nowrap;
gap: 0.4rem;
padding: 0.45rem;
border-radius: 999px;
overflow-x: auto;
scrollbar-width: none;
}.reiter::-webkit-scrollbar{ display: none; }.reiter__titel{ display: none; }.reiter__knopf{ width: auto; white-space: nowrap; border-radius: 999px; }.reiter__zahl{ display: none; }.preisinhalt .preise{ --spalten: 2; }}
.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 (hover: hover){.leistung__liste:hover{
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: rgba(47, 163, 186, 0.35);
}.tabelle tbody tr:hover{ background: rgba(47, 163, 186, 0.06); }}
@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; }.leistung__liste:hover{ transform: none; }}
#faq .section__head{ text-align: center; margin-inline: auto; max-width: 52rem; }
#faq .section__head .kicker{ display: inline-flex; align-items: center; }
#faq .section__head .section__intro{ margin-inline: auto; }
.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; }
.sp-2 > :last-child:nth-child(odd),
.sp-3 > :last-child:nth-child(3n + 1),
.sp-4 > :last-child:nth-child(4n + 1){ flex-basis: 100%; }
.preisinhalt .preise > :last-child:nth-child(odd){ flex-basis: 100%; }
@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%; }.lkarten.sp-3 > :last-child:nth-child(3n + 1),
.lkarten.sp-4 > :last-child:nth-child(4n + 1),
.preise.sp-3 > :last-child:nth-child(3n + 1),
.preise.sp-4 > :last-child:nth-child(4n + 1),
.steps.sp-3 > :last-child:nth-child(3n + 1),
.steps.sp-4 > :last-child:nth-child(4n + 1){ flex-basis: auto; }}
.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));
}
@media (max-width: 780px){.sp-2:not(.team) > :last-child,
.sp-3:not(.team) > :last-child,
.sp-4:not(.team) > :last-child{ flex-basis: 100%; }.preisinhalt .preise.preise.preise > :last-child{ flex-basis: 100%; }}
.weiterkat{
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
margin-top: clamp(2rem, 3.5vw, 3rem);
padding: 1.15rem 1.5rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
font-family: inherit;
text-align: left;
cursor: pointer;
transition:
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.4s ease,
border-color 0.32s ease;
}
.weiterkat__label{
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
flex: 0 0 auto;
}
.weiterkat__name{
flex: 1 1 auto;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1.05rem;
font-weight: 650;
color: var(--ink);
}
.weiterkat__pfeil{
flex: 0 0 auto;
width: 22px;
height: 22px;
color: var(--blue);
transition: translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){.weiterkat:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
border-color: rgba(47, 163, 186, 0.45);
}.weiterkat:hover .weiterkat__pfeil{ translate: 5px 0; }}
@media (max-width: 640px){.weiterkat{ flex-wrap: wrap; gap: 0.35rem 0.8rem; }.weiterkat__label{ flex: 1 0 100%; }}
@media (prefers-reduced-motion: reduce){.weiterkat, .weiterkat__pfeil{ transition: none; }.weiterkat:hover{ transform: none; }.weiterkat:hover .weiterkat__pfeil{ translate: none; }}
.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__bezel img[src*="hochzeitsplanung-hamburg"]{
object-position: 22% center;
}
.pv3-laptop__bezel img[src*="ibons"]{ 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;
}
.kform{
max-width: 52rem;
margin: 0 auto;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: clamp(1.4rem, 3vw, 2.4rem);
}
.kform__falle{
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.kform__reihe{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 clamp(1rem, 2vw, 1.6rem);
}
.kfeld{ margin: 0 0 1.1rem; }
.kfeld label{
display: block;
font-size: 0.92rem;
font-weight: 600;
margin-bottom: 0.4rem;
color: var(--ink);
}
.kfeld input[type="text"],
.kfeld input[type="email"],
.kfeld input[type="tel"],
.kfeld select,
.kfeld textarea{
width: 100%;
font: inherit;
color: var(--ink);
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.75rem 0.9rem;
transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.kfeld textarea{ resize: vertical; min-height: 8rem; }
.kfeld--haken label{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 0.6rem;
align-items: start;
font-weight: 400;
font-size: 0.92rem;
line-height: 1.5;
color: var(--ink-2);
}
.kfeld--haken input{ margin-top: 0.2rem; width: 1.05rem; height: 1.05rem; accent-color: var(--teal); }
.kfeld__fehler{
display: block;
min-height: 0;
margin-top: 0.35rem;
font-size: 0.85rem;
color: #c0392b;
}
.kfeld.is-fehler input,
.kfeld.is-fehler textarea,
.kfeld.is-fehler select{ border-color: #c0392b; }
.kform__fuss{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 1.2rem;
margin-top: 0.4rem;
}
.kform__hinweis{ margin: 0; font-size: 0.85rem; color: var(--ink-2); flex: 1 1 14rem; }
.kform__senden[disabled]{ opacity: 0.6; cursor: progress; }
.kform__meldung{
margin: 1.2rem 0 0;
padding: 0.9rem 1.1rem;
border-radius: var(--radius-sm);
font-size: 0.95rem;
border: 1px solid var(--line);
}
.kform__meldung.is-gut{ border-color: rgba(45, 176, 190, 0.45); background: rgba(45, 176, 190, 0.1); color: var(--teal-ink); }
.kform__meldung.is-schlecht{ border-color: rgba(192, 57, 43, 0.4); background: rgba(192, 57, 43, 0.07); color: #a3301f; }
@media (max-width: 640px){.kform__reihe{ grid-template-columns: 1fr; }}
@media (min-width: 900px){h2.h2--einzeilig.h2--einzeilig{ white-space: nowrap; max-width: none; width: max-content; margin-inline: auto; }}
.section__head--weit{ max-width: 62rem; }
h1, h2, h3, .teamer__name, .lkarte h3, .goal__title{
hyphens: auto;
overflow-wrap: break-word;
}
.footer__col a{ hyphens: auto; }
.lexsuche{ max-width: 40rem; margin: 0 auto 2rem; }
.lexsuche__label{
display: block;
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.6rem;
text-align: center;
}
.lexsuche__feld{ position: relative; display: flex; align-items: center; }
.lexsuche__lupe{
position: absolute;
left: 1rem;
width: 20px;
height: 20px;
color: var(--ink-2);
pointer-events: none;
}
.lexsuche__feld input{
width: 100%;
font: inherit;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
border-radius: 999px;
padding: 0.85rem 3rem 0.85rem 3rem;
box-shadow: var(--shadow);
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lexsuche__feld input::-webkit-search-cancel-button{ display: none; }
.lexsuche__leeren{
position: absolute;
right: 0.8rem;
width: 1.9rem;
height: 1.9rem;
display: grid;
place-items: center;
font-size: 1.3rem;
line-height: 1;
color: var(--ink-2);
background: transparent;
border: 0;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.lexsuche__leeren:hover{ background: var(--bg); color: var(--ink); }
.lexsuche__treffer{
margin: 0.7rem 0 0;
text-align: center;
font-family: var(--font-mono);
font-size: 0.8rem;
color: var(--ink-2);
min-height: 1.2em;
}
.lexsuche__leer{
margin: 2rem auto;
max-width: 34rem;
text-align: center;
color: var(--ink-2);
}
.abc a[hidden]{ display: none; }
.lexdef{
position: relative;
max-width: 46rem;
margin: 0 auto;
padding: clamp(1.5rem, 3vw, 2.4rem);
padding-left: clamp(1.9rem, 3.4vw, 2.8rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.lexdef::before{
content: "";
position: absolute;
inset: 0 auto 0 0;
width: 4px;
background: var(--grad);
}
.lexdef__kopf{
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.5rem 0.9rem;
margin-bottom: 0.9rem;
}
.lexdef__marke{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--teal-ink);
}
.lexdef__begriff{ font-size: 1.05rem; color: var(--ink); }
.lexdef__text{
margin: 0;
font-size: clamp(1.05rem, 0.98rem + 0.35vw, 1.25rem);
line-height: 1.6;
color: var(--ink);
}
@media (max-width: 700px){.hero__cta{ margin-top: 2.4rem; gap: 0.8rem; }.hero__cta .btn{ width: 100%; justify-content: center; }}
.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; }}
.nav__mobile{
max-height: calc(100svh - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px){.hero__cta{ justify-content: center; width: 100%; }.hero__cta{ margin-top: clamp(1.6rem, 4vh, 3rem); gap: 0.8rem; }}
@media (max-width: 700px) and (max-height: 700px){.hero__cta .btn{ padding-block: 0.7rem; }}
.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);
}
@property --oeffnung{
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
@media (min-width: 861px){html.js .cores-stack .core:nth-of-type(4){ --si: 3; }}
@media (hover: hover){.fall:hover :is(.fall__nr, .fall__haupt){ translate: 12px 0; }}
.fall:focus-visible :is(.fall__nr, .fall__haupt){ translate: 12px 0; }
.termin{
position: relative;
min-height: 640px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
.termin__platz{
display: grid;
place-content: center;
justify-items: center;
gap: 0.5rem;
min-height: 640px;
padding: clamp(1.5rem, 4vw, 3rem);
text-align: center;
}
.termin__icon{
display: grid;
place-items: center;
width: 64px;
height: 64px;
margin-bottom: 0.6rem;
border-radius: 18px;
color: #fff;
background: var(--grad);
}
.termin__icon svg{ width: 30px; height: 30px; }
.termin__titel{ font-size: 1.2rem; font-weight: 650; letter-spacing: -0.01em; }
.termin__text{ max-width: 46ch; color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.termin__platz .btn{ margin-top: 0.9rem; }
.termin__klein{ margin-top: 0.4rem; font-size: 0.85rem; color: var(--ink-2); }
.termin__klein a{ color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.termin.ist-geladen{ min-height: 660px; }
@media (max-width: 620px){.termin, .termin__platz{ min-height: 560px; }}
.logos__grid--voll{
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.7rem;
margin-top: clamp(1.2rem, 3vw, 2rem);
}
.logos__grid--voll .logos__item{ padding: 0.7rem 0.9rem; }
.logos__grid--voll .logos__item img{ max-height: 46px; }
@media (max-width: 620px){.logos__grid--voll{ grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 0.5rem; }.logos__grid--voll .logos__item img{ max-height: 36px; }}
.fakten{ padding: clamp(1.6rem, 3vw, 2.4rem) 0; }
.fakten__band{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
gap: clamp(0.8rem, 2vw, 1.6rem);
padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.2rem, 3vw, 2.2rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.fakten__punkt{
display: grid;
gap: 0.2rem;
padding-left: clamp(0.8rem, 2vw, 1.6rem);
border-left: 1px solid var(--line);
}
.fakten__punkt:first-child{ border-left: 0; padding-left: 0; }
.fakten__punkt b{
font-size: clamp(1.5rem, 2.6vw, 2rem);
font-weight: 750;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
}
.fakten__punkt span{ font-size: 0.92rem; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 620px){.fakten__punkt{ border-left: 0; padding-left: 0; }.fakten__punkt + .fakten__punkt{ padding-top: 0.9rem; border-top: 1px solid var(--line); }}
.ukarten{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
gap: clamp(0.9rem, 2vw, 1.4rem);
margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.ukarte{
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
color: inherit;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
@media (hover: hover){a.ukarte:hover{
transform: translateY(-5px);
border-color: rgba(47, 163, 186, 0.45);
box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 30px 54px -26px rgba(34, 58, 124, 0.34);
}a.ukarte:hover .ukarte__pfeil{ background: var(--grad); border-color: transparent; color: #fff; }a.ukarte:hover .ukarte__bild img{ transform: scale(1.03); }}
.ukarte__bild{
display: block;
overflow: hidden;
background: linear-gradient(160deg, #eef3fb, #e2eaf6);
border-bottom: 1px solid var(--line);
}
.ukarte__bild img{
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.ukarte__text{
display: flex;
flex-direction: column;
gap: 0.3rem;
padding: clamp(1rem, 2.2vw, 1.4rem);
flex: 1;
}
.ukarte__chip{
align-self: flex-start;
margin-bottom: 0.45rem;
padding: 0.3rem 0.7rem;
border: 1px solid rgba(34, 58, 124, 0.18);
border-radius: 99px;
background: rgba(34, 58, 124, 0.08);
font-size: 0.74rem;
font-weight: 650;
letter-spacing: 0.02em;
color: #22397c;
}
.ukarte__titel{ font-size: 1.1rem; font-weight: 650; letter-spacing: -0.015em; }
.ukarte__unter{ font-size: 0.95rem; color: var(--blue); }
.ukarte__lead{ margin-top: 0.35rem; font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
.ukarte__pfeil{
display: grid;
place-items: center;
width: 36px;
height: 36px;
margin-top: auto;
padding-top: 0;
border: 1px solid var(--line);
border-radius: 50%;
color: var(--blue);
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.ukarte__pfeil svg{ width: 16px; height: 16px; }
.ukarte__lead + .ukarte__pfeil{ margin-top: 1rem; }
@media (prefers-reduced-motion: reduce){.ukarte, .ukarte__bild img, .ukarte__pfeil{ transition: none; }}
.reel__ton{
position: absolute;
right: 0.6rem;
bottom: 0.6rem;
display: grid;
place-items: center;
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(9, 16, 30, 0.62);
backdrop-filter: blur(6px);
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.reel__ton svg{ width: 18px; height: 18px; }
.reel__ton:hover{ background: rgba(9, 16, 30, 0.85); transform: scale(1.06); }
.reel__ton[data-an="ja"]{ background: var(--grad); }
.steps--zickzack{
position: relative;
display: grid;
gap: clamp(1rem, 2.4vw, 1.8rem);
max-width: 940px;
margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
counter-reset: schritt;
}
.steps--zickzack::before{
content: "";
position: absolute;
top: 0.6rem;
bottom: 0.6rem;
left: 50%;
width: 2px;
margin-left: -1px;
background: linear-gradient(180deg, transparent, var(--line) 12%, var(--line) 88%, transparent);
}
.steps--zickzack .step{
position: relative;
width: calc(50% - clamp(1.4rem, 3vw, 2.4rem));
padding: clamp(1.1rem, 2.4vw, 1.6rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.steps--zickzack .step:nth-child(odd){ justify-self: start; }
.steps--zickzack .step:nth-child(even){ justify-self: end; }
.steps--zickzack .step::after{
content: "";
position: absolute;
top: clamp(1.4rem, 2.6vw, 1.9rem);
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--grad);
box-shadow: 0 0 0 4px var(--bg);
}
.steps--zickzack .step:nth-child(odd)::after{ right: calc(-1 * clamp(1.4rem, 3vw, 2.4rem) - 5px); }
.steps--zickzack .step:nth-child(even)::after{ left: calc(-1 * clamp(1.4rem, 3vw, 2.4rem) - 5px); }
.steps--zickzack .step__num{ color: #fff; }
@media (max-width: 760px){.steps--zickzack::before{ left: 9px; }.steps--zickzack .step{ width: calc(100% - 2rem); margin-left: 2rem; }.steps--zickzack .step:nth-child(odd)::after,
.steps--zickzack .step:nth-child(even)::after{ left: -2.35rem; right: auto; }}
.hoer{
display: flex;
align-items: center;
gap: clamp(0.9rem, 2vw, 1.5rem);
max-width: 760px;
margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
padding: clamp(1rem, 2.2vw, 1.5rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
}
.hoer__knopf{
flex: 0 0 auto;
display: grid;
place-items: center;
width: 58px;
height: 58px;
border: 0;
border-radius: 50%;
color: #fff;
background: var(--grad);
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hoer__knopf:hover{ transform: scale(1.05); box-shadow: 0 12px 26px -12px rgba(34, 58, 124, 0.6); }
.hoer__knopf svg{ width: 24px; height: 24px; }
.hoer__pause{ display: none; }
.hoer[data-laeuft="ja"] .hoer__play{ display: none; }
.hoer[data-laeuft="ja"] .hoer__pause{ display: block; }
.hoer__mitte{ flex: 1; min-width: 0; }
.hoer__titel{ font-weight: 650; }
.hoer__text{ margin-top: 0.15rem; font-size: 0.9rem; color: var(--ink-2); }
.hoer__zeit{ font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }
@media (max-width: 560px){.hoer{ flex-wrap: wrap; }.hoer__zeit{ width: 100%; text-align: right; }}
.beitraege{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
gap: clamp(0.9rem, 2vw, 1.4rem);
margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.beitrag{
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: clamp(1.1rem, 2.4vw, 1.6rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
color: inherit;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
@media (hover: hover){.beitrag:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.45);
box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 30px 54px -26px rgba(34, 58, 124, 0.34);
}.beitrag:hover .beitrag__mehr svg{ translate: 4px 0; }.beitrag__mehr svg{ transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }}
.beitrag__titel{ font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.35; letter-spacing: -0.015em; }
.beitrag__text{ font-size: 0.93rem; line-height: 1.6; color: var(--ink-2); }
.beitrag__mehr{
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
padding-top: 0.7rem;
font-weight: 600;
font-size: 0.9rem;
color: var(--blue);
}
.beitrag__mehr svg{ width: 16px; height: 16px; transition: translate 0.3s ease; }
.beitrag[hidden]{ display: none; }
@media (prefers-reduced-motion: reduce){.beitrag, .beitrag__mehr svg{ transition: none; }}
.mehr{ display: grid; justify-items: center; gap: 0.6rem; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.mehr__zahl{ font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-2); }
.mehr[hidden]{ display: none; }
.ukarte__lead{ flex: 1; }
.ukarte__fuss{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.7rem;
margin-top: 1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--line);
}
.ukarte__knopf{ gap: 0.4rem; flex: 0 0 auto; }
.ukarte__knopf svg{ width: 15px; height: 15px; transition: translate 0.3s ease; }
.ukarte__knopf:hover svg{ translate: 3px 0; }
.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; }}
.galerie{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
gap: clamp(0.5rem, 1.2vw, 0.9rem);
margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.galerie__feld{
position: relative;
padding: 0;
border: 0;
border-radius: 14px;
overflow: hidden;
background: #dfe7f2;
cursor: zoom-in;
aspect-ratio: 4 / 3;
}
.galerie__feld img{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), filter 0.4s ease;
}
.galerie__feld::after{
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 55%, rgba(9, 16, 30, 0.45));
opacity: 0;
transition: opacity 0.35s ease;
}
@media (hover: hover){.galerie__feld:hover img{ transform: scale(1.06); }.galerie__feld:hover::after{ opacity: 1; }}
.lightbox{
position: fixed;
inset: 0;
z-index: 200;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: clamp(0.5rem, 2vw, 1.5rem);
padding: clamp(1rem, 4vw, 3rem);
background: rgba(6, 12, 24, 0.93);
backdrop-filter: blur(6px);
animation: lb-auf 0.25s ease;
}
.lightbox[hidden]{ display: none; }
.lightbox__buehne{ display: grid; justify-items: center; gap: 0.8rem; min-width: 0; }
.lightbox__buehne img{
max-width: 100%;
max-height: calc(100vh - 9rem);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.8);
}
.lightbox__buehne figcaption{ font-family: var(--font-mono); font-size: 0.8rem; color: rgba(255, 255, 255, 0.66); }
.lightbox__pfeil, .lightbox__zu{
display: grid;
place-items: center;
width: 46px;
height: 46px;
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
color: #fff;
cursor: pointer;
transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox__pfeil:hover, .lightbox__zu:hover{ background: rgba(255, 255, 255, 0.18); transform: scale(1.06); }
.lightbox__pfeil svg, .lightbox__zu svg{ width: 22px; height: 22px; }
.lightbox__zu{ position: absolute; top: clamp(0.8rem, 2vw, 1.6rem); right: clamp(0.8rem, 2vw, 1.6rem); }
@media (max-width: 620px){.lightbox{ grid-template-columns: 1fr; grid-template-rows: 1fr auto; }.lightbox__pfeil{ position: static; }.lightbox__pfeil--vor{ grid-column: 1; grid-row: 2; justify-self: start; }.lightbox__pfeil--zurueck{ grid-column: 1; grid-row: 2; justify-self: end; }.lightbox__buehne{ grid-row: 1; }}
@media (prefers-reduced-motion: reduce){.galerie__feld img, .lightbox{ transition: none; animation: none; }}
.nav__gruppe{ gap: 0; }
.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; }}
.preiskopf{
display: grid;
grid-template-columns: 1fr;
gap: clamp(1.1rem, 2.6vw, 2rem);
align-items: center;
margin-bottom: clamp(1.4rem, 3vw, 2.2rem);
padding-bottom: clamp(1.2rem, 2.6vw, 1.8rem);
border-bottom: 1px solid var(--line);
}
@media (min-width: 900px){.preiskopf{ grid-template-columns: 1.05fr 1fr; }}
.preiskopf__merkmale{
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
margin-top: 0.9rem;
list-style: none;
padding: 0;
}
.preiskopf__merkmale li{
padding: 0.28rem 0.7rem;
border: 1px solid var(--line);
border-radius: 99px;
font-size: 0.8rem;
color: var(--ink-2);
background: var(--surface);
}
.preiskopf__eck{
display: flex;
flex-wrap: wrap;
gap: clamp(1rem, 3vw, 2.2rem);
margin-top: 1.1rem;
}
.preiskopf__eck b{
display: block;
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 750;
letter-spacing: -0.02em;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
}
.preiskopf__eck span{ font-size: 0.82rem; color: var(--ink-2); }
.preiskopf__bild{
padding: clamp(0.9rem, 2vw, 1.3rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(160deg, #101c30, #0b1424);
box-shadow: 0 24px 50px -26px rgba(6, 14, 30, 0.7);
color: #dce6f5;
overflow: hidden;
}
.pvis__kopf{
display: flex;
align-items: center;
gap: 0.45rem;
margin-bottom: 0.8rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(220, 230, 245, 0.55);
}
.pvis__punkt{ width: 9px; height: 9px; border-radius: 50%; background: rgba(220, 230, 245, 0.25); }
.pvis__punkt:first-child{ background: #ff6b6b; }
.pvis__kopf span:last-child{ margin-left: auto; color: #7fd0e0; }
.pvis__code{ font-family: var(--font-mono); font-size: 0.78rem; line-height: 1.7; }
.pvis__code div{ display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.6rem; }
.pvis__code i{ color: rgba(220, 230, 245, 0.3); font-style: normal; }
.pvis__code b{ font-weight: 400; color: #7fd0e0; }
.pvis__code em{ font-style: normal; color: #9fd8a8; }
.pvis__code u{ text-decoration: none; color: #f0c674; }
.pvis__zeile{
display: grid;
grid-template-columns: 1.4rem minmax(0, 1fr) auto;
align-items: center;
gap: 0.6rem;
padding: 0.42rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
font-size: 0.82rem;
}
.pvis__zeile:last-child{ border-bottom: 0; }
.pvis__nr{ font-family: var(--font-mono); font-size: 0.72rem; color: rgba(220, 230, 245, 0.4); }
.pvis__auf{ font-family: var(--font-mono); font-size: 0.74rem; color: #7ee0a8; }
.pvis__balken{ height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.pvis__balken i{ display: block; height: 100%; border-radius: 99px; background: var(--grad); }
.pvis__kacheln{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.pvis__kachel{
padding: 0.6rem 0.7rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.pvis__kachel b{ display: block; font-size: 1.05rem; letter-spacing: -0.01em; color: #fff; }
.pvis__kachel span{ font-size: 0.68rem; color: rgba(220, 230, 245, 0.55); }
.pvis__phones{ display: flex; gap: 0.5rem; justify-content: center; }
.pvis__phone{
flex: 1;
max-width: 92px;
aspect-ratio: 9 / 16;
border-radius: 12px;
background: linear-gradient(170deg, rgba(127, 208, 224, 0.28), rgba(47, 95, 216, 0.22));
border: 1px solid rgba(255, 255, 255, 0.14);
display: grid;
align-content: end;
gap: 4px;
padding: 8px;
}
.pvis__phone i{ display: block; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.5); }
.pvis__phone i:nth-child(2){ width: 70%; }
.pvis__phone i:nth-child(3){ width: 45%; }
.pvis__seite{ display: grid; gap: 0.5rem; }
.pvis__seite .kopfzeile{ height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.09); }
.pvis__seite .reihe{ display: grid; grid-template-columns: 2fr 1fr; gap: 0.5rem; }
.pvis__seite .block{ height: 60px; border-radius: 8px; background: rgba(255, 255, 255, 0.06); }
.pvis__seite .block--akzent{ background: linear-gradient(150deg, rgba(47, 163, 186, 0.35), rgba(47, 95, 216, 0.28)); }
.pvis__seite .zeilen{ display: grid; gap: 5px; }
.pvis__seite .zeilen i{ display: block; height: 7px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); }
.pvis__seite .zeilen i:nth-child(2){ width: 80%; }
.pvis__seite .zeilen i:nth-child(3){ width: 55%; }
.kfeld--datei{ display: grid; gap: 0.5rem; }
.kfeld--datei > label{
font-weight: 600;
font-size: 0.95rem;
color: var(--ink);
}
.datei{
position: relative;
display: block;
border: 1.5px dashed var(--line);
border-radius: 14px;
background: rgba(47, 77, 158, 0.03);
transition: border-color 0.2s ease, background-color 0.2s ease;
}
.datei:hover,
.datei.is-ueber{ border-color: var(--blue); background: rgba(47, 77, 158, 0.07); }
.datei input[type="file"]{
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.datei input[type="file"]:focus-visible + .datei__flaeche{
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: 14px;
}
.datei__flaeche{
display: flex;
align-items: center;
gap: 0.9rem;
padding: 1.1rem 1.2rem;
color: var(--ink-2);
}
.datei__flaeche svg{ width: 26px; height: 26px; flex: 0 0 26px; color: var(--blue); }
.datei__text{ display: grid; gap: 0.15rem; line-height: 1.35; }
.datei__text b{ color: var(--ink); font-weight: 600; }
.datei__text span{ font-size: 0.88rem; }
.datei__liste{
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.35rem;
}
.kfeld__hinweis{
margin: 0;
font-size: 0.85rem;
line-height: 1.5;
color: var(--ink-2);
}
.kfeld--datei.is-fehler .datei{ border-color: #c0392b; background: rgba(192, 57, 43, 0.05); }
@media (max-width: 560px){.datei__flaeche{ padding: 0.9rem 1rem; }.datei__text span{ font-size: 0.82rem; }}
.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; }
.goal{ --mx: 50%; --my: 50%; --leuchte: 0; }
.goal::before{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: 0;
opacity: var(--leuchte);
transition: opacity 0.4s ease;
background: radial-gradient(
22rem 22rem at var(--mx) var(--my),
rgba(47, 163, 186, 0.16),
rgba(47, 77, 158, 0.07) 38%,
transparent 68%);
}
.goal::after{
background: radial-gradient(
16rem 16rem at var(--mx) var(--my),
rgba(63, 214, 232, 0.85),
rgba(47, 77, 158, 0.35) 42%,
transparent 70%);
}
.goal > *:not(.goal__num){ position: relative; z-index: 1; }
.goal > .goal__num{ z-index: 1; }
.goal:hover{ --leuchte: 1; }
.goal__num{
font-variant-numeric: tabular-nums;
}
[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; }}
@property --ein{
syntax: '<number>';
inherits: true;
initial-value: 1;
}
@media (prefers-reduced-motion: reduce){.is-vorn *{ animation: none !important; }}
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; }
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;
}}
@media (min-width: 861px){.goals.sp-2 .goal{
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 0.35rem clamp(1rem, 2vw, 1.6rem);
align-items: start;
padding: clamp(1.6rem, 2.4vw, 2.1rem) clamp(1.6rem, 2.4vw, 2.2rem);
}.goals.sp-2 .goal > .goal__num{
position: static;
grid-row: 1 / 3;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 13px;
background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(63, 214, 232, 0.12));
border: 1px solid rgba(47, 77, 158, 0.14);
font-size: 0.86rem;
font-weight: 600;
color: var(--blue);
opacity: 1;
transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}.goals.sp-2 .goal:hover > .goal__num{
background: var(--grad);
border-color: transparent;
color: #fff;
}.goals.sp-2 .goal__title{
grid-column: 2;
font-size: clamp(1.12rem, 1.5vw, 1.3rem);
line-height: 1.25;
align-self: center;
}.goals.sp-2 .goal__text{
grid-column: 2;
font-size: 0.97rem;
line-height: 1.62;
}.goals.sp-2 .goal__link{ grid-column: 2; }}
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); }
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;
}
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;
}}
html.js [data-auftritt="note"].ist-auf .note__sterne i{ opacity: 1; transform: none; }
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; }
@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;
}
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);
}
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 (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; }}
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; }}
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; }
html.js [data-auftritt="zeitkarten"].ist-auf li.ist-jetzt::after{
animation: lagePuls 2.6s ease-in-out infinite 1s;
}
@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;
}}
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 (prefers-reduced-motion: reduce){html.js [data-auftritt="jubiwerte"] > span,
html.js [data-auftritt="jubibuehne"] .jubi__link{
opacity: 1; transform: none; transition: none;
}}
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);
}
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;
}}
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){html.js [data-auftritt="beitraege"] .beitrag{
opacity: 1; transform: none; filter: none; transition: none;
}}
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 (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;
}}
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;
}
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 (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); }
.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); }
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 (prefers-reduced-motion: reduce){html.js [data-auftritt="cta"] .ctaFeld > *{ opacity: 1; transform: none; transition: none; }}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(4){ --wg: 0.54s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(5){ --wg: 0.66s; }
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; }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 (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; }}
@media (min-width: 761px) and (max-width: 1100px){.steps.steps.steps{ --spalten: 1; }}
.page-hero{
min-height: 0;
padding-block: clamp(10.5rem, 17vh, 12.5rem) clamp(6.5rem, 11vh, 8.5rem);
}
.section--referenzen{ overflow-x: clip; }
.referenzen{
margin-inline: calc(50% - 50vw);
margin-top: clamp(2rem, 4vw, 3rem);
}
.referenz{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
align-items: center;
gap: clamp(2rem, 5vw, 5rem);
padding-block: clamp(3.5rem, 7vw, 6rem);
padding-inline: max(clamp(1.25rem, 4vw, 2.5rem), calc(50vw - 590px));
content-visibility: auto;
contain-intrinsic-size: auto 560px;
}
.referenz--gedreht .referenz__bild{ order: 2; }
.referenz--dunkel{
background: #0b1526;
border-block: 1px solid rgba(127, 208, 224, 0.08);
}
.referenz__bild > img{ width: 100%; height: auto; display: block; border-radius: var(--radius); }
.referenz__bild .pv3-stage{ width: 100%; max-width: none; margin: 0; }
.referenz__bild .pv3-stage img{ border-radius: 0; }
.referenz .pv3-stage{ aspect-ratio: 16 / 9; }
.referenz .pv3-laptop__bezel img{
width: 100%;
height: 100%;
object-fit: cover;
}
.referenz:not(.referenz--dunkel) .pv3-laptop__base{
background: linear-gradient(to bottom, rgba(12, 22, 38, 0.28), rgba(12, 22, 38, 0.12));
}
.referenz:not(.referenz--dunkel) .pv3-laptop__base::before{ background: rgba(12, 22, 38, 0.32); }
.referenz:not(.referenz--dunkel) .pv3-laptop__bezel{
border-color: rgba(12, 22, 38, 0.18);
box-shadow: 0 22px 44px -18px rgba(12, 22, 38, 0.45);
}
.referenz__bild > img{
animation: referenz-schweben 6s ease-in-out infinite;
animation-play-state: paused;
}
.referenz .pv3-stage,
.referenz .pv3-phone{ animation-play-state: paused; }
.referenz.ist-sichtbar .referenz__bild > img,
.referenz.ist-sichtbar .pv3-stage,
.referenz.ist-sichtbar .pv3-phone{ animation-play-state: running; }
.referenz:nth-child(3n) .referenz__bild > img{ animation-delay: -2s; }
.referenz:nth-child(3n+1) .referenz__bild > img{ animation-delay: -4s; }
.referenz__text{
position: relative;
padding: clamp(1.4rem, 2.6vw, 2.1rem);
border-radius: var(--radius);
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 18px 44px -34px rgba(12, 22, 38, 0.5);
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.45s ease, box-shadow 0.45s ease, background-color 0.45s ease;
}
.referenz__text::before{
content: "";
position: absolute;
top: -1px;
left: clamp(1.2rem, 2.4vw, 2rem);
right: clamp(1.2rem, 2.4vw, 2rem);
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, transparent, var(--teal) 50%, transparent);
opacity: 0.85;
}
.referenz--dunkel .referenz__text{
border-color: rgba(255, 255, 255, 0.12);
background: rgba(255, 255, 255, 0.045);
box-shadow: none;
}
.referenz__art{
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.5rem;
}
.referenz--dunkel .referenz__art{ color: #7fd0e0; }
.referenz__text h3{ font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.2; margin-bottom: 0.7rem; }
.referenz--dunkel .referenz__text h3{ color: #fff; }
.referenz__text p{ color: var(--ink-2); line-height: 1.65; }
.referenz--dunkel .referenz__text p{ color: var(--dark-text); }
.referenz__link{
display: inline-flex; align-items: center; gap: 0.45rem;
margin-top: 1.1rem; font-weight: 600; color: var(--blue); text-decoration: none;
}
.referenz--dunkel .referenz__link{ color: #7fd0e0; }
.referenz__link svg{ width: 16px; height: 16px; transition: transform 0.4s cubic-bezier(0.4, 0.05, 0.25, 1); }
@media (hover: hover){.referenz__text:hover{
transform: translateY(-4px);
border-color: rgba(47, 163, 186, 0.4);
box-shadow: 0 26px 54px -32px rgba(12, 22, 38, 0.6);
}.referenz--dunkel .referenz__text:hover{
background: rgba(255, 255, 255, 0.07);
border-color: rgba(127, 208, 224, 0.38);
box-shadow: none;
}.referenz__text:hover .referenz__link svg{ transform: translateX(4px); }}
@media (max-width: 780px){.referenz{ grid-template-columns: 1fr; gap: 1.4rem; padding-block: clamp(2.5rem, 9vw, 3.5rem); }.referenz--gedreht .referenz__bild{ order: 0; }}
@media (prefers-reduced-motion: reduce){.referenz__bild > img, .referenz .pv3-stage, .referenz .pv3-phone{ animation: none; }.referenz__text, .referenz__link svg{ transition: none; }.referenz__text:hover{ transform: none; }}
.refzaehler{
position: fixed;
left: clamp(0.9rem, 2vw, 1.6rem);
bottom: 1.2rem;
z-index: 60;
display: flex;
align-items: baseline;
gap: 0.3rem;
padding: 0.55rem 0.95rem 0.65rem;
border-radius: 999px;
background: rgba(11, 21, 38, 0.92);
border: 1px solid rgba(127, 208, 224, 0.25);
box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.6);
font-family: var(--font-mono);
font-size: 0.72rem;
color: rgba(233, 243, 250, 0.85);
overflow: hidden;
opacity: 0;
translate: 0 8px;
pointer-events: none;
transition: opacity 0.35s ease, translate 0.35s ease;
}
.refzaehler.ist-da{ opacity: 1; translate: 0 0; }
.refzaehler b{ font-weight: 600; color: #7fd0e0; font-size: 0.82rem; }
.refzaehler::after{
content: "";
position: absolute;
left: 0; bottom: 0;
height: 2px;
width: calc(var(--p, 0) * 100%);
background: linear-gradient(90deg, var(--blue), var(--teal));
transition: width 0.3s ease;
}
@media (max-width: 700px){.refzaehler{ display: none; }}
@media (prefers-reduced-motion: reduce){.refzaehler, .refzaehler::after{ transition: none; }}
#projekte.section--referenzen{ padding-top: clamp(2rem, 4vw, 3rem); }
.ctawege{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
align-items: stretch;
gap: clamp(0.7rem, 1.6vw, 1.1rem);
max-width: 58rem;
margin: clamp(2.4rem, 5vw, 3.4rem) auto 0;
}
.ctaweg{
display: grid;
grid-template-rows: auto 1fr;
justify-items: center;
align-content: start;
gap: 0.9rem;
padding: clamp(1.1rem, 2.2vw, 1.5rem) 0.8rem;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(255, 255, 255, 0.04);
text-decoration: none;
color: rgba(233, 243, 250, 0.9);
transition:
background-color 0.6s ease, border-color 0.6s ease,
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.ctaweg__zeichen,
.ctaweg__qr{
display: grid;
place-items: center;
border-radius: 14px;
}
.ctaweg__zeichen,
.ctaweg__qr{ width: 148px; height: 148px; }
.ctaweg__zeichen{
border: 1px solid rgba(127, 208, 224, 0.22);
background: rgba(127, 208, 224, 0.09);
color: #7fd0e0;
transition: background-color 0.6s ease, border-color 0.6s ease, color 0.6s ease;
}
.ctaweg__zeichen svg{ width: 46px; height: 46px; }
.ctaweg__qr{
padding: clamp(0.9rem, 1.8vw, 1.3rem);
border: 1px solid rgba(127, 208, 224, 0.22);
background: rgba(127, 208, 224, 0.09);
color: #7fd0e0;
overflow: hidden;
transition: background-color 0.6s ease, border-color 0.6s ease,
box-shadow 0.6s ease, color 0.6s ease;
}
.qrsvg{ width: 100%; height: 100%; display: block; }
.qrsvg__module{
stroke: currentColor;
shape-rendering: crispEdges;
transition: stroke 0.6s ease;
}
.ctaweg__wort{
align-self: start;
font-size: 0.82rem;
line-height: 1.4;
text-align: center;
color: rgba(233, 243, 250, 0.72);
overflow-wrap: anywhere;
}
@media (hover: hover){a.ctaweg:hover{
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.07);
border-color: rgba(127, 208, 224, 0.35);
}a.ctaweg:hover .ctaweg__zeichen{
background: rgba(127, 208, 224, 0.18);
border-color: rgba(127, 208, 224, 0.42);
color: #fff;
}a.ctaweg--qr:hover .ctaweg__qr{
background: rgba(127, 208, 224, 0.18);
border-color: rgba(127, 208, 224, 0.42);
color: #fff;
}a.ctaweg:hover .ctaweg__wort{ color: #fff; }}
@media (max-width: 860px){.ctawege{ grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34rem; }}
@media (max-width: 460px){.ctaweg__zeichen, .ctaweg__qr{ width: 132px; height: 132px; }}
@media (prefers-reduced-motion: reduce){.ctaweg, .ctaweg__zeichen, .ctaweg__qr, .qrsvg__module{ transition: none; }a.ctaweg:hover{ transform: none; }}
.kanaele__reihe{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 2.4vw, 1.6rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.kanal{
display: grid;
justify-items: center;
align-content: start;
gap: 0.6rem;
padding: clamp(1.6rem, 3vw, 2.4rem) clamp(1.2rem, 2.4vw, 1.8rem);
border-radius: var(--radius);
text-align: center;
text-decoration: none;
color: #fff;
isolation: isolate;
}
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);
}
.kanal--teams{ background: linear-gradient(150deg, #4b53bc, #3f46a6); }
.kanal--video{ background: linear-gradient(150deg, #1fb26a, #17945a); }
.kanal--tel{ background: linear-gradient(150deg, #e8894b, #d9743a); }
.kanal__zeichen{ display: grid; place-items: center; width: 54px; height: 54px; }
.kanal__zeichen svg{ width: 34px; height: 34px; }
.kanal__titel{ font-size: 1.15rem; font-weight: 680; }
.kanal__text{
font-size: 0.9rem;
line-height: 1.55;
color: rgba(255, 255, 255, 0.88);
max-width: 30ch;
}
.kanal__wort{
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: 0.7rem;
padding: 0.5rem 1.1rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.24);
font-size: 0.85rem;
font-weight: 600;
transition: background-color 0.65s ease, border-color 0.65s ease;
}
@media (hover: hover){.kanal:hover{ transform: translateY(-3px); box-shadow: 0 24px 46px -30px rgba(12, 22, 38, 0.5); }.kanal:hover .kanal__wort{ background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.36); }}
@media (max-width: 860px){.kanaele__reihe{ grid-template-columns: 1fr; }.kanal__text{ max-width: 42ch; }}
@media (prefers-reduced-motion: reduce){.kanal, .kanal__wort{ transition: none; }.kanal:hover{ transform: none; }}
.stat b{ text-wrap: balance; }
.stat b, .zahl__wert{ white-space: nowrap; }
.staedte{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.9rem;
max-width: 640px;
margin: clamp(1.6rem, 3.5vw, 2.4rem) auto 0;
}
.stadt{
display: flex;
align-items: center;
justify-content: center;
min-height: 54px;
padding: 0.75rem 1.1rem;
border-radius: 12px;
border: 2px solid transparent;
background: var(--grad);
font-size: 1rem;
font-weight: 700;
color: #fff;
text-align: center;
text-decoration: none;
box-shadow: 0 12px 26px -22px rgba(12, 22, 38, 0.5);
}
.stadt{
transition:
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 (hover: hover){.stadt:hover{
transform: translateY(-3px);
filter: saturate(1.12) brightness(1.06);
box-shadow: 0 22px 40px -24px rgba(12, 22, 38, 0.5);
}}
@media (max-width: 600px){.staedte{ grid-template-columns: 1fr; gap: 0.7rem; }}
@media (prefers-reduced-motion: reduce){.stadt{ transition: none; }.stadt:hover{ transform: none; filter: none; }}
.stat b{ font-size: clamp(1.7rem, 2.6vw, 2.4rem); }
.prosa__kicker{ margin-bottom: 0.2rem; }
.prosa--lang > .prosa__kicker + h2{ margin-top: 0.4rem; }
.eignung__raster{
display: grid;
grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
gap: clamp(1.8rem, 4vw, 3.4rem);
align-items: start;
}
.eignung__text > .kicker{ margin-bottom: 0.6rem; }
.eignung__text > h2{ margin-bottom: 1rem; }
.eignung__text > p{ color: var(--ink-2); max-width: 62ch; }
.eignung__text > p + p{ margin-top: 0.9rem; }
.eignung__text .ticks{ margin-top: 1.4rem; }
.eignung__siegel{
position: sticky;
top: calc(var(--navhoehe, 76px) + 1.5rem);
padding: clamp(1.5rem, 3vw, 2.1rem);
border-radius: 22px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 22px 50px -34px rgba(12, 22, 38, 0.55);
text-align: center;
}
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);
}
@media (hover: hover){.eignung__siegel:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.32);
box-shadow: 0 28px 56px -34px rgba(12, 22, 38, 0.42);
}}
.eignung__siegel .siegel{
position: relative;
inset: auto;
width: clamp(112px, 26vw, 138px);
aspect-ratio: 1;
margin: 0 auto 1.5rem;
display: grid;
place-items: center;
pointer-events: auto;
}
.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;
}
.siegel__logo{
position: relative;
width: 48%;
height: auto;
translate: -9% -6%;
}
.siegel__name{
font-size: 0.98rem;
font-weight: 700;
letter-spacing: 0.01em;
color: var(--ink);
}
.siegel__slogan{
margin-top: 0.5rem;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink-2);
text-wrap: balance;
}
.siegel__werte{
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.7rem;
row-gap: 0.85rem;
align-items: baseline;
margin: 1.2rem 0 0;
padding: 1.2rem 0 0;
border-top: 1px solid var(--line);
text-align: left;
}
.siegelwert{ display: contents; }
.siegelwert b{
font-size: 1.45rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.siegelwert span{
font-size: 0.82rem;
line-height: 1.4;
color: var(--ink-2);
}
.siegel__id{
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px solid var(--line);
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
}
@media (max-width: 900px){.eignung__raster{ grid-template-columns: 1fr; }.eignung__text{ order: 1; }.eignung__siegel{
order: 2;
position: static;
max-width: 380px;
margin-inline: auto;
}}
@media (prefers-reduced-motion: reduce){.siegel__ring{ animation: none; }.eignung__siegel{ transition: none; }.eignung__siegel:hover{ transform: none; }}
.lkarte__link{
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
padding-top: 1.1rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--teal-ink);
text-decoration: none;
transition: color 0.4s ease, gap 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.lkarte__link svg{
width: 15px; height: 15px;
transition: transform 0.45s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover){.lkarte__link:hover{ color: var(--blue); gap: 0.65rem; }.lkarte__link:hover svg{ transform: translateX(2px); }}
.section--dark .lkarte__link{ color: var(--teal); }
@media (prefers-reduced-motion: reduce){.lkarte__link, .lkarte__link svg{ transition: none; }.lkarte__link:hover svg{ transform: none; }}
.iconreihe{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.8rem, 2vw, 1.3rem);
margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.ikachel{
flex: 1 1 190px;
max-width: 240px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.85rem;
padding: clamp(1.3rem, 2.6vw, 1.8rem) 1rem;
border-radius: 18px;
border: 1px solid var(--line);
background: var(--surface);
text-align: center;
box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
}
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);
}
.ikachel p{
margin: 0;
font-size: 0.94rem;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
text-wrap: balance;
}
.ikachel__symbol{
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 15px;
background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.14));
color: var(--blue);
transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
color 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.ikachel__symbol svg{ width: 25px; height: 25px; }
@media (hover: hover){.ikachel:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.32);
box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.32);
}.ikachel:hover .ikachel__symbol{ transform: scale(1.04); color: var(--teal-ink); }}
@media (max-width: 620px){.iconreihe{ gap: 0.7rem; }.ikachel{ flex: 1 1 calc(50% - 0.7rem); max-width: none; padding: 1.2rem 0.7rem; }.ikachel p{ font-size: 0.86rem; }.ikachel__symbol{ width: 46px; height: 46px; }.ikachel__symbol svg{ width: 22px; height: 22px; }}
@media (prefers-reduced-motion: reduce){html.js .ikachel[data-reveal],
.ikachel, .ikachel__symbol{ transition: none; }.ikachel:hover{ transform: none; }.ikachel:hover .ikachel__symbol{ transform: none; }}
.iconreihe--4{
display: grid;
grid-template-columns: repeat(4, 1fr);
align-items: stretch;
}
.iconreihe--4 .ikachel{ flex: none; max-width: none; }
.iconreihe--4 .ikachel--breit{
grid-column: span 2;
flex-direction: row;
justify-content: center;
gap: 1.05rem;
}
.iconreihe--4 .ikachel--breit p{ text-align: left; text-wrap: nowrap; }
@media (max-width: 1000px){.iconreihe--4{ grid-template-columns: repeat(3, 1fr); }.iconreihe--4 .ikachel--breit{
grid-column: auto;
flex-direction: column;
gap: 0.85rem;
}.iconreihe--4 .ikachel--breit p{ text-align: center; text-wrap: balance; }.iconreihe--4 .ikachel:last-child{
grid-column: span 3;
flex-direction: row;
justify-content: center;
gap: 1.05rem;
}.iconreihe--4 .ikachel:last-child p{ text-align: left; text-wrap: nowrap; }}
@media (max-width: 620px){.iconreihe--4{ grid-template-columns: repeat(2, 1fr); }.iconreihe--4 .ikachel:last-child{ grid-column: span 2; }}
.funnel{
position: relative;
z-index: 1;
max-width: 780px;
margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
padding: clamp(1.4rem, 3.4vw, 2.4rem);
border-radius: 24px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 24px 54px -36px rgba(12, 22, 38, 0.5);
}
.funnel__honig{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.funnel [hidden],
.funnel__danke[hidden]{ display: none !important; }
.funnel__fortschritt{ margin-bottom: clamp(1.3rem, 3vw, 1.9rem); }
.funnel__balken{
height: 6px;
border-radius: 999px;
background: rgba(47, 77, 158, 0.12);
overflow: hidden;
}
.funnel__balken span{
display: block;
height: 100%;
width: 0;
border-radius: 999px;
background: var(--grad);
transition: width 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.funnel__zaehler{
margin: 0.6rem 0 0;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
}
.funnel__zaehler b{ color: var(--blue); }
.funnel__schritt{ border: 0; margin: 0; padding: 0; min-width: 0; }
.funnel.ist-gefuehrt .funnel__schritt{ display: none; }
.funnel.ist-gefuehrt .funnel__schritt.ist-aktiv{ display: block; }
.funnel.ist-gefuehrt .funnel__schritt + .funnel__schritt{ margin-top: 0; }
.funnel__schritt + .funnel__schritt{ margin-top: 2.4rem; }
.funnel__frage{
padding: 0;
font-size: clamp(1.15rem, 2.4vw, 1.5rem);
font-weight: 700;
line-height: 1.3;
color: var(--ink);
text-wrap: balance;
}
.funnel__karten{
display: grid;
grid-template-columns: repeat(var(--spalten, 3), 1fr);
gap: clamp(0.7rem, 1.8vw, 1rem);
margin-top: clamp(1.2rem, 3vw, 1.7rem);
}
.funnel__karten--2{ --spalten: 2; }
.funnel__karten--3{ --spalten: 3; }
.fkarte{
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
padding: clamp(1.1rem, 2.4vw, 1.5rem) 0.9rem;
border-radius: 16px;
border: 1px solid var(--line);
background: var(--surface);
text-align: center;
cursor: pointer;
box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
transition:
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1),
background-color 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.fkarte input{
position: absolute;
inset: 0;
opacity: 0;
margin: 0;
cursor: pointer;
}
.fkarte__symbol{
display: grid;
place-items: center;
width: 50px;
height: 50px;
border-radius: 14px;
background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.14));
color: var(--blue);
transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease;
}
.fkarte__symbol svg{ width: 24px; height: 24px; }
.fkarte__text{
font-size: 0.94rem;
font-weight: 600;
line-height: 1.35;
color: var(--ink);
text-wrap: balance;
}
@media (hover: hover){.fkarte:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.32);
box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.32);
}.fkarte:hover .fkarte__symbol{ transform: scale(1.04); color: var(--teal-ink); }}
.fkarte:has(input:checked){
border-color: var(--teal);
background: linear-gradient(140deg, rgba(47, 77, 158, 0.06), rgba(47, 163, 186, 0.09));
box-shadow: 0 18px 34px -26px rgba(12, 22, 38, 0.34);
}
.fkarte:has(input:checked) .fkarte__symbol{ color: var(--teal-ink); }
.funnel__slider{ margin-top: clamp(1.4rem, 3vw, 2rem); text-align: center; }
.funnel__wert{
display: block;
font-size: clamp(1.7rem, 4.5vw, 2.4rem);
font-weight: 700;
line-height: 1;
color: var(--ink-2);
}
.funnel__wert b{
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.funnel__regler{
-webkit-appearance: none;
appearance: none;
width: 100%;
height: 6px;
margin: 1.4rem 0 0.7rem;
border-radius: 999px;
background: rgba(47, 77, 158, 0.14);
cursor: pointer;
}
.funnel__regler::-webkit-slider-thumb{
-webkit-appearance: none;
width: 26px;
height: 26px;
border-radius: 50%;
border: 3px solid #fff;
background: var(--grad);
box-shadow: 0 4px 12px -3px rgba(12, 22, 38, 0.45);
cursor: grab;
}
.funnel__regler::-moz-range-thumb{
width: 26px;
height: 26px;
border-radius: 50%;
border: 3px solid #fff;
background: var(--blue);
box-shadow: 0 4px 12px -3px rgba(12, 22, 38, 0.45);
cursor: grab;
}
.funnel__reglerenden{
display: flex;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
color: var(--ink-2);
}
.funnel__gitter{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(0.8rem, 2vw, 1.1rem);
margin-top: 1.2rem;
}
.funnel__feld--breit{ grid-column: 1 / -1; }
.funnel__feld{ margin-top: 1.2rem; display: flex; flex-direction: column; gap: 0.35rem; }
.funnel__gitter .funnel__feld{ margin-top: 0; }
.funnel__label{ font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.funnel__eingabe{
width: 100%;
padding: 0.8rem 0.95rem;
border-radius: 12px;
border: 1px solid var(--line);
background: #fff;
font: inherit;
font-size: 0.95rem;
color: var(--ink);
transition: border-color 0.35s ease, box-shadow 0.35s ease;
}
.funnel__eingabe:focus{
outline: 0;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.16);
}
textarea.funnel__eingabe{ resize: vertical; min-height: 96px; }
.funnel__fehler{
min-height: 1em;
font-size: 0.8rem;
font-weight: 600;
color: #c02b2b;
}
.funnel__feld.is-fehler .funnel__eingabe{ border-color: #c02b2b; }
.funnel__anrede{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.2rem; }
.fpille{ position: relative; cursor: pointer; }
.fpille input{ position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.fpille span{
display: block;
padding: 0.5rem 1.05rem;
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
font-size: 0.88rem;
font-weight: 600;
color: var(--ink-2);
transition: border-color 0.4s ease, color 0.4s ease, background-color 0.4s ease;
}
.fpille:has(input:checked) span{
border-color: var(--teal);
color: var(--teal-ink);
background: rgba(47, 163, 186, 0.08);
}
.funnel__anrede .funnel__fehler{ flex: 1 0 100%; }
.funnel__ergebnis{
margin: 1rem 0 0;
padding: 0.9rem 1.1rem;
border-radius: 14px;
border: 1px solid rgba(47, 163, 186, 0.3);
background: linear-gradient(140deg, rgba(47, 77, 158, 0.06), rgba(47, 163, 186, 0.09));
font-size: 0.95rem;
line-height: 1.55;
color: var(--ink);
}
.funnel__haken{
display: flex;
align-items: flex-start;
gap: 0.6rem;
margin-top: 1.2rem;
font-size: 0.86rem;
line-height: 1.5;
color: var(--ink-2);
cursor: pointer;
}
.funnel__haken input{ margin-top: 0.2rem; width: 17px; height: 17px; accent-color: var(--teal); }
.funnel__leiste{
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
align-items: center;
margin-top: clamp(1.4rem, 3vw, 2rem);
padding-top: clamp(1.1rem, 2.4vw, 1.5rem);
border-top: 1px solid var(--line);
}
.funnel__zurueck{ margin-right: auto; }
.funnel__meldung{
margin: 1.2rem 0 0;
padding: 0.85rem 1.05rem;
border-radius: 12px;
font-size: 0.9rem;
line-height: 1.5;
}
.funnel__meldung.is-schlecht{ background: rgba(192, 43, 43, 0.08); color: #8c1f1f; }
.funnel__meldung.is-gut{ background: rgba(47, 163, 186, 0.1); color: var(--teal-ink); }
.funnel__danke{
position: relative;
z-index: 1;
max-width: 620px;
margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
padding: clamp(1.8rem, 4vw, 2.6rem);
border-radius: 24px;
border: 1px solid rgba(47, 163, 186, 0.3);
background: var(--surface);
text-align: center;
box-shadow: 0 24px 54px -36px rgba(12, 22, 38, 0.5);
}
.funnel__dankesymbol{
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin: 0 auto 1rem;
border-radius: 50%;
background: linear-gradient(140deg, rgba(47, 77, 158, 0.1), rgba(47, 163, 186, 0.16));
color: var(--teal-ink);
}
.funnel__dankesymbol svg{ width: 30px; height: 30px; }
.funnel__danke h3{ font-size: clamp(1.15rem, 2.6vw, 1.45rem); margin: 0 0 0.6rem; }
.funnel__danke p{ margin: 0; color: var(--ink-2); line-height: 1.6; }
@media (max-width: 720px){.funnel__karten{ --spalten: 1 !important; }.funnel__gitter{ grid-template-columns: 1fr; }.funnel__leiste .btn{ flex: 1 1 100%; }.funnel__zurueck{ order: 2; margin-right: 0; }.fkarte{ flex-direction: row; text-align: left; gap: 0.9rem; padding: 0.95rem 1rem; }.fkarte__symbol{ width: 42px; height: 42px; flex: 0 0 42px; }}
@media (prefers-reduced-motion: reduce){.fkarte, .fkarte__symbol, .funnel__balken span{ transition: none; }.fkarte:hover{ transform: none; }.fkarte:hover .fkarte__symbol{ transform: none; }}
.felder__text{
max-width: 74ch;
margin: 0 auto;
font-size: clamp(1rem, 1.9vw, 1.08rem);
line-height: 1.7;
color: var(--ink-2);
text-align: center;
text-wrap: pretty;
}
.felder__text + .felder__text{ margin-top: 0.9rem; }
.felder__schluss{
max-width: 74ch;
margin: clamp(1.8rem, 4vw, 2.6rem) auto 0;
font-size: clamp(1rem, 1.9vw, 1.08rem);
line-height: 1.7;
color: var(--ink-2);
text-align: center;
text-wrap: pretty;
}
.felder__schluss strong{ color: var(--ink); }
.felder__schluss a{ color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.felder__schluss a:hover{ color: var(--teal-ink); }
.felder__karten{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(0.8rem, 2vw, 1.25rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.felder__karten--n5,
.felder__karten--n6{ display: grid; }
.felder__karten--n5{ grid-template-columns: repeat(6, 1fr); }
.felder__karten--n5 .fbox{ grid-column: span 2; }
.felder__karten--n5 .fbox:nth-last-child(-n+2){ grid-column: span 3; }
.felder__karten--n6{ grid-template-columns: repeat(3, 1fr); }
.felder__karten--n3{ display: grid; grid-template-columns: repeat(3, 1fr); }
.felder__karten--n4{ display: grid; grid-template-columns: repeat(4, 1fr); }
.fbox{
flex: 0 1 260px;
min-width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.9rem;
min-height: 148px;
padding: clamp(1.3rem, 2.6vw, 1.7rem) 1.1rem;
border-radius: 18px;
background: var(--grad);
color: #fff;
text-align: center;
box-shadow: 0 16px 34px -24px rgba(12, 22, 38, 0.55);
}
.fbox p{
margin: 0;
hyphens: auto;
overflow-wrap: break-word;
font-size: 1rem;
font-weight: 600;
line-height: 1.35;
color: #fff;
text-wrap: balance;
}
.fbox__text{
font-size: 0.88rem;
line-height: 1.5;
color: rgba(255, 255, 255, 0.88);
text-wrap: pretty;
}
.fbox:has(.fbox__text){ justify-content: flex-start; gap: 0.65rem; }
.fbox__symbol{
display: grid;
place-items: center;
width: 46px;
height: 46px;
color: #fff;
}
.fbox__symbol svg{ width: 34px; height: 34px; }
.fbox--zahl{
background: var(--surface);
border: 2px solid rgba(47, 163, 186, 0.5);
box-shadow: 0 12px 28px -24px rgba(12, 22, 38, 0.4);
gap: 0.5rem;
}
.fbox--zahl p{ color: var(--ink-2); font-weight: 500; }
.fbox__wert{
font-size: clamp(2rem, 4.6vw, 2.85rem);
font-weight: 700;
line-height: 1;
white-space: nowrap;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (hover: hover){.fbox--zahl:hover{ filter: none; border-color: var(--teal); }}
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 (hover: hover){.fbox:hover{
transform: translateY(-3px) scale(1.02);
filter: saturate(1.12) brightness(1.06);
box-shadow: 0 24px 44px -26px rgba(12, 22, 38, 0.5);
}}
@media (max-width: 900px) and (min-width: 621px){.felder__karten--n4,
.felder__karten--n6{ grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 620px){.felder__karten--n3,
.felder__karten--n4,
.felder__karten--n5,
.felder__karten--n6{ grid-template-columns: 1fr; }.felder__karten--n5 .fbox,
.felder__karten--n5 .fbox:nth-last-child(-n+2){ grid-column: auto; }.fbox{ flex: 1 1 100%; min-height: 0; flex-direction: row; justify-content: flex-start; gap: 1rem; text-align: left; padding: 1.05rem 1.15rem; }.fbox--zahl{ flex-direction: column; justify-content: center; text-align: center; gap: 0.4rem; padding: 1.3rem 1.15rem; }.fbox__symbol{ flex: 0 0 40px; width: 40px; height: 40px; }.fbox__symbol svg{ width: 28px; height: 28px; }.fbox p{ font-size: 0.95rem; }}
@media (prefers-reduced-motion: reduce){html.js .fbox[data-reveal],
.fbox{ transition: none; }.fbox:hover{ transform: none; filter: 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);
}
.section__knopf{ margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; text-align: center; }
@media (prefers-reduced-motion: reduce){html.js .shopbild[data-reveal], .shopbild{ transition: none; }}
.logoband{
margin-top: clamp(1.8rem, 4vw, 2.6rem);
display: flex;
flex-direction: column;
gap: clamp(0.7rem, 1.6vw, 1.1rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logoband__reihe{
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.logoband__reihe::-webkit-scrollbar{ display: none; }
.logoband__spur{
display: flex;
align-items: center;
gap: clamp(0.7rem, 1.8vw, 1.2rem);
width: max-content;
animation: logoband-lauf var(--dauer, 46s) linear infinite;
will-change: transform;
}
.logoband__reihe--zurueck .logoband__spur{ animation-direction: reverse; }
@media (hover: hover){.logoband:hover .logoband__spur{ animation-play-state: paused; }}
.logoband .logos__item{
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
width: clamp(130px, 15vw, 168px);
height: clamp(74px, 8.5vw, 92px);
padding: 0.9rem 1.1rem;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 8px 20px -18px rgba(12, 22, 38, 0.28);
transition:
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.logoband .logos__item img{
filter: none;
opacity: 1;
max-width: 100%;
max-height: clamp(44px, 5vw, 56px);
width: auto;
height: auto;
object-fit: contain;
}
@media (hover: hover){.logoband .logos__item:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.35);
box-shadow: 0 20px 38px -24px rgba(12, 22, 38, 0.4);
}}
@media (prefers-reduced-motion: reduce){.logoband__spur{ animation: none; }.logoband .logos__item{ transition: none; }}
.kstimmen{
margin-top: clamp(1.8rem, 4vw, 2.6rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 11%, #000 89%, transparent);
}
.kstimmen__reihe{
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.kstimmen__reihe::-webkit-scrollbar{ display: none; }
.kstimmen__spur{
display: flex;
align-items: stretch;
gap: clamp(0.9rem, 2vw, 1.3rem);
padding: 0.4rem clamp(0.9rem, 2vw, 1.3rem);
width: max-content;
animation: logoband-lauf var(--dauer, 90s) linear infinite;
will-change: transform;
}
@media (hover: hover){.kstimmen:hover .kstimmen__spur{ animation-play-state: paused; }}
.kstimme{
flex: 0 0 auto;
width: clamp(290px, 27vw, 380px);
display: flex;
flex-direction: column;
margin: 0;
padding: clamp(1.3rem, 2.4vw, 1.7rem);
border-radius: 18px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 12px 28px -22px rgba(12, 22, 38, 0.32);
transition:
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);
}
.kstimme__zeichen{
display: block;
font-size: 3rem;
line-height: 0.7;
height: 0.45em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.kstimme__zitat{
margin: 0.9rem 0 0;
font-size: 0.95rem;
line-height: 1.6;
color: var(--ink);
text-wrap: pretty;
}
.kstimme__wer{
display: flex;
flex-direction: column;
gap: 0.1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.kstimme__wer b{ font-size: 0.95rem; font-weight: 700; color: var(--ink); }
.kstimme__wer span{ font-size: 0.84rem; color: var(--ink-2); }
@media (hover: hover){.kstimme:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.32);
box-shadow: 0 22px 40px -26px rgba(12, 22, 38, 0.4);
}}
@media (prefers-reduced-motion: reduce){.kstimmen__spur{ animation: none; }.kstimme{ transition: none; }.kstimme:hover{ transform: none; }}
.team--rund{ align-items: stretch; }
.team--rund .teamer{ min-height: 360px; justify-content: center; }
.team--gross.team--rund .teamer{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
justify-content: flex-start;
min-height: 0;
padding: clamp(1.9rem, 3.2vw, 2.6rem) clamp(1.3rem, 2.4vw, 1.8rem) clamp(1.9rem, 3.2vw, 2.4rem);
}
.team--gross.team--rund .teamer__bild{
width: clamp(150px, 17vw, 210px);
height: clamp(150px, 17vw, 210px);
}
.team--gross.team--rund .teamer__name{ font-size: clamp(1.1rem, 1.9vw, 1.3rem); }
.team--gross.team--rund .teamer__name{ min-height: 1.5em; display: flex; align-items: center; }
.team--gross.team--rund .teamer__rolle{ min-height: 2.6em; align-items: flex-start; }
.team--gross.team--rund .teamer:not(:has(.teamer__motto)){
padding-bottom: clamp(1.5rem, 2.6vw, 2rem);
}
@media (max-width: 900px){.team--rund .teamer{ min-height: 330px; }}
@media (max-width: 560px){.team--rund .teamer{ min-height: 0; }}
.team--rund .teamer{ text-align: center; }
.team--rund .teamer__bild{
width: clamp(128px, 15vw, 176px);
height: clamp(128px, 15vw, 176px);
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
aspect-ratio: 1;
background: #fff;
border: 1px solid var(--line);
}
.team--rund .teamer__bild img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 8%;
display: block;
}
.team--rund .teamer__bild img[src*="team-seo"]{ object-position: center 26%; }
.team--rund .teamer__bild{ position: relative; }
.team--rund .teamer__bild::after{
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: conic-gradient(from 0deg,
rgba(63, 214, 232, 1) 0deg,
rgba(47, 163, 186, 0.9) 55deg,
rgba(76, 111, 208, 0.75) 130deg,
rgba(47, 77, 158, 0.5) 200deg,
rgba(47, 163, 186, 0.6) 275deg,
rgba(63, 214, 232, 1) 360deg);
-webkit-mask: radial-gradient(closest-side circle, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
mask: radial-gradient(closest-side circle, transparent calc(100% - 2.5px), #000 calc(100% - 1.5px));
animation: teamlaser 7s linear infinite;
transform: translateZ(0);
will-change: transform;
pointer-events: none;
opacity: 1;
}
.team--rund .teamer:nth-child(3n+2) .teamer__bild::after{ animation-delay: -2.3s; }
.team--rund .teamer:nth-child(3n) .teamer__bild::after{ animation-delay: -4.6s; }
.team--rund .teamer:nth-child(4n) .teamer__bild::after{ animation-duration: 8.5s; }
@media (prefers-reduced-motion: reduce){.team--rund .teamer__bild::after{ animation: none; opacity: 0.4; }}
.team--rund .teamer__name{ margin-top: 0.9rem; }
.team--rund .teamer{
display: flex;
flex-direction: column;
align-items: center;
padding: clamp(1.4rem, 2.4vw, 1.8rem) clamp(1rem, 2vw, 1.4rem);
border-radius: 20px;
border: 1px solid var(--line);
background: linear-gradient(180deg, #fff 0%, #fbfcfe 62%, #f6f8fc 100%);
box-shadow: 0 12px 28px -24px rgba(12, 22, 38, 0.34);
transition:
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 (hover: hover){.team--rund .teamer:hover{
transform: translateY(-4px);
border-color: rgba(47, 163, 186, 0.3);
box-shadow: 0 26px 46px -28px rgba(12, 22, 38, 0.42);
}}
@media (prefers-reduced-motion: reduce){.team--rund .teamer{ transition: none; }.team--rund .teamer:hover{ transform: none; }}
.team--rund .teamer__rolle{
text-wrap: balance;
display: flex;
align-items: center;
justify-content: center;
min-height: 2.9em;
margin-top: 0.35rem;
}
.team--rund .teamer__rolle:has(> :only-child),
.team--rund .teamer__rolle{ font-size: 0.76rem; }
@media (hover: hover){.team--rund .teamer:hover .teamer__bild{
border-color: rgba(47, 163, 186, 0.4);
}}
.team--rund .teamer__bild{
transition: border-color 0.7s cubic-bezier(0.16, 1, 0.3, 1),
transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover){.team--rund .teamer:hover .teamer__bild{ transform: translateY(-3px); }}
@media (prefers-reduced-motion: reduce){.team--rund .teamer__bild{ transition: none; }.team--rund .teamer:hover .teamer__bild{ transform: none; }}
.faq__item p + p,
.faq__item p + ul,
.faq__item ul + p{ margin-top: 0.7rem; }
.faq__item ul.ticks{ padding-bottom: 1.2rem; max-width: 44em; }
.faq__item p + p,
.faq__item p:not(:last-child){ padding-bottom: 0; }
.zeitleiste{
position: relative;
list-style: none;
margin: 0 auto;
padding: 0;
max-width: 68rem;
display: grid;
gap: clamp(1.6rem, 3vw, 2.6rem);
}
.zeitleiste::before{
content: "";
position: absolute;
top: 0.6rem;
bottom: 0.6rem;
left: 50%;
width: 2px;
transform: translateX(-50%);
background: linear-gradient(180deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.zstation{
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: start;
column-gap: clamp(1.2rem, 3vw, 2.4rem);
}
.zstation__jahr{
grid-column: 2;
position: sticky;
top: 7rem;
margin-top: 0.4rem;
z-index: 2;
display: grid;
place-items: center;
width: 4.4rem;
height: 4.4rem;
border-radius: 50%;
background: var(--bg);
border: 1px solid var(--line);
box-shadow: var(--shadow);
font-family: var(--font-mono);
font-size: 0.86rem;
font-weight: 600;
color: var(--ink);
}
.zstation__karte{
grid-column: 1;
grid-row: 1;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
box-shadow: var(--shadow);
overflow: hidden;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
.zstation:nth-child(even) .zstation__karte{ grid-column: 3; }
.zstation__karte:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.zstation__bild{ margin: 0; background: var(--bg-2, #f4f6f8); }
.zstation__bild img{
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.zstation__text{ padding: clamp(1.1rem, 2vw, 1.5rem); }
.zstation__text p{ color: var(--ink-2); font-size: 0.95rem; margin: 0; }
.zstation__mehr{ margin-top: 0.7rem !important; }
.zstation__mehr a{
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: var(--blue);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.zstation__mehr a:hover{ color: var(--ink); }
@media (max-width: 900px){.zeitleiste::before{ left: 1.6rem; }.zstation{ grid-template-columns: 3.2rem 1fr; column-gap: 1rem; }.zstation__jahr{
grid-column: 1;
grid-row: 1;
top: 5.5rem;
width: 3.2rem;
height: 3.2rem;
font-size: 0.72rem;
}.zstation__karte,
.zstation:nth-child(even) .zstation__karte{ grid-column: 2; grid-row: 1; }}
@media (prefers-reduced-motion: reduce){.zstation__karte{ transition: none; }.zstation__karte:hover{ transform: none; }}
.case__logo{ display: block; width: auto; max-width: 12rem; height: auto; margin: 1.4rem 0 0; }
.case__cta{ margin-top: 1.4rem; }
.zstation__bild--passend{ background: #fff; padding: 1.2rem; }
.zstation__bild--passend img{ object-fit: contain; aspect-ratio: 16 / 10; }
.logos__grid--farbig .logos__item img{ filter: none; opacity: 1; }
.logos__grid--mittig{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.logos__grid--mittig .logos__item{ flex: 0 1 clamp(9rem, 16vw, 12rem); }
.prosa--getrennt p{
font-size: 1.02rem;
line-height: 1.78;
}
.prosa--getrennt > .prosa__kicker + p,
.prosa--getrennt > p:not(.prosa__kicker):first-child{
font-size: clamp(1.08rem, 1.5vw, 1.22rem);
line-height: 1.62;
color: var(--ink);
}
.prosa--getrennt > p:not(.prosa__kicker) + p{
margin-top: clamp(1.6rem, 3vw, 2.4rem);
padding-top: clamp(1.6rem, 3vw, 2.4rem);
border-top: 1px solid var(--line);
}
.prosa--getrennt h2{ margin-top: clamp(4rem, 7vw, 5.6rem); }
.prosa--getrennt h3{ margin-top: clamp(2.6rem, 4vw, 3.4rem); }
.prosa--getrennt > :is(h2, h3):first-child{ margin-top: 0; }
.prosa--getrennt > .prosa__kicker{ position: relative; padding-left: 3rem; }
.prosa--getrennt > .prosa__kicker::before{
content: "";
position: absolute;
left: 0;
top: 50%;
width: 2.2rem;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--blue), var(--teal, #2fa3ba));
}
@media (max-width: 620px){.prosa--getrennt > .prosa__kicker{ padding-left: 2.4rem; }.prosa--getrennt > .prosa__kicker::before{ width: 1.6rem; }}
.page-hero__unter{
margin: 0.9rem 0 0;
font-size: clamp(1.15rem, 2.2vw, 1.55rem);
font-weight: 600;
letter-spacing: -0.01em;
color: rgba(255, 255, 255, 0.92);
}
.page-hero__unter + .page-hero__text{ margin-top: 0.7rem; }
.prosa__bilder{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(0.8rem, 2vw, 1.4rem);
margin-top: 1.8rem;
}
.prosa__bilder figure{
flex: 1 1 12rem;
margin: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow);
}
.prosa__bilder img{ display: block; width: 100%; height: auto; }
.prosa__bilder--logo figure{
display: grid;
place-items: center;
background: #fff;
padding: clamp(1.4rem, 3vw, 2.2rem);
}
.prosa__bilder--logo img{ max-width: 14rem; object-fit: contain; }
.case--nurtext{
display: block;
max-width: 52rem;
margin-inline: auto;
text-align: center;
}
.case--nurtext .case__logo{ margin-inline: auto; }
.faq__item summary h6{ font: inherit; margin: 0; display: inline; }
.zstation__titel{ text-wrap: balance; overflow-wrap: anywhere; }
.zstation__text p{ overflow-wrap: anywhere; }
.steps.sp-2 > .step:nth-child(2n)::before,
.steps.sp-3 > .step:nth-child(3n)::before{ display: none; }
.prosa .prosa__akzent{
font-size: 1.06rem;
font-weight: 600;
color: var(--teal, #2fa3ba);
}
.prosa--getrennt > .prosa__akzent + p{ border-top: 0; padding-top: 0; }
.prosa .prosa__zitat{
position: relative;
margin: 1.4rem 0 1.6rem;
padding: 1.15rem 3.6rem 1.15rem 1.6rem;
border-radius: 16px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
overflow: hidden;
}
.prosa .prosa__zitat::before{
content: "";
position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
background: linear-gradient(180deg, #2f5fd8, #2fa3ba);
}
.prosa .prosa__zitat::after{
content: "\201E";
position: absolute; right: 1rem; top: -0.6rem;
font-size: 4.5rem; line-height: 1; font-weight: 800;
color: var(--teal, #2fa3ba); opacity: 0.16; pointer-events: none;
}
.prosa .prosa__zitat p{ margin: 0; font-size: 1.04rem; line-height: 1.65; color: var(--ink); }
.prosa .prosa__zitat-wer{
margin-top: 0.7rem;
font-family: var(--font-mono);
font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--teal-ink);
}
.prosa__bild--oben{ margin-top: 0; margin-bottom: 1.8rem; box-shadow: var(--shadow); }
.prosa__bild--oben img{ width: 100%; height: auto; }
.stellen{
display: grid;
gap: clamp(1rem, 2vw, 1.4rem);
max-width: 52rem;
margin-inline: auto;
}
.jobkarte{
background: var(--bg);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
padding: clamp(1.6rem, 3.2vw, 2.5rem);
}
.jobkarte--kopf{ border-left: 4px solid var(--teal, #2fa3ba); }
.jobkarte__titel{
font-size: clamp(1.35rem, 2.6vw, 1.75rem);
font-weight: 700;
letter-spacing: -0.015em;
line-height: 1.3;
margin: 0 0 0.7rem;
text-wrap: balance;
}
.jobkarte__meta{
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.02em;
color: var(--ink-2);
margin: 0 0 1.1rem;
}
.jobkarte__text{ color: var(--ink-2); margin: 0; }
.jobkarte__text + .jobkarte__text{ margin-top: 0.8rem; }
.jobkarte__abschnitt{
font-size: clamp(1.12rem, 2vw, 1.35rem);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 1.2rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid var(--line);
}
.jobliste{ list-style: none; margin: 0; padding: 0; }
.jobliste li{
position: relative;
padding: 0.45rem 0 0.45rem 1.6rem;
color: var(--ink-2);
line-height: 1.65;
}
.jobliste li::before{
content: "•";
position: absolute;
left: 0.3rem;
top: 0.35rem;
color: var(--teal-ink);
font-size: 1.25rem;
line-height: 1.35;
}
.jobkarte--knapp{ padding-block: clamp(1.1rem, 2.2vw, 1.5rem); }
.jobkarte__abschnitt--allein{ margin: 0; padding-bottom: 0; border-bottom: 0; }
.jobliste + .jobkarte__text{ margin-top: 1.1rem; }
.teamband{
margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.teamband__reihe{
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.teamband__reihe::-webkit-scrollbar{ display: none; }
.teamband__spur{
display: flex;
align-items: center;
gap: clamp(0.9rem, 2.2vw, 1.6rem);
width: max-content;
animation: teamband-lauf var(--dauer, 64s) linear infinite;
will-change: transform;
}
@media (hover: hover){.teamband:hover .teamband__spur{ animation-play-state: paused; }}
.teamband__kopf{
flex: 0 0 auto;
margin: 0;
width: clamp(104px, 12vw, 152px);
height: clamp(104px, 12vw, 152px);
padding: 6px;
border-radius: 50%;
background: var(--bg);
border: 2px solid rgba(47, 163, 186, 0.35);
box-shadow: var(--shadow);
transition: border-color 0.3s ease, transform 0.3s ease;
}
.teamband__kopf img{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
object-position: center top;
background: var(--surface);
}
@media (hover: hover){.teamband__kopf:hover{ border-color: rgba(47, 163, 186, 0.75); transform: translateY(-3px); }}
@media (prefers-reduced-motion: reduce){.teamband__kopf{ transition: none; }.teamband__kopf:hover{ transform: none; }}
@media (prefers-reduced-motion: reduce){.teamband__spur{ animation: none; width: auto; }}
.kontaktblock{
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: clamp(1.2rem, 2.5vw, 2rem);
align-items: stretch;
}
.kontaktblock__daten,
.kontaktblock__qr{
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
box-shadow: var(--shadow);
padding: clamp(1.5rem, 3vw, 2.4rem);
}
.kontaktblock__daten{ border-left: 4px solid var(--teal, #2fa3ba); }
.kontaktzeile{
display: grid;
grid-template-columns: auto 1fr;
gap: 1rem;
align-items: start;
padding: clamp(1rem, 2vw, 1.4rem) 0;
border-bottom: 1px solid var(--line);
}
.kontaktzeile:first-child{ padding-top: 0; }
.kontaktzeile:last-of-type{ border-bottom: 0; }
.kontaktzeile__icon{
display: grid;
place-items: center;
width: 2.6rem;
height: 2.6rem;
border-radius: 12px;
background: var(--grad);
color: #fff;
}
.kontaktzeile__icon svg{ width: 1.3rem; height: 1.3rem; }
.kontaktzeile h2{
font-size: clamp(1.05rem, 1.9vw, 1.3rem);
font-weight: 700;
letter-spacing: -0.01em;
margin: 0 0 0.3rem;
line-height: 1.35;
overflow-wrap: anywhere;
}
.kontaktzeile h2 a{ color: inherit; text-decoration: none; }
.kontaktzeile h2 a:hover{ color: var(--blue); }
.kontaktzeile p{ color: var(--ink-2); margin: 0; }
.kontaktblock__zeiten{ color: var(--ink-2); margin: 1.2rem 0 0; }
.kontaktblock__cta{ margin-top: 1.4rem; }
.kontaktblock__qr{
margin: 0;
display: grid;
align-content: center;
justify-items: center;
text-align: center;
}
.kontaktblock__qr img{
padding: clamp(0.7rem, 1.6vw, 1.1rem);
border-radius: calc(var(--radius) - 4px);
background: #fff;
border: 1px solid var(--line);
}
.kontaktblock__qr img{ display: block; width: 100%; max-width: 13rem; height: auto; }
.kontaktblock__qr figcaption{
margin-top: 1rem;
color: var(--ink-2);
font-size: 0.92rem;
line-height: 1.6;
}
@media (max-width: 860px){.kontaktblock{ grid-template-columns: 1fr; }}
.anrufreihe{
display: flex;
align-items: center;
justify-content: center;
gap: clamp(1rem, 4vw, 3rem);
}
.anrufmarke{
position: relative;
flex: 0 0 auto;
padding: 0.8rem 1.4rem;
border-radius: 999px;
border: 1px solid rgba(197, 237, 241, 0.3);
background: rgba(52, 165, 191, 0.12);
color: #7fd0e0;
font-family: var(--font-mono);
font-size: 0.8rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
.anrufmarke::after{
content: "";
position: absolute;
top: 50%;
width: clamp(1rem, 4vw, 3rem);
height: 2px;
}
.anrufmarke--links::after{ left: 100%; background: linear-gradient(90deg, #2fa3ba, transparent); }
.anrufmarke--rechts::after{ right: 100%; background: linear-gradient(270deg, #2fa3ba, transparent); }
.anrufkarte{
flex: 0 1 26rem;
text-align: center;
padding: clamp(1.8rem, 3.5vw, 2.6rem);
border-radius: var(--radius);
border: 1px solid rgba(127, 208, 224, 0.28);
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.25);
}
.anrufkarte__icon{
display: grid;
place-items: center;
width: 3.4rem;
height: 3.4rem;
margin: 0 auto 1rem;
border-radius: 50%;
background: var(--grad);
color: #fff;
}
.anrufkarte__icon svg{ width: 1.6rem; height: 1.6rem; }
.anrufkarte h3{ color: #fff; font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin: 0 0 0.5rem; }
.anrufkarte p{ color: var(--dark-text, rgba(255,255,255,0.75)); margin: 0 0 1.4rem; }
@media (max-width: 860px){.anrufreihe{ flex-direction: column; }.anrufmarke::after{ display: none; }.anrufkarte{ flex: 1 1 auto; width: 100%; }}
.jobkarte__text + .jobliste{ margin-top: 1.1rem; }
.balkenblock{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.6rem, 4vw, 3.2rem);
align-items: center;
}
.balken{ display: grid; gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.balken__kopf{
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.5rem;
}
.balken__kopf > :first-child{
font-size: clamp(1rem, 1.7vw, 1.15rem);
font-weight: 700;
margin: 0;
}
.balken__kopf b{
font-family: var(--font-mono);
font-size: 0.95rem;
font-weight: 600;
color: var(--blue);
}
.balken__kopf b::after{ content: "%"; }
.balken__spur{
height: 8px;
border-radius: 999px;
background: var(--line);
overflow: hidden;
}
.balken__spur span{
position: relative;
display: block;
height: 100%;
width: var(--anteil, 0%);
border-radius: 999px;
background: var(--grad);
transform-origin: left center;
overflow: hidden;
}
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;
}
.balken.ist-auf .balken__spur span::after{
content: "";
position: absolute;
inset: 0 auto 0 -40%;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
animation: balken-glanz 1.6s ease-out calc(var(--verzug, 0s) + 0.8s) 1 both;
}
.balkenblock__bild{
margin: 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.balkenblock__bild img{ display: block; width: 100%; height: auto; }
@media (max-width: 860px){.balkenblock{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){.balken__spur span{ animation: none; }}
.ticks--sp2, .ticks--sp3{
display: grid;
gap: 0.35rem clamp(1rem, 2.5vw, 2rem);
}
.ticks--sp2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ticks--sp3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 620px){.ticks--sp2, .ticks--sp3{ grid-template-columns: 1fr; }}
@media (min-width: 1100px){.team--gross:not(.team--rund).sp-3 .teamer,
.team--gross:not(.team--rund).sp-4 .teamer{
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(1.6rem, 3vw, 2.2rem);
min-height: 0;
}.team--gross:not(.team--rund).sp-3 .teamer__bild,
.team--gross:not(.team--rund).sp-4 .teamer__bild{ position: static; width: 100%; }}
.stats--gross{ gap: clamp(1rem, 2.5vw, 2rem); }
.stats--gross > *{ flex: 1 1 18rem; max-width: 26rem; }
.stats--gross .stat{
position: relative;
overflow: hidden;
padding: clamp(2.2rem, 4.5vw, 3.2rem) clamp(1.5rem, 3vw, 2.4rem);
}
.stats--gross .stat b{ font-size: clamp(2.8rem, 6vw, 4.6rem); line-height: 1; }
.stats--gross .stat span,
.stats--gross .stat .stat__label{ margin-top: 0.8rem; font-size: 0.78rem; }
.stats--gross .stat::before{
content: "";
position: absolute;
inset: auto 50% -60% auto;
translate: 50% 0;
width: 22rem;
height: 22rem;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 163, 186, 0.28), transparent 65%);
pointer-events: none;
}
.section--dark .stats--gross .stat{
background: rgba(255, 255, 255, 0.05);
border-color: rgba(127, 208, 224, 0.25);
}
.section--dark .stats--gross .stat span,
.section--dark .stats--gross .stat .stat__label{ color: var(--dark-text, rgba(255, 255, 255, 0.72)); }
@media (max-width: 640px){.stats--gross > *{ flex: 1 1 100%; }}
.section--dark .stats .stat b{
background: linear-gradient(115deg, #7fd0e0 10%, #ffffff 90%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.section--dark .stats--gross .stat::before{
background: radial-gradient(circle, rgba(127, 208, 224, 0.35), transparent 65%);
}
.wrap > .stats:only-child{ margin-bottom: 0; }
.balken__zeile{
padding: 0.35rem 0.6rem;
margin-inline: -0.6rem;
border-radius: 12px;
transition: background-color 0.3s ease;
}
@media (hover: hover){.balken__zeile:hover{ background: rgba(47, 163, 186, 0.07); }.balken__zeile:hover .balken__spur{ height: 11px; }.balken__zeile:hover .balken__kopf b{ transform: translateY(-1px) scale(1.08); }}
.balken__spur{ transition: height 0.25s ease; }
.balken__kopf b{ display: inline-block; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
@media (hover: hover){.balkenblock__bild:hover{ translate: 0 -4px; box-shadow: 0 24px 50px rgba(12, 22, 38, 0.2); }.balkenblock__bild:hover img{ scale: 1.02; }}
.balkenblock__bild img{ transition: scale 1.1s cubic-bezier(0.16, 1, 0.3, 1); }
@media (prefers-reduced-motion: reduce){html.js .balken .balken__spur span,
html.js .balken.ist-auf .balken__spur span{ transform: none; animation: none; }.balken.ist-auf .balken__spur span::after{ animation: none; display: none; }.balken__zeile, .balken__spur, .balken__kopf b,
.balkenblock__bild, .balkenblock__bild img{ transition: none; }.balkenblock__bild:hover{ transform: none; }.balkenblock__bild:hover img{ transform: none; }}
.balkenblock{ position: relative; }
.balkenblock::after{
content: "";
position: absolute;
z-index: 0;
right: -4%;
top: 50%;
translate: 0 -50%;
width: min(38rem, 46%);
aspect-ratio: 1;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 163, 186, 0.22), transparent 62%);
pointer-events: none;
}
.balkenblock__text, .balkenblock__bild{ position: relative; z-index: 1; }
.balken{
padding: clamp(1.3rem, 2.6vw, 2rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.6));
box-shadow: var(--shadow);
}
.balken__zeile + .balken__zeile{ margin-top: 0.2rem; }
.balken__kopf b{
padding: 0.18rem 0.55rem;
border-radius: 999px;
background: rgba(47, 163, 186, 0.12);
color: var(--teal-ink, #23788a);
font-size: 0.82rem;
}
.balken__spur{ height: 6px; background: rgba(47, 77, 158, 0.1); }
.balken__zeile:hover .balken__spur{ height: 8px; }
.balken__spur span{ box-shadow: 0 0 12px rgba(47, 163, 186, 0.45); }
.balken__spur span::before{
content: "";
position: absolute;
right: 0;
top: 50%;
translate: 50% -50%;
width: 10px;
height: 10px;
border-radius: 50%;
background: #fff;
border: 2px solid var(--teal, #2fa3ba);
box-shadow: 0 0 10px rgba(47, 163, 186, 0.6);
}
.balkenblock__bild{
padding: 8px;
border: 0;
border-radius: calc(var(--radius) + 8px);
background: linear-gradient(140deg, rgba(47, 163, 186, 0.65), rgba(47, 77, 158, 0.3) 55%, rgba(47, 77, 158, 0.06));
}
.balkenblock__bild img{ border-radius: var(--radius); }
@media (max-width: 860px){.balkenblock::after{ display: none; }}
@media (prefers-reduced-motion: reduce){.balkenblock__bild:hover{ translate: none; }.balkenblock__bild:hover img{ scale: none; }}
.balkenblock{ grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.balken{
position: relative;
border: 0;
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.7)) padding-box,
linear-gradient(150deg, rgba(47, 163, 186, 0.55), rgba(47, 77, 158, 0.28) 45%, rgba(47, 77, 158, 0.08)) border-box;
border: 1px solid transparent;
box-shadow: 0 18px 44px rgba(12, 22, 38, 0.1);
}
.balken__zeile + .balken__zeile{
margin-top: 0;
padding-top: 1rem;
border-top: 1px solid var(--line);
}
.balken__zeile + .balken__zeile{ border-radius: 0 0 12px 12px; }
.balken__kopf b{
font-variant-numeric: tabular-nums;
transition: background-color 0.35s ease, color 0.35s ease, scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){.balken__zeile:hover .balken__kopf b{
background: var(--grad);
color: #fff;
scale: 1.06;
}}
.balkenblock__bild{ position: relative; }
@media (prefers-reduced-motion: reduce){.balken__kopf b{ transition: none; }.balken__zeile:hover .balken__kopf b{ scale: none; }}
.balkenblock__kopf{
max-width: 46rem;
margin-bottom: clamp(1.8rem, 4vw, 2.8rem);
}
.balkenblock__kopf h2{
font-size: clamp(1.5rem, 2.9vw, 2.15rem);
line-height: 1.2;
text-wrap: balance;
hyphens: manual;
margin: 0.3rem 0 0;
}
.balkenblock{
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: center;
}
.balkenblock::after{ top: 50%; }
.balkenblock__kopf{ max-width: none; }
@media (min-width: 861px){.balkenblock{ align-items: stretch; }.balkenblock__text{ display: flex; }.balkenblock__text .balken{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}.balkenblock__bild{ display: flex; }.balkenblock__bild img{ height: 100%; object-fit: cover; }}
@media (min-width: 861px){.balkenblock__text{ align-items: stretch; }.balkenblock__text .balken{ height: 100%; }.balkenblock__bild{ height: 100%; align-items: stretch; }.balkenblock__bild img{ flex: 1; min-height: 0; }}
@media (min-width: 861px){.balkenblock__text{
display: grid;
grid-template-rows: 1fr;
align-items: stretch;
}.balkenblock__text .balken{ height: auto; }.balkenblock__bild{ display: grid; grid-template-rows: 1fr; }}
.balken__zeile{ padding-block: 0.9rem; }
.balken__zeile + .balken__zeile{ padding-top: 0.9rem; }
@media (min-width: 861px){.balkenblock__text .balken{ height: 100%; align-self: stretch; }}
.balkenblock__text .balken{ margin-top: 0; }
.grad--zusammen{ white-space: nowrap; }
.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));
}}
.steps--senkrecht{
display: grid;
gap: 0;
max-width: 54rem;
margin-inline: auto;
position: relative;
}
.steps--senkrecht > *{ flex: none; }
.steps--senkrecht .step{
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(1rem, 2.2vw, 1.6rem);
align-items: start;
background: none;
border: 0;
box-shadow: none;
padding: 0 0 clamp(1.6rem, 3vw, 2.4rem);
position: relative;
}
.steps--senkrecht .step:last-child{ padding-bottom: 0; }
.steps--senkrecht .step:not(:last-child)::after{
content: "";
position: absolute;
left: calc(clamp(2.6rem, 4vw, 3.2rem) / 2 - 1px);
top: clamp(2.6rem, 4vw, 3.2rem);
bottom: 0.4rem;
width: 2px;
background: linear-gradient(180deg, rgba(47, 163, 186, 0.5), rgba(47, 163, 186, 0.12));
}
.steps--senkrecht .step::before{ display: none; }
.steps--senkrecht .step__num{
width: clamp(2.6rem, 4vw, 3.2rem);
height: clamp(2.6rem, 4vw, 3.2rem);
border-radius: 50%;
margin: 0;
font-size: 0.95rem;
position: relative;
z-index: 1;
}
.steps--senkrecht .step h3{ margin: 0.35rem 0 0.4rem; }
.steps--senkrecht .step p{ margin: 0; }
.case--nurtext .ticks,
.case--nurtext .ticks li{ text-align: left; }
.case--nurtext .ticks{ display: inline-grid; justify-self: center; }
.case--nurtext .ticks--sp2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 620px){.case--nurtext .ticks--sp2{ grid-template-columns: 1fr; }}
.steps.steps--senkrecht{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0;
}
.steps.steps--senkrecht > .step{
flex: none !important;
width: 100%;
grid-column: 1 !important;
max-width: none;
}
main :is(h1, h2, h3, h4){ hyphens: manual; }
.steps.steps--senkrecht > .step{
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"num titel"
"num text";
column-gap: clamp(1rem, 2.2vw, 1.6rem);
row-gap: 0.35rem;
}
.steps.steps--senkrecht > .step > .step__num{ grid-area: num; align-self: start; }
.steps.steps--senkrecht > .step > h3{ grid-area: titel; margin: 0.5rem 0 0; }
.steps.steps--senkrecht > .step > p{ grid-area: text; }
.steps.steps--senkrecht > .step > p.step__satz{ grid-area: titel; margin: 0.5rem 0 0; }
.lkarte--dunkel{
background: var(--dark);
border-color: rgba(127, 208, 224, 0.22);
color: var(--dark-text, rgba(255, 255, 255, 0.78));
}
.lkarte--dunkel :is(h2, h3, h4, .lkarte__titel, b, strong){ color: #fff; }
.lkarte--dunkel .lkarte__label{
color: #7fd0e0;
border-color: rgba(127, 208, 224, 0.35);
background: rgba(127, 208, 224, 0.12);
}
.lkarte--dunkel p{ color: rgba(255, 255, 255, 0.78); }
.lkarte--dunkel .ticks li{ color: rgba(255, 255, 255, 0.8); }
.lkarte--dunkel .ticks li::before{ color: #7fd0e0; }
.preis--dunkel{
background: var(--dark);
border-color: rgba(127, 208, 224, 0.28);
}
.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); }
.preis--hervor .preis__label{ color: #7fd0e0; }
.preise .preis--band{
flex-basis: 100%;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1rem, 3vw, 2.5rem);
background: var(--surface);
border-color: rgba(47, 163, 186, 0.35);
text-align: left;
}
.preise .preis--band .preis__betrag{ margin: 0; text-align: right; white-space: nowrap; }
.preise .preis--band :is(.preis__name, .preis__text){ grid-column: 1; }
@media (max-width: 700px){.preise .preis--band{ grid-template-columns: 1fr; }.preise .preis--band .preis__betrag{ text-align: left; }}
.preise__cta{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.reelkarten{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(0.6rem, 1.4vw, 1rem);
align-items: center;
}
.reelkarte{
position: relative;
margin: 0;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 9 / 16;
background: linear-gradient(160deg, #2fa3ba, #1f5e6e);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.3);
}
.reelkarte:nth-child(2){ translate: 0 -12%; }
.reelkarte video{
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.reelkarte figcaption{
position: absolute;
inset: auto 0 0 0;
padding: 1.6rem 0.7rem 0.6rem;
background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.65));
color: #fff;
font-size: 0.74rem;
font-weight: 600;
}
.reelkarte .reel__ton{ top: 0.5rem; right: 0.5rem; }
@media (max-width: 560px){.reelkarte:nth-child(2){ translate: none; }}
.section--dark .case{
background: transparent;
border-color: transparent;
box-shadow: none;
padding-inline: 0;
}
.section--dark .case :is(h2, h3, h4, b, strong){ color: #fff; }
.section--dark .case p{ color: var(--dark-text, rgba(255, 255, 255, 0.78)); }
.section--dark .case .ticks li{ color: rgba(255, 255, 255, 0.82); }
.section--dark .case .ticks li::before{ color: #7fd0e0; }
.aufruf{
max-width: 52rem;
margin-inline: auto;
padding: clamp(2.4rem, 5vw, 3.6rem) clamp(1.6rem, 4vw, 3rem);
border-radius: calc(var(--radius) + 8px);
background: var(--grad);
color: #fff;
text-align: center;
box-shadow: 0 26px 60px rgba(12, 22, 38, 0.22);
}
.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);
}
.aufruf p{ color: rgba(255, 255, 255, 0.9); margin: 0 auto; max-width: 44em; }
.aufruf p + p{ margin-top: 0.7rem; }
.aufruf__cta{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.6rem; }
.btn--weiss{ background: #fff; color: var(--ink); border: 1px solid #fff; }
@media (hover: hover){.btn--weiss:hover{ background: rgba(255, 255, 255, 0.9); }}
.ticks--sp2, .ticks--sp3{ justify-content: center; }
.ticks--sp3{ grid-template-columns: repeat(3, max-content); }
.ticks--sp2{ grid-template-columns: repeat(2, max-content); }
@media (max-width: 860px){.ticks--sp3{ grid-template-columns: repeat(2, max-content); }}
@media (max-width: 620px){.ticks--sp2, .ticks--sp3{ grid-template-columns: max-content; }}
.rechner{
border-radius: calc(var(--radius) + 8px);
overflow: hidden;
background: var(--karte, #fff);
border: 1px solid var(--linie);
box-shadow: 0 22px 50px rgba(12, 22, 38, 0.1);
}
.rechner__kopf{
background: var(--grad);
color: #fff;
text-align: center;
padding: clamp(1.6rem, 4vw, 2.4rem) 1.4rem;
}
.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); }
.rechner__kopf p{ color: rgba(255, 255, 255, 0.88); margin: 0.5rem 0 0; }
.rechner__raster{
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(1.4rem, 4vw, 3rem);
padding: clamp(1.4rem, 4vw, 2.4rem);
}
.rechner__felder{ display: grid; gap: 0.9rem; align-content: start; }
.rfeld{ margin: 0; display: grid; gap: 0.35rem; }
.rfeld label{ font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.rfeld input{
width: 100%;
padding: 0.7rem 0.9rem;
font: inherit;
color: var(--ink);
background: var(--flaeche, #f7f9fc);
border: 1px solid var(--linie);
border-radius: 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.rechner__werte{ display: grid; gap: 0.7rem; align-content: start; }
.rwert{
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.4rem 1rem;
padding: 0.85rem 1.1rem;
border: 1px solid var(--linie);
border-radius: 14px;
background: var(--flaeche, #f7f9fc);
}
.rwert__label{ color: var(--muted); font-size: 0.92rem; }
.rwert b{ font-size: clamp(1.05rem, 2.2vw, 1.35rem); white-space: nowrap; }
.rwert--hervor{ background: var(--grad); border-color: transparent; }
.rwert--hervor .rwert__label{ color: rgba(255, 255, 255, 0.85); }
.rwert--hervor b{ color: #fff; }
@media (max-width: 820px){.rechner__raster{ grid-template-columns: 1fr; }}
.case__zitat{ margin: 0; padding-left: 1.1rem; border-left: 3px solid var(--marke); }
.case__zitat p{ font-size: clamp(1.02rem, 1.8vw, 1.18rem); font-style: italic; margin: 0; }
.case__zitat cite{ display: block; margin-top: 0.7rem; font-style: normal; font-weight: 600; color: var(--muted); }
.rechner__wertetitel{ margin: 0 0 0.2rem; font-size: clamp(1.05rem, 2vw, 1.2rem); }
.bildrahmen--klein{ max-width: 21rem; margin-inline: auto; }
.prosa--mittig{ margin-inline: auto; }
.case__block + .case__block{ margin-top: 1.2rem; }
.case__copy .case__block :is(h3, h4){ margin: 0 0 0.25rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }
.case__block p{ margin: 0; }
.kraster{ display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: var(--luecke, 1.4rem); }
.kkarte{
margin: 0;
display: flex;
flex-direction: column;
gap: 1.1rem;
padding: 1.6rem;
background: var(--karte, #fff);
border: 1px solid var(--linie);
border-radius: var(--radius);
box-shadow: 0 14px 34px rgba(12, 22, 38, 0.06);
}
.kkarte__zitat{ margin: 0; font-size: 1.02rem; color: var(--ink-2); }
.kkarte__wer{ display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.kkarte__wer img{ width: 3.2rem; height: 3.2rem; border-radius: 50%; object-fit: cover; flex: 0 0 3.2rem; }
.kkarte__name{ display: grid; }
.kkarte__name b{ font-weight: 660; }
.kkarte__rolle{ color: var(--muted); font-size: 0.9rem; }
.page-hero__nachsatz{ margin: 1rem 0 0; color: rgba(255, 255, 255, 0.78); font-size: 0.95rem; }
.hoer__unter{ margin: 1.1rem auto 0; max-width: 46rem; text-align: center; color: var(--muted); }
.section--dark .case.case :is(h2, h3, h4, b, strong){ color: #fff; }
.section--dark .case.case p{ color: var(--dark-text, rgba(255, 255, 255, 0.78)); }
.case__label{
margin: 0 0 0.5rem;
font-size: 0.76rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--marke);
}
.section--dark .case.case .case__label{ color: #7fd0e0; }
.galerie.sp-1{ display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; }
.galerie.sp-1 .galerie__bild{ width: 100%; }
.galerie.sp-1 .galerie__bild img{ width: 100%; height: auto; }
.galerie.sp-3{ display: grid; grid-template-columns: repeat(6, 1fr); align-items: start; }
.galerie.sp-3 > *{ grid-column: span 2; }
@media (max-width: 1080px){.galerie.sp-3{ grid-template-columns: repeat(2, 1fr); }.galerie.sp-3 > *,
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1),
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
.galerie.sp-3 > :last-child:nth-child(3n + 1){ grid-column: auto; }}
@media (max-width: 700px){.galerie.sp-3{ grid-template-columns: 1fr; }}
: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%; }}
.galerie--passend .galerie__bild img{ aspect-ratio: auto; height: auto; object-fit: contain; }
.lkarte :is(h2, h4){ font-size: 1.2rem; margin-bottom: 0.6rem; line-height: 1.3; }
.lkarte :is(h2, h4){ overflow-wrap: break-word; }
.section--schmal{ padding-block: clamp(1.2rem, 3vw, 2rem); }
.hinweisband{
margin: 0;
padding: 1rem 1.3rem;
border-radius: 999px;
background: linear-gradient(115deg, rgba(47, 163, 186, 0.12), rgba(38, 78, 160, 0.12));
border: 1px solid rgba(47, 163, 186, 0.3);
color: var(--ink);
text-align: center;
font-size: 0.98rem;
}
@media (max-width: 760px){.hinweisband{ border-radius: var(--radius); }}
.kacheln{
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
gap: 0.8rem;
}
.kachel{
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 1.1rem;
border: 1px solid var(--linie);
border-radius: 14px;
background: var(--karte, #fff);
font-size: 0.96rem;
transition: border-color 0.25s ease, translate 0.25s ease;
}
@media (hover: hover){.kachel:hover{ border-color: var(--marke); transform: translateY(-2px); }}
.kachel{ transition-duration: 0.6s; }
.kachel__zeichen{ font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.pakete{ display: grid; gap: clamp(1.2rem, 2.4vw, 1.8rem); }
.paket{
display: grid;
grid-template-columns: minmax(14rem, 22%) 1fr;
overflow: hidden;
border: 1px solid var(--linie);
border-radius: calc(var(--radius) + 4px);
background: var(--karte, #fff);
box-shadow: 0 16px 40px rgba(12, 22, 38, 0.07);
}
.paket--beliebt{ border-color: rgba(47, 163, 186, 0.55); }
.paket__flaeche{
display: flex;
flex-direction: column;
justify-content: center;
gap: 0.4rem;
padding: clamp(1.4rem, 3vw, 2rem);
background: var(--grad);
color: #fff;
}
.paket__badge{
align-self: start;
padding: 0.22rem 0.7rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
font-size: 0.78rem;
font-weight: 600;
}
.paket__name{ font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 700; letter-spacing: -0.02em; }
.paket__unter{ color: rgba(255, 255, 255, 0.82); font-size: 0.95rem; }
.paket__inhalt{ padding: clamp(1.4rem, 3vw, 2rem); }
.paket__marke{
display: inline-block;
margin: 0 0 0.6rem;
padding: 0.2rem 0.7rem;
border-radius: 999px;
background: rgba(47, 163, 186, 0.14);
color: var(--marke);
font-size: 0.78rem;
font-weight: 700;
}
.paket__kicker{
margin: 0 0 0.3rem;
font-size: 0.76rem;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 700;
color: var(--muted);
}
.paket__inhalt :is(h2, h3){ font-size: clamp(1.2rem, 2vw, 1.5rem); margin: 0 0 0.6rem; }
.paket__text{ color: var(--ink-2); margin: 0 0 1rem; }
.paket__chips{ list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.paket__chips li{
padding: 0.28rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--linie);
background: var(--flaeche, #f7f9fc);
font-size: 0.82rem;
color: var(--ink-2);
}
.paket__cta{ margin: 1.2rem 0 0; }
@media (max-width: 860px){.paket{ grid-template-columns: 1fr; }.paket__flaeche{ flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0.6rem 0.9rem; }}
main :is(h1, h2, h3, h4, h5, h6, p, li, span, b, strong, cite){ overflow-wrap: anywhere; }
.kacheln.sp-3{ grid-template-columns: repeat(3, 1fr); }
.kacheln.sp-2{ grid-template-columns: repeat(2, 1fr); }
@media (max-width: 900px){.kacheln.sp-3{ grid-template-columns: repeat(2, 1fr); }}
@media (max-width: 620px){.kacheln.sp-2, .kacheln.sp-3{ grid-template-columns: 1fr; }}
.kacheln.sp-5{ grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.kacheln.sp-5 .kachel{
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 0.9rem;
padding: 1.5rem 1.1rem 1.4rem;
text-align: center;
line-height: 1.5;
}
@media (max-width: 1000px){.kacheln.sp-5{ grid-template-columns: repeat(3, 1fr); }}
@media (max-width: 620px){.kacheln.sp-5{ grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }}
@media (max-width: 400px){.kacheln.sp-5{ grid-template-columns: 1fr; }}
.lkarten__schluss{ max-width: 52rem; margin: 1.6rem auto 0; text-align: center; color: var(--ink-2); }
.lkarten__schluss--hell{ color: var(--dark-text, rgba(255, 255, 255, 0.78)); }
.prosa__zurueck{ margin-top: 2rem; }
.prosa__zurueck a{ display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; color: var(--marke); }
.prosa__zurueck svg{ width: 1.05em; height: 1.05em; transition: translate 0.2s ease; }
@media (hover: hover){.prosa__zurueck a:hover svg{ translate: -3px 0; }}
.prosa__zurueck{ margin-top: 2rem; }
.prosa__zurueck a{ display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; text-decoration: none; color: var(--marke); }
.prosa__zurueck svg{ width: 1.05em; height: 1.05em; transition: translate 0.2s ease; }
@media (hover: hover){.prosa__zurueck a:hover svg{ translate: -3px 0; }}
.paket__hinweis{ margin: 1rem 0 0; padding: 0.7rem 0.9rem; border-left: 3px solid var(--marke); background: var(--flaeche, #f7f9fc); border-radius: 0 10px 10px 0; font-size: 0.92rem; color: var(--ink-2); }
.tabelle__hinweis{ margin: 0.9rem 0 0; text-align: center; color: var(--muted); font-size: 0.9rem; }
.preise__schluss{ max-width: 52rem; margin: 1.4rem auto 0; text-align: center; color: var(--muted); font-size: 0.92rem; }
.paket__vorher{ color: rgba(255, 255, 255, 0.6); font-size: 0.9rem; }
.tabelle--schmal{ min-width: 0; }
.lkarte--symbol{ text-align: center; }
.lkarte--symbol .ticks{ text-align: left; }
.lkarte__symbol{
position: relative;
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
margin: 0 auto 1rem;
border-radius: 50%;
color: var(--teal-ink);
background: var(--surface);
isolation: isolate;
}
.lkarte__symbol::before{
content: "";
position: absolute;
inset: -1.5px;
border-radius: inherit;
background: var(--grad);
z-index: -1;
}
.lkarte__symbol::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: var(--surface);
z-index: -1;
}
.lkarte__symbol svg{ width: 26px; height: 26px; }
.lkarte--dunkel .lkarte__symbol{ color: #fff; background: transparent; }
.lkarte--dunkel .lkarte__symbol::after{ background: rgba(255, 255, 255, 0.08); }
.lkarte--dunkel .lkarte__symbol::before{ background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(127,208,224,0.35)); }
@media (hover: hover){.lkarte:hover .lkarte__symbol{ transform: translateY(-2px); }.lkarte__symbol{ transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }}
.step__symbol{
display: inline-grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 12px;
background: var(--grad);
color: #fff;
margin-bottom: 1rem;
}
.step__symbol svg{ width: 22px; height: 22px; }
.rechner__kopfsymbol{
display: inline-grid;
place-items: center;
width: 58px;
height: 58px;
margin: 0 auto 0.9rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
border: 1.5px solid rgba(255, 255, 255, 0.55);
color: #fff;
box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.35);
}
.rechner__kopfsymbol svg{ width: 30px; height: 30px; }
.rfeld label{ display: inline-flex; align-items: center; gap: 0.45rem; }
.rfeld__symbol{ display: inline-grid; place-items: center; width: 18px; height: 18px; color: var(--teal-ink); flex: none; }
.rfeld__symbol svg{ width: 18px; height: 18px; }
.rechner__wertetitel{ display: flex; align-items: center; gap: 0.5rem; }
.rechner__wertetitel .rfeld__symbol{ width: 22px; height: 22px; }
.rechner__wertetitel .rfeld__symbol svg{ width: 22px; height: 22px; }
.aufruf--schlicht{
position: relative;
max-width: 46rem;
padding: clamp(2.4rem, 5vw, 3.4rem) clamp(1.6rem, 4vw, 3rem);
background: var(--surface);
color: var(--ink);
border: 1px solid var(--line);
box-shadow: 0 30px 70px -40px rgba(12, 22, 38, 0.35);
overflow: hidden;
isolation: isolate;
}
.aufruf--schlicht::before{
content: "";
position: absolute;
inset: auto -20% -60% -20%;
height: 120%;
background: radial-gradient(60% 60% at 50% 100%, rgba(63, 214, 232, 0.16), transparent 70%);
z-index: -1;
pointer-events: none;
}
.aufruf--schlicht::after{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--grad);
}
.aufruf__symbol{
display: inline-grid;
place-items: center;
width: 60px;
height: 60px;
margin: 0 auto 1.1rem;
border-radius: 18px;
background: var(--grad);
color: #fff;
box-shadow: 0 14px 30px -16px rgba(47, 77, 158, 0.6);
}
.aufruf__symbol svg{ width: 28px; height: 28px; }
.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 p{ color: var(--ink-2); }
.aufruf--schlicht .aufruf__cta{ margin-top: 1.8rem; }
.aufruf--schlicht .aufruf__cta .btn{ white-space: normal; text-align: center; max-width: 100%; line-height: 1.3; }
.aufruf--schlicht :is(h2, h3) .grad{
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.aufruf--schlicht .aufruf__knopf{
display: inline-flex;
align-items: center;
gap: 0.7rem;
padding: 0.95rem 1.7rem 0.95rem 2rem;
border-radius: 999px;
border: 0;
background: var(--grad);
color: #fff;
font-size: clamp(1.15rem, 2.2vw, 1.45rem);
font-weight: 700;
letter-spacing: -0.01em;
text-decoration: none;
box-shadow: 0 18px 40px -18px rgba(47, 77, 158, 0.7);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.aufruf--schlicht .aufruf__knopf svg{
width: 1.1em;
height: 1.1em;
flex: none;
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
@media (hover: hover){.aufruf--schlicht .aufruf__knopf:hover{ transform: translateY(-2px); box-shadow: 0 24px 46px -18px rgba(47, 77, 158, 0.8); }.aufruf--schlicht .aufruf__knopf:hover svg{ transform: translateX(4px); }}
@media (prefers-reduced-motion: reduce){.lkarte__symbol, .aufruf--schlicht .aufruf__knopf, .aufruf--schlicht .aufruf__knopf svg{ transition: none; }.aufruf--schlicht .aufruf__knopf:hover{ transform: none; }}
.hoer--welle{
--p: 0;
position: relative;
display: block;
max-width: 860px;
padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1.2rem, 2.8vw, 2.1rem);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: calc(var(--radius) + 6px);
background:
radial-gradient(60% 90% at 100% 0%, rgba(41, 178, 205, 0.22), transparent 60%),
radial-gradient(50% 80% at 0% 100%, rgba(59, 91, 219, 0.28), transparent 60%),
linear-gradient(160deg, #101a30, #0b1224 60%, #0a1020);
color: #fff;
box-shadow: 0 30px 70px -30px rgba(10, 20, 45, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
overflow: hidden;
isolation: isolate;
}
.hoer--welle::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
-webkit-mask-image: radial-gradient(80% 90% at 50% 50%, #000 30%, transparent 100%);
pointer-events: none;
z-index: -1;
}
.hoer--welle::after{
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: var(--grad);
opacity: 0.9;
}
.hoer__kopf{
display: flex;
align-items: center;
gap: 0.9rem;
margin-bottom: clamp(1rem, 2.2vw, 1.5rem);
}
.hoer__zeichen{
flex: 0 0 auto;
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
color: #fff;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7);
}
.hoer__zeichen svg{ width: 22px; height: 22px; }
.hoer--welle .hoer__titel{ color: #fff; font-weight: 700; font-size: 1.05rem; }
.hoer--welle .hoer__text{ color: rgba(226, 234, 246, 0.72); }
.hoer__puls{
flex: 0 0 auto;
display: flex;
align-items: flex-end;
gap: 3px;
height: 22px;
margin-left: auto;
opacity: 0.35;
transition: opacity 0.4s ease;
}
.hoer__puls i{
width: 4px;
height: 30%;
border-radius: 2px;
background: linear-gradient(180deg, #7fe1f0, #3b5bdb);
transform-origin: bottom;
}
.hoer[data-laeuft="ja"] .hoer__puls{ opacity: 1; }
.hoer[data-laeuft="ja"] .hoer__puls i{ animation: hoerPuls 0.9s ease-in-out infinite; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(2){ animation-delay: 0.15s; animation-duration: 1.1s; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(3){ animation-delay: 0.3s; animation-duration: 0.8s; }
.hoer[data-laeuft="ja"] .hoer__puls i:nth-child(4){ animation-delay: 0.45s; animation-duration: 1s; }
.hoer__zeile{
display: flex;
align-items: center;
gap: clamp(0.9rem, 2vw, 1.4rem);
}
.hoer--welle .hoer__knopf{
position: relative;
width: 66px;
height: 66px;
box-shadow: 0 16px 34px -14px rgba(41, 178, 205, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
}
.hoer--welle .hoer__knopf svg{ width: 26px; height: 26px; }
.hoer--welle .hoer__knopf::before{
content: "";
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid rgba(127, 225, 240, 0.55);
opacity: 0;
}
.hoer--welle[data-laeuft="ja"] .hoer__knopf::before{ animation: hoerRing 1.8s ease-out infinite; }
.hoer__form{
position: relative;
flex: 1;
min-width: 0;
display: flex;
align-items: center;
gap: 3px;
height: 64px;
padding: 0 2px;
cursor: pointer;
border-radius: 10px;
}
.hoer__form i{
flex: 1 1 0;
min-width: 2px;
height: calc(var(--h) * 100%);
min-height: 4px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.22);
transition: background 0.25s ease, transform 0.25s ease;
}
.hoer__form:hover i{ background: rgba(255, 255, 255, 0.3); }
.hoer__kopfzeile{
position: absolute;
inset: 0;
display: flex;
align-items: center;
gap: 3px;
padding: 0 2px;
pointer-events: none;
clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
transition: clip-path 0.2s linear;
}
.hoer__kopfzeile i{
background: linear-gradient(180deg, #8ff0ff, #29b2cd 55%, #3b5bdb);
box-shadow: 0 0 12px rgba(41, 178, 205, 0.55);
}
.hoer--welle .hoer__zeit{
flex: 0 0 auto;
display: flex;
gap: 0.35rem;
font-size: 0.85rem;
color: rgba(226, 234, 246, 0.85);
font-variant-numeric: tabular-nums;
}
.hoer--welle .hoer__zeit [data-hoer-zeit]{ color: #fff; font-weight: 600; }
.hoer__trenner{ opacity: 0.5; }
@media (max-width: 560px){.hoer--welle .hoer__zeile{ flex-wrap: wrap; }.hoer__form{ order: 3; width: 100%; flex: 1 1 100%; height: 52px; }.hoer--welle .hoer__zeit{ margin-left: auto; width: auto; }.hoer--welle .hoer__knopf{ width: 58px; height: 58px; }}
.case__block--symbol{
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.case__block--symbol + .case__block--symbol{ margin-top: 1.35rem; }
.case__blocksymbol{
flex: 0 0 auto;
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-top: 0.1rem;
border-radius: 13px;
color: #fff;
background: var(--grad);
box-shadow: 0 12px 24px -12px rgba(47, 77, 158, 0.75);
}
.case__blocksymbol svg{ width: 21px; height: 21px; }
.case__blocktext{ min-width: 0; }
@media (prefers-reduced-motion: reduce){.hoer[data-laeuft="ja"] .hoer__puls i, .hoer--welle[data-laeuft="ja"] .hoer__knopf::before{ animation: none; }.hoer__kopfzeile, .hoer__form i, .hoer__puls{ transition: none; }}
.section__head--gross > :is(h3, h4){
font-size: clamp(1.9rem, 3.6vw, 2.9rem);
font-weight: 720;
font-stretch: 106%;
}
.galerie--lauf{ display: block; }
.galerie__reihe{
overflow: hidden;
padding: 0.6rem 0 1rem;
mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.galerie__spur{
display: flex;
align-items: center;
width: max-content;
animation: galerieLauf var(--dauer, 45s) linear infinite;
}
.galerie--lauf .galerie__bild{
flex: 0 0 auto;
width: clamp(300px, 36vw, 560px);
margin-right: clamp(1rem, 2vw, 1.6rem);
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.galerie--lauf .galerie__bild:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(12, 22, 38, 0.45); }
.galerie--lauf .galerie__bild img{ width: 100%; height: auto; aspect-ratio: auto; object-fit: contain; }
@media (hover: hover){.galerie--lauf:hover .galerie__spur{ animation-play-state: paused; }}
@media (prefers-reduced-motion: reduce){.galerie__spur{ animation: none; }.galerie__reihe{ overflow-x: auto; mask-image: none; -webkit-mask-image: none; }.galerie--lauf .galerie__bild{ transition: none; }.galerie--lauf .galerie__bild:hover{ transform: none; }}
.lkarte--symbol :is(h3, h4){ hyphens: manual; overflow-wrap: normal; }
.lkarten--letzte-breit > :last-child,
.lkarten.lkarten--letzte-breit > :last-child:nth-child(n){ flex: 1 1 100%; max-width: none; grid-column: 1 / -1; }
.lkarten--letzte-breit > :last-child > :is(h3, h4, .lkarte__text, .ticks){ max-width: 62ch; margin-inline: auto; }
@media (max-width: 720px){.lkarten.sp-3 > :nth-last-child(2):nth-child(3n + 1),
.lkarten.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
.lkarten.sp-4 > :nth-last-child(2):nth-child(4n + 1),
.lkarten.sp-4 > :nth-last-child(2):nth-child(4n + 1) ~ *{ flex-basis: 100%; max-width: none; }}
.section--dark .lkarte.lkarte--dunkel :is(h2, h3, h4){ color: #fff; }
.beitraege--deck{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.beitrag--deck{
padding: 0;
overflow: hidden;
gap: 0;
}
.beitrag--deck .beitrag__inhalt{
display: flex;
flex-direction: column;
flex: 1;
gap: 0.5rem;
padding: clamp(1.1rem, 2.2vw, 1.4rem) clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.2rem, 2.4vw, 1.5rem);
}
.beitrag__deck{
--deck-a: #2f4d9e;
--deck-b: #2fa3ba;
position: relative;
display: grid;
place-items: center;
aspect-ratio: 16 / 8;
background:
radial-gradient(70% 90% at 100% 0%, rgba(255, 255, 255, 0.18), transparent 60%),
linear-gradient(135deg, var(--deck-a), var(--deck-b));
overflow: hidden;
isolation: isolate;
}
.beitrag__deck::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 26px 26px;
mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
-webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
}
.beitrag__deck::after{
content: "";
position: absolute;
width: 62%;
aspect-ratio: 1;
right: -18%;
bottom: -55%;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.28);
box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.05), 0 0 0 54px rgba(255, 255, 255, 0.04);
}
.beitrag__zeichen{
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 64px;
height: 64px;
border-radius: 20px;
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 18px 34px -18px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35);
backdrop-filter: blur(6px);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.beitrag__zeichen svg{ width: 30px; height: 30px; }
@media (hover: hover){.beitrag--deck:hover .beitrag__zeichen{ transform: translateY(-4px) scale(1.06); }}
.beitrag__deck--ki{ --deck-a: #3b2fa3; --deck-b: #2f7fd8; }
.beitrag__deck--web{ --deck-a: #2f4d9e; --deck-b: #2fa3ba; }
.beitrag__deck--seo{ --deck-a: #1f7a8c; --deck-b: #3fc1a0; }
.beitrag__deck--shop{ --deck-a: #b8452a; --deck-b: #e08a3c; }
.beitrag__deck--marketing{ --deck-a: #a02f7a; --deck-b: #e0537f; }
.beitrag__deck--recht{ --deck-a: #16233d; --deck-b: #2f5fd8; }
.beitrag__deck--foerderung{ --deck-a: #1f6b4a; --deck-b: #4fbf7a; }
.beitrag__deck--news{ --deck-a: #24324f; --deck-b: #5b7fe0; }
.beitrag__datum{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--teal-ink);
}
@media (min-width: 900px){.beitrag--gross{
grid-column: span 2;
flex-direction: row;
}.beitrag--gross .beitrag__deck{ flex: 0 0 48%; aspect-ratio: auto; min-height: 100%; }.beitrag--gross .beitrag__zeichen{ width: 84px; height: 84px; border-radius: 26px; }.beitrag--gross .beitrag__zeichen svg{ width: 40px; height: 40px; }.beitrag--gross .beitrag__inhalt{ justify-content: center; padding: clamp(1.4rem, 2.8vw, 2.2rem); }.beitrag--gross .beitrag__titel{ font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.25; }.beitrag--gross .beitrag__text{ font-size: 1rem; }}
@media (prefers-reduced-motion: reduce){.beitrag__zeichen{ transition: none; }.beitrag--deck:hover .beitrag__zeichen{ transform: none; }}
.paket__symbol{
display: grid;
place-items: center;
width: 58px;
height: 58px;
margin-bottom: 0.4rem;
border-radius: 18px;
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 0 16px 30px -18px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.paket__symbol svg{ width: 28px; height: 28px; }
@media (max-width: 860px){.paket__symbol{ width: 46px; height: 46px; border-radius: 14px; margin-bottom: 0; }.paket__symbol svg{ width: 22px; height: 22px; }}
.section--dark .paket{ color: var(--ink-2); border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6); }
.section--dark .paket .paket__inhalt :is(h2, h3){ color: var(--ink); }
.section--dark .paket .ticks li{ color: var(--ink-2); }
.kachel__symbol{
flex: 0 0 auto;
display: grid;
place-items: center;
width: 36px;
height: 36px;
border-radius: 11px;
color: #fff;
background: var(--grad);
}
.kachel__symbol svg{ width: 18px; height: 18px; }
.case__copy .case__block h2{ margin: 0 0 0.35rem; font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.case__copy .ticks--sp2{ grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: start; }
@media (max-width: 620px){.case__copy .ticks--sp2{ grid-template-columns: 1fr; }}
.case__copy p + .case__block{ margin-top: 1.3rem; }
.section__knopf--reihe{ display: flex; flex-wrap: wrap; justify-content: center; gap: 0.7rem; }
.case__ctas{ display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.4rem 0 0; }
.case--split .case__copy h2.case__titel{ font-size: clamp(1.55rem, 2.5vw, 2.15rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1rem; hyphens: manual; overflow-wrap: break-word; }
.pakete--breit .paket{ grid-template-columns: 1fr 1fr; }
.pakete--breit .paket__flaeche{
order: 2;
position: relative;
align-items: center;
justify-content: center;
text-align: center;
gap: 0.5rem;
padding: clamp(2.2rem, 4vw, 3.6rem) clamp(1.6rem, 3vw, 2.4rem);
overflow: hidden;
isolation: isolate;
}
.pakete--breit .paket:nth-child(even) .paket__flaeche{ order: 0; }
.pakete--breit .paket__flaeche::before{
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.07) 1px, transparent 1px);
background-size: 28px 28px;
mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
-webkit-mask-image: radial-gradient(90% 90% at 50% 50%, #000 20%, transparent 100%);
z-index: -1;
}
.pakete--breit .paket__flaeche::after{
content: "";
position: absolute;
width: 70%;
aspect-ratio: 1;
right: -25%;
bottom: -45%;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.05), 0 0 0 62px rgba(255, 255, 255, 0.04);
z-index: -1;
}
.pakete--breit .paket__badge{ position: absolute; top: 1.1rem; right: 1.1rem; align-self: auto; backdrop-filter: blur(4px); }
.pakete--breit .paket__symbol{ width: 78px; height: 78px; border-radius: 24px; margin-bottom: 0.8rem; }
.pakete--breit .paket__symbol svg{ width: 36px; height: 36px; }
.pakete--breit .paket__name{ font-size: clamp(2rem, 3.6vw, 3.1rem); line-height: 1.05; text-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); }
.pakete--breit .paket__unter{ font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; color: rgba(255, 255, 255, 0.85); }
.pakete--breit .paket__inhalt{ padding: clamp(1.6rem, 3vw, 2.6rem); }
.pakete--breit .ticks--klein li b{ color: var(--ink); font-weight: 650; }
@media (max-width: 860px){.pakete--breit .paket{ grid-template-columns: 1fr; }.pakete--breit .paket__flaeche, .pakete--breit .paket:nth-child(even) .paket__flaeche{ order: 0; flex-direction: column; min-height: 220px; }.pakete--breit .paket__badge{ top: 0.9rem; right: 0.9rem; }.pakete--breit .paket__symbol{ width: 60px; height: 60px; border-radius: 18px; }.pakete--breit .paket__symbol svg{ width: 28px; height: 28px; }}
.page-hero h1.hero__h1--klein{ font-size: clamp(1.75rem, 3.5vw, 2.7rem); hyphens: manual; overflow-wrap: normal; }
@media (max-width: 640px){.page-hero h1.hero__h1--klein{ hyphens: auto; overflow-wrap: anywhere; }}
.hinweisband--unter{ margin-top: clamp(1.6rem, 3.2vw, 2.4rem); }
.page-hero h1.hero__h1--klein .grad{ display: inline; }
.lkarten--links .lkarte--symbol{ text-align: left; }
.lkarten--links .lkarte__symbol{ margin-left: 0; }
.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; }
.merkmale{ max-width: 58rem; margin: 0 auto; }
.merkmal{
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.5rem);
padding: clamp(1.5rem, 3vw, 2.2rem) 0;
border-top: 1px solid var(--line);
}
.merkmal:first-child{ border-top: 0; padding-top: 0.4rem; }
.merkmal:last-child{ padding-bottom: 0.4rem; }
.merkmal__symbol{
display: grid;
place-items: center;
width: 58px;
height: 58px;
border-radius: 18px;
color: #fff;
background: var(--grad);
box-shadow: 0 14px 28px -14px rgba(47, 77, 158, 0.7);
}
.merkmal__symbol svg{ width: 26px; height: 26px; }
.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; }
.merkmal__text p{ margin: 0; color: var(--ink-2); line-height: 1.65; }
.merkmal__text p + p, .merkmal__text .ticks + p{ margin-top: 0.85rem; }
.merkmal__text .ticks{ margin: 0.7rem 0 0; }
.section--dark .merkmal__text :is(h2, h3, h4){ color: #fff; }
@media (max-width: 560px){.merkmal{ grid-template-columns: 46px minmax(0, 1fr); gap: 0.9rem; }.merkmal__symbol{ width: 46px; height: 46px; border-radius: 14px; }.merkmal__symbol svg{ width: 22px; height: 22px; }}
.case--split.case--mitte{ align-items: center; }
@media (min-width: 861px){.case--split.case--mitte .case__visual{ position: static; }}
.steps.steps--senkrecht > .step > .step__symbol{ grid-area: num; align-self: start; margin: 0; width: clamp(2.6rem, 4vw, 3.2rem); height: clamp(2.6rem, 4vw, 3.2rem); border-radius: 50%; position: relative; z-index: 1; }
.steps.steps--senkrecht > .step > .step__inhalt{ grid-area: text; min-width: 0; }
.step__inhalt > p{ margin: 0; color: var(--ink-2); line-height: 1.65; }
.step__inhalt > p + p{ margin-top: 0.85rem; }
.step__inhalt > .step__foto + p{ margin-top: 1.1rem; }
.step__foto{
margin: 1rem 0 0;
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 18px 40px -22px rgba(12, 22, 38, 0.35);
}
.step__foto img{ display: block; width: 100%; height: auto; }
.steps--senkrecht .step:not(:last-child)::after{ bottom: 0.2rem; }
.sprung{
display: flex;
flex-direction: column;
align-items: center;
gap: 0.9rem;
margin: 0 auto clamp(2.6rem, 5vw, 4rem);
max-width: 60rem;
}
.sprung__label{ font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--teal-ink); }
.sprung__liste{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.sprung__chip{
display: inline-flex;
align-items: center;
gap: 0.6rem;
padding: 0.4rem 1.05rem 0.4rem 0.4rem;
border-radius: 999px;
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.25;
text-decoration: none;
box-shadow: 0 10px 24px -18px rgba(12, 22, 38, 0.35);
transition: border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.sprung__nr{
flex: 0 0 auto;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--grad);
color: #fff;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 700;
}
.sprung__chip:hover{ border-color: rgba(47, 163, 186, 0.5); color: var(--teal-ink); transform: translateY(-2px); box-shadow: 0 18px 30px -18px rgba(34, 58, 124, 0.4); }
@media (prefers-reduced-motion: reduce){.sprung__chip{ transition: none; }.sprung__chip:hover{ transform: none; }}
.galerie--lauf .galerie__feld{
flex: 0 0 auto;
width: clamp(300px, 36vw, 560px);
margin-right: clamp(1rem, 2vw, 1.6rem);
padding: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
background: var(--bg);
box-shadow: var(--shadow);
cursor: zoom-in;
transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s ease;
}
.galerie--lauf .galerie__feld{ aspect-ratio: auto; height: auto; display: block; }
.galerie--lauf .galerie__feld img{ display: block; width: 100%; height: auto; aspect-ratio: auto; object-fit: cover; }
.galerie--lauf .galerie__feld::after{ display: none; }
@media (hover: hover){.galerie--lauf .galerie__feld:hover{ transform: translateY(-6px); box-shadow: 0 30px 50px -28px rgba(12, 22, 38, 0.45); }}
@media (prefers-reduced-motion: reduce){.galerie--lauf .galerie__feld{ transition: none; }.galerie--lauf .galerie__feld:hover{ transform: none; }}
@media (min-width: 861px){.case--split.case--bildbreit{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }.case--split.case--bildbreit.case--flip{ grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }}
.prosa .ticks--sp2{ grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; text-align: left; }
@media (max-width: 620px){.prosa .ticks--sp2{ grid-template-columns: 1fr; }}
.merkmale__zurueck{ max-width: 58rem; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; }
.case__chips{ margin: 1.1rem 0 0; }
: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; }
.interview .merkmal__text > p:first-child{ margin-top: 0; }
.stimmen--raster{ overflow: visible; -webkit-mask-image: none; mask-image: none; }
.stimmen--raster::after{ display: none; }
.stimmen--raster .stimmen__band{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; animation: none; will-change: auto; }
.stimmen--raster .stimme{ flex-basis: auto; }
@media (max-width: 960px){.stimmen--raster .stimmen__band{ grid-template-columns: repeat(2, minmax(0, 1fr)); }}
@media (max-width: 620px){.stimmen--raster .stimmen__band{ grid-template-columns: minmax(0, 1fr); }}
.plattformen{ display: grid; gap: clamp(1.3rem, 2.6vw, 2rem); }
.plattform{
padding: clamp(1.3rem, 2.8vw, 2.2rem);
border: 1px solid var(--linie);
border-radius: var(--radius);
background: var(--karte, #fff);
box-shadow: var(--shadow);
}
.plattform__kopf{ display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
.plattform__kopf > *{ margin: 0; font-size: clamp(1.35rem, 2.2vw, 1.75rem); line-height: 1.2; }
.plattform__kopf::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); flex: 0 0 auto; }
.plattform__leib{ display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.4rem, 3vw, 2.4rem); align-items: center; }
.plattform__leib--ohnebild{ grid-template-columns: minmax(0, 1fr); }
.plattform__text p{ color: var(--ink-2); }
.plattform__text p + p{ margin-top: 0.85rem; }
.plattform__text h4, .bilanz h4{ margin: 0 0 0.55rem; font-size: 0.98rem; }
.plattform__text h4{ margin-top: 1.1rem; }
.plattform__text .ticks{ display: grid; gap: 0.45rem; margin: 0.4rem 0 0.6rem; }
.plattform__bild{ margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--linie); box-shadow: var(--shadow); background: #fff; }
.plattform__bild img{ display: block; width: 100%; height: auto; }
.plattform__bilanz{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; padding-top: 1.5rem; border-top: 1px solid var(--linie); }
.bilanz{ padding: 1.05rem 1.2rem 1.1rem; border-radius: 16px; border: 1px solid var(--linie); }
.bilanz .ticks{ display: grid; gap: 0.45rem; }
.bilanz--plus{ background: rgba(92, 203, 122, 0.08); border-color: rgba(92, 203, 122, 0.38); }
.bilanz--minus{ background: rgba(224, 83, 127, 0.06); border-color: rgba(224, 83, 127, 0.32); }
.bilanz--plus h4{ color: #1f7a3e; }
.bilanz--minus h4{ color: #b4325c; }
.bilanz--plus .ticks li::before{ 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, #2f9e5a, #5ccb7a); }
.ticks--minus li::before{ background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M5 5l6 6M11 5l-6 6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round"/></svg>') center / 100% no-repeat, linear-gradient(115deg, #c93b6a, #e0537f); }
.plattform__ideal{ display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.8rem; margin-top: 1.2rem; }
.plattform__ideal p{ margin: 0; font-weight: 650; color: var(--ink); }
.plattform__ideal .paket__chips{ margin: 0; }
.plattformen__schluss, .tabelle__danach{ margin-top: 1.5rem; max-width: 70ch; }
.kacheln__danach{ margin: 1.6rem auto 0; max-width: 70ch; text-align: center; }
@media (max-width: 880px){.plattform__leib{ grid-template-columns: minmax(0, 1fr); }.plattform__bild{ order: -1; }.plattform__bilanz{ grid-template-columns: minmax(0, 1fr); }}
.sp-5.sp-5{ --spalten: 5; }
.lkarten--linkunten .lkarte{ display: flex; flex-direction: column; }
.lkarten--linkunten .lkarte__link{ margin-top: auto; padding-top: 1rem; align-self: center; }
.merkmale--karte{ max-width: none; padding: 0 clamp(1.2rem, 2.6vw, 2.2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.merkmale--karte .merkmal{ padding: clamp(1.1rem, 2vw, 1.5rem) 0; }
.merkmale--karte .merkmal:first-child{ padding-top: clamp(1.1rem, 2vw, 1.5rem); }
.merkmale--karte .merkmal:last-child{ padding-bottom: clamp(1.1rem, 2vw, 1.5rem); }
.merkmal--link{ grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; }
.merkmal__chips{ margin: 0.6rem 0 0; }
.merkmal__chips li{ font-size: 0.9rem; padding: 0.35rem 0.8rem; }
.merkmal__link{ white-space: nowrap; }
.merkmale--karte .merkmal__text > h3{ margin-bottom: 0; }
@media (max-width: 720px){.merkmal--link{ grid-template-columns: 48px minmax(0, 1fr); }.merkmal__link{ grid-column: 2; justify-self: start; margin-top: 0.2rem; }}
.merkmal--link{ position: relative; }
.merkmal__link::after{ content: ""; position: absolute; inset: 0; }
.merkmal__symbol, .merkmal__link svg, .merkmal__text > h3{ transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease, color 0.5s ease; }
.plattform{ transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s ease, border-color 0.7s ease; }
.plattform__bild img{ transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.merkmal__chips li, .plattform__ideal .paket__chips li{ transition: border-color 0.5s ease, background 0.5s ease, color 0.5s ease; }
@media (hover: hover){.merkmal--link:hover .merkmal__symbol{ translate: 0 -3px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }.merkmal--link:hover .merkmal__text > h3{ color: var(--marke, #2f5fd8); }.merkmal--link:hover .merkmal__link svg{ translate: 4px 0; }.plattform:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.3); }.plattform:hover .plattform__bild img{ transform: scale(1.015); }.merkmal__chips li:hover, .plattform__ideal .paket__chips li:hover{ border-color: var(--marke, #2f5fd8); color: var(--marke, #2f5fd8); background: #fff; }}
@media (prefers-reduced-motion: reduce){.merkmal__symbol, .merkmal__link svg, .merkmal__text > h3, .plattform, .plattform__bild img{ transition: none; }.merkmal--link:hover .merkmal__symbol, .merkmal--link:hover .merkmal__link svg{ translate: 0 0; }.plattform:hover{ transform: none; }.plattform:hover .plattform__bild img{ transform: none; }}
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; }}
.step__zeit{ margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--teal-ink, #1e7b90); }
.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--dunkel{ background: linear-gradient(160deg, #16233d, #0d1526); border-color: rgba(255,255,255,0.1); color: #fff; }
.mock__tag{ display: block; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3, #6b7a99); text-align: right; }
.mock--dunkel .mock__tag{ color: rgba(255,255,255,0.55); }
.mock__lab{ display: block; margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }
.mock__chips{ list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mock__chips li{ padding: 0.32rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 500; }
.mock__chips--weg li{ border: 1px solid var(--line); color: #8a93a8; text-decoration: line-through; background: #fff; }
.mock__chips--da li{ background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; }
.mock__vs{ display: grid; justify-items: center; gap: 0.5rem; margin: 1.3rem 0; text-align: center; }
.mock__note{ font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: #8a93a8; line-height: 1.7; }
.mock__pfeil{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; }
.mock__pfeil svg{ width: 18px; height: 18px; }
.mock__vslabel{ font-weight: 700; color: var(--ink); }
.mock__dash{ display: grid; gap: 0.5rem; }
.mock__dashhead{ display: flex; justify-content: space-between; padding: 0 0.4rem 0.4rem; font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.5); }
.mock__row{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); }
.mock__name{ font-weight: 650; }
.mock__meta{ font-size: 0.74rem; color: rgba(255,255,255,0.55); margin-top: 0.15rem; }
.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; }
.mock__pill--g{ background: rgba(92,203,122,0.18); color: #7fe0a0; }
.mock__pill--a{ background: rgba(245,196,81,0.2); color: #f5c451; }
.mock__pill--b{ background: rgba(127,225,240,0.18); color: #7fe1f0; }
.mock__portalhead{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.mock__greet{ font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.mock__greet em{ font-style: normal; color: var(--teal-ink, #1e7b90); }
.mock__avatar{ display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(115deg, var(--blue), var(--teal)); color: #fff; font-weight: 700; }
.mock__pcard{ padding: 0.85rem 0.95rem; border: 1px solid var(--line); border-radius: 12px; background: #f9fbfe; }
.mock__pcard + .mock__pcard{ margin-top: 0.6rem; }
.mock__pcardhead{ display: flex; justify-content: space-between; gap: 1rem; font-weight: 650; color: var(--ink); }
.mock__prozent{ font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3, #6b7a99); }
.mock__prog{ height: 6px; margin: 0.55rem 0; border-radius: 999px; background: #e6ecf5; overflow: hidden; }
.mock__prog > span{ display: block; height: 100%; width: var(--p, 50%); border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--teal)); }
.mock__pmeta{ font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }
.merkmal__label{ margin: 0 0 0.45rem; }
.merkmale--breit{ max-width: none; }
.merkmale--breit .merkmal{ grid-template-columns: 72px minmax(0, 1fr); }
.merkmale--breit .merkmal__text > h2{ font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0.7rem; }
.merkmale--breit .merkmal__text p{ max-width: 72ch; }
.merkmale--breit .merkmal__text p + p{ margin-top: 0.85rem; }
.merkmale--karte.merkmale--breit{ padding-inline: clamp(1.4rem, 3vw, 2.6rem); }
.merkmale--karte.merkmale--breit .merkmal{ padding-block: clamp(1.6rem, 3vw, 2.4rem); }
.bereich{ display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.bereich__kopf{ position: sticky; top: 6rem; }
.bereich__kopf > h2, .bereich__kopf > h3{ margin: 0 0 0.8rem; text-wrap: balance; }
.bereich__kopf .section__intro{ margin: 0; }
.bereich__symbol{ display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 1.2rem; border-radius: 18px; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; box-shadow: 0 14px 28px -14px rgba(47, 95, 216, 0.6); }
.bereich__symbol svg{ width: 26px; height: 26px; }
.bereich__zahl{ margin: 1.2rem 0 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3, #6b7a99); }
.bereich__karten{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem; }
.bereich__karten > .angebot:last-child:nth-child(odd){ grid-column: 1 / -1; }
.angebot{
position: relative;
display: grid;
grid-template-columns: 48px minmax(0, 1fr) 20px;
align-items: start;
gap: 0.9rem;
padding: 1.15rem 1.15rem 1.15rem 1.1rem;
border: 1px solid var(--line);
border-radius: 18px;
background: var(--surface);
color: inherit;
text-decoration: none;
box-shadow: var(--shadow);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease;
}
.angebot__symbol{ display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: linear-gradient(135deg, rgba(47, 95, 216, 0.12), rgba(47, 163, 186, 0.14)); color: var(--marke, #2f5fd8); transition: background 0.6s ease, color 0.6s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1); }
.angebot__symbol svg{ width: 22px; height: 22px; }
.angebot__text{ display: grid; gap: 0.2rem; min-width: 0; }
.angebot__text > h3, .angebot__text > h4{ margin: 0; font-size: 1.02rem; line-height: 1.3; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; transition: color 0.5s ease; }
.angebot__text > span{ font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.angebot__pfeil{ display: grid; place-items: center; width: 20px; height: 20px; margin-top: 0.35rem; color: var(--ink-3, #6b7a99); transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), color 0.5s ease; }
.angebot__pfeil svg{ width: 18px; height: 18px; }
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 (hover: hover){.angebot:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }.angebot:hover .angebot__symbol{ background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; translate: 0 -2px; }.angebot:hover .angebot__text > h3{ color: var(--marke, #2f5fd8); }.angebot:hover .angebot__pfeil{ translate: 4px 0; color: var(--marke, #2f5fd8); }}
@media (max-width: 960px){.bereich{ grid-template-columns: minmax(0, 1fr); }.bereich__kopf{ position: static; }}
@media (max-width: 620px){.bereich__karten{ grid-template-columns: minmax(0, 1fr); }.bereich__karten > .angebot:last-child:nth-child(odd){ grid-column: auto; }}
@media (prefers-reduced-motion: reduce){.angebot, .angebot__symbol, .angebot__pfeil, html.js .angebot[data-reveal]{ transition: none; }.angebot:hover{ transform: none; }}
.merkmale__schluss{ max-width: 58rem; margin: 1.4rem auto 0; }
.lkarten.sp-4 .lkarte > h3, .lkarten.sp-4 .lkarte > h4{ -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
.paket__preisblock{ margin: 1.1rem 0 0.3rem; padding: 0.9rem 1rem; border-radius: 14px; background: var(--flaeche, #f7f9fc); border: 1px solid var(--linie); }
.paket__preisalt{ display: block; font-size: 0.82rem; color: var(--ink-3, #6b7a99); }
.paket__preis{ margin: 0.15rem 0 0; font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.02em; color: var(--marke, #2f5fd8); line-height: 1.15; }
.paket__preis small{ font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--ink-3, #6b7a99); }
.paket__ersparnis{ display: inline-block; margin-left: 0.4rem; padding: 0.2rem 0.6rem; border-radius: 999px; background: rgba(47, 163, 186, 0.14); color: var(--teal-ink, #1e7b90); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; vertical-align: middle; }
.paket__kinote{ display: flex; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; font-size: 0.88rem; font-weight: 600; color: var(--teal-ink, #1e7b90); }
.paket__kisymbol{ display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; background: linear-gradient(135deg, var(--blue), var(--teal)); color: #fff; flex: 0 0 auto; }
.paket__kisymbol svg{ width: 14px; height: 14px; }
.pakete--breit .ticks--klein li strong{ color: var(--ink); font-weight: 650; }
.pakete--breit .paket__hinweis{ margin-top: 1rem; padding: 0.8rem 1rem; border-radius: 12px; background: var(--flaeche, #f7f9fc); border: 1px solid var(--linie); }
.case__danach{ max-width: 72ch; margin: clamp(1.6rem, 3vw, 2.4rem) auto 0; color: var(--ink-2); }
.case__danach p + p{ margin-top: 0.9rem; }
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;
}
.section--knapp{ padding-block: clamp(1.4rem, 2.6vw, 2.2rem); }
.kacheln--gross{ gap: 1rem; }
.kacheln--gross .kachel{
align-items: flex-start;
gap: 1rem;
padding: 1.35rem 1.4rem;
border-radius: 18px;
box-shadow: 0 10px 30px -22px rgba(12, 22, 38, 0.35);
line-height: 1.6;
color: var(--ink-2);
transition: border-color 0.7s ease, translate 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
.kacheln--gross .kachel__symbol{ width: 46px; height: 46px; border-radius: 14px; }
.kacheln--gross .kachel__symbol svg{ width: 22px; height: 22px; }
.kacheln--gross .kachel__titel{ display: block; margin-bottom: 0.2rem; color: var(--ink); font-weight: 700; }
.kacheln.sp-2 > li:last-child:nth-child(odd){ grid-column: 1 / -1; }
@media (max-width: 620px){.kacheln.sp-2 > li:last-child:nth-child(odd){ grid-column: auto; }}
@media (hover: hover){.kacheln--gross .kachel:hover{ transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(12, 22, 38, 0.45); }.kachel__symbol{ transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease; }.kachel:hover .kachel__symbol{ translate: 0 -2px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }.merkmale--karte .merkmal:hover .merkmal__symbol{ translate: 0 -3px; box-shadow: 0 12px 24px -10px rgba(47, 95, 216, 0.5); }}
@media (prefers-reduced-motion: reduce){.lkarte__deko, .kacheln--gross .kachel, .kachel__symbol{ transition: none; }}
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; }}
.case__zahlen{
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 1.2rem clamp(1.6rem, 3vw, 2.6rem);
margin: 1.4rem 0 0;
padding: 1.2rem 0 0;
border-top: 1px solid var(--line);
}
.case__zahlen li{ display: flex; flex-direction: column; gap: 0.15rem; }
.case__zahlen b{ font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight: 800; letter-spacing: -0.02em; color: var(--marke); line-height: 1.1; }
.case__zahlen span{ font-size: 0.82rem; color: var(--muted); }
.case__wichtig{
padding: 0.9rem 1.1rem;
border-left: 3px solid var(--marke);
border-radius: 0 12px 12px 0;
background: rgba(47, 163, 186, 0.08);
}
.case__wichtig b{ color: var(--ink); }
.preis__symbol{
display: grid;
place-items: center;
width: 44px;
height: 44px;
margin-bottom: 0.9rem;
border-radius: 13px;
color: #fff;
background: var(--grad);
box-shadow: 0 10px 22px -12px rgba(47, 77, 158, 0.7);
transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.preis__symbol svg{ width: 20px; height: 20px; }
@media (hover: hover){.preis:hover .preis__symbol{ translate: 0 -2px; }}
.aufruf__punkte{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem 1.6rem;
margin: 1.4rem 0 0;
padding: 0;
font-size: 0.88rem;
color: rgba(255, 255, 255, 0.85);
}
.aufruf__punkte li{ display: inline-flex; align-items: center; gap: 0.45rem; }
.aufruf__punkte svg{ width: 16px; height: 16px; }
.hinweiskasten{
display: flex;
align-items: center;
gap: 1.1rem;
max-width: 52rem;
margin: 0 auto;
padding: 1.2rem 1.5rem;
border-radius: var(--radius);
background: linear-gradient(135deg, #1a2a49, #0f1a30);
color: #fff;
box-shadow: 0 20px 44px -24px rgba(12, 22, 38, 0.6);
}
.hinweiskasten__symbol{ display: grid; place-items: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 14px; background: var(--grad); }
.hinweiskasten__symbol svg{ width: 22px; height: 22px; }
.hinweiskasten p{ margin: 0; font-size: 0.95rem; color: rgba(255, 255, 255, 0.82); line-height: 1.5; }
.hinweiskasten p b{ display: block; margin-bottom: 0.2rem; font-size: 1.05rem; color: #fff; }
.pakete--zwei{ grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.pakete--zwei .paket{ grid-template-columns: 1fr; }
.pakete--zwei .paket__flaeche{
position: relative;
display: grid;
grid-template-columns: 54px minmax(0, 1fr);
column-gap: 1rem;
row-gap: 0.1rem;
align-items: center;
padding: 1.5rem 1.6rem;
}
.pakete--zwei .paket__symbol{ grid-row: 1 / span 3; width: 54px; height: 54px; border-radius: 16px; margin: 0; }
.pakete--zwei .paket__symbol svg{ width: 26px; height: 26px; }
.pakete--zwei .paket__badge{ position: absolute; top: 1.1rem; right: 1.1rem; align-self: auto; }
.pakete--zwei .paket__vorher{ font-size: 0.82rem; color: rgba(255, 255, 255, 0.7); }
.pakete--zwei .paket__name{ font-size: clamp(1.8rem, 2.8vw, 2.3rem); line-height: 1.05; }
.pakete--zwei .paket__inhalt{ display: flex; flex-direction: column; }
.pakete--zwei .paket__cta{ margin-top: auto; padding-top: 1.2rem; }
@media (max-width: 900px){.pakete--zwei{ grid-template-columns: 1fr; }}
.staffeln{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.staffel{ border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
.staffel__kopf{ display: flex; align-items: center; gap: 0.9rem; padding: 1.1rem 1.3rem; background: var(--flaeche, #f7f9fc); border-bottom: 1px solid var(--line); }
.staffel__kopf h3{ margin: 0; font-size: 1.05rem; }
.staffel__kopf p{ margin: 0.1rem 0 0; font-size: 0.82rem; color: var(--muted); }
.staffel__symbol{ display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; color: #fff; background: var(--grad); }
.staffel__symbol svg{ width: 20px; height: 20px; }
.staffel__zeilen{ list-style: none; margin: 0; padding: 0.4rem 1.3rem 0.6rem; }
.staffel__zeilen li{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--line); }
.staffel__zeilen li:first-child{ border-top: 0; }
.staffel__zeilen b{ display: block; font-size: 0.95rem; color: var(--ink); }
.staffel__zeilen small{ display: block; font-size: 0.78rem; color: var(--muted); }
.staffel__zeilen span{ font-weight: 800; color: var(--marke); white-space: nowrap; }
@media (hover: hover){.staffel:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }}
@media (max-width: 960px){.staffeln{ grid-template-columns: 1fr; }}
.dash{
padding: 1.3rem 1.4rem 1.1rem;
border-radius: 20px;
background: linear-gradient(160deg, #182744, #0e1830);
color: #fff;
box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.7);
font-size: 0.8rem;
}
.dash__kopf{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.dash__live{ padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(47, 163, 186, 0.25); color: #7fe1f0; letter-spacing: 0.12em; }
.dash__kpis{ display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.dash__kpi{ display: flex; flex-direction: column; gap: 0.15rem; padding: 0.75rem 0.9rem; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.08); }
.dash__kpi span{ font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); }
.dash__kpi b{ font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; }
.dash__kpi i{ font-style: normal; font-size: 0.72rem; font-weight: 600; }
.dash__auf{ color: #5ccb7a; }
.dash__ab{ color: #f26d6d; }
.dash__chart{ display: block; width: 100%; height: auto; border-radius: 10px; }
.dash__achse{ display: flex; justify-content: space-between; margin-top: 0.4rem; padding: 0 0.3rem; font-size: 0.66rem; color: rgba(255, 255, 255, 0.5); }
.kombi{
padding: 1.5rem 1.6rem;
border-radius: 18px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.kombi__label{ margin: 0 0 0.9rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.kombi__zeile{ display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; font-size: 0.92rem; color: rgba(255, 255, 255, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.kombi__zeile--alt{ color: rgba(255, 255, 255, 0.5); }
.kombi__summe{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 1rem 0 0.2rem; font-weight: 700; }
.kombi__summe b{ font-size: clamp(1.7rem, 2.6vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: #7fe1f0; }
.kombi__unter{ margin: 0; text-align: right; font-size: 0.78rem; color: rgba(255, 255, 255, 0.6); }
.schrittliste{ list-style: none; display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; counter-reset: schritt; }
.schrittliste li{
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: 0.9rem;
align-items: center;
padding: 0.9rem 1.1rem;
border: 1px solid var(--line);
border-radius: 14px;
background: var(--surface);
box-shadow: var(--shadow);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease;
}
.schrittliste li::before{ counter-increment: schritt; content: counter(schritt); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #fff; font-weight: 800; font-size: 0.95rem; background: var(--grad); }
.schrittliste b{ display: block; font-size: 0.98rem; color: var(--ink); }
.schrittliste small{ display: block; font-size: 0.85rem; color: var(--muted); }
@media (hover: hover){.schrittliste li:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }}
@media (prefers-reduced-motion: reduce){.staffel, .schrittliste li, .preis__symbol{ 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;
}
.paket{ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 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 (hover: hover){.paket:hover{ transform: translateY(-3px); box-shadow: 0 24px 50px -24px rgba(12, 22, 38, 0.35); border-color: rgba(47, 163, 186, 0.45); }}
@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; }}
.preise.sp-4 .preis__name{ hyphens: manual; }
.dash__kpi{ min-width: 0; }
.dash__kpi span{ overflow-wrap: normal; white-space: nowrap; }
@media (max-width: 480px){.dash__kpi span{ font-size: 0.58rem; letter-spacing: 0.05em; }.dash__kpi{ padding: 0.65rem 0.7rem; }}
.case--dunkel{
background: linear-gradient(135deg, #1a2a49, #0f1a30);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.6);
}
.case--dunkel :is(h2, h3, h4, b, strong){ color: #fff; }
.case--dunkel p{ color: rgba(255, 255, 255, 0.78); }
.case--dunkel .ticks li{ color: rgba(255, 255, 255, 0.82); }
.case--dunkel .ticks li::before{ color: #7fd0e0; }
.case.case--dunkel .case__label{ color: #7fd0e0; }
.orte{ list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.55rem; margin: 0; padding: 0; }
.orte li{
display: flex;
align-items: center;
gap: 0.6rem;
padding: 0.7rem 0.9rem;
border: 1px solid var(--line);
border-radius: 12px;
background: var(--surface);
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-2);
transition: border-color 0.7s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease;
}
.orte li span{ display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 9px; color: var(--marke); background: rgba(47, 163, 186, 0.12); }
.orte li svg{ width: 15px; height: 15px; }
.orte li:last-child{ grid-column: 1 / -1; }
@media (hover: hover){.orte li:hover{ transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.45); box-shadow: var(--shadow); }}
@media (prefers-reduced-motion: reduce){.orte li{ transition: none; }}
@media (max-width: 420px){.orte{ grid-template-columns: 1fr; }}
.videobox{ position: relative; overflow: hidden; border-radius: 18px; background: #0f1a30; box-shadow: 0 26px 50px -28px rgba(12, 22, 38, 0.6); }
.videobox video{ display: block; width: 100%; height: auto; aspect-ratio: 1268 / 910; object-fit: cover; }
.videobox__play{
position: absolute;
inset: 0;
margin: auto;
width: 84px;
height: 84px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--grad);
color: #fff;
cursor: pointer;
box-shadow: 0 18px 40px -16px rgba(12, 22, 38, 0.7);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, box-shadow 0.8s ease;
}
.videobox__play svg{ width: 30px; height: 30px; margin-left: 4px; }
.videobox__play::before{ content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); opacity: 0.7; }
.videobox.laeuft .videobox__play{ opacity: 0; pointer-events: none; }
@media (hover: hover){.videobox__play:hover{ transform: scale(1.04); box-shadow: 0 22px 44px -16px rgba(12, 22, 38, 0.8); }}
@media (prefers-reduced-motion: reduce){.videobox__play{ transition: none; }}
.case{ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease; }
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;
}
.bildrahmen img, .videobox video{ transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.case__blocksymbol{ transition: translate 0.7s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.7s ease; }
@media (hover: hover){.case:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); }.section--dark .case:hover{ transform: none; box-shadow: none; }.case:hover .bildrahmen img{ transform: scale(1.015); }.case__block--symbol:hover .case__blocksymbol{ translate: 0 -3px; box-shadow: 0 14px 26px -10px rgba(47, 95, 216, 0.5); }}
@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; }}
.touren{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.8rem); }
.tour{
position: relative;
display: block;
overflow: hidden;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--dark);
box-shadow: var(--shadow);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.7s ease;
}
.tour img{ display: block; width: 100%; height: auto; aspect-ratio: 600 / 370; object-fit: cover; transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1); }
.tour::after{
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(8, 16, 30, 0.5) 0%, rgba(8, 16, 30, 0.12) 46%, rgba(8, 16, 30, 0.35) 100%);
transition: opacity 0.8s ease;
}
.tour__zeichen{
position: absolute;
right: clamp(0.9rem, 2vw, 1.4rem);
bottom: clamp(0.9rem, 2vw, 1.4rem);
width: 60px;
height: 60px;
display: grid;
place-items: center;
color: #fff;
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour__zeichen > svg:last-child{ position: relative; width: 22px; height: 22px; }
.tour__ring{ position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.tour__bahn{ fill: rgba(10, 19, 34, 0.55); stroke: rgba(255, 255, 255, 0.35); stroke-width: 3; }
.tour__bogen{
fill: none;
stroke: var(--teal);
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 90 237;
transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tour::after{ background: linear-gradient(200deg, rgba(8, 16, 30, 0) 45%, rgba(8, 16, 30, 0.5) 100%); }
@media (hover: hover){.tour:hover{ transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.45); }.tour:hover img{ transform: scale(1.015); }.tour:hover::after{ opacity: 0.85; }.tour:hover .tour__zeichen{ transform: scale(1.06); }.tour:hover .tour__bogen{ stroke-dashoffset: -327; }}
@media (max-width: 760px){.touren{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){.tour, .tour img, .tour__zeichen, .tour__bogen, .tour::after{ transition: none; }}
.step__satz{ font-size: clamp(1rem, 1.5vw, 1.1rem); font-weight: 600; color: var(--ink); line-height: 1.5; }
.steps--senkrecht .step__satz{ margin: 0.35rem 0 0; }
.anteile{ display: grid; gap: 1.1rem; padding: clamp(1.4rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); }
.anteil{ display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem 0.9rem; align-items: baseline; }
.anteil__name{ font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.anteil__wert{ font-size: 1.05rem; font-weight: 800; color: var(--marke); white-space: nowrap; }
.anteil__bahn{ grid-column: 1 / -1; position: relative; height: 14px; border-radius: 99px; background: #dfe7f4; overflow: hidden; }
.anteil__bahn i{
display: block;
height: 100%;
width: max(var(--w), 16px);
border-radius: 99px;
background: linear-gradient(90deg, var(--blue), var(--teal));
box-shadow: 0 0 0 1px rgba(34, 58, 124, 0.12) inset;
transform-origin: left center;
}
.anteil__bahn::after{ content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: rgba(12, 22, 38, 0.14); }
@media (max-width: 620px){.stats.stats--gross{ grid-template-columns: 1fr; }.stats--gross .stat b{ font-size: clamp(2.4rem, 11vw, 3.2rem); }}
.page-hero__chips{
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin: 1.4rem 0 0;
padding: 0;
}
.page-hero__chips li{
padding: 0.4rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.22);
background: rgba(255, 255, 255, 0.07);
color: rgba(255, 255, 255, 0.88);
font-size: 0.88rem;
font-weight: 600;
transition: border-color 0.7s ease, background 0.7s ease;
}
@media (hover: hover){.page-hero__chips li:hover{ border-color: rgba(127, 208, 224, 0.6); background: rgba(255, 255, 255, 0.12); }}
@media (prefers-reduced-motion: reduce){.page-hero__chips li{ transition: none; }}
.preis__abrechnung{ margin: -0.25rem 0 0.7rem; font-size: 0.85rem; color: var(--muted); }
.preis__grund{
margin: 0.9rem 0 0;
padding: 0.85rem 1rem;
border-radius: 12px;
border-left: 3px solid rgba(47, 163, 186, 0.5);
background: rgba(47, 163, 186, 0.08);
font-size: 0.9rem;
line-height: 1.55;
color: var(--ink-2);
}
.preis__grund b{ color: var(--ink); }
.preis .ticks{ margin-top: 1.1rem; }
.preise.sp-3 .preis__name{ min-height: 2lh; }
.preise.sp-4 .preis__name{ min-height: 3lh; }
.preise.sp-4 .preis__name{ font-size: 1.05rem; line-height: 1.35; hyphens: auto; }
@supports not (height: 1lh){.preise.sp-3 .preis__name{ min-height: 3.2em; }.preise.sp-4 .preis__name{ min-height: 4.8em; }}
@media (max-width: 720px){.preise.sp-3 .preis__name, .preise.sp-4 .preis__name{ min-height: 0; }}
.rankmock{
padding: 1.2rem 1.3rem 1.4rem;
border-radius: 20px;
background: linear-gradient(160deg, #182744, #0e1830);
color: #fff;
box-shadow: 0 30px 60px -30px rgba(12, 22, 38, 0.7);
}
.rankmock__kopf{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.75); }
.rankmock__live{ padding: 0.15rem 0.55rem; border-radius: 999px; background: rgba(47, 163, 186, 0.25); color: #7fe1f0; letter-spacing: 0.12em; }
.rankmock__zeilen{ display: grid; gap: 0.55rem; }
.rankmock__zeile{
display: grid;
grid-template-columns: 34px minmax(0, 1fr) auto;
gap: 0.8rem;
align-items: center;
padding: 0.7rem 0.85rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.9rem;
}
.rankmock__pos{ display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--grad); font-weight: 800; font-size: 0.85rem; }
.rankmock__kw{ color: rgba(255, 255, 255, 0.85); overflow-wrap: anywhere; }
.rankmock__trend{ color: #5ccb7a; font-weight: 700; white-space: nowrap; }
.section__head--voll.section__head--mittig{ max-width: none; }
.section__head--voll.section__head--mittig > :is(p, .section__intro){ max-width: 52rem; margin-inline: auto; }
.section__head--voll.section__head--breit > h2{ max-width: none; }
.section__head > h3, .section__head > h4{ font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.2; }
.section__head--gross > :is(h3, h4){ font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.case__vorsatz{
margin: 0 0 0.55rem;
font-size: 1.02rem;
font-weight: 600;
line-height: 1.45;
color: var(--marke);
}
.lexdef--gross{
max-width: 60rem;
display: grid;
grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
gap: clamp(1.2rem, 3vw, 2.4rem);
align-items: start;
}
.lexdef--gross .lexdef__kopf{
display: block;
margin-bottom: 0;
}
.lexdef__symbol{
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
margin-bottom: 0.8rem;
border-radius: 14px;
background: var(--grad);
color: #fff;
}
.lexdef__symbol svg{ width: 22px; height: 22px; }
.lexdef--gross .lexdef__marke{ display: block; margin-bottom: 0.35rem; }
.lexdef--gross .lexdef__begriff{
display: block;
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
line-height: 1.15;
letter-spacing: -0.01em;
}
.lexdef__danach{
margin: 0.9rem 0 0;
font-size: 1.02rem;
line-height: 1.72;
color: var(--ink-2);
}
.lexdef__zurueck{ max-width: 60rem; margin-inline: auto; }
@media (max-width: 780px){.lexdef--gross{ grid-template-columns: minmax(0, 1fr); gap: 1rem; }}
.schau{
position: relative;
max-width: 62rem;
margin: 0 auto;
}
.schau__buehne{
position: relative;
aspect-ratio: 3 / 2;
border-radius: 20px;
overflow: hidden;
background: var(--surface-2, #eef3fb);
box-shadow: 0 26px 60px -34px rgba(12, 22, 38, 0.55);
}
.schau__folie{
position: absolute;
inset: 0;
display: block;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: zoom-in;
opacity: 0;
visibility: hidden;
transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}
.schau__folie.ist-an{
opacity: 1;
visibility: visible;
transition: opacity 0.8s ease, visibility 0s linear 0s;
}
.schau__folie img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.schau__pfeil{
position: absolute;
top: 50%;
translate: 0 -50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
border: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.92);
color: var(--ink);
cursor: pointer;
box-shadow: 0 10px 26px -14px rgba(12, 22, 38, 0.6);
transition: background 0.7s ease, box-shadow 0.7s ease, translate 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.schau__pfeil svg{ width: 22px; height: 22px; }
.schau__pfeil--zurueck{ left: 0.85rem; }
.schau__pfeil--vor{ right: 0.85rem; }
@media (hover: hover){.schau__pfeil:hover{ background: #fff; box-shadow: 0 16px 32px -14px rgba(12, 22, 38, 0.7); }}
.schau__zahl{
position: absolute;
right: 0.9rem;
bottom: 0.9rem;
z-index: 2;
margin: 0;
padding: 0.3rem 0.7rem;
border-radius: 999px;
background: rgba(11, 20, 34, 0.62);
color: #fff;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.06em;
}
.schau__punkte{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
margin-top: 1.1rem;
}
.schau__punkt{
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(27, 47, 85, 0.24);
cursor: pointer;
transition: background 0.7s ease, width 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.schau__punkt.ist-an{ width: 26px; border-radius: 999px; background: var(--grad); }
@media (max-width: 620px){.schau__pfeil{ width: 40px; height: 40px; }.schau__pfeil--zurueck{ left: 0.5rem; }.schau__pfeil--vor{ right: 0.5rem; }.schau__zahl{ right: auto; left: 0.9rem; }}
@media (prefers-reduced-motion: reduce){.schau__folie, .schau__pfeil, .schau__punkt{ transition: none; }}
.cases.cases--mittig{
--spalten: 3;
--luecke: 1.1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.cases.cases--mittig > .case-sm{
flex: 1 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
max-width: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}
@media (max-width: 900px){.cases.cases--mittig{ --spalten: 2; }}
@media (max-width: 620px){.cases.cases--mittig{ --spalten: 1; }}
.case-sm{ transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.8s ease; }
.case-sm:hover{ transform: translateY(-3px); }
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; }}
.case__quelle{
margin-top: 1.1rem;
font-size: 0.94rem;
color: var(--ink-2);
overflow-wrap: anywhere;
}
.section--dark .case .case__chips li,
.section--dark .paket__chips li{
background: rgba(255, 255, 255, 0.09);
border-color: rgba(127, 225, 240, 0.24);
color: #e8eefc;
}
.cases.cases--mittig:has(> :nth-child(4):last-child){ --spalten: 2; }
.lkarte__ruht{
display: inline-block;
margin: 0 0 0.7rem;
padding: 0.25rem 0.7rem;
border-radius: 999px;
background: rgba(27, 47, 85, 0.07);
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.lkarte--ruht{ background: rgba(27, 47, 85, 0.035); box-shadow: none; }
.lkarte--ruht > :is(h3, h4){ color: var(--ink-2); }
.lkarte--ruht .lkarte__text,
.lkarte--ruht .ticks{ color: var(--muted); }
.lkarte--ruht .ticks li::before{ opacity: 0.45; }
.konfig-sektion{ position: relative; overflow: clip; background: var(--bg); }
.konfig-sektion__raster{
position: absolute;
inset: 0;
pointer-events: none;
background-image: radial-gradient(rgba(34, 58, 124, 0.14) 1px, transparent 1.4px);
background-size: 22px 22px;
-webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 20%, transparent 80%);
}
.konfig-sektion__schein{ position: absolute; border-radius: 50%; filter: blur(70px); pointer-events: none; opacity: 0.55; }
.konfig-sektion__schein--a{ top: 4%; left: -6%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(47, 163, 186, 0.35), transparent 65%); }
.konfig-sektion__schein--b{ bottom: -8%; right: -8%; width: 560px; height: 560px; background: radial-gradient(circle, rgba(47, 77, 158, 0.3), transparent 65%); }
.konfig-sektion > .wrap{ position: relative; z-index: 1; }
.konfig{
display: grid;
grid-template-columns: minmax(0, 1fr);
overflow: hidden;
border: 1px solid var(--line);
border-radius: 26px;
background: var(--surface);
box-shadow: var(--shadow-lg);
}
.konfig [hidden]{ display: none !important; }
.konfig__form{ position: relative; padding: clamp(1.4rem, 3vw, 2.4rem); }
.konfig__form::before{ content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--grad); }
.konfig__honig{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.konfig__kopf{ margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.konfig__leiter{
display: flex;
gap: 0.35rem;
margin: 0 0 0.9rem;
padding: 0.25rem 0;
list-style: none;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.konfig__leiter::-webkit-scrollbar{ display: none; }
.konfig__stufe{
position: relative;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.3rem 0.8rem 0.3rem 0.3rem;
border-radius: 999px;
border: 1px solid transparent;
font-size: 0.78rem;
font-weight: 600;
color: var(--ink-2);
white-space: nowrap;
transition: background-color 0.7s ease, border-color 0.7s ease, color 0.7s ease;
}
.konfig__stufe i{
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: #e9eef6;
color: var(--ink-2);
font-family: var(--font-mono);
font-style: normal;
font-size: 0.7rem;
font-weight: 600;
transition: background-color 0.7s ease, color 0.7s ease;
}
.konfig__stufe.ist-erledigt{ color: var(--ink); cursor: pointer; }
.konfig__stufe.ist-erledigt i{ font-size: 0; background: #d9f1f5; color: var(--teal-ink); }
.konfig__stufe.ist-erledigt i::before{
content: "";
width: 9px;
height: 5px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg) translate(1px, -1px);
}
.konfig__stufe.ist-aktiv{ color: var(--ink); background: #fff; border-color: var(--line); box-shadow: var(--shadow); }
.konfig__stufe.ist-aktiv i{ background: var(--grad); color: #fff; }
@media (hover: hover){.konfig__stufe.ist-erledigt:hover{ background: #f1f4f9; }}
.konfig__stand{ display: flex; align-items: center; gap: 1rem; }
.konfig__zaehler{
flex: 0 0 auto;
margin: 0;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ink-2);
}
.konfig__zaehler b{ color: var(--teal-ink); }
.konfig__balken{ flex: 1 1 auto; height: 6px; border-radius: 999px; background: #e9eef6; overflow: hidden; }
.konfig__balken span{ display: block; height: 100%; width: 6%; border-radius: inherit; background: var(--grad); transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.konfig__schritt{ border: 0; margin: 0; padding: 0; min-width: 0; }
.konfig__form.ist-gefuehrt .konfig__schritt{ display: none; }
.konfig__form.ist-gefuehrt .konfig__schritt.ist-aktiv{ display: block; }
.konfig__form:not(.ist-gefuehrt) .konfig__schritt + .konfig__schritt{ margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.konfig__frage{
display: block;
padding: 0;
margin: 0 0 0.45rem;
font-size: clamp(1.35rem, 2.4vw, 1.7rem);
font-weight: 800;
letter-spacing: -0.015em;
line-height: 1.2;
color: var(--ink);
}
.konfig__hinweis{ margin: 0; max-width: 40rem; font-size: 0.95rem; line-height: 1.55; color: var(--ink-2); }
.konfig__schritt.ist-neu .konfig__frage,
.konfig__schritt.ist-neu .konfig__hinweis{ animation: konfig-auf 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.konfig__schritt.ist-neu .konfig__karte{ animation: konfig-auf 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: calc(60ms + var(--n, 0) * 55ms); }
.konfig__karten{ display: grid; gap: 0.85rem; margin-top: clamp(1.1rem, 2.4vw, 1.5rem); }
.konfig__karten--2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.konfig__karten--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
.konfig__karte{
position: relative;
display: flex;
flex-direction: column;
gap: 0.4rem;
padding: 1.05rem 1.05rem 1.1rem;
border-radius: 18px;
border: 1px solid var(--line);
background: #f7f9fc;
cursor: pointer;
transition:
transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.8s ease,
background-color 0.8s ease,
box-shadow 0.8s ease;
}
.konfig__karte input{ position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.konfig__kopfzeile{ display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.3rem; padding-right: 2rem; }
.konfig__symbol{
display: grid;
place-items: center;
flex: 0 0 auto;
width: 44px;
height: 44px;
border-radius: 13px;
background: linear-gradient(140deg, rgba(47, 77, 158, 0.12), rgba(47, 163, 186, 0.16));
color: var(--blue);
transition: background 0.8s ease, color 0.8s ease;
}
.konfig__symbol svg{ width: 22px; height: 22px; }
.konfig__label{ font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--teal-ink); }
.konfig__titel{ padding-right: 1.6rem; font-size: 1.02rem; font-weight: 700; line-height: 1.3; color: var(--ink); }
.konfig__unter{ font-size: 0.84rem; line-height: 1.45; color: var(--ink-2); }
.konfig__preis{ display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.5rem; margin-top: auto; padding-top: 0.5rem; }
.konfig__preis b{
padding: 0.28rem 0.6rem;
border-radius: 999px;
border: 1px solid var(--line);
background: #fff;
font-family: var(--font-mono);
font-size: 0.8rem;
font-weight: 600;
color: var(--ink);
transition: background-color 0.8s ease, border-color 0.8s ease, color 0.8s ease;
}
.konfig__preis s{ font-size: 0.78rem; color: #7a869c; }
.konfig__preis em{ font-style: normal; font-size: 0.7rem; font-weight: 700; color: var(--teal-ink); }
.konfig__haken{
position: absolute;
top: 0.9rem;
right: 0.9rem;
display: grid;
place-items: center;
width: 26px;
height: 26px;
border-radius: 50%;
background: var(--grad);
color: #fff;
opacity: 0;
scale: 0.5;
transition: opacity 0.6s ease, scale 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.konfig__haken svg{ width: 14px; height: 14px; }
.konfig__badge{
position: absolute;
top: -0.6rem;
right: 1rem;
padding: 0.2rem 0.6rem;
border-radius: 999px;
background: var(--grad);
color: #fff;
font-size: 0.66rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.konfig__badge--passt{ background: #d9f1f5; color: var(--teal-ink); }
.konfig__karte.ist-empfohlen{ border-color: rgba(47, 163, 186, 0.45); }
.konfig__karte[hidden]{ display: none; }
@media (hover: hover){.konfig__karte:hover{ transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.55); background: #fff; box-shadow: var(--shadow); }}
.konfig__karte:has(input:checked){
border-color: var(--teal-ink);
background: #fff;
box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.16), 0 18px 34px -22px rgba(34, 58, 124, 0.35);
}
.konfig__karte:has(input:checked) .konfig__symbol{ background: var(--grad); color: #fff; }
.konfig__karte:has(input:checked) .konfig__haken{ opacity: 1; scale: 1; }
.konfig__karte:has(input:checked) .konfig__preis b{ border-color: transparent; background: #e6f6f9; color: var(--teal-ink); }
.konfig__karte--paket{ gap: 0.3rem; padding: 1.2rem 1.2rem 1.25rem; }
.konfig__karte--paket .konfig__titel{ font-size: 1.25rem; letter-spacing: -0.01em; }
.konfig__punkte{ display: grid; gap: 0.3rem; margin: 0.55rem 0 0.2rem; padding: 0; list-style: none; }
.konfig__punkte li{ position: relative; padding-left: 1.15rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink-2); }
.konfig__punkte li::before{
content: "";
position: absolute;
left: 0;
top: 0.5em;
width: 0.55rem;
height: 0.3rem;
border-left: 2px solid var(--teal-ink);
border-bottom: 2px solid var(--teal-ink);
transform: rotate(-45deg);
}
.konfig__karte--paket .konfig__preis b{ padding: 0; border: 0; background: none; font-size: 1.1rem; }
@media (min-width: 961px){.konfig__karte--paket{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
grid-template-areas: "kopf punkte" "titel punkte" "unter punkte" "preis punkte";
grid-template-rows: auto auto auto 1fr;
column-gap: 1.4rem;
row-gap: 0.2rem;
}.konfig__karte--paket .konfig__kopfzeile{ grid-area: kopf; }.konfig__karte--paket .konfig__titel{ grid-area: titel; padding-right: 0; }.konfig__karte--paket .konfig__unter{ grid-area: unter; }.konfig__karte--paket .konfig__preis{ grid-area: preis; align-self: end; }.konfig__karte--paket .konfig__punkte{ grid-area: punkte; align-self: center; margin: 0; padding-left: 1.2rem; border-left: 1px solid var(--line); }}
.konfig__karte--paket:has(input:checked) .konfig__preis b{ background: none; color: var(--teal-ink); }
.konfig__ergebnis{
margin: 1.2rem 0 1.4rem;
padding: 1.1rem 1.2rem;
border-radius: 18px;
border-left: 4px solid var(--teal-ink);
background: linear-gradient(140deg, #eef3fb, #e8f6f9);
}
.konfig__ergebnis p{ margin: 0; color: var(--ink-2); }
.konfig__anrede{ display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.konfig__pille{ position: relative; }
.konfig__pille input{ position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.konfig__pille span{
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 999px;
border: 1px solid var(--line);
background: #f7f9fc;
font-size: 0.9rem;
font-weight: 600;
color: var(--ink);
cursor: pointer;
transition: background-color 0.7s ease, color 0.7s ease, border-color 0.7s ease;
}
.konfig__pille:has(input:checked) span{ background: var(--grad); border-color: transparent; color: #fff; }
.konfig__gitter{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1rem; }
.konfig__feld--breit{ grid-column: 1 / -1; }
.konfig__feldname{ display: block; margin-bottom: 0.35rem; font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.konfig__eingabe{
width: 100%;
padding: 0.8rem 0.95rem;
border-radius: 12px;
border: 1px solid var(--line);
background: #f7f9fc;
font: inherit;
color: var(--ink);
transition: border-color 0.5s ease, box-shadow 0.5s ease, background-color 0.5s ease;
}
.konfig__eingabe:focus{ outline: none; border-color: var(--teal-ink); background: #fff; box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.18); }
textarea.konfig__eingabe{ resize: vertical; min-height: 5.5rem; }
.konfig__feld.is-fehler .konfig__eingabe{ border-color: #d64545; }
.konfig__fehler{ display: block; font-size: 0.78rem; color: #c23b3b; }
.konfig__fehler:not(:empty){ margin-top: 0.3rem; }
.konfig__einwilligung{ display: flex; align-items: flex-start; gap: 0.6rem; margin-top: 1rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.konfig__einwilligung input{ flex: 0 0 auto; width: 18px; height: 18px; margin: 0.15rem 0 0; accent-color: var(--teal-ink); }
.konfig__einwilligung a{ color: var(--teal-ink); }
.konfig__meldung{ margin: 1rem 0 0; padding: 0.7rem 1rem; border-radius: 12px; font-size: 0.9rem; }
.konfig__meldung.is-schlecht{ background: #fdecec; color: #a52f2f; }
.konfig__meldung.is-gut{ background: #e6f6f9; color: var(--teal-ink); }
.konfig__leiste{ display: flex; align-items: center; gap: 1rem; margin-top: clamp(1.4rem, 3vw, 2rem); padding-top: 1.2rem; border-top: 1px solid var(--line); }
.konfig__zurueck{
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.4rem;
border: 0;
background: none;
font: inherit;
font-size: 0.92rem;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
transition: color 0.6s ease;
}
.konfig__zurueck svg{ width: 18px; height: 18px; }
@media (hover: hover){.konfig__zurueck:hover{ color: var(--ink); }}
.konfig__tipp{ margin: 0 auto 0 0; font-size: 0.8rem; color: #7a869c; }
.konfig__weiter svg,
.konfig__senden svg{ width: 18px; height: 18px; margin-left: 0.3rem; }
.konfig__summe{
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "kopf total" "posten total" "hinweis total";
column-gap: 2rem;
row-gap: 0.45rem;
align-items: center;
padding: 1.1rem clamp(1.4rem, 3vw, 2.4rem) 1.2rem;
border-top: 1px solid var(--line);
background: #f6f9fc;
}
.konfig__summe::after{
content: "";
position: absolute;
top: -110px;
right: -60px;
width: 260px;
height: 260px;
border-radius: 50%;
background: radial-gradient(circle, rgba(47, 163, 186, 0.2), transparent 65%);
pointer-events: none;
opacity: 0.5;
transition: opacity 0.9s ease;
}
.konfig__summe.ist-gefuellt::after{ opacity: 1; }
.konfig__summe > *{ position: relative; z-index: 1; }
.konfig__summe-kopf{ grid-area: kopf; display: flex; align-items: center; gap: 0.6rem; margin: 0; }
.konfig__summe-label{ margin: 0; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2); }
.konfig__summe-anzahl{
display: inline-grid;
place-items: center;
min-width: 1.4rem;
height: 1.4rem;
padding: 0 0.4rem;
border-radius: 999px;
background: var(--grad);
color: #fff;
font-size: 0.68rem;
font-weight: 700;
}
.konfig__posten{ grid-area: posten; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.konfig__posten li{
display: inline-flex;
max-width: 100%;
align-items: center;
gap: 0.5rem;
padding: 0.32rem 0.7rem;
border-radius: 999px;
border: 1px solid var(--line);
background: #f7f9fc;
font-size: 0.8rem;
line-height: 1.3;
}
.konfig__leer{ border: 0 !important; padding: 0 !important; background: none !important; font-size: 0.86rem; color: var(--ink-2); }
.konfig__total{ grid-area: total; display: flex; gap: 2rem; align-self: center; padding-left: 2rem; border-left: 1px solid var(--line); }
.konfig__total-zeile{ text-align: right; }
.konfig__total-zeile span{ display: block; margin-bottom: 0.15rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.konfig__total-zeile b{ display: inline-block; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); white-space: nowrap; }
.konfig__summe.ist-gefuellt .konfig__total-zeile b{ background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.konfig__summe.ist-puls .konfig__total-zeile b{ animation: konfig-puls 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.konfig__summe-hinweis{ grid-area: hinweis; margin: 0; font-size: 0.72rem; line-height: 1.5; color: #7a869c; }
.konfig__danke{ grid-column: 1 / -1; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.konfig__dankesymbol{ display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--grad); color: #fff; }
.konfig__dankesymbol svg{ width: 28px; height: 28px; }
.konfig__danke h3{ margin: 0 0 0.5rem; }
.konfig__danke p{ margin: 0; color: var(--ink-2); }
.konfig__mehr{ margin: clamp(1.6rem, 3vw, 2.4rem) 0 0; text-align: center; }
.konfig__mehr .btn svg{ width: 18px; height: 18px; margin-left: 0.35rem; }
@media (max-width: 960px){.konfig__karten--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }.konfig-sektion__schein{ display: none; }}
@media (max-width: 720px){.konfig__summe{
grid-template-columns: minmax(0, 1fr);
grid-template-areas: "kopf" "posten" "total" "hinweis";
row-gap: 0.7rem;
padding: 1.1rem 1.1rem 1rem;
}.konfig__total{ justify-content: space-between; padding: 0.7rem 0 0; border-left: 0; border-top: 1px solid var(--line); }.konfig__total-zeile:first-child{ text-align: left; }.konfig__total-zeile b{ font-size: 1.4rem; }}
@media (max-width: 620px){.konfig{ border-radius: 20px; }.konfig__form{ padding: 1.2rem 1rem 1.3rem; }.konfig__karten--2,
.konfig__karten--3{ grid-template-columns: minmax(0, 1fr); }.konfig__karte:not(.konfig__karte--paket){
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
grid-template-areas: "sym titel" "sym unter" "sym preis";
column-gap: 0.9rem;
row-gap: 0.2rem;
padding: 0.9rem 2.6rem 0.9rem 0.9rem;
}.konfig__karte:not(.konfig__karte--paket) .konfig__kopfzeile{ grid-area: sym; align-self: start; margin: 0; padding: 0; }.konfig__karte:not(.konfig__karte--paket) .konfig__titel{ grid-area: titel; padding-right: 0; }.konfig__karte:not(.konfig__karte--paket) .konfig__unter{ grid-area: unter; }.konfig__karte:not(.konfig__karte--paket) .konfig__preis{ grid-area: preis; padding-top: 0.3rem; }.konfig__karte:not(.konfig__karte--paket) .konfig__label{ display: none; }.konfig__gitter{ grid-template-columns: minmax(0, 1fr); }.konfig__leiste{ flex-wrap: wrap; }.konfig__tipp{ display: none; }.konfig__weiter,
.konfig__senden{ margin-left: auto; }.konfig__stand{ flex-direction: column; align-items: stretch; gap: 0.5rem; }.konfig__summe{ padding: 1.1rem 1rem 1.2rem; }}
@media (prefers-reduced-motion: reduce){.konfig__schritt.ist-neu .konfig__frage,
.konfig__schritt.ist-neu .konfig__hinweis,
.konfig__schritt.ist-neu .konfig__karte,
.konfig__summe.ist-puls .konfig__total-zeile b{ animation: none; }.konfig__karte,
.konfig__symbol,
.konfig__preis b,
.konfig__haken,
.konfig__stufe,
.konfig__stufe i,
.konfig__balken span,
.konfig__pille span,
.konfig__eingabe,
.konfig__zurueck,
.konfig__summe::after{ transition: none; }.konfig__karte:hover{ transform: none; }}
.feed{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: clamp(1rem, 2vw, 1.6rem);
align-items: stretch;
}
.feed__karte{
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 20px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: 0 12px 30px -26px rgba(12, 22, 38, 0.5);
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.8s ease;
}
.feed__karte[hidden]{ display: none; }
@media (hover: hover){.feed__karte:hover{ transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.4); box-shadow: var(--shadow); }}
.feed__bild{ display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #eef3fb; }
.feed__text{
--zeilen: 6;
padding: 1.05rem 1.15rem 0;
font-size: 0.92rem;
line-height: 1.6;
color: var(--ink-2);
min-height: calc(var(--zeilen) * 0.92rem * 1.6);
}
.feed__text p{ margin: 0; }
.feed__text p + p{ margin-top: 0.6rem; }
.feed__text > p:first-child{
display: -webkit-box;
-webkit-line-clamp: var(--zeilen);
-webkit-box-orient: vertical;
overflow: hidden;
}
.feed__mehr{ display: none; }
.feed__karte.ist-offen .feed__text{ min-height: 0; }
.feed__karte.ist-offen .feed__text > p:first-child{ display: block; overflow: visible; }
.feed__karte.ist-offen .feed__mehr{ display: block; }
.feed__knopf{
align-self: flex-start;
margin: 0.9rem 1.15rem 1.15rem;
margin-top: auto;
padding: 0.35rem 0.8rem;
border-radius: 999px;
border: 1px solid var(--line);
background: #f7f9fc;
font: inherit;
font-size: 0.8rem;
font-weight: 600;
color: var(--teal-ink);
cursor: pointer;
transition: background-color 0.6s ease, border-color 0.6s ease;
}
@media (hover: hover){.feed__knopf:hover{ background: #e6f6f9; border-color: rgba(47, 163, 186, 0.45); }}
.feed__karte:not(:has(.feed__knopf)) .feed__text{ padding-bottom: 1.15rem; }
.feed__nachladen{ margin-top: clamp(1.6rem, 3vw, 2.4rem); text-align: center; }
.feed__rest{ display: block; margin-top: 0.6rem; font-size: 0.82rem; color: #7a869c; }
@media (prefers-reduced-motion: reduce){.feed__karte, .feed__knopf{ transition: none; }.feed__karte:hover{ transform: none; }}
.uebersicht{ columns: 3 18rem; column-gap: clamp(1.6rem, 3vw, 3rem); }
.uebersicht__block{ break-inside: avoid; margin: 0 0 clamp(1.8rem, 3vw, 2.6rem); }
.uebersicht__block h2{
font-size: 1.05rem; letter-spacing: 0.02em; margin: 0 0 0.7rem;
padding-bottom: 0.5rem; border-bottom: 1px solid var(--line);
display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem;
}
.uebersicht__zahl{
font-family: "Plex Mono", ui-monospace, monospace;
font-size: 0.72rem; color: var(--ink-3, var(--ink-2)); font-variant-numeric: tabular-nums;
}
.uebersicht__liste{ list-style: none; margin: 0; padding: 0; }
.uebersicht__liste li{ margin: 0 0 0.35rem; }
.uebersicht__liste a{
color: var(--ink-2); text-decoration: none; font-size: 0.94rem; line-height: 1.45;
display: inline-block; transition: color 0.8s ease;
}
.uebersicht__liste a:hover{ color: var(--brand, var(--teal-ink)); }
@media (max-width: 640px){.uebersicht{ columns: 1; }}
@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){.tabelle .tabelle__nebensache{ display: 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; }.lkarte--symbol .lkarte__symbol,
.lkarte--symbol .symbol{ margin-inline: 0; }}
.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; }.kontaktzeile h2{ text-align: center; }}
a.case-sm{ display: flex; flex-direction: column; }
a.case-sm::after{ margin-top: auto; padding-top: 0.9rem; }
.nobr{ white-space: nowrap; }
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; }}
.aufruf--schlicht .aufruf__punkte{ color: var(--ink-2); }
.aufruf--schlicht .aufruf__punkte svg{ color: var(--teal-ink); }
@media (hover: hover){.ukarte:hover{
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.4);
box-shadow: 0 8px 18px rgba(12, 22, 38, 0.06), 0 26px 48px -26px rgba(34, 58, 124, 0.3);
}.ukarte:hover .ukarte__bild img{ transform: scale(1.015); }}
.ukarte__bild img{ transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1); }
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:hover{ transform: none; }.ukarte__bild img, html.js .ukarte[data-fold], html.js .ukarte[data-fold].is-fertig{ transition: none; }}
.kachel{ hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal; }
.einbett{
display: grid;
gap: clamp(1rem, 2vw, 1.6rem);
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.einbett.sp-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px){.einbett, .einbett.sp-3{ grid-template-columns: minmax(0, 1fr); }}
.einbett__karte{
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
overflow: hidden;
}
.einbett__platz{
display: grid;
place-content: center;
justify-items: center;
gap: 0.45rem;
aspect-ratio: 16 / 9;
padding: clamp(1.2rem, 3vw, 2rem);
text-align: center;
background:
radial-gradient(60% 80% at 50% 0%, rgba(47, 163, 186, 0.14), transparent 70%),
linear-gradient(180deg, #f5f7fb, #eef3fb);
}
.einbett__icon{
display: grid; place-items: center;
width: 52px; height: 52px; margin-bottom: 0.3rem;
border-radius: 16px; color: #fff; background: var(--grad);
}
.einbett__icon svg{ width: 24px; height: 24px; }
.einbett__titel{ font-weight: 650; letter-spacing: -0.01em; }
.einbett__text{ max-width: 36ch; font-size: 0.86rem; line-height: 1.5; color: var(--ink-2); }
.einbett__platz .btn{ margin-top: 0.5rem; }
.einbett{ align-items: stretch; }
.einbett__caption{ padding: 0.8rem 1.1rem; font-size: 0.9rem; color: var(--ink-2); border-top: 1px solid var(--line); }
.einbett__hinweis{ margin: 1.2rem auto 0; max-width: 52rem; text-align: center; font-size: 0.88rem; color: var(--muted); }
.stats__schluss{ max-width: 52rem; margin: 1.6rem auto 0; text-align: center; color: var(--ink-2); }
.stats__schluss--light{ color: var(--dark-text); }
.videobox--mittig{ max-width: 960px; margin: 0 auto; }
.videobox--breit video{ aspect-ratio: 16 / 9; }
html.js .stimmen__band:not(.ist-geklont){ animation: none; }
.ist-fern, .ist-fern *, .ist-fern *::before, .ist-fern *::after{ animation-play-state: paused; }
.nav--lp .nav__links{ gap: clamp(1rem, 2.4vw, 2rem); }
.lpfuss{
background: #071020;
color: #9fb2cf;
padding: 1.6rem 0;
border-top: 1px solid rgba(127, 208, 224, 0.14);
}
.lpfuss__inner{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.8rem 1.6rem;
}
.lpfuss__marke{ margin: 0; font-size: 0.88rem; }
.lpfuss__links{ display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; margin-left: auto; }
.lpfuss__links a{
color: #c6d6ef;
text-decoration: none;
font-size: 0.88rem;
transition: color 0.8s ease;
}
.lpfuss__links a:hover{ color: #fff; }
@media (max-width: 860px){.lpfuss__links{ margin-left: 0; }}
@media (prefers-reduced-motion: reduce){.lpkopf__nav a, .lpfuss__links a{ transition: none; }}
.case__label{
font-family: var(--mono, ui-monospace, monospace);
font-size: 0.78rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--blau, #2f5fd8);
margin-bottom: 0.2rem;
}
.mdemo__grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.mdemo__fenster{
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6), 0 0 60px -30px rgba(63, 214, 232, 0.35);
overflow: hidden;
}
.mdemo__leiste{
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.75rem 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
font-family: var(--font-mono);
font-size: 0.72rem;
color: #8b98af;
}
.mdemo__punkte{ display: flex; gap: 0.35rem; }
.mdemo__punkte i{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.16); }
.mdemo__titel{ flex: 1; }
.mdemo__status{ display: inline-flex; align-items: center; gap: 0.45rem; color: #b9c4d8; }
.mdemo__pane{ padding: clamp(1.2rem, 3vw, 1.8rem); color: var(--dark-text); }
.mdemo__schritt{
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #7fd0e0;
margin-bottom: 1rem;
}
.mdemo__mail{
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
padding: 1rem 1.1rem;
}
.mdemo__mail--antwort{ border-color: rgba(63, 214, 232, 0.45); background: rgba(63, 214, 232, 0.07); }
.mdemo__kopf{ font-size: 0.9rem; color: #8b98af; margin-bottom: 0.25rem; }
.mdemo__kopf b{ color: #b9c4d8; font-weight: 600; }
.mdemo__text{ color: #fff; font-size: 1.02rem; line-height: 1.55; margin-top: 0.6rem; }
.mdemo__mail--antwort .mdemo__text{ margin-top: 0; }
.mdemo__notiz{ margin-top: 0.9rem; font-size: 0.9rem; color: #8b98af; }
.mdemo__chips{ list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.mdemo__chips li{
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.6rem 0.9rem;
border: 1px solid rgba(63, 214, 232, 0.35);
border-radius: var(--radius-sm);
background: rgba(63, 214, 232, 0.07);
color: #fff;
font-weight: 600;
}
.mdemo__chips span,
.mdemo__daten dt{
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8b98af;
}
.mdemo__daten{ display: grid; gap: 0.5rem; }
.mdemo__daten div{
display: flex;
justify-content: space-between;
gap: 1rem;
padding: 0.55rem 0.2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.mdemo__daten dd{ color: #fff; font-weight: 600; text-align: right; }
.mdemo__erledigt{ list-style: none; display: grid; gap: 0.8rem; }
.mdemo__erledigt li{ display: flex; align-items: center; gap: 0.7rem; color: #fff; }
.mdemo__erledigt .dot{ flex: none; }
html.js .mdemo__fenster{ display: grid; grid-template-rows: auto 1fr; }
html.js .mdemo__pane{
grid-area: 2 / 1;
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.6s;
}
html.js .mdemo__pane.is-on{
opacity: 1;
visibility: visible;
transform: none;
transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}
html:not(.js) .mdemo__pane + .mdemo__pane{ border-top: 1px solid rgba(255, 255, 255, 0.08); }
@media (max-width: 900px){.mdemo__grid{ grid-template-columns: 1fr; }}
.tabelle tbody th[scope="row"]{
font-family: var(--font-sans);
font-size: inherit;
letter-spacing: 0;
text-transform: none;
color: var(--ink);
font-weight: 600;
background: transparent;
}
.tabelle tr:last-child th[scope="row"]{ border-bottom: 0; }
.tabelle--vergleich{ min-width: 720px; }
.tabelle--vergleich thead th{ text-transform: none; letter-spacing: 0.02em; }
.tabelle--vergleich td:last-child{ color: var(--ink); font-weight: 600; background: rgba(47, 163, 186, 0.06); }
.tabelle--vergleich thead th:last-child{ color: #fff; background: var(--grad); }
.ansprech__box{
display: flex;
align-items: center;
gap: clamp(1.2rem, 3vw, 2rem);
max-width: 760px;
margin-inline: auto;
padding: clamp(1.2rem, 3vw, 1.8rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.ansprech__bild{
flex: none;
width: 120px;
height: 120px;
object-fit: cover;
object-position: top;
border-radius: 50%;
}
.ansprech__name{ display: flex; flex-direction: column; margin: 0.3rem 0 0.5rem; }
.ansprech__name b{ font-size: 1.15rem; color: var(--ink); }
.ansprech__name span{ color: var(--ink-2); font-size: 0.92rem; }
.ansprech__text > p:not(.kicker):not(.ansprech__name){ color: var(--ink-2); }
.ansprech__stand{
margin-top: 0.7rem;
font-family: var(--font-mono);
font-size: 0.76rem;
color: var(--teal-ink) !important;
}
@media (max-width: 560px){.ansprech__box{ flex-direction: column; align-items: flex-start; }.ansprech__bild{ width: 96px; height: 96px; }}
@media (prefers-reduced-motion: reduce){html.js .mdemo__pane, html.js .mdemo__pane.is-on{ transition: none; transform: none; }}
.mdemo__leiste{ position: relative; }
.mdemo__fortschritt{
position: absolute;
left: 0; right: 0; bottom: -1px;
height: 2px;
background: rgba(255, 255, 255, 0.06);
}
.mdemo__fortschritt i{
display: block;
height: 100%;
background: linear-gradient(90deg, #3fc0d8, #5b83e0);
transform-origin: left center;
transform: scaleX(var(--mschritt, 0.2));
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 0 12px rgba(63, 214, 232, 0.6);
}
.eproblem__grid,
.edef__grid{
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.eproblem__copy .section__intro{ margin-top: 1.2rem; }
.postfach{
position: relative;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
padding: 1rem;
box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6);
}
.postfach::after{
content: "";
position: absolute;
inset: 14px -12px -12px 14px;
z-index: -1;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.06);
background: rgba(255, 255, 255, 0.02);
}
.postfach__kopf{
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0.4rem 0.8rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
margin-bottom: 0.6rem;
}
.postfach__titel{ font-weight: 700; color: #fff; }
.postfach__marke{
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #ffb4a8;
border: 1px solid rgba(255, 140, 120, 0.4);
background: rgba(255, 110, 90, 0.1);
border-radius: 99px;
padding: 0.2rem 0.6rem;
}
.postfach__liste{ list-style: none; display: grid; gap: 0.45rem; }
.postfach__liste li{
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.75rem;
padding: 0.6rem 0.7rem;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.035);
border: 1px solid rgba(255, 255, 255, 0.06);
}
.postfach__av{
width: 30px; height: 30px;
display: grid; place-items: center;
border-radius: 50%;
font-size: 0.7rem; font-weight: 700;
color: #cfe9f1;
background: rgba(63, 192, 216, 0.18);
}
.postfach__av--b{ background: rgba(91, 131, 224, 0.22); color: #d7e0f7; }
.postfach__betreff{
color: #e6ecf6;
font-size: 0.92rem;
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.postfach__tag{
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.04em;
border-radius: 99px;
padding: 0.18rem 0.55rem;
white-space: nowrap;
}
.postfach__tag--a{ color: #8ee4f2; background: rgba(63, 214, 232, 0.12); }
.postfach__tag--b{ color: #b7c7f5; background: rgba(91, 131, 224, 0.16); }
.postfach__tag--c{ color: #a7ecc9; background: rgba(46, 201, 139, 0.14); }
.postfach__fuss{
display: flex; align-items: center; gap: 0.5rem;
margin-top: 0.8rem; padding: 0 0.4rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: #8b98af;
}
.postfach__uhr{
width: 12px; height: 12px;
border-radius: 50%;
border: 1.5px solid #8b98af;
position: relative;
}
.postfach__uhr::after{
content: ""; position: absolute; left: 4px; top: 1px;
width: 1.5px; height: 4px; background: #8b98af;
}
html.js .postfach .postfach__liste li{
opacity: 0;
transform: translateY(10px);
transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
transition-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
html.js .postfach.in .postfach__liste li{ opacity: 1; transform: none; }
.edef__copy .prosa{ margin-top: 1.2rem; max-width: none; }
.edef__visual{ display: grid; gap: 0.9rem; }
.edef__frage{
justify-self: stretch;
padding: 0.8rem 1rem;
border-radius: 14px;
background: var(--surface);
border: 1px solid var(--line);
box-shadow: var(--shadow);
color: var(--ink);
font-weight: 600;
}
.edef__marke{
display: block;
margin-bottom: 0.35rem;
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
}
.edef__karte{
justify-self: stretch;
padding: 1rem 1.1rem;
border-radius: 14px;
border: 1px solid var(--line);
background: var(--surface);
box-shadow: var(--shadow);
}
.edef__karte p{ color: var(--ink-2); line-height: 1.5; }
.edef__karte--alt{ opacity: 0.72; background: #f0f3f8; box-shadow: none; }
.edef__karte--alt p{ text-decoration: line-through; text-decoration-color: rgba(70, 83, 107, 0.35); }
.edef__karte--ki{
border-color: rgba(47, 163, 186, 0.45);
box-shadow: var(--shadow-lg);
}
.edef__karte--ki .edef__marke{ color: var(--teal-ink); }
.edef__karte--ki p{ color: var(--ink); font-weight: 600; }
.edef__urteil{
display: inline-flex; align-items: center; gap: 0.45rem;
margin-top: 0.6rem;
font-family: var(--font-mono);
font-size: 0.7rem;
color: var(--ink-2);
}
.edef__karte--ki .edef__urteil{ color: var(--teal-ink); }
.ehub__netz{
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
align-items: center;
gap: clamp(1rem, 3vw, 2rem);
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.ehub__label{
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.7rem;
}
.ehub__chips{ list-style: none; display: grid; gap: 0.55rem; }
.ehub__chips--zwei{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ehub__breit{ grid-column: 1 / -1; }
.ehub__chips li{
display: flex; align-items: center; gap: 0.6rem;
padding: 0.7rem 0.9rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: var(--shadow);
color: var(--ink);
font-weight: 600;
font-size: 0.94rem;
}
.ehub__chips li svg{ flex: none; width: 20px; height: 20px; color: var(--teal-ink); }
@media (hover: hover){.ehub__chips li{ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease, box-shadow 0.8s ease; }.ehub__chips li:hover{ transform: translateY(-2px); border-color: rgba(47, 163, 186, 0.4); box-shadow: var(--shadow-lg); }}
.ehub__kern{ display: flex; align-items: center; }
.ehub__kreis{
width: 150px; height: 150px;
border-radius: 50%;
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
text-align: center;
color: #fff;
background: radial-gradient(circle at 30% 25%, #3a63c4, #1c3470 70%);
box-shadow: 0 0 0 10px rgba(47, 163, 186, 0.1), 0 0 0 22px rgba(47, 163, 186, 0.05), var(--shadow-lg);
}
.ehub__kreis svg{ width: 30px; height: 30px; color: #8ee4f2; }
.ehub__kreis b{ font-size: 0.86rem; line-height: 1.2; }
.ehub__leitung{
position: relative;
width: clamp(28px, 4vw, 56px);
height: 2px;
background: linear-gradient(90deg, rgba(47, 163, 186, 0.15), rgba(47, 163, 186, 0.6));
overflow: hidden;
}
.ehub__leitung--r{ background: linear-gradient(90deg, rgba(47, 163, 186, 0.6), rgba(47, 163, 186, 0.15)); }
.ehub__leitung i{
position: absolute; top: -2px; left: 0;
width: 10px; height: 6px; border-radius: 3px;
background: #3fd6e8;
box-shadow: 0 0 8px rgba(63, 214, 232, 0.9);
animation: ehubPuls 2.4s linear infinite;
}
.ehub__leitung--r i{ animation-delay: 1.2s; }
.epreis__box{
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(1.5rem, 4vw, 3.5rem);
padding: clamp(1.6rem, 4vw, 3rem);
border-radius: calc(var(--radius) + 6px);
color: var(--dark-text);
background:
radial-gradient(32rem 20rem at 100% 0%, rgba(63, 214, 232, 0.18), transparent 60%),
radial-gradient(28rem 20rem at 0% 100%, rgba(70, 110, 210, 0.25), transparent 60%),
#142440;
box-shadow: var(--shadow-lg);
}
.epreis__box h2{ color: #fff; margin-top: 0.5rem; }
.grad--hell{ background: linear-gradient(115deg, #7fa2f0 10%, #5fd0e3 90%); -webkit-background-clip: text; background-clip: text; }
.epreis__copy > p:not(.kicker):not(.section__knopf){ margin-top: 1rem; color: var(--dark-text); line-height: 1.6; }
.epreis__klein{ font-size: 0.92rem; color: #8b98af !important; }
.epreis__klein a{ color: #8ee4f2; }
.epreis__vorsatz{ color: #fff; font-weight: 600; margin-bottom: 1rem; }
.epreis__faktoren ol{ list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.epreis__faktoren li{
display: flex; flex-direction: column; gap: 0.55rem;
padding: 1rem;
border-radius: var(--radius-sm);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.09);
color: #fff;
font-weight: 600;
line-height: 1.35;
}
.epreis__faktoren li b{
font-family: var(--font-mono);
font-size: 0.7rem;
color: #7fd0e0;
}
.epreis__faktoren li svg{ width: 26px; height: 26px; color: #8ee4f2; }
.epreis .section__knopf{ margin-top: 1.5rem; justify-content: flex-start; }
@media (max-width: 900px){.eproblem__grid, .edef__grid, .epreis__box{ grid-template-columns: 1fr; }.ehub__netz{ grid-template-columns: 1fr; justify-items: stretch; }.ehub__kern{ flex-direction: column; justify-self: center; }.ehub__leitung{ width: 2px; height: 32px; background: linear-gradient(180deg, rgba(47, 163, 186, 0.15), rgba(47, 163, 186, 0.6)); }.ehub__leitung--r{ background: linear-gradient(180deg, rgba(47, 163, 186, 0.6), rgba(47, 163, 186, 0.15)); }.ehub__leitung i{ display: none; }.ehub__kreis{ width: 124px; height: 124px; }}
@media (max-width: 480px){.ehub__chips--zwei{ grid-template-columns: 1fr; }}
@media (max-width: 560px){.epreis__faktoren ol{ grid-template-columns: 1fr; }}
@media (prefers-reduced-motion: reduce){.mdemo__fortschritt i, .ehub__chips li{ transition: none; }.ehub__leitung i{ animation: none; display: none; }html.js .postfach .postfach__liste li{ opacity: 1; transform: none; transition: none; }}
@media (max-width: 700px){.eproblem__copy > .kicker, .eproblem__copy > h2,
.edef__copy > .kicker, .edef__copy > h2,
.mdemo__copy > .kicker, .mdemo__copy > h2, .mdemo__copy > .section__intro,
.epreis__copy > .kicker, .epreis__copy > h2{ text-align: center; }.mdemo__copy > .sysflow__hint{ text-align: center; }.postfach__tag{ display: none; }.postfach__liste li{ grid-template-columns: auto minmax(0, 1fr); }.epreis .section__knopf{ justify-content: center; }}
@media (min-width: 901px){.mdemo__grid{ align-items: stretch; }.mdemo__copy h2{ font-size: clamp(1.7rem, 2.4vw, 2.25rem); }html.js .mdemo__fenster{ height: 100%; }html.js .mdemo__pane{ align-self: center; }.mdemo__text{ font-size: 1.1rem; }}
.epreis__box{ align-items: center; }
.epreis__faktoren ol{ gap: 0.8rem; }
.epreis__faktoren li{
position: relative;
overflow: hidden;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.85rem;
min-height: 96px;
padding: 1.05rem 1.1rem;
border-radius: 14px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.025));
border: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.98rem;
}
.epreis__faktoren li b{
position: absolute;
right: 0.7rem;
top: 0.35rem;
font-size: 2.3rem;
font-weight: 600;
line-height: 1;
color: rgba(127, 208, 224, 0.13);
pointer-events: none;
}
.epreis__faktoren li svg{
width: 44px;
height: 44px;
padding: 10px;
border-radius: 12px;
color: #fff;
background: linear-gradient(135deg, #2f4d9e, #1e7b90);
box-shadow: 0 8px 20px -8px rgba(63, 214, 232, 0.5);
}
.epreis__faktoren li span{ position: relative; }
@media (hover: hover){.epreis__faktoren li{ transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.8s ease, background-color 0.8s ease; }.epreis__faktoren li:hover{ transform: translateY(-2px); border-color: rgba(63, 214, 232, 0.4); }}
@media (prefers-reduced-motion: reduce){.epreis__faktoren li{ transition: none; }}
@media (min-width: 901px){.epreis__box{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }}
.epreis__faktoren li{ padding-right: 2.9rem; }
.epreis__faktoren li b{ top: auto; bottom: 0.4rem; right: 0.75rem; font-size: 2rem; }
.epreis__faktoren li{ grid-template-rows: auto auto; row-gap: 0.2rem; padding-right: 1.1rem; }
.epreis__faktoren li svg{ grid-row: 1 / 3; grid-column: 1; }
.epreis__faktoren li b{
position: static;
grid-column: 2; grid-row: 1;
font-size: 0.7rem; letter-spacing: 0.1em;
color: #7fd0e0;
align-self: end;
}
.epreis__faktoren li span{ grid-column: 2; grid-row: 2; align-self: start; }
@media (max-width: 560px){.epreis__faktoren li{ min-height: 0; }}
.mega--kompakt.mega--zwei{ width: min(920px, calc(100vw - 2rem)); }
.mega--kompakt .mega__inner{ grid-template-columns: minmax(0, 1fr) minmax(0, 14.5rem); }
.mega--kompakt .mega__spalten{
grid-template-columns: none;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
gap: clamp(1rem, 2vw, 1.8rem);
}
.mega--kompakt .mega__titel{ min-height: 0; }
.mega__liste{ display: grid; gap: 0.2rem; }
.mega__spalte--zwei .mega__liste{ grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
.mega--kompakt .mega__spalte a.mega__eintrag{
display: grid;
gap: 0.12rem;
white-space: normal;
padding: 0.55rem 0.7rem;
margin-left: -0.7rem;
border-radius: 10px;
transition: background-color 0.5s ease, box-shadow 0.5s ease, translate 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.mega__name{ font-size: 0.95rem; font-weight: 620; color: #fff; line-height: 1.3; }
.mega__info{ font-size: 0.8rem; color: #8b98af; line-height: 1.4; }
.mega--kompakt .mega__spalte a.mega__eintrag:hover .mega__info,
.mega--kompakt .mega__spalte a.mega__eintrag:focus-visible .mega__info{ color: #b9c4d8; }
.mega--kompakt .mega__spalte a.mega__eintrag[aria-current="page"]{
box-shadow: inset 2px 0 0 rgba(127, 208, 224, 0.75);
background: rgba(127, 208, 224, 0.08);
}
.mega--kompakt .mega__alle{ justify-content: flex-end; min-height: 100%; }
.mega--kompakt .mega__alle-titel{ font-size: 1.05rem; }
.nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink,
.nav__links > a.ist-aktiv{ color: var(--ink); position: relative; }
.nav--dark .nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink,
.nav--dark .nav__links > a.ist-aktiv{ color: #fff; }
.nav__links .nav__gruppe.ist-aktiv > .nav__gruppenlink::after,
.nav__links > a.ist-aktiv::after{
content: "";
position: absolute;
left: 0; right: 0; bottom: -6px;
height: 2px;
border-radius: 2px;
background: var(--grad);
}
@media (min-width: 941px){.nav__brand{ flex: none; }}
.nav__mobile-zwischen{
margin: 0.7rem 0 0.2rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fd0e0;
}
.nav__mobile a[aria-current="page"]{ color: var(--teal-ink); font-weight: 650; }
.nav--dark .nav__mobile a[aria-current="page"]{ color: #fff; }
@media (max-width: 1180px){.mega--kompakt .mega__inner{ grid-template-columns: minmax(0, 1fr); }.mega--kompakt .mega__alle{ min-height: 0; }}
@media (prefers-reduced-motion: reduce){.mega--kompakt .mega__spalte a.mega__eintrag{ transition: none; }}
.nav__links > a, .nav__links > .nav__gruppe > .nav__gruppenlink{ white-space: nowrap; }
.nav__mobile-zwischen{ color: var(--teal-ink); }
.nav--dark .nav__mobile-zwischen{ color: #7fd0e0; }
@media (min-width: 1181px){.footer__grid{ grid-template-columns: 1.1fr 1.2fr 1.25fr 0.75fr 0.9fr; gap: clamp(1.6rem, 3vw, 2.8rem); }}
@media (min-width: 941px) and (max-width: 1180px){.footer__grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }.footer__brand{ grid-column: 1 / -1; }}
.nav__mobile-zwischen{ padding-left: 0.25rem; }
@media (max-width: 1040px){.nav__links{ display: none; }.nav__burger{ display: flex; }.mega{ display: none !important; }}
#untermenue-referenzen{ width: 21rem; }
#untermenue-referenzen .nav__unter-info,
#untermenue-referenzen .nav__unter-name{ white-space: normal; }
@keyframes navlaser{ to { --nav-angle: 360deg; } }
@keyframes ping{
from { transform: scale(0.6); opacity: 1; }
to { transform: scale(2.4); opacity: 0; }
}
@keyframes bootout{ to { opacity: 0; visibility: hidden; } }
@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 ringspin{ to { rotate: 360deg; } }
@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 lb-auf{ from { opacity: 0; } }
@keyframes cookie-auf{
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
@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 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 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 referenz-schweben{
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
@keyframes siegel-dreht{ to { transform: rotate(360deg) translateZ(0); } }
@keyframes logoband-lauf{
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes teamlaser{ to { transform: rotate(360deg) translateZ(0); } }
@keyframes teamband-lauf{
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@keyframes balken-fuellen{
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
@keyframes balken-glanz{
from { transform: translateX(0); }
to { transform: translateX(350%); }
}
@keyframes hoerPuls{
0%, 100% { height: 30%; }
50% { height: 100%; }
}
@keyframes hoerRing{
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.35); opacity: 0; }
}
@keyframes galerieLauf{
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes konfig-auf{ from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
@keyframes konfig-puls{ 0% { scale: 1; } 35% { scale: 1.05; } 100% { scale: 1; } }
@keyframes ehubPuls{
from { transform: translateX(-12px); }
to { transform: translateX(60px); }
}