@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;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: #0d1930; }
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, var(--blue), var(--teal));
border-radius: 99px;
border: 3px solid #0d1930;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #3b5fc0, #3fd6e8);
}
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;
}
.hero :focus-visible, .section--dark :focus-visible, .cta :focus-visible, .footer :focus-visible { outline-color: #7fd0e0; }
.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;
}
.skip:focus-visible { transform: none; }
.sr-only {
position: absolute;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.dot {
display: inline-block;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-2);
flex: none;
}
.dot--ok { background: var(--ok); box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.18); }
.dot--info { background: var(--info); box-shadow: 0 0 0 3px rgba(79, 142, 247, 0.18); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 620;
line-height: 1;
padding: 1rem 1.8rem;
border-radius: 999px;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.btn--primary {
background: var(--grad);
color: #fff;
box-shadow: 0 10px 26px -10px rgba(47, 77, 158, 0.55);
}
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(47, 77, 158, 0.65); }
.btn--ghost {
border-color: var(--line);
background: var(--surface);
color: var(--ink);
}
.btn--ghost:hover { border-color: var(--blue); transform: translateY(-2px); }
.btn--ghost-light {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.25);
color: #fff;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.btn--ghost-light:hover { border-color: #fff; }
.btn--light { background: #fff; color: var(--blue-deep); }
.btn--light:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.4); }
.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--hidden {
transform: translateY(-120%) translateZ(0);
opacity: 0;
pointer-events: none;
}
.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;
}
@keyframes navlaser { to { --nav-angle: 360deg; } }
.nav__brand { display: flex; align-items: center; gap: 0.18rem; }
.nav__brand img { width: 36px; height: 36px; }
.nav__brandname { font-size: 1.42rem; font-weight: 750; font-stretch: 105%; letter-spacing: -0.015em; margin-top: 0.1em; }
.nav__branddot { color: var(--teal); }
.nav__links { display: flex; align-items: center; gap: clamp(0.9rem, 2vw, 1.8rem); }
.nav__links a,
.nav__links button.nav__gruppenlink {
font-size: 0.97rem;
font-weight: 550;
color: var(--ink-2);
transition: color 0.15s ease;
}
.nav__links a:hover,
.nav__links button.nav__gruppenlink:hover { color: var(--ink); }
.nav__actions { display: flex; align-items: center; gap: 0.9rem; }
.nav__burger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px; height: 42px;
background: none;
border: 1px solid rgba(12, 22, 38, 0.12);
border-radius: 50%;
padding: 10px;
cursor: pointer;
}
.nav__burger span {
display: block;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav.is-open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); visibility: hidden; }
.nav.is-open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
display: none;
pointer-events: auto;
flex-direction: column;
gap: 0.4rem;
max-width: var(--wrap);
margin: 0.6rem auto 0;
padding: 1rem 1.4rem 1.4rem;
border-radius: 22px;
background: rgba(245, 247, 251, 0.96);
border: 1px solid rgba(12, 22, 38, 0.08);
box-shadow: 0 24px 50px -18px rgba(12, 22, 38, 0.35);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
}
.nav__mobile a:not(.btn) {
padding: 0.65rem 0.25rem;
font-weight: 550;
color: var(--ink-2);
border-bottom: 1px solid var(--line);
}
.nav__mobile .btn { margin-top: 0.9rem; }
.nav.is-open .nav__mobile { display: flex; }
.nav__logo--light { display: none; }
.nav--dark .nav__logo--dark { display: none; }
.nav--dark .nav__logo--light { display: block; }
.nav--dark .nav__inner {
background: rgba(10, 20, 38, 0.55);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 12px 40px -14px rgba(0, 0, 0, 0.6);
}
.nav--dark .nav__brandname { color: #fff; }
.nav--dark .nav__links a,
.nav--dark .nav__links button.nav__gruppenlink { color: #b9c4d8; }
.nav--dark .nav__links a:hover,
.nav--dark .nav__links button.nav__gruppenlink:hover { color: #fff; }
.nav--dark .nav__burger { border-color: rgba(255, 255, 255, 0.2); }
.nav--dark .nav__burger span { background: #fff; }
.nav--dark .nav__mobile {
background: rgba(10, 18, 34, 0.97);
border-color: rgba(255, 255, 255, 0.1);
}
.nav--dark .nav__mobile a:not(.btn) { color: #b9c4d8; border-color: rgba(255, 255, 255, 0.08); }
.nav.is-scrolled .nav__inner {
background: rgba(245, 247, 251, 0.97);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.nav--dark.is-scrolled .nav__inner {
background: rgba(10, 18, 34, 0.95);
}
.hero {
position: relative;
display: flex;
flex-direction: column;
min-height: 100vh;
min-height: 100svh;
background: var(--dark);
color: #fff;
}
.hero__particles {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 1;
transform: translateZ(0);
}
.hero__bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(52rem 34rem at 78% 12%, rgba(47, 163, 186, 0.16), transparent 62%),
radial-gradient(44rem 30rem at 4% 90%, rgba(47, 77, 158, 0.22), transparent 62%),
radial-gradient(30rem 20rem at 50% 110%, rgba(79, 142, 247, 0.1), transparent 70%);
}
.hero__bg::before {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
mask-image: radial-gradient(70rem 46rem at 60% 30%, #000 25%, transparent 78%);
}
.hero__bg::after {
content: "";
position: absolute;
inset: 0;
opacity: 0.05;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.6"/></svg>');
}

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
  gap: clamp(2rem, 4.5vw, 4rem);
  align-items: center;
  flex: 1;
  padding-top: clamp(6rem, 13vh, 8rem);
  padding-bottom: clamp(1.5rem, 3.5vh, 3rem);
  width: 100%;
}

.hero .wrap { max-width: 1260px; }
/* Zeile 1 als kleinerer Vorspann, Zeile 2 ist die grosse Aussage */
.hero__l1 {
  display: block;
  font-size: 0.55em;
  font-weight: 600;
  font-stretch: 100%;
  letter-spacing: 0.035em;
  color: #cfdcef;
  margin-bottom: 0.3em;
}
.hero h1 {
  font-size: clamp(2.05rem, 3.7vw, 3.4rem);
  font-stretch: 100%;
  letter-spacing: -0.028em;
  line-height: 1.1;
  white-space: nowrap;
}
.grad-glow {
  background: linear-gradient(115deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 26px rgba(63, 214, 232, 0.3));
}

@property --badge-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.hero__badge {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #cfe0f2;
  background: rgba(10, 20, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 99px;
  padding: 0;
  margin-bottom: 1.6rem;
  overflow: hidden;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
/* Laser, der um das Badge läuft */
.hero__badge::before {
  content: "";
  --badge-angle: 0deg;
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1.4px;
  background: conic-gradient(
    from var(--badge-angle),
    transparent 0turn 0.7turn,
    rgba(63, 214, 232, 0.5) 0.82turn,
    #3fd6e8 0.9turn,
    transparent 0.995turn
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: badgelaser 7s linear infinite;
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}
@keyframes badgelaser { to { --badge-angle: 360deg; } }
/* Glanz, der alle paar Sekunden über das Badge fegt
   (Transform statt background-position: läuft flüssig durch und
   blendet während der Bewegung aus, kein sichtbares Stehenbleiben) */
.hero__badge::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.16) 50%, transparent 100%);
  transform: translateX(0) skewX(-12deg);
  opacity: 0;
  animation: badgeshine 4.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
  will-change: transform, opacity;
}
@keyframes badgeshine {
  0% { transform: translateX(0) skewX(-12deg); opacity: 0; }
  8% { opacity: 1; }
  30% { opacity: 1; }
  40% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
  100% { transform: translateX(420%) skewX(-12deg); opacity: 0; }
}
.hero__badge-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 0.95rem 0.6rem 1.1rem;
  background: rgba(46, 201, 139, 0.1);
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  color: #4be3a8;
  font-weight: 600;
}
.hero__badge-ping {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}
/* Radar-Ring, der vom Punkt nach außen pulst */
.hero__badge-ping::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 1.5px solid rgba(46, 201, 139, 0.7);
  animation: ping 1.8s cubic-bezier(0, 0.6, 0.4, 1) infinite;
}
@keyframes ping {
  from { transform: scale(0.6); opacity: 1; }
  to { transform: scale(2.4); opacity: 0; }
}
.hero__badge-text {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.15rem 0.6rem 0.95rem;
}
.hero__badge-text i { font-style: normal; color: rgba(255, 255, 255, 0.35); }

.hero__type {
  display: flex;
  align-items: center;
  margin-top: 1.2rem;
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight: 600;
  color: #3fd6e8;
  /* Feste Höhe + kein Umbruch: Layout bleibt beim Tippen absolut ruhig */
  height: 1.6em;
  overflow: hidden;
  white-space: nowrap;
}
.hero__caret {
  width: 2px;
  height: 1.15em;
  margin-left: 3px;
  background: #3fd6e8;
  animation: caret 0.9s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.hero__sub {
  font-size: clamp(1.05rem, 1.5vw, 1.18rem);
  color: var(--dark-text);
  max-width: 32em;
  margin-top: 1.2rem;
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.1rem; }
.hero__cta--center { justify-content: center; }

.hero__trust {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.9rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #8b98af;
}

/* Orbit-Ringe hinter dem System-Board */
.hero__orbit {
  position: absolute;
  top: 50%; left: 50%;
  border: 1px dashed rgba(127, 208, 224, 0.16);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: orbit 40s linear infinite, orbitin 0.9s ease 0.7s forwards;
  pointer-events: none;
}
@keyframes orbitin { to { opacity: 1; } }
.hero__orbit i {
  position: absolute;
  top: -3px; left: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #3fd6e8;
  box-shadow: 0 0 12px 2px rgba(63, 214, 232, 0.55);
}
.hero__orbit--1 { width: 115%; aspect-ratio: 1; }
.hero__orbit--2 {
  width: 138%;
  aspect-ratio: 1;
  animation: orbit 64s linear reverse infinite, orbitin 0.9s ease 0.85s forwards;
  border-color: rgba(79, 142, 247, 0.13);
}
.hero__orbit--2 i { background: #5b83e0; box-shadow: 0 0 12px 2px rgba(91, 131, 224, 0.55); }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }

/* Marquee am unteren Hero-Rand */
.hero__marquee {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  animation: risein 0.8s cubic-bezier(0.3, 1.25, 0.45, 1) 0.7s backwards;
}
@keyframes risein {
  from { opacity: 0; transform: translateY(46px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero__marquee-track {
  --mq-gap: 2.2rem;
  display: flex;
  align-items: center;
  gap: var(--mq-gap);
  width: max-content;
  padding: 0.95rem 0;
  animation: marquee 40s linear infinite;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}
.hero__marquee-track span {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8b98af;
  white-space: nowrap;
}
.hero__marquee-track i { font-style: normal; font-size: 0.5rem; color: #2fa3ba; }
@keyframes marquee { to { transform: translate3d(calc(-50% - var(--mq-gap) / 2), 0, 0); } }
.hero__marquee:hover .hero__marquee-track { animation-play-state: paused; }

/* ---------- Boot-Glitch beim ersten Laden (digitale Verzerrung) ---------- */
.bootfx { display: none; }
html.intro .bootfx {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 400;
  /* Nur ein kurzer Schleier. Die eigentliche Stoerung passiert an den
     echten Elementen (siehe Startverzerrung weiter unten). */
  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; }
@keyframes bootout { to { opacity: 0; visibility: hidden; } }
/* Explosion wartet, bis die Verzerrung vorbei ist */
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; }

/* ---------- Hero: Partikel-Orb, der sich ins AD-Zeichen verwandelt ---------- */
.orbwrap {
  position: relative;
  aspect-ratio: 1;
  max-width: 600px;
  margin-inline: auto;
}
.orbwrap canvas {
  position: absolute;
  /* Groesser als der Wrap: die wachsende Kugel darf nirgends anstossen */
  inset: -26%;
  width: 152%;
  height: 152%;
}
/* Weicher Farbnebel hinter dem Orb */
.orbwrap__glow {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 38% 42%, rgba(47, 77, 158, 0.5), transparent 55%),
    radial-gradient(circle at 64% 58%, rgba(63, 214, 232, 0.34), transparent 55%);
  filter: blur(46px);
  animation: orbglow 5.5s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes orbglow {
  from { opacity: 0.5; transform: scale(0.92); }
  to { opacity: 0.85; transform: scale(1.05); }
}

/* ============================================================
   Hero-Logo Variante "Vollglas": transparenter Koerper,
   Hintergrund scheint gebrochen durch, Rim-Light, Aberration
   ============================================================ */
.orbwrap__tilt--glass { position: relative; }
.orbwrap__tilt--glass > i {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  pointer-events: none;
}
/* Platzhalter haelt die Groesse (Glas hat kein eigenes Bild im Fluss) */
.orbwrap__tilt--glass::before {
  content: "";
  display: block;
  padding-top: 100%;
}

/* Linsen-Versatz: der Farbnebel erscheint INNERHALB des Glases
   vergroessert und verschoben. Genau das laesst es als Glas lesen. */
.g-disp {
  transform: translateZ(10px);
  /* Nur der INHALT ist verschoben/groesser, die Maske bleibt die Logo-Form:
     drinnen sitzt der Farbnebel woanders als draussen = Linseneffekt */
  background:
    radial-gradient(circle at 16% 18%, rgba(52, 86, 240, 1), transparent 68%),
    radial-gradient(circle at 86% 84%, rgba(38, 220, 240, 1), transparent 66%),
    radial-gradient(circle at 66% 8%, rgba(140, 96, 255, 0.65), transparent 58%);
  filter: blur(16px) saturate(1.35);
  opacity: 0.95;
}

/* Duenne, umlaufende Glaskante: macht die Form klar lesbar */
.g-edge {
  transform: translateZ(21px);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(200, 245, 255, 0.6) 45%, rgba(150, 220, 255, 0.45) 75%, rgba(255, 255, 255, 0.55));
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: 100%, 99%;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: 100%, 98.6%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: subtract;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Glaskoerper: verwaschener Hintergrund = echte Lichtbrechung */
.g-frost {
  transform: translateZ(12px);
  -webkit-backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
  backdrop-filter: blur(5px) saturate(4.2) brightness(0.94) contrast(1.15);
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012) 60%, rgba(255, 255, 255, 0.025));
}
/* Materialdicke: leicht getoente, halbtransparente Schichten */
.g-body {
  transform: translateZ(calc(12px - var(--i) * 1.6px));
  background: linear-gradient(150deg, rgba(120, 175, 255, 0.09), rgba(90, 215, 235, 0.07));
  opacity: calc(0.08 - var(--i) * 0.009);
}
/* Markenfarbe nur angedeutet, damit A und D erkennbar bleiben */
.g-tint {
  transform: translateZ(13px);
  background-image: url("../img/adence_logo.webp");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.08;
  filter: saturate(2) brightness(1.2);
  mix-blend-mode: screen;
}
/* Chromatische Aberration: Farbsaum an den Kanten wie bei echtem Glas */
.g-ab {
  transform: translateZ(14px);
  mix-blend-mode: screen;
  opacity: 0.3;
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-composite: subtract;
}
.g-ab--r {
  background: rgba(255, 90, 140, 0.85);
  -webkit-mask-position: center, calc(50% + 3px) calc(50% + 2px);
  mask-position: center, calc(50% + 3px) calc(50% + 2px);
}
.g-ab--b {
  background: rgba(80, 190, 255, 0.9);
  -webkit-mask-position: center, calc(50% - 3px) calc(50% - 2px);
  mask-position: center, calc(50% - 3px) calc(50% - 2px);
}
/* Innenschatten unten rechts: gibt dem Koerper Volumen */
.g-inner {
  transform: translateZ(15px);
  background: linear-gradient(135deg, transparent 40%, rgba(6, 16, 40, 0.55) 85%, rgba(4, 10, 28, 0.8));
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% - 9px) calc(50% - 9px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% - 9px) calc(50% - 9px);
  mask-composite: subtract;
  filter: blur(3px);
  opacity: 0.68;
}
/* Rim-Light: helle Glaskante oben links */
.g-rim {
  transform: translateZ(16px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.85), rgba(190, 240, 255, 0.42) 40%, rgba(120, 200, 255, 0.14) 70%, transparent);
  opacity: 0.6;
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% + 2.5px) calc(50% + 2.5px);
  mask-composite: subtract;
  mix-blend-mode: screen;
}
/* Breite Reflexion ueber die Flaeche */
.g-gloss {
  transform: translateZ(17px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.08) 22%, transparent 44%),
    linear-gradient(118deg, transparent 64%, rgba(120, 220, 255, 0.16) 88%, rgba(255, 255, 255, 0.2) 100%);
  mix-blend-mode: screen;
  opacity: 0.26;
}
/* Scharfe Glanzpunkte */
.g-spec {
  transform: translateZ(18px);
  background:
    radial-gradient(18% 9% at 30% 12%, rgba(255, 255, 255, 0.95), transparent 72%),
    radial-gradient(9% 6% at 62% 23%, rgba(255, 255, 255, 0.5), transparent 72%),
    radial-gradient(13% 7% at 73% 83%, rgba(180, 240, 255, 0.4), transparent 72%);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  opacity: 0.55;
}
/* Weicher Schatten dahinter */
.g-cast {
  transform: translateZ(-26px) translate(12px, 18px);
  background: rgba(4, 10, 26, 0.7);
  filter: blur(30px);
  opacity: 0.45;
}

/* Farbiges Leuchten direkt hinter dem Logo: nur so kann Glas Farbe brechen */
.orbwrap__aurora {
  position: absolute;
  top: 50%; left: 50%;
  width: 118%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 32%, rgba(52, 86, 240, 1), transparent 62%),
    radial-gradient(circle at 72% 70%, rgba(38, 220, 240, 0.98), transparent 60%),
    radial-gradient(circle at 58% 22%, rgba(140, 96, 255, 0.6), transparent 55%);
  filter: blur(20px);
  opacity: 0;
  transition: opacity 1.2s ease 0.2s;
  animation: auroradrift 12s ease-in-out infinite alternate;
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__aurora { opacity: 1; }
@keyframes auroradrift {
  0% { transform: translate(-52%, -48%) rotate(0deg) scale(1); }
  100% { transform: translate(-48%, -52%) rotate(22deg) scale(1.08); }
}

/* Kanten-Lupe: am Rand bricht das Glas staerker (Linsen-Effekt) */
.g-lens {
  transform: translateZ(11px);
  -webkit-backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
  backdrop-filter: blur(2px) saturate(3.6) brightness(1.2);
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, center;
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: 100%, 88%;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, center;
  mask-composite: subtract;
}

/* Leichte Ringe um das Logo, die langsam pulsieren */
.orbwrap__rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 1.2s ease 0.3s;
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__rings { opacity: 1; }
.orbwrap__rings i {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(127, 208, 224, 0.28);
  animation: ringpulse 5s ease-in-out infinite;
}
.orbwrap__rings i:nth-child(1) { width: 54%; aspect-ratio: 1; }
.orbwrap__rings i:nth-child(2) {
  width: 72%; aspect-ratio: 1;
  border-color: rgba(88, 122, 224, 0.22);
  animation-delay: 1.2s;
}
.orbwrap__rings i:nth-child(3) {
  width: 92%; aspect-ratio: 1;
  border-style: dashed;
  border-color: rgba(127, 208, 224, 0.14);
  animation-delay: 2.4s;
  animation-duration: 6.5s;
}
@keyframes ringpulse {
  0%, 100% { transform: scale(0.97); opacity: 0.45; }
  50% { transform: scale(1.06); opacity: 1; }
}

/* Finale: echtes Logo mit Licht- und Gradient-Effekten */
.orbwrap__final {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 1.05s cubic-bezier(0.33, 0, 0.2, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.orbwrap.is-final .orbwrap__final { opacity: 1; transform: none; }
/* Kurzer Lichtimpuls genau im Moment des Wechsels */
.orbwrap__final::after {
  content: "";
  position: absolute;
  inset: -6%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(200, 245, 255, 0.85), rgba(120, 190, 255, 0.35) 45%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.orbwrap.is-final .orbwrap__final::after { animation: logobloom 1.15s cubic-bezier(0.2, 0, 0.2, 1) forwards; }
@keyframes logobloom {
  0% { opacity: 0; transform: scale(0.86); }
  18% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.3); }
}
/* Finale: Hintergrund-Leuchten wird kraeftiger und atmet */
.orbwrap.is-final .orbwrap__glow {
  inset: -4%;
  animation: orbglowfinal 4.5s ease-in-out infinite alternate;
}
@keyframes orbglowfinal {
  from { opacity: 0.75; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1.12); }
}
.orbwrap canvas { transition: opacity 0.9s ease, filter 0.9s ease; }
.orbwrap.is-final canvas {
  opacity: 0;
  /* Weichzeichnen beim Ausblenden: die Punkte zerfliessen ins Logo */
  filter: blur(13px);
  transition: opacity 0.95s cubic-bezier(0.4, 0, 0.25, 1) 0.2s, filter 0.95s ease 0.2s;
}
.orbwrap__logo {
  position: relative;
  width: 54%;
  animation: logofloat 7s ease-in-out infinite;
}
/* 3D-Buehne: pendelt leicht, folgt der Maus */
.orbwrap__final { perspective: 900px; }
.orbwrap__tilt {
  position: relative;
  transform-style: preserve-3d;
  animation: logosway 9s ease-in-out infinite;
  transition: transform 0.25s ease-out;
}
.orbwrap__tilt.is-tilting { animation: none; }
@keyframes logosway {
  0%, 100% { transform: rotateX(9deg) rotateY(-11deg); }
  50% { transform: rotateX(4deg) rotateY(11deg); }
}
/* --- Schlagschatten hinter dem Koerper: erzeugt Tiefe im Raum --- */
.orbwrap__cast {
  position: absolute;
  inset: 0;
  transform: translateZ(-30px) translate(10px, 16px) scale(1.01);
  background: rgba(4, 10, 26, 0.75);
  /* Sehr weich: soll Tiefe andeuten, nicht als zweites Logo lesbar sein */
  filter: blur(34px);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  opacity: 0.5;
}

/* --- Glaskoerper: Vorderseite --- */
.orbwrap__front {
  position: relative;
  width: 100%;
  height: auto;
  transform: translateZ(16px);
  /* Satt, aber im dunkleren Blauton (nicht ins Grelle kippen) */
  filter: saturate(1.5) brightness(1.02)
          drop-shadow(0 0 26px rgba(47, 120, 190, 0.32))
          drop-shadow(0 10px 20px rgba(4, 10, 26, 0.5))
          drop-shadow(0 26px 52px rgba(4, 10, 26, 0.45));
  animation: logoglow 4.5s ease-in-out infinite alternate;
}

/* --- Extrusion: gestapelte Ebenen ergeben echte Materialdicke --- */
.orbwrap__depth {
  position: absolute;
  inset: 0;
  transform: translateZ(calc(16px - var(--i) * 1.5px));
  background: linear-gradient(150deg, #2b3f7a, #12325c 45%, #0b1b38);
  /* Je tiefer die Ebene, desto dunkler: erzeugt die Kantenwoelbung */
  filter: brightness(calc(1 - var(--i) * 0.055));
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
}

/* --- Lichtbrechung im Glas: Farbnebel scheint durch den Koerper --- */
.orbwrap__refract {
  position: absolute;
  inset: 0;
  transform: translateZ(17px);
  background:
    radial-gradient(circle at 72% 78%, rgba(63, 214, 232, 0.6), transparent 46%),
    radial-gradient(circle at 24% 26%, rgba(120, 165, 255, 0.5), transparent 48%);
  filter: blur(10px);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.55;
}

/* --- Bevel: helle Kante oben links, dunkle unten rechts ---
   Trick: dieselbe Logo-Maske zweimal, versetzt voneinander abgezogen,
   uebrig bleibt nur der schmale Rand innerhalb der Form. */
.orbwrap__bevel {
  position: absolute;
  inset: 0;
  transform: translateZ(18px);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(190, 235, 255, 0.5) 45%, transparent 75%);
  -webkit-mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  -webkit-mask-size: contain, contain;
  -webkit-mask-repeat: no-repeat, no-repeat;
  -webkit-mask-position: center, calc(50% + 4px) calc(50% + 4px);
  -webkit-mask-composite: source-out;
  mask-image: url("../img/adence_logo.webp"), url("../img/adence_logo.webp");
  mask-size: contain, contain;
  mask-repeat: no-repeat, no-repeat;
  mask-position: center, calc(50% + 4px) calc(50% + 4px);
  mask-composite: subtract;
  mix-blend-mode: screen;
  opacity: 0.85;
}
.orbwrap__bevel--dark {
  background: linear-gradient(135deg, transparent 25%, rgba(6, 14, 34, 0.7) 60%, rgba(4, 10, 26, 0.95));
  -webkit-mask-position: center, calc(50% - 4px) calc(50% - 4px);
  mask-position: center, calc(50% - 4px) calc(50% - 4px);
  mix-blend-mode: multiply;
  opacity: 0.9;
}

/* --- Breiter Glanz ueber die Flaeche --- */
.orbwrap__gloss {
  position: absolute;
  inset: 0;
  transform: translateZ(19px);
  background:
    linear-gradient(118deg, rgba(255, 255, 255, 0.42) 0%, rgba(255, 255, 255, 0.1) 20%, transparent 40%),
    linear-gradient(118deg, transparent 60%, rgba(63, 180, 214, 0.18) 86%, rgba(255, 255, 255, 0.22) 100%);
  -webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mask: url("../img/adence_logo.webp") center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: 0.72;
}

/* --- Spiegelnder Lichtpunkt oben links (macht es „glasig") --- */
.orbwrap__spec {
position: absolute;
inset: 0;
transform: translateZ(20px);
background:
radial-gradient(28% 16% at 30% 12%, rgba(255, 255, 255, 0.95), transparent 70%),
radial-gradient(14% 9% at 62% 22%, rgba(255, 255, 255, 0.55), transparent 70%);
filter: blur(1.5px);
-webkit-mask: url("../img/adence_logo.webp") center / contain no-repeat;
mask: url("../img/adence_logo.webp") center / contain no-repeat;
mix-blend-mode: screen;
opacity: 0.9;
}
@keyframes logofloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
@keyframes logoglow {
from { filter: saturate(1.45) brightness(0.98) drop-shadow(0 0 18px rgba(47, 120, 190, 0.25)) drop-shadow(0 12px 34px rgba(30, 52, 120, 0.5)); }
to { filter: saturate(1.55) brightness(1.06) drop-shadow(0 0 40px rgba(63, 180, 214, 0.45)) drop-shadow(0 14px 46px rgba(47, 77, 158, 0.6)); }
}
.hero__system { position: relative; perspective: 1400px; }
.sys {
container-type: inline-size;
position: relative;
aspect-ratio: 660 / 600;
max-width: 640px;
margin-inline: auto;
transform-style: preserve-3d;
transition: transform 0.25s ease-out;
will-change: transform;
backface-visibility: hidden;
}
.sys__node { cursor: default; }
.sys .sys__node.is-zoom {
border-color: rgba(63, 214, 232, 0.85);
transform: scale(1.85);
z-index: 6;
animation-play-state: paused;
}
.sys .sys__node.is-zoom::after { opacity: 1; }
.sys__node--web { transform-origin: top left; --fa: 10px; --fb: 14px; --fd: 26s; }
.sys__node--crm { transform-origin: top right; --fa: 13px; --fb: 9px; --fd: 30s; }
.sys__node--ki { transform-origin: center center; --fa: 8px; --fb: 11px; --fd: 24s; }
.sys__node--task { transform-origin: bottom left; --fa: 11px; --fb: 13px; --fd: 32s; }
.sys__node--dash { transform-origin: bottom right; --fa: 14px; --fb: 9px; --fd: 28s; }
.hero .sys__node[data-explode] {
animation:
assemble 0.95s cubic-bezier(0.3, 1.25, 0.45, 1) var(--ed, 0s) backwards,
floaty var(--fd, 8s) ease-in-out calc(var(--ed, 0s) + 1.4s) infinite;
}
@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); }
}
.hero [data-explode] {
animation: assemble 0.95s cubic-bezier(0.3, 1.25, 0.45, 1) var(--ed, 0s) backwards;
}
@keyframes assemble {
from {
opacity: 0;
transform: translate(var(--ex, 0px), var(--ey, 0px)) rotate(var(--er, 0deg)) scale(var(--es, 0.85));
filter: blur(8px);
}
55% { filter: blur(0); }
to {
opacity: 1;
transform: translate(0, 0) rotate(0deg) scale(1);
filter: blur(0);
}
}
.sys__lines {
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
opacity: 0;
animation: linesin 0.7s ease 1.15s forwards;
transform: translateZ(0);
}
@keyframes linesin { to { opacity: 1; } }
.sys__lines path {
stroke: url(#beam);
stroke-opacity: 0.8;
stroke-width: 1.8;
stroke-dasharray: 7 9;
animation: dashflow 1.2s linear infinite;
}
@keyframes dashflow { to { stroke-dashoffset: -32; } }
.sys__pulse--teal { fill: #3fd6e8; filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.9)); }
.sys__pulse--blue { fill: #6f95e8; filter: drop-shadow(0 0 6px rgba(111, 149, 232, 0.9)); }
.sys__node {
position: absolute;
background: rgba(13, 25, 46, 0.9);
border: 1px solid rgba(127, 208, 224, 0.16);
border-radius: var(--radius);
box-shadow: 0 20px 50px -18px rgba(0, 0, 0, 0.6);
padding: 2.8cqw 3.1cqw;
transition:
border-color 0.35s ease,
transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
transform: translateZ(0);
will-change: transform;
}
.sys__node::after {
content: "";
position: absolute;
inset: -2px;
border-radius: inherit;
box-shadow:
0 0 0 3px rgba(63, 214, 232, 0.16),
0 0 70px -8px rgba(63, 214, 232, 0.55),
0 46px 100px -22px rgba(0, 0, 0, 0.85);
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.sys__node.is-active {
border-color: rgba(63, 214, 232, 0.7);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.12), 0 0 34px -4px rgba(63, 214, 232, 0.35), 0 20px 50px -18px rgba(0, 0, 0, 0.6);
transform: translateY(-3px);
}
.sys__node--web { left: 3.6%; top: 5%; width: 33.5%; }
.sys__node--crm { left: 65%; top: 3%; width: 31.6%; }
.sys__node--ki { left: 32%; top: 32%; width: 36.6%; }
.sys__node--task { left: 3.6%; top: 64.5%; width: 34%; }
.sys__node--dash { left: 63.5%; top: 56.5%; width: 33%; }
.sys__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1cqw;
margin-bottom: 1.6cqw;
}
.sys__tag {
font-family: var(--font-mono);
font-size: 1.7cqw;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #7fd0e0;
}
.sys__status {
display: inline-flex;
align-items: center;
gap: 0.9cqw;
font-family: var(--font-mono);
font-size: 1.6cqw;
color: #8b98af;
}
.sys__status .dot, .sys__rail .dot { width: 1.2cqw; height: 1.2cqw; }
.sys__title { font-size: 2.5cqw; font-weight: 680; letter-spacing: -0.01em; color: #fff; }
.sys__form { display: flex; flex-direction: column; gap: 1.3cqw; margin-top: 1.6cqw; }
.sys__line {
display: block;
height: 1.5cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.1);
}
.sys__line--w80 { width: 80%; }
.sys__line--w70 { width: 70%; }
.sys__line--w55 { width: 55%; }
.sys__line--w50 { width: 50%; }
.sys__btn {
align-self: flex-start;
background: var(--grad);
color: #fff;
font-size: 1.8cqw;
font-weight: 620;
padding: 1.1cqw 2.4cqw;
border-radius: 1.2cqw;
margin-top: 0.5cqw;
}
.sys__row { display: flex; align-items: center; gap: 1.8cqw; margin-top: 1.8cqw; }
.sys__row > div { flex: 1; display: flex; flex-direction: column; gap: 1.1cqw; }
.sys__avatar {
width: 5.4cqw; height: 5.4cqw;
flex: none;
border-radius: 50%;
background: rgba(63, 214, 232, 0.16);
color: #3fd6e8;
font-family: var(--font-mono);
font-size: 1.8cqw;
font-weight: 600;
display: grid;
place-items: center;
}
.sys__avatar--b { background: rgba(111, 149, 232, 0.18); color: #9db7f2; }
.sys__assig { font-family: var(--font-mono); font-size: 1.7cqw; color: #8b98af; }
.sys__chips { display: flex; flex-wrap: wrap; gap: 1cqw; margin-top: 1.6cqw; }
.sys__chip {
font-family: var(--font-mono);
font-size: 1.6cqw;
padding: 0.8cqw 1.6cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.07);
color: #b9c4d8;
}
.sys__chip--hot { background: rgba(63, 214, 232, 0.16); color: #3fd6e8; }
.sys__meter {
height: 1.4cqw;
border-radius: 99px;
background: rgba(255, 255, 255, 0.1);
margin-top: 2cqw;
overflow: hidden;
}
.sys__meter span {
display: block;
height: 100%;
width: 72%;
border-radius: inherit;
background: var(--grad);
animation: meter 3.4s ease-in-out infinite alternate;
}
@keyframes meter { from { width: 34%; } to { width: 86%; } }
.sys__bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 7cqw; margin-top: 1.6cqw; }
.sys__bars i {
flex: 1;
height: var(--h);
border-radius: 0.7cqw 0.7cqw 0 0;
background: linear-gradient(180deg, var(--teal), var(--blue));
opacity: 0.85;
transform-origin: bottom;
animation: bar 3s ease-in-out infinite alternate;
}
.sys__bars i:nth-child(2n) { animation-delay: 0.5s; }
.sys__bars i:nth-child(3n) { animation-delay: 0.9s; }
@keyframes bar { from { transform: scaleY(0.75); } to { transform: scaleY(1); } }
.sys__kpi {
font-family: var(--font-mono);
font-size: 1.7cqw;
font-weight: 600;
color: #3fd6e8;
margin-top: 1.2cqw;
}
.sys__rail {
position: absolute;
left: 3.6%; right: 3.4%; bottom: 0;
display: flex;
align-items: center;
gap: 3cqw;
background: rgba(13, 25, 46, 0.85);
border: 1px solid rgba(127, 208, 224, 0.22);
border-radius: var(--radius-sm);
padding: 1.9cqw 3cqw;
transition: box-shadow 0.4s ease;
}
.sys__rail.is-active { box-shadow: 0 0 0 4px rgba(47, 163, 186, 0.18); }
.sys__rail .sys__tag { color: #7fd0e0; }
.sys__railitem {
display: inline-flex;
align-items: center;
gap: 1cqw;
font-family: var(--font-mono);
font-size: 1.6cqw;
color: var(--dark-text);
}
.logos {
padding: clamp(2.5rem, 5vw, 4rem) 0;
border-block: 1px solid var(--line);
background: var(--surface);
}
.logos .kicker { margin-bottom: 1.6rem; }
.logos__grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: clamp(0.8rem, 1.6vw, 1.4rem);
align-items: center;
}
.logos__item {
display: grid;
place-items: center;
background: #fff;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 0.9rem 1rem;
min-height: 74px;
transition: border-color 0.25s ease, transform 0.25s ease;
}
.logos__item:hover { border-color: rgba(47, 163, 186, 0.4); transform: translateY(-2px); }
.logos__item img {
max-height: 44px;
width: auto;
filter: grayscale(1);
opacity: 0.6;
transition: filter 0.25s ease, opacity 0.25s ease;
}
.logos__item:hover img { filter: none; opacity: 1; }
.logos--dunkel {
--dunkel-sektion: #142440;
border-block: 0;
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 140px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 140px),
radial-gradient(44rem 24rem at 82% 12%, rgba(63, 214, 232, 0.14), transparent 62%),
radial-gradient(38rem 22rem at 12% 88%, rgba(47, 77, 158, 0.3), transparent 62%),
var(--dunkel-sektion);
color: var(--dark-text);
}
.logos--dunkel .logos__item {
background: rgba(255, 255, 255, 0.94);
border-color: rgba(255, 255, 255, 0.14);
}
.logos--dunkel .logos__item img { filter: none; opacity: 1; }
.logos--dunkel .logos__item:hover {
background: #fff;
border-color: rgba(63, 214, 232, 0.55);
box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.7);
}
.logos--dunkel .logos__item:hover img { filter: grayscale(1); opacity: 0.72; }
.section { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
.section--tint { background: linear-gradient(180deg, #eef2f8, var(--bg)); }
.section--dark {
--dunkel-sektion: #142440;
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
radial-gradient(50rem 30rem at 85% 14%, rgba(63, 214, 232, 0.16), transparent 60%),
radial-gradient(40rem 26rem at 0% 86%, rgba(70, 110, 210, 0.2), transparent 60%),
var(--dunkel-sektion);
color: #fff;
}
.section__head { max-width: 46rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head--breit { max-width: none; }
.section__head--breit > h2,
.section__head--breit > .kicker { max-width: 46rem; }
.section__head--voll { max-width: none; }
.section__head--voll > h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.section__head--marke { max-width: none; }
.section__head--marke > h2 {
font-size: clamp(1.9rem, 3.35vw, 3rem);
font-stretch: 100%;
letter-spacing: -0.03em;
line-height: 1.08;
white-space: nowrap;
}
@media (max-width: 900px) {
.section__head--marke > h2 {
white-space: normal;
text-wrap: balance;
font-size: clamp(1.75rem, 6.4vw, 2.3rem);
}
}
.section__intro { font-size: 1.13rem; color: var(--ink-2); margin-top: 1.1rem; }
.section__intro--light { color: var(--dark-text); }
.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__icon {
margin-right: 1rem;
width: 48px; height: 48px;
border-radius: 12px;
background: rgba(47, 77, 158, 0.08);
display: grid;
place-items: center;
}
.goal__icon svg { width: 24px; height: 24px; stroke: var(--blue); fill: none; }
.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: " →"; }
.core {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(1.8rem, 4vw, 4rem);
align-items: center;
padding: clamp(1.8rem, 3.5vw, 3rem);
background: var(--surface);
border: 1px solid var(--line);
border-radius: calc(var(--radius) + 6px);
box-shadow: var(--shadow);
}
.core + .core { margin-top: 1.4rem; }
.core--flip .core__copy { order: 2; }
.core--flip .core__visual { order: 1; }
.core__index {
font-family: var(--font-mono);
font-size: 0.85rem;
font-weight: 600;
color: var(--teal-ink);
margin-bottom: 0.6rem;
}
.core__index::after { content: " /"; color: var(--line); }
.core h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 720; font-stretch: 106%; margin-bottom: 0.8rem; }
.core > .core__copy > p { color: var(--ink-2); }
.ticks { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.55rem; }
.ticks li { position: relative; padding-left: 1.7rem; color: var(--ink-2); }
.ticks li::before {
content: "";
position: absolute;
left: 0; top: 0.42em;
width: 15px; height: 15px;
border-radius: 50%;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M4 8.4l2.7 2.7L12 5.6" fill="none" stroke="white" stroke-width="2.1" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 100% no-repeat,
linear-gradient(115deg, var(--blue), var(--teal));
}
.ticks--light li { color: var(--dark-text); }
.ticks--cols { grid-template-columns: 1fr 1fr; column-gap: 1.5rem; }
.ticks--cols li { white-space: nowrap; }
@media (max-width: 620px) {
.ticks--cols { grid-template-columns: 1fr; }
.ticks--cols li { white-space: normal; }
}
.ticks--big { gap: 0.9rem; }
.ticks--big li { font-size: 1.13rem; color: var(--ink); padding-left: 2rem; }
.ticks--big li::before { top: 0.35em; width: 18px; height: 18px; }
.mock {
background: #fbfcfe;
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.mock__bar {
display: flex;
align-items: center;
gap: 6px;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--line);
background: #f2f5fa;
}
.mock__bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dce8; }
.mock__url {
margin-left: 0.6rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--ink-2);
background: #fff;
border: 1px solid var(--line);
border-radius: 99px;
padding: 0.15rem 0.8rem;
}
.mock__body { padding: 1.3rem; }
.mock__hero { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.1rem; }
.mock__h { width: 62%; height: 14px; border-radius: 99px; background: #dfe6f1; }
.mock__l { height: 9px; border-radius: 99px; background: #e8edf5; }
.mock__l--w60 { width: 60%; }
.mock__pill {
align-self: flex-start;
margin-top: 0.4rem;
background: var(--grad);
color: #fff;
font-size: 0.78rem;
font-weight: 620;
padding: 0.45rem 1rem;
border-radius: 8px;
}
.mock__cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.7rem; }
.mock__cols span { height: 52px; border-radius: 8px; background: #eef2f9; border: 1px solid var(--line); }
.mock--app { display: grid; grid-template-columns: 52px 1fr; }
.mock__side { display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 0.8rem; background: var(--dark); }
.mock__side i { width: 100%; aspect-ratio: 1; border-radius: 8px; background: rgba(255, 255, 255, 0.14); }
.mock__side i.is-on { background: linear-gradient(115deg, var(--blue), var(--teal)); }
.mock__main { padding: 1.1rem 1.2rem; }
.mock__kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7rem; margin-bottom: 1rem; }
.mock__kpis span {
display: flex;
flex-direction: column;
gap: 0.15rem;
background: #fff;
border: 1px solid var(--line);
border-radius: 8px;
padding: 0.6rem 0.7rem;
font-size: 0.68rem;
color: var(--ink-2);
}
.mock__kpis b { font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }
.mock__rows { display: flex; flex-direction: column; gap: 0.5rem; }
.mock__rows i { height: 26px; border-radius: 6px; background: #eef2f9; border: 1px solid var(--line); }
.mock__rows i:first-child { background: rgba(47, 163, 186, 0.1); border-color: rgba(47, 163, 186, 0.3); }
.mock--chat { padding: 1.1rem 1.2rem; }
.mock__chathead {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.75rem;
color: var(--ink-2);
padding-bottom: 0.8rem;
border-bottom: 1px solid var(--line);
margin-bottom: 1rem;
}
.mock__msg {
max-width: 88%;
font-size: 0.86rem;
line-height: 1.5;
padding: 0.65rem 0.9rem;
border-radius: 12px;
margin-bottom: 0.7rem;
}
.mock__msg--user {
margin-left: auto;
background: var(--grad);
color: #fff;
border-bottom-right-radius: 4px;
}
.mock__msg--ai {
background: #eef2f9;
border: 1px solid var(--line);
border-bottom-left-radius: 4px;
}
.mock__input { height: 38px; border: 1px solid var(--line); border-radius: 10px; background: #fff; display: flex; align-items: center; padding-inline: 0.9rem; }
.mock__input span { width: 34%; height: 8px; border-radius: 99px; background: #e8edf5; }
.dsgpt {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.dsgpt h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.dmock {
background: var(--dark-2);
border: 1px solid var(--dark-line);
border-radius: var(--radius);
box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.55);
overflow: hidden;
}
.dmock__top {
display: flex;
align-items: center;
gap: 1.2rem;
padding: 0.85rem 1.2rem;
border-bottom: 1px solid var(--dark-line);
}
.dmock__logo {
font-family: var(--font-mono);
font-weight: 600;
font-size: 0.9rem;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.dmock__tabs { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.dmock__tabs i {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--dark-text);
padding: 0.3rem 0.7rem;
border-radius: 99px;
}
.dmock__tabs i.is-on { background: rgba(47, 163, 186, 0.16); color: #7fd0e0; }
.dmock__body { padding: 1.2rem; }
.dmock__msg {
font-size: 0.88rem;
line-height: 1.55;
padding: 0.7rem 1rem;
border-radius: 12px;
margin-bottom: 0.8rem;
max-width: 92%;
}
.dmock__msg--user { margin-left: auto; background: rgba(79, 142, 247, 0.16); color: #dce6f7; border-bottom-right-radius: 4px; }
.dmock__msg--ai { background: rgba(255, 255, 255, 0.05); border: 1px solid var(--dark-line); color: var(--dark-text); border-bottom-left-radius: 4px; }
.dmock__model {
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
color: #7fd0e0;
margin-bottom: 0.45rem;
}
.dmock__stat {
display: flex;
flex-wrap: wrap;
gap: 0.6rem 1.4rem;
padding-top: 0.9rem;
border-top: 1px solid var(--dark-line);
}
.dmock__stat span {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.72rem;
color: var(--dark-text);
}
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.4rem; }
.filter {
font-family: var(--font-mono);
font-size: 0.78rem;
padding: 0.42rem 1rem;
border-radius: 99px;
border: 1px solid var(--line);
color: var(--ink-2);
background: var(--surface);
}
.filter.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }
.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__tags { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; }
.case__tags span {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--blue);
background: rgba(47, 77, 158, 0.08);
border-radius: 99px;
padding: 0.3rem 0.8rem;
}
.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); }
.mock--case { max-width: 520px; }
.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; }
.ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.op {
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--dark-line);
border-radius: var(--radius);
padding: 1.6rem 1.5rem;
transition: background-color 0.25s ease, border-color 0.25s ease;
}
.op:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(47, 163, 186, 0.4); }
.op .dot { margin-bottom: 0.9rem; }
.op h3 { font-size: 1.08rem; font-weight: 680; color: #fff; margin-bottom: 0.45rem; }
.op p { color: var(--dark-text); font-size: 0.94rem; }
.stats {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.1rem;
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.stats > * { flex: 1 1 10rem; max-width: 15rem; }
.stat {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.5rem 1.2rem 1.3rem;
text-align: center;
}
.stat b {
display: block;
font-size: clamp(1.9rem, 3vw, 2.6rem);
font-weight: 760;
font-stretch: 106%;
letter-spacing: -0.02em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat b::after { content: "+"; }
.stat--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);
}
.why {
display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.why__team .team { --spalten: 3; margin-top: 1.2rem; }
.member img { border-radius: var(--radius); box-shadow: var(--shadow); }
.member figcaption { margin-top: 0.7rem; }
.member b { display: block; font-size: 0.98rem; }
.member span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-2); }
.quotes { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 1.1rem; align-items: start; }
.quote {
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.8rem 1.6rem;
box-shadow: var(--shadow);
}
.quote blockquote { font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.quote figcaption { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.quote b { display: block; }
.quote figcaption span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--ink-2); }
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.post {
display: flex;
flex-direction: column;
gap: 0.9rem;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.7rem 1.5rem;
transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.post:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.post__tag {
align-self: flex-start;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--teal-ink);
background: rgba(47, 163, 186, 0.12);
border-radius: 99px;
padding: 0.3rem 0.8rem;
}
.post h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
.post__more {
margin-top: auto;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
color: var(--blue);
}
.post__more::after { content: " →"; }
.lexikon {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
margin-top: 1.4rem;
background: linear-gradient(115deg, rgba(47, 77, 158, 0.07), rgba(47, 163, 186, 0.09));
border: 1px solid var(--line);
border-radius: var(--radius);
padding: 1.8rem 2rem;
}
.lexikon h3 { font-size: 1.25rem; font-weight: 720; margin-bottom: 0.3rem; }
.lexikon p { color: var(--ink-2); }
.cta {
position: relative;
padding: clamp(5rem, 9vw, 8rem) 0;
background: var(--dark);
color: #fff;
text-align: center;
}
.cta__bg {
position: absolute;
inset: 0;
background:
linear-gradient(0deg, #071020 0, transparent 180px),
linear-gradient(180deg, var(--dark) 0, transparent 140px),
radial-gradient(42rem 26rem at 50% 12%, rgba(47, 163, 186, 0.18), transparent 65%),
radial-gradient(36rem 24rem at 15% 88%, rgba(47, 77, 158, 0.25), transparent 60%);
}
.cta__bg::after {
content: "";
position: absolute;
inset: 0;
background-image:
linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
background-size: 44px 44px;
-webkit-mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
mask-image: radial-gradient(50rem 30rem at 50% 40%, #000 30%, transparent 75%);
}
.cta__inner { position: relative; max-width: 46rem; }
.cta h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.cta p { color: var(--dark-text); font-size: 1.13rem; margin-top: 1.1rem; }
.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__brand p:last-child { font-size: 0.95rem; max-width: 30em; }
.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);
}
.totop:focus-visible { outline: 2px solid #3fd6e8; outline-offset: 3px; }
.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__btn:focus-visible {
outline: 2px solid #3fd6e8;
outline-offset: 3px;
}
.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);
}
@keyframes ringspin { to { rotate: 360deg; } }
.section > .wrap { position: relative; z-index: 1; }
.spot { position: relative; }
.spot::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(47, 163, 186, 0.14), transparent 65%);
opacity: 0;
transition: opacity 0.35s ease;
pointer-events: none;
}
.spot:hover::before { opacity: 1; }
.section--dark .spot::before {
background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(63, 214, 232, 0.13), transparent 65%);
}
.core .mock, .case .mock {
transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.9s ease;
}
.core:hover .mock, .case:hover .mock {
transform: translateY(-3px) scale(1.01);
box-shadow: 0 6px 12px rgba(12, 22, 38, 0.06), 0 30px 70px -22px rgba(34, 58, 124, 0.34);
}
.core, .case { transition: border-color 0.3s ease; }
.core:hover, .case:hover { border-color: rgba(47, 163, 186, 0.45); }
.step { transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.8s ease, border-color 0.6s ease; }
.step:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.4); }
.step__num { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.step:hover .step__num { transform: rotate(-8deg) scale(1.12); }
.stat { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease; }
.stat:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(47, 163, 186, 0.45); }
.stat b { transition: filter 0.3s ease; }
.stat:hover b { filter: drop-shadow(0 0 14px rgba(47, 163, 186, 0.45)); }
.member { overflow: visible; }
.member img { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s ease; }
.member:hover img {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 8px 16px rgba(12, 22, 38, 0.1), 0 30px 60px -18px rgba(34, 58, 124, 0.4);
}
.logos__item { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.3s ease, box-shadow 0.35s ease; }
.logos__item:hover { transform: translateY(-4px); border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }
.quote { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease; }
.quote:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.op { transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.op:hover { transform: translateY(-4px); }
.op .dot { position: relative; }
.op:hover .dot::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 1.5px solid rgba(46, 201, 139, 0.7);
animation: ping 1.1s cubic-bezier(0, 0.6, 0.4, 1) infinite;
}
.lexikon { transition: border-color 0.3s ease, box-shadow 0.35s ease; }
.lexikon:hover { border-color: rgba(47, 163, 186, 0.5); box-shadow: var(--shadow); }
.dmock { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.55s ease; }
.dsgpt__visual:hover .dmock {
transform: translateY(-8px) rotate(0.4deg);
box-shadow: 0 40px 90px -22px rgba(0, 0, 0, 0.7), 0 0 50px -10px rgba(63, 214, 232, 0.25);
}
.dmock.play .dmock__msg {
opacity: 0;
transform: translateY(10px);
transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.dmock.play .dmock__msg--user { transform: translateX(16px); }
.dmock.play .dmock__msg.is-on { opacity: 1; transform: none; }
.dmock__msg--ai { position: relative; }
.dmock__msg--ai.is-typing .dmock__text,
.dmock__msg--ai.is-typing .dmock__model { visibility: hidden; }
.dmock__dots {
position: absolute;
top: 0.95rem;
left: 1rem;
display: none;
gap: 5px;
}
.dmock__msg--ai.is-typing .dmock__dots { display: flex; }
.dmock__dots i {
width: 7px; height: 7px;
border-radius: 50%;
background: #7fd0e0;
animation: chatdot 1s ease-in-out infinite;
}
.dmock__dots i:nth-child(2) { animation-delay: 0.15s; }
.dmock__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chatdot {
0%, 100% { opacity: 0.3; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-4px); }
}
.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); }
.quotes { grid-template-columns: 1fr 1fr; }
.quote:first-child { grid-column: 1 / -1; }
}
@media (max-width: 940px) {
.nav__links { display: none; }
.nav__burger { display: flex; }
.nav__actions .btn { display: none; }
.hero { min-height: 0; }
.hero__grid { padding-top: 6.5rem; }
.hero__grid { grid-template-columns: minmax(0, 1fr); }
.hero__system { order: 2; }
.hero__copy { order: 1; }
.hero h1 { font-size: clamp(2.05rem, 5vw, 2.6rem); }
.core, .core--flip { grid-template-columns: 1fr; }
.core--flip .core__copy { order: 1; }
.core--flip .core__visual { order: 2; }
.case { grid-template-columns: 1fr; }
.case__visual { order: 2; }
.dsgpt { grid-template-columns: 1fr; }
.why { grid-template-columns: 1fr; }
.cases { grid-template-columns: 1fr; }
.posts { grid-template-columns: 1fr; }
.ops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
body { font-size: 1rem; }
.hero h1 { white-space: normal; text-wrap: balance; font-size: clamp(1.9rem, 8.4vw, 2.3rem); }
.hero__l1 { font-size: 0.62em; margin-bottom: 0.25em; }
.hero h1 br { display: none; }
.hero__type { font-size: 1rem; }
.hero__badge {
font-size: 0.64rem;
letter-spacing: 0.06em;
white-space: normal;
max-width: 100%;
}
.hero__badge-status { padding: 0.5rem 0.7rem 0.5rem 0.85rem; }
.hero__badge-text { flex-wrap: wrap; gap: 0.4rem; padding: 0.5rem 0.85rem; }
.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); }
.quotes { grid-template-columns: 1fr; }
.ops { grid-template-columns: 1fr; }
.why__team .team.team { --spalten: 3; --luecke: 0.6rem; }
.member b { font-size: 0.82rem; }
.hero__cta .btn { width: 100%; }
.lexikon { padding: 1.5rem 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
html.js [data-reveal] { opacity: 1; translate: none; scale: none; transition: none; }
.sys__meter span, .sys__bars i { animation: none; }
.sys__pulse--teal, .sys__pulse--blue { display: none; }
.btn, .goal, .post, .case-sm { transition: none; }
.sys__node, .sys__rail, .sys__lines path,
.hero__orbit, .hero__marquee-track, .hero__caret { animation: none; }
.hero__particles { display: none; }
.orbwrap canvas { display: none; }
.orbwrap__final { opacity: 1; transform: none; transition: none; }
.orbwrap__final::after { animation: none; opacity: 0; }
.orbwrap__logo, .orbwrap__front { animation: none; }
.orbwrap__tilt { animation: none; transition: none; }
.orbwrap__glow { animation: none; }
.orbwrap__rings { opacity: 1; transition: none; }
.orbwrap__rings i { animation: none; }
.orbwrap__aurora { animation: none; opacity: 0.9; transition: none; }
.nav__inner::before { animation: none; }
.sys { transition: none; }
.sys__node { transition: none; }
.hero__badge::before, .hero__badge::after, .hero__badge-ping::after { animation: none; }
.rail__btn, .rail__btn svg, .rail__label { transition: none; }
.rail__btn:hover::after { animation: none; }
.totop { transition: opacity 0.2s ease; transform: none; }
.totop.is-visible { transform: none; }
.hero [data-explode], .hero .sys__node[data-explode] { animation: none; }
.section:not(.section--dark)::after { animation: none; }
.spot::before { transition: none; }
.core .mock, .case .mock, .step, .stat, .member img, .logos__item, .quote, .op, .dmock { transition: none; }
.op:hover .dot::after { animation: none; }
.dsgpt__chips span { transition: none; }
.sys__node::after { transition: none; }
.sys__lines { animation: none; opacity: 1; }
.hero__orbit, .hero__orbit--2 { animation: none; opacity: 1; }
.hero__marquee { animation: none; }
.nav { transition: none; }
}
.scrollbeam {
position: fixed;
top: 0; left: 0; right: 0;
height: 3px;
z-index: 210;
pointer-events: none;
}
.scrollbeam i {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--blue), #3fd6e8);
box-shadow: 0 0 12px rgba(63, 214, 232, 0.75), 0 0 4px rgba(63, 214, 232, 0.9);
transform: scaleX(0);
transform-origin: left;
will-change: transform;
}
.splitline .w {
display: inline-block;
overflow: hidden;
padding: 0.12em 0.06em 0.18em;
margin: -0.12em -0.06em -0.18em;
}
.splitline .w > * {
display: inline-block;
font-style: normal;
transform: translateY(120%) rotate(3deg);
transition: transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--wi, 0) * 0.11s);
}
.splitline.in .w > * { transform: none; }
.deco-orb {
position: absolute;
width: clamp(260px, 34vw, 460px);
aspect-ratio: 1;
border-radius: 50%;
pointer-events: none;
filter: blur(58px);
opacity: 0.6;
z-index: 0;
}
.deco-orb--teal { background: radial-gradient(circle at 40% 40%, rgba(47, 163, 186, 0.34), transparent 66%); }
.deco-orb--blue { background: radial-gradient(circle at 60% 40%, rgba(47, 77, 158, 0.32), transparent 66%); }
.section--system {
background:
linear-gradient(180deg, var(--dunkel-sektion) 0, transparent 160px),
linear-gradient(0deg, var(--dunkel-sektion) 0, transparent 160px),
radial-gradient(46rem 30rem at 10% 12%, rgba(47, 77, 158, 0.24), transparent 60%),
radial-gradient(52rem 34rem at 96% 82%, rgba(47, 163, 186, 0.16), transparent 62%),
var(--dunkel-sektion);
}
.section--system::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
background-size: 46px 46px;
-webkit-mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
mask-image: radial-gradient(64rem 42rem at 68% 45%, #000 30%, transparent 80%);
}
.sysgrid {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.sysgrid h2 { color: #fff; }
.section--system { padding: 0; }
.sysstage { position: relative; height: 205vh; }
.syspin {
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
align-items: center;
padding: clamp(4.5rem, 8vh, 6.5rem) 0 clamp(2rem, 4vh, 3.5rem);
}
.syspin > .wrap { width: 100%; }
@media (max-width: 900px) {
.sysstage { height: auto; }
.syspin { position: static; min-height: 0; padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
}
@media (prefers-reduced-motion: reduce) {
.sysstage { height: auto !important; }
.syspin { position: static; min-height: 0; padding: 4rem 0; }
}
.syswrap { position: relative; perspective: 1400px; }
.syswrap .sys { max-width: 600px; }
html.js .syswrap:not(.is-live) [data-explode] { opacity: 0; }
html.js .syswrap:not(.is-live) .sys__lines { opacity: 0; }
html.js .syswrap.is-live [data-explode] {
--b: clamp(0, calc((var(--bau, 0) - var(--bo, 0)) / 0.62), 1);
--bw: calc(var(--b) * var(--b) * (3 - 2 * var(--b)));
opacity: var(--bw);
transform:
translate(calc((1 - var(--bw)) * var(--ex, 0px)), calc((1 - var(--bw)) * var(--ey, 0px)))
rotate(calc((1 - var(--bw)) * var(--er, 0deg)))
scale(calc(var(--es, 0.85) + (1 - var(--es, 0.85)) * var(--bw)));
filter: blur(calc((1 - var(--bw)) * 8px));
}
html.js .syswrap.is-live.ist-bereit .sys .sys__node.is-zoom {
transform: scale(1.85);
filter: none;
opacity: 1;
}
html.js .syswrap.is-live .sys__node--ki { --bo: 0; }
html.js .syswrap.is-live .sys__node--web { --bo: 0.1; }
html.js .syswrap.is-live .sys__node--crm { --bo: 0.16; }
html.js .syswrap.is-live .sys__node--task { --bo: 0.24; }
html.js .syswrap.is-live .sys__node--dash { --bo: 0.3; }
html.js .syswrap.is-live .sys__rail { --bo: 0.36; }
html.js .syswrap.ist-gebaut .sys__node[data-explode] {
animation: floaty var(--fd, 8s) ease-in-out infinite;
}
html.js .syswrap.is-live .sys__lines {
opacity: clamp(0, calc((var(--bau, 0) - 0.42) / 0.3), 1);
animation: none;
}
.sysflow { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.45rem; }
.sysflow__item {
display: flex;
align-items: center;
gap: 0.9rem;
width: 100%;
text-align: left;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-sm);
color: var(--dark-text);
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.4;
padding: 0.6rem 0.9rem;
cursor: pointer;
transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.sysflow__item b {
flex: none;
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
color: #7fd0e0;
border: 1px solid rgba(127, 208, 224, 0.3);
border-radius: 8px;
padding: 0.22rem 0.5rem;
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.sysflow__item:hover { border-color: rgba(63, 214, 232, 0.45); background: rgba(255, 255, 255, 0.055); color: #fff; }
.sysflow__item.is-on {
border-color: rgba(63, 214, 232, 0.75);
background: rgba(63, 214, 232, 0.09);
color: #fff;
transform: translateX(7px);
box-shadow: 0 0 26px -8px rgba(63, 214, 232, 0.45);
}
.sysflow__item.is-on b { background: var(--grad); color: #fff; border-color: transparent; }
.sysflow__hint { margin-top: 1.1rem; font-family: var(--font-mono); font-size: 0.74rem; color: #8b98af; }
@media (min-width: 941px) {
html.js .cores-stack .core {
position: sticky;
top: calc(104px + var(--si, 0) * 30px);
scale: var(--ss, 1);
filter: brightness(var(--sb, 1));
transform-origin: 50% 0;
}
html.js .cores-stack .core:nth-of-type(1) { --si: 0; }
html.js .cores-stack .core:nth-of-type(2) { --si: 1; }
html.js .cores-stack .core:nth-of-type(3) { --si: 2; }
html.js .cores-stack .core + .core { margin-top: 3.5rem; }
}
.prozess__count { display: none; }
.steps--flow .step::before { display: none; }
.steps--flow { position: relative; }
html.js .steps--flow .step {
opacity: 0.35;
transform: translateY(26px) scale(0.97);
filter: saturate(0.4);
transition:
opacity 0.5s ease,
transform 0.65s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.5s ease,
border-color 0.3s ease,
box-shadow 0.35s ease;
}
html.js .steps--flow .step.is-on {
opacity: 1;
transform: none;
filter: none;
border-color: rgba(47, 163, 186, 0.5);
box-shadow: var(--shadow-lg);
}
.steps--flow .step { z-index: 1; }
.steps--flow .step.is-on .step__num { animation: numpulse 2.2s ease-out infinite; }
@keyframes numpulse {
0% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.45); }
70%, 100% { box-shadow: 0 0 0 14px rgba(63, 214, 232, 0); }
}
@media (min-width: 1081px) and (min-height: 640px) {
html.js .prozess { padding: 0; }
html.js .prozess__stage { height: 220vh; }
html.js .prozess__pin {
position: sticky;
top: 0;
min-height: 100vh;
height: 100vh;
display: flex;
align-items: stretch;
padding: 5.2rem 0 3.6rem;
}
html.js .prozess__pin > .wrap {
width: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
row-gap: clamp(1.6rem, 4vh, 3rem);
align-items: center;
}
html.js .prozess__pin .steps--flow { align-self: center; }
html.js .prozess__pin .section__head { margin-bottom: 0; padding-bottom: 0; }
html.js .prozess__pin .prozess__spur { margin-bottom: 0; }
html.js .prozess .prozess__count {
display: block;
font-family: var(--font-mono);
font-size: 0.85rem;
color: var(--ink-2);
margin-top: 1.2rem;
}
html.js .prozess .prozess__count b {
color: var(--teal-ink);
font-size: 1.5rem;
font-weight: 600;
}
html.js .prozess .prozess__spur {
display: block;
width: min(360px, 34%);
height: 3px;
margin-top: 0.85rem;
border-radius: 3px;
background: rgba(34, 58, 124, 0.1);
overflow: hidden;
}
html.js .prozess .prozess__spur i {
display: block;
height: 100%;
border-radius: 3px;
background: var(--grad);
transform: scaleX(var(--flow, 0));
transform-origin: left center;
transition: transform 140ms linear;
}
.steps--flow::before, .steps--flow::after {
content: "";
position: absolute;
top: 3.05rem;
left: 2rem;
right: 2rem;
height: 2px;
z-index: 0;
}
.steps--flow::before { background: var(--line); }
.steps--flow::after {
background: linear-gradient(90deg, var(--blue), #3fd6e8);
box-shadow: 0 0 14px rgba(63, 214, 232, 0.6);
transform: scaleX(var(--flow, 0));
transform-origin: left;
}
}
.posts, .cases, .quotes, .ops, .stats { perspective: 1100px; }
.post, .case-sm { transition: transform 0.22s ease, box-shadow 0.22s ease, rotate 0.3s ease-out; }
.quote { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, rotate 0.3s ease-out; }
.stat { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease, border-color 0.3s ease, rotate 0.3s ease-out; }
.op { transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease-out; }
.footer__word {
position: relative;
margin: clamp(1.5rem, 4vw, 3rem) auto 0;
max-width: var(--wrap);
padding-inline: 1rem;
font-size: clamp(3.2rem, 13vw, 10.5rem);
line-height: 1;
font-weight: 830;
font-stretch: 110%;
letter-spacing: -0.03em;
text-align: center;
user-select: none;
}
.footer__word-line, .footer__word-fill { display: block; }
.footer__word-line {
color: transparent;
-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
}
.footer__word-line i { font-style: normal; -webkit-text-stroke: 1.5px rgba(63, 214, 232, 0.55); }
.footer__word-fill {
position: absolute;
inset: 0;
padding-inline: 1rem;
background: linear-gradient(100deg, #57b6ff 5%, #3fd6e8 55%, #2fa3ba 95%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: drop-shadow(0 0 34px rgba(63, 214, 232, 0.22));
clip-path: inset(-5% 100% -5% 0);
transition: clip-path 1.5s cubic-bezier(0.6, 0, 0.2, 1) 0.2s;
}
.footer__word-fill i { font-style: normal; }
.footer__word.in .footer__word-fill { clip-path: inset(-5% 0% -5% 0); }
.cursorfx { display: none; }
html.js .cursorfx.is-on { display: block; }
.cursorfx__dot, .cursorfx__ring, .cursorfx__glow {
position: fixed;
top: 0; left: 0;
z-index: 3500;
border-radius: 50%;
pointer-events: none;
will-change: transform;
}
.cursorfx__dot {
width: 7px; height: 7px;
margin: -3.5px 0 0 -3.5px;
background: #3fd6e8;
box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}
.cursorfx__ring {
width: 34px; height: 34px;
margin: -17px 0 0 -17px;
border: 1.5px solid rgba(63, 214, 232, 0.5);
transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, border-color 0.25s ease;
}
.cursorfx.is-link .cursorfx__ring {
width: 54px; height: 54px;
margin: -27px 0 0 -27px;
border-color: rgba(63, 214, 232, 0.95);
}
.cursorfx__glow {
width: 380px; height: 380px;
margin: -190px 0 0 -190px;
background: radial-gradient(circle, rgba(63, 214, 232, 0.075), transparent 60%);
mix-blend-mode: screen;
}
@media (max-width: 940px) {
.sysgrid { grid-template-columns: 1fr; }
.syswrap { margin-top: 1.5rem; }
.sysflow__hint { display: none; }
}
@media (pointer: coarse) {
.cursorfx { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.scrollbeam i { box-shadow: none; }
.cursorfx { display: none !important; }
.splitline .w > * { transform: none !important; transition: none; }
html.js .syswrap:not(.is-live) [data-explode] { opacity: 1; animation: none; }
html.js .syswrap.is-live [data-explode] { opacity: 1; transform: none; filter: none; }
html.js .syswrap.is-live .sys__lines { opacity: 1; }
html.js .syswrap:not(.is-live) .sys__lines { opacity: 1; animation: none; }
.syswrap.is-live [data-explode], .syswrap.is-live .sys__node[data-explode] { animation: none; }
.sysflow__item, .sysflow__item b { transition: none; }
.sysflow__item.is-on { transform: none; }
html.js .cores-stack .core { position: static; scale: none; filter: none; }
html.js .steps--flow .step { opacity: 1; transform: none; filter: none; transition: none; }
.steps--flow .step.is-on .step__num { animation: none; }
html.js .prozess { padding: clamp(4.5rem, 8vw, 7.5rem) 0; }
html.js .prozess__stage { height: auto; }
html.js .prozess__pin { position: static; min-height: 0; display: block; padding: 0; }
html.js .prozess .prozess__count,
html.js .prozess .prozess__spur { display: none; }
.steps--flow::after { transform: none; }
.post, .case-sm, .quote, .stat, .op { rotate: none !important; }
.goal, .post, .case-sm, .quote, .stat, .op { transition: none; }
.deco-orb { display: none; }
.footer__word-fill { transition: none; clip-path: inset(-5% 0% -5% 0); }
}
.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); }
.section--dark .prosa strong { color: #fff; }
.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; }
}
.posts--liste { grid-template-columns: repeat(2, 1fr); }
.posts--liste .post h2 {
font-size: 1.14rem;
font-weight: 700;
line-height: 1.35;
letter-spacing: -0.012em;
}
.posts--liste .post p {
color: var(--ink-2);
font-size: 0.96rem;
line-height: 1.55;
}
@media (max-width: 940px) { .posts--liste { grid-template-columns: 1fr; } }
.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); }
.core__link { margin-top: 1.4rem; }
.core__link a {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.05em;
color: var(--teal-ink);
border-bottom: 1px solid rgba(30, 123, 144, 0.35);
padding-bottom: 2px;
transition: color 0.2s ease, border-color 0.2s ease;
}
.core__link a::after { content: " →"; }
.core__link a:hover { color: var(--blue); border-color: var(--blue); }
.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__icon { grid-area: icon; }
.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__icon {
margin-right: 1rem;
width: 48px; height: 48px;
border-radius: 13px;
background: var(--grad);
box-shadow: 0 8px 20px -8px rgba(47, 77, 158, 0.55);
transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.45s ease;
}
.goal__icon svg { width: 23px; height: 23px; stroke: #fff; }
.goal { background: var(--surface); border: 1px solid var(--line); }
.goal__title { line-height: 1.25; padding-right: 2.1rem; }
@media (hover: hover) {
.goal:hover .goal__icon {
transform: rotate(-6deg) scale(1.08);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.14), 0 14px 30px -10px rgba(47, 77, 158, 0.65);
}
}
.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 (max-width: 620px) {
.goal__icon { margin-right: 0.85rem; width: 44px; height: 44px; }
.goal__icon svg { width: 21px; height: 21px; }
}
@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__icon { 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;
}
}
.section--system::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
translate: -50% 0;
width: min(var(--wrap), 88%);
height: 1px;
background: linear-gradient(90deg,
transparent,
rgba(127, 208, 224, 0.14) 18%,
rgba(127, 208, 224, 0.42) 50%,
rgba(127, 208, 224, 0.14) 82%,
transparent);
pointer-events: none;
}
.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;
}
}
.steps__laeufer { display: none; }
@media (min-width: 1081px) and (min-height: 640px) {
html.js .steps__laeufer {
display: block;
position: absolute;
top: 3.05rem;
left: 2rem;
z-index: 2;
width: 14px;
height: 14px;
margin: -6px 0 0 -7px;
border-radius: 50%;
background: radial-gradient(circle at 50% 45%, #eaffff, #3fd6e8 45%, #2f4d9e);
box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.18), 0 0 18px 3px rgba(63, 214, 232, 0.7);
translate: calc(var(--flow, 0) * (100cqw - 0px)) 0;
opacity: calc(0.15 + 0.85 * min(1, var(--flow, 0) * 8));
transition: translate 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
pointer-events: none;
}
html.js .steps--flow { container-type: inline-size; }
}
html.js .steps--flow .step.is-on .step__num {
background: linear-gradient(150deg, #2f4d9e, #1e7b90);
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num {
color: transparent;
position: relative;
}
html.js .steps--flow .step.is-on:not(.is-aktuell) .step__num::after {
content: "";
position: absolute;
inset: 0;
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6 12.6l4 4L18 8" fill="none" stroke="white" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>') center / 60% no-repeat;
}
html.js .steps--flow .step.is-aktuell {
border-color: transparent;
box-shadow:
0 0 0 1.5px rgba(63, 214, 232, 0.55),
0 6px 14px rgba(12, 22, 38, 0.06),
0 26px 54px -20px rgba(34, 58, 124, 0.4);
scale: 1.035;
}
html.js .steps--flow .step.is-aktuell .step__num {
box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.16), 0 10px 22px -8px rgba(47, 77, 158, 0.7);
}
html.js .steps--flow .step.is-aktuell h3 { color: var(--blue); }
html.js .steps--flow .step:not(.is-on) .step__num {
background: #dde4ef;
color: #8b98af;
box-shadow: none;
}
html.js .prozess .prozess__count b {
display: inline-block;
min-width: 2.1ch;
animation: zaehlerpuls 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes zaehlerpuls {
0% { transform: translateY(6px) scale(0.9); opacity: 0.3; }
100% { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
html.js .steps__laeufer { display: none; }
html.js .steps--flow .step.is-aktuell { scale: none; }
html.js .prozess .prozess__count b { animation: none; }
}
.note {
display: inline-flex;
align-items: center;
gap: 0.9rem;
margin-top: 1.4rem;
padding: 0.7rem 1.2rem 0.7rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 99px;
background: rgba(255, 255, 255, 0.05);
}
.note__wert {
font-size: 1.5rem;
font-weight: 700;
line-height: 1;
letter-spacing: -0.02em;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
}
.note__rechts { display: grid; gap: 0.15rem; }
.note__sterne { font-size: 0.82rem; letter-spacing: 0.12em; color: #ffc857; line-height: 1; }
.note__text { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--dark-text); }
.stimmen {
position: relative;
display: grid;
gap: 1.1rem;
margin-top: clamp(1.6rem, 3vw, 2.6rem);
overflow: hidden;
padding-block: 0.4rem;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.stimmen__band {
display: flex;
align-items: stretch;
gap: 1.1rem;
width: max-content;
animation: stimmenlauf 72s linear infinite;
will-change: transform;
}
@keyframes stimmenlauf {
to { transform: translate3d(calc(-50% - 0.55rem), 0, 0); }
}
.stimmen:hover .stimmen__band,
.stimmen:focus-within .stimmen__band { animation-play-state: paused; }
.stimme {
position: relative;
display: flex;
flex-direction: column;
gap: 1.2rem;
flex: 0 0 clamp(290px, 26vw, 400px);
padding: 1.6rem 1.5rem 1.4rem;
border: 1px solid rgba(255, 255, 255, 0.11);
border-radius: var(--radius);
background:
linear-gradient(155deg, rgba(255, 255, 255, 0.085), rgba(255, 255, 255, 0.028));
color: #fff;
transition: border-color 0.35s ease, background 0.35s ease, translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.stimme::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(160deg, rgba(255, 255, 255, 0.4), transparent 45%);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: 0.5;
pointer-events: none;
}
@media (hover: hover) {
.stimme:hover {
translate: 0 -5px;
border-color: rgba(103, 209, 226, 0.45);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0.045));
}
}
.stimme blockquote {
position: relative;
font-size: 1.02rem;
line-height: 1.62;
color: rgba(255, 255, 255, 0.9);
}
.stimme blockquote::before {
content: "";
display: block;
width: 30px;
height: 22px;
margin-bottom: 0.85rem;
background: var(--grad);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 30'%3E%3Cpath d='M0 30V17C0 7.6 5.6 1.4 15.6 0l1.6 5.4C11 6.8 8 10 7.8 14.6H15V30H0zm22.8 0V17C22.8 7.6 28.4 1.4 38.4 0L40 5.4c-6.2 1.4-9.2 4.6-9.4 9.2H38V30H22.8z'/%3E%3C/svg%3E") no-repeat center / contain;
opacity: 0.85;
}
.stimme figcaption {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.8rem;
margin-top: auto;
padding-top: 1.1rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.stimme__ava {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.04em;
color: #fff;
background: var(--grad);
}
.stimme[style*="--ton: 1"] .stimme__ava { background: linear-gradient(140deg, #2fa3ba, #5ad0c8); }
.stimme[style*="--ton: 2"] .stimme__ava { background: linear-gradient(140deg, #3f6fd8, #7f5ae0); }
.stimme__wer { display: grid; gap: 0.1rem; min-width: 0; }
.stimme__wer b { font-size: 0.95rem; font-weight: 650; }
.stimme__wer span {
font-family: var(--font-mono);
font-size: 0.68rem;
color: var(--dark-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.stimme__sterne { font-size: 0.72rem; letter-spacing: 0.1em; color: #ffc857; }
@media (max-width: 620px) {
.stimme { flex-basis: 80vw; padding: 1.4rem 1.25rem 1.2rem; gap: 1rem; }
.stimme blockquote { font-size: 0.96rem; }
.stimmen__band { animation-duration: 52s; }
.note { margin-top: 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
.stimmen { overflow: visible; -webkit-mask-image: none; mask-image: none; }
.stimmen__band {
animation: none;
width: auto;
flex-wrap: wrap;
justify-content: center;
}
.stimme { flex: 1 1 300px; transition: none; }
.stimme[aria-hidden="true"] { display: none; }
}
@media (min-width: 1081px) and (min-height: 640px) {
html.js .cases-stage { height: 185vh; }
html.js .cases-pin {
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 3.4rem;
padding-bottom: clamp(0.8rem, 2vh, 2rem);
}
html.js #projekte .section__head { margin-bottom: 0; }
html.js .cases-pin > .case--featured { margin-bottom: 45px; }
html.js .cases-pin > .cases { width: 100%; }
@media (max-height: 880px) {
html.js .cases-pin { padding-top: 1.5rem; padding-bottom: 0.4rem; }
html.js #projekte .section__head { margin-bottom: 1.9rem; }
html.js .cases-pin > .case--featured {
margin-bottom: 20px;
padding: clamp(1.4rem, 2.6vw, 2.1rem);
}
}
}
@media (prefers-reduced-motion: reduce) {
html.js .cases-stage { height: auto; }
html.js .cases-pin { position: static; min-height: 0; display: block; padding-block: 0; }
}
html.eigenerzeiger,
html.eigenerzeiger a,
html.eigenerzeiger button,
html.eigenerzeiger summary,
html.eigenerzeiger [role="button"] { cursor: none; }
html.eigenerzeiger input,
html.eigenerzeiger textarea,
html.eigenerzeiger select { cursor: auto; }
@media (min-width: 1081px) and (min-height: 640px) {
html.js .goals-stage { height: 190vh; }
html.js .goals-pin {
position: sticky;
top: 0;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: clamp(3rem, 7.5vh, 4.5rem);
padding-bottom: clamp(0.8rem, 2vh, 2rem);
}
html.js .goals-pin > .section__head { margin-bottom: clamp(1.6rem, 4vh, 3rem); }
html.js .goals-pin > .goals { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
html.js .goals-stage { height: auto; }
html.js .goals-pin { position: static; min-height: 0; display: block; padding: 0; }
}
html.glitchlauf .nav { filter: url('#glitchfx'); will-change: filter; }
html.glitchlauf .hero__bg { filter: url('#glitchfx') brightness(1.5) saturate(1.25); will-change: filter; }
html.glitchlauf .hero__particles { filter: url('#glitchfx'); will-change: filter; }
html.intro .bootfx::after {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(0deg, rgba(8, 14, 26, 0.3) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) {
html.glitchlauf .nav,
html.glitchlauf .hero__bg,
html.glitchlauf .hero__particles { filter: none; will-change: auto; }
}
.fxdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
html.intro .bootfx__marke {
position: absolute;
top: 50%;
left: 50%;
translate: calc(-50% - 0.3em) -50%;
display: flex;
align-items: center;
gap: 0.06em;
font-size: clamp(64px, 9vw, 128px);
filter: drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
animation: bootlogoein 0.3s ease both;
}
html.intro .bootfx__marke img {
width: auto;
height: 1.6em;
}
html.intro .bootfx__marke span {
font-family: var(--font-sans);
font-weight: 750;
font-stretch: 105%;
letter-spacing: -0.015em;
color: #fff;
line-height: 1;
margin-top: 0.08em;
}
html.intro .bootfx__marke span i { font-style: normal; color: var(--teal); }
html.glitchlauf .bootfx__marke {
filter: url('#glitchfx') drop-shadow(0 0 40px rgba(63, 214, 232, 0.35));
}
@keyframes bootlogoein {
from { opacity: 0; scale: 0.94; }
to { opacity: 1; scale: 1; }
}
.orbwrap.is-glitch .orbwrap__final { filter: url('#glitchlogo'); will-change: filter; }
@media (prefers-reduced-motion: reduce) {
.orbwrap.is-glitch .orbwrap__final { filter: none; will-change: auto; }
}
.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); }
}
.tabelle--preise td:first-child { color: var(--ink); font-weight: 600; }
.tabelle--preise td:last-child,
.tabelle--preise th:last-child { text-align: right; white-space: nowrap; }
.tabelle--preise td:last-child {
font-weight: 700;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@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;
}
.lkarte__bild--passend img { object-fit: contain; padding: 0.6rem; background: #fff; }
.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 .preise__hinweis { color: var(--dark-text); }
.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__cta { margin-top: 1.6rem; }
.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; }
.leistung__bild { margin: 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; }
.team--gross .teamer__motto { margin-block: 0; font-size: 1rem; }
}
@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__bild--platzhalter {
display: grid;
place-items: center;
aspect-ratio: 4 / 5;
background: var(--grad);
}
.teamer__bild--platzhalter span {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 800;
color: rgba(255, 255, 255, 0.9);
}
.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;
}
.teamer__motto {
font-size: 0.92rem;
color: var(--ink-2);
margin: 0 1.1rem;
font-style: italic;
}
@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; }
.prozess__spur { display: none; }
.prozess { position: relative; overflow-x: clip; }
.prozess__pin { position: relative; }
.prozess__orb {
opacity: 0.5;
z-index: 0;
}
.prozess__orb--a { top: -14%; left: -10%; }
.prozess__orb--b { bottom: -16%; right: -8%; }
.prozess .prozess__stage,
.prozess .wrap { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
.prozess__spur i { transition: none; }
}
.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__pfeil {
display: grid;
place-items: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--ink-2);
cursor: pointer;
transition: color 0.15s ease, background-color 0.2s ease, rotate 0.25s ease;
}
.nav__pfeil svg { width: 15px; height: 15px; }
.nav__pfeil:hover { color: var(--ink); background: rgba(12, 22, 38, 0.06); }
.nav__gruppe:hover .nav__pfeil,
.nav__pfeil[aria-expanded="true"] { rotate: 180deg; }
.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; }
.reiter__knopf:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
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; }
@keyframes gruppeauf {
from { opacity: 0; translate: 0 14px; }
to { opacity: 1; translate: none; }
}
.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:first-child { margin-top: 0; }
.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%; }
.preisinhalt .preise.sp-3 > :last-child:nth-child(3n + 1),
.preisinhalt .preise.sp-4 > :last-child:nth-child(4n + 1) { flex-basis: auto; }
@media (max-width: 1080px) {
.lkarten.lkarten > :last-child:nth-child(odd),
.galerie.galerie > :last-child:nth-child(odd),
.preise.preise > :last-child:nth-child(odd),
.steps.steps > :last-child:nth-child(odd) { flex-basis: 100%; }
.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; }
}
.weiterkat:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
@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; }
}
.portfoliostrecke {
--accent: #3fd6e8;
--bg-card: #11172e;
--border: rgba(244, 244, 240, 0.1);
--ease: cubic-bezier(0.16, 1, 0.3, 1);
--fs-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
--header-h: 84px;
--ink-muted: rgba(244, 244, 240, 0.65);
--r-lg: 28px;
--s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem;
--t-fast: 200ms; --t-med: 400ms;
--font-serif: var(--font-sans);
}
.portfoliostrecke { --ink: #f4f4f0; }
.pv3-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--s-7);
}
.pv3-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-7) var(--s-6) var(--s-5);
overflow: hidden;
isolation: isolate;
transition: border-color var(--t-med) var(--ease);
}
.pv3-card:hover { border-color: rgba(34, 211, 238, 0.4); }
.pv3-card::before {
content: "";
position: absolute;
inset: -20% -20% auto auto;
width: 70%; height: 70%;
background: radial-gradient(circle, rgba(34, 211, 238, 0.18), transparent 70%);
filter: blur(30px);
z-index: 0;
pointer-events: 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;
}
@keyframes pv3-float-phone {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-12px); }
}
.pv3-card__caption {
position: relative;
z-index: 1;
display: flex;
justify-content: space-between;
align-items: baseline;
gap: var(--s-4);
}
.pv3-card__cat {
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
}
.pv3-card__title {
font-family: var(--font-serif);
font-size: var(--fs-lg);
font-weight: 500;
letter-spacing: -0.02em;
color: var(--ink);
margin: var(--s-1) 0 0;
text-transform: none;
}
.pscroll {
position: relative;
}
.pscroll__sticky {
position: relative;
height: 100vh;
overflow-x: clip;
overflow-y: visible;
display: flex;
flex-direction: column;
padding-top: 0;
}
.portfoliostrecke { scroll-margin-top: var(--header-h); }
.pscroll__nav {
flex: 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: var(--s-3);
margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}
.pscroll__arrow {
width: 48px;
height: 48px;
border-radius: 50%;
background: rgba(244, 244, 240, 0.06);
border: 1px solid rgba(244, 244, 240, 0.18);
color: var(--ink);
display: grid;
place-items: center;
cursor: pointer;
transition: background var(--t-fast) var(--ease),
border-color var(--t-fast) var(--ease),
color var(--t-fast) var(--ease),
opacity var(--t-fast) var(--ease);
}
.pscroll__arrow:hover {
background: rgba(244, 244, 240, 0.12);
border-color: var(--accent);
color: var(--accent);
}
.pscroll__arrow:disabled {
opacity: 0.45;
cursor: not-allowed;
pointer-events: none;
}
.pscroll__arrow svg { width: 20px; height: 20px; }
.pscroll__sticky > .sec-head {
flex: 0 0 auto;
margin-bottom: var(--s-5);
}
.pscroll__viewport {
flex: 1 1 auto;
min-height: 0;
overflow: hidden;
}
.pscroll__track {
display: flex;
height: 100%;
will-change: transform;
}
.pslide {
flex: 0 0 100%;
height: 100%;
overflow-x: clip;
display: grid;
grid-template-columns: 1fr;
gap: var(--s-6);
padding: clamp(1.5rem, 3vh, 2.5rem) clamp(2rem, 4vw, 4rem) clamp(4rem, 6vh, 5rem);
align-content: start;
}
.pslide__index {
position: absolute;
top: var(--s-5);
left: var(--s-5);
font-family: var(--font-serif);
font-style: italic;
font-size: 1.4rem;
color: var(--accent);
letter-spacing: 0.06em;
}
.pslide__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pslide__visual {
height: 100%;
container-type: size;
}
.pslide__visual .pv3-stage {
width: 100%;
width: min(100%, calc(100cqh * 16 / 9), 860px);
height: auto;
margin-bottom: 0;
}
.pslide__body { align-self: center; }
.pslide__cat {
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--accent);
}
.pslide__title {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.05;
color: var(--ink);
margin: var(--s-3) 0 var(--s-4);
text-transform: none;
}
.pslide__text {
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem);
line-height: 1.6;
color: var(--ink-muted);
margin: 0 0 var(--s-5);
max-width: 50ch;
}
.pslide__link {
display: inline-flex;
align-items: center;
gap: 0.4em;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
color: var(--accent);
text-decoration: none;
}
.pslide__link span { transition: transform var(--t-fast) var(--ease); }
.pslide__link:hover span { transform: translateX(5px); }
.pscroll__progress {
flex: 1 1 auto;
max-width: 22rem;
margin: 0 clamp(1rem, 3vw, 2.5rem);
height: 3px;
background: rgba(244, 244, 240, 0.08);
border-radius: 1px;
overflow: hidden;
}
.pscroll__sticky .portfolio__cta {
flex: 0 0 auto;
display: flex;
justify-content: center;
margin: var(--s-4) clamp(2rem, 4vw, 4rem) 0;
}
.portfoliostrecke .portfolio__cta .btn--ghost {
background: rgba(244, 244, 240, 0.06);
border-color: rgba(244, 244, 240, 0.28);
color: var(--ink);
}
.portfoliostrecke .portfolio__cta .btn--ghost:hover {
background: rgba(244, 244, 240, 0.12);
border-color: rgba(244, 244, 240, 0.5);
}
.pscroll__progress span {
display: block;
height: 100%;
width: 8%;
background: var(--accent);
border-radius: 1px;
transition: transform 100ms linear;
}
@media (min-width: 760px) {
.pv3-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
.pslide {
grid-template-columns: 1.65fr 1fr;
grid-template-rows: 1fr;
gap: clamp(2.5rem, 4.5vw, 4.5rem);
align-items: center;
padding-inline: var(--s-7);
}
.pslide__visual { align-self: stretch; }
}
@media (min-width: 761px) and (max-height: 900px) {
.pslide { padding-bottom: clamp(1.25rem, 4vh, 4rem); }
.pscroll__sticky > .sec-head { margin-bottom: var(--s-4); }
.pscroll__nav { margin-top: var(--s-3); }
}
@media (max-width: 760px) {
.pscroll__progress { display: none; }
.pscroll__sticky .portfolio__cta {
display: flex;
justify-content: center;
margin: var(--s-4) 0 var(--s-2);
}
.pscroll__sticky { padding-top: 0; }
.pscroll__sticky > .sec-head { margin-bottom: var(--s-3); }
.pscroll__sticky > .sec-head .sec-lead { display: none; }
.pscroll__viewport { flex: 0 1 auto; }
.pscroll__track { height: auto; }
.pscroll__sticky {
height: auto;
min-height: 100svh;
overflow: visible;
padding-bottom: var(--s-4);
}
.pslide { height: auto; gap: var(--s-3); padding-top: var(--s-3); padding-bottom: var(--s-2); align-content: center; }
.pslide__visual {
height: auto;
container-type: normal;
}
.pslide__visual .pv3-stage {
width: 100%;
height: auto;
max-width: min(100%, 520px);
margin-inline: auto;
margin-bottom: 0;
}
.pslide__title { margin: var(--s-2) 0 var(--s-2); }
.pslide__text { margin-bottom: var(--s-3); }
.pscroll__nav { margin-top: var(--s-5); margin-bottom: var(--s-3); }
}
@keyframes pv3-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-8px); }
}
.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 input:focus-visible,
.kfeld select:focus-visible,
.kfeld textarea:focus-visible {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(45, 176, 190, 0.18);
background: var(--surface);
}
.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; }
.mock--index {
display: grid;
gap: 0.75rem;
padding: 1.2rem;
}
.mock__idx {
display: grid;
gap: 0.45rem;
padding: 0.75rem 0.9rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--bg);
}
.mock__idx b {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
}
.mock__idx i {
display: block;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, var(--line), transparent);
}
.mock__idx i:nth-child(2) { width: 78%; }
.mock__idx i:nth-child(3) { width: 56%; }
.mock__idx i:nth-child(4) { width: 66%; }
.goals.sp-3 > :nth-child(3n + 2):last-child,
.goals.sp-3 > :nth-child(3n + 1):nth-last-child(2),
.goals.sp-4 > :nth-child(4n + 2):last-child,
.goals.sp-4 > :nth-child(4n + 1):nth-last-child(2) {
flex-basis: calc((100% - var(--luecke)) / 2);
}
.goals.sp-4 > :nth-child(4n + 3):last-child,
.goals.sp-4 > :nth-child(4n + 2):nth-last-child(2),
.goals.sp-4 > :nth-child(4n + 1):nth-last-child(3) {
flex-basis: calc((100% - 2 * var(--luecke)) / 3);
}
@media (min-width: 861px) {
.goals.sp-2 > .goal--mitbild:last-child:nth-child(odd),
.goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1),
.goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) {
grid-template-columns: minmax(0, 22rem) auto minmax(0, 1fr);
grid-template-areas:
"bild icon titel"
"bild text text"
"bild link link";
align-content: center;
column-gap: clamp(1.2rem, 2.4vw, 2.2rem);
}
.goals.sp-2 > .goal--mitbild:last-child:nth-child(odd) > .goal__bild,
.goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1) > .goal__bild,
.goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) > .goal__bild {
grid-area: bild;
align-self: center;
margin: 0;
}
.goals.sp-2 > .goal--mitbild:last-child:nth-child(odd) > .goal__title,
.goals.sp-3 > .goal--mitbild:last-child:nth-child(3n + 1) > .goal__title,
.goals.sp-4 > .goal--mitbild:last-child:nth-child(4n + 1) > .goal__title {
grid-area: titel;
grid-column: auto;
align-self: center;
}
}
.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__feld input:focus-visible {
outline: none;
border-color: var(--teal);
box-shadow: 0 0 0 3px rgba(45, 176, 190, 0.18);
}
.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__system { display: none; }
.hero__grid {
padding-top: clamp(5.2rem, 12vh, 8rem);
padding-bottom: clamp(2rem, 6vh, 5rem);
align-content: center;
}
.hero__copy { display: flex; flex-direction: column; }
.hero__badge { margin-bottom: 0.6rem; }
.hero h1 {
font-size: clamp(2.1rem, 8.2vw, 2.7rem);
line-height: 1.14;
white-space: normal;
}
.hero__type { margin-top: 1.6rem; }
.hero__sub { margin-top: 1.6rem; }
.hero__cta { margin-top: 2.4rem; gap: 0.8rem; }
.hero__cta .btn { width: 100%; justify-content: center; }
.hero__trust { margin-top: 2.2rem; }
}
.nav__mobile-kontakt { display: none; }
@media (max-width: 700px) {
.rail { display: none; }
.nav__mobile-kontakt {
display: block;
margin-top: 1.4rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.nav__mobile-titel {
margin: 0 0 0.7rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #7fd0e0;
}
.nav__mobile-kontakt > a {
display: flex;
align-items: center;
gap: 0.7rem;
padding: 0.55rem 0;
font-size: 0.95rem;
color: var(--dark-text);
}
.nav__mobile-kontakt > a svg { width: 19px; height: 19px; flex: 0 0 19px; }
.nav__mobile-social { display: flex; gap: 0.7rem; margin-top: 0.9rem; }
.nav__mobile-social a {
display: grid;
place-items: center;
width: 42px;
height: 42px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--dark-text);
}
.nav__mobile-social svg { width: 19px; height: 19px; }
.hero { min-height: 100svh; }
.hero__grid { min-height: 0; }
.hero__trust {
align-items: flex-start;
font-size: 0.85rem;
line-height: 1.55;
}
.hero__trust .dot { margin-top: 0.42em; flex: 0 0 auto; }
}
.nav__mobile {
max-height: calc(100svh - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 700px) {
.hero__copy { align-items: center; text-align: center; }
.hero__badge { justify-content: center; }
.hero__type { justify-content: center; }
.hero__sub { margin-inline: auto; }
.hero__cta { justify-content: center; width: 100%; }
.hero__trust { justify-content: center; text-align: center; }
.hero__badge { margin-bottom: clamp(0.9rem, 2.2vh, 1.6rem); }
.hero__type { margin-top: clamp(1.2rem, 3vh, 2.4rem); }
.hero__sub { margin-top: clamp(1.2rem, 3vh, 2.4rem); }
.hero__cta { margin-top: clamp(1.6rem, 4vh, 3rem); gap: 0.8rem; }
.hero__trust { margin-top: clamp(1.5rem, 3.8vh, 3rem); }
}
@media (max-width: 700px) and (max-height: 700px) {
.hero__grid { padding-top: 4.6rem; padding-bottom: 1.4rem; }
.hero h1 { font-size: clamp(1.75rem, 6.6vw, 2.2rem); }
.hero__sub { font-size: 0.98rem; }
.hero__cta .btn { padding-block: 0.7rem; }
.hero__trust { font-size: 0.78rem; }
}
@media (max-width: 700px) {
.hero__trust {
max-width: 30ch;
margin-inline: auto;
text-wrap: balance;
}
}
.nav__gruppe--mega { position: static; }
.mega {
position: absolute;
top: calc(100% + 0.6rem);
left: 50%;
translate: -50% 0;
width: min(1120px, calc(100vw - 2rem));
padding: clamp(1.4rem, 2.4vw, 2rem);
border-radius: 22px;
background:
linear-gradient(160deg, rgba(19, 34, 58, 0.99), rgba(9, 17, 31, 0.99));
border: 1px solid rgba(127, 208, 224, 0.18);
box-shadow: 0 30px 70px -24px rgba(0, 0, 0, 0.8);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
isolation: isolate;
transform: translateZ(0);
backface-visibility: hidden;
pointer-events: auto;
z-index: 120;
max-height: calc(100svh - 6.5rem);
overflow-y: auto;
overscroll-behavior: contain;
}
.mega[hidden] { display: block; visibility: hidden; opacity: 0; translate: -50% -8px; pointer-events: none; }
.mega { transition: opacity 0.24s ease, translate 0.24s ease, visibility 0s linear 0s; }
.mega[hidden] { transition: opacity 0.18s ease, translate 0.18s ease, visibility 0s linear 0.18s; }
.mega__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
gap: clamp(1.2rem, 2.4vw, 2.2rem);
align-items: stretch;
}
.mega__spalten {
display: grid;
grid-template-columns: repeat(4, minmax(min-content, 1fr));
gap: clamp(0.5rem, 1.2vw, 1.2rem);
}
.mega__spalte + .mega__spalte {
padding-left: clamp(0.7rem, 1.4vw, 1.4rem);
border-left: 1px solid rgba(127, 208, 224, 0.13);
}
.mega__titel {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0 0 0.7rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.07);
min-height: 3.05rem;
box-sizing: content-box;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7fd0e0;
}
.mega__icon {
display: grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 26px;
border-radius: 8px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.22);
}
.mega__icon svg { width: 15px; height: 15px; }
.mega__spalte a {
display: block;
white-space: nowrap;
padding: 0.34rem 0.5rem;
margin-left: -0.5rem;
border-radius: 8px;
font-size: 0.92rem;
color: var(--dark-text);
transition: background-color 0.18s ease, color 0.18s ease, translate 0.18s ease;
}
.mega__spalte a:hover,
.mega__spalte a:focus-visible {
background: linear-gradient(90deg, rgba(127, 208, 224, 0.18), rgba(127, 208, 224, 0.04));
box-shadow: inset 2px 0 0 rgba(127, 208, 224, 0.75);
color: #fff;
translate: 3px 0;
}
.mega__alle {
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.3rem;
padding: 1.2rem;
border-radius: 16px;
background: var(--grad);
color: #fff;
position: relative;
overflow: hidden;
isolation: isolate;
}
.mega__alle::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 62%;
background-image: radial-gradient(rgba(255, 255, 255, 0.24) 1px, transparent 1px);
background-size: 13px 13px;
-webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
mask-image: linear-gradient(180deg, #000 10%, transparent 92%);
z-index: -1;
pointer-events: none;
}
.mega__alle::after {
content: "";
position: absolute;
inset: auto -30% -60% auto;
width: 70%;
aspect-ratio: 1;
background: radial-gradient(circle, rgba(255, 255, 255, 0.25), transparent 70%);
z-index: -1;
transition: scale 0.5s ease;
}
.mega__alle:hover::after { scale: 1.35; }
.nav__links .mega__alle,
.nav__links .mega__alle:hover,
.nav--dark .nav__links .mega__alle,
.nav--dark .nav__links .mega__alle:hover { color: #fff; }
.mega__alle-kicker {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.85;
}
.mega__alle-titel { font-size: 1.15rem; font-weight: 650; line-height: 1.2; }
.mega__alle-text { font-size: 0.85rem; opacity: 0.9; line-height: 1.45; }
.mega__alle-pfeil {
display: grid;
place-items: center;
width: 34px;
height: 34px;
margin-top: 0.6rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
transition: translate 0.25s ease, background-color 0.25s ease;
}
.mega__alle-pfeil svg { width: 17px; height: 17px; }
.mega__alle:hover .mega__alle-pfeil { translate: 4px 0; background: rgba(255, 255, 255, 0.3); }
@media (max-width: 1180px) {
.mega__inner { grid-template-columns: minmax(0, 1fr); }
.mega__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.8rem, 2vw, 1.8rem); }
.mega__spalte + .mega__spalte { padding-left: 0; border-left: 0; }
.mega__titel { min-height: 0; }
.mega__alle { flex-direction: row; align-items: center; justify-content: space-between; }
.mega__alle-text { display: none; }
.mega__alle-pfeil { margin-top: 0; }
}
@media (max-width: 940px) { .mega { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
.mega, .mega__spalte a, .mega__alle-pfeil, .mega__alle::after { transition: none; }
}
.mega__bald {
display: block;
padding: 0.34rem 0.5rem;
margin-left: -0.5rem;
font-size: 0.92rem;
color: #ff6b6b;
cursor: default;
}
.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);
}
.goals--bento {
display: grid;
grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
grid-auto-rows: minmax(0, auto);
gap: clamp(0.9rem, 1.6vw, 1.4rem);
}
.goals--bento > * { flex: none; }
.goals--bento .goal--gross { grid-column: 1; grid-row: 1 / span 2; }
.goals--bento .goal--breit { grid-column: 1 / -1; }
.goals--bento .goal__num {
position: absolute;
top: clamp(0.6rem, 1.4vw, 1.1rem);
right: clamp(0.9rem, 1.8vw, 1.5rem);
font-family: var(--font-mono);
font-size: clamp(2.6rem, 4.5vw, 4.2rem);
font-weight: 700;
line-height: 1;
color: transparent;
-webkit-text-stroke: 1px rgba(47, 77, 158, 0.16);
pointer-events: none;
transition: -webkit-text-stroke-color 0.3s ease;
}
.goals--bento .goal:hover .goal__num { -webkit-text-stroke-color: rgba(47, 163, 186, 0.4); }
.goals--bento .goal__icon {
display: grid;
place-items: center;
width: 46px;
height: 46px;
border-radius: 14px;
background: var(--grad);
color: #fff;
box-shadow: 0 10px 22px -12px rgba(47, 77, 158, 0.7);
transition: scale 0.3s cubic-bezier(0.22, 1, 0.36, 1), rotate 0.3s ease;
}
.goals--bento .goal__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; }
.goals--bento .goal:hover .goal__icon { scale: 1.06; rotate: -4deg; }
.goals--bento .goal {
grid-template-columns: auto minmax(0, 1fr);
grid-template-areas:
"icon titel"
"text text"
"punkte punkte"
"vis vis"
"link link";
justify-content: start;
align-items: center;
column-gap: 0.9rem;
row-gap: 0.75rem;
padding: clamp(1.5rem, 2.4vw, 2.1rem);
}
.goals--bento .goal__punkte { grid-area: punkte; }
.goals--bento .goal__title { justify-self: start; }
.goals--bento .goal--gross { justify-content: flex-start; }
.goals--bento .goal--gross .goal__title { font-size: clamp(1.3rem, 1.9vw, 1.7rem); }
.goals--bento .goal--gross .goal__text { font-size: 1.02rem; }
.goal__punkte {
display: grid;
gap: 0.5rem;
margin-top: 0.4rem;
}
.goal__punkte > span {
display: flex;
align-items: baseline;
gap: 0.55rem;
font-size: 0.94rem;
color: var(--ink-2);
}
.goal__punkte > span::before {
content: "";
flex: 0 0 6px;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--grad);
translate: 0 -1px;
}
.goal__punkte--reihe { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; }
.goals--bento .goal {
grid-template-rows: auto auto minmax(0, 1fr) auto auto;
align-content: stretch;
}
.goals--bento .goal__link { align-self: end; padding-top: 0.8rem; }
@media (max-width: 860px) {
.goals--bento { grid-template-columns: minmax(0, 1fr); }
.goals--bento .goal--gross { grid-column: 1; grid-row: auto; }
.goals--bento .goal--breit { grid-column: 1; }
}
.cores-stack .core {
position: relative;
overflow: hidden;
--akzent: var(--grad);
}
.cores-stack .core::before {
content: "";
position: absolute;
inset: -1px -1px auto -1px;
height: 26px;
border-radius: calc(var(--radius) + 7px) calc(var(--radius) + 7px) 0 0;
padding: 3px 3px 0;
transition: opacity 0.3s ease;
background: var(--akzent);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
opacity: 1;
z-index: 2;
pointer-events: none;
transition: opacity 0.35s ease;
}
@property --oeffnung {
syntax: '<angle>';
inherits: false;
initial-value: 0deg;
}
.cores-stack .core::after {
content: "";
--oeffnung: 0deg;
position: absolute;
inset: -1px;
border-radius: inherit;
padding: 3px;
background: conic-gradient(
from 180deg,
transparent 0deg,
transparent calc(180deg - var(--oeffnung)),
var(--akz-a) calc(180deg - var(--oeffnung)),
var(--akz-a) calc(180deg + var(--oeffnung)),
transparent calc(180deg + var(--oeffnung)),
transparent 360deg
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask-composite: exclude;
filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.45));
pointer-events: none;
z-index: 3;
transition: --oeffnung 1.9s cubic-bezier(0.25, 0.6, 0.3, 1);
}
.cores-stack .core:hover::after { --oeffnung: 180deg; }
.cores-stack .core { --akz-a: #2f4d9e; }
.cores-stack .core {
transition: border-color 0.35s ease, box-shadow 0.4s ease, transform 0.4s ease;
}
.cores-stack .core:hover {
border-color: rgba(63, 214, 232, 0.35);
box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.55);
}
.cores-stack .core__index.core__index {
display: inline-grid;
place-items: center;
width: 42px;
height: 42px;
margin-bottom: 1rem;
border-radius: 12px;
background: var(--akzent);
color: #fff;
font-family: var(--font-mono);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
box-shadow: 0 10px 20px -12px rgba(47, 77, 158, 0.75);
}
.cores-stack .core__index::after { content: none; }
.cores-stack .core__copy .ticks {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 1.1rem;
}
.cores-stack .core__copy .ticks li {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.42rem;
padding: 0.4rem 0.85rem 0.4rem 0.7rem;
border: 1px solid rgba(12, 22, 38, 0.09);
border-radius: 99px;
background: linear-gradient(180deg, #fff, #f4f7fb);
box-shadow: 0 1px 2px rgba(12, 22, 38, 0.05);
font-size: 0.86rem;
font-weight: 500;
color: var(--ink);
transition: border-color 0.25s ease, color 0.25s ease,
background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.cores-stack .core__copy .ticks li::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--akzent);
flex: 0 0 6px;
position: static;
top: auto;
left: auto;
}
.cores-stack .core:hover .ticks li {
border-color: rgba(47, 163, 186, 0.4);
box-shadow: 0 6px 14px -8px rgba(47, 77, 158, 0.4);
}
.cores-stack .core__copy .ticks li:hover {
transform: translateY(-2px);
border-color: rgba(63, 214, 232, 0.6);
background: #fff;
}
.cores-stack .core__index.core__index,
.cores-stack .core__kicker.core__kicker { vertical-align: middle; }
.cores-stack .core__kicker.core__kicker { position: relative; top: -3px; }
.cores-stack .core__kicker.core__kicker {
display: inline-block;
padding: 0.34rem 0.8rem;
border-radius: 99px;
background: rgba(47, 163, 186, 0.14);
border: 1px solid rgba(47, 163, 186, 0.3);
color: #1a5f70;
font-size: 0.76rem;
font-weight: 600;
letter-spacing: 0.09em;
margin-bottom: 0.7rem;
}
.cores-stack .core__link { margin-top: 1.6rem; }
.cores-stack .core__link a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.72rem 1.45rem;
border: 0;
border-radius: 999px;
background: var(--akzent);
color: #fff;
font-family: inherit;
font-size: 0.95rem;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cores-stack .core__link a::after {
content: "\2192";
transition: transform 0.25s ease;
}
.cores-stack .core__link a:hover {
transform: translateY(-2px);
box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95);
}
.cores-stack .core__link a:hover::after { transform: translateX(4px); }
@media (min-width: 861px) {
html.js .cores-stack .core:nth-of-type(4) { --si: 3; }
}
.cores-stack .core__kicker {
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--teal-ink);
margin-bottom: 0.35rem;
}
.faelle { position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.fall {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: clamp(1rem, 2.5vw, 2.4rem);
padding: clamp(1.4rem, 2.6vw, 2.2rem) 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
color: #fff;
}
.fall:last-of-type { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.fall::before {
content: "";
position: absolute;
inset: 0 -1.2rem;
z-index: -1;
border-radius: var(--radius);
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.fall__nr {
font-family: var(--font-mono);
font-size: 0.82rem;
color: #7fd0e0;
letter-spacing: 0.1em;
}
.fall__titel {
display: block;
font-size: clamp(1.15rem, 2vw, 1.65rem);
font-weight: 650;
line-height: 1.25;
letter-spacing: -0.015em;
}
.fall__text {
display: block;
margin-top: 0.4rem;
max-width: 52ch;
font-size: 0.95rem;
color: var(--dark-text);
}
.fall__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; }
.fall__tags i {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark-text);
padding: 0.28rem 0.66rem;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 99px;
white-space: nowrap;
}
.fall__pfeil {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
transition: border-color 0.34s ease, opacity 0.34s ease,
translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil::after {
content: "";
position: absolute;
inset: -1px;
border-radius: 50%;
background: var(--grad);
opacity: 0;
transition: opacity 0.34s ease;
}
.fall__pfeil svg { position: relative; z-index: 1; width: 19px; height: 19px; }
.fall__nr, .fall__haupt, .fall__meta {
opacity: var(--dim, 1);
transition: opacity 0.34s ease, translate 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}
.fall__pfeil { opacity: var(--dim, 1); }
@media (hover: hover) {
.fall::before { transition-duration: 0.34s; }
.fall:hover::before { opacity: 1; }
.fall:hover :is(.fall__nr, .fall__haupt) { translate: 12px 0; }
.fall:hover .fall__pfeil { border-color: transparent; translate: 4px 0; }
.fall:hover .fall__pfeil::after { opacity: 1; }
.faelle:hover .fall { --dim: 0.5; }
.faelle:hover .fall:hover { --dim: 1; }
}
.fall:focus-visible :is(.fall__nr, .fall__haupt) { translate: 12px 0; }
.fall:focus-visible::before { opacity: 1; }
@media (max-width: 900px) {
.fall { grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.8rem 1rem; }
.fall__nr { grid-column: 1; grid-row: 1; }
.fall__haupt { grid-column: 2; grid-row: 1; }
.fall__pfeil { grid-column: 3; grid-row: 1; width: 38px; height: 38px; }
.fall__meta { grid-column: 2 / -1; grid-row: 2; }
.fall__tags { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
.fall, .fall::before, .fall__pfeil,
.fall__nr, .fall__haupt, .fall__meta { transition: none; }
}
.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; }
.termin .calendly-inline-widget { width: 100%; 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; }
}
.pro {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr));
gap: clamp(1.1rem, 2.4vw, 1.8rem);
margin-top: clamp(1.4rem, 3vw, 2.4rem);
}
.pro__karte {
display: flex;
flex-direction: column;
background: var(--surface);
border: 1px solid var(--line);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}
@media (hover: hover) {
.pro__karte:hover {
transform: translateY(-6px);
border-color: rgba(47, 163, 186, 0.45);
box-shadow: 0 8px 18px rgba(12, 22, 38, 0.07), 0 34px 60px -26px rgba(34, 58, 124, 0.36);
}
.pro__karte:hover .pro__handy { transform: translate(0, -6px); }
}
.pro__buehne {
position: relative;
display: grid;
place-items: center;
padding: clamp(1.6rem, 4vw, 2.6rem) clamp(1.2rem, 3vw, 2rem) clamp(2.2rem, 4vw, 3rem);
background:
radial-gradient(120% 100% at 50% 0%, rgba(47, 163, 186, 0.14), transparent 65%),
linear-gradient(160deg, #eef3f9, #e3ebf5);
border-bottom: 1px solid var(--line);
}
.pro__laptop { position: relative; display: block; width: min(100%, 420px); }
.pro__rahmen {
display: block;
padding: 7px 7px 0;
border-radius: 12px 12px 3px 3px;
background: linear-gradient(160deg, #2a3550, #131c30);
box-shadow: 0 18px 34px -18px rgba(12, 22, 38, 0.55);
}
.pro__rahmen img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
border-radius: 6px 6px 0 0;
background: #fff;
}
.pro__fuss {
display: block;
width: 112%;
height: 12px;
margin-left: -6%;
border-radius: 0 0 10px 10px;
background: linear-gradient(180deg, #26314a, #0f1728);
box-shadow: 0 12px 22px -12px rgba(12, 22, 38, 0.6);
}
.pro__handy {
position: absolute;
right: clamp(0.8rem, 3vw, 2rem);
bottom: clamp(0.6rem, 2vw, 1.4rem);
width: clamp(62px, 16%, 96px);
padding: 4px;
border-radius: 12px;
background: linear-gradient(160deg, #2a3550, #131c30);
box-shadow: 0 16px 30px -14px rgba(12, 22, 38, 0.6);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pro__handy img {
display: block;
width: 100%;
aspect-ratio: 9 / 19;
object-fit: cover;
object-position: top center;
border-radius: 8px;
background: #fff;
}
.pro__text { padding: clamp(1.1rem, 2.4vw, 1.6rem); display: flex; flex-direction: column; gap: 0.45rem; flex: 1; }
.pro__kat {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
}
.pro__text h3 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); letter-spacing: -0.015em; }
.pro__lead { color: var(--ink-2); font-size: 0.95rem; line-height: 1.6; }
.pro__link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-top: auto;
padding-top: 0.6rem;
font-weight: 600;
font-size: 0.92rem;
color: var(--blue);
}
.pro__link svg { width: 16px; height: 16px; transition: translate 0.3s ease; }
.pro__link:hover svg { translate: 4px 0; }
@media (max-width: 620px) {
.pro { grid-template-columns: 1fr; }
.pro__buehne { padding: 1.3rem 1rem 2rem; }
}
@media (prefers-reduced-motion: reduce) {
.pro__karte, .pro__handy, .pro__link svg { transition: none; }
}
.pro__buehne--frei { padding: clamp(0.8rem, 2vw, 1.4rem); background: linear-gradient(160deg, #f2f6fb, #e8eff8); }
.pro__frei { display: block; width: 100%; }
.pro__frei img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: contain;
mix-blend-mode: multiply;
}
.pv3-stage--frei {
display: grid;
place-items: center;
aspect-ratio: 16/10;
}
.pv3-frei {
width: 100%;
filter: drop-shadow(0 26px 40px rgba(4, 10, 24, 0.55));
}
.pv3-frei img {
display: block;
width: 100%;
aspect-ratio: 16 / 10;
object-fit: contain;
border-radius: 10px;
}
.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); }
.fakten--dunkel .fakten__band {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
box-shadow: none;
}
.fakten--dunkel .fakten__punkt { border-left-color: rgba(255, 255, 255, 0.12); }
.fakten--dunkel .fakten__punkt span { color: var(--dark-text); }
@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);
}
.ukarten.sp-2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.ukarten.sp-4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.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; }
.section--dark .ukarte {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
box-shadow: none;
color: #fff;
}
.section--dark .ukarte__lead { color: var(--dark-text); }
.section--dark .ukarte__unter { color: #7fd0e0; }
@media (prefers-reduced-motion: reduce) {
.ukarte, .ukarte__bild img, .ukarte__pfeil { transition: none; }
}
.reels {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
gap: clamp(0.9rem, 2vw, 1.6rem);
max-width: 900px;
margin: clamp(1.4rem, 3vw, 2.2rem) auto 0;
}
.reel {
position: relative;
overflow: hidden;
border-radius: var(--radius);
border: 1px solid var(--line);
background: #0d1524;
box-shadow: var(--shadow);
}
.reel__video {
display: block;
width: 100%;
aspect-ratio: 9 / 16;
object-fit: cover;
background: #0d1524;
}
.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); }
.reel__titel {
position: absolute;
left: 0.75rem;
bottom: 0.75rem;
max-width: calc(100% - 3.6rem);
font-size: 0.82rem;
font-weight: 600;
color: #fff;
text-shadow: 0 2px 10px rgba(6, 12, 24, 0.8);
}
.section--dark .reel { border-color: rgba(255, 255, 255, 0.14); box-shadow: none; }
.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__leiste {
position: relative;
height: 6px;
margin-top: 0.7rem;
border-radius: 99px;
background: rgba(12, 22, 38, 0.1);
cursor: pointer;
overflow: hidden;
}
.hoer__leiste span {
position: absolute;
inset: 0 auto 0 0;
width: 0;
border-radius: 99px;
background: var(--grad);
}
.hoer__zeit { font-family: var(--font-mono); font-size: 0.8rem; color: var(--ink-2); }
.section--dark .hoer {
border-color: rgba(255, 255, 255, 0.12);
background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
box-shadow: none;
}
.section--dark .hoer__text, .section--dark .hoer__zeit { color: var(--dark-text); }
.section--dark .hoer__leiste { background: rgba(255, 255, 255, 0.14); }
@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__kopf { display: flex; align-items: center; gap: 0.5rem; }
.beitrag__tag {
padding: 0.24rem 0.62rem;
border-radius: 99px;
background: rgba(47, 163, 186, 0.12);
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--teal-ink);
}
.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; }
.beitrag:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.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__preis {
display: flex;
flex-direction: column;
line-height: 1.25;
}
.ukarte__preis b {
font-size: 1.32rem;
font-weight: 750;
letter-spacing: -0.02em;
color: var(--ink);
}
.ukarte__preis i { font-style: normal; font-size: 0.82rem; color: var(--ink-2); }
.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; }
.section--dark .ukarte__fuss { border-top-color: rgba(255, 255, 255, 0.12); }
.section--dark .ukarte__chip { border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: #cfe0ff; }
.section--dark .ukarte__preis b { color: #fff; }
.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:focus-visible { outline: 2px solid #3fd6e8; outline-offset: 3px; }
.chatknopf__hinweis {
position: absolute;
right: calc(100% + 10px);
padding: 0.34rem 0.7rem;
border-radius: 99px;
background: #0f1c30;
color: #fff;
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
transform: translateX(6px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) {
.chatknopf:hover .chatknopf__hinweis, .chatknopf:focus-visible .chatknopf__hinweis {
opacity: 1; transform: translateX(0);
}
}
.chatknopf[aria-expanded="true"] .chatknopf__hinweis { display: none; }
.chatfenster {
position: fixed;
right: clamp(10px, 1.4vw, 22px);
bottom: 142px;
z-index: 95;
width: min(380px, calc(100vw - 24px));
height: min(620px, calc(100vh - 190px));
border-radius: 24px;
overflow: hidden;
background: #fff;
box-shadow: 0 24px 60px -18px rgba(6, 14, 30, 0.45);
animation: none;
}
.chatfenster[hidden] { display: none; }
.chatfenster iframe { display: block; width: 100%; height: 100%; border: 0; }
.chatfenster { background: #0d1a30; }
.chatfenster iframe { background: #fff; }
@media (max-width: 620px) {
.chatknopf { bottom: 126px; right: 12px; width: 42px; height: 42px; }
.chatknopf svg { width: 19px; height: 19px; }
.chatfenster { bottom: 178px; height: min(560px, calc(100vh - 220px)); }
}
@media (prefers-reduced-motion: reduce) {
.chatknopf, .chatknopf__hinweis { transition: none; }
.chatfenster { animation: none; }
}
.jubi {
display: grid;
grid-template-columns: 1fr;
gap: clamp(2.4rem, 5vw, 3.5rem);
align-items: center;
}
.jubi__text { display: grid; gap: 0.9rem; justify-items: start; }
.jubi__text h2 { font-size: clamp(1.9rem, 3.6vw, 2.9rem); letter-spacing: -0.025em; }
.jubi__lead { max-width: 46ch; color: var(--dark-text); line-height: 1.7; }
.jubi__zahlen {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: clamp(0.8rem, 2vw, 1.6rem);
width: 100%;
margin-top: 0.4rem;
padding: 1rem 0 0;
border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.jubi__zahlen b {
display: block;
font-size: clamp(1.4rem, 2.4vw, 1.9rem);
font-weight: 750;
letter-spacing: -0.02em;
color: transparent;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
}
.jubi__zahlen span { display: block; margin-top: 0.2rem; font-size: 0.86rem; line-height: 1.45; color: var(--dark-text); }
.jubi__knopf { gap: 0.5rem; margin-top: 0.4rem; }
.jubi__knopf svg { width: 17px; height: 17px; transition: translate 0.3s ease; }
.jubi__knopf:hover svg { translate: 4px 0; }
.jubi__bild { position: relative; }
.jubi__foto {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 34px 70px -28px rgba(4, 10, 24, 0.85);
}
.jubi__marke {
position: absolute;
left: clamp(-1.5rem, -2vw, -0.5rem);
bottom: clamp(-2rem, -3vw, -1rem);
width: clamp(150px, 34%, 250px);
height: auto;
filter: drop-shadow(0 18px 30px rgba(4, 10, 24, 0.6));
animation: jubi-schweben 7s ease-in-out infinite;
}
@keyframes jubi-schweben {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-10px) rotate(1deg); }
}
@media (min-width: 900px) {
.jubi { grid-template-columns: 1fr 1.05fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
}
@media (max-width: 620px) {
.jubi__marke { width: 128px; left: -0.6rem; bottom: -1.4rem; }
}
@media (prefers-reduced-motion: reduce) {
.jubi__marke { 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; }
}
.galerie__feld:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.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; }
@keyframes lb-auf { from { opacity: 0; } }
.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; }
}
.jubi-sektion,
#arbeiten.section--dark { position: relative; }
.jubi-sektion::after,
#arbeiten.section--dark::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: min(1180px, calc(100% - 2.5rem));
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16) 18%, rgba(255, 255, 255, 0.16) 82%, transparent);
pointer-events: none;
}
.nav__links button.nav__gruppenlink {
border: 0;
background: none;
font-family: inherit;
line-height: inherit;
letter-spacing: inherit;
cursor: pointer;
padding: 0;
}
.nav__gruppe { gap: 0; }
.jubi__knoepfe { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 0.4rem; }
@media (max-width: 760px) {
.jubi__knoepfe {
justify-self: stretch;
width: 100%;
flex-direction: column;
align-items: stretch;
}
.jubi__knoepfe .jubi__knopf { width: 100%; justify-content: center; }
}
.nav__unter { min-width: 19rem; padding: 0.7rem; gap: 0.15rem; }
.nav__unter-titel {
margin: 0.15rem 0.6rem 0.5rem;
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.13em;
text-transform: uppercase;
color: #7fd0e0;
}
.nav__unter a {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.7rem;
padding: 0.5rem 0.6rem;
border-radius: 12px;
transition: background-color 0.2s ease, translate 0.2s ease;
}
.nav__unter-icon {
display: grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 10px;
color: #7fd0e0;
background: rgba(127, 208, 224, 0.1);
border: 1px solid rgba(127, 208, 224, 0.2);
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.nav__unter-icon svg { width: 17px; height: 17px; }
.nav__unter-text { display: grid; gap: 0.1rem; min-width: 0; }
.nav__unter-name { font-size: 0.93rem; font-weight: 600; color: #eef3fb; }
.nav__unter-info { font-size: 0.78rem; line-height: 1.35; color: rgba(233, 240, 250, 0.6); }
.nav__unter-pfeil {
display: grid;
place-items: center;
width: 22px;
color: rgba(127, 208, 224, 0.75);
opacity: 0;
translate: -4px 0;
transition: opacity 0.2s ease, translate 0.2s ease;
}
.nav__unter-pfeil svg { width: 15px; height: 15px; }
.nav__unter a:hover,
.nav__unter a:focus-visible {
background: rgba(127, 208, 224, 0.1);
translate: 2px 0;
}
.nav__unter a:hover .nav__unter-icon,
.nav__unter a:focus-visible .nav__unter-icon {
background: var(--grad);
border-color: transparent;
color: #fff;
}
.nav__unter a:hover .nav__unter-pfeil,
.nav__unter a:focus-visible .nav__unter-pfeil { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) {
.nav__unter a, .nav__unter-icon, .nav__unter-pfeil { transition: none; }
}
.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;
}
.datei__liste li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.5rem 0.8rem;
border: 1px solid var(--line);
border-radius: 10px;
background: #fff;
font-size: 0.9rem;
}
.datei__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datei__groesse { flex: 0 0 auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.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);
}
@keyframes cookie-auf {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
.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; }
.cookie__schalter input:focus-visible + .cookie__bahn {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
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; }
.netz {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
-webkit-mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
mask-image: radial-gradient(120% 90% at 50% 45%, #000 45%, transparent 88%);
}
[data-netz] > .wrap { position: relative; z-index: 1; }
.goal__num {
font-variant-numeric: tabular-nums;
}
.weg__linie i {
position: absolute;
top: 0;
left: -35%;
width: 35%;
height: 100%;
border-radius: 2px;
background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
animation: weg-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
will-change: transform;
}
@keyframes weg-spur {
0% { transform: translateX(0); }
100% { transform: translateX(386%); }
}
.weg__punkte {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.6rem;
margin-top: 0.75rem;
}
.weg__punkt {
position: relative;
display: block;
padding-left: 0.95rem;
font-size: 0.82rem;
line-height: 1.35;
color: var(--ink-2);
}
.weg__punkt::before {
content: "";
position: absolute;
left: 0;
top: 0.35em;
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--blue);
box-shadow: 0 0 0 3px rgba(47, 77, 158, 0.12);
}
.weg__punkt:nth-child(2)::before { background: #2f7f9e; box-shadow: 0 0 0 3px rgba(47, 127, 158, 0.12); }
.weg__punkt:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47, 163, 186, 0.14); }
.weg__punkt b {
display: block;
font-weight: 650;
font-size: 0.88rem;
color: var(--ink);
}
@media (max-width: 620px) {
.weg__punkte { grid-template-columns: 1fr; gap: 0.4rem; }
.weg { padding-top: 1rem; }
}
.vis {
display: block;
align-self: end;
padding: 0.95rem 1rem;
border-radius: 14px;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.05), rgba(47, 163, 186, 0.05));
border: 1px solid rgba(47, 77, 158, 0.1);
}
.vis--weg .vis__linie {
position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden;
background: linear-gradient(90deg, rgba(47,77,158,.18), rgba(47,163,186,.18));
}
.vis--weg .vis__linie i {
position: absolute; top: 0; left: -34%; width: 34%; height: 100%;
background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
animation: vis-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
will-change: transform;
}
@keyframes vis-spur { to { transform: translateX(394%); } }
.vis--weg .vis__stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.vis--weg .vis__stationen > span {
position: relative; padding-left: 0.85rem; font-size: 0.76rem; line-height: 1.3; color: var(--ink-2);
}
.vis--weg .vis__stationen > span::before {
content: ""; position: absolute; left: 0; top: 0.32em; width: 6px; height: 6px;
border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47,77,158,.12);
}
.vis--weg .vis__stationen > span:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47,163,186,.14); }
.vis--weg .vis__stationen b { display: block; font-size: 0.83rem; font-weight: 650; color: var(--ink); }
.vis--fluss { display: flex; align-items: center; gap: 0.7rem; }
.fluss__spalte { flex: 1; display: grid; gap: 4px; }
.fluss__spalte em {
font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
}
.fluss__spalte i { display: block; height: 7px; border-radius: 3px; }
.fluss__spalte--alt i { background: rgba(12, 22, 38, 0.14); }
.fluss__spalte--neu i { background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.25; }
.fluss__spalte--neu i:nth-child(2) { animation: fluss-an 4s ease-in-out infinite; }
.fluss__spalte--neu i:nth-child(3) { animation: fluss-an 4s ease-in-out 0.35s infinite; }
.fluss__spalte--neu i:nth-child(4) { animation: fluss-an 4s ease-in-out 0.7s infinite; }
.fluss__spalte--neu i:nth-child(5) { animation: fluss-an 4s ease-in-out 1.05s infinite; }
@keyframes fluss-an {
0%, 12% { opacity: 0.18; transform: translateX(-4px); }
30%, 78% { opacity: 1; transform: none; }
96%, 100% { opacity: 0.18; transform: translateX(-4px); }
}
.fluss__pfeil { flex: 0 0 auto; color: var(--teal-ink); }
.fluss__pfeil svg { width: 20px; height: 20px; display: block; }
.vis--chat { display: grid; gap: 0.45rem; }
.chat__zeile {
display: block; padding: 0.45rem 0.65rem; border-radius: 10px;
font-size: 0.78rem; line-height: 1.4;
}
.chat__zeile--frage { background: rgba(12, 22, 38, 0.06); color: var(--ink-2); justify-self: start; }
.chat__zeile--antwort {
background: linear-gradient(120deg, var(--blue), #2f7f9e); color: #fff;
animation: chatzeile-auf 5s ease-in-out infinite;
}
.chat__zeile--antwort b { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }
@keyframes chatzeile-auf {
0%, 8% { opacity: 0; transform: translateY(5px); }
22%, 86% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(5px); }
}
.chat__fuss {
display: flex; align-items: center; gap: 0.4rem;
font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2);
}
.chat__fuss i {
width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5);
animation: chat-puls 2.4s ease-out infinite;
}
@keyframes chat-puls { to { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); } }
.vis--tempo { display: grid; gap: 0.5rem; }
.tempo__zeile { display: grid; grid-template-columns: 3.6rem 1fr 2.6rem; align-items: center; gap: 0.5rem; }
.tempo__zeile em {
font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.tempo__bahn { display: block; height: 7px; border-radius: 4px; background: rgba(12, 22, 38, 0.08); overflow: hidden; }
.tempo__balken { display: block; height: 100%; border-radius: 4px; transform-origin: left center; }
.tempo__balken--alt { background: #d98b4a; animation: tempo-alt 4s ease-in-out infinite; }
.tempo__balken--neu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: tempo-neu 4s ease-in-out infinite; }
@keyframes tempo-alt { 0%, 6% { width: 0; } 40%, 88% { width: 92%; } 100% { width: 0; } }
@keyframes tempo-neu { 0%, 20% { width: 0; } 42%, 88% { width: 22%; } 100% { width: 0; } }
.tempo__zeile b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; }
.tempo__zeile:first-child b { color: #b0702f; }
.tempo__zeile:last-child b { color: var(--teal-ink); }
@media (prefers-reduced-motion: reduce) {
.vis--weg .vis__linie i,
.fluss__spalte--neu i,
.chat__zeile--antwort,
.chat__fuss i,
.tempo__balken { animation: none; }
.tempo__balken--alt { width: 92%; }
.tempo__balken--neu { width: 22%; }
.fluss__spalte--neu i { opacity: 1; }
}
.ziel {
position: relative;
overflow: hidden;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
gap: 0.8rem;
padding: 1.6rem 1.5rem 1.4rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--surface);
box-shadow: var(--shadow);
color: inherit;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.ziel > *:not(.flut) { position: relative; z-index: 1; }
.ziel:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(12, 22, 38, 0.28); }
.vis {
display: block;
align-self: end;
padding: 0.95rem 1rem;
border-radius: 14px;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.05), rgba(47, 163, 186, 0.05));
border: 1px solid rgba(47, 77, 158, 0.1);
}
.vis--weg .vis__linie {
position: relative; display: block; height: 2px; border-radius: 2px; overflow: hidden;
background: linear-gradient(90deg, rgba(47,77,158,.18), rgba(47,163,186,.18));
}
.vis--weg .vis__linie i {
position: absolute; top: 0; left: -34%; width: 34%; height: 100%;
background: linear-gradient(90deg, transparent, #3fd6e8, var(--blue), transparent);
animation: vis-spur 3.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
will-change: transform;
}
@keyframes vis-spur { to { transform: translateX(394%); } }
.vis--weg .vis__stationen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.7rem; }
.vis--weg .vis__stationen > span {
position: relative; padding-left: 0.85rem; font-size: 0.76rem; line-height: 1.3; color: var(--ink-2);
}
.vis--weg .vis__stationen > span::before {
content: ""; position: absolute; left: 0; top: 0.32em; width: 6px; height: 6px;
border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px rgba(47,77,158,.12);
}
.vis--weg .vis__stationen > span:nth-child(3)::before { background: var(--teal); box-shadow: 0 0 0 3px rgba(47,163,186,.14); }
.vis--weg .vis__stationen b { display: block; font-size: 0.83rem; font-weight: 650; color: var(--ink); }
.vis--fluss { display: flex; align-items: center; gap: 0.7rem; }
.fluss__spalte { flex: 1; display: grid; gap: 4px; }
.fluss__spalte em {
font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 2px;
}
.fluss__spalte i { display: block; height: 7px; border-radius: 3px; }
.fluss__spalte--alt i { background: rgba(12, 22, 38, 0.14); }
.fluss__spalte--neu i { background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.25; }
.fluss__spalte--neu i:nth-child(2) { animation: fluss-an 4s ease-in-out infinite; }
.fluss__spalte--neu i:nth-child(3) { animation: fluss-an 4s ease-in-out 0.35s infinite; }
.fluss__spalte--neu i:nth-child(4) { animation: fluss-an 4s ease-in-out 0.7s infinite; }
.fluss__spalte--neu i:nth-child(5) { animation: fluss-an 4s ease-in-out 1.05s infinite; }
@keyframes fluss-an {
0%, 12% { opacity: 0.18; transform: translateX(-4px); }
30%, 78% { opacity: 1; transform: none; }
96%, 100% { opacity: 0.18; transform: translateX(-4px); }
}
.fluss__pfeil { flex: 0 0 auto; color: var(--teal-ink); }
.fluss__pfeil svg { width: 20px; height: 20px; display: block; }
.vis--chat { display: grid; gap: 0.45rem; }
.chat__zeile {
display: block; padding: 0.45rem 0.65rem; border-radius: 10px;
font-size: 0.78rem; line-height: 1.4;
}
.chat__zeile--frage { background: rgba(12, 22, 38, 0.06); color: var(--ink-2); justify-self: start; }
.chat__zeile--antwort {
background: linear-gradient(120deg, var(--blue), #2f7f9e); color: #fff;
animation: chat-auf 5s ease-in-out infinite;
}
.chat__zeile--antwort b { display: block; margin-top: 3px; font-size: 0.68rem; font-weight: 500; opacity: 0.85; }
@keyframes chat-auf {
0%, 8% { opacity: 0; transform: translateY(5px); }
22%, 86% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(5px); }
}
.chat__fuss {
display: flex; align-items: center; gap: 0.4rem;
font-family: var(--font-mono); font-size: 0.66rem; color: var(--ink-2);
}
.chat__fuss i {
width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5);
animation: chat-puls 2.4s ease-out infinite;
}
@keyframes chat-puls { to { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); } }
.vis--tempo { display: grid; gap: 0.5rem; }
.tempo__zeile { display: grid; grid-template-columns: 3.6rem 1fr 2.6rem; align-items: center; gap: 0.5rem; }
.tempo__zeile em {
font-style: normal; font-family: var(--font-mono); font-size: 0.66rem;
letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2);
}
.tempo__bahn { display: block; height: 7px; border-radius: 4px; background: rgba(12, 22, 38, 0.08); overflow: hidden; }
.tempo__balken { display: block; height: 100%; border-radius: 4px; transform-origin: left center; }
.tempo__balken--alt { background: #d98b4a; animation: tempo-alt 4s ease-in-out infinite; }
.tempo__balken--neu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: tempo-neu 4s ease-in-out infinite; }
@keyframes tempo-alt { 0%, 6% { width: 0; } 40%, 88% { width: 92%; } 100% { width: 0; } }
@keyframes tempo-neu { 0%, 20% { width: 0; } 42%, 88% { width: 22%; } 100% { width: 0; } }
.tempo__zeile b { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 600; text-align: right; }
.tempo__zeile:first-child b { color: #b0702f; }
.tempo__zeile:last-child b { color: var(--teal-ink); }
@media (prefers-reduced-motion: reduce) {
.vis--weg .vis__linie i,
.fluss__spalte--neu i,
.chat__zeile--antwort,
.chat__fuss i,
.tempo__balken { animation: none; }
.tempo__balken--alt { width: 92%; }
.tempo__balken--neu { width: 22%; }
.fluss__spalte--neu i { opacity: 1; }
}
.flut {
position: absolute;
left: -20%;
right: -20%;
bottom: -3.5rem;
height: 8rem;
pointer-events: none;
z-index: 0;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.flut i {
position: absolute;
inset: 0;
display: block;
border-radius: 50%;
filter: blur(22px);
will-change: transform;
}
.flut i:nth-child(1) {
background: radial-gradient(60% 100% at 50% 100%,
rgba(29, 58, 104, 0.55), rgba(31, 74, 122, 0.28) 55%, transparent 80%);
animation: schimmer var(--dauer, 19s) ease-in-out var(--phase, 0s) infinite;
}
.flut i:nth-child(2) {
background: radial-gradient(50% 100% at 62% 100%,
rgba(63, 214, 232, 0.34), rgba(47, 111, 158, 0.18) 58%, transparent 82%);
animation: schimmer calc(var(--dauer, 19s) * 0.68) ease-in-out calc(var(--phase, 0s) - 7s) infinite reverse;
}
@keyframes schimmer {
0% { transform: translate(0, 0) scale(1, 1); }
35% { transform: translate(calc(var(--weit, 5%) * -1), -6%) scale(1.08, 0.92); }
70% { transform: translate(var(--weit, 5%), 3%) scale(0.94, 1.06); }
100% { transform: translate(0, 0) scale(1, 1); }
}
.goal:hover .flut,
.ziel:hover .flut { transform: translateY(-0.5rem); }
.goals--bento .goal__num { z-index: 1; }
@media (max-width: 620px) {
.flut { bottom: -3rem; height: 6.5rem; }
}
@media (prefers-reduced-motion: reduce) {
.flut i { animation: none; }
.flut { transition: none; }
}
}
.goals--bento .goal { padding-bottom: 2.6rem; }
.ziel { padding-bottom: 2.6rem; }
[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; }
}
@keyframes dpuls {
0% { opacity: 0.55; transform: scale(0.4); }
100% { opacity: 0; transform: scale(3.6); }
}
.w-kopf {
position: absolute; left: 8%; top: 13%;
width: 46%; height: 12%;
border-radius: 8px;
background: linear-gradient(100deg, #7fb0ff, #3fd6e8);
opacity: calc((var(--bau0, 1) - 0.04) / 0.12);
}
.w-zeile {
position: absolute; left: 8%; top: 31%;
width: 38%; height: 5%;
border-radius: 4px;
background: rgba(244, 244, 240, 0.16);
opacity: calc((var(--bau0, 1) - 0.14) / 0.12);
}
.w-zeile--kurz { top: 40%; width: 27%; opacity: calc((var(--bau0, 1) - 0.2) / 0.12); }
.w-knopf {
position: absolute; left: 8%; top: 53%;
padding: 0.5rem 1rem;
border-radius: 999px;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
font-size: 0.78rem;
font-weight: 600;
opacity: calc((var(--bau0, 1) - 0.28) / 0.12);
}
.w-maus {
position: absolute;
left: calc(8% + 3.4rem); top: calc(53% + 0.8rem);
width: 22px; height: 22px;
border-radius: 50%;
border: 2px solid #7fd0e0;
box-shadow: 0 0 16px rgba(63, 214, 232, 0.55);
--t: clamp(0, calc((var(--bau0, 1) - 0.34) / 0.24), 1);
--k: clamp(0, calc((var(--bau0, 1) - 0.6) / 0.1), 1);
transform: translate(calc((1 - var(--t)) * 150px), calc((1 - var(--t)) * 90px))
scale(calc(1 - var(--k) * 0.25));
opacity: calc((var(--bau0, 1) - 0.3) / 0.1);
}
.w-chip {
position: absolute; left: 8%; top: 53%;
padding: 0.35rem 0.7rem;
border-radius: 999px;
background: rgba(127, 176, 255, 0.16);
border: 1px solid rgba(127, 176, 255, 0.45);
color: #cfe0ff;
font-size: 0.68rem;
--f: clamp(0, calc((var(--bau0, 1) - 0.66) / 0.26), 1);
transform: translate(calc(var(--f) * 220px), calc(var(--f) * -105px));
opacity: calc(clamp(0, calc((var(--bau0, 1) - 0.62) / 0.08), 1)
- clamp(0, calc((var(--bau0, 1) - 0.9) / 0.08), 1));
}
.w-termin {
position: absolute; right: 8%; top: 13%;
padding: 0.55rem 0.85rem;
border-radius: 10px;
background: rgba(46, 201, 139, 0.12);
border: 1px solid rgba(46, 201, 139, 0.4);
color: #b9e9d3;
font-size: 0.7rem;
opacity: calc((var(--bau0, 1) - 0.88) / 0.1);
transform: translateY(calc((1 - clamp(0, calc((var(--bau0, 1) - 0.88) / 0.12), 1)) * 8px));
}
.w-termin b { display: block; color: #fff; font-size: 0.78rem; }
.s-seite {
position: absolute; left: 6%; top: 10%; bottom: 10%;
width: 11%;
border-radius: 10px;
background: rgba(244, 244, 240, 0.05);
border: 1px solid rgba(244, 244, 240, 0.08);
display: grid;
align-content: start;
gap: 8px;
padding: 12px 9px;
opacity: calc((var(--bau1, 0) - 0.05) / 0.12);
}
.s-seite i { height: 8px; border-radius: 4px; background: rgba(127, 208, 224, 0.3); }
.s-kacheln {
position: absolute; left: 23%; right: 6%; top: 10%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.s-kacheln b {
background: rgba(244, 244, 240, 0.05);
border: 1px solid rgba(244, 244, 240, 0.1);
border-radius: 10px;
padding: 0.5rem 0.7rem;
color: #fff;
font-size: 1rem;
font-weight: 700;
}
.s-kacheln b:nth-child(1) { opacity: calc((var(--bau1, 0) - 0.14) / 0.12); }
.s-kacheln b:nth-child(2) { opacity: calc((var(--bau1, 0) - 0.22) / 0.12); }
.s-kacheln b:nth-child(3) { opacity: calc((var(--bau1, 0) - 0.3) / 0.12); }
.s-kacheln i {
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(244, 244, 240, 0.5);
margin-top: 2px;
}
.s-zeilen {
position: absolute; left: 23%; right: 6%; top: 47%;
display: grid;
gap: 10px;
}
.s-zeilen i {
height: 13px;
border-radius: 6px;
background: linear-gradient(90deg, rgba(127, 176, 255, 0.5), rgba(63, 214, 232, 0.32));
opacity: var(--r, 0);
transform: translateX(calc((1 - var(--r, 0)) * -26px));
}
.s-zeilen i:nth-child(1) { --r: clamp(0, calc((var(--bau1, 0) - 0.4) / 0.14), 1); }
.s-zeilen i:nth-child(2) { --r: clamp(0, calc((var(--bau1, 0) - 0.52) / 0.14), 1); }
.s-zeilen i:nth-child(3) { --r: clamp(0, calc((var(--bau1, 0) - 0.64) / 0.14), 1); }
.s-zeilen i:nth-child(4) { --r: clamp(0, calc((var(--bau1, 0) - 0.76) / 0.14), 1); }
.c-frage {
position: absolute; left: 8%; top: 12%;
max-width: 58%;
padding: 0.5rem 0.8rem;
border-radius: 12px 12px 12px 4px;
background: rgba(244, 244, 240, 0.09);
color: #e7ecf4;
font-size: 0.78rem;
opacity: calc((var(--bau2, 0) - 0.06) / 0.12);
}
.c-antwort {
position: absolute; right: 8%; top: 36%;
max-width: 72%;
padding: 0.6rem 0.85rem;
border-radius: 12px 12px 4px 12px;
background: linear-gradient(120deg, var(--blue), #2f7f9e);
color: #fff;
font-size: 0.78rem;
opacity: calc((var(--bau2, 0) - 0.2) / 0.1);
}
.c-antwort .c-text {
display: inline-block;
clip-path: inset(0 calc((1 - clamp(0, calc((var(--bau2, 0) - 0.28) / 0.34), 1)) * 100%) 0 0);
}
.c-antwort b {
display: block;
margin-top: 4px;
font-size: 0.64rem;
font-weight: 500;
opacity: calc((var(--bau2, 0) - 0.68) / 0.12);
}
.c-fuss {
position: absolute; left: 8%; bottom: 13%;
display: flex;
align-items: center;
gap: 0.45rem;
font-family: var(--font-mono);
font-size: 0.66rem;
color: rgba(244, 244, 240, 0.55);
opacity: calc((var(--bau2, 0) - 0.8) / 0.12);
}
.c-fuss i {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--ok);
animation: chat-puls 2.4s ease-out infinite;
}
.t-reihe {
position: absolute; left: 8%; right: 8%; top: 22%;
display: grid;
gap: 1.2rem;
}
.t-fazit {
position: absolute; left: 8%; bottom: 14%;
display: flex;
align-items: center;
gap: 0.6rem;
color: #b9e9d3;
font-weight: 650;
font-size: 0.95rem;
--z: clamp(0, calc((var(--bau3, 0) - 0.72) / 0.18), 1);
opacity: var(--z);
transform: scale(calc(0.86 + var(--z) * 0.14));
transform-origin: left center;
}
.t-fazit i {
display: grid;
place-items: center;
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.15);
border: 1px solid rgba(46, 201, 139, 0.5);
color: #2ec98b;
font-style: normal;
font-size: 0.85rem;
}
.demat { padding: 0; }
.demat__stage { position: relative; height: 400vh; }
.demat__pin {
position: sticky;
top: 0;
height: 100vh;
outline: none;
display: flex;
align-items: center;
overflow: hidden;
padding-top: clamp(4.5rem, 9vh, 6.2rem);
}
.demat__pin > .wrap {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
align-items: center;
padding-block: clamp(1.2rem, 4vh, 2.8rem);
}
.demat__deko { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.demat__deko i {
position: absolute;
right: 4vw; top: 8vh;
width: 38vw; height: 38vw;
border-radius: 50%;
border: 1px solid rgba(47, 77, 158, 0.16);
box-shadow: inset 0 0 0 1px rgba(47, 163, 186, 0.07);
opacity: 0.5;
transform: translate3d(calc(var(--fort, 0) * -16vw), calc((var(--fort, 0) - 0.35) * 46vh), 0)
rotate(calc(var(--fort, 0) * 40deg))
scale(calc(0.9 + var(--fort, 0) * 0.3));
}
@property --ein {
syntax: '<number>';
inherits: true;
initial-value: 1;
}
@keyframes deinlauf { from { --ein: 0; } to { --ein: 1; } }
.demat__stage:not(.ist-eingelaufen) .demat__kopf > *,
.demat__stage:not(.ist-eingelaufen) [data-demattext="0"] > *,
.demat__stage:not(.ist-eingelaufen) [data-dematbild="0"],
.demat__stage:not(.ist-eingelaufen) .demat__fort { --ein: 0; }
.demat__stage.ist-eingelaufen .demat__kopf > *,
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:not(:nth-child(5)),
.demat__stage.ist-eingelaufen [data-dematbild="0"],
.demat__stage.ist-eingelaufen .demat__fort {
animation: deinlauf 0.95s cubic-bezier(0.2, 0.85, 0.3, 1) both;
}
.demat__stage.ist-eingelaufen .demat__kicker { animation-delay: 0.02s; --ex: -40px; }
.demat__stage.ist-eingelaufen .demat__h2 { animation-delay: 0.1s; --ex: -60px; }
.demat__stage.ist-eingelaufen .demat__unter { animation-delay: 0.18s; --ex: -45px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(1) { animation-delay: 0.3s; --ex: -70px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(2) { animation-delay: 0.38s; --ex: -95px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(3) { animation-delay: 0.46s; --ex: -80px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(4) { animation-delay: 0.54s; --ex: -65px; }
.demat__stage.ist-eingelaufen [data-demattext="0"] > *:nth-child(5) {
animation: dknopfein 0.75s cubic-bezier(0.22, 0.9, 0.3, 1) both 0.62s;
}
@keyframes dknopfein {
from { transform: translate3d(-46px, 0, 0); opacity: 0; }
to { transform: translate3d(0, 0, 0); opacity: 1; }
}
.demat__stage.ist-eingelaufen [data-dematbild="0"] {
animation-duration: 1.1s;
animation-delay: 0.36s;
--ex: 110px;
}
.demat__stage.ist-eingelaufen .demat__fort { animation-delay: 0.72s; --ex: 0px; }
.demat__kopf > * {
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), calc((1 - var(--ein, 1)) * 14px), 0);
opacity: var(--ein, 1);
}
.demat__fort {
transform: translate3d(0, calc((1 - var(--ein, 1)) * 22px), 0);
opacity: var(--ein, 1);
}
.demat__texte,
.demat__buehnen { perspective: 1500px; perspective-origin: 50% 45%; }
.demat__text,
.dbild {
grid-area: 1 / 1;
--auf: 0;
--ri: 1;
--weg: calc(1 - var(--auf));
--weg2: calc((1 - var(--auf)) * (1 - var(--auf)));
--weg3: calc((1 - var(--auf)) * (1 - var(--auf)) * (1 - var(--auf)));
--sicht: calc(var(--auf) * var(--auf) * (3 - 2 * var(--auf)));
opacity: var(--sicht);
pointer-events: none;
transform-style: preserve-3d;
}
.demat__text.is-vorn { pointer-events: auto; }
.demat__text {
transform:
translate3d(calc(var(--weg2) * var(--ri) * 60px), 0, calc(var(--weg2) * -180px))
rotateY(calc(var(--weg2) * var(--ri) * 16deg));
}
.dbild {
transform:
translate3d(calc(var(--weg2) * var(--ri) * 110px + (1 - var(--ein, 1)) * var(--ex, 0px)),
calc(var(--weg2) * -24px), calc(var(--weg2) * -280px))
rotateY(calc(var(--weg2) * var(--ri) * 26deg + (1 - var(--ein, 1)) * -14deg))
rotateX(calc(var(--weg2) * -8deg))
scale(calc(1 - (1 - var(--ein, 1)) * 0.06));
opacity: calc(var(--sicht) * var(--ein, 1));
filter: blur(calc(var(--weg3) * 7px + (1 - var(--ein, 1)) * 5px));
}
.demat__text > * {
transform:
translate3d(calc(var(--weg2) * var(--dx, 0px) + (1 - var(--ein, 1)) * var(--ex, 0px)),
calc(var(--weg2) * var(--dy, 22px)), calc(var(--weg2) * var(--dz, -40px)))
rotateX(calc(var(--weg2) * var(--rx, 24deg)));
opacity: var(--ein, 1);
filter: blur(calc(var(--weg3) * var(--bl, 6px)));
transform-origin: 0 50%;
}
.demat__text > *:nth-child(1) { --dx: -22px; --dy: -16px; --dz: -50px; --rx: -18deg; --bl: 3px; }
.demat__text > *:nth-child(2) { --dx: 16px; --dy: -9px; --dz: -80px; --rx: 14deg; --bl: 4px; }
.demat__text > *:nth-child(3) { --dx: -13px; --dy: 15px; --dz: -65px; --rx: 20deg; --bl: 5px; }
.demat__text > *:nth-child(4) { --dx: 15px; --dy: 20px; --dz: -80px; --rx: -12deg; --bl: 4px; }
.demat__text > *:nth-child(5) {
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 22px, 0);
opacity: 0;
filter: none;
transition:
transform 0.6s cubic-bezier(0.22, 0.9, 0.3, 1),
opacity 0.45s ease,
box-shadow 0.25s ease;
}
.demat__text.is-vorn > *:nth-child(5) {
transform: translate3d(calc((1 - var(--ein, 1)) * var(--ex, 0px)), 0, 0);
opacity: var(--ein, 1);
transition-delay: 0.12s, 0.12s, 0s;
}
.demat__text.is-vorn > a:nth-child(5):hover { transform: translateY(-2px); }
.dbild .dfenster { position: relative; overflow: hidden; }
.dbild .dfenster::after {
content: "";
position: absolute;
inset: -40% -10%;
background: linear-gradient(105deg, transparent 42%, rgba(63, 214, 232, 0.28) 50%, transparent 58%);
transform: translateX(calc((var(--auf) - 0.5) * 230%));
opacity: calc(var(--weg) * var(--auf) * 3.2);
pointer-events: none;
}
.demat__kicker,
.kicker--marke {
display: block;
margin: 0 0 1.15rem;
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--ink-2);
}
.demat__kicker::before,
.kicker--marke::before {
content: "";
display: block;
width: 2.6rem;
height: 3px;
margin-bottom: 0.7rem;
border-radius: 999px;
background: var(--grad);
}
.section--dark .kicker--marke { color: var(--dark-text); }
.demat__h2 {
margin: 0;
font-size: clamp(1.9rem, 4.15vw, 3.7rem);
font-stretch: 100%;
letter-spacing: -0.032em;
line-height: 1.06;
white-space: nowrap;
}
.demat__h2 .grad {
background: linear-gradient(100deg, var(--blue) 10%, var(--teal) 40%, var(--blue) 70%, var(--teal) 100%);
background-size: 260% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: dgradzug 9s ease-in-out infinite;
}
@keyframes dgradzug {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.demat__unter {
margin: 1.1rem 0 0;
max-width: 34rem;
font-size: clamp(1rem, 1.3vw, 1.15rem);
line-height: 1.6;
color: var(--ink-2);
}
.demat__lage {
align-self: center;
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(1.6rem, 5vw, 4.5rem);
align-items: center;
margin-top: clamp(0.5rem, 2vh, 1.4rem);
}
.demat__texte { display: grid; }
.demat__text { display: grid; gap: 0.8rem; align-content: center; }
.demat__nr {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 0.15rem;
font-family: var(--font-mono);
font-size: 0.72rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
}
.demat__nr b {
font-size: 1.05rem;
font-weight: 700;
letter-spacing: 0.02em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.demat__nr span { font-weight: 400; opacity: 0.65; }
.demat__nr::after {
content: "";
flex: 1;
height: 1px;
max-width: 4.5rem;
background: linear-gradient(90deg, rgba(47, 163, 186, 0.5), transparent);
}
.demat__text h3 {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.3rem);
font-stretch: 100%;
letter-spacing: -0.028em;
line-height: 1.08;
text-wrap: balance;
}
.demat__text h3 em {
font-style: normal;
background: linear-gradient(100deg, var(--blue) 15%, var(--teal) 85%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.demat__lead { color: var(--ink-2); font-size: clamp(1rem, 1.25vw, 1.1rem); line-height: 1.65; margin: 0; }
.demat__text ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.demat__text li { position: relative; padding-left: 1.1rem; color: var(--ink-2); font-size: 0.97rem; }
.demat__text li::before {
content: "";
position: absolute;
left: 0; top: 0.55em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--teal);
}
.demat__text a {
justify-self: start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.35rem;
padding: 0.72rem 1.5rem;
border-radius: 999px;
background: var(--grad);
color: #fff;
font-weight: 600;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 14px 30px -18px rgba(47, 77, 158, 0.95);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.demat__text a::after {
content: "\2192";
transition: transform 0.25s ease;
}
.demat__text a:hover { transform: translateY(-2px); box-shadow: 0 20px 38px -18px rgba(47, 77, 158, 0.95); }
.demat__text a:hover::after { transform: translateX(4px); }
.demat__buehnen { position: relative; display: grid; align-content: center; min-height: clamp(15rem, 30vh, 19rem); }
.dbild { display: grid; align-content: center; }
.dfenster {
border-radius: 16px;
background: #fff;
border: 1px solid rgba(12, 22, 38, 0.08);
box-shadow: 0 30px 60px -40px rgba(12, 22, 38, 0.5);
overflow: hidden;
}
.dfenster__leiste {
display: flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 0.9rem;
border-bottom: 1px solid rgba(12, 22, 38, 0.06);
background: rgba(12, 22, 38, 0.02);
}
.dfenster__leiste i { width: 8px; height: 8px; border-radius: 50%; background: rgba(12, 22, 38, 0.13); }
.dfenster__leiste em {
margin-left: 0.5rem;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.66rem;
color: var(--ink-2);
background: rgba(12, 22, 38, 0.04);
padding: 0.15rem 0.6rem;
border-radius: 999px;
}
.dfenster__inhalt {
display: grid;
gap: clamp(0.55rem, 1.1vw, 0.85rem);
padding: clamp(0.8rem, 1.5vw, 1.15rem);
min-height: clamp(11rem, 24vh, 15rem);
align-content: center;
}
.dsz { display: grid; align-content: center; }
.dsz--1 { grid-template-columns: 1fr; gap: 0.4rem; }
.dsz--2 { grid-template-columns: 1fr auto 1.15fr; align-items: center; gap: clamp(0.5rem, 1.5vw, 1rem); }
.dsz--3 { grid-template-columns: 1fr; gap: 0.9rem; align-content: center; }
.dsz--4 { grid-template-columns: minmax(0, 1fr) auto; gap: 0.8rem clamp(1rem, 2.5vw, 2rem); align-items: center; padding-right: 0.4rem; }
.dform { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; align-items: end; }
.dform .dweb__knopf { grid-column: 1 / -1; }
.dfeld {
display: grid;
gap: 1px;
padding: 0.26rem 0.5rem;
border-radius: 8px;
border: 1px solid rgba(12, 22, 38, 0.1);
background: rgba(12, 22, 38, 0.02);
opacity: 0;
}
.is-vorn .dfeld { animation: dfeldan 12s ease-out infinite; }
.is-vorn .dfeld:nth-child(1) { animation-delay: 0.7s; }
.is-vorn .dfeld:nth-child(2) { animation-delay: 1.5s; }
.is-vorn .dfeld:nth-child(3) { animation-delay: 2.3s; }
@keyframes dfeldan {
0% { opacity: 0; transform: translateY(5px); border-color: rgba(12, 22, 38, 0.1); }
4% { opacity: 1; transform: none; }
6%, 12% { border-color: rgba(47, 163, 186, 0.55); background: rgba(47, 163, 186, 0.05); }
16%, 92% { opacity: 1; transform: none; border-color: rgba(12, 22, 38, 0.1); background: rgba(12, 22, 38, 0.02); }
100% { opacity: 0; transform: translateY(5px); }
}
.dfeld em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dfeld b {
display: flex;
align-items: center;
font-size: 0.76rem;
font-weight: 500;
color: var(--ink);
white-space: nowrap;
}
.dfeld b > span { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; }
.is-vorn .dfeld:nth-child(1) b > span { animation: dtipp 12s steps(11, end) infinite 0.85s; }
.is-vorn .dfeld:nth-child(2) b > span { animation: dtipp 12s steps(15, end) infinite 1.65s; }
.is-vorn .dfeld:nth-child(3) b > span { animation: dtipp 12s steps(12, end) infinite 2.45s; }
@keyframes dtipp {
0% { width: 0; }
5%, 90% { width: 100%; }
100% { width: 0; }
}
.dcursor {
width: 1.5px; height: 0.85em;
margin-left: 1px;
background: var(--teal-ink);
opacity: 0;
}
.is-vorn .dcursor { animation: dblink 0.9s steps(2, end) infinite, dcursoran 12s linear infinite; }
@keyframes dblink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes dcursoran { 0%, 19% { visibility: hidden; } 20%, 31% { visibility: visible; } 32%, 100% { visibility: hidden; } }
.dweb__knopf {
position: relative;
justify-self: start;
padding: 0.38rem 0.95rem;
border-radius: 999px;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
font-size: 0.78rem;
font-weight: 600;
opacity: 0;
}
.is-vorn .dweb__knopf { animation: dknopf 12s ease-out infinite; }
@keyframes dknopf {
0%, 4% { opacity: 0; transform: translateY(6px); }
8%, 30% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
33% { transform: scale(0.95); box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
36%, 92% { opacity: 1; transform: none; box-shadow: 0 8px 20px -12px rgba(47, 77, 158, 0.9); }
100% { opacity: 0; transform: translateY(6px); }
}
.dklick {
position: absolute;
left: 50%; top: 50%;
width: 16px; height: 16px;
margin: -8px 0 0 -8px;
border-radius: 50%;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.35);
opacity: 0;
}
.is-vorn .dklick { animation: dklick 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
@keyframes dklick {
0%, 24% { transform: translate(38px, 30px) scale(0.85); opacity: 0; }
27% { opacity: 1; }
32% { transform: translate(0, 0) scale(1); opacity: 1; }
34% { transform: translate(0, 0) scale(0.55); opacity: 1; }
37% { transform: translate(0, 0) scale(1); opacity: 1; }
42%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
.dklick::after {
content: "";
position: absolute;
inset: -3px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.7);
opacity: 0;
}
.is-vorn .dklick::after { animation: dwelle 12s ease-out infinite; }
@keyframes dwelle {
0%, 33% { transform: scale(0.5); opacity: 0; }
35% { transform: scale(1); opacity: 0.9; }
44%, 100% { transform: scale(2.6); opacity: 0; }
}
.dfluss { position: relative; height: 20px; }
.dfluss::before {
content: "";
position: absolute;
left: 3%; right: 16%; top: 50%;
height: 2px;
border-radius: 2px;
background: repeating-linear-gradient(90deg,
rgba(47, 163, 186, 0.4) 0 6px, transparent 6px 12px);
opacity: 0;
}
.is-vorn .dfluss::before { animation: dbahnan 12s linear infinite; }
@keyframes dbahnan { 0%, 30% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
.dfluss__ziel {
position: absolute;
right: 0; top: 50%;
transform: translateY(-50%);
padding: 0.18rem 0.5rem;
border-radius: 6px;
background: rgba(47, 77, 158, 0.07);
border: 1px solid rgba(47, 77, 158, 0.16);
font-family: var(--font-mono);
font-size: 0.58rem;
letter-spacing: 0.05em;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dfluss__ziel { animation: dzielan 12s ease-out infinite; }
@keyframes dzielan {
0%, 30% { opacity: 0; }
36%, 47% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); }
50% { opacity: 1; border-color: var(--teal); background: rgba(47, 163, 186, 0.14); }
56%, 92% { opacity: 1; border-color: rgba(47, 77, 158, 0.16); background: rgba(47, 77, 158, 0.07); }
100% { opacity: 0; }
}
.dfluss__paket {
position: absolute;
top: 50%;
display: flex;
align-items: center;
gap: 0.3rem;
padding: 0.22rem 0.55rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(47, 163, 186, 0.5);
box-shadow: 0 6px 16px -8px rgba(12, 22, 38, 0.4);
font-size: 0.66rem;
font-weight: 600;
color: var(--teal-ink);
white-space: nowrap;
opacity: 0;
}
.dfluss__paket i { font-style: normal; }
.is-vorn .dfluss__paket { animation: dpaket 12s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes dpaket {
0%, 35% { left: 3%; transform: translate(0, -50%) scale(0.7); opacity: 0; }
38% { opacity: 1; transform: translate(0, -50%) scale(1); }
48% { left: 62%; opacity: 1; transform: translate(0, -50%) scale(1); }
51% { left: 70%; opacity: 0.2; transform: translate(0, -50%) scale(0.75); }
54%, 100% { left: 70%; opacity: 0; transform: translate(0, -50%) scale(0.7); }
}
.dkalender { display: grid; gap: 0.3rem; }
.dkalender__kopf {
display: flex;
align-items: center;
justify-content: space-between;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dkalender__kopf em { font-style: normal; opacity: 0.7; }
.dkalender__raster { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.dkalender__raster i {
height: 16px;
border-radius: 4px;
background: rgba(12, 22, 38, 0.05);
}
.dkalender__raster i.ist-alt { background: rgba(12, 22, 38, 0.12); }
.is-vorn .dkalender__raster i.ist-belegt { animation: dbelegt 12s ease-out infinite; }
@keyframes dbelegt {
0%, 52% { background: rgba(12, 22, 38, 0.05); transform: scale(1); box-shadow: none; }
57% { background: var(--teal); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(63, 214, 232, 0.25); }
63%, 92% { background: rgba(47, 163, 186, 0.45); transform: scale(1); box-shadow: none; }
100% { background: rgba(12, 22, 38, 0.05); }
}
.dabschluss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.dkalender__termin {
display: grid;
grid-template-columns: auto 1fr;
gap: 0.05rem 0.5rem;
align-items: center;
padding: 0.35rem 0.6rem;
border-radius: 10px;
background: rgba(46, 201, 139, 0.08);
border: 1px solid rgba(46, 201, 139, 0.3);
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dkalender__termin { animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.dkalender__termin i {
grid-row: 1 / 3;
display: grid; place-items: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.16);
color: #1a7f4e;
font-style: normal;
}
.dkalender__termin em { font-style: normal; color: var(--ink); font-weight: 650; font-size: 0.82rem; }
.dtoast {
display: flex;
align-items: center;
gap: 0.35rem;
padding: 0.28rem 0.6rem;
border-radius: 999px;
background: #fff;
border: 1px solid rgba(12, 22, 38, 0.1);
box-shadow: 0 10px 24px -14px rgba(12, 22, 38, 0.5);
font-size: 0.7rem;
color: var(--ink-2);
opacity: 0;
}
.dtoast i { font-style: normal; color: var(--teal-ink); }
.is-vorn .dtoast { animation: dspaet 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite 1.1s; }
@keyframes dspaet {
0%, 55% { opacity: 0; transform: translateY(8px); }
63%, 93% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(8px); }
}
.dtab, .dsys { display: grid; gap: 0.4rem; align-content: start; }
.dtab__kopf {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin-bottom: 0.1rem;
}
.dtab__kopf em { font-style: normal; }
.dtab__kopf em.ist-gut { color: #1a7f4e; }
.dtab__zeile { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; }
.dtab__zeile i { height: 9px; border-radius: 5px; background: rgba(12, 22, 38, 0.1); }
.dtab__zeile i:last-child { width: 26px; background: rgba(12, 22, 38, 0.06); }
.is-vorn .dtab__zeile { animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.is-vorn .dtab__zeile:nth-of-type(2) { animation-delay: 0.5s; }
.is-vorn .dtab__zeile:nth-of-type(3) { animation-delay: 1s; }
.is-vorn .dtab__zeile:nth-of-type(4) { animation-delay: 1.5s; }
.is-vorn .dtab__zeile:nth-of-type(5) { animation-delay: 2s; }
@keyframes dweg {
0%, 12% { opacity: 1; transform: none; filter: none; }
26% { opacity: 0.5; transform: translateX(8px); filter: blur(1px); }
34%, 90% { opacity: 0.12; transform: translateX(16px); filter: blur(2px); }
100% { opacity: 1; transform: none; filter: none; }
}
.dtab__mail {
justify-self: start;
margin-top: 0.15rem;
padding: 0.2rem 0.5rem;
border-radius: 6px;
background: rgba(217, 139, 74, 0.12);
color: #b0702f;
font-size: 0.64rem;
font-weight: 600;
}
.is-vorn .dtab__mail { animation: dweg 12s cubic-bezier(0.4, 0, 0.2, 1) infinite 2.4s; }
.dwandern { position: relative; width: clamp(1.8rem, 4.5vw, 3rem); height: 60px; }
.dwandern i {
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
opacity: 0;
}
.dwandern i:nth-child(1) { top: 14%; }
.dwandern i:nth-child(2) { top: 32%; }
.dwandern i:nth-child(3) { top: 50%; }
.dwandern i:nth-child(4) { top: 68%; }
.dwandern i:nth-child(5) { top: 86%; }
.is-vorn .dwandern i { animation: dwandern 12s cubic-bezier(0.45, 0, 0.3, 1) infinite; }
.is-vorn .dwandern i:nth-child(2) { animation-delay: 0.55s; }
.is-vorn .dwandern i:nth-child(3) { animation-delay: 1.1s; }
.is-vorn .dwandern i:nth-child(4) { animation-delay: 1.65s; }
.is-vorn .dwandern i:nth-child(5) { animation-delay: 2.2s; }
@keyframes dwandern {
0%, 10% { left: 0; opacity: 0; transform: scale(0.6); }
14% { opacity: 1; transform: scale(1); }
28% { left: calc(100% - 6px); opacity: 1; transform: scale(1); }
32%, 100% { left: calc(100% - 6px); opacity: 0; transform: scale(0.5); }
}
.dsys__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; margin-bottom: 0.15rem; }
.dsys__kacheln b {
padding: 0.38rem 0.45rem;
border-radius: 9px;
background: rgba(47, 77, 158, 0.06);
border: 1px solid rgba(47, 77, 158, 0.14);
color: var(--ink);
font-size: 0.92rem;
font-weight: 700;
font-variant-numeric: tabular-nums;
opacity: 0;
}
.is-vorn .dsys__kacheln b { animation: dkachel 12s ease-out infinite; }
.is-vorn .dsys__kacheln b:nth-child(2) { animation-delay: 0.2s; }
.is-vorn .dsys__kacheln b:nth-child(3) { animation-delay: 0.4s; }
@keyframes dkachel {
0%, 14% { opacity: 0; transform: translateY(8px) scale(0.96); }
24%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateY(8px) scale(0.96); }
}
.dsys__kacheln i {
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.52rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
font-weight: 500;
margin-top: 1px;
}
.dsys__lauf { display: grid; gap: 0.3rem; }
.dsys__zeile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding: 0.3rem 0.5rem;
border-radius: 7px;
background: rgba(47, 163, 186, 0.06);
border-left: 2px solid var(--teal);
font-size: 0.7rem;
color: var(--ink-2);
opacity: 0;
}
.dsys__zeile em { font-style: normal; font-family: var(--font-mono); font-size: 0.65rem; }
.dstatus {
font-style: normal;
font-size: 0.6rem;
font-weight: 600;
color: #1a7f4e;
background: rgba(46, 201, 139, 0.14);
padding: 0.08rem 0.4rem;
border-radius: 999px;
}
.is-vorn .dsys__zeile { animation: dlauf 12s cubic-bezier(0.2, 0.9, 0.3, 1) infinite; }
.is-vorn .dsys__zeile:nth-child(2) { animation-delay: 0.7s; }
.is-vorn .dsys__zeile:nth-child(3) { animation-delay: 1.4s; }
@keyframes dlauf {
0%, 34% { opacity: 0; transform: translateX(-12px); }
44%, 92% { opacity: 1; transform: none; }
100% { opacity: 0; transform: translateX(-12px); }
}
.dsys__takt {
display: flex;
align-items: center;
gap: 3px;
margin-top: 0.2rem;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0;
}
.dsys__takt i {
width: 4px; height: 12px;
border-radius: 2px;
background: rgba(47, 163, 186, 0.25);
}
.is-vorn .dsys__takt { animation: dtaktan 12s ease-out infinite; }
@keyframes dtaktan {
0%, 58% { opacity: 0; }
66%, 92% { opacity: 1; }
100% { opacity: 0; }
}
.is-vorn .dsys__takt i { animation: dtakt 1.6s ease-in-out infinite; }
.is-vorn .dsys__takt i:nth-child(2) { animation-delay: 0.1s; }
.is-vorn .dsys__takt i:nth-child(3) { animation-delay: 0.2s; }
.is-vorn .dsys__takt i:nth-child(4) { animation-delay: 0.3s; }
.is-vorn .dsys__takt i:nth-child(5) { animation-delay: 0.4s; }
.is-vorn .dsys__takt i:nth-child(6) { animation-delay: 0.5s; }
.is-vorn .dsys__takt i:nth-child(7) { animation-delay: 0.6s; }
.is-vorn .dsys__takt i:nth-child(8) { animation-delay: 0.7s; }
@keyframes dtakt {
0%, 100% { background: rgba(47, 163, 186, 0.22); transform: scaleY(0.6); }
50% { background: var(--teal); transform: scaleY(1); }
}
.dsz--3 { position: relative; }
.is-vorn .dsz--3 { animation: dverlauf 13s linear infinite; }
@keyframes dverlauf {
0%, 90% { opacity: 1; }
97%, 99.9% { opacity: 0; }
100% { opacity: 1; }
}
.dchatlauf { display: grid; gap: 0.42rem; align-content: start; }
.dchat {
display: block;
padding: 0.45rem 0.75rem;
border-radius: 12px;
font-size: 0.78rem;
line-height: 1.45;
opacity: 0;
}
.dchat--frage {
justify-self: start;
background: rgba(12, 22, 38, 0.05);
color: var(--ink-2);
border-bottom-left-radius: 4px;
transform-origin: 0 100%;
}
.dchat--frage > span { display: inline-block; }
.dchat--antwort {
justify-self: end;
max-width: 88%;
background: linear-gradient(125deg, var(--blue), #2f7f9e);
color: #fff;
border-bottom-right-radius: 4px;
box-shadow: 0 10px 22px -16px rgba(47, 77, 158, 0.9);
transform-origin: 100% 100%;
}
.dchat__text, .dchat__text2 { display: inline-block; }
.dpaar { display: grid; }
.dpaar > * { grid-area: 1 / 1; }
.dpaar .dtippt { align-self: center; }
.is-vorn .dchat--f1 { animation: dblase1 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--1 { animation: dtippt1 13s linear infinite; }
.is-vorn .dchat--a1 { animation: dblase2 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dquellen { animation: dquellen 13s ease-out infinite; }
.is-vorn .dchat--f2 { animation: dblase3 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
.is-vorn .dtippt--2 { animation: dtippt2 13s linear infinite; }
.is-vorn .dchat--a2 { animation: dblase4 13s cubic-bezier(0.34, 1.4, 0.5, 1) infinite; }
@keyframes dblase1 {
0%, 4% { opacity: 0; transform: translateY(8px) scale(0.82); }
6.5% { opacity: 1; transform: translateY(0) scale(1.05); }
9%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt1 {
0%, 9% { opacity: 0; }
11%, 17% { opacity: 1; }
19%, 100% { opacity: 0; }
}
@keyframes dblase2 {
0%, 21% { opacity: 0; transform: translateY(8px) scale(0.82); }
23.5% { opacity: 1; transform: translateY(0) scale(1.05); }
26%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dquellen {
0%, 28% { opacity: 0; transform: translateY(4px); }
32%, 99.9% { opacity: 0.92; transform: none; }
100% { opacity: 0; }
}
@keyframes dblase3 {
0%, 46% { opacity: 0; transform: translateY(8px) scale(0.82); }
48.5% { opacity: 1; transform: translateY(0) scale(1.05); }
51%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
@keyframes dtippt2 {
0%, 55% { opacity: 0; }
57%, 62% { opacity: 1; }
64%, 100% { opacity: 0; }
}
@keyframes dblase4 {
0%, 66% { opacity: 0; transform: translateY(8px) scale(0.82); }
68.5% { opacity: 1; transform: translateY(0) scale(1.05); }
71%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; transform: scale(0.82); }
}
.dquellen {
display: flex;
align-items: center;
gap: 0.28rem;
margin-top: 4px;
font-size: 0.63rem;
opacity: 0;
}
.dquellen i {
display: grid; place-items: center;
width: 14px; height: 14px;
border-radius: 4px;
background: rgba(255, 255, 255, 0.22);
font-style: normal;
font-size: 0.55rem;
font-weight: 700;
}
.dtippt {
display: flex; gap: 4px;
justify-self: end;
padding: 0.22rem 0.5rem;
border-radius: 999px;
background: rgba(12, 22, 38, 0.05);
opacity: 0;
}
.dtippt i { width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.3); }
.is-vorn .dtippt i { animation: dtippt 1.1s ease-in-out infinite; }
.is-vorn .dtippt i:nth-child(2) { animation-delay: 0.15s; }
.is-vorn .dtippt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dtippt {
0%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-4px); opacity: 1; }
}
.dsicher { display: grid; gap: 0.3rem; margin-top: 0.3rem; }
.dsicher__zeile {
display: flex;
align-items: center;
gap: 0.45rem;
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dsicher__zeile { animation: dsicher1 13s ease-out infinite; }
.is-vorn .dsicher__zeile:nth-child(2) { animation-name: dsicher2; }
.is-vorn .dsicher__zeile:nth-child(3) { animation-name: dsicher3; }
@keyframes dsicher1 {
0%, 78% { opacity: 0; transform: translateY(6px); }
83%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
@keyframes dsicher2 {
0%, 81% { opacity: 0; transform: translateY(6px); }
86%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
@keyframes dsicher3 {
0%, 84% { opacity: 0; transform: translateY(6px); }
89%, 99.9% { opacity: 1; transform: none; }
100% { opacity: 0; }
}
.dsicher__zeile i {
flex: 0 0 8px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ok);
box-shadow: 0 0 0 3px rgba(46, 201, 139, 0.16);
}
.dmess { grid-column: 1; display: grid; gap: 0.6rem; }
.dmess__zeile { display: grid; grid-template-columns: 3.6rem 1fr 3rem; align-items: center; gap: 0.55rem; }
.dmess__zeile em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
}
.dbahn { display: block; height: 10px; border-radius: 6px; background: rgba(12, 22, 38, 0.07); overflow: hidden; }
.dbahn i { display: block; height: 100%; border-radius: 6px; width: 0; }
.is-vorn .dalt { background: #d98b4a; animation: dbalken 12s cubic-bezier(0.3, 0, 0.4, 1) infinite; --breit: 92%; }
.is-vorn .dneu { background: linear-gradient(90deg, var(--blue), var(--teal)); animation: dbalken 12s cubic-bezier(0.1, 0.8, 0.3, 1) infinite 2.6s; --breit: 22%; }
@keyframes dbalken {
0%, 4% { width: 0; }
22%, 88% { width: var(--breit); }
100% { width: 0; }
}
.dmess__zeile b { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; text-align: right; opacity: 0; }
.is-vorn .dmess__zeile b { animation: dwertan 12s ease-out infinite 2s; }
.is-vorn .dmess__zeile:nth-child(2) b { animation-delay: 4.4s; }
@keyframes dwertan {
0% { opacity: 0; transform: translateX(-4px); }
4%, 76% { opacity: 1; transform: none; }
84%, 100% { opacity: 0; }
}
.ist-alt { color: #b0702f; }
.ist-neu { color: var(--teal-ink); }
.dpruef { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem 0.6rem; }
.dpruef__zeile {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.72rem;
color: var(--ink-2);
opacity: 0;
}
.dpruef__zeile i {
flex: 0 0 14px;
width: 14px; height: 14px;
border-radius: 50%;
border: 1.5px solid rgba(12, 22, 38, 0.18);
position: relative;
}
.dpruef__zeile i::after {
content: "";
position: absolute;
left: 3px; top: 1px;
width: 4px; height: 7px;
border: solid #fff;
border-width: 0 1.5px 1.5px 0;
transform: rotate(45deg) scale(0);
}
.is-vorn .dpruef__zeile { animation: dpruefan 12s ease-out infinite 3.4s; }
.is-vorn .dpruef__zeile:nth-child(2) { animation-delay: 3.9s; }
.is-vorn .dpruef__zeile:nth-child(3) { animation-delay: 4.4s; }
.is-vorn .dpruef__zeile:nth-child(4) { animation-delay: 4.9s; }
@keyframes dpruefan {
0% { opacity: 0; transform: translateY(5px); }
4%, 68% { opacity: 1; transform: none; }
76%, 100% { opacity: 0; }
}
.is-vorn .dpruef__zeile i { animation: dhakenan 12s ease-out infinite 3.7s; }
.is-vorn .dpruef__zeile:nth-child(2) i { animation-delay: 4.2s; }
.is-vorn .dpruef__zeile:nth-child(3) i { animation-delay: 4.7s; }
.is-vorn .dpruef__zeile:nth-child(4) i { animation-delay: 5.2s; }
@keyframes dhakenan {
0% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
3%, 66% { background: var(--ok); border-color: var(--ok); }
74%, 100% { background: transparent; border-color: rgba(12, 22, 38, 0.18); }
}
.is-vorn .dpruef__zeile i::after { animation: dhaken 12s cubic-bezier(0.2, 1.4, 0.4, 1) infinite 3.75s; }
.is-vorn .dpruef__zeile:nth-child(2) i::after { animation-delay: 4.25s; }
.is-vorn .dpruef__zeile:nth-child(3) i::after { animation-delay: 4.75s; }
.is-vorn .dpruef__zeile:nth-child(4) i::after { animation-delay: 5.25s; }
@keyframes dhaken {
0% { transform: rotate(45deg) scale(0); }
3%, 66% { transform: rotate(45deg) scale(1); }
74%, 100% { transform: rotate(45deg) scale(0); }
}
.dring { grid-column: 2; grid-row: 1 / 3; position: relative; justify-self: center; align-self: center; width: clamp(6rem, 11vw, 8rem); }
.dring svg { width: 100%; display: block; transform: rotate(-90deg); }
.dring__bahn { fill: none; stroke: rgba(12, 22, 38, 0.08); stroke-width: 9; }
.dring__wert {
fill: none;
stroke: var(--teal);
stroke-width: 9;
stroke-linecap: round;
stroke-dasharray: 302;
stroke-dashoffset: 302;
}
.is-vorn .dring__wert { animation: dring 12s cubic-bezier(0.2, 0.8, 0.3, 1) infinite 1.2s; }
@keyframes dring {
0% { stroke-dashoffset: 302; }
32%, 78% { stroke-dashoffset: 54; }
90%, 100% { stroke-dashoffset: 302; }
}
.dring__zahl {
position: absolute;
inset: 0;
display: grid;
place-content: center;
text-align: center;
}
.dring__zahl b { font-size: 1.6rem; font-weight: 750; color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums; }
.dring__zahl i {
display: block;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.55rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ink-2);
margin-top: 2px;
}
.dhaken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.dhaken span {
display: flex;
align-items: center;
gap: 0.35rem;
font-size: 0.74rem;
color: var(--ink-2);
opacity: 0;
}
.is-vorn .dhaken span { animation: dpruefan 12s ease-out infinite 6.2s; }
.is-vorn .dhaken span:nth-child(2) { animation-delay: 6.6s; }
.is-vorn .dhaken span:nth-child(3) { animation-delay: 7s; }
.dhaken i {
display: grid; place-items: center;
width: 19px; height: 19px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.12);
color: #1a7f4e;
font-style: normal;
font-size: 0.66rem;
}
.demat__fort { margin-top: clamp(1.2rem, 3vh, 2.2rem); display: grid; gap: 0.7rem; }
.demat__bahn {
position: relative;
display: block;
height: 3px;
border-radius: 2px;
background: rgba(47, 77, 158, 0.12);
overflow: hidden;
}
.demat__bahn i {
position: absolute;
inset: 0 auto 0 0;
width: calc(var(--fort, 0) * 100%);
border-radius: 2px;
background: var(--grad);
}
.demat__bahn::after {
content: "";
position: absolute;
top: 50%;
left: calc(var(--fort, 0) * 100%);
width: 9px; height: 9px;
margin: -4.5px 0 0 -4.5px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 0 5px rgba(63, 214, 232, 0.22), 0 0 14px rgba(63, 214, 232, 0.6);
}
.demat__marken { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.demat__marken span {
display: grid;
gap: 2px;
font-size: 0.82rem;
font-weight: 500;
color: var(--ink-2);
opacity: 0.5;
transition: opacity 0.4s ease, color 0.4s ease;
}
.demat__marken span em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.62rem;
letter-spacing: 0.08em;
color: var(--ink-2);
}
.demat__marken span.ist-durch { opacity: 0.75; }
.demat__marken span.is-vorn { opacity: 1; color: var(--ink); font-weight: 650; }
.demat__marken span.is-vorn em { color: var(--teal-ink); }
@media (min-width: 901px) and (max-height: 800px) {
.demat__kopf { margin-bottom: 0.6rem; }
.demat__h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); }
.demat__unter { display: none; }
.demat__kicker { margin-bottom: 0.6rem; font-size: 0.74rem; }
.demat__lage { gap: clamp(1.4rem, 4vw, 3rem); margin-top: 0.4rem; }
.demat__text { gap: 0.5rem; }
.demat__text h3 { font-size: clamp(1.35rem, 2vw, 1.8rem); }
.demat__lead { font-size: 0.98rem; line-height: 1.5; }
.demat__text a { margin-top: 0.15rem; padding: 0.6rem 1.25rem; }
.demat__buehnen { min-height: clamp(15rem, 40vh, 20rem); }
.dfenster__inhalt { min-height: clamp(12rem, 32vh, 17rem); }
.demat__fort { margin-top: 0.9rem; }
}
@media (max-width: 900px) {
.demat__pin { padding-top: clamp(3.8rem, 8vh, 5rem); }
.demat__h2 { white-space: normal; text-wrap: balance; font-size: clamp(1.75rem, 7vw, 2.4rem); }
.demat__stage { height: 360vh; }
.demat__lage { grid-template-columns: 1fr; gap: 1.4rem; }
.demat__buehnen { order: -1; min-height: 15rem; }
.demat__text h3 { font-size: 1.5rem; }
.dfenster__inhalt { min-height: 12rem; }
}
@media (prefers-reduced-motion: reduce) {
.demat__stage { height: auto !important; }
.demat__pin { position: static; height: auto; padding: 3rem 0; }
.demat__texte, .demat__buehnen { display: grid; gap: 2.5rem; }
.demat__text, .dbild { grid-area: auto; opacity: 1; filter: none; }
.demat__text > *, .dbild > * { transform: none; }
.is-vorn * { animation: none !important; }
.dalt { width: 92%; } .dneu { width: 22%; }
.dchat--antwort, .dquellen, .dsicher__zeile, .dkalender__termin, .dhaken span { opacity: 1; }
.dchat__text { width: 100%; }
.dring__wert { stroke-dashoffset: 54; }
}
.cores-stack .mock { --takt: 1; }
.cores-stack .core:hover .mock { --takt: 0.55; }
.cores-stack .mock--browser { position: relative; overflow: hidden; }
.cores-stack .mock--browser .mock__pill {
animation: mockpuls calc(4.4s * var(--takt)) ease-in-out infinite;
}
@keyframes mockpuls {
0%, 62%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0); }
70% { box-shadow: 0 0 0 6px rgba(63, 214, 232, 0.22); }
86% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}
.cores-stack .mock--browser .mock__cols span {
animation: mockatem calc(5.2s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--browser .mock__cols span:nth-child(2) { animation-delay: 0.5s; }
.cores-stack .mock--browser .mock__cols span:nth-child(3) { animation-delay: 1s; }
@keyframes mockatem {
0%, 100% { opacity: 0.55; transform: translateY(0); }
50% { opacity: 1; transform: translateY(-3px); }
}
.cores-stack .mock--browser::after {
content: "";
position: absolute;
inset: 0 auto 0 -40%;
width: 40%;
background: linear-gradient(100deg, transparent, rgba(63, 214, 232, 0.16), transparent);
animation: mockstreif calc(6.5s * var(--takt)) ease-in-out infinite;
pointer-events: none;
}
@keyframes mockstreif {
0%, 55% { transform: translateX(0); opacity: 0; }
62% { opacity: 1; }
92%, 100% { transform: translateX(350%); opacity: 0; }
}
.cores-stack .mock--app .mock__side i {
animation: mockmenue calc(6s * var(--takt)) steps(1, end) infinite;
}
.cores-stack .mock--app .mock__side i:nth-child(2) { animation-delay: calc(1.5s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(3) { animation-delay: calc(3s * var(--takt)); }
.cores-stack .mock--app .mock__side i:nth-child(4) { animation-delay: calc(4.5s * var(--takt)); }
@keyframes mockmenue {
0%, 24% { opacity: 1; }
25%, 100% { opacity: 0.35; }
}
.cores-stack .mock--app .mock__rows i {
animation: mockzeile calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__rows i:nth-child(2) { animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(3) { animation-delay: calc(0.7s * var(--takt)); }
.cores-stack .mock--app .mock__rows i:nth-child(4) { animation-delay: calc(1.05s * var(--takt)); }
@keyframes mockzeile {
0%, 8% { opacity: 0.25; transform: translateX(-8px); }
22%, 80% { opacity: 1; transform: none; }
100% { opacity: 0.25; transform: translateX(-8px); }
}
.cores-stack .mock--app .mock__kpis span {
animation: mockkpi calc(5s * var(--takt)) ease-out infinite;
}
.cores-stack .mock--app .mock__kpis span:nth-child(2) { animation-delay: calc(0.2s * var(--takt)); }
.cores-stack .mock--app .mock__kpis span:nth-child(3) { animation-delay: calc(0.4s * var(--takt)); }
@keyframes mockkpi {
0%, 6% { opacity: 0.4; transform: translateY(6px); }
20%, 86% { opacity: 1; transform: none; }
100% { opacity: 0.4; transform: translateY(6px); }
}
.cores-stack .mock--chat .dot--ok {
animation: mockdot calc(2.6s * var(--takt)) ease-in-out infinite;
}
@keyframes mockdot {
0%, 100% { box-shadow: 0 0 0 0 rgba(46, 201, 139, 0.5); }
60%, 100% { box-shadow: 0 0 0 7px rgba(46, 201, 139, 0); }
}
.cores-stack .mock--chat .mock__msg--user,
.cores-stack .mock--chat .mock__msg--ai,
.cores-stack .mock--chat .mock__tippt { opacity: 0; }
html.js .core.in .mock--chat .mock__msg--user {
transform-origin: 100% 100%;
animation: chatuser 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__tippt {
animation: chattippt 11s linear infinite;
}
html.js .core.in .mock--chat .mock__msg--ai {
transform-origin: 0 100%;
animation: chatai 11s cubic-bezier(0.34, 1.4, 0.5, 1) infinite;
}
html.js .core.in .mock--chat .mock__input span {
animation: chatschreib 11s steps(1, end) infinite;
}
html:not(.js) .cores-stack .mock--chat .mock__msg--user,
html:not(.js) .cores-stack .mock--chat .mock__msg--ai { opacity: 1; }
@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; }
}
.cores-stack .mock--index .mock__idx {
animation: mockidx calc(6.4s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--index .mock__idx:nth-child(2) { animation-delay: calc(1.6s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(3) { animation-delay: calc(3.2s * var(--takt)); }
.cores-stack .mock--index .mock__idx:nth-child(4) { animation-delay: calc(4.8s * var(--takt)); }
@keyframes mockidx {
0%, 12%, 40%, 100% { opacity: 0.55; transform: translateX(0); }
20%, 32% { opacity: 1; transform: translateX(6px); }
}
@media (prefers-reduced-motion: reduce) {
.cores-stack .mock *,
.cores-stack .mock::after,
.cores-stack .core::after { animation: none !important; }
}
.cores-stack .mock--browser .mock__pill { position: relative; }
.mock__zeiger {
position: absolute;
left: 50%; top: 50%;
width: 14px; height: 14px;
margin: -7px 0 0 -7px;
border-radius: 50%;
border: 2px solid #fff;
background: rgba(255, 255, 255, 0.35);
opacity: 0;
pointer-events: none;
}
.cores-stack .mock--browser .mock__zeiger {
animation: mockzeiger calc(6.4s * var(--takt)) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes mockzeiger {
0%, 26% { transform: translate(34px, 26px) scale(0.85); opacity: 0; }
30% { opacity: 1; }
40% { transform: translate(0, 0) scale(1); opacity: 1; }
44% { transform: translate(0, 0) scale(0.6); }
48% { transform: translate(0, 0) scale(1); }
56%, 100% { transform: translate(0, 0) scale(1); opacity: 0; }
}
.mock__quittung {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.5rem;
padding: 0.26rem 0.6rem;
border-radius: 99px;
background: rgba(46, 201, 139, 0.12);
border: 1px solid rgba(46, 201, 139, 0.3);
font-size: 0.68rem;
font-weight: 600;
color: #1a7f4e;
opacity: 0;
}
.mock__quittung i { font-style: normal; }
.cores-stack .mock--browser .mock__quittung {
animation: mockquitt calc(6.4s * var(--takt)) ease-out infinite;
}
@keyframes mockquitt {
0%, 50% { opacity: 0; transform: translateY(6px); }
58%, 88% { opacity: 1; transform: none; }
96%, 100% { opacity: 0; transform: translateY(-3px); }
}
.mock__balken {
display: flex;
align-items: flex-end;
gap: 5px;
height: 42px;
margin-top: 0.7rem;
}
.mock__balken i {
flex: 1;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, #3fd6e8, #2f4d9e);
height: 20%;
}
.cores-stack .mock--app .mock__balken i {
animation: mockbalken calc(5.4s * var(--takt)) cubic-bezier(0.3, 0.9, 0.3, 1) infinite;
}
.cores-stack .mock--app .mock__balken i:nth-child(1) { --hoch: 45%; animation-delay: calc(0.05s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(2) { --hoch: 72%; animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(3) { --hoch: 38%; animation-delay: calc(0.25s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(4) { --hoch: 88%; animation-delay: calc(0.35s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(5) { --hoch: 60%; animation-delay: calc(0.45s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(6) { --hoch: 100%; animation-delay: calc(0.55s * var(--takt)); }
.cores-stack .mock--app .mock__balken i:nth-child(7) { --hoch: 52%; animation-delay: calc(0.65s * var(--takt)); }
@keyframes mockbalken {
0%, 6% { height: 12%; opacity: 0.45; }
30%, 82% { height: var(--hoch, 60%); opacity: 1; }
100% { height: 12%; opacity: 0.45; }
}
.mock__tippt {
display: inline-flex;
gap: 4px;
align-self: flex-start;
padding: 0.3rem 0.6rem;
margin: 0.2rem 0;
border-radius: 99px;
background: rgba(12, 22, 38, 0.06);
opacity: 0;
}
.mock__tippt i { width: 5px; height: 5px; border-radius: 50%; background: rgba(12, 22, 38, 0.35); }
.cores-stack .mock--chat .mock__tippt {
animation: mocktippt calc(7s * var(--takt)) linear infinite;
}
@keyframes mocktippt {
0%, 12% { opacity: 0; }
16%, 26% { opacity: 1; }
30%, 100% { opacity: 0; }
}
.cores-stack .mock--chat .mock__tippt i {
animation: mockhuepf calc(1.1s * var(--takt)) ease-in-out infinite;
}
.cores-stack .mock--chat .mock__tippt i:nth-child(2) { animation-delay: calc(0.15s * var(--takt)); }
.cores-stack .mock--chat .mock__tippt i:nth-child(3) { animation-delay: calc(0.3s * var(--takt)); }
@keyframes mockhuepf {
0%, 100% { transform: translateY(0); opacity: 0.4; }
40% { transform: translateY(-4px); opacity: 1; }
}
.cores-stack .mock--index { position: relative; }
.mock__marker {
position: absolute;
left: 0; right: 0;
height: 26%;
border-radius: 10px;
background: linear-gradient(90deg, rgba(63, 214, 232, 0.16), rgba(47, 77, 158, 0.08));
border-left: 2px solid var(--teal);
pointer-events: none;
}
.cores-stack .mock--index .mock__marker {
animation: mockmarker calc(6.4s * var(--takt)) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}
@keyframes mockmarker {
0%, 14% { top: 0; }
25%, 39% { top: 25%; }
50%, 64% { top: 50%; }
75%, 89% { top: 74%; }
100% { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
.mock__zeiger, .mock__quittung, .mock__tippt, .mock__marker { display: none; }
.mock__balken i { height: var(--hoch, 60%); }
}
.cores-stack .core--alle .core__copy .ticks {
display: grid;
gap: 0;
margin-top: 1.2rem;
border-top: 1px solid rgba(12, 22, 38, 0.09);
}
.cores-stack .core--alle .core__copy .ticks li {
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.7rem;
padding: 0.62rem 0.2rem;
border: 0;
border-bottom: 1px solid rgba(12, 22, 38, 0.09);
border-radius: 0;
background: none;
box-shadow: none;
font-size: 0.94rem;
color: var(--ink-2);
transform: none;
transition: color 0.25s ease, padding-left 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li::before {
width: 7px;
height: 7px;
flex: none;
background: var(--akz-a);
opacity: 0.55;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.cores-stack .core--alle .core__copy .ticks li:hover {
color: var(--ink);
padding-left: 0.5rem;
background: none;
border-color: rgba(12, 22, 38, 0.09);
transform: none;
}
.cores-stack .core--alle .core__copy .ticks li:hover::before {
opacity: 1;
transform: scale(1.35);
}
.cores-stack .core--alle:hover .core__copy .ticks li {
border-color: rgba(12, 22, 38, 0.09);
box-shadow: none;
}
html.js [data-fliegt] {
opacity: 0;
transition:
opacity 0.9s cubic-bezier(0.16, 0.84, 0.28, 1),
translate 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
scale 1.25s cubic-bezier(0.16, 0.84, 0.28, 1),
filter 0.9s ease;
filter: blur(6px);
scale: 0.94;
}
html.js [data-fliegt="links"] { translate: -230px 0; }
html.js [data-fliegt="rechts"] { translate: 260px 0; }
html.js [data-fliegt].ist-da {
opacity: 1;
translate: 0 0;
scale: 1;
filter: blur(0);
}
html.js [data-fliegt="links"] > * {
opacity: 0;
translate: -60px 0;
transition:
opacity 0.7s ease var(--fd, 0s),
translate 0.8s cubic-bezier(0.18, 0.86, 0.28, 1) var(--fd, 0s),
transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
border-color 0.5s ease,
background-color 0.5s ease;
}
html.js [data-fliegt="links"].ist-da > * { opacity: 1; translate: 0 0; }
html.js [data-fliegt="links"] > *:nth-child(1) { --fd: 0.14s; }
html.js [data-fliegt="links"] > *:nth-child(2) { --fd: 0.26s; }
html.js [data-fliegt="links"] > *:nth-child(3) { --fd: 0.38s; }
html.js [data-fliegt="links"] > *:nth-child(4) { --fd: 0.5s; }
html.js [data-fliegt="links"] > *:nth-child(5) { --fd: 0.62s; }
html.js [data-fliegt="rechts"] .dmock {
transform: perspective(1100px) rotateY(22deg) rotateX(4deg) scale(0.9);
transform-origin: 100% 50%;
transition: transform 1.25s cubic-bezier(0.16, 0.84, 0.28, 1);
}
html.js [data-fliegt="rechts"].ist-da .dmock {
transform: perspective(1100px) rotateY(0deg) rotateX(0deg) scale(1);
}
@media (prefers-reduced-motion: reduce) {
html.js [data-fliegt],
html.js [data-fliegt] > * {
opacity: 1; translate: none; scale: none; filter: none; transition: none;
}
html.js [data-fliegt="rechts"] .dmock { transform: none; }
}
html.js [data-fliegt="auf"] {
opacity: 0;
translate: 0 0;
scale: 1;
filter: none;
perspective: 1600px;
transition: opacity 0.7s ease;
}
html.js [data-fliegt="auf"].ist-da { opacity: 1; }
html.js [data-fliegt="auf"] .pslide__visual {
transform: rotateX(74deg) scale(0.86);
transform-origin: 50% 100%;
opacity: 0;
transition:
transform 1.15s cubic-bezier(0.16, 0.86, 0.26, 1),
opacity 0.6s ease;
}
html.js [data-fliegt="auf"].ist-da .pslide__visual {
transform: rotateX(0deg) scale(1);
opacity: 1;
}
html.js [data-fliegt="auf"] .pv3-stage,
html.js [data-fliegt="auf"] .pv3-phone { animation-play-state: paused; }
html.js [data-fliegt="auf"].ist-da .pv3-stage,
html.js [data-fliegt="auf"].ist-da .pv3-phone { animation-play-state: running; }
html.js [data-fliegt="auf"] .pv3-phone {
translate: 70px 20px;
opacity: 0;
transition:
translate 0.9s cubic-bezier(0.16, 0.86, 0.26, 1) 0.45s,
opacity 0.6s ease 0.45s;
}
html.js [data-fliegt="auf"].ist-da .pv3-phone { translate: 0 0; opacity: 1; }
html.js [data-fliegt="auf"] .pslide__body > * {
opacity: 0;
translate: 0 22px;
transition:
opacity 0.6s ease var(--pd, 0s),
translate 0.7s cubic-bezier(0.18, 0.86, 0.28, 1) var(--pd, 0s);
}
html.js [data-fliegt="auf"].ist-da .pslide__body > * { opacity: 1; translate: 0 0; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(1) { --pd: 0.5s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(2) { --pd: 0.58s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(3) { --pd: 0.66s; }
html.js [data-fliegt="auf"] .pslide__body > *:nth-child(4) { --pd: 0.74s; }
@media (prefers-reduced-motion: reduce) {
html.js [data-fliegt="auf"],
html.js [data-fliegt="auf"] .pslide__visual,
html.js [data-fliegt="auf"] .pv3-phone,
html.js [data-fliegt="auf"] .pslide__body > * {
opacity: 1; transform: none; translate: none; transition: none;
}
}
.steps--flow .step {
display: grid;
gap: 0.55rem;
align-content: start;
}
.step__bild {
position: relative;
display: block;
height: 62px;
margin: 0.2rem 0 0.35rem;
border-radius: 10px;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.07), rgba(63, 214, 232, 0.06));
border: 1px solid rgba(12, 22, 38, 0.06);
overflow: hidden;
}
.step__bild i { position: absolute; display: block; }
.step__bild--verstehen i {
height: 11%;
border-radius: 3px;
background: rgba(47, 77, 158, 0.3);
left: 8%;
}
.step__bild--verstehen i:nth-child(1) { top: 22%; width: 46%; }
.step__bild--verstehen i:nth-child(2) { top: 44%; width: 32%; }
.step__bild--verstehen i:nth-child(3) { top: 66%; width: 40%; }
.step__bild--verstehen i:nth-child(4) {
top: 24%; right: 9%; left: auto;
width: 22%; height: 52%;
border-radius: 7px;
background: linear-gradient(140deg, var(--blue), var(--teal));
opacity: 0.85;
}
.step.is-on .step__bild--verstehen i:nth-child(4) { animation: stpLupe 2.8s ease-in-out infinite; }
@keyframes stpLupe {
0%, 100% { transform: scale(1); opacity: 0.7; }
50% { transform: scale(1.08); opacity: 1; }
}
.step.is-on .step__bild--verstehen i:nth-child(1) { animation: stpZeile 2.6s ease-in-out infinite; }
.step.is-on .step__bild--verstehen i:nth-child(2) { animation: stpZeile 2.6s ease-in-out infinite 0.2s; }
.step.is-on .step__bild--verstehen i:nth-child(3) { animation: stpZeile 2.6s ease-in-out infinite 0.4s; }
@keyframes stpZeile {
0%, 100% { transform: translateX(0); opacity: 0.55; }
50% { transform: translateX(5px); opacity: 1; }
}
.step__bild--konzept i {
border-radius: 5px;
background: rgba(47, 77, 158, 0.22);
border: 1px solid rgba(47, 77, 158, 0.28);
}
.step__bild--konzept i:nth-child(1) { left: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(2) { left: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(3) { right: 9%; top: 20%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(4) { right: 9%; top: 56%; width: 28%; height: 26%; }
.step__bild--konzept i:nth-child(5) {
left: 50%; top: 50%;
width: 13px; height: 13px;
margin: -6.5px 0 0 -6.5px;
border-radius: 50%;
background: var(--teal);
border: 0;
}
.step.is-on .step__bild--konzept i:nth-child(1) { animation: stpZuMitteR 3s ease-in-out infinite; }
.step.is-on .step__bild--konzept i:nth-child(2) { animation: stpZuMitteR 3s ease-in-out infinite 0.3s; }
.step.is-on .step__bild--konzept i:nth-child(3) { animation: stpZuMitteL 3s ease-in-out infinite 0.15s; }
.step.is-on .step__bild--konzept i:nth-child(4) { animation: stpZuMitteL 3s ease-in-out infinite 0.45s; }
.step.is-on .step__bild--konzept i:nth-child(5) { animation: stpPuls 2.4s ease-in-out infinite; }
@keyframes stpZuMitteR {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(14%); opacity: 1; }
}
@keyframes stpZuMitteL {
0%, 100% { transform: translateX(0); opacity: 0.7; }
50% { transform: translateX(-14%); opacity: 1; }
}
@keyframes stpPuls {
0%, 100% { box-shadow: 0 0 0 0 rgba(63, 214, 232, 0.55); }
70%, 100% { box-shadow: 0 0 0 12px rgba(63, 214, 232, 0); }
}
.step__bild--bauen i {
left: 8%;
height: 13%;
border-radius: 4px;
background: rgba(12, 22, 38, 0.08);
width: 84%;
}
.step__bild--bauen i:nth-child(1) { top: 20%; }
.step__bild--bauen i:nth-child(2) { top: 44%; }
.step__bild--bauen i:nth-child(3) { top: 68%; }
.step__bild--bauen i::after {
content: "";
position: absolute;
inset: 0 auto 0 0;
border-radius: 4px;
background: linear-gradient(90deg, var(--blue), var(--teal));
width: var(--w, 40%);
}
.step__bild--bauen i:nth-child(1)::after { --w: 92%; }
.step__bild--bauen i:nth-child(2)::after { --w: 64%; }
.step__bild--bauen i:nth-child(3)::after { --w: 35%; }
.step.is-on .step__bild--bauen i::after { animation: stpFuell 3s cubic-bezier(0.3, 0.9, 0.3, 1) infinite; }
.step.is-on .step__bild--bauen i:nth-child(2)::after { animation-delay: 0.25s; }
.step.is-on .step__bild--bauen i:nth-child(3)::after { animation-delay: 0.5s; }
@keyframes stpFuell {
0%, 6% { width: 6%; }
45%, 88% { width: var(--w, 40%); }
100% { width: 6%; }
}
.step__bild--betrieb i:nth-child(1) {
left: 8%; right: 8%; top: 50%;
height: 2px;
margin-top: -1px;
background: repeating-linear-gradient(90deg,
rgba(46, 201, 139, 0.5) 0 8px, transparent 8px 16px);
background-size: 16px 2px;
}
.step__bild--betrieb i:nth-child(2) {
left: 8%; top: 22%;
width: 26%; height: 20%;
border-radius: 5px;
background: rgba(46, 201, 139, 0.25);
}
.step__bild--betrieb i:nth-child(3) {
right: 8%; bottom: 22%;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--ok);
}
.step.is-on .step__bild--betrieb i:nth-child(1) { animation: stpTakt 2.4s linear infinite; }
.step.is-on .step__bild--betrieb i:nth-child(2) { animation: stpLupe 2.8s ease-in-out infinite; }
.step.is-on .step__bild--betrieb i:nth-child(3) { animation: stpPuls 2.2s ease-in-out infinite; }
@keyframes stpTakt {
from { background-position: 0 0; }
to { background-position: 16px 0; }
}
.step__liste { display: grid; gap: 0.28rem; margin-top: 0.1rem; }
.step__liste em {
position: relative;
padding-left: 0.95rem;
font-style: normal;
font-size: 0.86rem;
color: var(--ink-2);
}
.step__liste em::before {
content: "";
position: absolute;
left: 0; top: 0.52em;
width: 5px; height: 5px;
border-radius: 50%;
background: var(--teal);
opacity: 0.7;
}
.step__meta {
display: grid;
gap: 0.1rem;
margin-top: 0.45rem;
padding-top: 0.6rem;
border-top: 1px solid rgba(12, 22, 38, 0.08);
font-size: 0.82rem;
color: var(--ink-2);
}
.step__meta b {
font-family: var(--font-mono);
font-size: 0.62rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--teal-ink);
}
.step__erg { font-size: 0.78rem; opacity: 0.75; }
.prozess__fuss {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: clamp(1rem, 3vw, 2.5rem);
align-items: center;
margin-top: clamp(1.4rem, 3vh, 2.4rem);
padding: clamp(1rem, 2.4vw, 1.6rem) clamp(1.2rem, 2.6vw, 2rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(12, 22, 38, 0.07);
backdrop-filter: blur(6px);
}
.prozess__fussText { margin: 0; color: var(--ink-2); font-size: 0.97rem; line-height: 1.6; max-width: 44rem; }
.prozess__fussText b { color: var(--ink); }
.prozess__fussCta { display: grid; justify-items: center; gap: 0.4rem; }
.prozess__fussNote { font-size: 0.74rem; color: var(--ink-2); opacity: 0.8; }
@media (max-width: 900px) {
.prozess__fuss { grid-template-columns: 1fr; text-align: left; }
.prozess__fussCta { justify-items: start; }
.step__bild { height: 54px; }
}
@media (min-width: 901px) {
.steps--flow { align-items: stretch; }
.steps--flow .step {
gap: 0.5rem;
padding-bottom: 1.5rem;
grid-template-rows: auto auto auto 1fr auto;
}
.step__bild { height: 82px; margin: 0.3rem 0 0.5rem; }
.step__liste { align-content: start; }
.step__liste em { font-size: 0.84rem; }
.step__meta { margin-top: 0.5rem; padding-top: 0.6rem; font-size: 0.8rem; }
}
@media (min-width: 901px) and (max-height: 900px) {
.step__bild { height: 68px; }
.steps--flow .step { padding-bottom: 1.4rem; }
.step__liste em:nth-child(3) { display: none; }
}
@media (min-width: 901px) and (max-height: 820px) {
.step__bild { display: none; }
.step__liste { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.step__bild i, .step__bild i::after { animation: none !important; }
}
@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; }
.goals.sp-2 .goal__bild { grid-column: 1 / -1; grid-row: auto; }
}
.section--dark .goals.sp-2 .goal > .goal__num {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(255, 255, 255, 0.14);
color: var(--dark-text);
}
.betriebLage {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(1.6rem, 4vw, 3.4rem);
align-items: stretch;
}
.betriebLage .lage,
.betriebLage .lage__karte { height: 100%; }
.lage__karte { align-content: space-between; }
.betriebLage .ops { grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.6vw, 1.1rem); }
.betriebLage .op {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 0.15rem 0.85rem;
align-items: start;
padding: clamp(0.9rem, 1.6vw, 1.2rem);
transition:
transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1),
border-color 0.5s ease,
background-color 0.5s ease,
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
.betriebLage .op:hover {
border-color: rgba(63, 214, 232, 0.4);
background: rgba(255, 255, 255, 0.05);
transform: translateY(-4px);
box-shadow: 0 24px 50px -32px rgba(0, 0, 0, 0.9);
}
}
.betriebLage .op h3 { grid-column: 2; font-size: 1rem; line-height: 1.3; margin: 0; }
.betriebLage .op p { grid-column: 2; font-size: 0.88rem; line-height: 1.55; margin: 0; }
.op__icon {
grid-row: 1 / 3;
position: relative;
display: block;
width: 36px; height: 36px;
border-radius: 10px;
background: rgba(63, 214, 232, 0.1);
border: 1px solid rgba(63, 214, 232, 0.22);
}
.op__icon i { position: absolute; display: block; background: #7fd0e0; }
.op__icon i:nth-child(1) { left: 11px; top: 9px; width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.op__icon i:nth-child(2) { left: 9px; bottom: 9px; width: 16px; height: 2px; border-radius: 1px; opacity: 0.5; }
.op__icon--cloud i:nth-child(1) { left: 8px; top: 10px; width: 18px; height: 6px; border-radius: 3px; transform: none; }
.op__icon--cloud i:nth-child(2) { left: 12px; top: 20px; width: 14px; height: 6px; border-radius: 3px; opacity: 0.55; }
.op__icon--rollen i { border-radius: 2px; height: 4px; transform: none; }
.op__icon--rollen i:nth-child(1) { left: 9px; top: 10px; width: 18px; }
.op__icon--rollen i:nth-child(2) { left: 9px; top: 17px; width: 12px; opacity: 0.7; }
.op__icon--rollen i:nth-child(3) { left: 9px; top: 24px; width: 7px; opacity: 0.45; }
.op__icon--backup i:nth-child(1) {
left: 8px; top: 8px; width: 20px; height: 20px;
border-radius: 50%; background: none;
border: 2px solid #7fd0e0; transform: none;
}
.op__icon--backup i:nth-child(2) { left: 16px; top: 16px; width: 4px; height: 4px; border-radius: 50%; transform: none; }
.op__icon--update i:nth-child(1) { left: 17px; top: 9px; width: 2px; height: 18px; border-radius: 1px; transform: none; }
.op__icon--update i:nth-child(2) {
left: 12px; top: 12px;
width: 12px; height: 12px;
background: none;
border: solid #7fd0e0;
border-width: 2px 0 0 2px;
border-radius: 2px 0 0 0;
transform: rotate(45deg);
transform-origin: 50% 50%;
}
.op__icon--support i:nth-child(1) { left: 8px; top: 9px; width: 20px; height: 14px; border-radius: 4px; transform: none; }
.op__icon--support i:nth-child(2) { left: 12px; top: 22px; width: 6px; height: 5px; border-radius: 0 0 3px 3px; transform: none; opacity: 0.7; }
.op__icon {
transition:
background-color 0.5s ease,
border-color 0.5s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.betriebLage .op:hover .op__icon {
background: rgba(63, 214, 232, 0.18);
border-color: rgba(63, 214, 232, 0.45);
transform: rotate(-6deg) scale(1.07);
}
.lage { position: relative; }
.lage__karte {
border-radius: calc(var(--radius) + 4px);
background: linear-gradient(165deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
border: 1px solid rgba(255, 255, 255, 0.12);
box-shadow: 0 40px 80px -50px rgba(0, 0, 0, 0.8);
padding: clamp(1.1rem, 2.2vw, 1.6rem);
display: grid;
gap: clamp(0.9rem, 2vw, 1.3rem);
}
.lage__kopf { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; }
.lage__titel {
display: flex; align-items: center; gap: 0.55rem;
font-weight: 650; color: #fff; font-size: 1.02rem;
}
.lage__ort {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.08em;
color: var(--dark-text);
background: rgba(255, 255, 255, 0.07);
border: 1px solid rgba(255, 255, 255, 0.12);
padding: 0.2rem 0.55rem;
border-radius: 99px;
}
.lage__puls {
flex: 0 0 9px;
width: 9px; height: 9px;
border-radius: 50%;
background: var(--ok);
animation: lagePuls 2.4s ease-in-out infinite;
}
.lage__puls--klein { width: 7px; height: 7px; flex-basis: 7px; }
@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); }
}
.lage__werte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
.lage__wert {
display: grid;
gap: 2px;
padding: 0.6rem 0.65rem;
border-radius: 11px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.lage__wert b { font-size: 1.18rem; font-weight: 720; color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1; }
.lage__wert em {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--dark-text);
}
.lage__label {
display: block;
font-family: var(--font-mono);
font-size: 0.6rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--dark-text);
opacity: 0.75;
margin-bottom: 0.45rem;
}
.lage__balken { display: flex; gap: 3px; height: 34px; align-items: flex-end; }
.lage__balken i {
flex: 1;
border-radius: 2px;
background: linear-gradient(180deg, #3fd6e8, #2ec98b);
height: 40%;
opacity: 0.85;
}
.lage.ist-da .lage__balken i { animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both; }
.lage__balken i:nth-child(1) { --h: 96%; animation-delay: 0.0s; }
.lage__balken i:nth-child(2) { --h: 100%; animation-delay: 0.03s; }
.lage__balken i:nth-child(3) { --h: 92%; animation-delay: 0.06s; }
.lage__balken i:nth-child(4) { --h: 100%; animation-delay: 0.09s; }
.lage__balken i:nth-child(5) { --h: 98%; animation-delay: 0.12s; }
.lage__balken i:nth-child(6) { --h: 100%; animation-delay: 0.15s; }
.lage__balken i:nth-child(7) { --h: 100%; animation-delay: 0.18s; }
.lage__balken i:nth-child(8) { --h: 88%; animation-delay: 0.21s; }
.lage__balken i:nth-child(9) { --h: 100%; animation-delay: 0.24s; }
.lage__balken i:nth-child(10) { --h: 96%; animation-delay: 0.27s; }
.lage__balken i:nth-child(11) { --h: 100%; animation-delay: 0.3s; }
.lage__balken i:nth-child(12) { --h: 100%; animation-delay: 0.33s; }
.lage__balken i:nth-child(13) { --h: 94%; animation-delay: 0.36s; }
.lage__balken i:nth-child(14) { --h: 100%; animation-delay: 0.39s; }
.lage__balken i:nth-child(15) { --h: 90%; animation-delay: 0.42s; }
.lage__balken i:nth-child(16) { --h: 100%; animation-delay: 0.45s; }
.lage__balken i:nth-child(17) { --h: 100%; animation-delay: 0.48s; }
.lage__balken i:nth-child(18) { --h: 97%; animation-delay: 0.51s; }
.lage__balken i:nth-child(19) { --h: 100%; animation-delay: 0.54s; }
.lage__balken i:nth-child(20) { --h: 100%; animation-delay: 0.57s; }
.lage__balken i:nth-child(21) { --h: 93%; animation-delay: 0.6s; }
.lage__balken i:nth-child(22) { --h: 100%; animation-delay: 0.63s; }
.lage__balken i:nth-child(23) { --h: 100%; animation-delay: 0.66s; }
.lage__balken i:nth-child(24) { --h: 99%; animation-delay: 0.69s; }
.lage__balken i:nth-child(25) { --h: 100%; animation-delay: 0.72s; }
.lage__balken i:nth-child(26) { --h: 86%; animation-delay: 0.75s; }
.lage__balken i:nth-child(27) { --h: 100%; animation-delay: 0.78s; }
.lage__balken i:nth-child(28) { --h: 100%; animation-delay: 0.81s; }
.lage__balken i:nth-child(29) { --h: 95%; animation-delay: 0.84s; }
.lage__balken i:nth-child(30) { --h: 100%; animation-delay: 0.87s; }
@keyframes lageBalken {
from { height: 8%; opacity: 0.3; }
to { height: var(--h, 100%); opacity: 0.85; }
}
.lage__zeilen { display: grid; gap: 0.4rem; }
.lage__zeile {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.55rem;
font-size: 0.85rem;
color: var(--dark-text);
}
.lage__zeile i {
position: relative;
width: 15px; height: 15px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.18);
}
.lage__zeile i::after {
content: "";
position: absolute;
left: 5px; top: 3px;
width: 4px; height: 7px;
border: solid var(--ok);
border-width: 0 1.6px 1.6px 0;
transform: rotate(45deg);
}
.lage__zeile em { font-style: normal; font-size: 0.74rem; opacity: 0.7; }
.lage__fuss {
display: flex;
align-items: center;
gap: 0.5rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(255, 255, 255, 0.1);
font-size: 0.8rem;
color: var(--dark-text);
}
@media (max-width: 1100px) {
.betriebLage { grid-template-columns: 1fr; }
.betriebLage .ops { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
.betriebLage .ops { grid-template-columns: 1fr; }
.lage__werte { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.lage__puls, .lage__balken i { animation: none !important; }
}
.lage__balken { position: relative; overflow: hidden; border-radius: 3px; }
.lage__balken::after {
content: "";
position: absolute;
inset: 0 auto 0 -30%;
width: 30%;
background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.35), transparent);
animation: lageScan 5.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
pointer-events: none;
}
@keyframes lageScan {
0%, 8% { transform: translateX(0); opacity: 0; }
14% { opacity: 1; }
56% { transform: translateX(430%); opacity: 1; }
64%, 100% { transform: translateX(430%); opacity: 0; }
}
.lage.ist-da .lage__balken i { animation: lageBalken 2.6s cubic-bezier(0.3, 0.9, 0.3, 1) both, lageAtem 4.5s ease-in-out infinite; }
@keyframes lageAtem {
0%, 100% { opacity: 0.7; }
50% { opacity: 1; }
}
.lage__zeile i::after { transform: rotate(45deg) scale(0); transform-origin: 50% 50%; }
.lage.ist-da .lage__zeile i::after {
animation: lageHaken 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) forwards;
}
.lage.ist-da .lage__zeile:nth-child(1) i::after { animation-delay: 0.55s; }
.lage.ist-da .lage__zeile:nth-child(2) i::after { animation-delay: 0.85s; }
.lage.ist-da .lage__zeile:nth-child(3) i::after { animation-delay: 1.15s; }
@keyframes lageHaken { to { transform: rotate(45deg) scale(1); } }
.lage.ist-da .lage__zeile { animation: lageZeile 0.55s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
.lage.ist-da .lage__zeile:nth-child(1) { animation-delay: 0.45s; }
.lage.ist-da .lage__zeile:nth-child(2) { animation-delay: 0.75s; }
.lage.ist-da .lage__zeile:nth-child(3) { animation-delay: 1.05s; }
@keyframes lageZeile {
from { opacity: 0; transform: translateX(-10px); }
to { opacity: 1; transform: none; }
}
.lage__wert { position: relative; overflow: hidden; }
.lage__wert::after {
content: "";
position: absolute;
inset: 0 auto 0 -40%;
width: 40%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
animation: lageBlitz 7s ease-in-out infinite;
pointer-events: none;
}
.lage__wert:nth-child(2)::after { animation-delay: 0.5s; }
.lage__wert:nth-child(3)::after { animation-delay: 1s; }
@keyframes lageBlitz {
0%, 82% { transform: translateX(0); opacity: 0; }
86% { opacity: 1; }
96%, 100% { transform: translateX(350%); opacity: 0; }
}
.lage__karte { position: relative; }
.lage__karte::after {
content: "";
position: absolute;
inset: -1px;
border-radius: inherit;
border: 1px solid rgba(63, 214, 232, 0.3);
opacity: 0;
animation: lageGlimmen 4.5s ease-in-out infinite;
pointer-events: none;
}
@keyframes lageGlimmen {
0%, 100% { opacity: 0; }
50% { opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
.lage__balken::after, .lage__wert::after, .lage__karte::after { display: none; }
.lage.ist-da .lage__zeile, .lage.ist-da .lage__zeile i::after,
.lage.ist-da .lage__balken i { animation: none !important; opacity: 1; transform: none; }
.lage.ist-da .lage__zeile i::after { transform: rotate(45deg) scale(1); }
}
#unternehmen .stats {
position: relative;
margin-top: clamp(1.4rem, 3vw, 2.2rem);
padding: clamp(1.2rem, 2.4vw, 1.8rem) 0;
border-block: 1px solid rgba(12, 22, 38, 0.09);
gap: 0;
}
#unternehmen .stats::before {
content: "";
position: absolute;
inset: auto 0 -1px 0;
height: 2px;
border-radius: 2px;
background: var(--grad);
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 1.6s cubic-bezier(0.22, 0.9, 0.3, 1) 0.2s;
}
#unternehmen .stats.in::before { transform: scaleX(1); }
#unternehmen .stat {
position: relative;
background: none;
border: 0;
border-radius: 0;
padding: 0.2rem clamp(0.8rem, 2vw, 1.6rem);
max-width: none;
}
#unternehmen .stat + .stat::before {
content: "";
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 1px;
background: linear-gradient(180deg, transparent, rgba(12, 22, 38, 0.14), transparent);
}
#unternehmen .stat b {
font-size: clamp(2.2rem, 4.2vw, 3.4rem);
line-height: 1.05;
font-variant-numeric: tabular-nums;
}
#unternehmen .stat span {
display: block;
margin-top: 0.35rem;
font-family: var(--font-mono);
font-size: 0.64rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-2);
line-height: 1.45;
}
#unternehmen .stats.in .stat b { animation: statAn 1.6s ease-out both; }
#unternehmen .stats.in .stat:nth-child(2) b { animation-delay: 0.08s; }
#unternehmen .stats.in .stat:nth-child(3) b { animation-delay: 0.16s; }
#unternehmen .stats.in .stat:nth-child(4) b { animation-delay: 0.24s; }
#unternehmen .stats.in .stat:nth-child(5) b { animation-delay: 0.32s; }
@keyframes statAn {
0% { opacity: 0.25; transform: translateY(10px); filter: blur(4px); }
55% { opacity: 1; transform: none; filter: blur(0); }
100% { opacity: 1; transform: none; filter: blur(0); }
}
.member { margin: 0; }
.member__bild {
position: relative;
display: block;
overflow: hidden;
border-radius: var(--radius);
box-shadow: var(--shadow);
isolation: isolate;
}
.member__bild img {
display: block;
width: 100%;
border-radius: 0;
box-shadow: none;
transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease;
}
.member__bild::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(160deg, rgba(47, 77, 158, 0.22), rgba(63, 214, 232, 0.1));
mix-blend-mode: multiply;
opacity: 0.3;
transition: opacity 0.6s ease;
pointer-events: none;
}
@media (hover: hover) {
.member__bild:hover img { transform: scale(1.06); }
.member__bild:hover::after { opacity: 0.12; }
}
.member figcaption { margin-top: 0.8rem; }
.member figcaption b { display: block; font-size: 1.02rem; }
.member figcaption span {
display: block;
margin-top: 0.1rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.06em;
color: var(--teal-ink);
}
#unternehmen .ticks--big li {
transition: color 0.4s ease, transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
#unternehmen .ticks--big li:hover { color: var(--ink); transform: translateX(4px); }
}
@media (max-width: 860px) {
#unternehmen .stat + .stat::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
#unternehmen .stats.in .stat b { animation: none !important; }
#unternehmen .stats::before { transition: none; transform: scaleX(1); }
}
html.js [data-auftritt="zahlen"] .stat {
opacity: 0;
transform: translateY(26px) rotateX(30deg);
transform-origin: 50% 100%;
transition:
opacity 0.6s ease var(--zd, 0s),
transform 0.85s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zd, 0s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat { opacity: 1; transform: none; }
html.js [data-auftritt="zahlen"] .stat:nth-child(1) { --zd: 0.12s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(2) { --zd: 0.22s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(3) { --zd: 0.32s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(4) { --zd: 0.42s; }
html.js [data-auftritt="zahlen"] .stat:nth-child(5) { --zd: 0.52s; }
html.js [data-auftritt="zahlen"] .stat + .stat::before {
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zd, 0s) + 0.25s);
}
html.js [data-auftritt="zahlen"].ist-auf .stat + .stat::before { transform: scaleY(1); }
#unternehmen [data-auftritt="zahlen"].ist-auf::before { transform: scaleX(1); }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat b { animation: statAn 1.6s ease-out both; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(2) b { animation-delay: 0.1s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(3) b { animation-delay: 0.2s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(4) b { animation-delay: 0.3s; }
#unternehmen [data-auftritt="zahlen"].ist-auf .stat:nth-child(5) b { animation-delay: 0.4s; }
html.js [data-auftritt="args"] li {
opacity: 0;
translate: -44px 0;
transition:
opacity 0.55s ease var(--ad, 0s),
translate 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) var(--ad, 0s),
color 0.4s ease,
transform 0.5s cubic-bezier(0.4, 0.05, 0.25, 1);
}
html.js [data-auftritt="args"].ist-auf li { opacity: 1; translate: 0 0; }
html.js [data-auftritt="args"] li:nth-child(1) { --ad: 0.05s; }
html.js [data-auftritt="args"] li:nth-child(2) { --ad: 0.13s; }
html.js [data-auftritt="args"] li:nth-child(3) { --ad: 0.21s; }
html.js [data-auftritt="args"] li:nth-child(4) { --ad: 0.29s; }
html.js [data-auftritt="args"] li:nth-child(5) { --ad: 0.37s; }
html.js [data-auftritt="args"] li:nth-child(6) { --ad: 0.45s; }
html.js [data-auftritt="args"] li:nth-child(7) { --ad: 0.53s; }
html.js [data-auftritt="args"] li::before {
transform: scale(0.4);
opacity: 0;
transition:
transform 0.5s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--ad, 0s) + 0.16s),
opacity 0.35s ease calc(var(--ad, 0s) + 0.16s);
}
html.js [data-auftritt="args"].ist-auf li::before { transform: none; opacity: 1; }
html.js [data-auftritt="team"] { perspective: 1300px; }
html.js [data-auftritt="team"] > .kicker {
opacity: 0;
translate: 0 16px;
transition: opacity 0.5s ease 0.1s, translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="team"].ist-auf > .kicker { opacity: 1; translate: 0 0; }
html.js [data-auftritt="team"] .member {
opacity: 0;
transform: translateY(56px) rotateX(26deg) scale(0.94);
transform-origin: 50% 100%;
transition:
opacity 0.6s ease var(--td, 0s),
transform 1s cubic-bezier(0.18, 0.88, 0.26, 1) var(--td, 0s);
}
html.js [data-auftritt="team"].ist-auf .member { opacity: 1; transform: none; }
html.js [data-auftritt="team"] .member:nth-child(1) { --td: 0.2s; }
html.js [data-auftritt="team"] .member:nth-child(2) { --td: 0.34s; }
html.js [data-auftritt="team"] .member:nth-child(3) { --td: 0.48s; }
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt] .stat,
html.js [data-auftritt] li,
html.js [data-auftritt] li::before,
html.js [data-auftritt] .member,
html.js [data-auftritt] > .kicker {
opacity: 1; transform: none; translate: none; transition: none;
}
}
.jubi__bild { position: relative; margin: 0; }
.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;
}
@keyframes siegelRing { to { transform: rotate(360deg); } }
.siegel__kern {
position: relative;
width: 78%;
aspect-ratio: 1;
border-radius: 50%;
display: grid;
place-content: center;
text-align: center;
background:
radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.14), transparent 60%),
linear-gradient(150deg, #16294a, #0d1a30);
border: 1px solid rgba(127, 208, 224, 0.35);
box-shadow: 0 20px 44px -22px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.siegel__kern b {
display: block;
font-size: clamp(1.9rem, 3.4vw, 2.7rem);
font-weight: 780;
font-stretch: 106%;
letter-spacing: -0.03em;
line-height: 1;
background: linear-gradient(140deg, #fff 20%, #7fd0e0 80%);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.siegel__kern em {
display: block;
margin-top: 1px;
font-style: normal;
font-family: var(--font-mono);
font-size: 0.56rem;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--dark-text);
}
.siegel__band {
position: absolute;
left: 50%;
bottom: -0.35rem;
transform: translateX(-50%);
padding: 0.2rem 0.7rem;
border-radius: 99px;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
font-family: var(--font-mono);
font-size: 0.56rem;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.8);
}
html.js [data-auftritt="jubitext"] > * {
opacity: 0;
translate: -48px 0;
transition:
opacity 0.6s ease var(--jd, 0s),
translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--jd, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] > *:nth-child(1) { --jd: 0.05s; }
html.js [data-auftritt="jubitext"] > *:nth-child(2) { --jd: 0.14s; }
html.js [data-auftritt="jubitext"] > *:nth-child(3) { --jd: 0.23s; }
html.js [data-auftritt="jubitext"] > *:nth-child(4) { --jd: 0.32s; }
html.js [data-auftritt="jubitext"] > *:nth-child(5) { --jd: 0.41s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div {
opacity: 0;
translate: 0 18px;
transition:
opacity 0.5s ease var(--zz, 0s),
translate 0.65s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zz, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .jubi__zahlen > div { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(1) { --zz: 0.4s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(2) { --zz: 0.5s; }
html.js [data-auftritt="jubitext"] .jubi__zahlen > div:nth-child(3) { --zz: 0.6s; }
html.js [data-auftritt="jubibild"] { perspective: 1300px; }
html.js [data-auftritt="jubibild"] .jubi__foto {
opacity: 0;
transform: perspective(1300px) rotateY(-16deg) translateX(70px) scale(0.94);
transform-origin: 0 50%;
transition:
opacity 0.7s ease 0.15s,
transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__foto {
opacity: 1;
transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}
html.js [data-auftritt="jubibild"] .siegel {
opacity: 0;
transform: rotate(-35deg) scale(0.5);
transition:
opacity 0.5s ease 0.65s,
transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.65s;
}
html.js [data-auftritt="jubibild"].ist-auf .siegel { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.siegel__ring { animation: none; }
html.js [data-auftritt="jubitext"] > *,
html.js [data-auftritt="jubitext"] .jubi__zahlen > div,
html.js [data-auftritt="jubibild"] .jubi__foto,
html.js [data-auftritt="jubibild"] .siegel {
opacity: 1; transform: none; translate: none; transition: none;
}
}
.note__wert b { font: inherit; color: inherit; font-variant-numeric: tabular-nums; }
.note__sterne i {
font-style: normal;
display: inline-block;
opacity: 0;
transform: scale(0.4) rotate(-25deg);
transition:
opacity 0.3s ease var(--sd, 0s),
transform 0.55s cubic-bezier(0.24, 1.5, 0.4, 1) var(--sd, 0s);
}
html.js [data-auftritt="note"].ist-auf .note__sterne i { opacity: 1; transform: none; }
.note__sterne i:nth-child(1) { --sd: 0.35s; }
.note__sterne i:nth-child(2) { --sd: 0.45s; }
.note__sterne i:nth-child(3) { --sd: 0.55s; }
.note__sterne i:nth-child(4) { --sd: 0.65s; }
.note__sterne i:nth-child(5) { --sd: 0.75s; }
html.js [data-auftritt="note"] {
opacity: 0;
translate: -40px 0;
transition: opacity 0.6s ease 0.1s, translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) 0.1s;
}
html.js [data-auftritt="note"].ist-auf { opacity: 1; translate: 0 0; }
html.js [data-auftritt="band"] {
opacity: 0;
translate: 90px 0;
transition: opacity 0.7s ease 0.25s, translate 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.25s;
}
html.js [data-auftritt="band"].ist-auf { opacity: 1; translate: 0 0; }
html.js [data-auftritt="band"] .stimmen__band { perspective: 1400px; }
html.js [data-auftritt="band"] .stimme {
transform: perspective(1400px) rotateY(-12deg) scale(0.95);
opacity: 0.5;
transition:
transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.35s,
opacity 0.8s ease 0.35s,
border-color 0.35s ease,
background 0.35s ease,
translate 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
html.js [data-auftritt="band"].ist-auf .stimme {
transform: perspective(1400px) rotateY(0deg) scale(1);
opacity: 1;
}
.stimmen::after {
content: "";
position: absolute;
inset: 0 auto 0 -25%;
width: 25%;
background: linear-gradient(90deg, transparent, rgba(127, 208, 224, 0.1), transparent);
animation: stimmenSchein 11s ease-in-out infinite 1.5s;
pointer-events: none;
z-index: 2;
}
@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; }
}
@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;
}
}
.zeitstrahl {
position: relative;
list-style: none;
margin: clamp(1.4rem, 3vh, 2.2rem) 0 0;
padding: 0 0 0 1.4rem;
display: grid;
gap: clamp(0.7rem, 1.6vh, 1.1rem);
}
.zeitstrahl::before {
content: "";
position: absolute;
left: 4px; top: 6px; bottom: 6px;
width: 2px;
border-radius: 2px;
background: linear-gradient(180deg, var(--teal), rgba(47, 77, 158, 0.5));
transform-origin: 50% 0;
transform: scaleY(0);
transition: transform 1.3s cubic-bezier(0.2, 0.9, 0.28, 1) 0.45s;
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl::before { transform: scaleY(1); }
.zeitstrahl li {
position: relative;
display: grid;
grid-template-columns: 4.2rem minmax(0, 1fr);
gap: 0.9rem;
align-items: baseline;
font-size: 0.92rem;
}
.zeitstrahl li::before {
content: "";
position: absolute;
left: -1.4rem;
top: 0.42em;
width: 10px; height: 10px;
margin-left: 0px;
border-radius: 50%;
background: var(--dark);
border: 2px solid var(--teal);
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.24, 1.5, 0.4, 1) var(--zt, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li::before { transform: scale(1); }
.zeitstrahl li:nth-child(1) { --zt: 0.6s; }
.zeitstrahl li:nth-child(2) { --zt: 0.75s; }
.zeitstrahl li:nth-child(3) { --zt: 0.9s; }
.zeitstrahl li:nth-child(4) { --zt: 1.05s; }
.zeitstrahl li:nth-child(5) { --zt: 1.2s; }
.zeitstrahl__jahr {
font-family: var(--font-mono);
font-size: 0.78rem;
font-weight: 600;
letter-spacing: 0.06em;
color: #7fd0e0;
}
.zeitstrahl__was { color: var(--dark-text); line-height: 1.5; }
.zeitstrahl li.ist-jetzt::before { background: var(--teal); border-color: var(--teal); }
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li.ist-jetzt::before {
animation: lagePuls 2.6s ease-in-out infinite 1.6s;
}
.zeitstrahl li.ist-jetzt .zeitstrahl__jahr { color: #fff; }
.zeitstrahl li.ist-jetzt .zeitstrahl__was { color: #fff; }
html.js [data-auftritt="jubitext"] .zeitstrahl li > span {
opacity: 0;
translate: -16px 0;
transition:
opacity 0.45s ease var(--zt, 0s),
translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zt, 0s);
}
html.js [data-auftritt="jubitext"].ist-auf .zeitstrahl li > span { opacity: 1; translate: 0 0; }
.jubi__link {
position: relative;
display: block;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.jubi__link .jubi__foto {
display: block;
width: 100%;
transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis {
position: absolute;
right: 0.8rem; top: 0.8rem;
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.35rem 0.75rem;
border-radius: 99px;
background: rgba(10, 20, 38, 0.72);
backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.16);
color: #fff;
font-size: 0.76rem;
font-weight: 600;
opacity: 0;
translate: 0 -8px;
transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.jubi__hinweis i {
width: 13px; height: 11px;
border: 1.6px solid currentColor;
border-radius: 2px;
position: relative;
}
.jubi__hinweis i::after {
content: "";
position: absolute;
left: 1px; bottom: 1px;
width: 6px; height: 4px;
border-radius: 1px;
background: currentColor;
}
@media (hover: hover) {
.jubi__link:hover .jubi__foto { transform: scale(1.05); }
.jubi__link:hover .jubi__hinweis { opacity: 1; translate: 0 0; }
}
@media (max-width: 900px) {
.zeitstrahl li { grid-template-columns: 3.6rem minmax(0, 1fr); font-size: 0.88rem; }
}
@media (prefers-reduced-motion: reduce) {
.zeitstrahl::before { transform: scaleY(1); transition: none; }
.zeitstrahl li::before { transform: scale(1); animation: none !important; }
html.js [data-auftritt="jubitext"] .zeitstrahl li > span { opacity: 1; translate: none; }
}
.jubi__zahlen b i { font-style: normal; font-variant-numeric: tabular-nums; }
.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; }
}
.zeitquer {
position: relative;
list-style: none;
margin: clamp(2rem, 5vh, 3.4rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(0.8rem, 2vw, 1.6rem);
}
.zeitquer::before {
content: "";
position: absolute;
left: 0; right: 0;
top: 2.05rem;
height: 2px;
border-radius: 2px;
background: linear-gradient(90deg, var(--teal), rgba(47, 77, 158, 0.45));
transform-origin: 0 50%;
transform: scaleX(0);
transition: transform 1.4s cubic-bezier(0.2, 0.9, 0.28, 1) 0.15s;
}
html.js [data-auftritt="zeitquer"].ist-auf::before { transform: scaleX(1); }
.zeitquer li { display: grid; gap: 0.5rem; }
.zeitquer__jahr {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.08em;
color: #7fd0e0;
}
.zeitquer__punkt {
width: 12px; height: 12px;
border-radius: 50%;
background: var(--dark);
border: 2px solid var(--teal);
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.24, 1.5, 0.4, 1) var(--qd, 0s);
}
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__punkt { transform: scale(1); }
.zeitquer__was {
font-size: 0.92rem;
line-height: 1.5;
color: var(--dark-text);
opacity: 0;
translate: 0 12px;
transition:
opacity 0.5s ease var(--qd, 0s),
translate 0.6s cubic-bezier(0.2, 0.9, 0.28, 1) var(--qd, 0s);
}
html.js [data-auftritt="zeitquer"].ist-auf .zeitquer__was { opacity: 1; translate: 0 0; }
.zeitquer li:nth-child(1) { --qd: 0.35s; }
.zeitquer li:nth-child(2) { --qd: 0.5s; }
.zeitquer li:nth-child(3) { --qd: 0.65s; }
.zeitquer li:nth-child(4) { --qd: 0.8s; }
.zeitquer li:nth-child(5) { --qd: 0.95s; }
.zeitquer li.ist-jetzt .zeitquer__punkt { background: var(--teal); }
html.js [data-auftritt="zeitquer"].ist-auf li.ist-jetzt .zeitquer__punkt {
animation: lagePuls 2.6s ease-in-out infinite 1.4s;
}
.zeitquer li.ist-jetzt .zeitquer__jahr,
.zeitquer li.ist-jetzt .zeitquer__was { color: #fff; }
.jubi__zahlen > div > span { text-wrap: balance; }
@media (max-width: 860px) {
.zeitquer { grid-template-columns: 1fr 1fr; gap: 1.2rem 1rem; }
.zeitquer::before { display: none; }
.zeitquer li { padding-left: 1.2rem; position: relative; }
.zeitquer__punkt { position: absolute; left: 0; top: 0.4rem; }
}
@media (max-width: 520px) {
.zeitquer { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.zeitquer::before { transform: scaleX(1); transition: none; }
.zeitquer__punkt { transform: scale(1); animation: none !important; }
.zeitquer__was { opacity: 1; translate: none; }
}
@media (min-width: 901px) {
.jubi { align-items: stretch; }
.jubi__bild { display: grid; }
.jubi__link { display: block; height: 100%; }
.jubi__link .jubi__foto { height: 100%; object-fit: cover; }
}
.jubi__zahlen > div > span { white-space: nowrap; }
@media (max-width: 900px) { .jubi__zahlen > div > span { white-space: normal; } }
.jubi__bild { position: relative; }
.jubi__ecke {
position: absolute;
width: clamp(3.4rem, 6vw, 5.2rem);
height: clamp(3.4rem, 6vw, 5.2rem);
pointer-events: none;
z-index: 2;
}
.jubi__ecke::before {
content: "";
position: absolute;
inset: 0;
border-style: solid;
border-color: var(--teal);
border-width: 0;
filter: drop-shadow(0 0 6px rgba(63, 214, 232, 0.55));
}
.jubi__ecke::after {
content: "";
position: absolute;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--teal);
box-shadow: 0 0 10px rgba(63, 214, 232, 0.9);
}
.jubi__ecke--ol { left: -0.7rem; top: -0.7rem; }
.jubi__ecke--ol::before {
border-top-width: 2px;
border-left-width: 2px;
border-radius: 14px 0 0 0;
}
.jubi__ecke--ol::after { left: -3px; top: -3px; }
.jubi__ecke--ur { right: -0.7rem; bottom: -0.7rem; }
.jubi__ecke--ur::before {
border-bottom-width: 2px;
border-right-width: 2px;
border-radius: 0 0 14px 0;
}
.jubi__ecke--ur::after { right: -3px; bottom: -3px; }
html.js [data-auftritt="jubibild"] .jubi__ecke {
opacity: 0;
transform: scale(0.55);
transition:
opacity 0.45s ease var(--ed2, 0s),
transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
.jubi__ecke--ol { transform-origin: 0 0; --ed2: 0.45s; }
.jubi__ecke--ur { transform-origin: 100% 100%; --ed2: 0.6s; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke { opacity: 1; transform: none; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after {
animation: eckePuls 3.2s ease-in-out infinite;
}
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke--ur::after { animation-delay: 1.6s; }
@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; }
}
@media (max-width: 900px) {
.jubi__ecke { width: 2.8rem; height: 2.8rem; }
.jubi__ecke--ol { left: -0.4rem; top: -0.4rem; }
.jubi__ecke--ur { right: -0.4rem; bottom: -0.4rem; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="jubibild"] .jubi__ecke { opacity: 1; transform: none; transition: none; }
html.js [data-auftritt="jubibild"].ist-auf .jubi__ecke::after { animation: none; }
}
.jubi-sektion { padding-block: clamp(4.5rem, 9vw, 8rem); }
.jubi { gap: clamp(3rem, 6vw, 5rem); align-items: center; }
.jubi__text { gap: 1.4rem; }
.jubi__text h2 { margin-bottom: 0.2rem; line-height: 1.14; }
.jubi__lead { margin: 0; }
.jubi__zahlen {
margin-top: clamp(0.8rem, 2vh, 1.4rem);
padding-top: clamp(1.2rem, 2.6vh, 1.8rem);
gap: clamp(1.4rem, 3vw, 2.6rem) !important;
}
.jubi__zahlen span { margin-top: 0.4rem !important; line-height: 1.5; }
.jubi__knoepfe { margin-top: clamp(0.6rem, 1.6vh, 1.2rem); gap: 0.9rem; }
.zeitquer {
margin-top: clamp(3rem, 6vh, 4.6rem);
padding-top: clamp(1.4rem, 3vh, 2.2rem);
border-top: 1px solid rgba(255, 255, 255, 0.08);
gap: clamp(1.2rem, 2.6vw, 2.2rem);
}
.zeitquer::before { top: calc(2.05rem + clamp(1.4rem, 3vh, 2.2rem)); }
.zeitquer li { gap: 0.7rem; }
.zeitquer__was { line-height: 1.6; }
.jubi__ecke--ol { left: -1.1rem; top: -1.1rem; }
.jubi__ecke--ur { right: -1.1rem; bottom: -1.1rem; }
@media (max-width: 900px) {
.jubi__ecke--ol { left: -0.6rem; top: -0.6rem; }
.jubi__ecke--ur { right: -0.6rem; bottom: -0.6rem; }
.zeitquer { margin-top: 2.4rem; }
}
.zeitquer li {
grid-template-rows: auto auto auto;
align-content: start;
}
.jubi__link { position: relative; }
.jubi__link::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(165deg, #1b3a6b, #16305c);
mix-blend-mode: color;
opacity: 0.12;
pointer-events: none;
transition: opacity 0.6s ease;
z-index: 1;
}
.jubi__link::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(165deg, rgba(13, 26, 48, 0.1), rgba(20, 36, 64, 0.06));
pointer-events: none;
transition: opacity 0.6s ease;
z-index: 1;
}
.jubi__link .jubi__foto { filter: saturate(0.97); transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), filter 0.6s ease; }
@media (hover: hover) {
.jubi__link:hover::after { opacity: 0; }
.jubi__link:hover::before { opacity: 0.3; }
.jubi__link:hover .jubi__foto { filter: saturate(1) contrast(1); }
}
.jubi__hinweis { z-index: 2; }
.jubi { align-items: center; gap: clamp(2.6rem, 6vw, 5rem); }
.jubi__text { gap: 1.6rem; }
.jubi__band {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.6rem, 4vw, 3.5rem);
margin-top: clamp(2.6rem, 6vh, 4.2rem);
padding: clamp(1.6rem, 3.4vh, 2.4rem) 0;
border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.jubi__band > div { display: grid; gap: 0.5rem; }
.jubi__band b {
font-size: clamp(2rem, 3.6vw, 3rem);
font-weight: 760;
font-stretch: 106%;
letter-spacing: -0.025em;
line-height: 1.05;
background: var(--grad-hell, linear-gradient(120deg, #7fd0e0, #a8c4ff));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.jubi__band b i { font-style: normal; font-variant-numeric: tabular-nums; }
.jubi__band span {
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dark-text);
line-height: 1.5;
}
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; }
.zeitquer { margin-top: clamp(2.4rem, 5vh, 3.6rem); padding-top: 0; border-top: 0; }
.zeitquer::before { top: 2.05rem; }
@media (max-width: 860px) {
.jubi__band { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.jubi__band > div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.jubi__band { grid-template-columns: 1fr; }
.jubi__band > div:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="jubiband"] > div { opacity: 1; transform: none; transition: none; }
}
.jubiKopf {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: clamp(2rem, 5vw, 4.5rem);
align-items: end;
}
.jubiKopf__links { display: grid; gap: 1.1rem; }
.jubiKopf__links h2 {
margin: 0;
font-size: clamp(2rem, 3.9vw, 3.2rem);
line-height: 1.1;
letter-spacing: -0.028em;
}
.jubiKopf__rechts { display: grid; gap: 1.8rem; }
.jubiKopf__rechts .jubi__lead { margin: 0; max-width: none; }
.jubiBuehne {
position: relative;
margin: clamp(2.6rem, 6vh, 4.4rem) 0 0;
}
.jubiBuehne .jubi__link {
display: block;
border-radius: calc(var(--radius) + 6px);
overflow: hidden;
isolation: isolate;
}
.jubiBuehne .jubi__foto {
display: block;
width: 100%;
height: clamp(18rem, 34vw, 30rem);
object-fit: cover;
object-position: 50% 42%;
}
.jubiBuehne .jubi__link::before {
background: linear-gradient(180deg, rgba(13, 26, 48, 0.1) 40%, rgba(10, 20, 38, 0.88) 100%);
z-index: 2;
}
.jubiBuehne .jubi__link::after { z-index: 1; }
.jubiBuehne__werte {
position: absolute;
left: 0; right: 0; bottom: 0;
z-index: 3;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1rem, 3vw, 2.5rem);
padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.6rem);
pointer-events: none;
}
.jubiBuehne__werte span {
display: grid;
gap: 0.3rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.78);
}
.jubiBuehne__werte b {
font-family: var(--font-sans, inherit);
font-size: clamp(1.7rem, 3vw, 2.6rem);
font-weight: 760;
font-stretch: 106%;
letter-spacing: -0.025em;
line-height: 1.05;
text-transform: none;
color: #fff;
}
.jubiBuehne__werte b i { font-style: normal; font-variant-numeric: tabular-nums; }
.jubiBuehne .siegel {
left: auto;
right: clamp(1.2rem, 3vw, 2.4rem);
top: clamp(1.2rem, 3vw, 2.2rem);
bottom: auto;
z-index: 4;
width: clamp(5.6rem, 9vw, 7.6rem);
}
.zeitkarten {
list-style: none;
margin: clamp(2.6rem, 6vh, 4.2rem) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: clamp(0.8rem, 2vw, 1.4rem);
}
.zeitkarten li {
position: relative;
display: grid;
gap: 0.75rem;
padding: clamp(1.1rem, 2.2vw, 1.5rem) clamp(1rem, 2vw, 1.3rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: border-color 0.5s ease, background-color 0.5s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.zeitkarten li::before {
content: "";
position: absolute;
left: -1px; right: -1px;
top: -1px;
height: 2px;
background: linear-gradient(90deg, rgba(63, 214, 232, 0.5), rgba(47, 77, 158, 0.3));
}
.zeitkarten li:first-child::before { border-radius: 2px 0 0 0; }
.zeitkarten li:last-child::before { border-radius: 0 2px 0 0; }
.zeitkarten li::after {
content: "";
position: absolute;
left: clamp(1rem, 2vw, 1.3rem);
top: -5px;
width: 10px; height: 10px;
border-radius: 50%;
background: var(--dark);
border: 2px solid var(--teal);
}
.zeitkarten li.ist-jetzt::after { background: var(--teal); }
.zeitkarten li.ist-jetzt {
background: rgba(63, 214, 232, 0.07);
border-color: rgba(63, 214, 232, 0.3);
}
.zeitkarte__jahr {
font-family: var(--font-mono);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.09em;
color: #7fd0e0;
}
.zeitkarte__text { font-size: 0.92rem; line-height: 1.55; color: var(--dark-text); }
.zeitkarten li.ist-jetzt .zeitkarte__jahr,
.zeitkarten li.ist-jetzt .zeitkarte__text { color: #fff; }
@media (hover: hover) {
.zeitkarten li:hover {
transform: translateY(-4px);
border-color: rgba(63, 214, 232, 0.4);
background: rgba(255, 255, 255, 0.07);
}
}
html.js [data-auftritt="jubikopf"] > * {
opacity: 0;
translate: 0 26px;
transition: opacity 0.65s ease var(--kd, 0s), translate 0.8s cubic-bezier(0.2, 0.9, 0.28, 1) var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubikopf"] > *:nth-child(1) { --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2) { --kd: 0.18s; }
html.js [data-auftritt="jubibuehne"] .jubi__link {
opacity: 0;
transform: scale(1.04);
transition: opacity 0.9s ease 0.1s, transform 1.3s cubic-bezier(0.18, 0.88, 0.26, 1) 0.1s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span {
opacity: 0;
translate: 0 20px;
transition: opacity 0.6s ease var(--wd, 0s), translate 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubiBuehne__werte span { opacity: 1; translate: 0 0; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(1) { --wd: 0.45s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(2) { --wd: 0.57s; }
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span:nth-child(3) { --wd: 0.69s; }
html.js [data-auftritt="jubibuehne"] .siegel {
opacity: 0;
transform: rotate(-30deg) scale(0.5);
transition: opacity 0.5s ease 0.7s, transform 0.9s cubic-bezier(0.24, 1.35, 0.4, 1) 0.7s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"] .jubi__ecke {
opacity: 0;
transform: scale(0.55);
transition: opacity 0.45s ease var(--ed2, 0s), transform 0.8s cubic-bezier(0.2, 1.2, 0.35, 1) var(--ed2, 0s);
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke { opacity: 1; transform: none; }
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__ecke::after { animation: eckePuls 3.2s ease-in-out infinite; }
html.js [data-auftritt="zeitkarten"] li {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.55s ease var(--zk, 0s), transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--zk, 0s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li { opacity: 1; transform: none; }
.zeitkarten li:nth-child(1) { --zk: 0.05s; }
.zeitkarten li:nth-child(2) { --zk: 0.14s; }
.zeitkarten li:nth-child(3) { --zk: 0.23s; }
.zeitkarten li:nth-child(4) { --zk: 0.32s; }
.zeitkarten li:nth-child(5) { --zk: 0.41s; }
html.js [data-auftritt="zeitkarten"].ist-auf li.ist-jetzt::after {
animation: lagePuls 2.6s ease-in-out infinite 1s;
}
@media (max-width: 900px) {
.jubiKopf { grid-template-columns: 1fr; gap: 1.8rem; }
.jubiKopf__rechts { gap: 1.4rem; }
.zeitkarten { grid-template-columns: 1fr 1fr; }
.jubiBuehne__werte { grid-template-columns: 1fr; gap: 0.6rem; }
.jubiBuehne .jubi__foto { height: clamp(16rem, 60vw, 22rem); }
.jubiBuehne .siegel { width: 5rem; right: 1rem; top: 1rem; }
}
@media (max-width: 560px) {
.zeitkarten { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="jubikopf"] > *,
html.js [data-auftritt="jubibuehne"] .jubi__link,
html.js [data-auftritt="jubibuehne"] .jubiBuehne__werte span,
html.js [data-auftritt="jubibuehne"] .siegel,
html.js [data-auftritt="jubibuehne"] .jubi__ecke,
html.js [data-auftritt="zeitkarten"] li {
opacity: 1; transform: none; translate: none; transition: none;
}
}
.jubiOben {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
gap: clamp(2.2rem, 5.5vw, 4.5rem);
align-items: center;
}
.jubiOben__text { display: grid; gap: 1.5rem; justify-items: start; }
.jubiOben__text h2 {
margin: 0;
font-size: clamp(2rem, 3.7vw, 3rem);
line-height: 1.12;
letter-spacing: -0.028em;
}
.jubiOben__text .jubi__lead { margin: 0; max-width: 44ch; }
.jubiOben__text .jubi__knoepfe { margin-top: 0.4rem; gap: 0.9rem; }
.jubiBild { position: relative; margin: 0; }
.jubiBild .jubi__link {
display: block;
border-radius: var(--radius);
overflow: hidden;
isolation: isolate;
}
.jubiBild .jubi__foto {
display: block;
width: 100%;
height: auto;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.jubiBild .siegel {
left: clamp(-2.4rem, -3vw, -1.6rem);
bottom: clamp(-1.8rem, -2.4vw, -1.2rem);
right: auto; top: auto;
width: clamp(6rem, 10vw, 8rem);
z-index: 4;
}
.jubiWerte {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(1.4rem, 4vw, 3.5rem);
margin-top: clamp(2.8rem, 6vh, 4.4rem);
padding: clamp(1.4rem, 3vh, 2.2rem) 0;
border-block: 1px solid rgba(255, 255, 255, 0.1);
}
.jubiWerte span {
display: grid;
gap: 0.4rem;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--dark-text);
line-height: 1.5;
}
.jubiWerte b {
font-family: var(--font-sans, inherit);
font-size: clamp(1.9rem, 3.2vw, 2.8rem);
font-weight: 760;
font-stretch: 106%;
letter-spacing: -0.025em;
line-height: 1.05;
text-transform: none;
background: linear-gradient(120deg, #ffffff, #7fd0e0);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.jubiWerte b i { font-style: normal; font-variant-numeric: tabular-nums; }
.zeitkarten { margin-top: clamp(2.4rem, 5vh, 3.6rem); }
html.js [data-auftritt="jubiwerte"] > span {
opacity: 0;
transform: translateY(20px);
transition:
opacity 0.55s ease var(--wd2, 0s),
transform 0.75s cubic-bezier(0.2, 0.9, 0.28, 1) var(--wd2, 0s);
}
html.js [data-auftritt="jubiwerte"].ist-auf > span { opacity: 1; transform: none; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(1) { --wd2: 0.05s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(2) { --wd2: 0.15s; }
html.js [data-auftritt="jubiwerte"] > span:nth-child(3) { --wd2: 0.25s; }
html.js [data-auftritt="jubibuehne"] .jubi__link {
opacity: 0;
transform: perspective(1300px) rotateY(-14deg) translateX(60px) scale(0.95);
transform-origin: 0 50%;
transition: opacity 0.7s ease 0.15s, transform 1.1s cubic-bezier(0.18, 0.88, 0.26, 1) 0.15s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link {
opacity: 1;
transform: perspective(1300px) rotateY(0deg) translateX(0) scale(1);
}
@media (max-width: 900px) {
.jubiOben { grid-template-columns: 1fr; gap: 2.2rem; }
.jubiWerte { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.jubiWerte > span:last-child { grid-column: 1 / -1; }
.jubiBild .siegel { left: -1rem; bottom: -1rem; width: 5.4rem; }
}
@media (max-width: 520px) {
.jubiWerte { grid-template-columns: 1fr; }
.jubiWerte > span:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="jubiwerte"] > span,
html.js [data-auftritt="jubibuehne"] .jubi__link {
opacity: 1; transform: none; transition: none;
}
}
@media (max-width: 900px) {
.jubiBild { max-width: 32rem; }
.jubiBild .jubi__foto { aspect-ratio: 16 / 10; }
}
.zeitkarten {
margin-top: clamp(3rem, 6.5vh, 4.8rem);
padding-top: clamp(2rem, 4vh, 3rem);
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
html.js [data-auftritt="jubikopf"] > * {
opacity: 0;
translate: -70px 0;
filter: blur(5px);
transition:
opacity 0.7s ease var(--kd, 0s),
translate 0.95s cubic-bezier(0.16, 0.86, 0.26, 1) var(--kd, 0s),
filter 0.7s ease var(--kd, 0s);
}
html.js [data-auftritt="jubikopf"].ist-auf > * {
opacity: 1; translate: 0 0; filter: blur(0);
}
html.js [data-auftritt="jubikopf"] > *:nth-child(1) { --kd: 0.05s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(2) { --kd: 0.16s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(3) { --kd: 0.27s; }
html.js [data-auftritt="jubikopf"] > *:nth-child(4) { --kd: 0.38s; }
html.js [data-auftritt="jubibuehne"] { perspective: 1400px; }
html.js [data-auftritt="jubibuehne"] .jubi__link {
opacity: 0;
transform: perspective(1400px) rotateY(-26deg) rotateX(6deg) translateX(150px) scale(0.88);
transform-origin: 100% 50%;
filter: blur(8px);
transition:
opacity 0.85s ease 0.2s,
transform 1.35s cubic-bezier(0.16, 0.88, 0.24, 1) 0.2s,
filter 0.8s ease 0.2s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .jubi__link {
opacity: 1;
transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateX(0) scale(1);
filter: blur(0);
}
html.js [data-auftritt="jubibuehne"] .siegel {
opacity: 0;
transform: rotate(-140deg) scale(0.3);
transition:
opacity 0.5s ease 0.75s,
transform 1.1s cubic-bezier(0.22, 1.4, 0.38, 1) 0.75s;
}
html.js [data-auftritt="jubibuehne"].ist-auf .siegel { opacity: 1; transform: none; }
html.js [data-auftritt="zeitkarten"] { perspective: 1500px; }
html.js [data-auftritt="zeitkarten"] li {
opacity: 0;
transform: perspective(1500px) translateY(60px) rotateX(32deg) scale(0.92);
transform-origin: 50% 0;
filter: blur(4px);
transition:
opacity 0.6s ease var(--zk, 0s),
transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--zk, 0s),
filter 0.6s ease var(--zk, 0s),
border-color 0.5s ease,
background-color 0.5s ease;
}
html.js [data-auftritt="zeitkarten"].ist-auf li {
opacity: 1;
transform: perspective(1500px) translateY(0) rotateX(0deg) scale(1);
filter: blur(0);
}
.zeitkarten li:nth-child(1) { --zk: 0.1s; }
.zeitkarten li:nth-child(2) { --zk: 0.22s; }
.zeitkarten li:nth-child(3) { --zk: 0.34s; }
.zeitkarten li:nth-child(4) { --zk: 0.46s; }
.zeitkarten li:nth-child(5) { --zk: 0.58s; }
html.js [data-auftritt="zeitkarten"] li::before {
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.28, 1) calc(var(--zk, 0s) + 0.1s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::before { transform: scaleX(1); }
html.js [data-auftritt="zeitkarten"] li::after {
transform: scale(0);
transition: transform 0.55s cubic-bezier(0.24, 1.6, 0.4, 1) calc(var(--zk, 0s) + 0.3s);
}
html.js [data-auftritt="zeitkarten"].ist-auf li::after { transform: scale(1); }
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="jubikopf"] > *,
html.js [data-auftritt="jubibuehne"] .jubi__link,
html.js [data-auftritt="jubibuehne"] .siegel,
html.js [data-auftritt="zeitkarten"] li,
html.js [data-auftritt="zeitkarten"] li::before,
html.js [data-auftritt="zeitkarten"] li::after {
opacity: 1; transform: none; translate: none; filter: none; transition: none;
}
}
#wissen .beitraege {
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-rows: auto auto;
gap: clamp(1rem, 2vw, 1.5rem);
align-items: stretch;
}
#wissen .beitrag--gross { grid-row: 1 / 3; }
#wissen .beitrag {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 0;
overflow: hidden;
border-radius: calc(var(--radius) + 4px);
background: var(--surface);
border: 1px solid var(--line);
transition:
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;
}
@media (hover: hover) {
#wissen .beitrag:hover {
transform: translateY(-3px);
border-color: rgba(63, 214, 232, 0.4);
box-shadow: 0 30px 60px -38px rgba(12, 22, 38, 0.55);
}
}
#wissen .beitrag__inhalt {
display: grid;
gap: 0.7rem;
align-content: start;
padding: clamp(1.2rem, 2.2vw, 1.7rem);
}
#wissen .beitrag--gross .beitrag__inhalt { gap: 0.9rem; padding: clamp(1.5rem, 2.6vw, 2.1rem); }
#wissen .beitrag__kopf { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
#wissen .beitrag__meta {
font-family: var(--font-mono);
font-size: 0.66rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.8;
}
#wissen .beitrag--gross .beitrag__titel { font-size: clamp(1.3rem, 2.1vw, 1.75rem); line-height: 1.22; }
#wissen .beitrag--gross .beitrag__text { font-size: 1rem; line-height: 1.65; }
#wissen .beitrag__mehr { margin-top: 0.3rem; }
#wissen .beitrag__visual {
position: relative;
display: block;
height: clamp(6rem, 11vw, 8.5rem);
background: linear-gradient(150deg, rgba(47, 77, 158, 0.1), rgba(63, 214, 232, 0.08));
border-bottom: 1px solid rgba(12, 22, 38, 0.07);
overflow: hidden;
}
#wissen .beitrag--gross .beitrag__visual { height: clamp(9rem, 17vw, 14rem); }
.bvis { position: absolute; inset: 0; }
.bvis i { position: absolute; display: block; }
.bvis--recht .bvis__balken {
left: 12%;
height: 7px;
border-radius: 4px;
background: rgba(47, 77, 158, 0.26);
}
.bvis--recht .bvis__balken:nth-child(1) { top: 30%; width: 44%; }
.bvis--recht .bvis__balken:nth-child(2) { top: 48%; width: 32%; }
.bvis--recht .bvis__balken:nth-child(3) { top: 66%; width: 38%; }
.bvis--recht .bvis__siegel {
right: 13%; top: 50%;
width: clamp(2.6rem, 5vw, 4rem);
aspect-ratio: 1;
margin-top: calc(clamp(2.6rem, 5vw, 4rem) / -2);
border-radius: 50%;
border: 2px dashed rgba(47, 163, 186, 0.5);
background: radial-gradient(circle, rgba(63, 214, 232, 0.18), transparent 70%);
animation: bvisDreh 22s linear infinite;
}
@keyframes bvisDreh { to { transform: rotate(360deg); } }
.bvis--chat .bvis__blase { border-radius: 10px; background: rgba(47, 77, 158, 0.2); }
.bvis--chat .bvis__blase:nth-child(1) { left: 12%; top: 26%; width: 42%; height: 22%; border-bottom-left-radius: 3px; }
.bvis--chat .bvis__blase:nth-child(2) { right: 12%; top: 56%; width: 34%; height: 20%; border-bottom-right-radius: 3px; background: linear-gradient(120deg, var(--blue), var(--teal)); opacity: 0.55; }
.bvis--chat .bvis__schloss {
left: 50%; top: 50%;
width: 16px; height: 13px;
margin: -6px 0 0 -8px;
border-radius: 3px;
background: var(--teal-ink);
opacity: 0.75;
}
.bvis--chat .bvis__schloss::before {
content: "";
position: absolute;
left: 50%; top: -7px;
width: 10px; height: 9px;
margin-left: -5px;
border: 2px solid var(--teal-ink);
border-bottom: 0;
border-radius: 5px 5px 0 0;
}
.bvis--suche .bvis__treffer {
left: 12%;
height: 8px;
border-radius: 4px;
background: rgba(47, 77, 158, 0.22);
}
.bvis--suche .bvis__treffer:nth-child(1) { top: 28%; width: 52%; background: linear-gradient(90deg, var(--blue), var(--teal)); opacity: 0.6; }
.bvis--suche .bvis__treffer:nth-child(2) { top: 50%; width: 38%; }
.bvis--suche .bvis__treffer:nth-child(3) { top: 72%; width: 44%; }
.bvis--suche .bvis__lupe {
right: 15%; top: 50%;
width: 26px; height: 26px;
margin-top: -13px;
border: 2.5px solid var(--teal-ink);
border-radius: 50%;
opacity: 0.7;
}
.bvis--suche .bvis__lupe::after {
content: "";
position: absolute;
right: -7px; bottom: -4px;
width: 11px; height: 2.5px;
border-radius: 2px;
background: var(--teal-ink);
transform: rotate(45deg);
}
#wissen .bvis i { transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), opacity 0.5s ease; }
@media (hover: hover) {
#wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(8px); }
#wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(14px); }
#wissen .beitrag:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(6px); }
#wissen .beitrag:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-4px); }
#wissen .beitrag:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(4px); }
#wissen .beitrag:hover .bvis--suche .bvis__lupe { transform: scale(1.12) rotate(-8deg); }
#wissen .beitrag:hover .beitrag__visual { background: linear-gradient(150deg, rgba(47, 77, 158, 0.16), rgba(63, 214, 232, 0.13)); }
}
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 (max-width: 900px) {
#wissen .beitraege { grid-template-columns: 1fr; grid-template-rows: none; }
#wissen .beitrag--gross { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
.bvis--recht .bvis__siegel { animation: none; }
html.js [data-auftritt="beitraege"] .beitrag {
opacity: 1; transform: none; filter: none; transition: none;
}
}
@media (min-width: 901px) {
#wissen .beitrag--gross { grid-template-rows: minmax(0, 1fr) auto; }
#wissen .beitrag--gross .beitrag__visual { height: auto; min-height: clamp(9rem, 17vw, 14rem); }
#wissen .beitrag--gross .beitrag__inhalt { align-content: end; }
}
@media (min-width: 901px) {
#wissen .beitrag--gross .bvis--recht .bvis__balken { left: 14%; }
#wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(1) { top: calc(50% - 26px); width: 38%; }
#wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(2) { top: calc(50% - 4px); width: 27%; }
#wissen .beitrag--gross .bvis--recht .bvis__balken:nth-child(3) { top: calc(50% + 18px); width: 33%; }
#wissen .beitrag--gross .bvis--recht .bvis__siegel { right: 20%; }
}
.posts {
list-style: none;
margin: clamp(1.6rem, 3.5vw, 2.6rem) 0 0;
padding: 0;
border-top: 1px solid rgba(12, 22, 38, 0.1);
}
.posts li { border-bottom: 1px solid rgba(12, 22, 38, 0.1); }
.post {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(1.1rem, 2.6vw, 2.2rem);
padding: clamp(1.2rem, 2.4vw, 1.8rem) clamp(0.6rem, 1.4vw, 1.1rem);
text-decoration: none;
transition: padding-left 0.5s cubic-bezier(0.4, 0.05, 0.25, 1), background-color 0.45s ease;
}
.post::before {
content: "";
position: absolute;
left: 0; top: 12%; bottom: 12%;
width: 3px;
border-radius: 3px;
background: var(--grad);
transform: scaleY(0);
transform-origin: 50% 50%;
transition: transform 0.5s cubic-bezier(0.3, 1.2, 0.4, 1);
}
.post__zeichen {
position: relative;
display: block;
width: clamp(5.5rem, 11vw, 8.5rem);
height: clamp(3.6rem, 7vw, 5.4rem);
border-radius: 12px;
background: linear-gradient(150deg, rgba(47, 77, 158, 0.09), rgba(63, 214, 232, 0.07));
border: 1px solid rgba(12, 22, 38, 0.07);
overflow: hidden;
flex: none;
transition: background 0.5s ease, border-color 0.5s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.post__mitte { display: grid; gap: 0.4rem; }
.post__kopf { display: flex; align-items: center; gap: 0.6rem; }
.post__neu {
font-family: var(--font-mono);
font-size: 0.6rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #fff;
background: var(--grad);
padding: 0.16rem 0.5rem;
border-radius: 99px;
}
.post__titel {
display: block;
font-size: clamp(1.1rem, 1.7vw, 1.4rem);
font-weight: 700;
line-height: 1.25;
color: var(--ink);
transition: color 0.4s ease;
}
.post__text {
display: block;
font-size: 0.94rem;
line-height: 1.6;
color: var(--ink-2);
max-width: 62ch;
}
.post__rechts { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.post__zeit {
font-family: var(--font-mono);
font-size: 0.7rem;
letter-spacing: 0.07em;
color: var(--ink-2);
white-space: nowrap;
}
.post__pfeil {
display: grid;
place-items: center;
width: 40px; height: 40px;
border-radius: 50%;
border: 1px solid var(--line);
color: var(--blue);
flex: none;
transition: background 0.5s ease, border-color 0.5s ease, color 0.4s ease, transform 0.55s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.post__pfeil svg { width: 18px; height: 18px; }
@media (hover: hover) {
.post:hover { background: rgba(47, 77, 158, 0.035); padding-left: clamp(1.2rem, 2.4vw, 2rem); }
.post:hover::before { transform: scaleY(1); }
.post:hover .post__titel { color: var(--blue); }
.post:hover .post__zeichen {
background: linear-gradient(150deg, rgba(47, 77, 158, 0.15), rgba(63, 214, 232, 0.13));
border-color: rgba(63, 214, 232, 0.35);
transform: scale(1.03);
}
.post:hover .post__pfeil {
background: var(--grad);
border-color: transparent;
color: #fff;
transform: translateX(4px);
}
.post:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(6px); }
.post:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(10px); }
.post:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(4px); }
.post:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-3px); }
.post:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(3px); }
.post:hover .bvis--suche .bvis__lupe { transform: scale(1.12) rotate(-8deg); }
}
.post .bvis i { transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1); }
.post__zeichen .bvis--recht .bvis__balken { height: 5px; }
.post__zeichen .bvis--recht .bvis__siegel { right: 12%; width: 34%; }
.post__zeichen .bvis--suche .bvis__treffer { height: 5px; }
.post__zeichen .bvis--suche .bvis__lupe { width: 20px; height: 20px; margin-top: -10px; border-width: 2px; }
.post__zeichen .bvis--suche .bvis__lupe::after { right: -6px; bottom: -3px; width: 9px; }
.post__zeichen .bvis--chat .bvis__schloss { width: 13px; height: 11px; margin: -5px 0 0 -6.5px; }
.post__zeichen .bvis--chat .bvis__schloss::before { top: -6px; width: 9px; height: 8px; margin-left: -4.5px; }
html.js [data-auftritt="posts"] li {
opacity: 0;
transform: perspective(1400px) translateX(-70px) translateY(30px) rotateY(14deg) rotateX(12deg);
transform-origin: 0 50%;
filter: blur(5px);
transition:
opacity 0.6s ease var(--pz, 0s),
transform 1s cubic-bezier(0.16, 0.9, 0.26, 1) var(--pz, 0s),
filter 0.6s ease var(--pz, 0s);
}
html.js [data-auftritt="posts"].ist-auf li {
opacity: 1;
transform: perspective(1400px) translateX(0) translateY(0) rotateY(0) rotateX(0);
filter: blur(0);
}
html.js [data-auftritt="posts"] li:nth-child(1) { --pz: 0.08s; }
html.js [data-auftritt="posts"] li:nth-child(2) { --pz: 0.22s; }
html.js [data-auftritt="posts"] li:nth-child(3) { --pz: 0.36s; }
html.js [data-auftritt="posts"] .post__zeichen {
opacity: 0;
transform: scale(0.6) rotate(-8deg);
transition:
opacity 0.45s ease calc(var(--pz, 0s) + 0.2s),
transform 0.7s cubic-bezier(0.24, 1.5, 0.4, 1) calc(var(--pz, 0s) + 0.2s);
}
html.js [data-auftritt="posts"].ist-auf .post__zeichen { opacity: 1; transform: none; }
@media (max-width: 760px) {
.post { grid-template-columns: auto minmax(0, 1fr); gap: 1rem; }
.post__zeichen { width: 4.4rem; height: 3.2rem; }
.post__rechts {
grid-column: 2;
justify-content: space-between;
margin-top: 0.5rem;
}
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="posts"] li,
html.js [data-auftritt="posts"] .post__zeichen {
opacity: 1; transform: none; filter: none; transition: none;
}
}
#wissen .posts {
display: block;
grid-template-columns: none;
gap: 0;
}
#wissen .posts li { display: block; }
#wissen .post {
transition:
padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
background-color 0.55s ease;
}
#wissen .post::before {
transition: transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__zeichen {
transition:
background 0.6s ease,
border-color 0.6s ease,
transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post__titel { transition: color 0.5s ease; }
#wissen .post__pfeil {
transition:
background 0.6s ease,
border-color 0.6s ease,
color 0.5s ease,
transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
#wissen .post .bvis i {
transition: transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
#wissen .post:hover { padding-left: clamp(0.9rem, 1.8vw, 1.5rem); }
#wissen .post:hover .post__zeichen { transform: scale(1.02); }
#wissen .post:hover .post__pfeil { transform: translateX(3px); }
#wissen .post:hover .bvis--recht .bvis__balken:nth-child(1) { transform: translateX(4px); }
#wissen .post:hover .bvis--recht .bvis__balken:nth-child(2) { transform: translateX(7px); }
#wissen .post:hover .bvis--recht .bvis__balken:nth-child(3) { transform: translateX(3px); }
#wissen .post:hover .bvis--chat .bvis__blase:nth-child(1) { transform: translateY(-2px); }
#wissen .post:hover .bvis--chat .bvis__blase:nth-child(2) { transform: translateY(2px); }
#wissen .post:hover .bvis--suche .bvis__lupe { transform: scale(1.08) rotate(-5deg); }
}
#wissen .post {
background-color: transparent;
background-image: linear-gradient(90deg, rgba(47, 77, 158, 0.05), rgba(47, 77, 158, 0.02));
background-repeat: no-repeat;
background-size: 0% 100%;
transition:
padding-left 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
background-size 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
}
@media (hover: hover) {
#wissen .post:hover { background-color: transparent; background-size: 100% 100%; }
}
#wissen .post {
background-image: none;
background-color: transparent;
isolation: isolate;
}
#wissen .post::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient(90deg, rgba(47, 77, 158, 0.055), rgba(47, 77, 158, 0.015));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
pointer-events: none;
}
@media (hover: hover) {
#wissen .post:hover::after { transform: scaleX(1); }
}
#wissen .post {
padding-left: clamp(0.6rem, 1.4vw, 1.1rem);
transition: none;
}
@media (hover: hover) {
#wissen .post:hover { padding-left: clamp(0.6rem, 1.4vw, 1.1rem); }
}
#wissen .post__zeichen,
#wissen .post__mitte {
transition:
transform 0.7s cubic-bezier(0.4, 0.05, 0.25, 1),
background 0.6s ease,
border-color 0.6s ease;
}
@media (hover: hover) {
#wissen .post:hover .post__zeichen { transform: translateX(8px) scale(1.02); }
#wissen .post:hover .post__mitte { transform: translateX(8px); }
}
html.chat-offen .rail {
opacity: 0;
visibility: hidden;
transform: translateY(-50%) translateX(14px);
transition: none;
}
.rail {
transition:
opacity 0.35s ease 0.15s,
transform 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}
.ctaLage {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: clamp(2.2rem, 6vw, 5rem);
align-items: center;
text-align: left;
}
.ctaLage__text { display: grid; gap: 1.3rem; }
.ctaLage__text h2 {
margin: 0;
font-size: clamp(2rem, 3.7vw, 3rem);
line-height: 1.12;
letter-spacing: -0.028em;
text-wrap: balance;
}
.ctaLage__lead { margin: 0; color: var(--dark-text); font-size: 1.05rem; line-height: 1.65; max-width: 42ch; }
.ctaLage__punkte { list-style: none; margin: 0.3rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.ctaLage__punkte li {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.7rem;
font-size: 0.95rem;
color: var(--dark-text);
}
.ctaLage__punkte i {
position: relative;
width: 18px; height: 18px;
border-radius: 50%;
background: rgba(46, 201, 139, 0.18);
}
.ctaLage__punkte i::after {
content: "";
position: absolute;
left: 6px; top: 4px;
width: 4px; height: 8px;
border: solid var(--ok);
border-width: 0 1.8px 1.8px 0;
transform: rotate(45deg);
}
.ctaLage__wege { display: grid; gap: 0.8rem; }
.ctaWeg {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: clamp(0.9rem, 2vw, 1.3rem);
padding: clamp(1rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.5rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.13);
text-decoration: none;
isolation: isolate;
transition:
border-color 0.6s ease,
transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1),
box-shadow 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
transform: scaleX(0);
transform-origin: 0 50%;
transition: transform 0.75s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg--haupt {
background: linear-gradient(120deg, rgba(47, 77, 158, 0.55), rgba(47, 163, 186, 0.4));
border-color: rgba(127, 208, 224, 0.35);
}
.ctaWeg__zeichen {
display: grid;
place-items: center;
width: 44px; height: 44px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.09);
border: 1px solid rgba(255, 255, 255, 0.14);
color: #7fd0e0;
flex: none;
transition: background 0.6s ease, border-color 0.6s ease, transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg--haupt .ctaWeg__zeichen { background: rgba(255, 255, 255, 0.16); color: #fff; }
.ctaWeg__zeichen svg { width: 21px; height: 21px; }
.ctaWeg__inhalt { display: grid; gap: 0.15rem; }
.ctaWeg__titel { font-size: 1.05rem; font-weight: 650; color: #fff; line-height: 1.3; }
.ctaWeg__text { font-size: 0.86rem; color: var(--dark-text); line-height: 1.45; }
.ctaWeg__pfeil {
display: grid;
place-items: center;
width: 34px; height: 34px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.18);
color: #fff;
flex: none;
transition: background 0.6s ease, border-color 0.6s ease, transform 0.65s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaWeg__pfeil svg { width: 16px; height: 16px; }
@media (hover: hover) {
.ctaWeg:hover {
border-color: rgba(127, 208, 224, 0.45);
transform: translateY(-3px);
box-shadow: 0 26px 52px -34px rgba(0, 0, 0, 0.9);
}
.ctaWeg:hover::after { transform: scaleX(1); }
.ctaWeg:hover .ctaWeg__zeichen {
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.4);
transform: scale(1.05);
}
.ctaWeg:hover .ctaWeg__pfeil {
background: rgba(255, 255, 255, 0.14);
border-color: rgba(255, 255, 255, 0.35);
transform: translateX(3px);
}
}
.ctaLage__ort {
display: flex;
align-items: center;
gap: 0.55rem;
margin: 0.5rem 0 0;
font-family: var(--font-mono);
font-size: 0.74rem;
letter-spacing: 0.05em;
color: var(--dark-text);
opacity: 0.8;
}
.ctaLage__ort span {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--teal);
flex: none;
}
html.js [data-auftritt="cta"] .ctaLage__text > * {
opacity: 0;
translate: -50px 0;
transition:
opacity 0.65s ease var(--cd, 0s),
translate 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > * { opacity: 1; translate: 0 0; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(1) { --cd: 0.05s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(2) { --cd: 0.15s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(3) { --cd: 0.25s; }
html.js [data-auftritt="cta"] .ctaLage__text > *:nth-child(4) { --cd: 0.35s; }
html.js [data-auftritt="cta"] .ctaLage__wege > * {
opacity: 0;
transform: translateX(55px);
transition:
opacity 0.6s ease var(--wg, 0s),
transform 0.85s cubic-bezier(0.18, 0.88, 0.26, 1) var(--wg, 0s),
border-color 0.6s ease,
box-shadow 0.65s ease;
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__wege > * { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(1) { --wg: 0.2s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(2) { --wg: 0.32s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(3) { --wg: 0.44s; }
html.js [data-auftritt="cta"] .ctaLage__wege > *:nth-child(4) { --wg: 0.56s; }
@media (max-width: 900px) {
.ctaLage { grid-template-columns: 1fr; gap: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="cta"] .ctaLage__text > *,
html.js [data-auftritt="cta"] .ctaLage__wege > * {
opacity: 1; transform: none; translate: none; transition: none;
}
}
#kontakt .cta__inner { max-width: var(--wrap); }
#kontakt .cta p { margin-top: 0; font-size: inherit; }
#kontakt .ctaLage__lead { font-size: 1.05rem; }
@media (min-width: 1100px) {
#kontakt .ctaLage { padding-right: clamp(3.5rem, 5vw, 5.5rem); }
}
.footer__grid {
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
gap: clamp(1.8rem, 3.5vw, 3rem);
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.footer__brand { max-width: 22rem; }
.footer__brand p:last-child {
font-size: 0.92rem;
line-height: 1.65;
color: var(--dark-text);
opacity: 0.85;
}
.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__cta {
display: inline-flex; align-items: center; gap: 0.45rem; margin-top: 1.1rem;
padding: 0.6rem 1.05rem; border-radius: 999px;
border: 1px solid rgba(63, 214, 232, 0.32);
background: rgba(63, 214, 232, 0.08);
color: #cdeef5; font-size: 0.85rem; font-weight: 600;
transition: background-color 0.28s ease, border-color 0.28s ease, color 0.28s ease;
}
.footer__cta svg {
width: 15px; height: 15px; fill: none; stroke: currentColor;
transition: transform 0.28s ease;
}
.footer__cta:hover {
background: rgba(63, 214, 232, 0.16); border-color: rgba(63, 214, 232, 0.55); color: #fff;
}
.footer__cta:hover svg { transform: translateX(3px); }
.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); }
.ctaLage__wege { max-width: 34rem; width: 100%; justify-self: end; }
.ctaLage__ort { max-width: 34rem; justify-self: end; width: 100%; }
@media (max-width: 900px) {
.ctaLage__wege, .ctaLage__ort { justify-self: start; max-width: 40rem; }
}
.ctaLage__ort { font-size: 0.86rem; align-items: start; }
.ctaLage__ort::before, .ctaLage__ort > span:first-child { margin-top: 0.15rem; }
.ctaFeld {
display: grid;
gap: 0.7rem;
align-content: start;
max-width: 34rem;
width: 100%;
justify-self: end;
}
.ctaFeld__haupt {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: clamp(1.05rem, 2vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.4rem);
border-radius: var(--radius);
text-decoration: none;
isolation: isolate;
background: linear-gradient(122deg, rgba(47, 77, 158, 0.62), rgba(47, 163, 186, 0.42));
border: 1px solid rgba(127, 208, 224, 0.34);
box-shadow: 0 18px 40px -30px rgba(0, 0, 0, 0.9);
transition:
border-color 0.55s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1),
box-shadow 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaFeld__haupt::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(100deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.02) 60%);
opacity: 0;
transition: opacity 0.55s ease;
}
.ctaFeld__zeichen {
display: grid;
place-items: center;
width: 46px; height: 46px;
border-radius: 13px;
background: rgba(255, 255, 255, 0.17);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #fff;
transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__zeichen svg { width: 22px; height: 22px; }
.ctaFeld__inhalt { display: grid; gap: 0.16rem; }
.ctaFeld__titel { font-size: 1.08rem; font-weight: 660; color: #fff; line-height: 1.3; }
.ctaFeld__text { font-size: 0.86rem; color: rgba(233, 243, 250, 0.78); line-height: 1.45; }
.ctaFeld__pfeil {
display: grid;
place-items: center;
width: 36px; height: 36px;
border-radius: 50%;
border: 1px solid rgba(255, 255, 255, 0.28);
background: rgba(255, 255, 255, 0.08);
color: #fff;
transition: transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1), background 0.55s ease;
}
.ctaFeld__pfeil svg { width: 16px; height: 16px; }
.ctaFeld__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; }
.ctaDirekt {
position: relative;
display: grid;
gap: 0.1rem;
padding: clamp(0.95rem, 1.8vw, 1.2rem);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.12);
text-decoration: none;
overflow: hidden;
transition:
border-color 0.55s ease,
background-color 0.55s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen {
display: grid;
place-items: center;
width: 34px; height: 34px;
margin-bottom: 0.55rem;
border-radius: 10px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.2);
color: #7fd0e0;
transition: background 0.55s ease, border-color 0.55s ease, transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaDirekt__zeichen svg { width: 17px; height: 17px; }
.ctaDirekt__art {
font-family: var(--font-mono);
font-size: 0.63rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(127, 208, 224, 0.82);
}
.ctaDirekt__wert {
font-size: 0.98rem;
font-weight: 620;
color: #fff;
line-height: 1.3;
overflow-wrap: anywhere;
}
.ctaDirekt__zusatz { font-size: 0.78rem; color: var(--dark-text); line-height: 1.4; margin-top: 0.12rem; }
.ctaFeld__ort {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.2rem 0 0;
padding: 0.75rem 0.9rem;
border-radius: var(--radius);
border: 1px dashed rgba(255, 255, 255, 0.12);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
color: rgba(233, 243, 250, 0.66);
}
.ctaFeld__ort svg { width: 15px; height: 15px; flex: none; color: #7fd0e0; }
@media (hover: hover) {
.ctaFeld__haupt:hover {
transform: translateY(-3px);
border-color: rgba(127, 208, 224, 0.55);
box-shadow: 0 30px 56px -34px rgba(0, 0, 0, 0.95);
}
.ctaFeld__haupt:hover::after { opacity: 1; }
.ctaFeld__haupt:hover .ctaFeld__zeichen { transform: scale(1.05); background: rgba(255, 255, 255, 0.24); }
.ctaFeld__haupt:hover .ctaFeld__pfeil { transform: translateX(3px); background: rgba(255, 255, 255, 0.18); }
.ctaDirekt:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.075);
border-color: rgba(127, 208, 224, 0.36);
}
.ctaDirekt:hover .ctaDirekt__zeichen {
transform: scale(1.06);
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.4);
}
}
html.js [data-auftritt="cta"] .ctaFeld > * {
opacity: 0;
transform: translateY(16px);
transition: opacity 0.7s ease var(--wg, 0s), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) var(--wg, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld > * { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(1) { --wg: 0.18s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(2) { --wg: 0.3s; }
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(3) { --wg: 0.42s; }
@media (max-width: 900px) {
.ctaFeld { justify-self: start; max-width: 40rem; }
}
@media (max-width: 460px) {
.ctaFeld__paar { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="cta"] .ctaFeld > * { opacity: 1; transform: none; transition: none; }
.ctaFeld__haupt, .ctaDirekt, .ctaFeld__zeichen, .ctaDirekt__zeichen, .ctaFeld__pfeil { transition: none; }
}
.ctaFeld__text { font-size: 0.83rem; }
#kontakt .ctaFeld__ort { font-size: 0.73rem; gap: 0.55rem; padding: 0.7rem 0.85rem; }
#kontakt .ctaLage__punkte {
gap: 0;
margin-top: 0.75rem;
max-width: 30rem;
padding: 0.15rem 1.15rem;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius);
background: rgba(255, 255, 255, 0.03);
}
#kontakt .ctaLage__punkte li:last-child { border-bottom: 0; }
#kontakt .ctaLage__punkte li {
grid-template-columns: auto minmax(0, 1fr);
gap: 0.85rem;
padding: 0.72rem 0;
font-size: 0.92rem;
color: rgba(233, 243, 250, 0.86);
border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
#kontakt .ctaLage__punkte i {
width: 30px; height: 30px;
border-radius: 9px;
background: rgba(127, 208, 224, 0.12);
border: 1px solid rgba(127, 208, 224, 0.2);
transition: background-color 0.5s ease, border-color 0.5s ease;
}
#kontakt .ctaLage__punkte i::after {
left: 11px; top: 8px;
width: 5px; height: 9px;
border-color: #7fd0e0;
border-width: 0 1.9px 1.9px 0;
}
@media (hover: hover) {
#kontakt .ctaLage__punkte li:hover i {
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.38);
}
}
#kontakt .ctaLage__text { gap: 1.1rem; }
#kontakt .ctaLage__lead { max-width: 34ch; color: rgba(233, 243, 250, 0.78); }
@media (prefers-reduced-motion: reduce) {
#kontakt .ctaLage__punkte i { transition: none; }
}
@media (min-width: 901px) {
#kontakt .ctaLage { align-items: stretch; }
#kontakt .ctaFeld { height: 100%; align-content: space-between; gap: 0.9rem; }
#kontakt .ctaLage__text { align-content: start; }
}
.ctaFeld__termin {
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
padding: clamp(0.95rem, 1.8vw, 1.2rem) clamp(1.1rem, 2.2vw, 1.4rem);
border-radius: var(--radius);
text-decoration: none;
background: rgba(255, 255, 255, 0.045);
border: 1px solid rgba(255, 255, 255, 0.12);
transition:
border-color 0.55s ease,
background-color 0.55s ease,
transform 0.6s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.ctaFeld__termin .ctaFeld__zeichen {
width: 40px; height: 40px;
background: rgba(127, 208, 224, 0.12);
border-color: rgba(127, 208, 224, 0.2);
color: #7fd0e0;
}
.ctaFeld__termin .ctaFeld__zeichen svg { width: 19px; height: 19px; }
.ctaFeld__termin .ctaFeld__titel { font-size: 1rem; }
.ctaFeld__termin .ctaFeld__pfeil {
width: 32px; height: 32px;
border-color: rgba(255, 255, 255, 0.18);
background: transparent;
}
@media (hover: hover) {
.ctaFeld__termin:hover {
transform: translateY(-3px);
background: rgba(255, 255, 255, 0.075);
border-color: rgba(127, 208, 224, 0.36);
}
.ctaFeld__termin:hover .ctaFeld__zeichen {
transform: scale(1.05);
background: rgba(127, 208, 224, 0.2);
border-color: rgba(127, 208, 224, 0.4);
}
.ctaFeld__termin:hover .ctaFeld__pfeil { transform: translateX(3px); background: rgba(255, 255, 255, 0.12); }
}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(4) { --wg: 0.54s; }
@media (prefers-reduced-motion: reduce) { .ctaFeld__termin { transition: none; } }
#kontakt .ctaFeld .ctaLage__punkte { max-width: none; margin-top: 0; }
@media (min-width: 901px) {
#kontakt .ctaLage { align-items: center; }
#kontakt .ctaFeld { height: auto; align-content: start; gap: 0.7rem; }
}
html.js [data-auftritt="cta"] .ctaFeld > *:nth-child(5) { --wg: 0.66s; }
#kontakt .ctaFeld__ort { margin: 0; }
#kontakt .ctaLage__lead + .ctaLage__lead { margin-top: -0.25rem; }
#kontakt .ctaLage__lead:last-of-type { color: rgba(233, 243, 250, 0.62); font-size: 0.95rem; }
.ctaText {
padding: clamp(1rem, 2vw, 1.25rem) clamp(1.1rem, 2.2vw, 1.35rem);
border-radius: var(--radius);
border: 1px solid rgba(255, 255, 255, 0.11);
background: rgba(255, 255, 255, 0.038);
max-width: 30rem;
}
.ctaText--ruhig { background: rgba(255, 255, 255, 0.022); border-color: rgba(255, 255, 255, 0.08); }
#kontakt .ctaText .ctaLage__lead { margin: 0; max-width: none; }
#kontakt .ctaText--ruhig .ctaLage__lead { color: rgba(233, 243, 250, 0.66); font-size: 0.95rem; }
#kontakt .ctaLage__lead + .ctaLage__lead { margin-top: 0; }
#kontakt .ctaLage__text { gap: 0.85rem; }
#kontakt .ctaLage__text .kicker { margin-bottom: 0.15rem; }
#kontakt .ctaLage__text h2 { margin-bottom: 0.35rem; }
@media (min-width: 901px) {
#kontakt .ctaLage {
grid-template-columns: minmax(0, 1fr);
gap: clamp(2rem, 3.5vw, 2.8rem);
justify-items: center;
text-align: center;
padding-right: 0;
}
#kontakt .ctaLage__text { justify-items: center; max-width: 44rem; gap: 1rem; }
#kontakt .ctaFeld { justify-self: center; max-width: 40rem; height: auto; }
}
#kontakt .ctaLage__lead { max-width: 52ch; margin-inline: auto; }
#kontakt .ctaFeld, #kontakt .ctaFeld * { text-align: left; }
#kontakt .ctaFeld__ort { justify-content: flex-start; }
@media (min-width: 1100px) {
#kontakt .ctaLage { padding-right: 0; }
}
html.js [data-auftritt="cta"] .ctaLage__text > * {
opacity: 0;
translate: 0 42px;
scale: 0.96;
filter: blur(6px);
transition:
opacity 0.85s ease var(--cd, 0s),
translate 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
scale 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--cd, 0s),
filter 0.8s ease var(--cd, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__text > * {
opacity: 1; translate: 0 0; scale: 1; filter: blur(0);
}
html.js [data-auftritt="cta"] .ctaFeld__haupt {
opacity: 0;
transform: translateY(60px) scale(0.9);
transition:
opacity 0.8s ease 0.34s,
transform 1s cubic-bezier(0.18, 1.02, 0.3, 1) 0.34s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__haupt { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld__paar { opacity: 1; transform: none; transition: none; }
html.js [data-auftritt="cta"] .ctaDirekt {
opacity: 0;
transition:
opacity 0.75s ease var(--dz, 0s),
transform 0.95s cubic-bezier(0.18, 1.02, 0.3, 1) var(--dz, 0s);
}
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(1) { transform: translateX(-70px) scale(0.94); --dz: 0.48s; }
html.js [data-auftritt="cta"] .ctaDirekt:nth-child(2) { transform: translateX(70px) scale(0.94); --dz: 0.58s; }
html.js [data-auftritt="cta"].ist-auf .ctaDirekt { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte {
opacity: 0;
transform: translateY(46px);
transition: opacity 0.8s ease 0.68s, transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.68s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld .ctaLage__punkte { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li {
opacity: 0;
transform: translateX(-24px);
transition: opacity 0.6s ease var(--pz, 0s), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte li { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(1) { --pz: 0.86s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(2) { --pz: 0.96s; }
html.js [data-auftritt="cta"] .ctaLage__punkte li:nth-child(3) { --pz: 1.06s; }
html.js [data-auftritt="cta"] .ctaLage__punkte i {
opacity: 0;
transform: scale(0.4);
transition: opacity 0.45s ease var(--pz, 0s), transform 0.6s cubic-bezier(0.34, 1.5, 0.5, 1) var(--pz, 0s);
}
html.js [data-auftritt="cta"].ist-auf .ctaLage__punkte i { opacity: 1; transform: none; }
html.js [data-auftritt="cta"] .ctaFeld__ort {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s ease 1.16s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.16s;
}
html.js [data-auftritt="cta"].ist-auf .ctaFeld__ort { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
html.js [data-auftritt="cta"] .ctaLage__text > *,
html.js [data-auftritt="cta"] .ctaFeld__haupt,
html.js [data-auftritt="cta"] .ctaDirekt,
html.js [data-auftritt="cta"] .ctaFeld .ctaLage__punkte,
html.js [data-auftritt="cta"] .ctaLage__punkte li,
html.js [data-auftritt="cta"] .ctaLage__punkte i,
html.js [data-auftritt="cta"] .ctaFeld__ort {
opacity: 1; transform: none; translate: none; scale: none; filter: none; transition: none;
}
}
.footer__col h3 {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.05rem;
}
.footer__col h3::before {
content: "";
width: 14px; height: 1px;
background: currentColor;
opacity: 0.55;
}
.footer__col a {
position: relative;
display: grid;
grid-template-columns: 0fr minmax(0, 1fr);
align-items: center;
gap: 0;
padding: 0.3rem 0;
width: fit-content;
transition: color 0.4s ease, grid-template-columns 0.45s cubic-bezier(0.4, 0.05, 0.25, 1), gap 0.45s ease;
}
.footer__col a::before {
content: "";
width: 0;
height: 1px;
overflow: hidden;
background: #7fd0e0;
transition: width 0.45s cubic-bezier(0.4, 0.05, 0.25, 1);
}
.footer__col a > span,
.footer__col a { white-space: nowrap; }
.footer__adresse { gap: 0.75rem; }
.footer__adresse span,
.footer__adresse a {
display: grid;
grid-template-columns: 16px minmax(0, 1fr);
align-items: start;
gap: 0.6rem;
width: fit-content;
}
.footer__adresse svg {
width: 15px; height: 15px;
margin-top: 0.28rem;
color: rgba(127, 208, 224, 0.75);
flex: none;
transition: color 0.4s ease;
}
@media (hover: hover) {
.footer__col a:hover {
color: #fff;
grid-template-columns: 10px minmax(0, 1fr);
gap: 0.55rem;
transform: none;
}
.footer__col a:hover::before { width: 10px; }
.footer__adresse a:hover { color: #fff; transform: none; }
.footer__adresse a:hover svg { color: var(--teal); }
}
@media (prefers-reduced-motion: reduce) {
.footer__col a, .footer__col a::before, .footer__adresse a, .footer__adresse svg { transition: none; }
}
.footer__adresse a::before { content: none; display: none; }
.footer__adresse a { grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; white-space: normal; }
@media (hover: hover) {
.footer__adresse a:hover { grid-template-columns: 16px minmax(0, 1fr); gap: 0.6rem; }
}
@media (max-width: 700px) {
html.ballzuerst .hero__system {
display: grid;
place-items: center;
position: fixed;
inset: 0;
z-index: 420;
pointer-events: none;
background: #0a1322;
}
html.ballzuerst .hero__orbit { display: none; }
html.ballzuerst .orbwrap {
width: min(76vw, 340px);
margin: 0;
opacity: 1 !important;
transform: none !important;
filter: none !important;
animation: none !important;
transition: none !important;
}
html.ballzuerst .bootfx,
html.ballzuerst .bootfx__marke,
html.ballzuerst .bootfx__marke * { animation-play-state: paused !important; }
html.ballzuerst .bootfx__marke { opacity: 0; }
.hero__system { transition: opacity 0.45s ease; }
html.ballaus .hero__system { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
html.ballzuerst .hero__system { display: none; }
}
@media (max-width: 700px) {
html.ballzuerst .hero [data-explode],
html.ballzuerst .hero__marquee,
html.ballzuerst .hero__marquee-track,
html.ballzuerst .hero__orbit,
html.ballzuerst .hero__caret { animation-play-state: paused !important; }
}
@media (max-width: 700px) {
html.ballzuerst .bootfx { background: transparent; }
html.ballzuerst .bootfx::after { display: none; }
html.ballzuerst #bootfx { opacity: 0; }
html.ballzuerst .orbwrap { width: min(88vw, 400px); }
}
@media (min-width: 761px) and (max-width: 1100px) {
.pscroll__sticky { height: auto; padding-bottom: var(--s-4); }
.pscroll__viewport { flex: 0 1 auto; }
.pscroll__track { height: auto; }
.pslide {
height: auto;
align-content: center;
padding-block: clamp(1.5rem, 3vh, 2.5rem);
}
}
@media (max-width: 1100px) {
.pscroll__nav { margin-bottom: clamp(3.5rem, 8vh, 5rem); }
}
@media (max-width: 1100px) {
.pslide__link { padding-block: 0.55rem; }
}
@media (max-width: 760px) {
.demat__pin { padding-top: 1.1rem; }
.demat .section__head { padding-block: 0.6rem 0.9rem; }
.demat .section__head .section__intro { display: none; }
.demat__lage { padding-bottom: 0; gap: 0.9rem; }
.demat__text { gap: 0.55rem; }
.demat__text h3 { font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
.demat__lead { font-size: 0.92rem; line-height: 1.5; }
.demat__text ul { gap: 0.3rem; }
.demat__text ul li { font-size: 0.88rem; line-height: 1.4; }
.demat__text a { margin-top: 0.35rem; }
.dfenster { max-height: 30vh; }
.dfenster__inhalt { max-height: calc(30vh - 34px); overflow: hidden; }
}
@media (max-width: 620px) {
.core { padding: 1.4rem 1.25rem 1.5rem; }
.core__copy { gap: 0.7rem; }
.core__index { margin-bottom: 0; }
}
@media (max-width: 620px) {
.stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
padding: 0.2rem 0;
border-top: 1px solid rgba(47, 77, 158, 0.13);
border-bottom: 1px solid rgba(47, 77, 158, 0.13);
}
.stats > * { max-width: none; }
#unternehmen .stat {
padding: 1.15rem 0.6rem;
border: 0;
border-radius: 0;
background: transparent;
border-bottom: 1px solid rgba(47, 77, 158, 0.1);
}
#unternehmen .stat:nth-child(odd) { border-right: 1px solid rgba(47, 77, 158, 0.1); }
#unternehmen .stat:nth-child(4) { border-bottom: 0; }
#unternehmen .stat:nth-child(5) { grid-column: 1 / -1; border-right: 0; border-bottom: 0; }
}
@media (max-width: 760px) and (max-height: 880px) {
.demat__pin { padding-top: 0.7rem; }
.demat .section__head { padding-block: 0.4rem 0.7rem; }
.demat .section__head h2 { font-size: clamp(1.5rem, 6.4vw, 1.9rem); line-height: 1.15; }
.demat .section__head .kicker { margin-bottom: 0.35rem; }
.demat__lage { gap: 0.7rem; }
.dfenster { max-height: 21vh; }
.dfenster__inhalt { max-height: calc(21vh - 30px); }
.demat__fort { margin-top: 0.5rem; }
.demat__marken { gap: 0.3rem; }
.demat__text { gap: 0.45rem; }
.demat__text h3 { font-size: clamp(1.2rem, 5.2vw, 1.4rem); }
.demat__lead { font-size: 0.88rem; line-height: 1.45; }
.demat__text ul li { font-size: 0.85rem; }
.demat__nr { font-size: 0.78rem; }
}
@media (max-width: 760px) {
.demat__marken { gap: 0.4rem; }
.demat__marken span { font-size: 0; gap: 0; }
.demat__marken span em { font-size: 0.72rem; letter-spacing: 0.1em; }
}
@media (max-width: 760px) and (max-height: 820px) {
.demat__marken { display: none; }
.dfenster { max-height: 19vh; }
.dfenster__inhalt { max-height: calc(19vh - 28px); }
.demat .section__head { padding-block: 0.3rem 0.5rem; }
}
@media (max-width: 760px) and (max-height: 770px) {
.demat .section__head .kicker { display: none; }
.demat .section__head h2 { font-size: clamp(1.35rem, 6vw, 1.6rem); }
.dfenster { max-height: 16vh; }
.dfenster__inhalt { max-height: calc(16vh - 26px); }
.demat__text ul li { font-size: 0.82rem; }
}
@media (max-width: 1100px), (hover: none) {
.cores-stack .core::before {
inset: -1px;
height: auto;
border-radius: inherit;
padding: 2px;
}
.cores-stack .core::after { display: none; }
}
@media (min-width: 761px) and (max-width: 1100px) {
.steps.steps.steps { --spalten: 1; }
}
@media (min-width: 940px) and (max-width: 1119px) {
.dsgpt .ticks--cols { grid-template-columns: minmax(0, 1fr); }
}
.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);
}
@keyframes referenz-schweben {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.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; }
}
.reffilter {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.55rem;
margin-top: clamp(1.6rem, 3.5vw, 2.4rem);
}
.reffilter__chip {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.62rem 1.15rem;
border-radius: 999px;
border: 1px solid rgba(47, 77, 158, 0.18);
background: var(--surface);
font-size: 0.85rem;
font-weight: 600;
color: var(--ink-2);
cursor: pointer;
box-shadow: 0 6px 18px -12px rgba(12, 22, 38, 0.35);
transition:
border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease,
transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.reffilter__chip i {
font-style: normal;
font-family: var(--font-mono);
font-size: 0.62rem;
line-height: 1;
padding: 0.28rem 0.5rem;
border-radius: 999px;
background: rgba(47, 77, 158, 0.09);
color: var(--ink-2);
transition: background-color 0.3s ease, color 0.3s ease;
}
@media (hover: hover) {
.reffilter__chip:hover {
border-color: rgba(47, 163, 186, 0.5);
color: var(--ink);
transform: translateY(-2px);
box-shadow: 0 12px 24px -14px rgba(12, 22, 38, 0.45);
}
}
.reffilter__chip.is-aktiv {
border-color: transparent;
background: linear-gradient(120deg, var(--blue), var(--teal));
color: #fff;
box-shadow: 0 14px 30px -14px rgba(47, 163, 186, 0.55);
}
.reffilter__chip.is-aktiv i { background: rgba(255, 255, 255, 0.2); color: #fff; }
.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);
}
}
.stadt:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
@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__vor {
display: block;
font-family: var(--font-mono);
font-size: 0.68rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-2);
opacity: 0.75;
margin-bottom: 0.15rem;
}
.section--dark .stat__vor { color: var(--dark-text); }
.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;
}
@keyframes siegel-dreht { to { transform: rotate(360deg) translateZ(0); } }
.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); }
}
.section--dark .ikachel {
border-color: var(--dark-line);
background: rgba(255, 255, 255, 0.04);
}
.section--dark .ikachel p { color: #fff; }
.section--dark .ikachel__symbol { color: var(--teal); }
@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__hinweis {
margin: 0.5rem 0 0;
font-size: 0.92rem;
line-height: 1.55;
color: var(--ink-2);
}
.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--1 { --spalten: 1; }
.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:focus-visible) { outline: 2px solid var(--teal); outline-offset: 3px; }
.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__regler:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
.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);
}
.fpille:has(input:focus-visible) span { outline: 2px solid var(--teal); outline-offset: 2px; }
.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__ergebnis b { color: var(--teal-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; }
}
.shopbilder {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(0.9rem, 2vw, 1.4rem);
margin-top: clamp(1.8rem, 4vw, 2.6rem);
}
.shopbilder--n5 { grid-template-columns: repeat(6, 1fr); }
.shopbilder--n5 .shopbild { grid-column: span 2; }
.shopbilder--n5 .shopbild:nth-last-child(-n+2) { grid-column: span 3; }
.shopbild {
display: flex;
flex-direction: column;
gap: 0.9rem;
padding: clamp(0.9rem, 1.8vw, 1.1rem);
border-radius: 18px;
border: 1px solid var(--line);
background: var(--surface);
text-decoration: none;
box-shadow: 0 10px 24px -20px rgba(12, 22, 38, 0.3);
}
.shopbild__rahmen {
display: block;
border-radius: 12px;
overflow: hidden;
background: linear-gradient(150deg, rgba(47, 77, 158, 0.07), rgba(47, 163, 186, 0.1));
padding: clamp(0.7rem, 1.6vw, 1rem);
}
.shopbild__svg { display: block; width: 100%; height: auto; }
.shopbild__fuss { display: flex; flex-direction: column; gap: 0.15rem; padding: 0 0.3rem 0.2rem; }
.shopbild__fuss b { font-size: 1rem; font-weight: 700; color: var(--ink); }
.shopbild__fuss span { font-size: 0.84rem; color: var(--ink-2); }
html.js .shopbild[data-reveal],
.shopbild {
transition:
opacity 0.7s ease var(--d, 0s),
translate 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
scale 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) var(--d, 0s),
transform 0.85s cubic-bezier(0.16, 1, 0.3, 1),
border-color 0.85s cubic-bezier(0.16, 1, 0.3, 1),
box-shadow 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (hover: hover) {
a.shopbild:hover {
transform: translateY(-3px);
border-color: rgba(47, 163, 186, 0.35);
box-shadow: 0 24px 44px -26px rgba(12, 22, 38, 0.4);
}
}
a.shopbild:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.section__knopf { margin: clamp(1.8rem, 4vw, 2.6rem) 0 0; text-align: center; }
@media (max-width: 900px) {
.shopbilder { grid-template-columns: repeat(2, 1fr); }
.shopbilder--n5 { grid-template-columns: repeat(2, 1fr); }
.shopbilder--n5 .shopbild,
.shopbilder--n5 .shopbild:nth-last-child(-n+2) { grid-column: auto; }
.shopbilder--n5 .shopbild:last-child { grid-column: span 2; }
}
@media (max-width: 560px) {
.shopbilder, .shopbilder--n5 { grid-template-columns: 1fr; }
.shopbilder--n5 .shopbild:last-child { grid-column: auto; }
}
@media (prefers-reduced-motion: reduce) {
html.js .shopbild[data-reveal], .shopbild { transition: none; }
a.shopbild:hover { transform: 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; }
@keyframes logoband-lauf {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
.logoband:hover .logoband__spur { animation-play-state: paused; }
}
.logoband__reihe:focus-within .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; }
}
.kstimmen__reihe:focus-within .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__motto {
text-align: center;
text-wrap: pretty;
margin-top: 1.1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--line);
width: 100%;
}
.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;
}
@keyframes teamlaser { to { transform: rotate(360deg) translateZ(0); } }
.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__bild--platzhalter {
display: grid;
place-items: center;
font-size: clamp(2rem, 4vw, 2.8rem);
font-weight: 700;
color: var(--blue);
}
.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; }
}
.bildrahmen--logo {
display: grid;
place-items: center;
padding: clamp(2rem, 5vw, 3.5rem);
background: #fff;
}
.bildrahmen--logo img {
width: 100%;
max-width: 22rem;
height: auto;
object-fit: contain;
}
.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 h3 { font-size: 1.08rem; line-height: 1.35; margin: 0 0 0.5rem; }
.zstation__text h3 a { color: inherit; text-decoration: none; }
.zstation__text h3 a:hover { color: var(--blue); }
.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); }
.tkarten {
--spalten: 2;
--luecke: clamp(1rem, 1.8vw, 1.6rem);
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--luecke);
}
.tkarten.sp-2 { --spalten: 2; }
.tkarten.sp-3 { --spalten: 3; }
.tkarten > * {
flex: 0 1 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
min-width: 0;
}
.tkarte {
position: relative;
padding: clamp(1.4rem, 2.4vw, 2rem);
padding-top: clamp(2.6rem, 3.6vw, 3.2rem);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg);
box-shadow: var(--shadow);
transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
}
.tkarte:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.tkarte::before {
content: "";
position: absolute;
inset: 0 auto auto 0;
width: 3.4rem;
height: 3px;
margin: clamp(1.4rem, 2.4vw, 2rem);
border-radius: 2px;
background: linear-gradient(90deg, var(--blue), var(--teal, #2fa3ba));
}
.tkarte__nr {
position: absolute;
top: clamp(1.1rem, 2vw, 1.6rem);
right: clamp(1.2rem, 2.2vw, 1.8rem);
font-family: var(--font-mono);
font-size: 0.76rem;
letter-spacing: 0.06em;
color: var(--ink-2);
opacity: 0.55;
}
.tkarte p { color: var(--ink-2); margin: 0; }
@media (max-width: 900px) { .tkarten { --spalten: 1 !important; } }
@media (prefers-reduced-motion: reduce) {
.tkarte { transition: none; }
.tkarte:hover { transform: none; }
}
.tkarten--1plus2 {
display: grid;
grid-template-columns: 1.55fr 1fr;
grid-auto-rows: min-content;
align-items: start;
}
.tkarten--1plus2 > * { flex: none; }
.tkarten--1plus2 > :first-child { grid-column: 1; grid-row: 1 / span 2; }
.tkarten--1plus2 > :nth-child(2) { grid-column: 2; grid-row: 1; }
.tkarten--1plus2 > :nth-child(3) { grid-column: 2; grid-row: 2; }
@media (max-width: 900px) {
.tkarten--1plus2 { grid-template-columns: 1fr; }
.tkarten--1plus2 > :first-child,
.tkarten--1plus2 > :nth-child(2),
.tkarten--1plus2 > :nth-child(3) { grid-column: 1; grid-row: auto; }
}
.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; }
.zeitleiste [id] { scroll-margin-top: var(--header-h, 6rem); }
.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--getrennt > .prosa__zitat + p { border-top: 0; padding-top: 0; }
.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;
}
@keyframes teamband-lauf {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(-50%, 0, 0); }
}
@media (hover: hover) {
.teamband:hover .teamband__spur { animation-play-state: paused; }
}
.teamband__reihe:focus-within .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;
}
@keyframes balken-fuellen {
from { transform: scaleX(0); }
to { transform: scaleX(1); }
}
.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;
}
@keyframes balken-glanz {
from { transform: translateX(0); }
to { transform: translateX(350%); }
}
.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); }
.balkenblock__text h2 { text-wrap: balance; hyphens: manual; }
.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; }
.hero__chips {
list-style: none;
margin: 1.4rem 0 0;
padding: 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.hero__chips li {
padding: 0.42rem 0.95rem;
border-radius: 999px;
border: 1px solid rgba(127, 208, 224, 0.32);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.9);
font-family: var(--font-mono);
font-size: 0.78rem;
letter-spacing: 0.02em;
white-space: nowrap;
transition: border-color 0.3s ease, background-color 0.3s ease;
}
@media (hover: hover) {
.hero__chips li:hover { border-color: rgba(127, 208, 224, 0.7); background: rgba(127, 208, 224, 0.14); }
}
@media (prefers-reduced-motion: reduce) { .hero__chips li { transition: none; } }
.page-hero h1,
.section__head h2,
.section__head h3 { hyphens: manual; }
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(2):nth-child(4n + 1) ~ * {
flex-basis: calc((100% - var(--luecke)) / 2);
}
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1),
:is(.lkarten, .goals, .tkarten, .preise, .team).sp-4 > :nth-last-child(3):nth-child(4n + 1) ~ * {
flex-basis: calc((100% - 2 * var(--luecke)) / 3);
}
@media (max-width: 900px) {
:is(.lkarten, .goals, .tkarten, .preise, .team) > * {
flex-basis: calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten));
}
}
.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; }
.preis--dunkel .ticks li { color: rgba(255, 255, 255, 0.8); }
.preis--dunkel .preis__cta {
border-color: rgba(127, 208, 224, 0.5);
color: #fff;
}
@media (hover: hover) {
.preis--dunkel .preis__cta:hover { background: rgba(127, 208, 224, 0.16); }
}
.preis--dunkel .preis__cta {
background: transparent;
border: 1px solid rgba(127, 208, 224, 0.55);
color: #fff;
}
.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);
}
@media (min-width: 981px) {
.page-hero--split .page-hero__inner {
max-width: 74rem;
display: grid;
grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
gap: clamp(1.6rem, 4vw, 3.2rem);
align-items: center;
text-align: left;
}
.page-hero--split .krumen ol,
.page-hero--split .hero__cta,
.page-hero--split .hero__chips { justify-content: flex-start; }
.page-hero--split .page-hero__spalte { grid-column: 1; }
.page-hero--split .hero__mockup { grid-column: 2; }
}
.hero__mockup {
position: relative;
display: grid;
place-items: center;
margin-top: clamp(2rem, 5vw, 0rem);
}
.hero__phone {
position: relative;
width: clamp(210px, 24vw, 290px);
aspect-ratio: 9 / 17.5;
border-radius: 30px;
padding: 9px;
background: #0f1724;
border: 1px solid rgba(127, 208, 224, 0.28);
box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.hero__phone-ohr {
position: absolute;
top: 16px;
left: 50%;
translate: -50% 0;
width: 32%;
height: 5px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.22);
z-index: 2;
}
.hero__phone-video {
display: block;
width: 100%;
height: 100%;
border-radius: 22px;
object-fit: cover;
background: #16202f;
}
.hero__mockup-chip {
position: absolute;
z-index: 3;
display: grid;
gap: 0.1rem;
padding: 0.6rem 0.9rem;
border-radius: 14px;
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
color: var(--ink);
font-size: 0.78rem;
line-height: 1.25;
text-align: left;
}
.hero__mockup-chip b { font-size: 0.86rem; }
.hero__mockup-chip span { color: var(--ink-2); font-size: 0.72rem; }
.hero__mockup-chip--1 { top: 12%; left: -4%; }
.hero__mockup-chip--2 { bottom: 16%; right: -6%; }
@media (max-width: 560px) {
.hero__mockup-chip--1 { left: 0; }
.hero__mockup-chip--2 { right: 0; }
}
.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;
}
.rfeld input:focus-visible {
outline: none;
border-color: var(--marke);
box-shadow: 0 0 0 3px rgba(52, 165, 191, 0.18);
}
.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; }
.aufruf__link { color: inherit; text-decoration: none; border-bottom: 2px solid rgba(255, 255, 255, 0.5); padding-bottom: 0.1em; transition: border-color 0.25s ease; }
@media (hover: hover) { .aufruf__link:hover { border-color: #fff; } }
.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; }
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1),
.galerie.sp-3 > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: span 3; }
.galerie.sp-3 > :last-child:nth-child(3n + 1) { grid-column: 3 / 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 h4 { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 700; margin-top: 1.8rem; }
.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); }
}
.aufruf--schlicht .aufruf__knopf:focus-visible { outline: 3px solid var(--teal); outline-offset: 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; }
@keyframes hoerPuls {
0%, 100% { height: 30%; }
50% { height: 100%; }
}
.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; }
@keyframes hoerRing {
0% { transform: scale(0.85); opacity: 0.8; }
100% { transform: scale(1.35); opacity: 0; }
}
.hoer--welle .hoer__knopf:focus-visible { outline: 3px solid #7fe1f0; outline-offset: 4px; }
.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:focus-visible { outline: 2px solid #7fe1f0; outline-offset: 6px; }
.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; }
.section--dark .case__blocksymbol { box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.8); }
@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; }
}
@keyframes galerieLauf {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@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; }
.funnel__karten--4 { --spalten: 4; }
@media (max-width: 900px) { .funnel__karten--4 { --spalten: 2; } }
.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); }
.section--dark .paket--beliebt { border-color: rgba(127, 208, 224, 0.6); }
.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 { border-top-color: rgba(255, 255, 255, 0.12); }
.section--dark .merkmal__text :is(h2, h3, h4) { color: #fff; }
.section--dark .merkmal__text p { color: var(--dark-text); }
@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); }
.sprung__chip:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@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.sp-5 .lkarte { padding: 1.4rem 1rem 1.3rem; }
@media (max-width: 1280px) { .lkarten.sp-5 { --spalten: 3; } }
.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; }
.tkarten.sp-1 { --spalten: 1; }
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); }
.lkarte__deko {
position: absolute;
top: -1.4rem;
right: 0.6rem;
width: 150px;
height: 150px;
color: var(--marke, #2f5fd8);
opacity: 0.06;
rotate: -10deg;
pointer-events: none;
transition: translate 1s cubic-bezier(0.16, 1, 0.3, 1), rotate 1s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s ease;
}
.lkarte__deko svg { width: 100%; height: 100%; }
.lkarte--dunkel .lkarte__deko { color: #fff; opacity: 0.08; }
@media (hover: hover) {
.lkarte:hover .lkarte__deko { translate: -4px 4px; rotate: -4deg; opacity: 0.1; }
}
@media (max-width: 560px) { .lkarte__deko { width: 110px; height: 110px; } }
.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; }
.kacheln--chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.kacheln--chips .kachel { padding: 0.55rem 1.1rem; border-radius: 999px; font-size: 0.92rem; font-weight: 600; color: var(--ink-2); }
.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; }
}
.tour:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@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; } }
.stat__vor:empty::before { content: "\00a0"; }
.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--dunkel .preis__grund { background: rgba(255, 255, 255, 0.06); border-left-color: rgba(127, 208, 224, 0.5); color: var(--dark-text); }
.preis--dunkel .preis__grund b { color: #fff; }
.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);
}
.section--dark .case .case__vorsatz { color: #7fd0e0; }
.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__pfeil:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
.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); }
.schau__punkt:focus-visible { outline: 3px solid var(--marke); outline-offset: 3px; }
.section--dark .schau__punkt { background: rgba(255, 255, 255, 0.3); }
@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;
}
.seiten-stand {
margin: 0 0 2.6rem;
text-align: center;
color: var(--muted);
font-family: var(--font-mono);
font-size: 0.82rem;
letter-spacing: 0.04em;
}
.hinweiskasten a { color: #7fd0e0; }
.hinweiskasten__link {
display: inline-block;
margin-top: 0.55rem;
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
transition: color 0.7s ease;
}
@media (hover: hover) { .hinweiskasten__link:hover { color: #b8ecf5; } }
.kacheln--kette { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 0.2rem; }
.kacheln--kette .kachel {
position: relative;
margin-block: 0.35rem;
padding: 0.6rem 1.15rem;
border-radius: 999px;
font-size: 0.94rem;
font-weight: 600;
color: var(--ink);
background: var(--surface);
border: 1px solid var(--line);
box-shadow: 0 8px 20px -16px rgba(12, 22, 38, 0.5);
}
.kacheln--kette .kachel + .kachel::before {
content: "";
display: block;
position: absolute;
left: -0.85rem;
top: 50%;
width: 0.7rem;
height: 2px;
translate: 0 -50%;
border-radius: 2px;
background: linear-gradient(90deg, rgba(47, 95, 216, 0.25), rgba(47, 163, 186, 0.6));
}
@media (max-width: 620px) {
.kacheln--kette .kachel + .kachel::before { display: none; }
.kacheln--kette { gap: 0.5rem; }
}
.section--dark .kacheln--chips .kachel,
.section--dark .kacheln--kette .kachel {
background: rgba(255, 255, 255, 0.07);
border-color: rgba(127, 225, 240, 0.22);
color: var(--dark-text, #e8eefc);
box-shadow: none;
}
.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; }
.section--dark .lkarte__ruht { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
.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__stufe:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.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); }
@keyframes konfig-auf { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: none; } }
.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:has(input:focus-visible) { outline: 2px solid var(--teal-ink); outline-offset: 3px; }
.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__ergebnis-zahlen { display: flex; flex-wrap: wrap; gap: 1rem 2.2rem; margin-bottom: 0.7rem; }
.konfig__ergebnis-zahlen span { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.konfig__ergebnis-zahlen b {
font-size: clamp(1.4rem, 2.6vw, 1.8rem);
font-weight: 800;
letter-spacing: -0.02em;
background: var(--grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.konfig__ergebnis-liste { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.konfig__ergebnis-liste li { padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-size: 0.8rem; color: var(--ink); }
.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__pille:has(input:focus-visible) span { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.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__posten li span { font-weight: 600; color: var(--ink); }
.konfig__posten li small { font-size: 0.74rem; font-weight: 400; color: var(--ink-2); }
.konfig__posten li small::before { content: " · "; }
.konfig__posten li b { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; color: var(--teal-ink); white-space: nowrap; }
.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); }
@keyframes konfig-puls { 0% { scale: 1; } 35% { scale: 1.05; } 100% { scale: 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__knopf:focus-visible { outline: 2px solid var(--teal-ink); outline-offset: 2px; }
.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)); }
.einbett.sp-1 { grid-template-columns: minmax(0, 1fr); max-width: 52rem; margin-inline: auto; }
@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__rahmen { position: relative; aspect-ratio: 16 / 9; background: #0d1526; overflow: hidden; }
.einbett { align-items: stretch; }
.einbett__rahmen iframe { position: absolute; top: 0; left: 50%; height: 100%; width: calc(var(--faktor, 1) * 100%); transform: translateX(-50%); border: 0; }
.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); }
.section--dark .einbett__karte { border-color: rgba(255,255,255,0.1); background: rgba(255,255,255,0.04); }
.section--dark .einbett__caption { color: #b9c4d8; border-color: rgba(255,255,255,0.1); }
.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; }