.skip {
position: fixed; left: 12px; top: -70px; z-index: 2000;
background: #EE7A08; color: #1B2F41;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
padding: 12px 20px; border-radius: 10px; text-decoration: none;
box-shadow: 0 12px 30px rgba(3, 12, 24, .35);
transition: top .18s ease;
}
.skip:focus { top: 12px; outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .skip { transition: none; } }
:root { --akzent: #B15A06; --meta: #5B748F; }
[style*="background:#081F38"], [style*="background:#0A2440"],
[style*="background:linear-gradient(180deg,#081F38"],
[style*="background:linear-gradient(180deg,#0A2440"],
.kd, .m-overlay, .so-row, .bs-cta {
--akzent: #EE7A08; --meta: #9DB2C7;
}
[style*="background:#fff"], [style*="background:#ffffff"],
[style*="background:#F4F7FA"], [style*="background:#f4f7fa"] {
--akzent: #B15A06; --meta: #5B748F;
}
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/sora-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('../assets/fonts/sora-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../assets/fonts/figtree-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 300 900; font-display: swap; src: url('../assets/fonts/figtree-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 100 800; font-display: swap; src: url('../assets/fonts/jetbrains-mono-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
body {
margin: 0;
font-family: 'Figtree', sans-serif;
color: #1B2F41;
background: #F4F7FA;
-webkit-font-smoothing: antialiased;
}
a { color: var(--akzent); text-decoration: none; }
a:hover { color: #E85F00; }
::selection { background: #EE7A08; color: #1B2F41; }
input::placeholder { color: #7E93AC; }
@keyframes gPulse {
0%, 100% { opacity: 1; }
50% { opacity: .3; }
}
.hv-cta-s:hover {
background: #E85F00 !important;
color: #fff !important;
transform: translateY(-1px) !important;
}
.hv-cta-l:hover {
background: #E85F00 !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
.hv-cta-f:hover {
background: #E85F00 !important;
transform: translateY(-1px) !important;
}
.hv-card { box-sizing: border-box; }
.hv-card:hover {
box-shadow: 0 18px 44px rgba(8, 31, 56, .1) !important;
transform: translateY(-3px) !important;
}
.hv-card-link:hover {
box-shadow: 0 18px 44px rgba(8, 31, 56, .1) !important;
transform: translateY(-3px) !important;
color: #1B2F41 !important;
}
.hv-lift:hover { transform: translateY(-4px) !important; }
.hv-cta-dark:hover {
background: #081F38 !important;
color: #fff !important;
transform: translateY(-2px) !important;
}
.hv-card-strong:hover {
box-shadow: 0 18px 44px rgba(8, 31, 56, .3) !important;
transform: translateY(-3px) !important;
}
.hv-card-strong-link:hover {
box-shadow: 0 18px 44px rgba(8, 31, 56, .3) !important;
transform: translateY(-3px) !important;
color: #fff !important;
}
.hv-card-glow:hover {
box-shadow: 0 28px 70px rgba(238,122,8, .2) !important;
transform: translateY(-3px) !important;
}
.hv-orange:hover { color: var(--akzent) !important; }
.hv-white:hover { color: #fff !important; }
.fo-orange:focus { border: 1px solid #EE7A08 !important; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid #EE7A08;
outline-offset: 2px;
}
@media (max-width: 1000px) {
[data-split] { grid-template-columns: 1fr !important; }
#nav-main { display: none !important; }
#topbar-nav { display: none !important; }
#hero-stage { height: auto; }
input {
min-width: 0;
width: 100%;
box-sizing: border-box;
}
h1, h2, h3 {
overflow-wrap: break-word;
hyphens: auto;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation: none !important;
transition: none !important;
}
}
[data-ga="serp"] { --ga-row: 52px; }
.ga-serp__bar {
display: flex; align-items: center; gap: 10px;
border: 1px solid #DCE4EC; border-radius: 999px; padding: 10px 16px;
}
.ga-serp__query {
font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #1B2F41;
white-space: nowrap; overflow: hidden;
}
.ga-serp__caret {
display: inline-block; width: 2px; height: 1.05em; background: #EE7A08;
vertical-align: -2px; animation: gaBlink 1.05s steps(1) infinite;
}
@keyframes gaBlink { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
.ga-serp__meta, .ga-serp__note {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: .16em; color: var(--meta);
}
.ga-serp__meta { margin: 16px 2px 10px; }
.ga-serp__note { margin-top: 16px; padding-left: 12px; transition: color .4s ease; }
.ga-serp__note--top { color: var(--akzent); }
.ga-serp__list { position: relative; height: calc(var(--ga-row) * 6); }
.ga-serp__row {
position: absolute; left: 0; right: 0; height: var(--ga-row);
display: flex; align-items: center; gap: 14px;
padding: 0 12px; border-radius: 10px; box-sizing: border-box;
border: 1px solid transparent; opacity: 0;
transition: transform .72s cubic-bezier(.34, 1.1, .34, 1),
opacity .4s ease, background-color .5s ease, box-shadow .5s ease;
}
.ga-serp__row--in { opacity: 1; }
.ga-serp__rank {
font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--meta);
width: 22px; flex: none; text-align: right; transition: color .4s ease;
}
.ga-serp__lines { flex: 1; display: flex; flex-direction: column; gap: 7px; }
.ga-serp__lines i { display: block; height: 7px; border-radius: 4px; background: #E8EEF4; }
.ga-serp__lines i:first-child { width: 52%; background: #DCE4EC; }
.ga-serp__lines i:last-child { width: 78%; height: 5px; }
.ga-serp__row--own { background: rgba(238,122,8, .07); border-color: rgba(238,122,8, .32); }
.ga-serp__row--own .ga-serp__rank { color: var(--akzent); font-weight: 500; }
.ga-serp__brand {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
letter-spacing: -.01em; color: #1B2F41;
}
.ga-serp__url { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--akzent); margin-top: 3px; }
.ga-serp__row--own.ga-serp__row--top {
background: rgba(238,122,8, .12);
box-shadow: 0 0 0 1px rgba(238,122,8, .5), 0 14px 34px -16px rgba(238,122,8, .8);
}
.ga-bars { position: relative; display: flex; align-items: flex-end; gap: 12px; height: 130px; }
.ga-bars__col {
flex: 1; border-radius: 4px 4px 0 0; background: #DCE4EC;
transform: scaleY(.04); transform-origin: bottom;
transition: transform .9s cubic-bezier(.22, .75, .2, 1);
}
.ga-bars__col--mid { background: #B9C9D9; }
.ga-bars__col--warm { background: #FF9A52; }
.ga-bars__col--hot { background: #EE7A08; }
.ga-bars__start {
position: absolute; top: -6px; bottom: 0; width: 1px;
border-left: 1px dashed rgba(238,122,8, .5); pointer-events: none;
}
.ga-bars__startlabel {
position: absolute; top: -6px; left: 8px; white-space: nowrap;
font-family: 'JetBrains Mono', monospace; font-size: 9px;
letter-spacing: .14em; color: var(--akzent);
}
.ga-post { position: relative; }
.ga-post__flight { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ga-post__heart { position: absolute; opacity: 0; animation: gaRise 1.9s cubic-bezier(.2, .8, .3, 1) forwards; }
.ga-post__heart path { fill: #EE7A08; }
@keyframes gaRise {
0%   { opacity: 0; transform: translateY(4px) scale(.4) }
18%  { opacity: .95; transform: translateY(-18px) scale(1) }
100% { opacity: 0; transform: translateY(-150px) scale(1) }
}
.ga-react { transition: color .35s ease; }
.ga-react svg { transition: transform .35s cubic-bezier(.2, 1.5, .4, 1); }
.ga-react--on { color: var(--akzent) !important; }
.ga-react--on svg { transform: scale(1.22); }
.ga-react--on svg path { fill: #EE7A08; }
.ga-post__delta {
position: absolute; right: 0; bottom: 100%; margin-bottom: 6px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600;
letter-spacing: .04em; color: #B15A06; background: rgba(238, 122, 8, .12);
border-radius: 999px; padding: 3px 9px; white-space: nowrap; opacity: 0;
pointer-events: none;
}
@keyframes gaDelta {
0%   { opacity: 0; transform: translateY(6px); }
18%  { opacity: 1; transform: translateY(0); }
76%  { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-8px); }
}
@keyframes gaPop {
0%   { transform: scale(1); }
38%  { transform: scale(1.32); }
100% { transform: scale(1); }
}
[data-ga-pop] { transform-origin: center; }
.ga-portals { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 20px; }
.ga-portal {
display: flex; align-items: center; gap: 10px;
border-bottom: 1px solid #EEF2F7; padding: 9px 0;
}
.ga-portal__dot {
width: 8px; height: 8px; border-radius: 50%; flex: none;
background: #DCE4EC; transition: background-color .45s ease, box-shadow .45s ease;
}
.ga-portal__name { font-size: 14px; color: #1B2F41; flex: 1; }
.ga-portal__state {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: .12em; color: var(--meta); transition: color .45s ease;
}
.ga-portal--ok .ga-portal__dot { background: #EE7A08; box-shadow: 0 0 0 4px rgba(238,122,8, .14); }
.ga-portal--ok .ga-portal__state { color: var(--akzent); }
.ga-stars { position: relative; display: inline-block; line-height: 1; }
.ga-stars__base, .ga-stars__fill {
font-size: 26px; letter-spacing: 4px; white-space: nowrap;
}
.ga-stars__base { color: #DCE4EC; }
.ga-stars__fill {
position: absolute; left: 0; top: 0; overflow: hidden;
color: var(--akzent); width: 0; transition: width .18s linear;
}
.ga-gauge { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ga-gauge__ring { position: relative; width: 148px; height: 148px; flex: none; }
.ga-gauge__ring svg { transform: rotate(-90deg); display: block; }
.ga-gauge__track { stroke: #E8EEF4; }
.ga-gauge__value { stroke: #EE7A08; stroke-linecap: round; transition: stroke-dashoffset .06s linear, stroke .5s ease; }
.ga-gauge__num {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 38px;
color: var(--akzent); transition: color .5s ease;
}
.ga-gauge--good .ga-gauge__value { stroke: #2BA05F; }
.ga-gauge--good .ga-gauge__num { color: #2BA05F; }
.ga-gauge__checks {
display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: 14px 28px; flex: 1; min-width: 210px;
}
.ga-gauge__check { display: flex; align-items: center; gap: 11px; font-size: 15px; color: var(--meta); transition: color .4s ease; }
.ga-gauge__mark {
width: 20px; height: 20px; border-radius: 50%; flex: none;
border: 1px solid #DCE4EC; position: relative;
transition: background-color .4s ease, border-color .4s ease;
}
.ga-gauge__check--on { color: #1B2F41; }
.ga-gauge__check--on .ga-gauge__mark { background: #EE7A08; border-color: #EE7A08; }
.ga-gauge__check--on .ga-gauge__mark::after {
content: ""; position: absolute; left: 6px; top: 3px;
width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0;
transform: rotate(42deg);
}
.ga-wave { display: flex; align-items: center; gap: 3px; height: 104px; }
.ga-wave i {
flex: 1; min-width: 2px; border-radius: 2px; background: #DCE4EC;
transition: background-color .2s ease, transform .2s ease;
}
.ga-wave i.ga-wave--on { background: #EE7A08; }
.ga-wave i.ga-wave--head { background: #EE7A08; transform: scaleY(1.12); }
.ga-review {
border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05);
border-radius: 11px; padding: 10px 12px;
display: flex; gap: 10px; align-items: center;
opacity: 0; transform: translateY(12px);
transition: opacity .45s ease, transform .45s cubic-bezier(.22, .75, .2, 1);
}
.ga-review--in { opacity: 1; transform: none; }
.ga-review__stars { font-size: 11px; color: var(--akzent); letter-spacing: 2px; flex: none; }
.ga-review__lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ga-review__lines i { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .16); }
.ga-review__lines i:first-child { width: 76%; }
.ga-review__lines i:last-child { width: 48%; }
.ga-stars--dark .ga-stars__base { color: rgba(255, 255, 255, .18); }
html {
scroll-behavior: smooth;
scroll-padding-top: 96px; 
scrollbar-gutter: stable;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
}
.m-burger {
display: none;
width: 44px; height: 44px;
flex-direction: column; align-items: center; justify-content: center; gap: 5px;
background: none; border: 0; cursor: pointer; padding: 0; flex: none;
}
.m-burger i {
display: block; width: 22px; height: 2px; border-radius: 1px;
background: #1B2F41;
}
.m-overlay {
position: fixed; inset: 0; z-index: 200;
background: linear-gradient(180deg, #081F38 0%, #0A2440 100%);
display: flex; flex-direction: column;
padding: 0 22px 28px;
opacity: 0; visibility: hidden;
transition: opacity .35s ease, visibility 0s linear .35s;
overflow-y: auto;
}
body.m-open .m-overlay {
opacity: 1; visibility: visible;
transition: opacity .35s ease;
}
body.m-open { overflow: hidden; }
.m-overlay__top {
height: 76px; flex: none;
display: flex; align-items: center; justify-content: space-between;
}
.m-overlay__close {
width: 44px; height: 44px; position: relative;
background: none; border: 0; cursor: pointer; padding: 0;
}
.m-overlay__close::before, .m-overlay__close::after {
content: ""; position: absolute; left: 11px; top: 21px;
width: 22px; height: 2px; border-radius: 1px; background: #fff;
}
.m-overlay__close::before { transform: rotate(45deg); }
.m-overlay__close::after { transform: rotate(-45deg); }
.m-overlay__nav { margin-top: 18px; }
.m-overlay__nav a {
display: block;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 26px;
letter-spacing: -0.02em; color: #fff;
padding: 15px 0;
border-bottom: 1px solid rgba(255, 255, 255, .08);
opacity: 0; transform: translateY(14px);
transition: opacity .4s ease, transform .4s cubic-bezier(.22, .75, .2, 1);
}
.m-overlay__nav a:hover { color: var(--akzent); }
.m-overlay__nav a.m-aktiv { color: var(--akzent); }
body.m-open .m-overlay__nav a { opacity: 1; transform: none; }
body.m-open .m-overlay__nav a:nth-child(1) { transition-delay: .06s; }
body.m-open .m-overlay__nav a:nth-child(2) { transition-delay: .11s; }
body.m-open .m-overlay__nav a:nth-child(3) { transition-delay: .16s; }
body.m-open .m-overlay__nav a:nth-child(4) { transition-delay: .21s; }
body.m-open .m-overlay__nav a:nth-child(5) { transition-delay: .26s; }
body.m-open .m-overlay__nav a:nth-child(6) { transition-delay: .31s; }
body.m-open .m-overlay__nav a:nth-child(7) { transition-delay: .36s; }
.m-overlay__cta {
display: block; text-align: center;
background: #EE7A08; color: #1B2F41 !important;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px;
padding: 16px; border-radius: 12px;
margin-top: 28px;
}
.m-overlay__tel {
display: block; text-align: center;
font-family: 'JetBrains Mono', monospace; font-size: 14px;
letter-spacing: .08em; color: #9DB2C7 !important;
margin-top: 18px;
}
@media (max-width: 1000px) {
.m-burger { display: flex; }
a.hv-cta-s { display: none !important; }
#hero [data-split] { padding: 56px 22px 84px !important; }
}
.ga-serp--gross { --ga-row: 66px; }
.ga-serp__fav {
width: 26px; height: 26px; border-radius: 50%; flex: none;
background: #E8EEF4;
display: flex; align-items: center; justify-content: center;
font-family: 'Sora', sans-serif; font-weight: 700; font-size: 10px;
color: var(--meta); letter-spacing: 0;
}
.ga-serp__fav--own { background: #EE7A08; color: #1B2F41; }
.ga-serp__stars {
display: none;
align-items: center; gap: 7px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #5C7089;
}
.ga-serp__stars b { color: #1B2F41; font-weight: 600; }
.ga-serp__sterne { color: var(--akzent); letter-spacing: 2px; font-size: 11px; }
.ga-serp--gross .ga-serp__stars { display: flex; }
.ga-serp--gross .ga-serp__brand { font-size: 17px; }
.ga-serp--gross .ga-serp__lines { gap: 5px; }
.ga-serp--gross .ga-serp__lines i { height: 8px; }
.ga-serp--gross .ga-serp__rank { font-size: 13px; }
.ga-chrome {
display: flex; align-items: center; gap: 14px;
background: #F4F7FA; border-bottom: 1px solid #DCE4EC;
padding: 13px 20px;
}
.ga-chrome i {
width: 11px; height: 11px; border-radius: 50%; flex: none;
background: #DCE4EC; display: block;
}
.ga-chrome__url {
flex: 1; max-width: 420px;
background: #fff; border: 1px solid #DCE4EC; border-radius: 999px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--meta);
padding: 6px 16px; white-space: nowrap; overflow: hidden;
}
.nv { position: relative; }
.nv > a::after {
content: "▾"; font-size: 9px; color: var(--meta);
margin-left: 6px; vertical-align: 1px;
}
.nv__panel {
position: absolute; top: 100%; left: 50%;
transform: translateX(-50%) translateY(6px);
padding-top: 16px; 
opacity: 0; visibility: hidden; z-index: 90;
transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.nv:hover .nv__panel,
.nv:focus-within .nv__panel {
opacity: 1; visibility: visible;
transform: translateX(-50%) translateY(0);
transition: opacity .22s ease, transform .22s ease;
}
.nv__box {
background: #fff; border: 1px solid #DCE4EC; border-radius: 14px;
box-shadow: 0 24px 60px rgba(8, 31, 56, .16);
padding: 10px; min-width: 250px;
}
.nv__box a {
display: block; padding: 10px 14px; border-radius: 9px;
font-size: 14px; font-weight: 500; color: #1B2F41 !important;
white-space: nowrap;
}
.nv__box a:hover { background: #F4F7FA; color: var(--akzent) !important; }
.nv2 { position: relative; }
.nv2 > a::after {
content: "›"; float: right; font-size: 15px; line-height: 1;
color: var(--meta); margin-left: 12px;
transition: transform .2s ease, color .2s ease;
}
.nv2:hover > a::after,
.nv2:focus-within > a::after { transform: translateX(2px); color: var(--akzent); }
.nv2:hover > a,
.nv2:focus-within > a { background: #F4F7FA; color: var(--akzent) !important; }
.nv2__panel {
position: absolute; top: -11px; left: 100%;
padding-left: 8px;          
opacity: 0; visibility: hidden;
transform: translateX(-6px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
z-index: 2;
}
.nv2:hover .nv2__panel,
.nv2:focus-within .nv2__panel {
opacity: 1; visibility: visible; transform: translateX(0);
}
.nv2__box {
background: #fff; border: 1px solid #DCE4EC; border-radius: 14px;
box-shadow: 0 24px 60px rgba(8, 31, 56, .16);
padding: 10px; min-width: 210px;
}
.nv2__box a {
display: block; padding: 10px 14px; border-radius: 9px;
font-size: 14px; font-weight: 500; color: #1B2F41 !important;
white-space: nowrap;
}
.nv2__box a:hover,
.nv2__box a.nv--hier { background: #F4F7FA; color: var(--akzent) !important; }
@media (max-width: 999px) {
.nv2 > a::after { content: none; }
}
.m-overlay__nav a.m-sub {
padding-left: 34px; font-size: 15px; color: var(--meta);
}
.m-overlay__nav a.m-sub::before {
content: ""; display: inline-block; width: 12px; height: 1px;
background: #E4EAF1; vertical-align: middle;
margin: 0 10px 0 -22px;
}
.m-grp {
font-family: 'JetBrains Mono', monospace; font-size: 12px;
letter-spacing: .18em; color: var(--akzent);
margin: 26px 0 4px; padding-bottom: 8px;
border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.m-overlay__nav .m-grp:first-child { margin-top: 6px; }
.m-overlay__nav a { font-size: 20px; padding: 12px 0; }
.m-overlay__nav .m-grp {
opacity: 0; transform: translateY(14px);
transition: opacity .4s ease, transform .4s cubic-bezier(.22, .75, .2, 1);
}
body.m-open .m-overlay__nav .m-grp { opacity: 1; transform: none; }
body.m-open .m-overlay__nav a,
body.m-open .m-overlay__nav .m-grp { transition-delay: .12s; }
#hero h1 > span > span[data-word] { white-space: nowrap; }
@media (max-width: 1000px) {
#hero h1 > span > span[data-word] { white-space: normal; }
}
.hero-portrait,
.hs-card img.hero-portrait {
height: 476px; width: auto; max-width: none;
margin: -16px auto -12px; display: block;
}
@media (max-width: 1000px) {
.hero-portrait,
.hs-card img.hero-portrait { height: auto; width: 100%; max-width: 320px; }
}
.g5 { grid-template-columns: repeat(5, 1fr) !important; gap: 32px !important; }
.g3 { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 1000px) {
.g5, .g3 { grid-template-columns: 1fr !important; }
}
.kd {
position: fixed; right: 24px; bottom: 24px; z-index: 150;
font-family: 'Figtree', sans-serif;
}
.kd__knopf {
position: relative; display: inline-flex; align-items: center; gap: 10px;
height: 56px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; cursor: pointer;
background: #EE7A08; color: #1B2F41;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
box-shadow: 0 18px 40px rgba(238,122,8, .35), 0 2px 6px rgba(3, 12, 24, .2);
transition: transform .25s, box-shadow .25s, background .25s;
}
.kd__knopf:hover {
background: #E85F00; transform: translateY(-2px);
box-shadow: 0 22px 46px rgba(238,122,8, .42), 0 2px 6px rgba(3, 12, 24, .2);
}
.kd__knopf svg { width: 24px; height: 24px; display: block; }
.kd__knopf-icon { display: block; width: 24px; height: 24px; }
.kd__knopf-x { display: none; position: relative; width: 24px; height: 24px; }
.kd__knopf-x::before, .kd__knopf-x::after {
content: ""; position: absolute; left: 2px; top: 11px;
width: 20px; height: 2px; border-radius: 1px; background: #fff;
}
.kd__knopf-x::before { transform: rotate(45deg); }
.kd__knopf-x::after { transform: rotate(-45deg); }
.kd--offen .kd__knopf-icon { display: none; }
.kd--offen .kd__knopf-x { display: block; }
.kd__knopf-punkt {
position: absolute; left: 34px; top: 12px; width: 10px; height: 10px;
border-radius: 50%; background: #9DB2C7; border: 2px solid #EE7A08; box-sizing: content-box;
}
.kd--erreichbar .kd__knopf-punkt { background: #22C55E; }
.kd--offen .kd__knopf-punkt { display: none; }
.kd__hinweis {
position: absolute; right: 0; bottom: 68px;
background: #fff; color: #1B2F41; font-size: 14px; font-weight: 500;
padding: 12px 16px; border-radius: 14px 14px 4px 14px;
box-shadow: 0 16px 40px rgba(3, 12, 24, .18); white-space: nowrap;
opacity: 0; transform: translateY(8px); pointer-events: none;
transition: opacity .3s, transform .3s;
}
.kd--hinweis .kd__hinweis { opacity: 1; transform: none; }
.kd__panel {
position: absolute; right: 0; bottom: 72px; width: 380px; max-width: calc(100vw - 48px);
background: #fff; border-radius: 20px; overflow: hidden;
box-shadow: 0 30px 80px rgba(3, 12, 24, .35), 0 0 0 1px rgba(3, 12, 24, .06);
display: flex; flex-direction: column;
max-height: min(640px, calc(100vh - 120px));
opacity: 0; visibility: hidden; transform: translateY(14px) scale(.97); transform-origin: bottom right;
transition: opacity .25s ease, transform .3s cubic-bezier(.22, .75, .2, 1), visibility 0s linear .3s;
}
.kd--offen .kd__panel {
opacity: 1; visibility: visible; transform: none;
transition: opacity .25s ease, transform .3s cubic-bezier(.22, .75, .2, 1);
}
.kd__kopf {
display: flex; align-items: center; gap: 14px; padding: 18px 18px 18px 20px; flex: none;
background: linear-gradient(135deg, #0A2440 0%, #081F38 100%); color: #fff;
}
.kd__avatar {
width: 44px; height: 44px; border-radius: 50%; background: #fff; padding: 6px;
box-sizing: border-box; display: block; flex: none;
}
.kd__kopftext { flex: 1; min-width: 0; }
.kd__titel { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; line-height: 1.2; }
.kd__status {
display: flex; align-items: center; gap: 7px; margin-top: 5px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .04em; color: #9DB2C7;
}
[data-erreichbar-punkt] { width: 8px; height: 8px; border-radius: 50%; background: #9DB2C7; flex: none; display: inline-block; }
[data-erreichbar-punkt].ist-offen { background: #22C55E; box-shadow: 0 0 0 3px rgba(34, 197, 94, .22); }
.kd__zu {
width: 36px; height: 36px; border-radius: 50%; border: 0; position: relative; flex: none;
background: rgba(255, 255, 255, .08); cursor: pointer; transition: background .2s;
}
.kd__zu::before, .kd__zu::after {
content: ""; position: absolute; left: 10px; top: 17px;
width: 16px; height: 2px; border-radius: 1px; background: #fff;
}
.kd__zu::before { transform: rotate(45deg); }
.kd__zu::after { transform: rotate(-45deg); }
.kd__zu:hover { background: rgba(255, 255, 255, .18); }
.kd__body { padding: 18px; overflow-y: auto; flex: 1; min-height: 0; }
.kd__frage { margin: 0 0 12px; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; color: #1B2F41; }
.kd__tile {
display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box; text-align: left;
padding: 12px 14px; margin-bottom: 8px; border: 1px solid #DCE4EC; border-radius: 14px;
background: #fff; color: #1B2F41; cursor: pointer; font-family: 'Figtree', sans-serif;
transition: border-color .2s, transform .2s, box-shadow .2s;
}
.kd__tile:hover { border-color: #EE7A08; transform: translateX(2px); box-shadow: 0 10px 24px rgba(3, 12, 24, .08); }
.kd__tile-icon {
width: 40px; height: 40px; border-radius: 12px; background: #FFF1E8; color: var(--akzent);
display: flex; align-items: center; justify-content: center; flex: none;
}
.kd__tile-icon svg { width: 22px; height: 22px; }
.kd__tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.kd__tile-text b { font-weight: 600; font-size: 15px; }
.kd__tile-text small { font-size: 13px; color: #5C7089; }
.kd__tile-pfeil { color: #9DB2C7; flex: none; display: flex; }
.kd__tile-pfeil svg { width: 18px; height: 18px; }
.kd__tile:hover .kd__tile-pfeil { color: var(--akzent); }
.kd__zurueck {
background: none; border: 0; padding: 0 0 12px; cursor: pointer;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; color: #5C7089;
}
.kd__zurueck:hover { color: var(--akzent); }
.kd__chat { display: flex; flex-direction: column; gap: 8px; max-height: 280px; overflow-y: auto; padding-right: 4px; }
.kd__b {
max-width: 88%; padding: 10px 14px; font-size: 14px; line-height: 1.55; border-radius: 16px;
animation: kdIn .3s ease both; word-wrap: break-word;
}
.kd__b--bot { align-self: flex-start; background: #F4F7FA; color: #1B2F41; border-bottom-left-radius: 4px; }
.kd__b--ich { align-self: flex-end; background: #0A2440; color: #fff; border-bottom-right-radius: 4px; }
@keyframes kdIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.kd__tippt { display: flex; gap: 4px; padding: 13px 14px; }
.kd__tippt i { width: 6px; height: 6px; border-radius: 50%; background: #9DB2C7; animation: kdTipp 1s infinite; }
.kd__tippt i:nth-child(2) { animation-delay: .15s; }
.kd__tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes kdTipp {
0%, 60%, 100% { transform: translateY(0); opacity: .5; }
30% { transform: translateY(-4px); opacity: 1; }
}
.kd__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kd__chip {
font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 13px; line-height: 1.3;
padding: 8px 14px; border-radius: 999px; border: 1px solid #DCE4EC;
background: #fff; color: #1B2F41; cursor: pointer; text-align: left; transition: all .2s;
}
.kd__chip:hover { border-color: #EE7A08; color: var(--akzent); }
.kd__form { display: grid; gap: 8px; margin-top: 12px; }
.kd__form input {
font-family: 'Figtree', sans-serif; font-size: 14px; color: #1B2F41; background: #fff;
border: 1px solid #DCE4EC; border-radius: 10px; padding: 11px 14px; outline: none;
min-width: 0; width: 100%; box-sizing: border-box;
}
.kd__form input:focus { border-color: #EE7A08; }
.kd__form button {
cursor: pointer; background: #EE7A08; color: #1B2F41; border: 0; border-radius: 10px;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; padding: 12px; transition: background .2s;
}
.kd__form button:hover { background: #E85F00; }
.kd__fuss {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 12px 18px; border-top: 1px solid #DCE4EC; background: #F4F7FA;
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .06em; color: #5C7089;
}
.so-row { display: flex; gap: 6px; flex-wrap: wrap; }
.so-row a {
display: inline-flex; width: 36px; height: 36px; border-radius: 10px;
align-items: center; justify-content: center; color: #9DB2C7;
border: 1px solid rgba(255, 255, 255, .12); transition: all .2s;
}
.so-row a svg { width: 18px; height: 18px; }
.so-row a:hover { color: #1B2F41 !important; border-color: #EE7A08; background: #EE7A08; transform: translateY(-2px); }
.so-row--hell a { color: #5C7089; border-color: #DCE4EC; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.hv-cta-tel {
display: inline-flex; align-items: center; gap: 10px;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; color: #fff;
padding: 14px 22px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 12px; transition: all .25s;
}
.hv-cta-tel svg { width: 20px; height: 20px; color: var(--akzent); }
.hv-cta-tel:hover { border-color: #EE7A08; background: rgba(238,122,8, .1); transform: translateY(-2px); }
.kd-direkt { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.kd-direkt a {
display: inline-flex; align-items: center; gap: 8px;
font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 14px; color: #fff;
padding: 9px 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; transition: all .2s;
}
.kd-direkt a svg { width: 17px; height: 17px; color: var(--akzent); }
.kd-direkt a:hover { border-color: #EE7A08; background: rgba(238,122,8, .12); }
.fu-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; gap: 48px 40px; }
@media (max-width: 1000px) {
.fu-grid { grid-template-columns: 1fr 1fr; }
.fu-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .fu-grid { grid-template-columns: 1fr; } }
.m-tel { display: none; }
.m-overlay__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.m-overlay__row .m-overlay__tel, .m-overlay__wa {
margin: 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px;
border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .06em; color: #fff !important;
}
.m-overlay__row svg { width: 16px; height: 16px; color: var(--akzent); }
@media (max-width: 1000px) {
.m-tel {
display: inline-flex; width: 44px; height: 44px; border-radius: 50%; flex: none;
background: #EE7A08; color: #1B2F41; align-items: center; justify-content: center;
margin-left: auto; margin-right: -8px;
}
.m-tel svg { width: 20px; height: 20px; }
}
@media (max-width: 560px) {
.kd { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.kd__knopf { width: 56px; padding: 0; justify-content: center; }
.kd__knopf-label { display: none; }
.kd__knopf-punkt { left: 32px; top: 11px; }
.kd__panel {
position: fixed; left: 12px; right: 12px; width: auto; max-width: none;
bottom: calc(84px + env(safe-area-inset-bottom, 0px));
max-height: calc(100vh - 110px); max-height: calc(100dvh - 110px);
}
.kd__chat { max-height: 220px; }
}
body.m-open .kd { visibility: hidden; }
@media print { .kd { display: none; } }
@media (prefers-reduced-motion: reduce) {
.kd__panel, .kd__knopf, .kd__tile, .kd__hinweis { transition: none; }
.kd__b, .kd__tippt i { animation: none; }
}
.kf-hell input, .kf-hell textarea {
font-family: 'Figtree', sans-serif; font-size: 15px; color: #1B2F41; background: #fff;
border: 1px solid #DCE4EC; border-radius: 10px; padding: 13px 16px; outline: none;
width: 100%; box-sizing: border-box; min-width: 0;
}
.kf-dunkel input, .kf-dunkel textarea {
font-family: 'Figtree', sans-serif; font-size: 15px; color: #fff; background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px; padding: 13px 16px; outline: none;
width: 100%; box-sizing: border-box; min-width: 0;
}
.kf-hell textarea, .kf-dunkel textarea { min-height: 120px; resize: vertical; }
.kf-hell input:focus, .kf-hell textarea:focus, .kf-dunkel input:focus, .kf-dunkel textarea:focus { border-color: #EE7A08; }
.kf-hell input::placeholder, .kf-hell textarea::placeholder { color: var(--meta); }
.kf-dunkel input::placeholder, .kf-dunkel textarea::placeholder { color: #7F95AB; }
.kf-hell input[type="file"] { padding: 11px 14px; color: #5C7089; font-size: 14px; border-style: dashed; }
.kf-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.kf-1 { margin-bottom: 14px; }
.kf-einw { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.5; margin: 4px 0 22px; }
.kf-einw input { width: 16px; height: 16px; margin-top: 2px; accent-color: #EE7A08; flex: none; }
.kf-einw--hell { margin: 2px 0 0; font-size: 12px; line-height: 1.45; color: #5C7089; }
.kf-einw--hell input { width: 15px; height: 15px; }
.kf-einw--hell a { color: #B15A06; text-decoration: underline; }
.kk-karte {
background: #0A1D33; border: 1px solid rgba(255, 255, 255, .14); border-radius: 20px; overflow: hidden;
box-shadow: 0 40px 90px rgba(3, 12, 24, .6);
}
.kk-zeile {
display: flex; align-items: center; gap: 16px; padding: 18px 24px; color: #fff;
border-top: 1px solid rgba(255, 255, 255, .08); transition: background .2s;
}
.kk-zeile:hover { background: rgba(255, 255, 255, .04); }
.kk-zeile svg { width: 22px; height: 22px; color: var(--akzent); flex: none; }
.kk-zeile .kk-l { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; margin-bottom: 3px; }
.kk-zeile .kk-w { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; }
.kk-zeile .kk-pfeil { margin-left: auto; color: #5C7089; }
.kk-zeile:hover .kk-pfeil { color: var(--akzent); }
.so-karte {
display: flex; align-items: center; gap: 16px; padding: 20px 22px; border: 1px solid #DCE4EC; border-radius: 16px;
background: #fff; color: #1B2F41; transition: all .25s;
}
.so-karte:hover { border-color: #EE7A08; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(3, 12, 24, .08); }
.so-karte .so-i {
width: 48px; height: 48px; border-radius: 14px; background: #0A2440; color: #fff;
display: flex; align-items: center; justify-content: center; flex: none; transition: background .25s;
}
.so-karte:hover .so-i { background: #EE7A08; }
.so-karte .so-i svg { width: 22px; height: 22px; }
.so-karte b { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; }
.so-karte small { display: block; font-size: 13px; color: #5C7089; margin-top: 2px; }
.an-karte { position: relative; border-radius: 20px; overflow: hidden; background: #0A2440; min-height: 380px; }
.an-karte svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.an-pin {
position: absolute; left: 50%; top: 44%; transform: translate(-50%, -100%);
display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.an-pin__schild {
background: #fff; color: #1B2F41; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px;
padding: 8px 14px; border-radius: 10px; box-shadow: 0 14px 30px rgba(3, 12, 24, .4); white-space: nowrap;
}
.an-pin__punkt {
width: 18px; height: 18px; border-radius: 50%; background: #EE7A08; border: 3px solid #fff;
box-shadow: 0 0 0 10px rgba(238,122,8, .25); animation: gPulse 2s infinite;
}
@media (max-width: 560px) {
.kf-2 { grid-template-columns: 1fr; }
}
:where(svg[focusable="false"][aria-hidden="true"]) { width: 20px; height: 20px; flex: none; }
.kd__form[hidden] { display: none; }
.kd__status { white-space: nowrap; }
.kd__fuss { flex-direction: column; align-items: flex-start; gap: 10px; }
.kd__fuss .so-row { flex-wrap: nowrap; }
.kd__adresse { font-size: 11px; letter-spacing: .04em; white-space: nowrap; text-transform: none; }
.hs-stage { position: relative; perspective: 1300px; }
.hs-card { will-change: transform; }
.hs-stage.hs-ready .hs-card { opacity: 0; transform: translateY(30px) scale(.985); }
.hs-stage.hs-ready .hs-card.is-in {
transition: transform 1.1s cubic-bezier(.22, .85, .25, 1), opacity .9s ease;
opacity: 1; transform: translateY(0) scale(1);
}
.hs-frame { position: relative; border-radius: 18px; overflow: hidden; box-shadow: 0 50px 110px rgba(3, 12, 24, .6); }
.hs-img {
width: 100%; height: 520px; object-fit: cover; display: block;
animation: hsKenburns 26s ease-in-out infinite alternate;
}
@keyframes hsKenburns { from { transform: scale(1) translateX(0); } to { transform: scale(1.07) translateX(-1.5%); } }
.hs-shade { position: absolute; inset: 0; background: linear-gradient(200deg, rgba(8, 31, 56, 0) 55%, rgba(8, 31, 56, .42) 100%); }
.hs-glare { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease; }
.hs-badges {
position: absolute; inset: auto -22px -26px -22px; pointer-events: none;
transform-style: preserve-3d;
display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
}
.hs-badges > div {
position: static;
background: #061829; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
padding: 18px 26px; box-shadow: 0 28px 60px rgba(3, 12, 24, .6);
}
.js .hs-badges > div { opacity: 0; }
.js .hs-stage.hs-eingefahren .hs-badges > div {
animation-name: hsBadgeIn;
animation-duration: .9s;
animation-timing-function: cubic-bezier(.22, .75, .2, 1);
animation-fill-mode: forwards;
}
.hs-badges .hs-b1 { animation-delay: .75s; }
.hs-badges .hs-b2 { animation-delay: 1s; }
.hs-badges .hs-b3 { animation-delay: 1.25s; }
@keyframes hsBadgeIn { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.hs-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 26px; color: #fff; line-height: 1; white-space: nowrap; }
.hs-b1 .hs-num { color: var(--akzent); }
.hs-num .hs-stars { color: var(--akzent); font-size: 16px; letter-spacing: 2px; }
.hs-lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; margin-top: 8px; white-space: nowrap; }
@media (max-width: 1260px) { .hs-badges > div { padding: 12px 18px; } .hs-num { font-size: 21px; } }
@media (max-width: 1000px) {
.hs-img { height: 340px; }
.hs-badges { position: static; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.hs-badges > div { position: static; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) {
.hs-img, .hs-badges > div { animation: none; }
.hs-card, .hs-badges > div { opacity: 1 !important; transform: none !important; }
}
.hs-stage--frei .hs-badges { inset: auto 0 -6px 0; display: flex; justify-content: center; align-items: flex-end; gap: 20px; }
.hs-stage--frei .hs-badges > div { position: static; }
@media (max-width: 1000px) { .hs-stage--frei .hs-badges { inset: auto; justify-content: flex-start; gap: 12px; } }
@media (max-width: 1000px) {
.hs-stage--frei > [data-z] { left: 10px !important; right: auto !important; }
}
.hs-sub { font-size: 14px; color: #9DB2C7; font-weight: 400; }
.hs-frei { position: relative; }
.hs-frei > img { width: 100% !important; margin: 0 !important; display: block; }
.hs-frei > img.hs-foto,
.hs-frei > .hs-shine.hs-foto { width: 84% !important; margin: 0 auto !important; }
.hs-frei > .hs-shine.hs-foto { left: 8%; right: 8%; inset: 0 8%; }
.hs-shine {
position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important;
pointer-events: none; opacity: 0; transition: opacity .6s ease;
filter: brightness(0) invert(1) blur(6px); will-change: mask-image;
}
.hs-spot {
position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important;
pointer-events: none; opacity: 0; transition: opacity .9s ease;
filter: brightness(2.1) saturate(1.35) drop-shadow(0 0 26px rgba(238,122,8,.55));
-webkit-mask-image: radial-gradient(ellipse var(--spot-w, 33%) var(--spot-h, 13%) at var(--spot-x, 66%) var(--spot-y, 35%), rgba(0,0,0,1) 60%, rgba(0,0,0,0) 85%);
mask-image: radial-gradient(ellipse var(--spot-w, 33%) var(--spot-h, 13%) at var(--spot-x, 66%) var(--spot-y, 35%), rgba(0,0,0,1) 60%, rgba(0,0,0,0) 85%);
}
.hs-dim {
position: absolute; inset: 0; width: 100% !important; height: 100%; margin: 0 !important;
pointer-events: none; opacity: 0; transition: opacity .9s ease;
filter: brightness(.35) saturate(.7);
-webkit-mask-image: radial-gradient(ellipse calc(var(--spot-w, 33%) + 3%) calc(var(--spot-h, 13%) + 2%) at var(--spot-x, 66%) var(--spot-y, 35%), rgba(0,0,0,0) 58%, rgba(0,0,0,.94) 86%);
mask-image: radial-gradient(ellipse calc(var(--spot-w, 33%) + 3%) calc(var(--spot-h, 13%) + 2%) at var(--spot-x, 66%) var(--spot-y, 35%), rgba(0,0,0,0) 58%, rgba(0,0,0,.94) 86%);
}
.hs-waves { position: absolute; inset: 0; pointer-events: none; }
.hs-waves i {
position: absolute; left: 55%; top: 44%;
width: 150px; height: 150px; margin: -75px 0 0 -75px;
border: 1.5px solid rgba(238,122,8, .45); border-radius: 50%;
opacity: 0;
animation: hsWave 6.4s cubic-bezier(.22, .6, .35, 1) infinite;
}
.hs-waves--stark i {
border: 2px solid rgba(238,122,8, .6);
box-shadow: 0 0 14px rgba(238,122,8, .2);
animation-name: hsWaveStark;
}
@keyframes hsWaveStark {
0% { transform: scale(.3); opacity: 0; }
10% { opacity: .65; }
65% { opacity: .2; }
100% { transform: scale(4.6); opacity: 0; }
}
.hs-waves i:nth-child(2) { animation-delay: 1.6s; }
.hs-waves i:nth-child(3) { animation-delay: 3.2s; }
.hs-waves i:nth-child(4) { animation-delay: 4.8s; }
@keyframes hsWave {
0% { transform: scale(.3); opacity: 0; }
10% { opacity: .5; }
65% { opacity: .14; }
100% { transform: scale(4.6); opacity: 0; }
}
@media (max-width: 1000px) { .hs-waves i { left: 50%; top: 40%; } }
@media (prefers-reduced-motion: reduce) { .hs-waves { display: none; } }
.hs-waves--audio i { left: 30%; top: 50%; }
@media (max-width: 1000px) { .hs-waves--audio i { left: 28%; top: 45%; } }
.kd__fuss { align-items: center; text-align: center; }
.kd__fuss .so-row { justify-content: center; }
.recht { max-width: 820px; font-size: 16px; line-height: 1.75; color: #33506E; }
.recht h2 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25;
letter-spacing: -0.015em; color: #1B2F41; margin: 44px 0 14px;
}
.recht h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 19px; color: #1B2F41; margin: 34px 0 10px; }
.recht p { margin: 0 0 16px; }
.recht p > strong:only-child, .recht p > b:only-child {
display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; color: #1B2F41; margin: 34px 0 6px;
}
.recht ul, .recht ol { margin: 0 0 18px; padding-left: 22px; }
.recht li { margin: 0 0 8px; }
.recht a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.recht a:hover { color: #E85F00; }
.recht table { border-collapse: collapse; width: 100%; margin: 0 0 22px; font-size: 15px; }
.recht th, .recht td { border-top: 1px solid #DCE4EC; padding: 10px 12px 10px 0; text-align: left; vertical-align: top; }
.recht-kopf { border-bottom: 1px solid #DCE4EC; }
.recht-meta {
font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .12em; color: var(--meta);
margin-top: 18px;
}
.recht-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.recht-links a {
font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 14px; color: #1B2F41;
padding: 9px 16px; border: 1px solid #DCE4EC; border-radius: 999px; text-decoration: none; transition: all .2s;
}
.recht-links a:hover, .recht-links a.ist-aktiv { border-color: #EE7A08; color: var(--akzent); }
.recht-pdf {
display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid #DCE4EC; border-radius: 14px;
background: #fff; color: #1B2F41; text-decoration: none !important; margin-bottom: 10px; transition: all .25s;
}
.recht-pdf:hover { border-color: #EE7A08; transform: translateY(-2px); box-shadow: 0 14px 34px rgba(3, 12, 24, .08); }
.recht-pdf b { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; }
.recht-pdf small { display: block; font-size: 13px; color: #5C7089; margin-top: 2px; }
.recht-pdf .pdf-i {
width: 44px; height: 44px; border-radius: 12px; background: #FFF1E8; color: var(--akzent); flex: none;
display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; letter-spacing: .06em;
}
.recht { overflow-wrap: anywhere; }
.recht a { word-break: break-all; }
.recht table { display: block; overflow-x: auto; }
.recht-pdf b, .recht-pdf:hover b { color: #1B2F41; }
.recht-kopf > div { min-height: 268px; }
.recht-kopf h1 { white-space: nowrap; }
@media (max-width: 1000px) { .recht-kopf h1 { white-space: normal; hyphens: manual; } .recht-kopf > div { min-height: 0; } }
.nach-oben {
position: fixed; left: 24px; bottom: 24px; z-index: 140;
width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .14);
background: #0A2440; color: #fff; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 14px 34px rgba(3, 12, 24, .35);
opacity: 0; visibility: hidden; transform: translateY(10px);
transition: opacity .3s, transform .3s, background .2s, visibility 0s linear .3s;
}
.nach-oben.ist-sichtbar { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s, background .2s; }
.nach-oben:hover { background: #EE7A08; border-color: #EE7A08; }
.nach-oben svg { width: 20px; height: 20px; }
@media (max-width: 560px) { .nach-oben { left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; } }
body.m-open .nach-oben { visibility: hidden; }
@media print { .nach-oben { display: none; } }
.bc { background: #081F38; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.bc--hell { background: #F4F7FA; border-bottom: 1px solid #DCE4EC; }
.bc__in {
max-width: 1240px; margin: 0 auto; padding: 11px 32px;
display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; color: #7F95AB;
}
.bc__in a { color: #9DB2C7; transition: color .2s; }
.bc__in a:hover { color: var(--akzent); }
.bc__in [aria-current] { color: #fff; }
.bc--hell .bc__in { color: var(--meta); }
.bc--hell .bc__in a { color: #5C7089; }
.bc--hell .bc__in [aria-current] { color: #1B2F41; }
.bc__in span.bc__sep { color: var(--akzent); }
.ziel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.branche-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
@media (max-width: 1000px) { .ziel-grid { grid-template-columns: 1fr 1fr; } .branche-grid { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 560px) { .ziel-grid, .branche-grid { grid-template-columns: 1fr; } }
.ziel-kachel {
display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; border-radius: 18px;
background: #fff; border: 1px solid #DCE4EC; color: #1B2F41; transition: all .25s; min-height: 100%;
box-sizing: border-box;
}
.ziel-kachel:hover { border-color: #EE7A08; transform: translateY(-4px); box-shadow: 0 22px 50px rgba(3, 12, 24, .10); }
.ziel-kachel .zk-i {
width: 48px; height: 48px; border-radius: 14px; background: #FFF1E8; color: var(--akzent);
display: flex; align-items: center; justify-content: center;
}
.ziel-kachel .zk-i svg { width: 24px; height: 24px; }
.ziel-kachel b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 19px; line-height: 1.2; }
.ziel-kachel p { font-size: 15px; line-height: 1.6; color: #5C7089; margin: 0; flex: 1; }
.ziel-kachel .zk-mehr { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px; color: var(--akzent); }
.branche-kachel {
display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 20px; border-radius: 16px;
background: #0A2440; border: 1px solid rgba(255, 255, 255, .10); color: #fff; transition: all .25s;
}
.branche-kachel:hover { border-color: #EE7A08; transform: translateY(-3px); background: #0C2A4C; }
.branche-kachel .bk-i { color: var(--akzent); }
.branche-kachel .bk-i svg { width: 26px; height: 26px; }
.branche-kachel b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; }
.branche-kachel small { font-size: 13px; color: #9DB2C7; line-height: 1.5; }
.bf {
background: #fff; border: 1px solid #DCE4EC; border-radius: 22px; padding: 36px;
box-shadow: 0 30px 70px rgba(3, 12, 24, .08);
}
.bf { display: grid; grid-template-columns: 1fr; }
.bf__fortschritt { grid-row: 1; }
.bf__schritt { grid-row: 2; grid-column: 1; display: block; visibility: hidden; }
.bf__schritt.ist-aktiv { visibility: visible; }
.bf [data-bf-schritt="3"] { grid-row: 3; }
.bf [data-bf-schritt="3"]:not(.ist-aktiv) { display: none; }
.bf--ergebnis .bf__schritt:not(.ist-aktiv) { display: none; }
.bf__frage { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 22px; color: #1B2F41; margin: 0 0 6px; }
.bf__hinweis { font-size: 14px; color: var(--meta); margin: 0 0 22px; font-family: 'JetBrains Mono', monospace; letter-spacing: .08em; }
.bf__optionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.bf__option {
cursor: pointer; text-align: left; font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 15px;
color: #1B2F41; background: #F4F7FA; border: 1px solid #DCE4EC; border-radius: 14px; padding: 16px 18px;
transition: all .2s;
}
.bf__option:hover, .bf__option.ist-gewaehlt { border-color: #EE7A08; background: #FFF1E8; }
.bf__fortschritt { display: flex; gap: 6px; margin-bottom: 26px; }
.bf__fortschritt i { flex: 1; height: 3px; border-radius: 2px; background: #DCE4EC; }
.bf__fortschritt i.ist-voll { background: #EE7A08; }
.bf__zurueck {
background: none; border: 0; cursor: pointer; padding: 0; margin-top: 22px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: #5C7089;
}
.bf__zurueck:hover { color: var(--akzent); }
.bf__ergebnis-kopf { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .2em; color: var(--akzent); margin-bottom: 14px; }
.bf__ergebnis-titel { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); color: #1B2F41; margin: 0 0 10px; line-height: 1.2; }
.bf__ergebnis-text { font-size: 16px; line-height: 1.65; color: #5C7089; margin: 0 0 24px; }
.bf__empf { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; }
.bf__empf a {
display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 14px; border: 1px solid #DCE4EC;
background: #F4F7FA; color: #1B2F41; transition: all .2s;
}
.bf__empf a:hover { border-color: #EE7A08; background: #fff; transform: translateY(-2px); }
.bf__empf b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; }
.bf__empf small { font-size: 13px; color: #5C7089; line-height: 1.5; }
.bf__empf .bf__rang { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: var(--akzent); }
.bf__cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.pd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1000px) { .pd-grid { grid-template-columns: 1fr; } }
.pd-karte {
display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 16px;
background: #fff; border: 1px solid #DCE4EC; color: #1B2F41; transition: all .25s;
}
.pd-karte:hover { border-color: #EE7A08; transform: translateY(-3px); box-shadow: 0 18px 40px rgba(3, 12, 24, .08); }
.pd-karte b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; }
.pd-karte p { font-size: 14px; line-height: 1.6; color: #5C7089; margin: 0; }
.pd-karte .pd-mehr { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px; color: var(--akzent); margin-top: 4px; }
.pd-branchen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.pd-branchen a {
font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 14px; color: #1B2F41;
padding: 9px 16px; border: 1px solid #DCE4EC; border-radius: 999px; background: #fff; transition: all .2s;
}
.pd-branchen a:hover { border-color: #EE7A08; color: var(--akzent); }
.np-problem { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 1000px) { .np-problem { grid-template-columns: 1fr; } }
.np-problem > div { background: #fff; border: 1px solid #DCE4EC; border-radius: 16px; padding: 28px 26px; }
.np-problem h3 { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; margin: 0 0 10px; color: #1B2F41; }
.np-problem p { font-size: 15px; line-height: 1.65; color: #5C7089; margin: 0; }
.np-problem .np-nr { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--akzent); margin-bottom: 14px; letter-spacing: .12em; }
.np-loesung {
display: grid; grid-template-columns: 56px 1fr; gap: 20px; align-items: start;
padding: 24px 26px; border-radius: 16px; background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
color: #fff; transition: all .25s; margin-bottom: 12px;
}
.np-loesung:hover { border-color: #EE7A08; background: rgba(238,122,8, .08); }
.np-loesung .np-nr { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 22px; color: var(--akzent); }
.np-loesung b { display: block; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 18px; margin-bottom: 6px; }
.np-loesung p { font-size: 15px; line-height: 1.6; color: #C4D3E3; margin: 0; }
.np-loesung .np-fakt { display: block; margin-top: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; line-height: 1.6; letter-spacing: .04em; color: var(--akzent); }
@media (max-width: 700px) { .np-loesung { grid-template-columns: 1fr; gap: 10px; } }
.g4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 1000px) { .g4 { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 560px) { .g4 { grid-template-columns: 1fr !important; } }
.g2 { grid-template-columns: repeat(2, 1fr) !important; }
@media (max-width: 1000px) { .g2 { grid-template-columns: 1fr !important; } }
.qr-scan {
position: absolute; left: 72.5%; top: 63.5%; width: 14%; height: 22%;
border-radius: 6px; overflow: hidden; pointer-events: none;
}
.qr-scan__line {
position: absolute; left: 5%; right: 5%; top: -12%; height: 9px; border-radius: 5px;
background: linear-gradient(180deg, rgba(238,122,8,0) 0%, rgba(238,122,8,.9) 50%, rgba(238,122,8,0) 100%);
box-shadow: 0 0 18px rgba(238,122,8,.85); opacity: 0;
}
.qr-scan__flash {
position: absolute; inset: 0; border-radius: 6px;
background: rgba(238,122,8,.3); opacity: 0;
}
.qr-chip {
position: absolute; left: 0; top: 0; z-index: 4;
display: flex; align-items: center; gap: 8px; white-space: nowrap;
background: #0A1D33; border: 1px solid rgba(238,122,8,.5); color: #fff;
font-family: 'JetBrains Mono', monospace; font-size: 13px;
padding: 9px 16px; border-radius: 999px;
box-shadow: 0 18px 44px rgba(3,12,24,.6);
opacity: 0; pointer-events: none; will-change: transform;
}
.qr-chip .st { color: var(--akzent); }
@media (max-width: 1000px) { .qr-chip, .qr-scan { display: none; } }
.rec-src { position: absolute; left: 63%; top: 65%; width: 2px; height: 2px; pointer-events: none; }
.rec-chip {
position: absolute; left: 0; top: 0; z-index: 4;
display: flex; align-items: center; gap: 10px; white-space: nowrap;
background: #0A1D33; border: 1px solid rgba(238,122,8,.5); color: #fff;
font-family: 'JetBrains Mono', monospace; font-size: 13px;
padding: 8px 16px 8px 8px; border-radius: 999px;
box-shadow: 0 18px 44px rgba(3,12,24,.6);
opacity: 0; pointer-events: none; will-change: transform;
}
.rec-chip .av {
width: 26px; height: 26px; border-radius: 50%; background: #EE7A08; color: #1B2F41;
font-size: 11px; font-weight: 600; display: flex; align-items: center; justify-content: center;
}
@media (max-width: 1000px) { .rec-chip, .rec-src { display: none; } }
.prod-rec {
position: absolute; left: 79%; top: 67%; z-index: 3;
display: flex; align-items: center; gap: 8px; white-space: nowrap;
background: rgba(6, 24, 41, .88); border: 1px solid rgba(238,122,8, .45);
color: #fff; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .1em;
padding: 7px 14px; border-radius: 999px; box-shadow: 0 14px 34px rgba(3, 12, 24, .55);
}
.prod-rec .dot {
width: 8px; height: 8px; border-radius: 50%; background: #FF3B30;
box-shadow: 0 0 10px rgba(255, 59, 48, .8);
animation: gPulse 1.4s infinite;
}
.prod-playhead {
position: absolute; left: 38%; top: 48%; height: 14%; width: 2px;
background: linear-gradient(180deg, rgba(238,122,8,0) 0%, rgba(238,122,8,.95) 18%, rgba(238,122,8,.95) 82%, rgba(238,122,8,0) 100%);
box-shadow: 0 0 12px rgba(238,122,8, .7); border-radius: 2px;
transform: rotate(7deg); transform-origin: center;
opacity: 0; pointer-events: none;
}
@media (max-width: 1000px) { .prod-rec, .prod-playhead { display: none; } }
.pk-cta {
display: block; margin-top: auto; padding: 12px 16px; border-radius: 10px; text-align: center;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px;
border: 1px solid #1B2F41; color: #1B2F41; background: #fff; transition: all .2s;
}
.hv-card .pk-cta, .hv-card-glow .pk-cta, .hv-card-strong .pk-cta { margin-top: auto; }
:is(.hv-card, .hv-card-glow, .hv-card-strong) > div:has(+ .pk-cta) { margin-bottom: 26px; }
.pk-cta:hover { background: #1B2F41; color: #fff; }
.pk-cta--solid { background: #EE7A08; border-color: #EE7A08; color: #1B2F41; }
.pk-cta--solid:hover { background: #E85F00; border-color: #E85F00; color: #fff; }
.pk-cta--dunkel { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.pk-cta--dunkel:hover { background: #EE7A08; border-color: #EE7A08; color: #1B2F41; }
.pk-auswahl {
display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
background: rgba(238,122,8, .12); border: 1px solid rgba(238,122,8, .5); border-radius: 10px;
padding: 10px 14px; font-size: 14px; color: #fff;
}
.pk-auswahl[hidden] { display: none; }
.pk-auswahl span { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: var(--akzent); flex: none; }
.pk-auswahl b { font-weight: 600; flex: 1; min-width: 0; }
.pk-auswahl button { background: none; border: 0; color: #9DB2C7; cursor: pointer; font-size: 20px; line-height: 1; padding: 0 2px; }
.pk-auswahl button:hover { color: #fff; }
#hero [data-split] > * { min-width: 0; }
.hs-frei > img[height] { height: auto; }
.sy-stage { position: relative; max-width: 1160px; margin: 72px auto 0; display: grid; grid-template-columns: 250px minmax(0, 1fr) 300px; gap: 48px; align-items: center; }
.sy-laptop {
position: relative; z-index: 2; display: block; margin: 0 auto;
width: 100%; height: auto; max-width: 680px; filter: drop-shadow(0 44px 80px rgba(3, 12, 24, .6));
}
.sy-rings { position: absolute; left: 50%; top: 42%; z-index: 1; pointer-events: none; }
.sy-rings i {
position: absolute; left: -30px; top: -30px; width: 60px; height: 60px;
border-radius: 50%; border: 2px solid rgba(238,122,8, .55); opacity: 0;
}
.sy--pulse .sy-rings i { animation: syRing 2.2s ease-out; }
.sy--pulse .sy-rings i:nth-child(2) { animation-delay: .5s; }
.sy--pulse .sy-rings i:nth-child(3) { animation-delay: 1s; }
@keyframes syRing {
0% { transform: scale(.25); opacity: 0; }
12% { opacity: .85; }
100% { transform: scale(10); opacity: 0; }
}
.sy-orbit { display: flex; flex-direction: column; gap: 12px; }
.sy-chip {
position: relative; z-index: 3; display: flex; align-items: center; gap: 10px;
background: #0A1D33; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px;
padding: 13px 16px; box-shadow: 0 24px 50px rgba(3, 12, 24, .55);
transition: transform .35s ease, border-color .35s ease;
}
.sy-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #33506E; transition: background-color .4s ease, box-shadow .4s ease; }
.sy-chip__name { font-size: 13px; color: #C4D3E3; white-space: nowrap; flex: 1; }
.sy-chip__state { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: var(--meta); transition: color .4s ease; }
.sy-chip--live { border-color: rgba(238,122,8, .55); transform: translateX(-5px); }
.sy-chip--live .sy-chip__dot { background: #EE7A08; box-shadow: 0 0 0 4px rgba(238,122,8, .18); }
.sy-chip--live .sy-chip__state { color: var(--akzent); }
.sy-edit {
position: relative; z-index: 4;
background: #0A1D33; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
padding: 20px; box-shadow: 0 30px 60px rgba(3, 12, 24, .65);
}
.sy-edit__lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; margin-bottom: 12px; }
.sy-edit__field {
display: flex; align-items: center; min-height: 20px; margin-bottom: 12px;
background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18);
border-radius: 8px; padding: 10px 12px; font-family: 'Figtree', sans-serif; font-size: 14px; color: #fff;
}
.sy-edit__caret { width: 2px; height: 15px; margin-left: 2px; background: #EE7A08; animation: gaBlink 1.05s steps(1) infinite; }
.sy-edit__btn {
width: 100%; background: #EE7A08; color: #1B2F41; border: none; border-radius: 8px;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px; padding: 11px;
pointer-events: none; transition: transform .15s ease, background .3s ease;
}
.sy-btn--press { transform: scale(.95); background: #E85F00; }
.sy-count { display: flex; align-items: baseline; gap: 12px; justify-content: flex-end; margin-top: 10px; padding-right: 4px; }
.sy-count__num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 26px; color: var(--akzent); white-space: nowrap; }
.sy-count__lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; }
@media (max-width: 1000px) {
.sy-stage { grid-template-columns: 1fr; gap: 26px; }
.sy-rings { display: none; }
.sy-edit { max-width: 320px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.sy-orbit { flex-direction: row; flex-wrap: wrap; justify-content: center; }
.sy-chip__name { flex: none; }
.sy-chip--live { transform: none; }
.sy-count { justify-content: center; width: 100%; padding: 0; }
}
.hs-stage.hs-ready > [data-z] { opacity: 0; }
.hs-stage.hs-ready .hs-card.is-in ~ [data-z] { animation: hsBadgeIn .9s cubic-bezier(.22, .75, .2, 1) .55s forwards; }
.sy-stage--hell { margin-top: 56px; }
.sy-stage--hell .sy-laptop { filter: drop-shadow(0 34px 60px rgba(8, 31, 56, .28)); }
.sy-stage--hell .sy-chip, .sy-stage--hell .sy-edit { background: #fff; border-color: #DCE4EC; box-shadow: 0 18px 44px rgba(8, 31, 56, .10); }
.sy-stage--hell .sy-chip__name { color: #1B2F41; }
.sy-stage--hell .sy-chip__dot { background: #C9D4E0; }
.sy-stage--hell .sy-chip--live { border-color: rgba(238,122,8, .6); }
.sy-stage--hell .sy-edit__field { background: #F4F7FA; border-color: #DCE4EC; color: #1B2F41; }
.sy-stage--hell .sy-edit__lbl, .sy-stage--hell .sy-count__lbl, .sy-stage--hell .sy-chip__state { color: var(--meta); }
.sy-stage--hell .sy-chip--live .sy-chip__state { color: var(--akzent); }
@media (max-width: 1000px) {
.hs-card.hs-frei { width: 100% !important; margin: 0 !important; }
.hs-stage--frei > [data-z] { position: static !important; display: inline-flex; width: max-content; max-width: 100%; margin: 14px 0 0; transform: none !important; }
.hs-stage--frei { display: flex; flex-direction: column; align-items: flex-start; }
.hs-stage--frei > .hs-card, .hs-stage--frei > [data-depth] { width: 100%; }
}
section div[style*="grid-template-columns:repeat(auto-fit,minmax(260px,1fr))"] > :only-child { max-width: 460px; }
@media (max-width: 600px) {
#hero [data-intro]:first-child { font-size: 11px !important; letter-spacing: .14em !important; }
.hero-cta a { text-align: center; }
}
input[type="file"] { font-family: 'Figtree', sans-serif; font-size: 14px; color: #C4D3E3; padding: 10px 0; }
input[type="file"]::file-selector-button { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13px; color: #1B2F41; background: #fff; border: 0; border-radius: 8px; padding: 9px 14px; margin-right: 12px; cursor: pointer; }
.kf-hell input[type="file"] { color: #5C7089; }
.kf-hell input[type="file"]::file-selector-button { background: #1B2F41; color: #fff; }
.js [data-reveal] { opacity: 0; }
.js .hs-stage:not(.hs-ready) .hs-card { opacity: 0; transform: translateY(30px) scale(.985); }
.js #hero [data-word] {
animation-name: heroWord; animation-duration: .95s;
animation-timing-function: cubic-bezier(.22, .75, .2, 1);
animation-fill-mode: both; animation-delay: .15s;
}
.js #hero [data-word] ~ [data-word] { animation-delay: .29s; }
.js #hero [data-intro] {
animation-name: heroIntro; animation-duration: .6s;
animation-timing-function: cubic-bezier(.22, .75, .2, 1);
animation-fill-mode: both; animation-delay: .22s;
}
.js #hero [data-intro] ~ [data-intro] { animation-delay: .32s; }
.js #hero [data-intro] ~ [data-intro] ~ [data-intro] { animation-delay: .42s; }
.js #hero [data-line] {
transform-origin: left;
animation-name: heroLine; animation-duration: .8s;
animation-timing-function: cubic-bezier(.22, .75, .2, 1);
animation-fill-mode: both; animation-delay: .62s;
}
@keyframes heroWord { from { transform: translateY(112%); } to { transform: none; } }
@keyframes heroIntro { from { opacity: 0; transform: translateY(16px); }
to   { opacity: 1; transform: none; } }
@keyframes heroLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
.js [data-reveal] { opacity: 1; }
.js #hero [data-word], .js #hero [data-intro], .js #hero [data-line] {
animation: none; opacity: 1; transform: none;
}
.js .hs-stage:not(.hs-ready) .hs-card { opacity: 1; transform: none; }
}
.smc-plan {
position: absolute; z-index: 3; left: 12%; top: 20%; width: 252px;
background: #0A1D33; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
box-shadow: 0 30px 70px rgba(3, 12, 24, .8); padding: 16px 18px; box-sizing: border-box;
}
.smc-plan__lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; margin-bottom: 10px; }
.smc-row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .09); }
.smc-row:first-of-type { border-top: none; }
.smc-row__day { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--meta); transition: color .3s ease; }
.smc-row__t { font-size: 12.5px; color: #C4D3E3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .3s ease, text-shadow .3s ease; }
.smc-row--live .smc-row__t { color: #fff; text-shadow: 0 0 14px rgba(238,122,8, .55); }
.smc-row__s { font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .1em; color: var(--meta); transition: color .3s ease; }
.smc-row--live .smc-row__s { color: var(--akzent); }
.smc-row--live .smc-row__day { color: #fff; }
.smc-plan__foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 12px; margin-top: 4px; }
.smc-plan__foot span:first-child { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .16em; color: #9DB2C7; }
.smc-plan__num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 26px; line-height: 1; color: var(--akzent); }
.smc-fly {
position: absolute; z-index: 5; left: 0; top: 0; width: 14px; height: 14px;
border-radius: 4px; background: #EE7A08; box-shadow: 0 6px 18px rgba(238,122,8, .5);
opacity: 0; pointer-events: none;
}
.smc-pop {
position: absolute; z-index: 5; display: flex; align-items: center; gap: 6px;
background: #0A1D33; border: 1px solid rgba(238,122,8, .5); border-radius: 999px;
padding: 6px 12px; opacity: 0; pointer-events: none;
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #fff;
}
.smc-pop svg { width: 12px; height: 12px; display: block; }
.smc-pop--show { animation: smcPop 1.5s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes smcPop {
0% { opacity: 0; transform: translate(-50%, 0) scale(.6); }
12% { opacity: 1; transform: translate(-50%, -10px) scale(1.06); }
24% { transform: translate(-50%, -12px) scale(1); }
78% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -26px) scale(.95); }
}
@media (max-width: 1000px) {
.smc-fly, .smc-pop { display: none; }
.hs-stage--frei > .smc-plan { display: block; width: 100%; max-width: 320px; margin: 20px 0 0; }
}
@media (max-width: 700px) { div[style*="grid-template-columns:repeat(2,minmax(0,300px))"], div[style*="grid-template-columns:repeat(3,minmax(0,300px))"] { grid-template-columns: minmax(0, 300px) !important; } }
.mig { font-size: 17px; line-height: 1.75; color: #33506E; }
.mig--lesen { max-width: 820px; }
.mig > *:first-child { margin-top: 0; }
.mig > *:last-child { margin-bottom: 0; }
.mig h2 {
font-family: 'Sora', sans-serif; font-weight: 700;
font-size: clamp(26px, 2.6vw, 34px); line-height: 1.18; letter-spacing: -0.025em;
color: #1B2F41; margin: 0 0 20px; max-width: 820px;
}
.mig h3 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 21px; line-height: 1.3;
color: #1B2F41; margin: 38px 0 12px; max-width: 820px;
}
.mig h4 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px;
color: #1B2F41; margin: 28px 0 8px;
}
.mig p { margin: 0 0 18px; max-width: 820px; }
.mig p.mig-titel > strong, .mig p.mig-titel > b {
display: block; font-family: 'Sora', sans-serif; font-weight: 600;
font-size: 19px; color: #1B2F41; margin: 34px 0 8px;
}
.mig ul { list-style: none; margin: 0 0 20px; padding: 0; max-width: 820px; }
.mig ul li { position: relative; padding-left: 26px; margin: 0 0 10px; }
.mig ul li::before {
content: ""; position: absolute; left: 4px; top: .62em;
width: 7px; height: 7px; border-radius: 50%; background: #EE7A08;
}
.mig ol { margin: 0 0 20px; padding-left: 22px; max-width: 820px; }
.mig ol li { margin: 0 0 10px; }
.mig ol li::marker { color: var(--akzent); font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.mig a { color: var(--akzent); text-decoration: underline; text-underline-offset: 3px; }
.mig a:hover { color: #E85F00; }
.mig img {
max-width: 100%; max-height: 620px; width: auto; height: auto;
border-radius: 18px; display: block; margin: 30px 0;
box-shadow: 0 18px 44px rgba(3, 12, 24, .10);
}
.mig video { max-width: 100%; height: auto; border-radius: 18px; display: block; margin: 30px 0; }
.mig figure { margin: 30px 0; }
.mig figcaption {
font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .08em;
color: var(--meta); margin-top: 10px;
}
.mig blockquote {
margin: 30px 0; padding: 22px 26px; border-left: 3px solid #EE7A08;
background: #fff; border-radius: 0 14px 14px 0; box-shadow: 0 12px 30px rgba(3, 12, 24, .06);
max-width: 820px;
}
.mig blockquote p:last-child { margin: 0; }
.mig table { border-collapse: collapse; width: 100%; margin: 0 0 24px; font-size: 15px; display: block; overflow-x: auto; }
.mig th, .mig td { border-top: 1px solid #DCE4EC; padding: 12px 14px 12px 0; text-align: left; vertical-align: top; }
.mig th { font-family: 'Sora', sans-serif; font-weight: 600; color: #1B2F41; }
.mig { overflow-wrap: anywhere; }
#hero .recht-meta { color: var(--meta); margin-top: 22px; }
@media (max-width: 900px) {
.mig h2 { font-size: 25px; }
.mig img { margin: 24px 0; }
}
.bl-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.bl-karte {
display: block; background: #fff; border: 1px solid #DCE4EC; border-radius: 18px;
overflow: hidden; text-decoration: none; color: inherit;
transition: transform .25s, box-shadow .25s, border-color .25s;
}
.bl-karte:hover { transform: translateY(-4px); border-color: #EE7A08; box-shadow: 0 18px 44px rgba(3, 12, 24, .10); }
.bl-karte__bild { overflow: hidden; aspect-ratio: 16 / 10; }
.bl-karte__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.bl-karte:hover .bl-karte__bild img { transform: scale(1.04); }
.bl-karte__text { padding: 18px 20px 22px; }
.bl-karte__meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; color: var(--meta); margin-bottom: 10px; }
.bl-karte h2, .bl-karte h3 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px;
line-height: 1.3; color: #1B2F41; margin: 0 0 8px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
}
.bl-karte p {
font-size: 14px; line-height: 1.6; color: #5C7089; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
}
@media (max-width: 1000px) { .bl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .bl-raster { grid-template-columns: 1fr; } }
header a, header .nv, header button,
#topbar-nav a, .m-tel, .m-burger {
transition-property: background-color, color, border-color, opacity, transform, box-shadow !important;
}
.frc-captcha {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
border-radius: 10px;
transition-property: background-color, color, border-color, opacity !important;
}
.frc-captcha[data-theme="dark"] {
border: 1px solid rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .06);
}
.frc-captcha[data-theme="light"] {
border: 1px solid #DCE4EC;
background: #fff;
}
.frc-captcha :focus-visible { outline: 2px solid #EE7A08; outline-offset: 2px; }
.mig-logos {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 20px; margin-top: 12px;
}
.mig-logo {
flex: 1 1 140px; max-width: 220px;
background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(8, 31, 56, .10);
padding: 22px 20px; display: flex; align-items: center; justify-content: center;
min-height: 96px; box-sizing: border-box; transition: transform .3s, box-shadow .3s;
}
@media (min-width: 900px) { .mig-logo { flex-basis: 200px; } }
.mig-logo:hover { transform: translateY(-3px); box-shadow: 0 22px 46px rgba(8, 31, 56, .16); }
.mig-logo img {
max-height: 46px; max-width: 100%; width: auto; height: auto;
object-fit: contain; display: block; margin: 0; border-radius: 0; box-shadow: none;
}
.mig-karten {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 40px; margin-top: 8px; align-items: stretch;
}
.mig-karte { border-top: 2px solid #EE7A08; padding-top: 26px; }
.mig-karte .mig h3 { margin: 0 0 12px; font-size: 20px; }
.mig-karte .mig p { margin: 0 0 14px; font-size: 16px; }
.mig-karte .mig > *:last-child { margin-bottom: 0; }
.mig-bild img {
width: 100%; max-width: 100%; max-height: none; height: auto; margin: 0;
border-radius: 16px; display: block; box-shadow: 0 26px 60px rgba(3, 12, 24, .14);
}
@media (max-width: 900px) {
.mig-bild { order: 0 !important; }
.mig-karten { gap: 30px; }
.mig-logos { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 14px; }
.mig-logo { min-height: 76px; padding: 16px 14px; }
.mig-logo img { max-height: 34px; }
}
.mig-vor {
font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em;
line-height: 1.6; text-transform: uppercase; color: var(--akzent); margin: 0 0 18px;
}
.mig-vor a { color: inherit; text-decoration: none; }
[data-split] > * { min-width: 0; }
.mig-bild img, .mig-bild video {
width: 100%; max-width: 100%; max-height: none; height: auto; margin: 0;
border-radius: 16px; display: block; box-shadow: 0 26px 60px rgba(3, 12, 24, .14);
}
.mig-karte img, .mig-karte video { max-width: 100%; }
.mig img, .mig video, .mig iframe { max-width: 100%; }
.mig-spalte { max-width: 860px; }
.mig-spalte .mig { max-width: none; }
.mig-spalte--mitte { margin-left: auto; margin-right: auto; }
.mig-reihe {
display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 24px; margin: 0 0 48px;
}
.mig-reihe__feld { border-radius: 16px; overflow: hidden; box-shadow: 0 18px 44px rgba(3, 12, 24, .12); }
.mig-reihe__feld img {
width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover;
display: block; margin: 0; border-radius: 0; box-shadow: none; max-height: none;
}
@media (max-width: 900px) { .mig-reihe { gap: 16px; margin-bottom: 32px; } }
.m-grp--link { display: block; text-decoration: none; }
.m-grp--link:hover { color: var(--akzent); }
}
.mig-zahl-titel {
font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .16em;
text-transform: uppercase; color: var(--meta); margin-top: 14px; line-height: 1.6;
}
.mig-karte--link { display: block; text-decoration: none; color: inherit; transition: transform .25s; }
.mig-karte--link:hover { transform: translateY(-4px); }
.mig-karte--link h3 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px; line-height: 1.3;
color: #1B2F41; margin: 0 0 10px;
}
.mig-karte--link p { font-size: 15px; line-height: 1.65; color: #5C7089; margin: 0 0 16px; }
.mig-mehr { font-family: 'Figtree', sans-serif; font-weight: 600; font-size: 15px; color: var(--akzent); }
.mig-karte--link:hover .mig-mehr { color: #E85F00; }
.mig-karten.g5 .mig-karte--link h3, .mig-karten.g5 .mig h3 { font-size: 17px; }
.mig-karten.g5 { gap: 28px !important; }
@media (max-width: 1000px) {
.mig-karten.g5, .mig-karten.g3 { grid-template-columns: 1fr !important; }
}
.mig-felder { display: grid; gap: 72px; margin-top: 8px; }
.mig-feld {
display: grid; grid-template-columns: .95fr 1.05fr; gap: 64px;
align-items: center;
}
.mig-feld--ohne-bild { grid-template-columns: 1fr; max-width: 860px; }
.mig-feld__bild img {
width: 100%; max-width: 100%; max-height: none; height: auto; margin: 0;
border-radius: 16px; display: block; box-shadow: 0 26px 60px rgba(3, 12, 24, .14);
}
.mig-felder--gleich .mig-feld__bild {
aspect-ratio: 3 / 2; overflow: hidden; border-radius: 16px;
box-shadow: 0 26px 60px rgba(3, 12, 24, .14);
}
.mig-felder--gleich .mig-feld__bild img {
width: 100%; height: 100%; object-fit: cover;
border-radius: 0; box-shadow: none;
}
.mig-felder--gleich .mig-feld__bild img.ist-grafik {
object-fit: contain; background: #F8F8F7; padding: 16px; box-sizing: border-box;
}
.mig-feld__text .mig h3 {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(24px, 2.4vw, 32px);
line-height: 1.2; letter-spacing: -0.02em; color: #1B2F41; margin: 0 0 16px;
}
.mig-feld__text .mig p { margin: 0 0 18px; }
.mig-feld__cta {
display: inline-block; background: #EE7A08; color: #1B2F41 !important;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
padding: 14px 26px; border-radius: 12px; text-decoration: none !important;
margin-top: 6px;
}
@media (max-width: 900px) {
.mig-feld { grid-template-columns: 1fr; gap: 28px; }
.mig-felder { gap: 56px; }
}
.mig-statement { max-width: 880px; margin: 0 auto; text-align: center; }
.mig-statement .mig { max-width: none; font-size: 20px; line-height: 1.8; }
.mig-statement .mig p { max-width: none; }
.mig-statement .mig p:last-child { margin-bottom: 0; }
.mig-solo { text-align: center; margin: 0 0 40px; }
.mig-solo img {
display: inline-block; width: auto; max-width: 100%; max-height: 420px; height: auto;
border-radius: 16px; box-shadow: 0 18px 44px rgba(3, 12, 24, .12); margin: 0;
}
.mig-stimmen {
position: relative; max-width: 980px; margin: 0 auto;
padding: 0 56px; text-align: center;
}
.mig-stimmen__buehne { position: relative; }
.mig-stimme { margin: 0; }
.js .mig-stimme {
position: absolute; inset: 0; opacity: 0; visibility: hidden;
transition: opacity .45s, visibility .45s;
}
.js .mig-stimme.ist-aktiv { position: relative; opacity: 1; visibility: visible; }
.mig-stimme__foto {
width: 120px; height: 120px; border-radius: 50%; object-fit: cover;
display: inline-block; margin: 0 0 26px;
box-shadow: 0 0 0 5px #fff, 0 18px 40px rgba(3, 12, 24, .14);
}
.mig-stimme blockquote {
margin: 0 0 26px; font-size: 19px; line-height: 1.75; color: #33506E;
}
.mig-stimme figcaption b {
display: block; font-family: 'Sora', sans-serif; font-weight: 700;
font-size: 20px; color: #1B2F41;
}
.mig-stimme figcaption span {
display: block; font-size: 15px; color: #5C7089; margin-top: 4px;
}
.mig-stimmen__pfeil {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; padding: 8px; cursor: pointer;
background: none; border: 0; color: var(--akzent);
transition: color .2s, transform .2s;
}
.mig-stimmen__pfeil:hover { color: #E85F00; transform: translateY(-50%) scale(1.12); }
.mig-stimmen__pfeil:first-of-type { left: 0; }
.mig-stimmen__pfeil:last-of-type { right: 0; }
.mig-stimmen__pfeil svg { width: 100%; height: 100%; display: block; }
.mig-stimmen__punkte { display: flex; justify-content: center; gap: 10px; margin-top: 34px; }
.mig-stimmen__punkt {
width: 24px; height: 24px; padding: 0; cursor: pointer; border: 0;
background: none; display: grid; place-items: center; flex: none;
}
.mig-stimmen__punkt::before {
content: ""; width: 10px; height: 10px; border-radius: 50%;
background: #DCE4EC; transition: background .2s, transform .2s;
}
.mig-stimmen__punkt[aria-current="true"]::before { background: #EE7A08; transform: scale(1.25); }
@media (max-width: 700px) {
.mig-stimmen { padding: 0 34px; }
.mig-stimme blockquote { font-size: 17px; }
.mig-stimmen__pfeil { width: 34px; height: 34px; padding: 5px; }
}
@media (prefers-reduced-motion: reduce) {
.js .mig-stimme { transition: none; }
}
.mig-checks {
list-style: none; margin: 8px 0 0; padding: 0;
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 56px;
max-width: 1000px;
}
.mig-checks li {
display: flex; align-items: flex-start; gap: 14px;
font-size: 17px; line-height: 1.6; color: #33506E;
}
.mig-check {
flex: none; width: 28px; height: 28px; border-radius: 50%;
background: #FFF1E8; color: var(--akzent);
display: flex; align-items: center; justify-content: center;
margin-top: -1px;
}
.mig-check svg { width: 16px; height: 16px; display: block; }
@media (max-width: 760px) { .mig-checks { grid-template-columns: 1fr; gap: 14px; } }
#topbar-nav, #topbar-nav a,
div[style*="#061829"] > div > a[href^="tel"],
div[style*="#061829"] .hv-white { line-height: 16px; }
#topbar-nav { height: 16px; align-items: center; }
.bc__in { height: 39px; padding-top: 0; padding-bottom: 0; }
.bc__in > * { line-height: 16px; }
.js.kein-intro #hero [data-word],
.js.kein-intro #hero [data-intro],
.js.kein-intro #hero [data-line] {
animation: none !important; transition: none !important;
opacity: 1 !important; transform: none !important;
}
.js.kein-intro .hs-stage:not(.hs-ready) .hs-card,
.js.kein-intro .hs-stage.hs-ready .hs-card { opacity: 1; transform: none; transition: none !important; }
.js.kein-intro .hs-stage.hs-ready > [data-z],
.js.kein-intro .hs-stage > [data-z] { opacity: 1; animation: none !important; translate: 0 0; }
.js.kein-intro #hero [data-reveal] { opacity: 1; transition: none !important; transform: none !important; }
.js.kein-intro .hs-badges > div,
.js.kein-intro [data-z] { opacity: 1 !important; animation: none !important; translate: 0 0; }
.hs-card img { width: 100%; max-width: 100%; height: auto; display: block; }
.mig-karte .mig-nr {
font-family: 'JetBrains Mono', monospace; font-size: 14px; color: var(--akzent);
letter-spacing: .12em; margin-bottom: 14px;
}
.mig-schritt-titel {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 20px;
line-height: 1.3; color: #1B2F41; margin-bottom: 10px;
}
.mig-karte .mig p { font-size: 15px; line-height: 1.65; }
.mig-schlusszeile {
margin: 44px 0 0; font-family: 'Sora', sans-serif; font-weight: 600;
font-size: 19px; color: #1B2F41; text-align: center;
}
.mig-karte .mig p.mig-titel > strong, .mig-karte .mig p.mig-titel > b {
display: inline; font-family: inherit; font-weight: 700; font-size: inherit;
color: inherit; margin: 0;
}
.sq-rank {
position: absolute; z-index: 4; left: 0; top: 12%; width: 244px;
background: #0A1D33; border: 1px solid rgba(255, 255, 255, .16); border-radius: 14px;
box-shadow: 0 34px 74px rgba(3, 12, 24, .82); padding: 16px 18px; box-sizing: border-box;
}
.sq-rank__q {
display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 14px;
border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 13.5px; color: #fff; min-height: 18px;
}
.sq-rank__q svg { width: 14px; height: 14px; flex: none; color: var(--meta); }
.sq-rank__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sq-caret { width: 2px; height: 14px; background: #EE7A08; animation: gaBlink 1.05s steps(1) infinite; }
.sq-rank__lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: #9DB2C7; margin-bottom: 10px; }
.sq-rank__val { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 28px; line-height: 1; color: #fff; transition: color .5s ease, text-shadow .5s ease; white-space: nowrap; }
.sq-rank--top .sq-rank__val { color: var(--akzent); text-shadow: 0 0 22px rgba(238,122,8, .5); }
.sq-track { position: relative; height: 68px; width: 26px; flex: none; }
.sq-track::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 4px; border-radius: 2px; background: rgba(255, 255, 255, .12); }
.sq-track__fill { position: absolute; right: 0; bottom: 0; width: 4px; height: 0; border-radius: 2px; background: linear-gradient(180deg, #F8932F 0%, #EE7A08 100%); box-shadow: 0 0 16px rgba(238,122,8, .55); }
.sq-tick { position: absolute; right: 10px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--meta); }
.sq-tick--1 { top: -2px; }
.sq-tick--25 { bottom: -2px; }
@media (max-width: 1000px) {
.sq-rank { position: static; width: auto; max-width: 320px; margin: 22px auto 0; }
}
.hs-img--hub { height: auto; }
.sp-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sp-space {
position: absolute; left: 0; top: 0; width: 1000px; height: 700px;
transform-origin: 0 0;
}
.sp-row {
position: absolute; left: -132px; top: 196px; width: 636px; height: 128px;
display: flex; align-items: center; gap: 26px; box-sizing: border-box;
padding: 0 30px; border-radius: 20px;
background: linear-gradient(100deg, #EE7A08 0%, #F8932F 100%);
box-shadow: 0 26px 64px rgba(238,122,8, .5),
0 0 0 1px rgba(255, 255, 255, .22) inset;
opacity: 0; transform: translateX(-120%);
transition: transform .72s cubic-bezier(.2, .82, .24, 1), opacity .4s ease;
}
.sp-row--in { opacity: 1; transform: none; }
.sp-row__play {
width: 0; height: 0; flex: none; border-left: 36px solid #fff;
border-top: 22px solid transparent; border-bottom: 22px solid transparent;
}
.sp-row__txt { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.sp-row__txt b {
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 47px;
color: #fff; letter-spacing: -0.01em;
}
.sp-row__txt i {
font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 24px;
letter-spacing: .1em; color: rgba(255, 255, 255, .85);
}
.sp-row__time {
font-family: 'JetBrains Mono', monospace; font-size: 34px; color: #fff; flex: none;
}
.sp-wave {
position: absolute; left: 453px; top: 447px; width: 409px; height: 84px;
overflow: hidden;
}
.sp-wave__fill {
width: 0; height: 100%; border-right: 5px solid #FAAC5F; box-sizing: border-box;
background: linear-gradient(90deg, rgba(238,122,8, .12) 0%,
rgba(238,122,8, .5) 78%, rgba(255, 138, 51, .8) 100%);
filter: drop-shadow(0 0 14px rgba(238,122,8, .85));
transition: width 2.8s linear;
}
@media (max-width: 1000px) { .sp-layer { display: none; } }
@media (prefers-reduced-motion: reduce) { .sp-layer { display: none; } }
.au-wave {
position: absolute; left: -16%; top: -6%; width: 148%; height: 112%;
z-index: 1; pointer-events: none; overflow: visible;
filter: drop-shadow(0 0 22px rgba(238,122,8, .55))
drop-shadow(0 0 60px rgba(238,122,8, .3));
}
[data-audio-hero] { container-type: inline-size; }
.js .au-wave { opacity: 0; }
.js .hs-stage.hs-eingefahren .au-wave {
opacity: 1; transition: opacity 1.1s ease .35s;
}
@media (prefers-reduced-motion: reduce) {
.js .au-wave { opacity: 1; transition: none; }
}
.pf-screen {
position: absolute; inset: 0; z-index: 3;
pointer-events: none; container-type: inline-size;
}
.pf-node {
position: absolute; width: 1.06cqw; height: 1.06cqw;
margin: -0.53cqw 0 0 -0.53cqw;
border-radius: 50%; border: 0.24cqw solid #EE7A08; opacity: 0;
}
.pf-node--ping { animation: pfPing 1.1s ease-out; }
@keyframes pfPing {
0%   { transform: scale(.3); opacity: .95; }
100% { transform: scale(4.2); opacity: 0; }
}
.pf-dot {
position: absolute; left: 25.2%; top: 45.4%;
width: 1.42cqw; height: 1.42cqw; margin: -0.71cqw 0 0 -0.71cqw;
border-radius: 50%; background: #EE7A08;
box-shadow: 0 0 0 0.47cqw rgba(238,122,8, .22),
0 0 2.6cqw 0.71cqw rgba(238,122,8, .55);
opacity: 0;
transition: opacity .35s ease,
left .46s cubic-bezier(.35, .05, .2, 1),
top  .46s cubic-bezier(.35, .05, .2, 1);
}
.pf-dot--show { opacity: 1; }
.pf-flash {
position: absolute; left: 64.1%; top: 25.4%;
width: 2.12cqw; height: 2.12cqw; margin: -1.06cqw 0 0 -1.06cqw;
border-radius: 50%; border: 0.24cqw solid #EE7A08; opacity: 0;
}
.pf-flash--go { animation: pfFlash 1.5s cubic-bezier(.2, .7, .3, 1); }
@keyframes pfFlash {
0%   { transform: scale(.4); opacity: 1; box-shadow: 0 0 3.54cqw 1.18cqw rgba(238,122,8, .5); }
100% { transform: scale(7);  opacity: 0; box-shadow: 0 0 0 0 rgba(238,122,8, 0); }
}
@media (prefers-reduced-motion: reduce) { .pf-screen { display: none; } }
.bs-raster {
display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 72px;
align-items: start;
}
.bs-spalte { position: sticky; top: 104px; display: grid; gap: 20px; }
.bs-tv {
background: #F4F7FA; border: 1px solid #E2E9F0; border-radius: 16px;
padding: 22px 24px 24px;
}
.bs-tv__titel {
font-family: 'JetBrains Mono', monospace; font-size: 11px;
letter-spacing: .18em; color: var(--meta); margin-bottom: 14px;
}
.bs-tv ol { list-style: none; margin: 0; padding: 0; counter-reset: bstv; }
.bs-tv li { counter-increment: bstv; margin: 0 0 11px; padding-left: 26px; position: relative; }
.bs-tv li::before {
content: counter(bstv); position: absolute; left: 0; top: 1px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--akzent);
}
.bs-tv a {
color: #33506E; text-decoration: none; font-size: 14.5px; line-height: 1.45;
transition: color .2s;
display: inline-block; padding-block: 4px; margin-block: -4px;
}
.bs-tv a:hover { color: #1B2F41; text-decoration: underline; text-underline-offset: 3px; }
.bs-autor {
display: flex; align-items: center; gap: 14px; text-decoration: none;
background: #fff; border: 1px solid #E2E9F0; border-radius: 16px;
padding: 16px 18px; color: #1B2F41; transition: border-color .2s, box-shadow .2s;
}
a.bs-autor:hover { border-color: #C9D6E2; box-shadow: 0 10px 26px rgba(3, 12, 24, .07); }
.bs-autor img { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; flex: none; }
.bs-autor__rolle {
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: .16em; color: var(--meta); margin-bottom: 4px;
}
.bs-autor__name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; }
.bs-cta {
background: linear-gradient(180deg, #081F38 0%, #0A2440 100%); color: #fff;
border-radius: 16px; padding: 22px 24px 24px;
}
.bs-cta__titel { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px; margin-bottom: 8px; }
.bs-cta p { font-size: 14px; line-height: 1.6; color: #C4D3E3; margin: 0 0 16px; }
.bs-cta a {
display: inline-block; background: #EE7A08; color: #1B2F41; text-decoration: none;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14px;
padding: 11px 18px; border-radius: 10px; transition: filter .2s;
}
.bs-cta a:hover { filter: brightness(1.08); }
@media (max-width: 1180px) {
.bs-raster { grid-template-columns: minmax(0, 1fr) 260px; gap: 48px; }
}
@media (max-width: 900px) {
.bs-raster { grid-template-columns: 1fr; gap: 44px; }
.bs-spalte { position: static; }
.bs-spalte { order: -1; }
.bs-tv { order: -1; }
}
@media (max-width: 900px) {
.bc__in a,
.bc__in span[aria-current] {
display: inline-block;
padding-block: 5px;
margin-block: -5px;
}
footer a {
display: inline-block;
padding-block: 4px;
margin-block: -4px;
}
footer p a { display: inline; padding-block: 0; margin-block: 0; }
.mig p > a:only-child,
.mig li > a:only-child,
.recht p > a:only-child,
.recht li > a:only-child {
display: inline-block;
padding-block: 4px;
margin-block: -4px;
}
}
.mig-stimmen__punkt {
position: relative;
}
.mig-stimmen__punkt::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 24px;
transform: translate(-50%, -50%);
}
.vz-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 56px; align-items: center; margin-top: 56px; }
.vz-side { display: flex; flex-direction: column; gap: 28px; }
.vz-steps { display: flex; flex-direction: column; }
.vz-step {
display: grid; grid-template-columns: 42px 1fr; gap: 16px; align-items: baseline;
padding: 20px 0; border-top: 1px solid #DCE4EC;
opacity: .38; transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .3, 1);
}
.vz-step--on { opacity: 1; transform: translateX(4px); }
.vz-step__n { font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #5B748F; transition: color .4s ease; }
.vz-step--on .vz-step__n { color: #B15A06; }
.vz-step__t { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -0.015em; color: #1B2F41; }
.vz-card {
position: relative; background: #fff; border: 1px solid #DCE4EC; border-radius: 16px;
box-shadow: 0 30px 70px rgba(8, 31, 56, .12); padding: 28px 32px 30px;
}
.vz-card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.vz-card__lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #5B748F; }
.vz-ring { position: relative; width: 46px; height: 46px; flex: none; }
.vz-ring svg { width: 100%; height: 100%; display: block; }
.vz-ring b {
position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px; color: #1B2F41;
}
.vz-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -0.02em; color: #1B2F41; margin-bottom: 18px; }
.vz-fields { display: flex; flex-direction: column; }
.vz-field {
display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 14px;
padding: 13px 0; border-top: 1px solid #E9EFF5;
opacity: .34; filter: grayscale(1);
transition: opacity .45s ease, filter .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.vz-field--on { opacity: 1; filter: none; transform: translateX(3px); }
.vz-field__ico {
display: flex; align-items: center; justify-content: center; width: 20px; height: 20px;
border-radius: 50%; background: #E4EBF2; color: #fff; font-size: 11px; line-height: 1;
transition: background-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.vz-field--on .vz-field__ico { background: #EE7A08; color: #1B2F41; box-shadow: 0 0 0 4px rgba(238, 122, 8, .14); }
.vz-field__lbl { font-size: 15px; color: #1B2F41; }
.vz-field__val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #5B748F; text-align: right; }
.vz-cta {
display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 20px;
background: #EE7A08; color: #1B2F41; border-radius: 12px; padding: 14px;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px;
opacity: .32; transform: scale(.98); transition: opacity .4s ease, transform .3s ease, box-shadow .4s ease;
}
.vz-cta__ico { display: flex; }
.vz-cta__ico svg { width: 18px; height: 18px; display: block; }
.vz-cta--live { opacity: 1; transform: none; }
.vz-cta--ring { animation: vzRing 1.5s cubic-bezier(.2, .7, .3, 1); }
@keyframes vzRing {
0%, 100% { box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); transform: none; }
18% { box-shadow: 0 0 0 10px rgba(238, 122, 8, .22); transform: scale(1.03); }
40% { box-shadow: 0 0 0 20px rgba(238, 122, 8, 0); transform: none; }
58% { box-shadow: 0 0 0 10px rgba(238, 122, 8, .22); transform: scale(1.03); }
80% { box-shadow: 0 0 0 20px rgba(238, 122, 8, 0); transform: none; }
}
.vz-lead {
align-self: flex-start; display: flex; align-items: center; gap: 14px;
background: #fff; border: 1px solid rgba(238, 122, 8, .55); border-radius: 14px;
padding: 15px 20px; box-shadow: 0 24px 54px rgba(8, 31, 56, .14);
opacity: 0; transform: translateY(14px) scale(.96); pointer-events: none;
transition: opacity .4s ease, transform .55s cubic-bezier(.2, .85, .25, 1);
}
.vz-lead--in { opacity: 1; transform: none; }
.vz-lead__dot { width: 10px; height: 10px; border-radius: 50%; background: #EE7A08; flex: none; animation: gPulse 1.6s infinite; }
.vz-lead__txt { display: flex; flex-direction: column; gap: 4px; }
.vz-lead__txt b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 16px; color: #1B2F41; }
.vz-lead__txt i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 11px; letter-spacing: .1em; color: #5B748F; }
@media (max-width: 1000px) { .vz-stage { grid-template-columns: 1fr; gap: 36px; margin-top: 40px; } }
@media (prefers-reduced-motion: reduce) {
.vz-cta--ring { animation: none; }
.vz-lead__dot { animation: none; }
}
.gs-layer { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.gs-space { position: absolute; left: 0; top: 0; width: 1000px; height: 700px; transform-origin: 0 0; }
.gs-hot { position: absolute; border-radius: 999px; pointer-events: none; box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
.gs-hot--find { left: 71.8%; top: 11.0%; width: 9.8%; height: 4.9%; transform: rotate(-3deg); }
.gs-hot--call { left: 50.9%; top: 44.6%; width: 6.4%; height: 4.3%; transform: rotate(-2deg); }
.gs-hot--pin  { left: 70.6%; top: 43.9%; width: 6.2%; height: 4.4%; transform: rotate(-2deg); }
.gs-find--press { animation: gsFind 2.6s cubic-bezier(.2, .7, .3, 1); }
@keyframes gsFind {
0%   { box-shadow: 0 0 0 0 rgba(238, 122, 8, .7); }
10%  { box-shadow: 0 0 0 14px rgba(238, 122, 8, .3), 0 0 34px 10px rgba(238, 122, 8, .55); }
26%  { box-shadow: 0 0 0 30px rgba(238, 122, 8, 0), 0 0 30px 8px rgba(238, 122, 8, .45); }
70%  { box-shadow: 0 0 0 0 rgba(238, 122, 8, 0), 0 0 30px 8px rgba(238, 122, 8, .45); }
100% { box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
}
.gs-call--ring, .gs-pin--ping { animation: gsCall 1.8s cubic-bezier(.2, .7, .3, 1); }
@keyframes gsCall {
0%, 100% { box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
15% { box-shadow: 0 0 0 14px rgba(238, 122, 8, .3), 0 0 24px 6px rgba(238, 122, 8, .5); }
42% { box-shadow: 0 0 0 26px rgba(238, 122, 8, 0), 0 0 24px 6px rgba(238, 122, 8, .4); }
57% { box-shadow: 0 0 0 14px rgba(238, 122, 8, .3), 0 0 24px 6px rgba(238, 122, 8, .5); }
85% { box-shadow: 0 0 0 26px rgba(238, 122, 8, 0); }
}
.gs-hit {
position: absolute; left: 266px; top: 246px; width: 392px; height: 145px;
border: 4px solid #EE7A08; border-radius: 14px;
box-shadow: 0 0 34px rgba(238, 122, 8, .6), inset 0 0 26px rgba(238, 122, 8, .16);
opacity: 0; transform: scale(.95);
transition: opacity .35s ease, transform .5s cubic-bezier(.2, .85, .25, 1);
}
.gs-hit--in { opacity: 1; transform: none; }
.gs-chip {
position: absolute; left: 470px; top: 214px;
background: #EE7A08; color: #1B2F41; border-radius: 7px; padding: 6px 12px;
font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 19px;
letter-spacing: .08em; white-space: nowrap;
box-shadow: 0 12px 30px rgba(0, 0, 0, .3);
opacity: 0; transform: translateY(10px) scale(.9);
transition: opacity .3s ease, transform .5s cubic-bezier(.2, .85, .25, 1);
}
.gs-chip--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.gs-find--press, .gs-call--ring, .gs-pin--ping { animation: none; }
}
.pl-frame { position: relative; }
.pl-rec {
position: absolute; z-index: 3; right: 20px; top: 20px;
display: flex; align-items: center; gap: 9px;
background: rgba(8, 31, 56, .82); backdrop-filter: blur(6px);
border: 1px solid rgba(255, 255, 255, .2); border-radius: 999px; padding: 8px 14px;
font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .16em; color: #fff;
transition: border-color .4s ease, background-color .4s ease;
}
.pl-rec__dot { width: 8px; height: 8px; border-radius: 50%; background: #FF3B30; flex: none; animation: gPulse 1.1s infinite; }
.pl-rec b { font-weight: 500; }
.pl-rec em { font-style: normal; color: #9DB2C7; }
.pl-rec--live { border-color: rgba(238, 122, 8, .75); background: rgba(238, 122, 8, .94); color: #1B2F41; }
.pl-rec--live .pl-rec__dot { background: #1B2F41; animation: none; }
.pl-rec--live em { color: rgba(27, 47, 65, .75); }
.pl-rail {
position: absolute; z-index: 4; left: -34px; bottom: -26px;
display: flex; flex-direction: column; gap: 2px;
background: #fff; border: 1px solid #DCE4EC; border-radius: 14px;
padding: 18px 22px; box-shadow: 0 26px 60px rgba(8, 31, 56, .18);
}
.pl-rail--flach {
position: static; margin-top: 38px;
background: none; border: none; box-shadow: none; padding: 0;
}
.pl-rail--flach .pl-rail__line { left: 5px; top: 10px; bottom: 10px; }
.pl-rail--flach .pl-step__txt {
font-family: 'JetBrains Mono', monospace; font-weight: 500;
font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
color: #5B748F;
}
.pl-rail--flach .pl-step--on .pl-step__txt { color: #B15A06; }
.pl-rail__line { position: absolute; left: 32px; top: 27px; bottom: 27px; width: 2px; background: #E9EFF5; border-radius: 2px; overflow: hidden; }
.pl-rail__line i { display: block; width: 100%; height: 0; background: linear-gradient(180deg, #F09A3E, #EE7A08); transition: height .5s cubic-bezier(.3, .1, .25, 1); }
.pl-step {
position: relative; z-index: 1; display: flex; align-items: center; gap: 14px; padding: 7px 0;
opacity: .38; transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .3, 1);
}
.pl-step--on { opacity: 1; transform: translateX(3px); }
.pl-step__mark {
width: 11px; height: 11px; border-radius: 50%; flex: none;
background: #fff; box-shadow: 0 0 0 2px #CFDAE5;
transition: background-color .4s ease, box-shadow .4s ease;
}
.pl-step--on .pl-step__mark { background: #EE7A08; box-shadow: 0 0 0 2px #EE7A08, 0 0 0 6px rgba(238, 122, 8, .16); }
.pl-step__txt { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; color: #1B2F41; white-space: nowrap; }
.pl-step--last .pl-step__txt { transition: color .4s ease; }
.pl-step--last.pl-step--on .pl-step__txt { color: #B15A06; }
@media (max-width: 1000px) {
.pl-rail { position: static; margin-top: 18px; }
.pl-rail__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.pl-rec__dot { animation: none; }
}
[data-pl-zaehler] .pl-rec__dot { background: #EE7A08; }
[data-pl-zaehler] .pl-rec--live .pl-rec__dot { background: #1B2F41; }
.tb-stage { position: relative; height: 540px; margin-top: 76px; }
.tb-net { position: absolute; inset: 0; z-index: 1; overflow: visible; filter: drop-shadow(0 0 10px rgba(238, 122, 8, .22)); }
.tb-net path { fill: none; stroke-linecap: round; }
.tb-q {
position: absolute; z-index: 3; transform: translate(-50%, -50%);
display: flex; align-items: center; gap: 12px; white-space: nowrap;
background: #fff; border: 1px solid #DCE4EC;
border-radius: 14px; padding: 13px 18px;
box-shadow: 0 18px 40px rgba(8, 31, 56, .1);
transition: border-color .5s ease, box-shadow .5s ease, opacity .5s ease, transform .6s cubic-bezier(.2, .8, .3, 1);
opacity: .52;
}
.tb-q__ico { display: flex; color: #A6B6C6; transition: color .45s ease; }
.tb-q__ico svg { width: 15px; height: 15px; display: block; }
.tb-q__txt { display: flex; flex-direction: column; gap: 3px; }
.tb-q__txt b { font-weight: 500; font-size: 14.5px; color: #5C7089; transition: color .45s ease; }
.tb-q__txt i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9.5px; letter-spacing: .14em; color: #A6B6C6; transition: color .45s ease; }
.tb-q--on { opacity: 1; border-color: rgba(238, 122, 8, .55); box-shadow: 0 18px 40px rgba(8, 31, 56, .12), 0 0 22px rgba(238, 122, 8, .18); }
.tb-q--on .tb-q__ico { color: #B15A06; }
.tb-q--on .tb-q__txt b { color: #1B2F41; }
.tb-q--on .tb-q__txt i { color: #5B748F; }
.tb-q--1 { left: 13%; top: 13%; }
.tb-q--2 { left: 7%;  top: 46%; }
.tb-q--3 { left: 16%; top: 80%; }
.tb-q--4 { left: 87%; top: 22%; }
.tb-q--5 { left: 89%; top: 70%; }
.tb-halo { position: absolute; z-index: 1; left: 52%; top: 50%; pointer-events: none; }
.tb-halo i {
position: absolute; border-radius: 50%; border: 1px solid rgba(27, 47, 65, .07);
}
.tb-halo i:nth-child(1) { left: -105px; top: -105px; width: 210px; height: 210px; }
.tb-halo i:nth-child(2) { left: -150px; top: -150px; width: 300px; height: 300px; }
.tb-halo i:nth-child(3) { left: -200px; top: -200px; width: 400px; height: 400px; }
.tb-wave { position: absolute; z-index: 1; left: 52%; top: 50%; pointer-events: none; }
.tb-wave i {
position: absolute; left: -46px; top: -46px; width: 92px; height: 92px;
border-radius: 50%; border: 2px solid rgba(238, 122, 8, .55); opacity: 0;
}
.tb-wave--go i { animation: tbWave 2.1s ease-out; }
.tb-wave--go i:nth-child(2) { animation-delay: .4s; }
@keyframes tbWave {
0% { transform: scale(.5); opacity: 0; }
14% { opacity: .65; }
100% { transform: scale(4.6); opacity: 0; }
}
.tb-card {
position: absolute; z-index: 4; left: 52%; top: 50%; transform: translate(-50%, -50%);
width: 296px; box-sizing: border-box;
background: #fff;
border: 1px solid #DCE4EC; border-radius: 20px;
padding: 24px 26px; box-shadow: 0 34px 80px rgba(8, 31, 56, .16);
transition: border-color .5s ease, box-shadow .5s ease;
}
.tb-card--live { border-color: rgba(238, 122, 8, .7); box-shadow: 0 34px 80px rgba(8, 31, 56, .16), 0 0 44px rgba(238, 122, 8, .22); }
.tb-card__lbl { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .18em; color: #5B748F; margin-bottom: 20px; }
.tb-card__row { display: flex; align-items: center; gap: 16px; }
.tb-card__ico {
position: relative; display: flex; align-items: center; justify-content: center;
width: 56px; height: 56px; border-radius: 50%; flex: none;
background: #EEF3F8; color: #5B748F;
transition: background-color .45s ease, color .45s ease;
}
.tb-card--live .tb-card__ico { background: #EE7A08; color: #fff; }
.tb-card__ico svg { width: 24px; height: 24px; display: block; }
.tb-card__ico i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid #EE7A08; opacity: 0; }
.tb-ring--go i { animation: tbRing 1.4s ease-out; }
.tb-ring--go i:nth-child(3) { animation-delay: .3s; }
@keyframes tbRing {
0% { transform: scale(1); opacity: .8; }
100% { transform: scale(2.3); opacity: 0; }
}
.tb-card__txt { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.tb-card__name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -0.015em; color: #1B2F41; }
.tb-card__state { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: .12em; color: #5B748F; transition: color .45s ease; }
.tb-card--live .tb-card__state { color: #B15A06; }
.tb-card__src {
display: flex; align-items: center; gap: 9px; margin-top: 22px; padding-top: 16px;
border-top: 1px solid #E9EFF5; min-height: 15px;
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .12em; color: #5B748F;
}
.tb-card__src span { width: 6px; height: 6px; border-radius: 50%; background: #EE7A08; flex: none; opacity: 0; transition: opacity .4s ease; }
.tb-card--live .tb-card__src span { opacity: 1; }
@media (max-width: 1000px) {
.tb-stage { height: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.tb-q, .tb-card { position: static; transform: none; width: auto; }
.tb-card { margin-top: 12px; }
.tb-net, .tb-halo, .tb-wave { display: none; }
}
@media (prefers-reduced-motion: reduce) { .tb-wave, .tb-ring--go i { display: none; } }
.cb {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: flex-start; justify-content: center;
padding: 4vh 16px 16px; overflow-y: auto;
opacity: 0; transition: opacity .3s ease;
}
.cb--an { opacity: 1; }
.cb__grund { position: fixed; inset: 0; background: rgba(11, 26, 41, .62); }
.cb__box {
box-sizing: border-box;
position: relative; width: 100%; max-width: 560px;
background: #fff; border-radius: 14px;
box-shadow: 0 30px 80px rgba(8, 31, 56, .34);
padding: 16px 22px 18px;
display: flex; flex-direction: column; max-height: 84vh;
transform: translateY(-16px);
transition: transform .35s cubic-bezier(.2, .85, .25, 1);
}
.cb--an .cb__box { transform: none; }
.cb__kopf {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 8px; padding-bottom: 14px; border-bottom: 1px solid #E3EAF1;
}
.cb__titel {
grid-column: 2; font-family: 'Sora', sans-serif; font-weight: 600; font-size: 17px;
letter-spacing: .06em; text-transform: uppercase; color: #1B2F41;
text-align: center; margin: 0;
}
.cb__zurueck {
grid-column: 1; justify-self: start; cursor: pointer;
background: none; border: none; padding: 6px 8px; border-radius: 7px;
font-size: 13px; font-weight: 600; color: #5B748F; transition: all .18s;
}
.cb__zurueck:hover { background: #F0F4F8; color: #1B2F41; }
.cb__zurueck[hidden] { display: none; }
.cb__zu {
grid-column: 3; justify-self: end; width: 32px; height: 32px;
display: grid; place-items: center; cursor: pointer;
background: none; border: none; border-radius: 8px;
font-size: 22px; line-height: 1; color: #5B748F; transition: all .18s;
}
.cb__zu:hover { background: #F0F4F8; color: #1B2F41; }
.cb__inhalt {
flex: 1 1 auto; min-height: 0; overflow-y: auto;
margin: 15px 0 0; padding-right: 10px; scrollbar-width: thin;
}
.cb__inhalt:focus-visible { outline: 2px solid #B15A06; outline-offset: 3px; }
.cb__lauf { margin: 0 0 4px; max-height: 26vh; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; }
.cb__lauf--tafel { max-height: none; overflow: visible; padding-right: 0; }
.cb__lauf:focus-visible { outline: 2px solid #B15A06; outline-offset: 3px; }
.cb__lauf p, .cb__vorspann { font-size: 13.5px; line-height: 1.65; color: #5C7089; margin: 0 0 11px; }
.cb__lauf a { color: #B15A06; text-decoration: underline; }
.cb__lauf b, .cbk__text b { color: #40566E; font-weight: 600; }
.cb__usa { border-left: 3px solid #E3EAF1; padding-left: 12px; }
.cb__leer { font-size: 13.5px; color: #5C7089; font-style: italic; padding: 14px 2px; }
.cb__reiter { display: flex; gap: 3px; margin: 4px 0 0; border-bottom: 1px solid #E3EAF1; flex-wrap: wrap; }
.cb__reiterk {
flex: 1 1 130px; cursor: pointer; background: none; border: none;
border-radius: 8px 8px 0 0; padding: 10px 10px 11px;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 12.5px;
color: #5B748F; transition: all .18s;
}
.cb__reiterk:hover { background: #F0F4F8; color: #1B2F41; }
.cb__reiterk--an { background: #1B2F41; color: #fff; }
.cb__reiterk--an:hover { background: #24405A; color: #fff; }
.cb__suche { display: flex; align-items: center; gap: 12px; margin: 14px 0 12px; }
.cb__suche input { box-sizing: border-box;
flex: 1 1 auto; min-width: 0; font-family: inherit; font-size: 13.5px;
padding: 9px 13px; border: 1px solid #C6D5E2; border-radius: 8px; color: #1B2F41;
}
.cb__suche input:focus-visible { outline: 2px solid #B15A06; outline-offset: 1px; border-color: #B15A06; }
.cb__suche span { font-size: 12.5px; font-weight: 600; color: #5B748F; white-space: nowrap; }
.cb__alle { display: flex; gap: 8px; justify-content: flex-end; margin: 14px 0 10px; }
.cb__mini {
cursor: pointer; background: #fff; border: 1px solid #C6D5E2; border-radius: 7px;
padding: 7px 12px; font-size: 12px; font-weight: 600; color: #40566E; transition: all .18s;
}
.cb__mini:hover { border-color: #1B2F41; color: #1B2F41; }
.cb__kacheln { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; }
.cbk { box-sizing: border-box; background: #F5F8FB; border: 1px solid #E3EAF1; border-radius: 10px; padding: 13px 15px; }
.cbk--fest { opacity: .95; }
.cbk__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cbk__wahl { display: flex; align-items: center; gap: 11px; cursor: pointer; }
.cbk--fest .cbk__wahl { cursor: default; }
.cbk__wahl b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 14.5px; color: #1B2F41; }
.cbk__box { position: absolute; opacity: 0; width: 21px; height: 21px; margin: 0; cursor: inherit; }
.cbk__marke {
width: 21px; height: 21px; flex: 0 0 auto; border-radius: 6px;
border: 2px solid #A8BCCF; background: #fff; position: relative; transition: all .18s;
}
.cbk__marke::after {
content: ''; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px;
border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg) scale(.6);
opacity: 0; transition: all .18s;
}
.cbk__marke--teils { background: #B15A06; border-color: #B15A06; }
.cbk__marke--teils::after {
opacity: 1; transform: none; left: 4px; top: 8px; width: 9px; height: 0;
border-width: 0 0 2.5px 0;
}
.cbk__box:checked + .cbk__marke { background: #B15A06; border-color: #B15A06; }
.cbk__box:checked + .cbk__marke::after { opacity: 1; transform: rotate(42deg) scale(1); }
.cbk__box:disabled + .cbk__marke { background: #8DA1B7; border-color: #8DA1B7; }
.cbk__box:focus-visible + .cbk__marke { outline: 2px solid #1B2F41; outline-offset: 2px; }
.cbk__text { font-size: 12.5px; line-height: 1.6; color: #5C7089; margin: 7px 0 0; }
.cbk__mehrk {
cursor: pointer; background: none; border: none; padding: 3px 2px;
display: inline-flex; align-items: center; gap: 6px;
font-size: 12px; font-weight: 600; color: #5B748F; transition: color .18s;
}
.cbk__mehrk:hover { color: #B15A06; }
.cbk__pfeil {
width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.cbk__pfeil--auf { transform: rotate(-135deg) translate(-3px, -3px); }
.cbk__mehr { margin-top: 10px; border-top: 1px solid #E3EAF1; padding-top: 9px; }
.cbk__zeile { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; flex-wrap: wrap; }
.cbk__zeile b { font-size: 12.5px; font-weight: 600; color: #40566E; }
.cbk__zeile span { font-size: 12px; color: #5B748F; }
.cbs { box-sizing: border-box; background: #F5F8FB; border: 1px solid #E3EAF1; border-radius: 10px; padding: 12px 15px; margin-bottom: 8px; }
.cbs__kopf { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cbs__kopf > b { flex: 1 1 150px; font-family: 'Sora', sans-serif; font-size: 14px; color: #1B2F41; }
.cbs__schieber { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.cbs__schieber--fest { cursor: default; }
.cbs__schieber input { position: absolute; opacity: 0; width: 40px; height: 22px; margin: 0; cursor: inherit; }
.cbs__bahn {
width: 40px; height: 22px; border-radius: 11px; background: #1B2F41;
position: relative; transition: background .2s; flex: 0 0 auto;
}
.cbs__bahn i {
position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
background: #fff; transition: transform .2s;
}
.cbs__schieber input:checked + .cbs__bahn { background: #B15A06; }
.cbs__schieber input:checked + .cbs__bahn i { transform: translateX(18px); }
.cbs__schieber input:disabled + .cbs__bahn { background: #8DA1B7; }
.cbs__schieber input:focus-visible + .cbs__bahn { outline: 2px solid #1B2F41; outline-offset: 2px; }
.cbs__wort { font-size: 12px; font-weight: 600; color: #5B748F; min-width: 24px; }
.cbd__dl {
display: grid; grid-template-columns: 122px 1fr; gap: 5px 12px; margin: 11px 0 0;
border-top: 1px solid #E3EAF1; padding-top: 10px;
}
.cbd__dl dt { font-size: 11.5px; font-weight: 600; color: #5B748F; }
.cbd__dl dd { font-size: 12.5px; line-height: 1.55; color: #40566E; margin: 0; }
.cbh { overflow-x: auto; margin-top: 14px; }
.cbh table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cbh th {
text-align: left; font-family: 'Sora', sans-serif; font-size: 11.5px; font-weight: 600;
letter-spacing: .05em; text-transform: uppercase; color: #5B748F;
padding: 8px 10px; background: #F5F8FB; border-bottom: 1px solid #E3EAF1; white-space: nowrap;
}
.cbh td { padding: 9px 10px; color: #40566E; border-bottom: 1px solid #EDF2F7; vertical-align: top; }
.cbh td:first-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cb__knoepfe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 16px 0 0; }
.cb__k {
cursor: pointer; text-align: center;
font-family: 'Sora', sans-serif; font-weight: 600; font-size: 13.5px;
padding: 13px 12px; border-radius: 9px;
background: #1B2F41; color: #fff; border: 1px solid #1B2F41;
transition: background .18s, transform .18s;
}
.cb__k:hover { background: #24405A; transform: translateY(-1px); }
.cb__k:focus-visible { outline: 2px solid #B15A06; outline-offset: 2px; }
.cb__fuss { margin-top: 12px; text-align: center; }
.cb__fuss:empty { margin-top: 0; }
.cb__link {
cursor: pointer; background: none; border: none; padding: 4px;
font-size: 12.5px; color: #5B748F; text-decoration: underline; transition: color .18s;
}
.cb__link:hover { color: #B15A06; }
.cbw {
position: fixed; left: 18px; bottom: 18px; z-index: 880;
width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
background: #1B2F41; color: #fff; border: none;
box-shadow: 0 6px 20px rgba(8, 31, 56, .28);
transition: transform .2s, background .2s;
}
.cbw:hover { background: #24405A; transform: scale(1.07); }
.cbw:focus-visible { outline: 2px solid #B15A06; outline-offset: 3px; }
html.cb-offen { overflow: hidden; }
@media (max-width: 700px) {
.cb { padding: 0; align-items: flex-end; }
.cb__box { max-width: none; border-radius: 16px 16px 0 0; padding: 14px 16px 16px;
max-height: 62vh; height: auto; }
.cb__kopf { padding-bottom: 10px; }
.cb__titel { font-size: 14px; }
.cb__inhalt { margin-top: 11px; padding-right: 6px; }
.cb__vorspann { font-size: 13px; line-height: 1.55; margin-bottom: 8px; }
.cb__usa { padding-left: 9px; }
.cb__lauf { max-height: 22vh; }
.cbk { padding: 10px 11px; }
.cb__knoepfe { gap: 7px; margin-top: 11px; }
.cb__titel { font-size: 15px; }
.cb__knoepfe { grid-template-columns: 1fr; }
.cb__reiterk { flex: 1 1 calc(50% - 3px); }
.cbd__dl { grid-template-columns: 1fr; gap: 1px 0; }
.cbd__dl dt { margin-top: 7px; }
.cbw { left: 12px; bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) {
.cb, .cb__box, .cb__k, .cbw, .cbs__bahn i, .cbk__pfeil { transition: none; }
}
.fp-split { position: relative; }
@media (max-width: 940px) {
.fp-split { grid-template-columns: 1fr !important; }
.fp-buehne { margin: 0 auto; }
}
.fp-buehne {
max-width: 540px; margin-left: auto;
position: relative; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden;
box-shadow: 0 34px 80px rgba(12, 34, 60, .16), 0 2px 6px rgba(12, 34, 60, .05);
}
.fp-buehne img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform-origin: 42% 58%;
animation-name: fpDrift; animation-duration: 34s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes fpDrift {
0% { transform: scale(1.012) translate3d(0, 0, 0); }
50% { transform: scale(1.042) translate3d(-0.5%, -0.4%, 0); }
100% { transform: scale(1.012) translate3d(0, 0, 0); }
}
.fp-buehne .fp-leuchte {
opacity: 0; pointer-events: none;
animation-name: fpDrift, fpKachel;
animation-duration: 34s, 13s;
animation-timing-function: ease-in-out, cubic-bezier(.3, .85, .3, 1);
animation-iteration-count: infinite, infinite;
animation-delay: 0s, var(--fp-d, 0s);
}
.fp-buehne .fp-halten  { animation-name: fpDrift, fpHalten; }
.fp-buehne .fp-display { animation-name: fpDrift, fpDisplay;
animation-timing-function: ease-in-out, ease-out; }
@keyframes fpKachel  {   0% { opacity: 0; }  3% { opacity: 1; } 10% { opacity: .82; } 15%, 100% { opacity: 0; } }
@keyframes fpHalten  { 0%, 44% { opacity: 0; } 49% { opacity: 1; } 62% { opacity: .9; } 72%, 100% { opacity: 0; } }
@keyframes fpDisplay { 0%, 1.2% { opacity: 0; } 3% { opacity: 1; } 8% { opacity: .5; } 13%, 100% { opacity: 0; } }
.fp-blitz {
position: absolute; inset: 0; pointer-events: none; opacity: 0;
background: radial-gradient(40% 36% at 40% 52%, rgba(255, 252, 246, .9) 0%,
rgba(255, 250, 242, .4) 44%, rgba(255, 248, 238, 0) 76%);
animation-name: fpBlitz; animation-duration: 13s;
animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fpBlitz { 0%, 1.8% { opacity: 0; } 2.5% { opacity: .3; } 3.6% { opacity: .1; } 5.6%, 100% { opacity: 0; } }
.fp-stufen { margin-top: clamp(32px, 3.6vw, 44px); display: flex; flex-direction: column; }
.fp-stufe  { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.fp-punkt {
width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #DCE4EC;
animation-name: fpPunkt; animation-duration: 13s;
animation-timing-function: cubic-bezier(.3, .9, .3, 1);
animation-iteration-count: infinite; animation-delay: var(--fp-d, 0s);
}
.fp-txt {
font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em;
color: #5B748F;
animation-name: fpStufe; animation-duration: 13s;
animation-timing-function: cubic-bezier(.3, .9, .3, 1);
animation-iteration-count: infinite; animation-delay: var(--fp-d, 0s);
}
@keyframes fpStufe {
0% { color: #5B748F; }
3% { color: #B15A06; }
13% { color: #B15A06; }
18%, 100% { color: #5B748F; }
}
@keyframes fpPunkt {
0% { background: #DCE4EC; transform: scale(1);    box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
3% { background: #EE7A08; transform: scale(1.35); box-shadow: 0 0 0 5px rgba(238, 122, 8, .16); }
13% { background: #EE7A08; transform: scale(1.1);  box-shadow: 0 0 0 3px rgba(238, 122, 8, .1); }
18%, 100% { background: #DCE4EC; transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
}
.fp-linie {
margin-top: 18px; height: 3px; max-width: 340px;
background: #E4EAF1; border-radius: 2px; overflow: hidden;
}
.fp-fuellung {
display: block; height: 100%; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, #B15A06, #EE7A08);
animation-name: fpFuellen; animation-duration: 13s;
animation-timing-function: cubic-bezier(.3, .85, .3, 1);
animation-iteration-count: infinite; animation-delay: 1.2s;
}
@keyframes fpFuellen { 0%, 3% { transform: scaleX(0); } 15% { transform: scaleX(1); } 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
.fp-buehne img, .fp-blitz, .fp-punkt, .fp-txt, .fp-fuellung { animation: none; }
.fp-leuchte { opacity: 0; }
.fp-halten { opacity: .9; }
.fp-fuellung { transform: scaleX(1); }
}
.vp-split { position: relative; }
@media (max-width: 940px) {
.vp-split { grid-template-columns: 1fr !important; }
.vp-buehne { margin: 0 auto; }
}
.vp-buehne {
max-width: 540px; margin-left: auto;
position: relative; aspect-ratio: 1/1; border-radius: 20px; overflow: hidden;
box-shadow: 0 34px 80px rgba(12, 34, 60, .18), 0 2px 6px rgba(12, 34, 60, .06);
}
.vp-buehne img {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform-origin: 50% 60%;
animation-name: vpDrift; animation-duration: 36s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes vpDrift {
0% { transform: scale(1.012) translate3d(0, 0, 0); }
50% { transform: scale(1.04) translate3d(-0.4%, -0.5%, 0); }
100% { transform: scale(1.012) translate3d(0, 0, 0); }
}
.vp-buehne .vp-leuchte {
opacity: 0; pointer-events: none;
animation-name: vpDrift, vpKachel;
animation-duration: 36s, 14s;
animation-timing-function: ease-in-out, cubic-bezier(.3, .85, .3, 1);
animation-iteration-count: infinite, infinite;
animation-delay: 0s, var(--vp-d, 0s);
}
.vp-buehne .vp-halten { animation-name: vpDrift, vpHalten; }
.vp-buehne .vp-symbol { animation-timing-function: ease-in-out, ease-out; }
@keyframes vpKachel { 0% { opacity: 0; } 2.6% { opacity: 1; } 9% { opacity: .84; } 14%, 100% { opacity: 0; } }
@keyframes vpHalten { 0% { opacity: 0; } 2.6% { opacity: 1; } 18% { opacity: .88; } 28%, 100% { opacity: 0; } }
.vp-buehne .vp-welle {
opacity: 0; pointer-events: none;
filter: brightness(1.85) saturate(1.3);
-webkit-mask-size: 240% 100%, 100% 100%; mask-size: 240% 100%, 100% 100%;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
-webkit-mask-composite: source-in; mask-composite: intersect;
animation-name: vpDrift, vpWelle;
animation-duration: 36s, 14s;
animation-timing-function: ease-in-out, cubic-bezier(.35, 0, .4, 1);
animation-iteration-count: infinite, infinite;
}
@keyframes vpWelle {
0%, 4% { -webkit-mask-position: 112% 0, 0 0; mask-position: 112% 0, 0 0; opacity: 0; }
9% { opacity: 1; }
46% { opacity: 1; }
53% { -webkit-mask-position: -12% 0, 0 0; mask-position: -12% 0, 0 0; opacity: 0; }
100% { -webkit-mask-position: -12% 0, 0 0; mask-position: -12% 0, 0 0; opacity: 0; }
}
.vp-rec {
position: absolute; left: 74.5%; top: 54.8%; width: 7%; aspect-ratio: 1/1;
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(255, 72, 52, .6) 0%,
rgba(255, 72, 52, .16) 44%, rgba(255, 72, 52, 0) 76%);
mix-blend-mode: screen;
animation-name: vpRec; animation-duration: 2.6s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
@keyframes vpRec { 0%, 100% { opacity: .25; } 50% { opacity: .85; } }
.vp-stufen { margin-top: clamp(32px, 3.6vw, 44px); display: flex; flex-direction: column; }
.vp-stufe  { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.vp-punkt {
width: 10px; height: 10px; flex: 0 0 auto; border-radius: 50%; background: #DCE4EC;
animation-name: vpPunkt; animation-duration: 14s;
animation-timing-function: cubic-bezier(.3, .9, .3, 1);
animation-iteration-count: infinite; animation-delay: var(--vp-d, 0s);
}
.vp-txt {
font-family: 'JetBrains Mono', monospace; font-size: 13px; letter-spacing: .14em;
color: #5B748F;
animation-name: vpStufe; animation-duration: 14s;
animation-timing-function: cubic-bezier(.3, .9, .3, 1);
animation-iteration-count: infinite; animation-delay: var(--vp-d, 0s);
}
@keyframes vpStufe {
0% { color: #5B748F; }
2.6% { color: #B15A06; }
12% { color: #B15A06; }
17%, 100% { color: #5B748F; }
}
@keyframes vpPunkt {
0% { background: #DCE4EC; transform: scale(1);    box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
2.6% { background: #EE7A08; transform: scale(1.35); box-shadow: 0 0 0 5px rgba(238, 122, 8, .16); }
12% { background: #EE7A08; transform: scale(1.1);  box-shadow: 0 0 0 3px rgba(238, 122, 8, .1); }
17%, 100% { background: #DCE4EC; transform: scale(1); box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); }
}
.vp-linie {
margin-top: 18px; height: 3px; max-width: 340px;
background: #E4EAF1; border-radius: 2px; overflow: hidden;
}
.vp-fuellung {
display: block; height: 100%; transform-origin: left; transform: scaleX(0);
background: linear-gradient(90deg, #B15A06, #EE7A08);
animation-name: vpFuellen; animation-duration: 14s;
animation-timing-function: cubic-bezier(.3, .85, .3, 1);
animation-iteration-count: infinite; animation-delay: 1s;
}
@keyframes vpFuellen { 0%, 2.6% { transform: scaleX(0); } 14% { transform: scaleX(1); } 88% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
.vp-buehne img, .vp-rec, .vp-punkt, .vp-txt, .vp-fuellung { animation: none; }
.vp-leuchte, .vp-welle { opacity: 0; }
.vp-halten { opacity: .88; }
.vp-fuellung { transform: scaleX(1); }
.vp-rec { opacity: .5; }
}
.pm-buehne {
position: relative; aspect-ratio: 1 / 1; container-type: inline-size;
border-radius: 16px; overflow: hidden;
box-shadow: 0 30px 70px rgba(8, 31, 56, .16);
}
.pm-foto {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
transform-origin: 52% 42%; animation: pmPush 26s ease-in-out infinite;
}
.pm-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pm-spur {
fill: none; stroke: #EE7A08; stroke-width: .42; stroke-linecap: round;
stroke-dasharray: 1.7 1.9;
filter: drop-shadow(0 0 3px rgba(238, 122, 8, .55));
}
.pm-spur path {
opacity: 0;
animation: pmDraw 14s linear infinite, pmFlow 2.4s linear infinite;
}
.pm-punkte { fill: #FFF2E8; filter: drop-shadow(0 0 4px rgba(238, 122, 8, .9)); }
.pm-schein, .pm-ring {
position: absolute; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
border-radius: 50%; opacity: 0; pointer-events: none;
}
.pm-schein {
width: 23%;
background: radial-gradient(circle, rgba(238, 122, 8, .42) 0%, rgba(238, 122, 8, 0) 68%);
animation: pmGlow 14s ease-in-out infinite;
}
.pm-ring {
width: 26%; border: 1.5px solid rgba(245, 155, 74, .7);
animation: pmRing 14s ease-out infinite;
}
.pm-streif {
position: absolute; top: -20%; left: 0; width: 26%; height: 140%;
pointer-events: none;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 100%);
animation: pmSweep 14s ease-in-out infinite;
}
.pm-verlauf {
position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(180deg, rgba(6,18,31,.28) 0%, rgba(6,18,31,0) 26%,
rgba(6,18,31,0) 78%, rgba(6,18,31,.18) 92%, rgba(6,18,31,.34) 100%);
}
@keyframes pmPush { 0% { transform: scale(1.015) translate(0,0); } 50% { transform: scale(1.055) translate(-0.6%, -0.5%); } 100% { transform: scale(1.015) translate(0,0); } }
@keyframes pmFlow { to { stroke-dashoffset: -32; } }
@keyframes pmDraw { 0% { opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes pmRing { 0% { transform: translate(-50%,-50%) scale(.72); opacity: 0; } 18% { opacity: .85; } 60% { transform: translate(-50%,-50%) scale(1.28); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1.28); opacity: 0; } }
@keyframes pmGlow { 0%, 100% { opacity: 0; } 45% { opacity: .5; } }
@keyframes pmSweep { 0% { transform: translateX(-120%) skewX(-14deg); } 100% { transform: translateX(220%) skewX(-14deg); } }
@media (prefers-reduced-motion: reduce) {
.pm-foto, .pm-spur path, .pm-schein, .pm-ring, .pm-streif { animation: none; }
.pm-spur path { opacity: .9; }
.pm-streif { display: none; }
}
.kf-frc {
position: absolute; left: -9999px; top: 0;
width: 320px; margin: 0; opacity: 0; visibility: hidden;
}
form.kf-frc-an .kf-frc {
position: static; width: auto; margin-bottom: 18px;
opacity: 1; visibility: visible;
animation: frcAuf .35s ease-out;
}
@keyframes frcAuf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
form.kf-frc-an .kf-frc { animation: none; }
}
.kr-frame {
position: relative; border-radius: 16px; overflow: hidden;
box-shadow: 0 40px 80px rgba(3, 12, 24, .55);
container-type: inline-size;
}
.kr-ghost {
position: absolute; left: 84%; bottom: 12%; width: 18%; height: 60%;
transform: translateX(-50%); pointer-events: none;
opacity: 0; transition: opacity .9s ease;
}
.kr-ghost svg { width: 100%; height: 100%; display: block; overflow: visible; }
.kr-ghost__fig {
fill: rgba(238, 122, 8, .88); stroke: rgba(255, 255, 255, .92); stroke-width: 1.3;
stroke-dasharray: 6 5;
filter: drop-shadow(0 0 1.6cqw rgba(238, 122, 8, .45)) drop-shadow(0 1cqw 1.4cqw rgba(3, 12, 24, .45));
transform-origin: 50% 100%; transform: translateY(5%) scale(.95);
transition: transform 1.1s cubic-bezier(.2, .85, .25, 1);
}
.kr-ghost--in { opacity: 1; }
.kr-ghost--in .kr-ghost__fig { transform: none; }
.kr-tag {
position: absolute; left: 84%; bottom: 78%; z-index: 3;
transform: translate(-50%, 0) scale(.88); pointer-events: none; white-space: nowrap;
background: #EE7A08; border-radius: 999px; padding: .45em .85em;
box-shadow: 0 10px 24px rgba(3, 12, 24, .5);
font-family: 'JetBrains Mono', monospace; font-weight: 600;
font-size: clamp(11px, 2.4cqw, 15px); letter-spacing: .12em; color: #1B2F41;
opacity: 0; transition: opacity .4s ease, transform .55s cubic-bezier(.2, .85, .25, 1);
}
.kr-tag--on { opacity: 1; transform: translate(-50%, 0) scale(1); }
@container (max-width: 420px) {
.kr-tag { left: auto; right: 5%; transform: translate(0, 0) scale(.88); }
.kr-tag--on { transform: translate(0, 0) scale(1); }
}
.kr-cta--pulse { animation: krCta 1.6s cubic-bezier(.2, .7, .3, 1) 2; }
@keyframes krCta {
0%, 100% { box-shadow: 0 0 0 0 rgba(238, 122, 8, 0); transform: none; }
22% { box-shadow: 0 0 0 12px rgba(238, 122, 8, .26); transform: translateY(-2px); }
55% { box-shadow: 0 0 0 26px rgba(238, 122, 8, 0); transform: none; }
}
@media (prefers-reduced-motion: reduce) { .kr-cta--pulse { animation: none; } }
.oe-split {
display: grid; grid-template-columns: .92fr 1.08fr; gap: 64px;
align-items: center; margin-top: 80px;
}
.oe-wrap {
position: relative; border-radius: 18px; overflow: hidden;
border: 1px solid #DCE4EC; background: #fff;
box-shadow: 0 34px 80px rgba(8, 31, 56, .16);
}
.oe-svg { display: block; width: 100%; height: auto; }
.oe-ring { stroke: #C9D6E2; stroke-width: 1; stroke-dasharray: 3 6; fill: none; }
.oe-ring__lbl {
font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: .1em;
fill: #5B748F; paint-order: stroke; stroke: #fff; stroke-width: 3px;
stroke-linejoin: round;
}
.oe-beam { transform-origin: 50% 50%; animation: oeSweep 9s linear infinite; }
@keyframes oeSweep { to { transform: rotate(360deg); } }
.oe-area { fill: #EE7A08; fill-opacity: .09; stroke: #EE7A08; stroke-width: 3; }
.oe-echo { fill: none; stroke: #EE7A08; stroke-width: 2; opacity: 0; }
.oe-pl__name, .oe-pl__km {
paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round;
transition: fill .4s ease;
}
.oe-pl__name { font-family: 'Figtree', sans-serif; font-weight: 500; font-size: 14px; fill: #5B748F; }
.oe-pl__km { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: .06em; fill: #5B748F; }
.oe-pl__dot { fill: #B4C2CF; transition: fill .4s ease; }
.oe-pl__halo { fill: none; stroke: #EE7A08; stroke-width: 2; opacity: 0; }
.oe-pl__lead { stroke: #B4C2CF; stroke-width: 1; transition: stroke .4s ease; }
.oe-pl--on .oe-pl__lead { stroke: #EE7A08; }
.oe-pl--on .oe-pl__dot { fill: #EE7A08; }
.oe-pl--on .oe-pl__name { fill: #1B2F41; }
.oe-pl--on .oe-pl__km { fill: #B15A06; }
.oe-pl--on .oe-pl__halo { animation: oePop 1.1s ease-out; }
@keyframes oePop {
0% { transform: scale(.4); opacity: .9; }
100% { transform: scale(2.6); opacity: 0; }
}
.oe-home__dot { fill: #EE7A08; stroke: #fff; stroke-width: 3; }
.oe-home__ping { fill: none; stroke: #EE7A08; stroke-width: 2; opacity: 0; }
.oe-home--ping .oe-home__ping { animation: oePop 1.4s ease-out; }
.oe-badge {
position: absolute; z-index: 3; left: 22px; top: 22px;
display: flex; align-items: baseline; gap: 10px;
background: #fff; border: 1px solid #DCE4EC; border-radius: 12px; padding: 12px 16px;
box-shadow: 0 16px 36px rgba(8, 31, 56, .12);
}
.oe-badge__lbl { font-family: 'JetBrains Mono', monospace; font-size: 9.5px; letter-spacing: .16em; color: #5B748F; }
.oe-badge__val { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 20px; color: #B15A06; }
.oe-card {
position: absolute; z-index: 3; right: 22px; top: 22px;
display: flex; align-items: center; gap: 12px; white-space: nowrap;
background: #fff; border: 1px solid #DCE4EC; border-radius: 14px; padding: 12px 16px;
box-shadow: 0 22px 46px rgba(8, 31, 56, .16);
transition: border-color .45s ease, box-shadow .45s ease;
}
.oe-card--live { border-color: rgba(238, 122, 8, .65); box-shadow: 0 22px 46px rgba(8, 31, 56, .16), 0 0 30px rgba(238, 122, 8, .18); }
.oe-card__ico {
display: flex; align-items: center; justify-content: center; width: 38px; height: 38px;
border-radius: 50%; flex: none; background: #EE7A08; color: #1B2F41;
}
.oe-card__ico svg { width: 18px; height: 18px; display: block; }
.oe-card__txt { display: flex; flex-direction: column; gap: 3px; }
.oe-card__txt b { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: #1B2F41; }
.oe-card__txt i { font-family: 'JetBrains Mono', monospace; font-style: normal; font-size: 9.5px; letter-spacing: .14em; color: #5B748F; }
@media (max-width: 1000px) {
.oe-split { grid-template-columns: 1fr; gap: 40px; margin-top: 56px; }
}
@media (max-width: 700px) {
.oe-card { display: none; }
.oe-badge { left: 14px; top: 14px; padding: 10px 12px; }
}
@media (prefers-reduced-motion: reduce) { .oe-beam { animation: none; } }
.dh {
position: relative;
aspect-ratio: 1.42 / 1;
width: 100%;
max-width: 660px;
margin-inline: auto;
}
.dh > span { position: absolute; pointer-events: none; }
.dh__bloom {
left: 52%; top: 46%; width: 104%; aspect-ratio: 1.3 / 1;
transform: translate(-50%, -50%); border-radius: 50%;
background: radial-gradient(closest-side,
rgba(238,122,8,.15) 0%, rgba(238,122,8,.06) 38%,
rgba(90,150,220,.04) 62%, rgba(8,31,56,0) 80%);
filter: blur(18px);
}
.dh__beam {
left: 2%; top: 18%; width: 52%; height: 64%;
background: radial-gradient(closest-side,
rgba(255,196,140,.10) 0%, rgba(238,122,8,.035) 46%, rgba(238,122,8,0) 78%);
filter: blur(30px);
}
.dh__cast {
left: -10%; bottom: -4%; width: 70%; height: 30%;
background: radial-gradient(closest-side,
rgba(255,175,105,.22) 0%, rgba(238,122,8,.08) 44%, rgba(238,122,8,0) 78%);
filter: blur(26px); transform-origin: 100% 60%;
}
.dh__float, .dh__kick { position: absolute; inset: 0; display: block; }
.dh__screen {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 34px 70px rgba(2,9,18,.7));
}
.dh__welle {
left: 52%; top: 44%; width: 82%; aspect-ratio: 1.55 / 1;
transform: translate(-50%, -50%) scale(.34);
border-radius: 50%; border: 2px solid rgba(238,122,8,.5); opacity: 0;
}
.dh__welle--spaet { border-width: 1px; border-color: rgba(238,122,8,.34); }
.js .dh__bloom { animation: dhBloom 7.6s ease-in-out infinite; }
.js .dh__beam  { animation: dhBeam 7.6s ease-in-out infinite; }
.js .dh__cast  { animation: dhCast 7.6s ease-in-out infinite; }
.js .dh__float { animation: dhFloat 11s ease-in-out infinite; }
.js .dh__kick  { animation: dhKick 7.6s cubic-bezier(.3,1.4,.4,1) infinite; }
.js .dh__screen { animation: dhScreen 7.6s ease-in-out infinite; }
.js .dh__welle { animation: dhWelle 7.6s cubic-bezier(.15,.75,.3,1) infinite; }
.js .dh__welle--spaet { animation-delay: .5s; }
@keyframes dhFloat {
0%, 100% { transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(0); }
33% { transform: perspective(1400px) rotateY(-2.4deg) rotateX(.9deg) translateY(-10px); }
66% { transform: perspective(1400px) rotateY(1.8deg) rotateX(-.7deg) translateY(6px); }
}
@keyframes dhBloom { 0%, 100% { opacity: .5; transform: translate(-50%,-50%) scale(1); }
46% { opacity: .82; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes dhBeam { 0%, 100% { opacity: .16; transform: scaleY(1) skewY(0deg); }
50% { opacity: .3; transform: scaleY(1.04) skewY(-.5deg); } }
@keyframes dhKick { 0%, 84%, 100% { transform: scale(1); }
89% { transform: scale(1.018); } 94% { transform: scale(.998); } }
@keyframes dhScreen {
0%, 80% { filter: drop-shadow(0 34px 70px rgba(2,9,18,.7)) brightness(1) saturate(1); }
86% { filter: drop-shadow(0 34px 70px rgba(2,9,18,.7)) brightness(1.28) saturate(1.12); }
92% { filter: drop-shadow(0 34px 70px rgba(2,9,18,.7)) brightness(.94) saturate(.98); }
100% { filter: drop-shadow(0 34px 70px rgba(2,9,18,.7)) brightness(1) saturate(1); }
}
@keyframes dhWelle { 0%, 84% { transform: translate(-50%,-50%) scale(.34); opacity: 0; }
87% { opacity: .55; }
100% { transform: translate(-50%,-50%) scale(1.55); opacity: 0; } }
@keyframes dhCast { 0%, 100% { opacity: .3; transform: scaleY(1); }
46% { opacity: .48; transform: scaleY(1.05); }
88% { opacity: .72; transform: scaleY(1.08); } }
@media (max-width: 1000px) { .dh { max-width: 460px; } }
@media (prefers-reduced-motion: reduce) {
.js .dh__bloom, .js .dh__beam, .js .dh__cast, .js .dh__float,
.js .dh__kick, .js .dh__screen, .js .dh__welle { animation: none; }
.dh__welle { display: none; }
}
.rf { position: relative; aspect-ratio: 1/1; overflow: hidden; }
.rf__bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rf__drift { position: absolute; inset: 0; }
.rf__ring {
position: absolute; left: 56%; top: 56%; width: 64%; aspect-ratio: 1/1;
transform: translate(-50%,-50%) scale(.16); border-radius: 50%;
border: 1.5px solid rgba(255,186,120,.75); opacity: 0;
mix-blend-mode: screen; pointer-events: none;
}
.rf__ring--2 { border-width: 1.2px; border-color: rgba(255,202,150,.6); }
.rf__ring--3 { border-width: 1px; border-color: rgba(255,214,175,.45); }
.rf__kern {
position: absolute; left: 56%; top: 56%; width: 30%; aspect-ratio: 1/1;
transform: translate(-50%,-50%); border-radius: 50%;
background: radial-gradient(closest-side,
rgba(255,190,130,.3) 0%, rgba(255,170,100,.08) 46%, rgba(255,170,100,0) 76%);
mix-blend-mode: screen; pointer-events: none;
}
.rf__glanz { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.rf__breit {
position: absolute; top: -30%; left: 0; width: 58%; height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.07) 30%, rgba(255,252,246,.2) 52%,
rgba(255,255,255,.06) 74%, rgba(255,255,255,0) 100%);
filter: blur(22px); transform: translateX(-110%) skewX(-9deg); opacity: 0;
}
.rf__schmal {
position: absolute; top: -30%; left: 0; width: 20%; height: 160%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.26) 50%, rgba(255,255,255,0) 100%);
filter: blur(10px); transform: translateX(-130%) skewX(-9deg); opacity: 0;
}
.js .rf__drift  { animation-name: rfDrift; animation-duration: 28s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.js .rf__breit  { animation-name: rfSweep; animation-duration: 17s;
animation-timing-function: cubic-bezier(.45,0,.55,1); animation-iteration-count: infinite; }
.js .rf__schmal { animation-name: rfSweepThin; animation-duration: 17s;
animation-timing-function: cubic-bezier(.45,0,.55,1); animation-iteration-count: infinite; }
.js .rf__ring, .js .rf__kern {
animation-name: rfPuls; animation-duration: 6.6s;
animation-timing-function: cubic-bezier(.15,.7,.25,1); animation-iteration-count: infinite; }
.js .rf__ring--2 { animation-delay: 1.65s; }
.js .rf__ring--3 { animation-delay: 3.3s; }
@keyframes rfDrift { 0%, 100% { transform: scale(1.012); } 50% { transform: scale(1.035); } }
@keyframes rfSweep { 0% { transform: translateX(-110%) skewX(-9deg); opacity: 0; }
18%, 50% { opacity: .4; }
82% { opacity: 0; }
100% { transform: translateX(190%) skewX(-9deg); opacity: 0; } }
@keyframes rfSweepThin { 0% { transform: translateX(-130%) skewX(-9deg); opacity: 0; }
24%, 56% { opacity: .32; }
86%, 100% { transform: translateX(210%) skewX(-9deg); opacity: 0; } }
@keyframes rfPuls { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.16); }
10% { opacity: .62; } 55% { opacity: .3; }
100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@media (prefers-reduced-motion: reduce) {
.js .rf__drift, .js .rf__breit, .js .rf__schmal,
.js .rf__ring, .js .rf__kern { animation: none; }
.rf__ring, .rf__kern, .rf__glanz { display: none; }
}
.lh { position: relative; }
.lh__bloom {
position: absolute; left: 62%; top: 46%; width: 96%; aspect-ratio: 1.25/1;
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side,
rgba(238,122,8,.16) 0%, rgba(238,122,8,.06) 40%, rgba(8,31,56,0) 78%);
filter: blur(20px); opacity: .42;
}
.lh__bild { position: relative; display: block; width: 100%; height: auto; }
.lh__display {
position: absolute; inset: 0; overflow: hidden; pointer-events: none;
clip-path: polygon(26.4% 22.7%, 84.8% 6.1%, 71.8% 88.4%, 19.5% 86.2%);
}
.lh__streif {
position: absolute; top: -25%; left: 0; width: 20%; height: 150%;
background: linear-gradient(90deg, rgba(255,255,255,0) 0%,
rgba(255,255,255,.3) 50%, rgba(255,255,255,0) 100%);
transform: translateX(-135%) skewX(-13deg); opacity: 0;
}
.lh__chart {
position: absolute; left: 68%; top: 29%; width: 26%; aspect-ratio: 1.2/1;
transform: translate(-50%,-50%) scale(.86); border-radius: 50%;
background: radial-gradient(closest-side,
rgba(238,122,8,.5) 0%, rgba(238,122,8,.16) 46%, rgba(238,122,8,0) 78%);
filter: blur(8px); opacity: 0;
}
.lh__kpi {
position: absolute; left: 68%; top: 48%; width: 24%; height: 22%;
transform: translate(-50%,-50%);
background: radial-gradient(closest-side,
rgba(190,225,255,.4) 0%, rgba(150,200,245,.1) 52%, rgba(150,200,245,0) 80%);
filter: blur(9px); opacity: 0;
}
.js .lh__bild   { animation-name: lhBreath; animation-duration: 13s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.js .lh__bloom  { animation-name: lhBloom; animation-duration: 13s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.js .lh__streif { animation-name: lhSpec; animation-duration: 13s;
animation-timing-function: cubic-bezier(.4,0,.6,1); animation-iteration-count: infinite; }
.js .lh__chart  { animation-name: lhChart; animation-duration: 13s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.js .lh__kpi    { animation-name: lhKpi; animation-duration: 13s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
.js .lh { animation-name: lhFloat; animation-duration: 13s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite; }
@keyframes lhFloat {
0%, 100% { transform: perspective(1600px) rotateY(0deg) rotateX(0deg) translateY(0); }
34% { transform: perspective(1600px) rotateY(-2.6deg) rotateX(1deg) translateY(-12px); }
68% { transform: perspective(1600px) rotateY(1.6deg) rotateX(-.7deg) translateY(7px); }
}
@keyframes lhBreath { 0%, 100% { filter: brightness(1) saturate(1); }
30% { filter: brightness(1.07) saturate(1.04); }
62% { filter: brightness(1.02) saturate(1); } }
@keyframes lhBloom { 0%, 100% { opacity: .42; transform: translate(-50%,-50%) scale(1); }
34% { opacity: .8; transform: translate(-50%,-50%) scale(1.05); } }
@keyframes lhSpec { 0% { transform: translateX(-135%) skewX(-13deg); opacity: 0; }
8%, 26% { opacity: .5; }
40%, 100% { transform: translateX(215%) skewX(-13deg); opacity: 0; } }
@keyframes lhChart { 0%, 34% { opacity: 0; transform: translate(-50%,-50%) scale(.86); }
44% { opacity: .85; transform: translate(-50%,-50%) scale(1); }
54% { opacity: .35; transform: translate(-50%,-50%) scale(1.02); }
62% { opacity: .7; transform: translate(-50%,-50%) scale(1.04); }
76%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(.9); } }
@keyframes lhKpi { 0%, 52% { opacity: 0; } 62% { opacity: .5; }
74% { opacity: .28; } 84%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.js .lh, .js .lh__bild, .js .lh__bloom, .js .lh__streif,
.js .lh__chart, .js .lh__kpi { animation: none; }
.lh__display { display: none; }
}
@media (max-width: 860px) {
[data-grafik-intro] { grid-template-columns: 1fr !important; align-items: start !important; }
[data-grafik-intro] > a { justify-self: start !important; }
}
.mig-stimme__produkt {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
color: #B15A06; margin-bottom: 14px;
}
.ubsc_status-check-title { display: none !important; }
.ub_status_check_widget.ub_status_check_widget .ubsc_status-check-button:hover,
.ub_status_check_widget.ub_status_check_widget a.ubsc_status-check-button:hover {
background-color: #E85F00 !important;
color: #1B2F41 !important;
}
.ah-buehne { position: relative; aspect-ratio: 1.5 / 1; }
.ah-halo {
position: absolute; left: 50%; top: 60%; width: 78%; aspect-ratio: 1.6 / 1;
transform: translate(-50%, -50%); border-radius: 50%; filter: blur(6px);
background: radial-gradient(closest-side, rgba(38,78,132,.55) 0%, rgba(23,50,90,.28) 52%, rgba(15,36,64,0) 82%);
}
.ah-float { position: absolute; inset: 0; animation: ahFloat 13s ease-in-out infinite; }
.ah-pin {
position: absolute; left: 49.5%; top: 60%; width: 30%; aspect-ratio: 1 / 1;
transform: translate(-50%, -50%); border-radius: 50%; mix-blend-mode: screen;
background: radial-gradient(closest-side, rgba(238,122,8,.4) 0%, rgba(238,122,8,.14) 50%, rgba(238,122,8,0) 78%);
animation: ahPin 7s ease-in-out infinite;
}
.ah-bild {
position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
filter: drop-shadow(0 26px 44px rgba(6,15,28,.5));
}
.ah-svg {
position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
-webkit-mask-image: radial-gradient(13.5% 31% at 50% 64%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);
mask-image: radial-gradient(13.5% 31% at 50% 64%, rgba(0,0,0,0) 78%, rgba(0,0,0,1) 100%);
}
.ah-band {
stroke-dasharray: 100; stroke-dashoffset: 100; opacity: 0;
animation: ahTrail 16s linear infinite;
filter: drop-shadow(0 0 3px rgba(238,122,8,.55));
}
.ah-jahr {
opacity: 0; transform-box: fill-box; transform-origin: center;
animation: ahYear 16s cubic-bezier(.25,1.4,.4,1) infinite;
}
.ah-glanz {
position: absolute; left: 51%; top: 57.6%; width: 12.6%; aspect-ratio: 1 / 1.35;
transform: translate(-50%, -50%); overflow: hidden; mix-blend-mode: screen;
pointer-events: none;
-webkit-mask-image: radial-gradient(closest-side, #000 46%, rgba(0,0,0,.55) 72%, transparent 100%);
mask-image: radial-gradient(closest-side, #000 46%, rgba(0,0,0,.55) 72%, transparent 100%);
}
.ah-glint {
position: absolute; inset: -30%; transform: translateX(-115%);
background: linear-gradient(103deg, rgba(255,240,215,0) 26%, rgba(255,242,220,.3) 44%,
rgba(255,250,238,.44) 50%, rgba(255,242,220,.3) 56%, rgba(255,240,215,0) 74%);
animation: ahGlint 16s cubic-bezier(.42,0,.4,1) infinite;
}
.ah-glow {
position: absolute; inset: 0; opacity: 0;
background: radial-gradient(closest-side, rgba(255,214,168,.22) 0%, rgba(255,190,130,.08) 60%, rgba(255,180,110,0) 84%);
animation: ahGlow 16s cubic-bezier(.4,0,.5,1) infinite;
}
.ah-bloom {
position: absolute; aspect-ratio: 1 / 1; transform: translate(-50%, -50%);
border-radius: 50%; mix-blend-mode: screen; opacity: 0;
animation: ahBloom 16s ease-in-out infinite;
}
@keyframes ahFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-1.1%) scale(1.012); } }
@keyframes ahTrail {
0%   { stroke-dashoffset: 100; opacity: 0; }
4%   { opacity: .85; }
56%  { stroke-dashoffset: 0; }
78%  { stroke-dashoffset: 0; opacity: .85; }
96%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ahYear {
0%   { opacity: 0; transform: scale(.5); }
4%   { opacity: 1; transform: scale(1.06); }
8%   { transform: scale(1); }
14%  { opacity: .5; }
26%, 100% { opacity: 0; transform: scale(.98); }
}
@keyframes ahPin { 0%, 100% { opacity: .3; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: .62; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes ahBloom { 0%, 40% { opacity: 0; transform: translate(-50%, -50%) scale(.9); } 52% { opacity: .7; } 78% { opacity: .5; } 96%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes ahGlint { 0%, 16% { transform: translateX(-115%); opacity: 0; } 22% { opacity: 1; } 34% { opacity: 1; } 40% { transform: translateX(115%); opacity: 0; } 100% { transform: translateX(115%); opacity: 0; } }
@keyframes ahGlow { 0%, 16% { opacity: 0; } 26% { opacity: 1; } 36% { opacity: .55; } 46%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.ah-float, .ah-pin, .ah-band, .ah-jahr, .ah-glint, .ah-glow, .ah-bloom {
animation: none !important;
}
.ah-band { stroke-dashoffset: 0; opacity: .85; }
.ah-jahr { opacity: .9; }
}
.js .hs-card--schwebe > img {
animation-name: hsSchwebe;
animation-duration: 12s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
will-change: transform;
}
@keyframes hsSchwebe {
0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
34%      { transform: translate3d(0, -10px, 0) rotate(-0.4deg); }
68%      { transform: translate3d(0, 6px, 0) rotate(0.25deg); }
}
@media (prefers-reduced-motion: reduce) {
.js .hs-card--schwebe > img { animation: none; }
}
.fw-split {
display: grid;
grid-template-columns: minmax(0, .96fr) minmax(0, 1.04fr);
}
@media (max-width: 940px) { .fw-split { grid-template-columns: 1fr; } }
.js .fw-karte {
animation-name: fwFloat; animation-duration: 12s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.fw-ebene {
position: absolute; inset: 0; opacity: 0;
transition: opacity 1.1s cubic-bezier(.4, 0, .3, 1);
}
.fw-ebene.is-an { opacity: 1; }
.fw-ebene img {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; display: block;
}
.js .fw-ebene img {
animation-name: fwKen; animation-duration: 26s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
animation-direction: alternate;
}
.js .fw-ebene:nth-of-type(2) img { animation-direction: alternate-reverse; }
.fw-wechsel {
transition: opacity .7s cubic-bezier(.2, .85, .25, 1),
transform .8s cubic-bezier(.2, .85, .25, 1);
}
.fw-wechsel.is-weg { opacity: 0; transform: translateY(14px); }
.fw-balken {
display: inline-block; width: 7px; height: 1.05em;
background: #B15A06; vertical-align: -2px;
}
.js .fw-balken {
animation-name: fwCaret; animation-duration: 1s;
animation-timing-function: step-end; animation-iteration-count: infinite;
}
.fw-hinweis { opacity: 0; }
.js .fw-hinweis.is-an {
animation-name: fwToast; animation-duration: 2.9s;
animation-timing-function: cubic-bezier(.2, .85, .25, 1);
animation-fill-mode: forwards;
}
.js .fw-hinweis.is-an:nth-of-type(2) { animation-delay: .9s; }
.js .fw-punkt {
animation-name: fwDot; animation-duration: 1.6s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.fw-herz { transform-origin: center; }
.js .fw-herz.is-schlag {
animation-name: fwPop; animation-duration: .75s;
animation-timing-function: cubic-bezier(.3, 1.4, .4, 1);
animation-iteration-count: 2;
}
@keyframes fwPop { 0%, 100% { transform: scale(1); }
38% { transform: scale(1.4); }
68% { transform: scale(.95); } }
@keyframes fwFloat { 0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -7px, 0); } }
@keyframes fwKen { from { transform: scale(1.005); } to { transform: scale(1.075); } }
@keyframes fwCaret { 0%, 45% { opacity: 1; } 55%, 100% { opacity: 0; } }
@keyframes fwToast {
0%   { opacity: 0; transform: translate(24px, 0) scale(.94); }
14%  { opacity: 1; transform: translate(0, 0) scale(1); }
72%  { opacity: 1; transform: translate(0, -4px) scale(1); }
100% { opacity: 0; transform: translate(0, -18px) scale(.98); }
}
@keyframes fwDot { 0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
.js .fw-karte, .js .fw-ebene img, .js .fw-balken, .js .fw-punkt,
.js .fw-hinweis.is-an, .js .fw-herz.is-schlag { animation: none; }
.fw-wechsel, .fw-wechsel.is-weg { opacity: 1; transform: none; transition: none; }
.fw-hinweis { opacity: 1; }
}
.rl-split {
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
}
@media (max-width: 940px) { .rl-split { grid-template-columns: 1fr; } }
.rl-karte {
position: relative; width: 100%; aspect-ratio: 1 / 1;
container-type: inline-size; border-radius: 20px; overflow: hidden;
box-shadow: 0 34px 80px rgba(12, 34, 60, .14), 0 2px 6px rgba(12, 34, 60, .05);
}
.rl-halo {
position: absolute; left: 52%; top: 50%; width: 96%; aspect-ratio: 1.2/1;
transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
background: radial-gradient(closest-side, rgba(238, 122, 8, .14) 0%,
rgba(238, 122, 8, .05) 48%, rgba(238, 122, 8, 0) 74%);
filter: blur(20px);
}
.rl-balken { position: absolute; left: 0; right: 0; top: 0; z-index: 2;
display: flex; gap: 4px; padding: 10px 12px;
box-sizing: border-box; pointer-events: none; }
.rl-balken > span { flex: 1; height: 4px; border-radius: 2px;
background: rgba(27, 47, 65, .16); overflow: hidden; }
.rl-balken i { display: block; width: 100%; height: 100%;
background: #EE7A08; transform-origin: left; transform: scaleX(0); }
.rl-zahl {
position: absolute; z-index: 2; background: #FEFEFE;
display: flex; align-items: flex-end; white-space: nowrap;
font-family: 'Figtree', sans-serif; font-weight: 700;
font-size: 3.95cqw; line-height: 1; letter-spacing: -.02em; color: #1B2F41;
}
.js .rl-karte {
animation-name: rlFloat; animation-duration: 14s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.js .rl-bild, .js .rl-zahlen {
animation-name: rlDrift; animation-duration: 26s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.js .rl-halo {
animation-name: rlHalo; animation-duration: 17s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.js .rl-balken i {
animation-name: rlBar; animation-duration: 16s;
animation-timing-function: linear; animation-iteration-count: infinite;
}
.js .rl-balken > span:nth-child(2), .js .rl-balken > span:nth-child(3) {
animation-name: rlSeg; animation-duration: 16s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.js .rl-balken > span:nth-child(3) { animation-delay: .8s; }
@keyframes rlFloat { 0%, 100% { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -9px, 0); } }
@keyframes rlDrift {
0%   { transform: translate3d(0, 0, 0) scale(1.004); }
35%  { transform: translate3d(-0.3%, -0.9%, 0) scale(1.016); }
70%  { transform: translate3d(0.25%, -0.4%, 0) scale(1.01); }
100% { transform: translate3d(0, 0, 0) scale(1.004); }
}
@keyframes rlHalo { 0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.98); }
50% { opacity: .85; transform: translate(-50%, -50%) scale(1.03); } }
@keyframes rlBar { 0% { transform: scaleX(0); }
43.75% { transform: scaleX(1); }
100% { transform: scaleX(1); } }
@keyframes rlSeg { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
.js .rl-karte, .js .rl-bild, .js .rl-zahlen, .js .rl-halo,
.js .rl-balken i, .js .rl-balken > span { animation: none; }
.js .rl-balken i { transform: scaleX(1); }
}
.sr-reihe > .sr-schritt {
animation-name: srBalken;
animation-duration: var(--sr-dauer, 12s);
animation-timing-function: cubic-bezier(.3, .9, .3, 1);
animation-iteration-count: infinite;
animation-delay: var(--sr-d, 0s);
}
@keyframes srBalken {
0%, 3% { border-top-color: #DCE4EC; }
6%, 18% { border-top-color: #EE7A08; }
22%, 100% { border-top-color: #DCE4EC; }
}
@media (prefers-reduced-motion: reduce) {
.sr-reihe > .sr-schritt { animation: none; }
.sr-reihe > .sr-schritt:first-child { border-top-color: #EE7A08; }
}
.cbp {
background: #F4F7FA;
border: 1px solid #DCE4EC;
border-radius: 16px;
padding: 32px 28px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.cbp__symbol { color: #B15A06; }
.cbp__titel {
font-family: 'Sora', sans-serif;
font-weight: 600;
font-size: 19px;
color: #1B2F41;
}
.cbp__text {
font-size: 15px;
line-height: 1.65;
color: #5C7089;
margin: 0;
max-width: 52ch;
}
.cbp__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 4px; }
.cbp__ja, .cbp__mehr {
font-family: 'Sora', sans-serif;
font-weight: 600;
font-size: 15px;
padding: 12px 24px;
border-radius: 10px;
cursor: pointer;
}
.cbp__ja { background: #EE7A08; color: #1B2F41; border: 1px solid #EE7A08; }
.cbp__mehr { background: transparent; color: #1B2F41; border: 1px solid #B6C4D2; }
.cbp__ja:hover { background: #D96D06; border-color: #D96D06; }
.cbp__mehr:hover { border-color: #1B2F41; }
.cbp__fuss { font-size: 13px; line-height: 1.6; color: #5B748F; margin: 6px 0 0; max-width: 48ch; }
.cbp__fuss a { color: #B15A06; }
.na-wellen {
position: absolute; inset: 0; display: grid; place-items: center;
pointer-events: none; z-index: 0;
}
.na-welle {
grid-area: 1 / 1; width: min(680px, 100%); aspect-ratio: 1; border-radius: 50%;
border: 1.5px solid rgba(238, 122, 8, .55); opacity: 0;
}
.na-hero .hs-card { position: relative; z-index: 1; }
.js .na-hero .hs-stage.hs-eingefahren .na-welle {
animation-name: naWelle;
animation-duration: 9s;
animation-timing-function: cubic-bezier(.25, .6, .3, 1);
animation-iteration-count: infinite;
}
.na-welle:nth-child(2) { animation-delay: 3s; }
.na-welle:nth-child(3) { animation-delay: 6s; }
.na-welle:first-child   { animation-delay: 0s; }
@keyframes naWelle {
0%   { transform: scale(.52); opacity: 0; }
10%  { opacity: .78; }
62%  { opacity: .3; }
100% { transform: scale(1.3); opacity: 0; }
}
.js .na-hero .na-schein {
animation-name: naSchein;
animation-duration: 26s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
}
@keyframes naSchein {
0%   { opacity: .55; }
50%  { opacity: 1; }
100% { opacity: .55; }
}
@media (prefers-reduced-motion: reduce) {
.js .na-hero .hs-stage.hs-eingefahren .na-welle,
.js .na-hero .na-schein { animation: none; }
.na-welle:first-child { opacity: .32; transform: scale(1); }
}
.nf-buehne { position: relative; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; }
.nf-buehne > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-ebene { position: absolute; inset: 0; pointer-events: none; }
.nf-dim {
background: rgba(8, 31, 56, .20);
-webkit-mask-image: radial-gradient(ellipse 34% 28% at 30.1% 41.7%, transparent 55%, #000 100%);
mask-image: radial-gradient(ellipse 34% 28% at 30.1% 41.7%, transparent 55%, #000 100%);
}
.nf-marke { position: absolute; left: 8.13%; top: 28.15%; width: 42.9%; height: 27.03%; }
.nf-schein {
position: absolute; inset: -5%; border-radius: 6%;
background: radial-gradient(closest-side, rgba(238, 122, 8, .22), rgba(238, 122, 8, 0) 76%);
}
.nf-rahmen {
position: absolute; inset: 0; border: 1px solid rgba(238, 122, 8, .85);
border-radius: 1.86% / 2.95%;
box-shadow: 0 0 0 3px rgba(238, 122, 8, .09), 0 0 18px rgba(238, 122, 8, .16);
}
.nf-pille {
position: absolute; right: calc(48.96% + 20px); top: 28.15%; margin-top: -15px;
display: flex; align-items: center; gap: 8px;
background: rgba(255, 255, 255, .94); border: 1px solid rgba(238, 122, 8, .32);
border-radius: 999px; padding: 7px 14px;
box-shadow: 0 10px 24px -14px rgba(8, 31, 56, .5); white-space: nowrap;
}
.nf-pille b {
font-family: 'JetBrains Mono', monospace; font-size: clamp(8px, .62vw, 10px);
letter-spacing: .24em; text-transform: uppercase; font-weight: 400; color: #B15A06;
}
.nf-punkt { width: 5px; height: 5px; border-radius: 50%; background: #EE7A08; flex: none; }
.nf-zeiger { position: absolute; left: 15.8%; top: 50.9%; width: 0; height: 0; }
.js .nf-dim, .js .nf-marke, .js .nf-pille { opacity: 0; }
.js .nf-zeiger i, .js .nf-zeiger u { opacity: 0; }
.nf-zeiger { display: none; }
.js .nf-zeiger { display: block; }
.nf-zeiger i {
position: absolute; left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 50%;
background: rgba(255, 255, 255, .98);
box-shadow: 0 4px 12px rgba(8, 31, 56, .4), inset 0 0 0 1.5px #EE7A08;
}
.nf-zeiger u {
position: absolute; left: -20px; top: -20px; width: 40px; height: 40px;
border-radius: 50%; border: 1.5px solid rgba(238, 122, 8, .6);
}
.nf-glanz { overflow: hidden; mix-blend-mode: screen; }
.nf-glanz i {
position: absolute; top: -20%; left: 0; width: 22%; height: 140%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
filter: blur(4px);
}
.js .nf-buehne .nf-ebene, .js .nf-buehne .nf-marke,
.js .nf-buehne .nf-pille { animation-fill-mode: forwards; }
.js [data-reveal].rv-in .nf-dim {
animation-name: nfFade; animation-duration: 1.4s; animation-timing-function: ease; animation-delay: .5s;
}
.js [data-reveal].rv-in .nf-marke {
animation-name: nfKarte; animation-duration: 1s;
animation-timing-function: cubic-bezier(.2, .8, .25, 1); animation-delay: .35s;
}
.js [data-reveal].rv-in .nf-pille {
animation-name: nfFade; animation-duration: 1s; animation-timing-function: ease; animation-delay: .8s;
}
.js [data-reveal].rv-in .nf-schein {
animation-name: nfSchein; animation-duration: 6s;
animation-timing-function: ease-in-out; animation-iteration-count: infinite;
}
.js [data-reveal].rv-in .nf-rahmen {
animation-name: nfBlitz; animation-duration: 9s; animation-timing-function: ease-out;
animation-delay: 1.2s; animation-iteration-count: infinite;
}
.js [data-reveal].rv-in .nf-zeiger i {
animation-name: nfZeiger; animation-duration: 9s;
animation-timing-function: cubic-bezier(.3, .7, .2, 1); animation-iteration-count: infinite;
}
.js [data-reveal].rv-in .nf-zeiger u {
animation-name: nfKlick; animation-duration: 9s; animation-timing-function: ease-out;
animation-delay: 1.2s; animation-iteration-count: infinite;
}
.js [data-reveal].rv-in .nf-glanz i {
animation-name: nfGlanz; animation-duration: 13s;
animation-timing-function: cubic-bezier(.35, .1, .25, 1); animation-delay: 2s;
animation-iteration-count: infinite;
}
@keyframes nfFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes nfKarte {
from { opacity: 0; transform: translate3d(-26px, 26px, 0) scale(.94); }
to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes nfSchein {
0%   { opacity: .35; transform: scale(.94); }
50%  { opacity: .8;  transform: scale(1.06); }
100% { opacity: .35; transform: scale(.94); }
}
@keyframes nfBlitz {
0%, 42% { border-color: rgba(238, 122, 8, .85);
box-shadow: 0 0 0 3px rgba(238, 122, 8, .09), 0 0 18px rgba(238, 122, 8, .16); }
47%     { border-color: #EE7A08;
box-shadow: 0 0 0 7px rgba(238, 122, 8, .26), 0 0 36px rgba(238, 122, 8, .55); }
66%, 100% { border-color: rgba(238, 122, 8, .85);
box-shadow: 0 0 0 3px rgba(238, 122, 8, .09), 0 0 18px rgba(238, 122, 8, .16); }
}
@keyframes nfZeiger {
0%   { transform: translate(96px, 104px); opacity: 0; }
10%  { opacity: 1; }
40%  { transform: translate(0, 0); opacity: 1; }
62%  { transform: translate(0, 0); opacity: 1; }
80%  { transform: translate(72px, 92px); opacity: 0; }
100% { transform: translate(96px, 104px); opacity: 0; }
}
@keyframes nfKlick {
0%, 40% { transform: scale(.5); opacity: 0; }
46%     { transform: scale(.7); opacity: .85; }
62%     { transform: scale(2.1); opacity: 0; }
100%    { transform: scale(2.1); opacity: 0; }
}
@keyframes nfGlanz {
0%   { transform: translateX(-120%) skewX(-14deg); }
22%  { transform: translateX(320%) skewX(-14deg); }
100% { transform: translateX(320%) skewX(-14deg); }
}
@media (prefers-reduced-motion: reduce) {
.js [data-reveal].rv-in .nf-dim, .js [data-reveal].rv-in .nf-marke,
.js [data-reveal].rv-in .nf-pille, .js [data-reveal].rv-in .nf-schein,
.js [data-reveal].rv-in .nf-rahmen, .js [data-reveal].rv-in .nf-zeiger i,
.js [data-reveal].rv-in .nf-zeiger u, .js [data-reveal].rv-in .nf-glanz i { animation: none; }
.js .nf-dim, .js .nf-marke, .js .nf-pille { opacity: 1; }
.js .nf-zeiger { display: none; }
}
.js [data-reveal] .vp-buehne, .js [data-reveal] .vp-buehne *,
.js [data-reveal] .vp-stufen, .js [data-reveal] .vp-stufen *,
.js [data-reveal] .fp-buehne, .js [data-reveal] .fp-buehne *,
.js [data-reveal] .fp-stufen, .js [data-reveal] .fp-stufen *,
.js [data-reveal] [class^="fw-"],
.js [data-reveal] [class^="fw-"] *,
.js [data-reveal] [class*=" fw-"],
.js [data-reveal] [class*=" fw-"] *,
.js [data-reveal] [class^="oe-"],
.js [data-reveal] [class^="oe-"] *,
.js [data-reveal] [class*=" oe-"],
.js [data-reveal] [class*=" oe-"] *,
.js [data-reveal] [class^="pl-"],
.js [data-reveal] [class^="pl-"] *,
.js [data-reveal] [class*=" pl-"],
.js [data-reveal] [class*=" pl-"] *,
.js [data-reveal] [class^="pm-"],
.js [data-reveal] [class^="pm-"] *,
.js [data-reveal] [class*=" pm-"],
.js [data-reveal] [class*=" pm-"] *,
.js [data-reveal] [class^="tb-"],
.js [data-reveal] [class^="tb-"] *,
.js [data-reveal] [class*=" tb-"],
.js [data-reveal] [class*=" tb-"] *,
.js [data-reveal] [class^="vz-"],
.js [data-reveal] [class^="vz-"] *,
.js [data-reveal] [class*=" vz-"],
.js [data-reveal] [class*=" vz-"] * {
animation-play-state: paused;
}
.js [data-reveal].mo-lauf .vp-buehne, .js [data-reveal].mo-lauf .vp-buehne *,
.js [data-reveal].mo-lauf .vp-stufen, .js [data-reveal].mo-lauf .vp-stufen *,
.js [data-reveal].mo-lauf .fp-buehne, .js [data-reveal].mo-lauf .fp-buehne *,
.js [data-reveal].mo-lauf .fp-stufen, .js [data-reveal].mo-lauf .fp-stufen *,
.js [data-reveal].mo-lauf [class^="fw-"],
.js [data-reveal].mo-lauf [class^="fw-"] *,
.js [data-reveal].mo-lauf [class*=" fw-"],
.js [data-reveal].mo-lauf [class*=" fw-"] *,
.js [data-reveal].mo-lauf [class^="oe-"],
.js [data-reveal].mo-lauf [class^="oe-"] *,
.js [data-reveal].mo-lauf [class*=" oe-"],
.js [data-reveal].mo-lauf [class*=" oe-"] *,
.js [data-reveal].mo-lauf [class^="pl-"],
.js [data-reveal].mo-lauf [class^="pl-"] *,
.js [data-reveal].mo-lauf [class*=" pl-"],
.js [data-reveal].mo-lauf [class*=" pl-"] *,
.js [data-reveal].mo-lauf [class^="pm-"],
.js [data-reveal].mo-lauf [class^="pm-"] *,
.js [data-reveal].mo-lauf [class*=" pm-"],
.js [data-reveal].mo-lauf [class*=" pm-"] *,
.js [data-reveal].mo-lauf [class^="tb-"],
.js [data-reveal].mo-lauf [class^="tb-"] *,
.js [data-reveal].mo-lauf [class*=" tb-"],
.js [data-reveal].mo-lauf [class*=" tb-"] *,
.js [data-reveal].mo-lauf [class^="vz-"],
.js [data-reveal].mo-lauf [class^="vz-"] *,
.js [data-reveal].mo-lauf [class*=" vz-"],
.js [data-reveal].mo-lauf [class*=" vz-"] * {
animation-play-state: running;
}
.kd__tile--bald {
cursor: default; background: #F7F9FB; border-color: #E4EBF2;
}
.kd__tile--bald:hover {
border-color: #E4EBF2; transform: none; box-shadow: none;
}
.kd__tile--bald .kd__tile-icon { color: #8DA1B7; }
.kd__tile-bald {
flex: none; align-self: center; white-space: nowrap;
font-family: 'JetBrains Mono', monospace; font-size: 10px;
letter-spacing: .14em; text-transform: uppercase;
color: #B15A06; background: #FCF1E4; border: 1px solid #F3D9BC;
border-radius: 999px; padding: 4px 9px;
}