:root {
--bg-0: #111a1f;
--bg-1: #1b2430;
--bg-2: #171d26;
--ivory: #f2efe7;
--ivory-70: rgba(242, 239, 231, 0.72);
--ivory-45: rgba(242, 239, 231, 0.56);
--ink: #111a1f;
--ink-70: rgba(17, 26, 31, 0.74);
--gold: #a89d73;
--gold-bright: #edb970;
--gold-deep: #8c7f55;
--gold-glow: rgba(168, 157, 115, 0.7);
--dehm-dark: #222222;
--sand: #dad4c7;
--grad-gold: linear-gradient(135deg, var(--gold-bright) 0%, var(--gold) 100%);
--grad-gold-hover: linear-gradient(135deg, var(--gold) 0%, var(--gold-bright) 100%);
--grad-linie: linear-gradient(90deg, var(--gold) 0%, rgba(168, 157, 115, 0.15) 100%);
--grad-flaeche: linear-gradient(180deg, #1b2430 0%, #161d27 100%);
--grad-panel: linear-gradient(180deg, #1a2028 0%, #15191f 100%);
--line: rgba(242, 239, 231, 0.1);
--line-strong: rgba(242, 239, 231, 0.22);
--line-gold: rgba(168, 157, 115, 0.55);
--line-control: rgba(242, 239, 231, 0.38);
--line-ink: rgba(17, 26, 31, 0.14);
--whatsapp: #25d366;
--error: #e08475;
--ok: #7da97c;
--live: #5ad08f;
--ampel-rot: var(--error);
--ampel-gelb: var(--gold-bright);
--ampel-gruen: var(--ok);
--font-serif: 'Newsreader', 'Newsreader Fallback', Georgia, serif;
--font-sans: 'Inter Tight', 'Inter Tight Fallback', Arial, sans-serif;
--fs-h1: clamp(2.6rem, 5.4vw, 5.5rem);
--fs-h2: clamp(2rem, 3.6vw, 3.4rem);
--fs-h2-sub: clamp(1.55rem, 2.6vw, 2.3rem);
--fs-h3: clamp(1.35rem, 2vw, 1.7rem);
--fs-block: clamp(1.25rem, 1.5vw, 1.4rem);
--fs-body: 1.0625rem;
--fs-small: 0.8125rem;
--fs-eyebrow: 0.8125rem;
--container: 1360px;
--container-wide: 1360px;
--pad-x: clamp(20px, 4vw, 48px);
--container-pad: var(--pad-x);
--flow-1: clamp(14px, 1.8vw, 20px);
--flow-2: clamp(22px, 2.8vw, 30px);
--flow-3: clamp(32px, 4.2vw, 46px);
--flow-4: clamp(48px, 6.5vw, 72px);
--sect-y: clamp(72px, 10vw, 128px);
--radius: 8px;
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--t-enter: 280ms;
--t-hover: 160ms;
--t-erklaer: 520ms;
--t-grafik: 900ms;
--hub: -3px;
--zoom: 1.03;
--schatten-stapel: 0 -14px 34px -14px rgba(0, 0, 0, 0.75);
--mass-eng: 28rem;
--mass-lesen: 36rem;
--mass-weit: 40rem;
--fs-body-s: 0.9375rem;
--fs-lead: 1.25rem;
--pad-card: clamp(24px, 3vw, 32px);
--pad-card-eng: 22px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
* {
margin: 0;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
html,
body {
overflow-x: hidden;
overflow-x: clip;
}
[id] {
scroll-margin-top: var(--nav-h, 76px);
}
body {
background: var(--bg-0);
color: var(--ivory);
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img,
svg,
video {
display: block;
max-width: 100%;
height: auto;
}
a {
color: inherit;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
input,
select,
textarea {
font: inherit;
}
[hidden] {
display: none !important;
}
h1,
h2,
h3 {
font-family: var(--font-serif);
font-weight: 400;
line-height: 1.08;
letter-spacing: -0.015em;
text-wrap: balance;
}
h1 {
font-size: var(--fs-h1);
font-variation-settings: 'opsz' 72;
}
@media (max-width: 560px) {
h1,
h2,
h3 {
hyphens: auto;
}
}
h2 {
font-size: var(--fs-h2);
font-variation-settings: 'opsz' 60;
}
h3 {
font-size: var(--fs-h3);
font-weight: 500;
font-variation-settings: 'opsz' 32;
}
p {
max-width: var(--mass-lesen);
text-wrap: pretty;
}
@media (max-width: 600px) {
p {
text-wrap: wrap;
}
}
.lead {
font-size: var(--fs-lead);
line-height: 1.55;
color: var(--ivory-70);
}
.muted {
color: var(--ivory-70);
}
em,
.em-gold {
font-style: italic;
}
h1 em,
h2 em {
color: var(--gold);
font-style: normal;
}
.section--light h1 em,
.section--light h2 em {
color: var(--gold-deep);
}
.eyebrow {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
display: block;
margin-bottom: 18px;
}
.num {
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.unit {
font-size: 0.6em;
font-weight: 400;
color: var(--ivory-70);
margin-left: 0.15em;
}
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--container-pad);
}
.mt-1 { margin-top: var(--flow-1); }
.mt-2 { margin-top: var(--flow-2); }
.mt-3 { margin-top: var(--flow-3); }
.mt-4 { margin-top: var(--flow-4); }
.mb-3 { margin-bottom: var(--flow-3); }
.mb-2 { margin-bottom: var(--flow-2); }
.klein { font-size: var(--fs-body-s); }
.prosa > * + * { margin-top: var(--flow-1); }
.container--wide {
max-width: var(--container-wide);
}
.section {
padding-block: var(--sect-y);
position: relative;
}
.section--auftakt {
padding-top: clamp(48px, 7vw, 88px);
}
.section--alt {
background: var(--bg-1);
background-image: var(--grad-flaeche);
}
.section--panel {
background: var(--bg-2);
background-image: var(--grad-panel);
}
.section--light {
background: var(--sand);
color: var(--ink);
}
.section--light .muted,
.section--light .lead {
color: var(--ink-70);
}
.section--light .eyebrow {
color: #6f6440;
}
.section .container > p {
max-width: var(--mass-weit);
}
.section .container > p.disclaimer {
max-width: var(--mass-weit);
}
@media (max-width: 900px) {
}
main > .section + .section,
main > .heroc + .section {
border-top: 1px solid var(--line-strong);
}
main > .section + .section--light {
border-top-color: var(--line-ink);
}
.hairline-top {
border-top: 1px solid var(--line);
}
.hairline-gold {
border-top: 0;
position: relative;
}
.hairline-gold::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: var(--grad-linie);
}
:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
}
.section--light :focus-visible {
outline-color: var(--ink);
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 200;
background: var(--gold);
color: var(--ink);
padding: 10px 18px;
}
.skip-link:focus {
left: 12px;
top: 12px;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.rv {
opacity: 1;
transform: none;
}
.js .rv[data-rv] {
opacity: 0;
transform: translateY(12px);
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
transition-delay: var(--rvd, 0ms);
}
.js .rv[data-rv].is-in {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.js .rv[data-rv] {
transform: none;
transition: opacity 200ms linear;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.section--tight {
padding-block: calc(var(--sect-y) * 0.42);
}
main > .section + .section--tight {
border-top: 0;
}
.nowrap {
white-space: nowrap;
}
h1, h2, h3, .sect-head h2, .sect-head p {
hyphens: manual;
-webkit-hyphens: manual;
}
.ic {
width: 22px;
height: 22px;
flex: none;
}
.ic--lg {
width: 30px;
height: 30px;
}
.ic--gold {
color: var(--gold);
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 14px 30px;
border-radius: var(--radius);
font-family: var(--font-sans);
font-weight: 500;
font-size: var(--fs-small);
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
white-space: nowrap;
transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out),
color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.btn:active {
transform: scale(0.978);
}
.btn[disabled] {
opacity: 0.55;
cursor: not-allowed;
box-shadow: none;
transform: none;
pointer-events: none;
}
.btn--gold {
background: var(--gold);
background-image: var(--grad-gold);
color: var(--ink);
border: 1px solid var(--gold);
box-shadow: 0 0 0 0 transparent;
transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out),
color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out), box-shadow var(--t-enter) var(--ease-out);
}
.btn--gold:hover {
background-image: var(--grad-gold-hover);
border-color: var(--gold-bright);
color: var(--ink);
box-shadow: 0 6px 26px -12px var(--gold-glow);
}
.btn--swap {
position: relative;
}
.btn--swap .btn__label {
transition: opacity var(--t-hover) var(--ease-out);
}
.btn--swap::after {
content: attr(data-hover);
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--t-hover) var(--ease-out);
}
.btn--swap:hover .btn__label {
opacity: 0;
}
.btn--swap:hover::after {
opacity: 1;
}
.btn--line {
background: transparent;
color: var(--ivory);
border: 1px solid var(--line-control);
}
.btn--line:hover {
border-color: var(--ivory);
}
.btn--line[href*="whatsapp"] .ic,
.btn--line[href*="wa.me"] .ic {
color: var(--whatsapp);
}
.section--light .btn--line {
color: var(--ink);
border-color: var(--line-ink);
}
.section--light .btn--line:hover {
border-color: var(--ink);
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
.btn-note {
width: 100%;
font-size: var(--fs-small);
color: var(--ivory-45);
margin-top: 2px;
}
@media (max-width: 767px) {
.btn {
width: 100%;
white-space: normal;
padding-inline: 20px;
}
}
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--bg-0);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--flow-2);
height: var(--nav-h, 76px);
}
.site-logo {
display: flex;
align-items: center;
gap: 12px;
text-decoration: none;
flex: 0 0 auto;
}
.site-logo img {
height: 66px;
width: auto;
}
.nav-toggle {
display: none;
width: 44px;
height: 44px;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
color: var(--ivory);
}
.nav-toggle span {
display: block;
width: 22px;
height: 2px;
background: currentColor;
border-radius: var(--radius);
transition: transform var(--t-enter) var(--ease-out);
}
.nav-toggle[aria-expanded='true'] span:nth-child(1) {
transform: translateY(4.5px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] span:nth-child(2) {
transform: translateY(-4.5px) rotate(-45deg);
}
.hero-benefits {
list-style: none;
padding: 0;
margin: 26px 0 0;
display: grid;
gap: 12px;
}
.hero-benefits li {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--ivory-70);
}
.hero-benefits .ic {
color: var(--gold);
margin-top: 3px;
width: 19px;
height: 19px;
}
.sect-head {
max-width: none;
margin-bottom: var(--flow-3);
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
column-gap: var(--flow-4);
align-items: baseline;
}
.sect-head:not(:has(p)) {
grid-template-columns: minmax(0, 1fr);
}
.opener__kopf h1::before,
.heroc__content h1::before,
.split h1::before,
.rechner-kopf h1::before {
content: '';
display: block;
width: 36px;
height: 36px;
margin-bottom: 22px;
background: url('/assets/img/brand/icon-knoten-gold-96w.png') center / contain no-repeat;
}
.sect-head h2,
.cta-bande h2 {
--knoten: 28px;
position: relative;
padding-left: calc(var(--knoten) + var(--flow-1));
}
.sect-head h2::before,
.cta-bande h2::before {
content: '';
position: absolute;
left: 0;
top: calc(0.54em - var(--knoten) / 2);
width: var(--knoten);
height: var(--knoten);
background: url('/assets/img/brand/icon-knoten-gold-96w.png') center / contain no-repeat;
}
.sect-head .eyebrow {
grid-column: 1;
grid-row: 1;
}
.sect-head h2 {
grid-column: 1;
grid-row: 2;
}
.sect-head {
--kopf-fs: var(--fs-h2-sub);
}
.section--haupt .sect-head {
--kopf-fs: var(--fs-h2);
}
.sect-head h2 {
font-size: var(--kopf-fs);
}
.sect-head p {
grid-column: 2;
grid-row: 2 / span 9;
align-self: start;
margin-top: calc(var(--kopf-fs) * 0.54 - var(--fs-lead) * 0.775);
max-width: var(--mass-eng);
color: var(--ivory-70);
}
.section--light .sect-head p {
color: var(--ink-70);
}
@media (max-width: 900px) {
.sect-head {
grid-template-columns: minmax(0, 1fr);
}
.sect-head .eyebrow,
.sect-head h2,
.sect-head p {
grid-column: 1;
grid-row: auto;
}
.sect-head p {
margin-top: 16px;
max-width: none;
}
}
.stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--flow-3);
text-align: left;
}
.stat__num {
font-family: var(--font-sans);
font-size: clamp(2.6rem, 4.6vw, 4rem);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--gold-bright);
line-height: 1;
}
.stat__label {
margin-top: 10px;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
@media (max-width: 900px) {
.stats {
grid-template-columns: repeat(2, 1fr);
gap: var(--flow-3) var(--flow-2);
max-width: 420px;
}
}
.feat-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
}
.feat {
padding: var(--pad-card);
border-radius: var(--radius);
border-bottom: 1px solid var(--line);
min-width: 0;
}
.feat:nth-child(3n + 2),
.feat:nth-child(3n) {
border-left: 1px solid var(--line);
}
.feat .ic {
color: var(--gold);
}
.feat h3 {
font-size: var(--fs-block);
margin-top: 16px;
}
.feat p {
margin-top: 10px;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
@media (max-width: 900px) {
.feat-grid {
grid-template-columns: 1fr;
}
.feat {
border-left: 0 !important;
}
}
.quotes {
display: flex;
gap: var(--flow-2);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
padding-top: calc(var(--hub) * -2);
scrollbar-width: none;
}
.quotes::-webkit-scrollbar {
display: none;
}
.quote {
flex: 0 0 min(480px, 86vw);
scroll-snap-align: start;
display: flex;
flex-direction: column;
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
}
@media (min-width: 1100px) {
.quotes {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: var(--flow-4);
row-gap: var(--flow-4);
overflow: visible;
}
.quote {
flex: none;
min-width: 0;
}
[data-quotes] > .quotes-nav {
display: none;
}
}
.quote blockquote {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--fs-block);
line-height: 1.45;
font-variation-settings: 'opsz' 24;
}
.quote figcaption {
margin-top: auto;
padding-top: 18px;
display: flex;
align-items: center;
gap: 14px;
}
.quote img {
width: 44px;
height: 44px;
border-radius: 50%;
}
.quote__name {
font-weight: 500;
font-size: var(--fs-body-s);
}
.quote__role {
color: var(--ivory-70);
font-size: var(--fs-small);
}
.quotes-nav {
display: flex;
gap: 8px;
margin-top: 20px;
}
.quotes-nav button {
width: 44px;
height: 44px;
border: 1px solid var(--line-control);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ivory);
transition: border-color var(--t-hover) var(--ease-out);
}
.quotes-nav button:hover {
border-color: var(--gold);
}
.ic--flip {
transform: scaleX(-1);
}
.proven {
display: flex;
align-items: center;
gap: 18px;
flex-wrap: wrap;
}
.proven__score {
font-size: clamp(2.4rem, 4vw, 3.2rem);
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--gold-bright);
line-height: 1;
}
.proven__stars {
display: flex;
gap: 3px;
color: var(--gold);
}
.proven__stars .ic {
width: 18px;
height: 18px;
}
.proven__meta {
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.proven__meta a {
color: var(--ivory);
}
.person {
display: grid;
grid-template-columns: minmax(280px, 420px) 1fr;
gap: var(--flow-4);
align-items: center;
}
.person__img img {
width: 100%;
aspect-ratio: 4/5;
object-fit: cover;
object-position: 50% 18%;
}
.person__sig {
height: 58px;
width: auto;
margin-top: var(--flow-2);
opacity: 0.85;
}
.person__channels {
margin-top: var(--flow-2);
display: grid;
gap: 2px;
border-top: 1px solid var(--line);
}
.person__channels a {
display: flex;
align-items: center;
gap: 14px;
padding: 14px 2px;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ivory-70);
transition: color var(--t-hover) var(--ease-out);
}
.person__channels a:hover {
color: var(--ivory);
}
.person__channels .ic {
color: var(--gold);
width: 20px;
height: 20px;
}
@media (max-width: 900px) {
.person {
grid-template-columns: 1fr;
}
.person__img {
max-width: 380px;
}
}
.quick {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 90;
}
.quick__wa {
display: flex;
align-items: center;
gap: 14px;
font-family: var(--font-sans);
font-size: var(--fs-body-s);
font-weight: 500;
letter-spacing: 0.01em;
color: var(--ivory);
text-decoration: none;
background: rgba(20, 24, 31, 0.94);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.quick__wa:hover {
background: var(--bg-1);
}
.quick__wa .ic {
width: 24px;
height: 24px;
color: var(--whatsapp);
}
@media (min-width: 768px) {
.quick {
right: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.quick__wa {
position: relative;
justify-content: center;
width: 52px;
height: 52px;
background: var(--gold);
backdrop-filter: none;
-webkit-backdrop-filter: none;
border: 1px solid var(--gold);
border-radius: var(--radius);
}
.quick__wa .ic {
color: var(--ink);
}
.quick__wa:hover {
background: var(--gold-bright);
border-color: var(--gold-bright);
}
.quick__wa span,
.chat__knopf span,
.quick__ic::after {
position: absolute;
top: 50%;
right: calc(100% + 8px);
z-index: 1;
padding: 10px 14px;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
pointer-events: none;
opacity: 0;
transform: translateY(-50%) translateX(6px);
transition: opacity var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.quick__ic::after {
content: attr(data-label);
}
.quick__wa:hover span,
.quick__wa:focus-visible span,
.chat__knopf:hover span,
.chat__knopf:focus-visible span,
.quick__ic:hover::after,
.quick__ic:focus-visible::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
}
@media (min-width: 768px) and (hover: none) {
.quick__wa span,
.chat__knopf span,
.quick__ic::after {
display: none;
}
}
@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
.quick__wa span,
.chat__knopf span,
.quick__ic::after {
transition: none;
}
}
@media (max-width: 767px) {
.quick {
top: auto;
bottom: 0;
left: 0;
right: 0;
transform: none;
}
.quick__wa {
writing-mode: horizontal-tb;
justify-content: center;
min-height: 60px;
padding: 18px 20px calc(18px + env(safe-area-inset-bottom, 0px));
font-size: var(--fs-body);
border: 0;
border-top: 1px solid var(--gold);
}
.quick a:hover,
.quick a:active {
transform: none;
}
.quick a .ic {
width: 26px;
height: 26px;
}
body {
padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px));
}
body:has(.site-nav.is-open) .quick__wa {
display: none;
}
}
.steps {
display: grid;
grid-template-columns: repeat(var(--steps, 3), 1fr);
gap: 0;
border-top: 1px solid var(--line);
counter-reset: step;
}
.step {
padding: var(--pad-card);
border-radius: var(--radius);
position: relative;
counter-increment: step;
}
.step + .step {
border-left: 1px solid var(--line);
}
.step::before {
content: counter(step, decimal-leading-zero);
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--gold);
font-size: var(--fs-body-s);
letter-spacing: 0.08em;
}
.step h3 {
font-size: var(--fs-block);
margin-top: 14px;
}
.step p {
margin-top: 10px;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
@media (max-width: 900px) {
.steps {
grid-template-columns: 1fr;
}
.step + .step {
border-left: 0;
border-top: 1px solid var(--line);
}
}
.form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--flow-2);
max-width: none;
}
@media (min-width: 1280px) {
.form {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--flow-2);
}
}
.form .field--full {
grid-column: 1 / -1;
}
.field label {
display: block;
font-size: var(--fs-body-s);
font-weight: 500;
margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
width: 100%;
min-height: 52px;
padding: 13px 16px;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
transition: border-color var(--t-hover) var(--ease-out);
}
.field textarea {
min-height: 140px;
resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
color: var(--ivory-45);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
border-color: var(--gold);
}
.field__error {
display: none;
margin-top: 7px;
font-size: var(--fs-small);
color: var(--error);
}
.field.is-invalid input,
.field.is-invalid textarea {
border-color: var(--error);
}
.field.is-invalid .field__error {
display: block;
animation: fehler-ein var(--t-enter) var(--ease-out) both;
}
@keyframes fehler-ein {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: none;
}
}
@media (prefers-reduced-motion: reduce) {
.field.is-invalid .field__error {
animation: none;
}
}
.check {
display: flex;
gap: 12px;
align-items: flex-start;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.field .check {
display: flex;
margin-bottom: 0;
}
.check input {
width: 20px;
height: 20px;
min-height: 0;
margin-top: 2px;
accent-color: var(--gold);
flex: none;
}
.check a {
color: var(--ivory);
}
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-state {
grid-column: 1 / -1;
padding: var(--pad-card-eng);
border: 1px solid var(--line-gold);
opacity: 0;
transform: translateY(10px);
transition: opacity var(--t-erklaer) var(--ease-out), transform var(--t-erklaer) var(--ease-out);
}
.form-state.is-in {
opacity: 1;
transform: none;
}
.no-js .form-state {
opacity: 1;
transform: none;
}
@media (prefers-reduced-motion: reduce) {
.form-state {
transform: none;
transition: opacity var(--t-enter) linear;
}
}
.form-state--ok {
border-color: var(--ok);
color: var(--ivory);
}
.form-state--err {
border-color: var(--error);
}
@media (max-width: 640px) {
.form {
grid-template-columns: 1fr;
}
}
.kv {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body-s);
}
.kv th {
text-align: left;
font-weight: 400;
color: var(--ivory-70);
padding: 12px 0;
}
.kv td {
text-align: right;
font-variant-numeric: tabular-nums;
font-weight: 500;
padding: 12px 0;
}
.kv tr + tr {
border-top: 1px solid var(--line);
}
.kv tr.kv--sum {
border-top: 1px solid var(--gold);
}
.offers {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--flow-3);
}
.offers:has(> :only-child) {
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.offers:has(> :only-child) .offer {
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
align-items: stretch;
}
.offers:has(> :only-child) .offer__img {
aspect-ratio: auto;
height: 100%;
}
}
.offer {
background: var(--bg-2);
background-image: var(--grad-panel);
border-top: 1px solid var(--gold);
border-radius: var(--radius);
}
.offer__img {
aspect-ratio: 16/10;
overflow: hidden;
}
.offer__img img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-erklaer) var(--ease-out);
}
.offer:hover .offer__img img {
transform: scale(var(--zoom));
}
.offer__body {
padding: var(--pad-card);
}
.offer__meta {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.offer__rendite {
font-size: 2rem;
font-weight: 500;
font-variant-numeric: tabular-nums;
color: var(--gold-bright);
}
.offer__badge {
font-size: var(--fs-small);
color: var(--ivory-70);
border: 1px solid var(--line);
padding: 4px 12px;
}
.offer h3 {
margin-top: 16px;
}
.offer p {
margin-top: 12px;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.offer .kv {
margin-top: 20px;
}
@media (max-width: 900px) {
.offers {
grid-template-columns: 1fr;
}
}
.tiles {
display: grid;
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
gap: var(--flow-2);
}
.tiles--zwei .tile,
.tiles--drei .tile {
min-height: clamp(440px, 62vh, 660px);
}
.tiles--zwei .tile h2 {
font-size: var(--fs-h2);
}
.tiles--zwei .tile p {
max-width: var(--mass-lesen);
font-size: var(--fs-body);
}
@media (min-width: 901px) {
.tiles--zwei {
grid-template-rows: minmax(0, 1fr) repeat(4, auto);
row-gap: 0;
min-height: clamp(440px, 62vh, 660px);
}
.tiles--zwei .tile {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
}
.tiles--zwei .tile > .ic,
.tiles--drei .tile > .ic {
grid-row: 2;
align-self: end;
}
.tiles--zwei .tile > h2,
.tiles--drei .tile > h2 {
grid-row: 3;
}
.tiles--zwei .tile > p,
.tiles--drei .tile > p {
grid-row: 4;
align-self: start;
}
.tiles--zwei .tile > .tile__go,
.tiles--drei .tile > .tile__go {
grid-row: 5;
}
}
@media (min-width: 1024px) {
.tiles--drei {
grid-template-rows: minmax(0, 1fr) repeat(4, auto);
row-gap: 0;
min-height: clamp(440px, 62vh, 660px);
}
.tiles--drei .tile {
display: grid;
grid-row: span 5;
grid-template-rows: subgrid;
}
}
@media (max-width: 1023px) {
.tiles--drei {
grid-template-columns: minmax(0, 1fr);
}
.tiles--drei .tile {
min-height: 300px;
}
}
.tile.tile--motiv {
background: var(--bg-0);
}
.tile--motiv .tile__bg {
bottom: auto;
height: 48%;
}
.tile--motiv .tile__bg img {
object-fit: contain;
object-position: 50% 0;
}
.tile {
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
min-height: clamp(380px, 52vh, 560px);
padding: var(--pad-card);
border-radius: var(--radius);
text-decoration: none;
color: var(--ivory);
overflow: hidden;
border: 1px solid var(--line-gold);
background: var(--bg-2);
}
.tile__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.tile__bg img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--t-erklaer) var(--ease-out);
}
.tile__bg::after {
content: '';
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(17, 26, 31, 0.22) 0%, rgba(17, 26, 31, 0.84) 58%, rgba(17, 26, 31, 0.94) 100%),
linear-gradient(0deg, rgba(17, 26, 31, 0.28), rgba(17, 26, 31, 0.28));
}
.tile:hover .tile__bg img {
transform: scale(var(--zoom));
}
.tile > *:not(.tile__bg) {
position: relative;
z-index: 1;
}
.tile .ic {
color: var(--gold);
width: 30px;
height: 30px;
}
.tile h2 {
font-size: var(--fs-h2-sub);
margin-top: 18px;
}
.tile p {
margin-top: 12px;
color: var(--ivory-70);
font-size: var(--fs-body-s);
max-width: var(--mass-eng);
}
.tile__go {
width: 100%;
margin-top: var(--flow-2);
background: color-mix(in srgb, var(--bg-0) 45%, transparent);
}
.tile__go .ic {
width: 18px;
height: 18px;
transition: transform var(--t-hover) var(--ease-out);
}
.tile:hover .tile__go .ic {
transform: translateX(4px);
}
@media (max-width: 900px) {
.tiles {
grid-template-columns: 1fr;
}
.tile {
min-height: 300px;
}
}
.trustline {
display: flex;
flex-wrap: wrap;
gap: 14px var(--flow-3);
align-items: baseline;
padding: 22px 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.trustline strong {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--gold-bright);
font-size: var(--fs-block);
margin-right: 6px;
}
.trustline a {
color: var(--ivory-70);
}
.xsell {
border-top: 1px solid var(--line);
padding-top: 26px;
}
.xsell__label {
font-size: var(--fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ivory-45);
}
.xsell__row {
margin-top: 18px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 var(--flow-3);
}
.xsell__item {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 2px;
text-decoration: none;
color: var(--ivory);
border-bottom: 1px solid var(--line);
transition: background var(--t-hover) var(--ease-out);
}
.xsell__item:hover {
background: var(--bg-2);
}
.xsell__item > .ic {
color: var(--gold);
}
.xsell__item strong {
display: block;
font-weight: 500;
}
.xsell__text {
display: block;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.xsell__go {
margin-left: auto;
width: 18px;
height: 18px;
color: var(--gold);
}
@media (max-width: 760px) {
.xsell__row {
grid-template-columns: 1fr;
}
}
.preloader {
position: fixed;
inset: 0;
z-index: 300;
background: var(--bg-0);
display: flex;
align-items: center;
justify-content: center;
transition: opacity var(--t-erklaer) var(--ease-out), visibility 0s var(--t-erklaer);
}
.preloader__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
transition: transform var(--t-erklaer) var(--ease-out), filter var(--t-erklaer) var(--ease-out);
}
.preloader.is-done {
opacity: 0;
visibility: hidden;
}
.preloader.is-done .preloader__inner {
transform: translateY(-12px) scale(0.98);
filter: blur(3px);
}
.preloader__mark {
width: 64px;
height: auto;
opacity: 0.92;
animation: pre-atem 2200ms ease-in-out infinite;
}
.preloader__claim {
font-family: var(--font-serif);
font-style: italic;
font-size: var(--fs-block);
color: var(--ivory-70);
}
.preloader__bar {
position: relative;
width: 132px;
height: 2px;
margin-top: 4px;
overflow: hidden;
background: rgba(242, 239, 231, 0.12);
}
.preloader__bar i {
position: absolute;
inset: 0 auto 0 0;
width: 42%;
background: var(--grad-gold);
animation: pre-lauf 1200ms linear infinite;
}
@keyframes pre-atem {
0%,
100% {
transform: scale(1);
opacity: 0.92;
}
50% {
transform: scale(1.05);
opacity: 1;
}
}
@keyframes pre-lauf {
from {
transform: translateX(-100%);
}
to {
transform: translateX(238%);
}
}
@media (prefers-reduced-motion: reduce) {
.preloader__mark,
.preloader__bar i {
animation: none;
}
.preloader.is-done .preloader__inner {
transform: none;
filter: none;
}
}
.no-js .preloader {
display: none;
}
.socials {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: 1px solid var(--line-gold);
color: var(--ivory-70);
text-decoration: none;
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out), box-shadow var(--t-enter) var(--ease-out);
}
.socials a:hover {
color: var(--gold-bright);
border-color: var(--gold);
transform: translateY(var(--hub));
box-shadow: 0 6px 20px -14px var(--gold-glow);
}
.socials .ic {
width: 19px;
height: 19px;
}
.socials--footer {
margin-top: var(--flow-2);
}
.socials--nav {
margin-top: 16px;
}
.socials--nav a {
width: 46px;
height: 46px;
}
.faktenliste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0 var(--flow-4);
border-top: 1px solid var(--line);
}
.faktenliste li {
display: grid;
grid-template-columns: auto 1fr;
gap: 14px;
align-items: start;
padding: 22px 0;
border-bottom: 1px solid var(--line);
}
.faktenliste .ic {
width: 20px;
height: 20px;
margin-top: 3px;
color: var(--gold);
}
.faktenliste strong {
display: block;
font-weight: 500;
font-size: var(--fs-block);
}
.faktenliste span > span {
display: block;
margin-top: 6px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (min-width: 820px) {
.faktenliste {
grid-template-columns: 1fr 1fr;
}
}
.ebenen {
margin: 0;
border-top: 1px solid var(--gold);
}
.ebenen > div {
display: grid;
grid-template-columns: 1fr;
gap: 6px;
padding: var(--flow-2) 0;
border-bottom: 1px solid var(--line);
}
.ebenen dt {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-serif);
font-size: var(--fs-block);
}
.ebenen dt .ic {
width: 22px;
height: 22px;
color: var(--gold);
}
.ebenen dd {
margin: 0;
color: var(--ivory-70);
max-width: var(--mass-weit);
}
@media (min-width: 820px) {
.ebenen > div {
grid-template-columns: minmax(0, 0.34fr) minmax(0, 1fr);
gap: var(--flow-3);
align-items: baseline;
}
}
.werte-band {
display: grid;
grid-template-columns: 1fr;
gap: 0;
border-top: 1px solid var(--line);
}
.werte-band > div {
padding: var(--flow-2) 0;
border-bottom: 1px solid var(--line);
}
.werte-band__wert {
display: block;
font-family: var(--font-sans);
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.1;
color: var(--gold-bright);
font-variant-numeric: tabular-nums;
}
.werte-band__label {
display: block;
margin-top: 10px;
font-size: var(--fs-block);
font-weight: 500;
}
.werte-band p {
margin: 8px 0 0;
font-size: var(--fs-body-s);
color: var(--ivory-70);
max-width: var(--mass-eng);
}
.werte-band .linkline {
margin-top: 12px;
}
.werte-band > div {
min-width: 0;
}
.werte-band__wert,
.werte-band .reg__num {
overflow-wrap: anywhere;
}
@media (min-width: 900px) {
.werte-band {
grid-template-columns: repeat(3, 1fr);
column-gap: var(--flow-3);
}
.werte-band > div {
border-bottom: 0;
padding-bottom: 0;
}
}
.wahl {
display: grid;
grid-template-columns: 1fr;
gap: var(--flow-2);
}
.wahl__karte {
display: flex;
flex-direction: column;
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--grad-flaeche);
}
.wahl__nr {
font-size: var(--fs-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
}
.wahl__karte h3 {
margin: 12px 0 0;
font-size: var(--fs-block);
}
.wahl__karte p {
margin: 12px 0 0;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.wahl__karte .linkline {
margin-top: auto;
padding-top: 20px;
}
@media (min-width: 860px) {
.wahl {
grid-template-columns: repeat(3, 1fr);
}
}
.sprung {
display: grid;
gap: var(--flow-2);
margin-top: var(--flow-3);
}
.sprung__titel {
display: block;
font-size: var(--fs-eyebrow);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 12px;
}
.sprung__reihe {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
@media (min-width: 900px) {
.sprung {
grid-template-columns: repeat(2, 1fr);
column-gap: var(--flow-4);
}
}
.sprung--seite {
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.sprung--seite {
grid-template-columns: 1fr;
}
}
.sprung__chip {
display: inline-flex;
align-items: center;
gap: 9px;
padding: 10px 16px;
min-height: 44px;
border: 1px solid var(--line-control);
border-radius: var(--radius);
font-size: var(--fs-body-s);
color: var(--ivory);
text-decoration: none;
transition: border-color var(--t-enter) var(--ease-out), color var(--t-enter) var(--ease-out),
background var(--t-enter) var(--ease-out);
}
.sprung__chip .ic {
width: 18px;
height: 18px;
color: var(--gold);
}
.sprung__chip:active {
transform: scale(0.978);
}
@media (hover: hover) {
.sprung__chip:hover {
border-color: var(--gold);
background: rgba(168, 157, 115, 0.08);
}
}
.claim-zeile {
margin: var(--flow-3) 0 0;
font-family: var(--font-serif);
font-size: clamp(1.15rem, 2vw, 1.5rem);
color: var(--ivory-70);
}
.claim-zeile strong {
font-weight: 400;
color: var(--gold-bright);
}
.trust-kasten {
display: grid;
grid-template-columns: 1fr;
gap: var(--flow-2);
}
.trust-kasten > div {
padding: var(--pad-card);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--grad-flaeche);
text-align: center;
min-width: 0;
}
.trust-kasten__ic {
display: inline-grid;
place-items: center;
width: 56px;
height: 56px;
border: 1px solid var(--line);
border-radius: var(--radius);
}
.trust-kasten__ic .ic {
width: 26px;
height: 26px;
color: var(--gold);
}
.trust-kasten__zahl {
display: block;
margin-top: 16px;
font-family: var(--font-serif);
font-size: clamp(2.1rem, 3.4vw, 2.8rem);
line-height: 1;
color: var(--gold-bright);
font-variant-numeric: tabular-nums;
}
.trust-kasten__label {
display: block;
margin-top: 8px;
font-size: var(--fs-body-s);
font-weight: 500;
color: var(--gold);
}
.trust-kasten p {
margin: 18px 0 0;
padding-top: 18px;
border-top: 1px solid var(--line);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (min-width: 820px) {
.trust-kasten {
grid-template-columns: repeat(2, 1fr);
}
}
.rechner-wege {
display: grid;
grid-template-columns: 1fr;
gap: var(--flow-2);
}
.rechner-weg {
display: flex;
flex-direction: column;
padding: var(--pad-card);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--grad-flaeche);
text-decoration: none;
color: inherit;
transition: border-color var(--t-enter) var(--ease-out), background var(--t-enter) var(--ease-out);
}
.rechner-weg .ic--lg {
color: var(--gold);
}
.rechner-weg__titel {
display: block;
margin-top: 16px;
font-family: var(--font-serif);
font-size: var(--fs-block);
}
.rechner-weg__text {
display: block;
margin-top: 12px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.rechner-weg__go {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: auto;
padding-top: 22px;
color: var(--gold-bright);
font-size: var(--fs-body-s);
}
.rechner-weg__go .ic {
width: 18px;
height: 18px;
transition: transform var(--t-enter) var(--ease-out);
}
.rechner-weg:active {
transform: scale(0.99);
}
@media (hover: hover) {
.rechner-weg:hover {
border-color: var(--gold);
background: var(--grad-panel);
}
.rechner-weg:hover .rechner-weg__go .ic {
transform: translateX(4px);
}
}
@media (min-width: 860px) {
.rechner-wege {
grid-template-columns: 1fr 1fr;
}
}
.quick__reihe {
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
}
.quick__ic {
position: relative;
display: grid;
place-items: center;
width: 44px;
height: 44px;
color: var(--ivory-70);
text-decoration: none;
transition: color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.quick__ic + .quick__ic {
border-top: 1px solid var(--line);
}
.quick__ic .ic {
width: 20px;
height: 20px;
}
.quick__ic:active {
transform: scale(0.94);
}
@media (hover: hover) {
.quick__ic:hover {
color: var(--gold-bright);
background: var(--bg-1);
}
}
@media (max-width: 767px) {
.quick__reihe {
display: none;
}
}
.videos {
display: grid;
grid-template-columns: 1fr;
gap: var(--flow-2);
}
.video {
margin: 0;
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
transition: border-color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.video:hover {
border-color: var(--gold);
transform: translateY(var(--hub));
}
.video__buehne {
position: relative;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--grad-flaeche);
border-bottom: 1px solid var(--line-gold);
}
.video__buehne img {
transition: transform var(--t-erklaer) var(--ease-out);
}
.video:hover .video__buehne img {
transform: scale(var(--zoom));
}
.video__buehne img,
.video__buehne iframe,
.video__buehne video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border: 0;
}
.video__buehne .video__voll {
object-fit: contain;
background: var(--bg-0);
}
.video:has(.ist-voll):hover {
transform: none;
}
.video__halt {
position: absolute;
right: var(--flow-1);
bottom: var(--flow-1);
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid var(--line-control);
border-radius: 50%;
background: color-mix(in srgb, var(--bg-0) 72%, transparent);
color: var(--ivory);
cursor: pointer;
transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.video__halt .ic {
width: 18px;
height: 18px;
}
.video__halt[aria-pressed='false'] .video__halt-play,
.video__halt[aria-pressed='true'] .video__halt-pause {
display: none;
}
@media (hover: hover) {
.video__halt:hover {
border-color: var(--gold);
background: color-mix(in srgb, var(--bg-0) 88%, transparent);
}
}
.video__leer {
position: absolute;
inset: 0;
display: grid;
place-items: center;
color: var(--line-strong);
}
.video__leer .ic {
width: 40px;
height: 40px;
}
.video__play {
position: absolute;
left: 50%;
top: 50%;
width: 72px;
height: 72px;
transform: translate(-50%, -50%);
border: 0;
border-radius: 50%;
background: var(--grad-gold);
color: var(--ink);
cursor: pointer;
display: grid;
place-items: center;
transition: transform var(--t-hover) var(--ease-out);
}
.video__play .ic {
width: 28px;
height: 28px;
}
.video__play:active {
transform: translate(-50%, -50%) scale(0.95);
}
@media (hover: hover) {
.video__play:hover {
transform: translate(-50%, -50%) scale(1.05);
}
}
.video__hinweis,
.video__bald {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
font-size: var(--fs-eyebrow);
color: var(--ivory-70);
text-align: center;
}
.video__bald {
top: 50%;
bottom: auto;
transform: translateY(-50%);
font-family: var(--font-serif);
font-size: var(--fs-body);
color: var(--ivory-45);
letter-spacing: 0.04em;
}
.video figcaption {
flex: 1;
display: flex;
flex-direction: column;
gap: calc(var(--flow-1) / 2);
padding: var(--pad-card-eng) var(--pad-card) var(--pad-card);
}
.video__rolle {
display: block;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.video figcaption strong {
display: block;
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-block);
line-height: 1.25;
text-wrap: balance;
}
.video figcaption > span:last-child {
display: block;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (min-width: 860px) {
.videos {
grid-template-columns: repeat(3, 1fr);
}
}
.laufband {
overflow: hidden;
-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.laufband__spur {
display: flex;
gap: 0;
width: max-content;
animation: laufband 150s linear infinite;
}
.laufband__spur > .quotes {
display: flex;
gap: var(--flow-2);
overflow: visible;
padding-bottom: calc(var(--hub) * -2);
padding-right: var(--flow-2);
flex: 0 0 auto;
}
.laufband .quote {
flex: 0 0 min(420px, 66vw);
}
@keyframes laufband {
to { transform: translateX(-50%); }
}
.laufband--still .laufband__spur,
.laufband:hover .laufband__spur,
.laufband:focus-within .laufband__spur {
animation-play-state: paused;
}
@media (prefers-reduced-motion: reduce) {
.laufband__spur { animation: none; }
.laufband { mask-image: none; -webkit-mask-image: none; overflow-x: auto; }
}
.laufband[data-laufband='an'] {
cursor: grab;
touch-action: pan-y;
user-select: none;
-webkit-user-select: none;
}
.laufband[data-laufband='an'] .laufband__spur {
animation: none;
will-change: transform;
}
.laufband.ist-gezogen {
cursor: grabbing;
}
.laufband img {
-webkit-user-drag: none;
}
.laufband__nav {
margin-top: var(--flow-2);
}
.chat {
position: fixed;
right: var(--container-pad);
bottom: 20px;
z-index: 95;
}
.chat__knopf {
display: inline-flex;
align-items: center;
gap: 10px;
min-height: 48px;
padding: 10px 18px 10px 14px;
background: var(--bg-2);
color: var(--ivory);
border: 1px solid var(--gold);
border-radius: var(--radius);
font: 500 var(--fs-body-s) var(--font-sans);
cursor: pointer;
transition: transform var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.chat__knopf .ic {
width: 22px;
height: 22px;
color: var(--gold-bright);
}
.chat__knopf:hover {
background: var(--bg-1);
transform: translateY(var(--hub));
}
.chat__karte {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
width: min(340px, calc(100vw - 2 * var(--container-pad)));
padding: var(--pad-card-eng);
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.chat__karte:not([hidden]) {
display: grid;
gap: var(--flow-1);
}
.chat__titel {
font-family: var(--font-serif);
font-size: var(--fs-block);
margin: 0;
}
.chat__karte p {
margin: 0;
}
.chat__merken {
display: flex;
align-items: center;
gap: calc(var(--flow-1) / 2);
min-height: 44px;
cursor: pointer;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.chat__merken input {
width: 1.1rem;
height: 1.1rem;
margin: 0;
accent-color: var(--gold);
cursor: pointer;
}
.chat__knoepfe {
display: grid;
gap: calc(var(--flow-1) / 2);
}
.chat__knoepfe .btn {
width: 100%;
min-height: 44px;
padding-inline: 16px;
}
@media (min-width: 768px) {
.chat {
position: relative;
right: auto;
bottom: auto;
z-index: auto;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
}
.chat__knopf {
position: relative;
display: grid;
place-items: center;
gap: 0;
width: 44px;
height: 44px;
min-height: 0;
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
color: var(--ivory-70);
transition: color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.chat__knopf .ic {
width: 20px;
height: 20px;
color: currentColor;
}
.chat__knopf:hover {
background: transparent;
transform: none;
}
.chat__karte {
right: calc(100% + 12px);
bottom: 0;
width: min(340px, calc(100vw - 100px));
}
}
@media (min-width: 768px) and (hover: hover) {
.chat__knopf:hover {
color: var(--gold-bright);
background: var(--bg-1);
}
}
@media (max-width: 767px) {
.chat {
bottom: 80px;
}
#superchat-widget-content-root {
bottom: 66px !important;
}
}
.heroc__badge {
margin-top: var(--flow-2);
}
.real__zusatz {
display: block;
font-size: var(--fs-small);
color: var(--ivory-70);
margin-top: 4px;
}
.real-block .leitsaetze {
margin-bottom: var(--flow-3);
}
.plakette {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border: 1px solid var(--gold);
border-radius: var(--radius);
background: rgba(17, 26, 31, 0.92);
color: var(--ivory);
font-size: var(--fs-small);
letter-spacing: 0.02em;
}
.plakette .ic {
width: 20px;
height: 20px;
color: var(--gold-bright);
flex: 0 0 auto;
}
.plakette--media {
position: absolute;
top: 16px;
right: 16px;
z-index: 2;
max-width: calc(100% - 32px);
}
.heroc__media {
position: relative;
}
.einw__karte {
max-width: var(--mass-lesen);
padding: var(--pad-card);
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--grad-flaeche);
}
.einw__karte .ic--lg {
color: var(--gold);
}
.einw__karte h2,
.einw__karte h3 {
margin: 14px 0 0;
font-size: var(--fs-block);
}
.einw__karte > p {
margin: 12px 0 0;
color: var(--ivory-70);
}
.einw__karte .btn-row {
margin-top: var(--flow-2);
}
.einw__merk {
margin: 14px 0 0;
font-size: var(--fs-small);
color: var(--ivory-45);
}
.einw__merk input {
margin-right: 8px;
accent-color: var(--gold);
}
.einw__ziel {
min-height: 480px;
background: #fff;
border-radius: var(--radius);
padding: 12px;
color: #222;
}
.markt-kopf {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: var(--flow-1) var(--flow-2);
margin-bottom: var(--flow-2);
}
.markt-kopf__titel {
margin: 0;
font-size: var(--fs-h3);
}
.markt-kopf__zeile {
margin: calc(var(--flow-1) / 3) 0 0;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.live {
display: inline-flex;
align-items: center;
gap: 0.6em;
padding: 0.35em 0.9em 0.35em 0.75em;
border: 1px solid color-mix(in srgb, var(--live) 55%, transparent);
border-radius: 999px;
color: var(--ivory);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.live__punkt {
position: relative;
width: 0.6em;
height: 0.6em;
border-radius: 50%;
background: var(--live);
animation: live-blinken 1.6s linear infinite;
}
.live__punkt::after {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background: var(--live);
animation: live-puls 1.6s linear infinite;
}
@keyframes live-blinken {
0%, 100% { opacity: 1; }
50% { opacity: 0.35; }
}
@keyframes live-puls {
from { transform: scale(1); opacity: 0.6; }
to { transform: scale(2.8); opacity: 0; }
}
.markt {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--flow-1);
}
.markt__eintrag {
position: relative;
display: grid;
grid-template-columns: 4.25rem minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--flow-2);
padding: var(--flow-1) var(--pad-card) var(--flow-1) var(--flow-1);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
transition: border-color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.markt__datum {
display: grid;
place-items: center;
align-content: center;
aspect-ratio: 1;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-1);
line-height: 1;
}
.markt__tag {
font-family: var(--font-serif);
font-size: var(--fs-h3);
color: var(--ivory);
}
.markt__monat {
margin-top: calc(var(--flow-1) / 4);
font-size: var(--fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--gold);
}
.markt__text {
display: grid;
gap: calc(var(--flow-1) / 3);
min-width: 0;
}
.markt__link {
color: var(--ivory);
text-decoration: none;
font-size: var(--fs-body);
font-weight: 500;
line-height: 1.4;
text-wrap: pretty;
transition: color var(--t-hover) var(--ease-out);
}
.markt__link::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
}
.markt__meta {
color: var(--ivory-70);
font-size: var(--fs-small);
letter-spacing: 0.02em;
}
.markt__pfeil {
display: grid;
place-items: center;
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--line-gold);
border-radius: 50%;
color: var(--gold);
transition: background-color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out),
color var(--t-hover) var(--ease-out);
}
.markt__pfeil::before {
content: '';
width: 7px;
height: 7px;
margin-left: -3px;
border-top: 1px solid currentColor;
border-right: 1px solid currentColor;
transform: rotate(45deg);
}
.markt__eintrag:hover {
border-color: var(--gold);
transform: translateY(var(--hub));
}
.markt__eintrag:hover .markt__link,
.markt__link:focus-visible {
color: var(--gold-bright);
}
.markt__eintrag:hover .markt__pfeil {
background-color: var(--gold);
border-color: var(--gold);
color: var(--ink);
}
.markt__link:focus-visible {
outline: none;
}
.markt__eintrag:has(.markt__link:focus-visible) {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
}
@media (max-width: 600px) {
.markt__eintrag {
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: var(--flow-1);
padding-right: var(--flow-1);
}
.markt__pfeil {
display: none;
}
.markt__tag {
font-size: var(--fs-block);
}
}
@media (prefers-reduced-motion: reduce) {
.live__punkt,
.live__punkt::after {
animation: none;
}
.markt__eintrag,
.video,
.video__buehne img {
transition: none;
}
}
.einw__ziel--leer {
min-height: 0;
background: transparent;
color: var(--ivory-70);
padding: 0;
}
.einw__fehler {
margin: 0;
padding: 18px 20px;
border: 1px solid var(--line);
border-radius: var(--radius);
max-width: var(--mass-lesen);
}
@media (min-width: 768px) {
.chat:has(.chat__karte:not([hidden])) .chat__knopf span {
opacity: 0;
}
}
.video--platzhalter .video__buehne img {
opacity: 0.55;
}
.video--platzhalter .video__bald {
left: 50%;
right: auto;
transform: translate(-50%, -50%);
padding: 8px 14px;
background: rgba(17, 26, 31, 0.86);
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
white-space: nowrap;
}
@media (min-width: 900px) {
.videos .video figcaption strong {
min-height: 2.5em;
}
}
.tile p {
color: var(--ivory);
}
@font-face {
font-family: 'Newsreader';
src: url('/assets/fonts/newsreader/Newsreader-VF.woff2') format('woff2');
font-weight: 200 800;
font-style: normal;
font-stretch: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2013-2014,
U+2018-201A, U+201C-201E, U+2020-2026, U+20AC, U+2212;
}
@font-face {
font-family: 'Newsreader';
src: url('/assets/fonts/newsreader/Newsreader-Italic-VF.woff2') format('woff2');
font-weight: 200 800;
font-style: italic;
font-stretch: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2013-2014,
U+2018-201A, U+201C-201E, U+2020-2026, U+20AC, U+2212;
}
@font-face {
font-family: 'Inter Tight';
src: url('/assets/fonts/intertight/InterTight-VF.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-stretch: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0100-017F, U+0180-024F, U+2013-2014,
U+2018-201A, U+201C-201E, U+2020-2026, U+20AC, U+2212;
}
@font-face {
font-family: 'Newsreader Fallback';
src: local('Georgia');
size-adjust: 95.98%;
ascent-override: 76.58%;
descent-override: 27.61%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Newsreader Fallback';
src: local('Georgia Italic'), local('Georgia-Italic');
font-style: italic;
size-adjust: 84%;
ascent-override: 82.29%;
descent-override: 29.67%;
line-gap-override: 0%;
}
@font-face {
font-family: 'Inter Tight Fallback';
src: local('Arial');
size-adjust: 95.17%;
ascent-override: 101.79%;
descent-override: 25.34%;
line-gap-override: 0%;
}
.app-badges {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.app-badge {
display: inline-flex;
align-items: center;
gap: 10px;
height: 48px;
padding-inline: 14px;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius);
background: #000;
color: #fff;
font-family: var(--font-sans);
text-decoration: none;
transition:
background-color var(--t-hover) var(--ease-out),
border-color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out);
}
.app-badge__logo {
width: 24px;
height: 24px;
flex: none;
display: block;
}
.app-badge__text {
display: grid;
gap: 2px;
}
.app-badge__klein {
font-size: var(--fs-small);
line-height: 1;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.78);
}
.app-badge__gross {
font-size: var(--fs-body);
line-height: 1.1;
font-weight: 500;
letter-spacing: 0.01em;
color: #fff;
}
.app-badge:hover,
.app-badge:focus-visible {
background: #111;
border-color: var(--line-control);
transform: translateY(var(--hub));
}
.app-badges--klein .app-badge {
height: 44px;
padding-inline: 12px;
gap: 9px;
}
.app-badges--klein .app-badge__logo {
width: 20px;
height: 20px;
}
.app-badges--klein .app-badge__gross {
font-size: var(--fs-body-s);
}
@media (prefers-reduced-motion: reduce) {
.app-badge {
transition: none;
}
.app-badge:hover,
.app-badge:focus-visible {
transform: none;
}
}
.block {
position: relative;
min-width: 0;
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
}
.section--alt .block,
.section--panel .block {
background: var(--bg-0);
}
.block--rahmen,
.section--alt .block--rahmen {
background: transparent;
}
.block--hinweis {
border-color: var(--gold);
}
.block--hinweis .block__text,
.block--hinweis .block__inhalt > p {
max-width: none;
}
.block__kopf {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: var(--flow-2);
}
.block__ic {
display: grid;
place-items: center;
width: 44px;
height: 44px;
flex: none;
border: 1px solid var(--gold);
border-radius: var(--radius);
color: var(--gold-bright);
}
.block__ic .ic {
width: 22px;
height: 22px;
}
.block__titel {
margin: 0;
font-size: var(--fs-block);
}
.block__text {
margin: 0;
color: var(--ivory-70);
max-width: var(--mass-lesen);
}
.block__text + .block__inhalt {
margin-top: var(--flow-2);
}
.block__inhalt > * + * {
margin-top: var(--flow-2);
}
.raster-2,
.raster-3 {
display: grid;
gap: var(--flow-2);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.raster-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 900px) {
.raster-3 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.raster-2,
.raster-3 {
grid-template-columns: 1fr;
}
}
.faktenliste--zwei {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 var(--flow-3);
}
@media (max-width: 767px) {
.faktenliste--zwei {
grid-template-columns: 1fr;
}
}
.split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--flow-4);
align-items: center;
}
.split--umgekehrt .split__media {
order: -1;
}
.split__text,
.split__media {
min-width: 0;
}
.split--strecke {
align-items: stretch;
}
.split--strecke .split__media {
display: flex;
}
.split--strecke .split__media picture {
display: flex;
width: 100%;
}
.split--strecke .split__media img {
height: 100%;
object-fit: cover;
}
.split__titel {
margin: 0 0 var(--flow-2);
font-size: var(--fs-h3);
}
.split__titel--h1 {
font-size: var(--fs-h1);
line-height: 1.02;
letter-spacing: -0.02em;
text-wrap: balance;
}
.split__cta {
margin-top: var(--flow-2);
}
.split__media img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
@media (max-width: 900px) {
.split {
grid-template-columns: 1fr;
gap: var(--flow-3);
}
.split--umgekehrt .split__media {
order: 0;
}
}
.kennzahlen {
display: grid;
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
}
.section--alt .kennzahlen,
.section--panel .kennzahlen {
background: var(--bg-0);
}
.kennzahlen > div {
min-width: 0;
padding: var(--pad-card);
}
.kennzahlen > div + div {
border-left: 1px solid var(--line);
}
.kennzahlen__ic {
display: block;
margin-bottom: 14px;
color: var(--gold);
}
.kennzahlen__ic .ic {
width: 26px;
height: 26px;
}
.kennzahlen__wert {
display: block;
font-size: clamp(2rem, 3.2vw, 2.8rem);
font-weight: 500;
line-height: 1.05;
letter-spacing: -0.02em;
color: var(--gold-bright);
}
.kennzahlen__suffix {
font-size: 0.6em;
margin-left: 0.15em;
}
.kennzahlen__label {
display: block;
margin-top: 8px;
font-weight: 500;
}
.kennzahlen p {
margin: 8px 0 0;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
@media (max-width: 767px) {
.kennzahlen {
grid-template-columns: 1fr;
}
.kennzahlen > div + div {
border-left: 0;
border-top: 1px solid var(--line);
}
}
.tabs__leiste {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-bottom: var(--flow-3);
border-bottom: 1px solid var(--line);
}
.tabs__tab {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 48px;
padding: 10px 18px;
margin-bottom: -1px;
background: none;
border: 0;
border-bottom: 2px solid transparent;
color: var(--ivory-70);
font: 500 var(--fs-body-s) var(--font-sans);
cursor: pointer;
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.tabs__tab .ic {
width: 18px;
height: 18px;
color: var(--gold);
}
.tabs__tab:hover {
color: var(--ivory);
}
.tabs__tab[aria-selected='true'] {
color: var(--ivory);
border-bottom-color: var(--gold);
}
.tabs__tab:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.tabs__panel[hidden] {
display: none;
}
.tabs__panel:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 6px;
}
.tabs__kopf,
.zwischenkopf {
margin-bottom: var(--flow-3);
}
.tabs__kopf h3,
.zwischenkopf h3 {
margin: 0;
font-size: var(--fs-h3);
line-height: 1.15;
}
.tabs__kopf p,
.zwischenkopf p {
margin: var(--flow-1) 0 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
}
.tabs__kopf h3 em,
.zwischenkopf h3 em,
.block__titel em {
color: var(--gold);
font-style: normal;
}
.tabs--seite .tabs__leiste {
flex-direction: column;
gap: 2px;
border-bottom: 0;
}
.tabs--seite .tabs__tab {
justify-content: flex-start;
text-align: left;
padding: 12px 18px 12px 0;
margin: 0;
border-bottom: 0;
border-left: 2px solid transparent;
padding-left: 14px;
}
.tabs--seite .tabs__tab[aria-selected='true'] {
border-left-color: var(--gold);
}
.tabs--seite .tabs__tab .ic {
flex: none;
}
@media (min-width: 900px) {
.tabs--seite {
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(0, 2.2fr);
gap: var(--flow-3);
align-items: stretch;
}
.tabs--seite .tabs__leiste {
justify-content: flex-start;
}
.tabs--seite .tabs__leiste {
margin: 0;
border-right: 1px solid var(--line);
}
.tabs--seite .tabs__tab {
padding-left: 0;
margin-right: -1px;
border-left: 0;
border-right: 2px solid transparent;
}
.tabs--seite .tabs__tab[aria-selected='true'] {
border-left-color: transparent;
border-right-color: var(--gold);
}
.tabs--seite .tabs__panel {
grid-column: 2;
grid-row: 1;
}
}
.tabs__panel-titel {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.js .tabs__panel {
animation: tab-ein var(--t-enter) var(--ease-out);
}
@keyframes tab-ein {
from {
opacity: 0;
translate: 0 6px;
}
}
html:not(.js) .tabs__leiste {
display: none;
}
html:not(.js) .tabs__panel-titel {
position: static;
width: auto;
height: auto;
clip: auto;
white-space: normal;
font-size: var(--fs-block);
margin: 0 0 var(--flow-2);
}
html:not(.js) .tabs__panel + .tabs__panel {
margin-top: var(--flow-3);
}
@media (prefers-reduced-motion: reduce) {
.js .tabs__panel {
animation: none;
}
}
.cta-bande {
position: relative;
overflow: clip;
isolation: isolate;
border-top: 1px solid var(--line-strong);
}
.cta-bande__bild {
position: absolute;
inset: 0;
z-index: -1;
}
.cta-bande__bild img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0.55;
scale: 1.12;
}
.cta-bande__bild::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(17, 26, 31, 0.94) 0%, rgba(17, 26, 31, 0.82) 50%, rgba(17, 26, 31, 0.6) 100%);
}
.cta-bande__innen {
padding-block: var(--sect-y);
}
.cta-bande__text {
max-width: var(--mass-weit);
}
.cta-bande h2 {
margin: 0 0 var(--flow-2);
font-size: var(--fs-h2);
}
.cta-bande p {
margin: 0 0 var(--flow-3);
font-size: var(--fs-lead);
color: var(--ivory);
max-width: var(--mass-lesen);
}
.cta-bande .cta-bande__nachsatz {
margin: var(--flow-2) 0 0;
max-width: var(--mass-weit);
font-size: var(--fs-small);
color: var(--ivory-45);
}
.cta-bande__nachsatz a {
position: relative;
display: inline-block;
padding-block: calc(var(--flow-1) / 2);
color: var(--ivory-70);
text-underline-offset: 3px;
transition: color var(--t-hover) var(--ease-out);
}
.cta-bande__nachsatz a:hover,
.cta-bande__nachsatz a:focus-visible {
color: var(--gold-bright);
}
@supports (animation-timeline: view()) {
.cta-bande__bild img {
animation: bande-parallax linear both;
animation-timeline: view();
animation-range: entry 0% exit 100%;
}
}
@keyframes bande-parallax {
from {
translate: 0 -6%;
}
to {
translate: 0 6%;
}
}
@media (prefers-reduced-motion: reduce) {
.cta-bande__bild img {
animation: none;
}
}
.fortschritt {
position: fixed;
top: var(--nav-h, 76px);
left: 0;
right: 0;
height: 2px;
z-index: 99;
pointer-events: none;
}
.fortschritt i {
display: block;
height: 100%;
background: var(--gold);
transform-origin: left;
transform: scaleX(var(--p, 0));
}
@supports (animation-timeline: scroll()) {
.fortschritt i {
animation: fortschritt linear both;
animation-timeline: scroll(root);
}
}
@keyframes fortschritt {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
.heroc__media--kasten {
border-top: 0;
overflow: visible;
background: transparent;
align-self: center;
}
.heroc__media--kasten::after {
display: none;
}
.strategien {
list-style: none;
margin: 0;
padding: 0;
}
.strategien li {
display: grid;
grid-template-columns: 26px 1fr;
gap: 14px;
align-items: center;
padding: var(--flow-1) 0;
border-top: 1px solid var(--line);
}
.strategien li:first-child {
border-top: 0;
padding-top: 0;
}
.strategien .ic {
width: 26px;
height: 26px;
color: var(--gold);
}
.strategien strong {
display: block;
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-block);
line-height: 1.2;
}
.strategien strong + span,
.strategien span > span {
display: block;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.strategien + .plakette {
margin-top: var(--flow-2);
}
.opener--zwei {
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
gap: var(--flow-4);
align-items: center;
}
.opener--zwei .opener__kopf {
display: block;
}
.opener--zwei .opener__kopf h1 {
margin: 0;
}
.opener--zwei .tiles-label {
margin-top: var(--flow-3);
}
.opener__vertrauen .trust-avatars {
flex-wrap: wrap;
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.opener__vertrauen .trust-avatars__rechts {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--flow-2);
width: 100%;
margin-top: var(--flow-2);
padding-top: var(--flow-2);
border-top: 1px solid var(--line);
}
.opener__vertrauen .bafin-siegel {
margin-right: 0;
width: 96px;
height: 96px;
}
.fakten {
list-style: none;
margin: var(--flow-2) 0 0;
padding: var(--flow-2) 0 0;
border-top: 1px solid var(--line);
display: grid;
gap: 12px;
}
.fakten li {
display: flex;
gap: 12px;
align-items: flex-start;
}
.fakten .ic {
flex: none;
width: 22px;
height: 22px;
margin-top: 4px;
color: var(--gold);
}
.fakten strong {
display: block;
font-family: var(--font-serif);
font-weight: 500;
font-size: var(--fs-block);
line-height: 1.15;
color: var(--gold-bright);
}
.fakten li > span {
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
@media (max-width: 900px) {
.opener--zwei {
grid-template-columns: 1fr;
gap: var(--flow-3);
}
}
.split .kuchen {
grid-template-columns: 1fr;
gap: var(--flow-2);
justify-items: start;
}
.split .kuchen__svg {
width: min(100%, 280px);
}
.cta-bande__sig {
display: block;
width: 200px;
height: auto;
margin-top: var(--flow-2);
opacity: 0.92;
}
.opener__vertrauen .block {
overflow: hidden;
}
.opener__vertrauen .block::after {
content: '';
position: absolute;
right: -90px;
bottom: -90px;
width: 360px;
height: 360px;
background: url('/assets/img/brand/icon-knoten-gold-512w.png') center / contain no-repeat;
opacity: 0.07;
pointer-events: none;
}
.stoerer {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--flow-2);
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-0);
color: var(--ivory);
text-decoration: none;
transition: border-color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.stoerer__ic {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--gold);
border-radius: var(--radius);
color: var(--gold-bright);
}
.stoerer__ic .ic {
width: 22px;
height: 22px;
}
.stoerer__text {
display: grid;
gap: 6px;
min-width: 0;
}
.stoerer__titel {
margin: 0;
font-size: var(--fs-h3);
}
.stoerer__zeile {
margin: 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.stoerer__go {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 500;
white-space: nowrap;
}
.stoerer__go .ic {
width: 18px;
height: 18px;
color: var(--gold-bright);
transition: transform var(--t-hover) var(--ease-out);
}
.stoerer:hover,
.stoerer:focus-visible {
border-color: var(--gold);
transform: translateY(var(--hub));
}
.stoerer:hover .stoerer__go .ic,
.stoerer:focus-visible .stoerer__go .ic {
transform: translateX(4px);
}
@media (max-width: 767px) {
.stoerer {
grid-template-columns: 1fr;
row-gap: var(--flow-1);
justify-items: start;
}
}
@media (prefers-reduced-motion: reduce) {
.stoerer,
.stoerer__go .ic {
transition: none;
}
.stoerer:hover,
.stoerer:focus-visible {
transform: none;
}
}
.stoerer--bild {
position: relative;
isolation: isolate;
overflow: hidden;
grid-template-columns: 44px minmax(0, min(var(--mass-lesen), 50%));
align-items: start;
align-content: center;
row-gap: var(--flow-2);
min-height: clamp(320px, 34vw, 440px);
padding: clamp(var(--pad-card), 5vw, var(--flow-4));
}
.stoerer__bild {
position: absolute;
inset: 0;
z-index: -1;
}
.stoerer__bild img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 75% 35%;
transition: transform var(--t-erklaer) var(--ease-out);
}
.stoerer__bild::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(
90deg,
color-mix(in srgb, var(--bg-0) 97%, transparent) 0%,
color-mix(in srgb, var(--bg-0) 90%, transparent) 45%,
color-mix(in srgb, var(--bg-0) 30%, transparent) 100%
);
}
.stoerer--bild:hover .stoerer__bild img {
transform: scale(var(--zoom));
}
.stoerer--bild .stoerer__titel {
font-size: var(--fs-h2);
}
.stoerer--bild .stoerer__zeile {
font-size: var(--fs-body);
}
.stoerer--bild .stoerer__go {
grid-column: 2;
justify-self: start;
}
.stoerer--bild .stoerer__go .ic {
color: currentColor;
}
.stoerer--bild:hover .stoerer__go,
.stoerer--bild:focus-visible .stoerer__go {
background-image: var(--grad-gold-hover);
border-color: var(--gold-bright);
}
@media (max-width: 1023px) {
.stoerer--bild {
grid-template-columns: minmax(0, 1fr);
align-content: end;
min-height: clamp(460px, 125vw, 600px);
}
.stoerer--bild .stoerer__ic,
.stoerer--bild .stoerer__text,
.stoerer--bild .stoerer__go {
grid-column: 1;
}
.stoerer--bild .stoerer__go {
justify-self: stretch;
}
.stoerer__bild img {
object-position: 70% 20%;
}
.stoerer__bild::after {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--bg-0) 25%, transparent) 0%,
color-mix(in srgb, var(--bg-0) 88%, transparent) 50%,
color-mix(in srgb, var(--bg-0) 97%, transparent) 100%
);
}
}
@media (prefers-reduced-motion: reduce) {
.stoerer__bild img {
transition: none;
}
}
.mehr {
margin-top: var(--flow-1);
}
.mehr > summary {
display: inline-flex;
align-items: center;
gap: var(--flow-1);
min-height: 44px;
cursor: pointer;
list-style: none;
color: var(--ivory);
font-size: var(--fs-body-s);
font-weight: 500;
letter-spacing: 0.01em;
transition: color var(--t-hover) var(--ease-out);
}
.mehr > summary::-webkit-details-marker {
display: none;
}
.mehr > summary::marker {
content: '';
}
.mehr[open] .mehr__zu,
.mehr:not([open]) .mehr__auf {
display: none;
}
.mehr__plus {
flex: none;
display: grid;
place-items: center;
width: 1.85rem;
height: 1.85rem;
border: 1px solid var(--gold);
border-radius: 50%;
color: var(--gold);
transition: transform var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out),
border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.mehr__plus svg {
display: block;
width: 0.95rem;
height: 0.95rem;
}
.mehr[open] .mehr__plus {
transform: rotate(45deg);
background-color: var(--gold);
color: var(--ink);
}
@media (hover: hover) {
.mehr > summary:hover {
color: var(--gold-bright);
}
.mehr > summary:hover .mehr__plus {
border-color: var(--gold-bright);
color: var(--gold-bright);
}
.mehr[open] > summary:hover .mehr__plus {
background-color: var(--gold-bright);
color: var(--ink);
}
}
.mehr > summary:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 4px;
border-radius: var(--radius);
}
.block .mehr,
.schritt__karte .mehr,
.plan .mehr {
border-top: 1px solid var(--line);
}
.plan .mehr {
margin-top: var(--flow-1);
}
.schritt__karte .mehr {
margin-top: auto;
}
.block .mehr > summary,
.schritt__karte .mehr > summary,
.plan .mehr > summary {
display: flex;
justify-content: space-between;
width: 100%;
padding-top: calc(var(--flow-1) / 2);
text-align: left;
}
.mehr__inhalt {
padding: calc(var(--flow-1) / 2) 0 calc(var(--flow-1) / 2);
text-align: left;
}
.mehr__inhalt > * + * {
margin-top: var(--flow-1);
}
.mehr__inhalt > :first-child {
margin-top: 0;
}
.mehr[open] .mehr__inhalt {
animation: mehr-ein var(--t-erklaer) var(--ease-out);
}
@keyframes mehr-ein {
from {
opacity: 0;
transform: translateY(calc(var(--hub) * -2));
}
to {
opacity: 1;
transform: none;
}
}
@supports (interpolate-size: allow-keywords) {
.mehr::details-content {
block-size: 0;
overflow-y: clip;
transition: block-size var(--t-erklaer) var(--ease-out), content-visibility var(--t-erklaer) allow-discrete;
}
.mehr[open]::details-content {
block-size: auto;
}
}
[data-gleich='an'] {
align-items: start;
}
@media (prefers-reduced-motion: reduce) {
.mehr > summary,
.mehr__plus,
.mehr::details-content {
transition: none;
}
.mehr[open] .mehr__inhalt {
animation: none;
}
}
@media (max-width: 767px) {
[data-stapel='an'] > * {
position: sticky;
top: calc(var(--stapel-oben, 89px) + var(--i, 0) * 10px);
box-shadow: var(--schatten-stapel);
}
[data-stapel='an'] > .ist-offen {
position: relative;
top: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.mehr > summary,
.mehr > summary::after,
.mehr::details-content {
transition: none;
}
}
.ki-marke {
position: absolute;
top: var(--flow-1);
right: var(--flow-1);
z-index: 2;
padding: 0.3em 0.75em;
border: 1px solid var(--line-gold);
border-radius: 999px;
background: color-mix(in srgb, var(--bg-0) 78%, transparent);
color: var(--ivory);
font-size: var(--fs-small);
font-weight: 500;
line-height: 1.3;
letter-spacing: 0.02em;
white-space: nowrap;
pointer-events: none;
}
.stoerer__bild .ki-marke {
z-index: 1;
}
.cta-bande__innen {
position: relative;
}
.cta-bande__innen > .ki-marke {
right: var(--container-pad);
}
.erklaer {
display: grid;
gap: var(--flow-2);
}
.erklaer__bild {
border-top: 1px solid var(--gold);
border-radius: var(--radius);
background: var(--bg-2);
overflow: hidden;
}
.erklaer__bild picture,
.erklaer__bild img {
display: block;
width: 100%;
height: auto;
}
.erklaer__text > * + * {
margin-top: var(--flow-1);
}
.erklaer__text p {
max-width: var(--mass-lesen);
}
.erklaer__text a:not(.linkline) {
color: var(--ivory);
text-decoration: underline;
text-underline-offset: 3px;
}
.erklaer__punkt strong {
display: block;
color: var(--ivory);
font-weight: 500;
}
.erklaer__liste {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
max-width: var(--mass-lesen);
}
.erklaer__liste li {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 12px;
align-items: start;
}
.erklaer__liste .ic {
width: 18px;
height: 18px;
margin-top: 3px;
color: var(--gold);
}
@media (min-width: 600px) {
.erklaer--hoch {
grid-template-columns: 220px minmax(0, 1fr);
gap: var(--flow-3);
align-items: start;
}
}
.erklaer--hoch .erklaer__bild {
max-width: 220px;
border-radius: 18px;
}
.faq {
border-bottom: 1px solid var(--line-gold);
}
.faq__item {
border-top: 1px solid var(--line-gold);
}
.faq__frage {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--flow-2);
min-height: 3.5rem;
padding: var(--flow-1) 0;
cursor: pointer;
list-style: none;
font-family: var(--font-serif);
font-size: var(--fs-block);
font-weight: 500;
font-variation-settings: 'opsz' 28;
line-height: 1.3;
color: var(--ivory);
transition: color var(--t-hover) var(--ease-out);
}
.faq__frage::-webkit-details-marker {
display: none;
}
.faq__frage::marker {
content: '';
}
.faq__frage:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
border-radius: var(--radius);
}
@media (hover: hover) {
.faq__frage:hover {
color: var(--gold-bright);
}
.faq__frage:hover .faq__plus {
border-color: var(--gold-bright);
color: var(--gold-bright);
}
.faq__item[open] .faq__frage:hover .faq__plus {
color: var(--ink);
}
}
.faq__plus {
flex: none;
width: 1.85rem;
height: 1.85rem;
display: grid;
place-items: center;
border-radius: 50%;
border: 1px solid var(--gold);
color: var(--gold);
transition: transform var(--t-hover) var(--ease-out),
background-color var(--t-hover) var(--ease-out),
border-color var(--t-hover) var(--ease-out),
color var(--t-hover) var(--ease-out);
}
.faq__plus svg {
width: 0.95rem;
height: 0.95rem;
display: block;
}
.faq__item[open] .faq__plus {
transform: rotate(45deg);
background-color: var(--gold);
border-color: var(--gold);
color: var(--ink);
}
.faq__antwort {
max-width: var(--mass-lesen);
padding-bottom: var(--flow-2);
color: var(--ivory-70);
font-size: var(--fs-body);
}
.faq__antwort p {
text-wrap: pretty;
}
.faq__antwort p + p {
margin-top: var(--flow-1);
}
@supports (interpolate-size: allow-keywords) {
:root {
interpolate-size: allow-keywords;
}
.faq__item::details-content {
block-size: 0;
overflow-y: clip;
transition: block-size var(--t-erklaer) var(--ease-out),
content-visibility var(--t-erklaer) allow-discrete;
}
.faq__item[open]::details-content {
block-size: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.faq__frage,
.faq__plus,
.faq__item::details-content {
transition: none;
}
}
.site-footer {
border-top: 1px solid var(--line);
padding-block: clamp(48px, 7vw, 80px) 110px;
font-size: var(--fs-body-s);
background: linear-gradient(180deg, var(--bg-0) 0%, var(--dehm-dark) 100%);
color: var(--ivory-70);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1.92fr 2.24fr 2.1fr 1.05fr 2.7fr;
gap: var(--flow-3) var(--flow-2);
padding-bottom: var(--flow-3);
border-bottom: 1px solid var(--line);
}
.site-footer__spalte {
min-width: 0;
}
.site-footer__kopf {
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ivory-45);
margin: 0 0 10px;
}
.site-footer__logo {
display: inline-block;
}
.site-footer__logo img {
height: 54px;
width: auto;
max-width: 100%;
object-fit: contain;
object-position: left center;
display: block;
}
.site-footer__claim {
margin: 18px 0 0;
color: var(--ivory);
font-family: var(--font-serif);
font-size: var(--fs-block);
line-height: 1.3;
}
.site-footer__recht-hinweis {
margin: var(--flow-1) 0 0;
font-size: var(--fs-small);
color: var(--ivory-45);
max-width: var(--mass-eng);
line-height: 1.6;
}
.site-footer .site-footer__vk {
width: auto;
min-height: 44px;
margin-top: var(--flow-2);
padding: 0 14px;
border-color: var(--line-gold);
color: var(--ivory);
white-space: nowrap;
}
.site-footer__vk .ic {
width: 18px;
height: 18px;
flex: none;
color: var(--gold-bright);
}
.site-footer .site-footer__vk,
.site-footer .app-badge,
.site-footer .credit-badge {
transition:
background-color var(--t-hover) var(--ease-out),
border-color var(--t-hover) var(--ease-out),
color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out);
}
.site-footer .site-footer__vk:hover,
.site-footer .site-footer__vk:focus-visible,
.site-footer .app-badge:hover,
.site-footer .app-badge:focus-visible,
.site-footer .credit-badge:hover,
.site-footer .credit-badge:focus-visible {
border-color: var(--gold);
transform: translateY(var(--hub));
}
.site-footer .site-footer__vk:hover,
.site-footer .site-footer__vk:focus-visible {
color: var(--ivory);
}
.site-footer ul {
list-style: none;
margin: 0;
padding: 0;
}
.site-footer a {
color: var(--ivory-70);
text-decoration: none;
overflow-wrap: anywhere;
transition: color var(--t-hover) var(--ease-out);
}
.site-footer__liste a,
.site-footer__kontakt a,
.site-footer__folgen a,
.site-footer__recht a:not(.credit-badge) {
position: relative;
display: inline-flex;
align-items: center;
min-height: 44px;
line-height: 1.45;
}
.site-footer__liste a::after,
.site-footer__kontakt a::after,
.site-footer__folgen a::after,
.site-footer__recht a:not(.credit-badge)::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 9px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-enter) var(--ease-out);
}
.site-footer a:hover,
.site-footer a:focus-visible {
color: var(--ivory);
}
.site-footer__liste a:hover::after,
.site-footer__liste a:focus-visible::after,
.site-footer__kontakt a:hover::after,
.site-footer__kontakt a:focus-visible::after,
.site-footer__folgen a:hover::after,
.site-footer__folgen a:focus-visible::after,
.site-footer__recht a:not(.credit-badge):hover::after,
.site-footer__recht a:not(.credit-badge):focus-visible::after {
transform: scaleX(1);
}
.site-footer__kontakt a {
display: inline-grid;
grid-template-columns: 20px auto;
align-items: center;
column-gap: 12px;
}
.site-footer__kontakt .ic {
width: 20px;
height: 20px;
color: var(--gold);
align-self: center;
}
.site-footer__kontakt a:hover .ic,
.site-footer__kontakt a:focus-visible .ic {
color: var(--gold-bright);
}
.site-footer__kontakt .site-footer__ort {
align-items: start;
padding-block: 10px;
}
.site-footer__kontakt .site-footer__ort .ic {
margin-top: 2px;
}
.site-footer__kontakt .site-footer__ort::after {
display: none;
}
.site-footer__liste--zwei {
column-count: 2;
column-gap: var(--flow-2);
}
.site-footer__liste--zwei li {
break-inside: avoid;
}
.site-footer__app-text {
margin: 0;
max-width: none;
color: var(--ivory-70);
line-height: 1.6;
}
.site-footer__apps {
margin-top: var(--flow-2);
}
.site-footer__meta {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--flow-2);
padding-top: var(--flow-1);
}
.site-footer__folgen {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 18px;
margin: 0;
max-width: none;
}
.site-footer__folgen > span {
font-family: var(--font-sans);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.site-footer__folgen a {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.site-footer__folgen .ic {
width: 18px;
height: 18px;
color: var(--gold);
}
.site-footer__folgen a:hover .ic,
.site-footer__folgen a:focus-visible .ic {
color: var(--gold-bright);
}
.site-footer__copy {
margin: 0;
font-size: var(--fs-small);
color: var(--ivory-45);
}
.site-footer__recht {
justify-self: end;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0 22px;
font-size: var(--fs-small);
}
.credit-badge {
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 44px;
padding: 8px 14px;
border: 1px solid rgba(244, 239, 230, 0.14);
border-radius: var(--radius);
background: #111411;
color: #f4efe6;
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fs-small);
line-height: 1;
transition:
border-color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out);
}
.credit-badge svg {
width: 16px;
height: 16px;
flex: none;
display: block;
}
.site-footer .credit-badge:hover,
.site-footer .credit-badge:focus-visible {
color: #f4efe6;
}
@media (max-width: 1365px) and (min-width: 1024px) {
.site-footer__grid {
grid-template-columns: 2.2fr 2.4fr 2.3fr 1.1fr;
}
.site-footer__app {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
column-gap: var(--flow-3);
padding-top: var(--flow-2);
border-top: 1px solid var(--line);
}
.site-footer__app .site-footer__kopf,
.site-footer__app-text {
grid-column: 1;
}
.site-footer__app .site-footer__apps {
grid-column: 2;
grid-row: 1 / span 2;
margin-top: 0;
}
}
@media (max-width: 1023px) {
.site-footer__grid {
grid-template-columns: 1fr 1fr;
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__meta {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--flow-1);
}
.site-footer__folgen > span {
flex-basis: 100%;
}
.site-footer__recht {
justify-self: start;
}
}
@media (max-width: 767px) {
.site-footer__grid {
grid-template-columns: 1fr;
}
.site-footer__brand {
grid-column: auto;
}
.site-footer__folgen {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
column-gap: var(--flow-2);
}
.site-footer__folgen > span {
grid-column: 1 / -1;
}
.site-footer__recht {
gap: 0 18px;
}
}
@media (prefers-reduced-motion: reduce) {
.site-footer a::after,
.site-footer .site-footer__vk,
.site-footer .app-badge,
.site-footer .credit-badge,
.credit-badge {
transition: none;
}
.site-footer .site-footer__vk:hover,
.site-footer .site-footer__vk:focus-visible,
.site-footer .app-badge:hover,
.site-footer .app-badge:focus-visible,
.site-footer .credit-badge:hover,
.site-footer .credit-badge:focus-visible {
transform: none;
}
}
.lightbox__knopf {
display: block;
width: 100%;
padding: 0;
border: 0;
background: none;
color: inherit;
cursor: zoom-in;
font: inherit;
text-align: inherit;
}
.lightbox__knopf {
position: relative;
}
.lightbox__lupe {
position: absolute;
top: 12px;
right: 12px;
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(17, 26, 31, 0.72);
border: 1px solid var(--line-gold);
color: var(--ivory);
pointer-events: none;
transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out), background var(--t-hover) var(--ease-out);
}
.lightbox__lupe .ic {
width: 18px;
height: 18px;
}
.lightbox__knopf:hover .lightbox__lupe {
border-color: var(--gold);
color: var(--gold-bright);
background: rgba(17, 26, 31, 0.86);
}
.lightbox__knopf:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.lightbox {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
height: 100svh;
max-width: none;
max-height: none;
margin: 0;
padding: 0;
border: 0;
background: transparent;
color: var(--ivory);
overflow: hidden;
}
.lightbox::backdrop {
background: rgba(17, 26, 31, 0.9);
}
.lightbox[open] {
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
gap: var(--flow-2);
padding: clamp(16px, 4vh, 40px) var(--container-pad);
animation: lightbox-ein var(--t-enter) var(--ease-out);
}
@keyframes lightbox-ein {
from {
opacity: 0;
transform: scale(0.98);
}
}
.lightbox__grund {
position: absolute;
inset: -8%;
z-index: -1;
background-size: cover;
background-position: center;
filter: blur(46px) saturate(120%) brightness(0.35);
opacity: 0.6;
pointer-events: none;
}
.lightbox__zu {
position: absolute;
top: clamp(12px, 3vh, 28px);
right: var(--container-pad);
z-index: 2;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-control);
background: rgba(17, 26, 31, 0.7);
color: var(--ivory);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.lightbox__zu:hover,
.lightbox__pfeil:hover {
border-color: var(--gold);
color: var(--gold-bright);
}
.lightbox__zu .ic,
.lightbox__pfeil .ic {
width: 20px;
height: 20px;
}
.lightbox__buehne {
position: relative;
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 44px;
align-items: center;
gap: var(--flow-1);
min-height: 0;
}
.lightbox__bild {
margin: 0;
min-height: 0;
height: 100%;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
justify-items: center;
gap: 12px;
}
.lightbox__bild img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
border-radius: var(--radius);
box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line-gold);
}
.lightbox__zeile {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px 18px;
font-size: var(--fs-small);
color: var(--ivory-70);
text-align: center;
}
.lightbox__zaehler {
font-variant-numeric: tabular-nums;
color: var(--gold);
}
.lightbox__pfeil {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--line-control);
background: rgba(17, 26, 31, 0.7);
color: var(--ivory);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.lightbox--einzel .lightbox__pfeil {
visibility: hidden;
}
.lightbox__thumbs {
display: flex;
justify-content: center;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
padding: 4px;
}
.lightbox__thumbs::-webkit-scrollbar {
display: none;
}
.lightbox__thumb {
flex: 0 0 auto;
width: 56px;
height: 56px;
padding: 0;
border: 2px solid transparent;
border-radius: 6px;
overflow: hidden;
background: var(--bg-2);
opacity: 0.55;
cursor: pointer;
transition: opacity var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.lightbox__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.lightbox__thumb:hover,
.lightbox__thumb.ist-aktiv {
opacity: 1;
}
.lightbox__thumb.ist-aktiv {
border-color: var(--gold);
}
.lightbox__thumb:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
html.lightbox-offen {
overflow: hidden;
}
@media (max-width: 600px) {
.lightbox[open] {
padding-inline: 8px;
}
.lightbox__buehne {
grid-template-columns: minmax(0, 1fr);
}
.lightbox__pfeil {
position: absolute;
bottom: 0;
z-index: 1;
}
.lightbox__pfeil--zurueck {
left: 0;
}
.lightbox__pfeil--weiter {
right: 0;
}
.lightbox__bild {
padding-bottom: 52px;
}
.lightbox__thumb {
width: 48px;
height: 48px;
}
}
@media (prefers-reduced-motion: reduce) {
.lightbox[open] {
animation: none;
}
}
.nav-liste {
list-style: none;
margin: 0;
padding: 0;
}
.nav-punkt {
position: static;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 4px;
min-height: 44px;
padding: 8px 10px;
border: 0;
background: none;
font-family: var(--font-sans);
font-size: var(--fs-body-s);
font-weight: 500;
line-height: 1.3;
color: var(--ivory);
text-decoration: none;
white-space: nowrap;
cursor: pointer;
position: relative;
transition: color var(--t-hover) var(--ease-out);
}
.nav-link::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 1px;
background: var(--gold);
transform: scaleX(0);
transform-origin: left;
transition: transform var(--t-hover) var(--ease-out);
}
.nav-link:hover {
color: var(--gold-bright);
}
.nav-link:hover::after,
.nav-link[aria-current='page']::after,
.nav-punkt.ist-offen > .nav-link::after {
transform: scaleX(1);
}
.nav-link[aria-current='page'],
.nav-punkt.ist-offen > .nav-knopf {
color: var(--gold-bright);
}
.nav-pfeil {
width: 14px;
height: 14px;
color: var(--gold);
transition: transform var(--t-hover) var(--ease-out);
}
.nav-punkt.ist-offen > .nav-knopf .nav-pfeil {
transform: rotate(180deg);
}
.nav-aktionen {
display: flex;
align-items: center;
gap: 10px;
}
.site-nav .btn {
min-height: 44px;
padding: 10px 18px;
}
.site-nav a.btn--gold,
.site-nav a.btn--gold:hover {
color: var(--ink);
}
.nav-fh {
font-size: var(--fs-body-s);
font-weight: 500;
line-height: 1.3;
color: var(--ivory);
text-decoration: none;
white-space: nowrap;
transition: color var(--t-hover) var(--ease-out);
}
.nav-fh:hover,
.nav-fh[aria-current='page'] {
color: var(--gold-bright);
}
.site-logo:focus-visible,
.nav-toggle:focus-visible,
.nav-link:focus-visible,
.nav-fh:focus-visible,
.nav-meta a:focus-visible {
border-radius: var(--radius);
}
.mega__eintrag {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 10px 12px;
border-radius: var(--radius);
color: var(--ivory);
text-decoration: none;
transition: background var(--t-hover) var(--ease-out);
}
.mega__ic {
width: 22px;
height: 22px;
color: var(--gold);
margin-top: 2px;
}
.mega__wort strong {
display: block;
font-size: var(--fs-body-s);
font-weight: 600;
line-height: 1.35;
}
.mega__wort span {
display: block;
margin-top: 2px;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--ivory-70);
}
@media (hover: hover) {
.mega__eintrag:hover {
background: var(--bg-1);
}
.mega__eintrag:hover .mega__wort strong {
color: var(--gold-bright);
}
}
.mega__titel {
font-family: var(--font-serif);
font-size: var(--fs-block);
font-weight: 400;
font-variation-settings: 'opsz' 30;
line-height: 1.25;
color: var(--ivory);
}
.mega__text {
font-size: var(--fs-body-s);
color: var(--ivory-70);
max-width: var(--mass-eng);
}
.mega__seite {
color: var(--ivory);
text-decoration: none;
}
.mega__seite img {
display: block;
width: 100%;
height: auto;
border-radius: var(--radius);
}
.mega__karte-text {
display: block;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--ivory-70);
}
.mega__karte-text strong {
display: block;
margin-bottom: 2px;
font-size: var(--fs-body-s);
font-weight: 600;
color: var(--ivory);
}
.mega__zahl {
display: block;
font-family: var(--font-serif);
font-size: var(--fs-h2-sub);
line-height: 1;
color: var(--gold-bright);
}
@media (min-width: 1280px) {
.site-nav {
display: flex;
align-items: center;
gap: 14px;
height: 100%;
}
.nav-liste {
display: flex;
align-items: center;
height: 100%;
}
.nav-punkt {
display: flex;
align-items: center;
height: 100%;
}
.nav-meta,
.mega__eintrag--seite {
display: none;
}
.nav-fh {
display: inline-flex;
align-items: center;
min-height: 44px;
}
.mega {
position: absolute;
left: 0;
right: 0;
top: 100%;
z-index: 99;
background: var(--bg-2);
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--gold);
box-shadow: 0 20px 44px -16px rgba(0, 0, 0, 0.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(-6px);
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out),
visibility 0s linear var(--t-enter);
}
.nav-punkt.ist-offen > .mega,
.site-nav:not([data-mega]) .nav-punkt--mega:hover > .mega,
.site-nav:not([data-mega]) .nav-punkt--mega:focus-within > .mega {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
transition-delay: 0s;
}
.mega__innen {
display: grid;
grid-template-columns: minmax(14rem, 1fr) minmax(0, 2fr) minmax(12rem, 0.9fr);
gap: var(--flow-3);
padding-block: var(--flow-3);
align-items: stretch;
}
.mega__intro {
display: grid;
gap: var(--flow-1);
align-content: start;
padding-right: var(--flow-3);
border-right: 1px solid var(--line);
}
.mega__knopf {
justify-self: start;
margin-top: 4px;
}
.mega__liste {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 2px var(--flow-2);
align-content: start;
}
.mega__liste > .mega__eintrag:nth-child(even):last-child,
.mega__liste > .mega__eintrag:nth-child(even):has(+ .mega__anmerkung) {
grid-column: 1 / -1;
}
.quick {
transition: opacity var(--t-enter) var(--ease-out);
}
body:has(.nav-punkt--mega.ist-offen) .quick,
body:has(.site-nav:not([data-mega]) .nav-punkt--mega:hover) .quick,
body:has(.site-nav:not([data-mega]) .nav-punkt--mega:focus-within) .quick {
opacity: 0;
pointer-events: none;
}
.mega__seite {
display: grid;
gap: var(--flow-1);
align-content: start;
padding-left: var(--flow-3);
border-left: 1px solid var(--line);
min-width: 0;
}
}
@media (min-width: 1280px) {
.site-logo {
flex: 0 1 auto;
min-width: 136px;
}
.site-logo img {
width: 222px;
max-width: 100%;
height: auto;
}
.site-nav,
.nav-liste > li,
.nav-aktionen > *,
.nav-fh {
flex-shrink: 0;
}
}
@media (min-width: 1280px) and (max-width: 1419px) {
.site-header__inner {
gap: 12px;
}
.site-nav {
gap: 6px;
}
.nav-link {
padding-inline: 5px;
}
.nav-link::after {
left: 5px;
right: 5px;
}
.site-nav .btn {
padding-inline: 12px;
}
.nav-aktionen {
gap: 6px;
}
}
@media (min-width: 1420px) {
.site-header__inner {
gap: var(--flow-1);
}
.site-nav {
gap: 10px;
}
.nav-link {
padding-inline: 8px;
}
.nav-link::after {
left: 8px;
right: 8px;
}
.site-nav .btn {
padding-inline: 14px;
}
.nav-aktionen {
gap: 8px;
}
}
@media (max-width: 1279px) {
.nav-lang {
white-space: normal;
}
}
@media (max-width: 1279px) {
.site-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
height: calc(100dvh - var(--nav-h, 76px));
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 20px var(--container-pad) 40px;
background: var(--bg-0);
box-shadow: inset 0 1px 0 var(--gold);
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out),
visibility 0s var(--t-enter);
overflow-y: auto;
overscroll-behavior: contain;
counter-reset: navz;
}
.site-nav.is-open {
transform: none;
opacity: 1;
visibility: visible;
transition-delay: 0s;
}
.nav-liste {
display: block;
}
.nav-punkt {
display: block;
border-bottom: 1px solid var(--line);
}
.nav-link {
counter-increment: navz;
display: flex;
width: 100%;
align-items: baseline;
justify-content: flex-start;
gap: 14px;
padding: 15px 2px;
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 400;
font-variation-settings: 'opsz' 30;
text-align: left;
}
.nav-link::before {
content: counter(navz, decimal-leading-zero);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
color: var(--gold);
}
.nav-link::after {
display: none;
}
.nav-pfeil {
width: 18px;
height: 18px;
margin-left: auto;
align-self: center;
}
.mega {
display: none;
}
.nav-punkt.ist-offen > .mega {
display: block;
}
.mega__innen {
display: block;
max-width: none;
padding: 0 0 12px;
}
.mega__intro,
.mega__seite {
display: none;
}
.mega__liste {
display: grid;
gap: 2px;
}
.mega__eintrag {
padding: 9px 2px 9px 0;
}
.mega__wort strong {
font-weight: 500;
}
.nav-liste {
order: 0;
}
.nav-fh {
order: 1;
counter-increment: navz;
display: flex;
align-items: baseline;
gap: 14px;
padding: 15px 2px;
font-family: var(--font-serif);
font-size: 1.45rem;
font-variation-settings: 'opsz' 30;
border-bottom: 1px solid var(--line);
}
.nav-fh::before {
content: counter(navz, decimal-leading-zero);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.12em;
font-variant-numeric: tabular-nums;
color: var(--gold);
}
.nav-aktionen {
order: 2;
display: grid;
gap: 10px;
margin-top: var(--flow-2);
}
.site-nav .btn {
width: 100%;
min-height: 52px;
}
.nav-meta {
order: 3;
display: grid;
gap: 4px;
margin-top: auto;
padding-top: 24px;
}
.nav-meta a {
display: flex;
align-items: center;
min-height: 44px;
font-size: var(--fs-body-s);
color: var(--ivory-45);
text-decoration: none;
}
.socials--nav a {
border-radius: var(--radius);
}
.js .nav-punkt,
.js .nav-fh,
.js .nav-aktionen,
.js .nav-meta {
opacity: 0;
transform: translateY(14px);
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.js .site-nav.is-open .nav-punkt,
.js .site-nav.is-open .nav-fh,
.js .site-nav.is-open .nav-aktionen,
.js .site-nav.is-open .nav-meta {
opacity: 1;
transform: none;
transition-delay: calc(70ms + var(--nd, 0) * 45ms);
}
.nav-toggle {
display: inline-flex;
}
}
@media (min-width: 768px) and (max-width: 1279px) {
.nav-aktionen {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--flow-1);
}
}
@media (min-width: 768px) {
.quick__ic:focus-visible,
.chat__knopf:focus-visible {
outline-offset: -3px;
border-radius: var(--radius);
}
}
@media (prefers-reduced-motion: reduce) {
.mega,
.nav-punkt.ist-offen > .mega,
.site-nav,
.site-nav.is-open {
transform: none;
}
.js .nav-punkt,
.js .nav-fh,
.js .nav-aktionen,
.js .nav-meta {
transform: none;
}
}
.mega__seite--strategien {
display: grid;
gap: 8px;
align-content: start;
}
.mega__strategie {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
padding-bottom: 6px;
border-bottom: 1px solid var(--line);
font-size: var(--fs-body-s);
color: var(--ivory);
}
.mega__strategie .num {
font-size: var(--fs-body);
font-weight: 500;
color: var(--gold-bright);
font-variant-numeric: tabular-nums;
}
.mega__seite--strategien .mega__karte-text {
margin-top: 4px;
}
.mega__duo {
display: flex;
}
.mega__duo picture {
display: block;
width: 88px;
height: 88px;
border: 1px solid var(--line-gold);
border-radius: 50%;
overflow: hidden;
background: var(--bg-1);
}
.mega__duo picture + picture {
margin-left: -20px;
}
.mega__duo img {
width: 100%;
height: 100%;
border-radius: 0;
object-fit: cover;
}
.mega__seite--duo:hover .mega__karte-text strong,
.mega__seite--duo:focus-visible .mega__karte-text strong {
color: var(--gold-bright);
}
.mega__anmerkung {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 22px minmax(0, 1fr) 18px;
gap: 12px;
align-items: center;
margin-top: 10px;
padding: 14px 12px 10px;
border-top: 1px solid var(--line);
border-radius: 0 0 var(--radius) var(--radius);
color: var(--ivory);
text-decoration: none;
transition: background var(--t-hover) var(--ease-out);
}
.mega__anmerkung .mega__ic {
color: var(--gold);
}
.mega__anmerkung-pfeil {
width: 18px;
height: 18px;
color: var(--ivory-45);
transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.mega__anmerkung:hover,
.mega__anmerkung:focus-visible {
background: var(--bg-1);
}
.mega__anmerkung:hover .mega__anmerkung-pfeil,
.mega__anmerkung:focus-visible .mega__anmerkung-pfeil {
color: var(--gold-bright);
transform: translateX(3px);
}
@media (max-width: 1279px) {
.mega__anmerkung {
padding-inline: 0 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.mega__anmerkung,
.mega__anmerkung-pfeil {
transition: none;
}
}
.strahl {
position: relative;
display: grid;
grid-template-columns: 1fr;
gap: var(--flow-3);
margin: 0;
padding: 0;
list-style: none;
}
.strahl--3 { --n: 3; }
.strahl--4 { --n: 4; }
.strahl--5 { --n: 5; }
.strahl--6 { --n: 6; }
.strahl::before {
content: '';
position: absolute;
left: 1.75rem;
top: 1.75rem;
bottom: 1.75rem;
width: 1px;
margin-left: -0.5px;
background: var(--line);
}
.strahl__linie {
position: absolute;
left: 1.75rem;
top: 1.75rem;
bottom: 1.75rem;
width: 2px;
margin-left: -1px;
background: var(--gold);
transform-origin: top center;
transform: scaleY(1);
}
.js [data-strahl='an']:not(.ist-da) .strahl__linie {
transform: scaleY(0);
}
.js [data-strahl='an'].ist-da .strahl__linie {
transition: transform calc(var(--t-grafik) * 1.6) var(--ease-out);
}
@supports (anchor-scope: --a) and (bottom: anchor(--a center)) {
.strahl {
anchor-scope: --strahl-ende;
}
.schritt:last-child .schritt__kreis {
anchor-name: --strahl-ende;
}
.strahl::before,
.strahl__linie {
bottom: anchor(--strahl-ende center);
}
}
.schritt {
position: relative;
display: grid;
grid-template-columns: 3.5rem minmax(0, 1fr);
column-gap: var(--flow-2);
row-gap: var(--flow-1);
text-align: left;
}
.schritt__kreis {
grid-column: 1;
grid-row: 1;
display: grid;
place-items: center;
width: 3.5rem;
height: 3.5rem;
border: 1px solid var(--gold);
border-radius: 50%;
background: var(--gold);
color: var(--ink);
position: relative;
z-index: 1;
}
.schritt__kreis .ic {
width: 24px;
height: 24px;
}
.js [data-strahl='an']:not(.ist-da) .schritt__kreis {
background: transparent;
color: var(--gold);
}
.js [data-strahl='an'].ist-da .schritt__kreis {
transition: background-color var(--t-enter) var(--ease-out), color var(--t-enter) var(--ease-out);
transition-delay: calc(var(--i, 0) * 120ms);
}
.schritt__karte {
grid-column: 2;
grid-row: 1;
display: flex;
flex-direction: column;
gap: var(--flow-1);
min-width: 0;
padding: var(--pad-card-eng);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
transition: border-color var(--t-hover) var(--ease-out);
}
.schritt:hover .schritt__karte {
border-color: var(--gold);
}
.js [data-strahl='an']:not(.ist-da) .schritt__karte {
opacity: 0;
transform: translateY(var(--flow-1));
}
.js [data-strahl='an'].ist-da .schritt__karte {
transition: opacity var(--t-erklaer) var(--ease-out), transform var(--t-erklaer) var(--ease-out),
border-color var(--t-hover) var(--ease-out);
transition-delay: calc(var(--i, 0) * 120ms + 160ms), calc(var(--i, 0) * 120ms + 160ms), 0s;
}
.schritt__titel {
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-block);
font-weight: 400;
line-height: 1.25;
text-wrap: pretty;
}
.schritt__text {
margin: 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
font-size: var(--fs-body-s);
line-height: 1.6;
text-wrap: pretty;
}
@media (max-width: 63.99em) {
.schritt__text {
text-wrap: wrap;
}
}
.schritt__mehr p {
margin: 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
font-size: var(--fs-body-s);
line-height: 1.6;
text-wrap: pretty;
}
.strahl__detail {
display: none;
}
@media (min-width: 64em) {
.strahl {
grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
column-gap: var(--flow-2);
row-gap: 0;
}
.strahl::before,
.strahl__linie {
left: calc((100% - (var(--n) - 1) * var(--flow-2)) / var(--n) / 2);
right: calc((100% - (var(--n) - 1) * var(--flow-2)) / var(--n) / 2);
top: 1.75rem;
bottom: auto;
width: auto;
margin-left: 0;
}
.strahl::before {
height: 1px;
margin-top: -0.5px;
}
.strahl__linie {
height: 2px;
margin-top: -1px;
transform-origin: left center;
transform: scaleX(1);
}
.js [data-strahl='an']:not(.ist-da) .strahl__linie {
transform: scaleX(0);
}
.schritt {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto 1fr;
justify-items: center;
text-align: center;
row-gap: var(--flow-2);
}
.schritt__kreis,
.schritt__karte {
grid-column: auto;
grid-row: auto;
}
.schritt__karte {
justify-self: stretch;
align-items: center;
}
.schritt__text {
max-width: var(--mass-eng);
}
.schritt__mehr {
align-self: stretch;
}
.strahl[data-panel='an'] .schritt__mehr .mehr__inhalt {
display: none;
}
.schritt.ist-aktiv .schritt__karte {
border-color: var(--gold);
}
.strahl__detail {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
transition: grid-template-rows var(--t-erklaer) var(--ease-out), opacity var(--t-enter) var(--ease-out);
}
.strahl__detail.ist-offen {
grid-template-rows: 1fr;
opacity: 1;
}
.strahl__detail-innen {
min-height: 0;
overflow: hidden;
}
.strahl__detail-karte {
margin-top: var(--flow-2);
position: relative;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--flow-2);
align-items: center;
padding: var(--pad-card);
border: 1px solid var(--gold);
border-radius: var(--radius);
background: var(--bg-2);
}
.strahl__detail-karte::before {
content: '';
position: absolute;
top: -8px;
left: var(--zeiger, 50%);
width: 14px;
height: 14px;
margin-left: -7px;
background: var(--bg-2);
border-top: 1px solid var(--gold);
border-left: 1px solid var(--gold);
transform: rotate(45deg);
transition: left var(--t-erklaer) var(--ease-out);
}
.strahl__detail-ic {
display: grid;
place-items: center;
width: 3rem;
height: 3rem;
border-radius: 50%;
background: var(--gold);
color: var(--ink);
}
.strahl__detail-ic .ic {
width: 22px;
height: 22px;
}
.strahl__detail-titel {
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.2;
}
.strahl__detail-text {
grid-column: 2;
margin-top: calc(var(--flow-1) / 2);
}
.strahl__detail-text p {
margin: 0;
max-width: var(--mass-weit);
color: var(--ivory-70);
font-size: var(--fs-body);
line-height: 1.65;
text-wrap: pretty;
}
}
@media (prefers-reduced-motion: reduce) {
.strahl__linie,
.js [data-strahl='an']:not(.ist-da) .strahl__linie,
.js [data-strahl='an'].ist-da .strahl__linie {
transform: none;
transition: none;
}
.schritt__kreis,
.js [data-strahl='an']:not(.ist-da) .schritt__kreis,
.js [data-strahl='an'].ist-da .schritt__kreis {
background: var(--gold);
color: var(--ink);
transition: none;
transition-delay: 0s;
}
.schritt__mehr::details-content,
.strahl__detail,
.strahl__detail-karte::before {
transition: none;
}
.js [data-strahl='an']:not(.ist-da) .schritt__karte,
.js [data-strahl='an'].ist-da .schritt__karte {
opacity: 1;
transform: none;
transition: none;
}
}
[data-woerter] .w {
display: inline;
opacity: clamp(0.34, 0.34 + 2.9 * (var(--pe, 1) - var(--w, 0) * 0.75), 1);
}
html:not(.js) [data-woerter] .w,
html.reduziert [data-woerter] .w {
opacity: 1;
}
.heroc__media.heroc__media--motiv {
justify-self: center;
width: 100%;
max-width: 470px;
overflow: visible;
border-top: 0;
background: transparent;
}
.heroc__media.heroc__media--motiv::after {
display: none;
}
.heroc__media.heroc__media--motiv img {
aspect-ratio: 940 / 888;
object-fit: contain;
}
@media (max-width: 980px) {
.heroc__media.heroc__media--motiv {
max-width: min(84vw, 360px);
}
.heroc__media.heroc__media--motiv img {
aspect-ratio: 940 / 888;
}
}
.eb-liste {
display: grid;
gap: 10px;
margin: var(--flow-1) 0 0;
padding: 0;
list-style: none;
}
.eb-liste li {
position: relative;
padding: 10px 0 0 22px;
border-top: 1px solid var(--line);
color: var(--ivory);
}
.eb-liste li::before {
content: '';
position: absolute;
top: calc(10px + 0.62em);
left: 2px;
width: 8px;
height: 1px;
background: var(--gold);
}
.eb-zielgruppen {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: var(--flow-3) 0 0;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.eb-zielgruppen span {
padding: 8px 14px;
border: 1px solid var(--line-strong);
border-radius: 999px;
}
.blick {
display: grid;
gap: var(--flow-3);
}
.blick__reiter {
display: none;
}
.blick__buehne {
display: none;
}
.blick[data-blick='an'] .blick__reiter {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.blick[data-blick='an'] .blick__buehne {
display: block;
}
.blick[data-blick='an'] .blick__tabelle-rahmen {
display: none;
}
@media (min-width: 64em) {
.blick[data-blick='an'] {
grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.6fr);
align-items: center;
column-gap: var(--flow-4);
}
.blick[data-blick='an'] .blick__reiter {
flex-direction: column;
}
.blick[data-blick='an'] .blick__gemeinsam {
grid-column: 1 / -1;
}
}
.blick__reiter-knopf {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
padding: 10px 18px;
border: 1px solid var(--line-strong);
border-radius: 999px;
background: transparent;
color: var(--ivory-70);
font: inherit;
font-size: var(--fs-body-s);
text-align: left;
cursor: pointer;
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out),
background-color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.blick__reiter-knopf::before {
content: '';
flex: none;
width: 8px;
height: 8px;
border: 1px solid currentColor;
border-radius: 50%;
transition: background-color var(--t-hover) var(--ease-out);
}
.blick__reiter-knopf:hover {
border-color: var(--line-gold);
color: var(--ivory);
}
.blick__reiter-knopf:active {
transform: scale(0.98);
}
.blick__reiter-knopf[aria-selected='true'] {
border-color: var(--gold);
background: var(--bg-2);
color: var(--ivory);
}
.blick__reiter-knopf[aria-selected='true']::before {
border-color: var(--gold);
background: var(--gold);
}
.blick__buehne {
position: relative;
aspect-ratio: 360 / 680;
width: 100%;
max-width: 26rem;
margin-inline: auto;
}
.blick__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
overflow: visible;
}
.blick__svg--quer {
display: none;
}
@media (min-width: 48em) {
.blick__buehne {
aspect-ratio: 840 / 440;
max-width: none;
}
.blick__svg--quer {
display: block;
}
.blick__svg--hoch {
display: none;
}
}
.blick__stop--glut-1 {
stop-color: var(--gold-bright);
stop-opacity: 0.6;
}
.blick__stop--glut-2 {
stop-color: var(--gold);
stop-opacity: 0.28;
}
.blick__stop--glut-3 {
stop-color: var(--gold);
stop-opacity: 0;
}
.blick__stop--flaeche-1 {
stop-color: var(--ivory);
stop-opacity: 0.07;
}
.blick__stop--flaeche-2 {
stop-color: var(--ivory);
stop-opacity: 0.01;
}
.blick__kreis {
stroke: var(--line-strong);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
transition: transform var(--t-grafik) var(--ease-out), stroke var(--t-hover) var(--ease-out);
}
.blick__linse {
transition: opacity var(--t-erklaer) var(--ease-out) calc(var(--t-grafik) * 0.6);
}
.blick__naht {
stroke: var(--gold);
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
stroke-dasharray: 1;
stroke-dashoffset: 0;
transition: stroke-dashoffset var(--t-grafik) var(--ease-out) calc(var(--t-grafik) * 0.5);
}
.blick[data-blick='an']:not([data-blick-da]) .blick__svg--quer .blick__kreis--a {
transform: translateX(-44px);
}
.blick[data-blick='an']:not([data-blick-da]) .blick__svg--quer .blick__kreis--b {
transform: translateX(44px);
}
.blick[data-blick='an']:not([data-blick-da]) .blick__svg--hoch .blick__kreis--a {
transform: translateY(-24px);
}
.blick[data-blick='an']:not([data-blick-da]) .blick__svg--hoch .blick__kreis--b {
transform: translateY(24px);
}
.blick[data-blick='an']:not([data-blick-da]) .blick__linse {
opacity: 0;
}
.blick[data-blick='an']:not([data-blick-da]) .blick__naht {
stroke-dashoffset: 1;
}
.blick__buehne[data-fokus='zahl'] .blick__kreis--a,
.blick__buehne[data-fokus='mensch'] .blick__kreis--b {
stroke: var(--gold);
}
.blick__seite {
position: absolute;
left: 15%;
width: 70%;
transform: translateY(-50%);
text-align: center;
}
.blick__seite--zahl {
top: 27.2%;
}
.blick__seite--mensch {
top: 72.8%;
}
@media (min-width: 48em) {
.blick__seite {
top: 50%;
width: 27.4%;
}
.blick__seite--zahl {
left: 10.7%;
}
.blick__seite--mensch {
left: 61.9%;
}
}
.blick__wer {
margin: 0 0 10px;
font-size: var(--fs-small);
line-height: 1.35;
color: var(--gold);
}
.blick__wer span {
display: block;
color: var(--ivory-70);
}
.blick__frage {
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-block);
line-height: 1.3;
color: var(--ivory);
text-wrap: balance;
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.blick__thema {
position: absolute;
top: 50%;
left: 50%;
max-width: 24%;
margin: 0;
padding: 8px 14px;
border: 1px solid var(--gold);
border-radius: 999px;
background: var(--bg-0);
font-size: var(--fs-small);
line-height: 1.25;
text-align: center;
color: var(--ivory);
transform: translate(-50%, -50%);
transition: opacity var(--t-enter) var(--ease-out);
}
@media (max-width: 47.99em) {
.blick__thema {
max-width: 60%;
}
}
.blick__buehne[data-wechsel] .blick__frage {
opacity: 0;
transform: translateY(6px);
}
.blick__buehne[data-wechsel] .blick__thema {
opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
.blick__kreis,
.blick__linse,
.blick__naht,
.blick__frage,
.blick__thema {
transition: none;
}
}
.blick__gemeinsam {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
max-width: none;
margin: 0;
padding: var(--pad-card-eng) var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
font-size: var(--fs-lead);
line-height: 1.4;
color: var(--ivory);
}
.blick__gemeinsam .ic {
color: var(--gold);
}
.blick__gemeinsam strong {
font-weight: 600;
color: var(--gold);
}
.blick__tabelle-rahmen {
overflow-x: auto;
}
.blick__tabelle {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-body-s);
}
.blick__tabelle th,
.blick__tabelle td {
padding: 12px 14px 12px 0;
border-bottom: 1px solid var(--line);
text-align: left;
vertical-align: top;
}
.blick__tabelle thead th {
font-size: var(--fs-small);
color: var(--gold);
}
.begleiter {
display: flex;
flex-direction: column;
gap: var(--flow-2);
}
.begleiter__kopf {
display: flex;
align-items: center;
gap: 20px;
}
.eb-portraet {
flex: none;
}
.eb-portraet img {
display: block;
border-radius: 50%;
border: 1px solid var(--gold);
object-fit: cover;
}
.begleiter .eb-portraet img {
width: 112px;
height: 112px;
}
.begleiter__name {
margin: 0;
font-size: var(--fs-h3);
line-height: 1.15;
}
.begleiter__perspektive {
margin: 6px 0 0;
font-family: var(--font-serif);
font-size: var(--fs-body);
color: var(--gold);
}
.begleiter__rolle {
margin: 4px 0 0;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.begleiter__nachweise,
.begleiter__fokus-liste {
display: grid;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.begleiter__nachweise li {
display: flex;
gap: 12px;
font-size: var(--fs-body-s);
color: var(--ivory);
}
.begleiter__nachweise .ic {
width: 18px;
height: 18px;
margin-top: 2px;
color: var(--gold);
}
.begleiter-fokus {
margin-top: var(--flow-4);
column-gap: var(--flow-4);
}
.begleiter__fokus {
padding-top: var(--flow-2);
border-top: 1px solid var(--line-gold);
}
.begleiter__fokus-titel {
margin: 0;
font-family: var(--font-serif);
font-size: var(--fs-h3);
font-weight: 400;
line-height: 1.2;
}
.begleiter__fokus-titel span {
display: block;
margin-top: 6px;
font-family: var(--font-sans);
font-size: var(--fs-small);
color: var(--gold);
}
.begleiter__fokus-text {
margin: 10px 0 0;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.begleiter__fokus-liste {
margin-top: var(--flow-1);
}
.begleiter__fokus-liste li {
position: relative;
padding-left: 22px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.begleiter__fokus-liste li::before {
content: '';
position: absolute;
top: 0.62em;
left: 2px;
width: 8px;
height: 1px;
background: var(--gold);
}
.begleiter__fokus-liste strong {
display: block;
font-weight: 600;
color: var(--ivory);
}
.begleiter__fokus-liste li > span:only-child {
color: var(--ivory);
}
.begleiter__hinweis {
margin: var(--flow-2) 0 0;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.begleiter__gemeinsam {
display: flex;
gap: 14px;
max-width: none;
margin: var(--flow-3) 0 0;
padding: var(--pad-card-eng);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
font-family: var(--font-serif);
font-size: var(--fs-block);
line-height: 1.35;
color: var(--ivory);
}
.begleiter__gemeinsam .ic {
margin-top: 4px;
color: var(--gold);
}
.fall__art {
margin: 8px 0 0;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fall {
display: grid;
gap: var(--flow-2);
}
@media (min-width: 48em) {
.fall {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.fall__feld {
padding-top: var(--flow-1);
border-top: 1px solid var(--line);
}
.fall__label {
margin: 0 0 8px;
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 600;
color: var(--gold);
}
.fall__feld p {
margin: 0;
}
.fall__feld--frage p {
font-family: var(--font-serif);
font-size: var(--fs-block);
line-height: 1.35;
color: var(--ivory);
}
.fall__feld--ziel p {
color: var(--ivory);
}
.eb-weg-hinweis {
max-width: var(--mass-weit);
margin: var(--flow-2) 0 var(--flow-3);
font-size: var(--fs-small);
color: var(--ivory-70);
}
.kontaktkarte {
display: flex;
align-items: flex-start;
gap: 20px;
}
.kontaktkarte .eb-portraet img {
width: 72px;
height: 72px;
}
.kontaktkarte__text {
min-width: 0;
}
.kontaktkarte__name {
margin: 0;
font-size: var(--fs-h3);
line-height: 1.15;
}
.kontaktkarte__zeile {
margin: 6px 0 0;
font-size: var(--fs-small);
color: var(--gold);
}
.kontaktkarte__wege {
display: grid;
gap: 2px;
margin: var(--flow-1) 0 0;
padding: 0;
list-style: none;
}
.kontaktkarte__wege a {
display: inline-flex;
align-items: center;
gap: 12px;
min-height: 44px;
color: var(--ivory);
text-decoration: none;
overflow-wrap: anywhere;
transition: color var(--t-hover) var(--ease-out);
}
.kontaktkarte__wege a:hover {
color: var(--gold);
}
.kontaktkarte__wege .ic {
color: var(--gold);
}
.eb-download {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 18px;
margin: var(--flow-3) 0 0;
}
.eb-download__info {
font-size: var(--fs-small);
color: var(--ivory-70);
}
.begleiter-raster > .rv,
.kontaktduo > .rv,
.eb-bereiche > .rv {
display: flex;
}
.begleiter-raster .begleiter,
.kontaktduo .kontaktkarte,
.eb-bereiche .block {
flex: 1;
}
@media (max-width: 30em) {
.begleiter .eb-portraet img {
width: 80px;
height: 80px;
}
.begleiter__kopf {
gap: 16px;
}
}
.fall__titel {
margin: 0;
}
@media (max-width: 700px) {
.kontaktduo,
.begleiter-raster,
.begleiter-fokus {
grid-template-columns: minmax(0, 1fr);
}
}
.stoerer-motiv .stoerer__bild {
background: var(--bg-0);
}
.stoerer-motiv .stoerer__bild::after {
display: none;
}
.stoerer-motiv .stoerer__bild img {
object-fit: contain;
object-position: 50% 50%;
}
@media (min-width: 1024px) {
.stoerer-motiv .stoerer__bild {
left: auto;
width: 42%;
}
}
@media (max-width: 1023px) {
.stoerer-motiv .stoerer__bild {
inset: 20px 20px auto auto;
width: min(36%, 220px);
height: auto;
aspect-ratio: 1;
border-radius: 50%;
}
}
@media (max-width: 767px) {
.stoerer-motiv .stoerer__bild {
inset: 16px 16px auto auto;
width: 72px;
}
}
@media (max-width: 30em) {
.kontaktkarte {
flex-direction: column;
gap: 14px;
}
}
.fc-fakten {
display: flex;
flex-wrap: wrap;
gap: 12px var(--flow-2);
margin: var(--flow-3) 0 0;
padding: 0;
list-style: none;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.fc-fakten li {
display: flex;
align-items: center;
gap: 10px;
}
.fc-fakten .ic {
color: var(--gold);
}
.fc {
scroll-margin-top: calc(var(--nav-h, 76px) + var(--flow-2));
}
.fc-leiste {
display: none;
}
.fc[data-fc-an] .fc-leiste {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
margin: 0 0 var(--flow-3);
padding: 0;
list-style: none;
}
.fc-leiste__punkt {
display: flex;
align-items: center;
gap: 10px;
width: 100%;
min-height: 44px;
padding: 12px 0 4px;
border: 0;
border-top: 2px solid var(--line-strong);
background: none;
color: var(--ivory-70);
font: inherit;
font-size: var(--fs-body-s);
line-height: 1.25;
text-align: left;
cursor: pointer;
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.fc-leiste__punkt:disabled {
cursor: default;
color: var(--ivory-45);
}
.fc-leiste__punkt[data-status='fertig'] {
border-top-color: var(--gold-deep);
}
.fc-leiste__punkt[data-status='aktiv'] {
border-top-color: var(--gold);
color: var(--ivory);
}
.fc-leiste__nr {
display: grid;
place-items: center;
flex: none;
width: 28px;
height: 28px;
border: 1px solid currentColor;
border-radius: 50%;
font-size: var(--fs-small);
}
.fc-leiste__punkt[data-status='aktiv'] .fc-leiste__nr {
border-color: var(--gold);
background: var(--gold);
color: var(--ink);
}
@media (max-width: 63.99em) {
.fc-leiste__wort {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
}
.fc-raster {
display: grid;
gap: var(--flow-3);
}
.fc-raster > * {
min-width: 0;
}
@media (min-width: 64em) {
.fc-raster {
grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
gap: var(--flow-4);
align-items: start;
}
}
.fc-schritt {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.fc[data-fc-an] .fc-schritt:not([data-aktiv]) {
display: none;
}
.fc:not([data-fc-an]) .fc-schritt + .fc-schritt {
margin-top: var(--flow-4);
}
.fc-schritt__titel {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: var(--flow-2);
padding: 0;
font-family: var(--font-serif);
font-size: var(--fs-h3);
line-height: 1.2;
color: var(--ivory);
}
.fc-schritt__titel .ic {
color: var(--gold);
}
.fc-schritt__titel:focus {
outline: none;
}
.fc-schritt__titel:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
.fc-schritt__felder {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--flow-2);
}
@media (min-width: 40em) {
.fc-schritt__felder {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.fc-wahl--kacheln,
.fc-feld--voll {
grid-column: 1 / -1;
}
}
.fc [hidden] {
display: none;
}
.fc-schritt__nav {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: var(--flow-3);
}
.fc-schritt__felder .fc-schritt__nav {
margin-top: var(--flow-1);
}
.fc-schritt__nav .btn--gold {
margin-left: auto;
}
.fc:not([data-fc-an]) [data-fc-weiter],
.fc:not([data-fc-an]) [data-fc-zurueck] {
display: none;
}
.fc-eingabe {
position: relative;
}
.fc-eingabe input {
padding-right: 4.5em;
}
.fc-eingabe__einheit {
position: absolute;
top: 50%;
right: 16px;
transform: translateY(-50%);
font-size: var(--fs-body-s);
color: var(--ivory-70);
pointer-events: none;
}
.fc-feld__hinweis {
display: block;
margin-top: 7px;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.field select {
cursor: pointer;
}
.fc-wahl {
min-width: 0;
margin: 0;
padding: 0;
border: 0;
}
.fc-wahl legend {
margin-bottom: 8px;
padding: 0;
font-size: var(--fs-body-s);
font-weight: 500;
}
.fc-wahl__reihe {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
gap: 10px;
}
.fc-wahl--segment .fc-wahl__reihe {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 39.99em) {
.fc-wahl__reihe {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.fc-wahl .fc-wahl__option {
position: relative;
display: flex;
margin: 0;
font-weight: 400;
}
.fc-wahl__option input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.fc-wahl__option span {
display: flex;
flex: 1;
align-items: center;
min-height: 52px;
padding: 12px 16px;
border: 1px solid var(--line-control);
border-radius: var(--radius);
background: var(--bg-2);
font-size: var(--fs-body-s);
line-height: 1.3;
color: var(--ivory-70);
transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out),
box-shadow var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.fc-wahl__option:hover span {
border-color: var(--line-gold);
color: var(--ivory);
}
.fc-wahl__option input:checked + span {
border-color: var(--gold);
box-shadow: inset 0 0 0 1px var(--gold);
color: var(--ivory);
}
.fc-wahl__option input:focus-visible + span {
outline: 2px solid var(--gold);
outline-offset: 2px;
}
.fc-wahl__option input:active + span {
transform: scale(0.98);
}
.fc-wahl.is-invalid .fc-wahl__option span {
border-color: var(--error);
}
.fc-ampel {
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-1);
background-image: var(--grad-flaeche);
}
@media (min-width: 64em) {
.fc-ampel {
position: sticky;
top: calc(var(--nav-h, 76px) + var(--flow-2));
}
}
.fc-ampel__kopf {
display: flex;
align-items: center;
gap: 18px;
}
.fc-licht {
display: flex;
flex: none;
flex-direction: column;
gap: 7px;
padding: 9px;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--bg-0);
}
.fc-licht i {
width: 18px;
height: 18px;
border-radius: 50%;
background: var(--line-strong);
transition: background-color var(--t-erklaer) var(--ease-out), box-shadow var(--t-erklaer) var(--ease-out);
}
.fc-ampel[data-stufe='rot'] .fc-licht__rot {
background: var(--ampel-rot);
box-shadow: 0 0 14px var(--ampel-rot);
}
.fc-ampel[data-stufe='gelb'] .fc-licht__gelb {
background: var(--ampel-gelb);
box-shadow: 0 0 14px var(--ampel-gelb);
}
.fc-ampel[data-stufe='gruen'] .fc-licht__gruen {
background: var(--ampel-gruen);
box-shadow: 0 0 14px var(--ampel-gruen);
}
@media (prefers-reduced-motion: reduce) {
.fc-licht i {
transition: none;
}
}
.fc-ampel__label {
margin: 0;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-ampel__titel {
margin: 4px 0 0;
font-family: var(--font-serif);
font-size: var(--fs-h3);
line-height: 1.15;
color: var(--ivory);
}
.fc-ampel[data-stufe='rot'] .fc-ampel__titel {
color: var(--ampel-rot);
}
.fc-ampel[data-stufe='gelb'] .fc-ampel__titel {
color: var(--ampel-gelb);
}
.fc-ampel[data-stufe='gruen'] .fc-ampel__titel {
color: var(--ampel-gruen);
}
.fc-ampel__text {
margin-top: var(--flow-1);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.fc-rechnung {
margin-top: var(--flow-2);
padding-top: var(--flow-1);
border-top: 1px solid var(--line);
}
.fc-rechnung__titel {
margin-bottom: 6px;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-rechnung__zeile {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 5px 0;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.fc-rechnung__zeile .num {
color: var(--ivory);
white-space: nowrap;
}
.fc-rechnung__summe {
margin-top: 6px;
padding-top: 10px;
border-top: 1px solid var(--line-strong);
font-weight: 600;
color: var(--ivory);
}
.fc-rechnung[data-stufe='gruen'] .fc-rechnung__summe .num {
color: var(--ampel-gruen);
}
.fc-rechnung[data-stufe='gelb'] .fc-rechnung__summe .num {
color: var(--ampel-gelb);
}
.fc-rechnung[data-stufe='rot'] .fc-rechnung__summe .num {
color: var(--ampel-rot);
}
.fc-gruende {
display: grid;
gap: 12px;
margin: var(--flow-2) 0 0;
padding: 0;
list-style: none;
}
.fc-gruende:empty {
display: none;
}
.fc-grund {
position: relative;
padding-left: 22px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.fc-grund::before {
content: '';
position: absolute;
top: 0.45em;
left: 0;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--ampel-gruen);
}
.fc-grund[data-stufe='gelb']::before {
background: var(--ampel-gelb);
}
.fc-grund[data-stufe='rot']::before {
background: var(--ampel-rot);
}
.fc-grund strong {
display: block;
font-weight: 600;
color: var(--ivory);
}
.fc-ampel__recht {
margin-top: var(--flow-2);
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-upload__titel {
margin-bottom: 8px;
font-size: var(--fs-body-s);
font-weight: 500;
}
.fc-upload__vorschlag {
margin: 0 0 var(--flow-1);
padding-left: 1.2em;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (min-width: 40em) {
.fc-upload__vorschlag {
columns: 2;
column-gap: var(--flow-3);
}
}
.fc-upload__zone {
position: relative;
display: grid;
justify-items: center;
gap: 6px;
padding: var(--pad-card);
border: 1px dashed var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
text-align: center;
transition: border-color var(--t-hover) var(--ease-out);
}
.fc-upload__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
.fc-upload__zone:hover,
.fc-upload.is-ueber .fc-upload__zone {
border-style: solid;
border-color: var(--gold);
}
.fc-upload__zone:has(.fc-upload__input:focus-visible) {
outline: 2px solid var(--gold);
outline-offset: 3px;
}
.fc-upload__ic {
color: var(--gold);
}
.fc-upload__text {
color: var(--ivory-70);
}
.fc-upload__text strong {
color: var(--ivory);
}
.fc-upload__regel {
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-dateien {
display: grid;
gap: 8px;
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.fc-dateien:empty {
display: none;
}
.fc-datei {
display: flex;
align-items: center;
gap: 12px;
padding: 4px 4px 4px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
font-size: var(--fs-body-s);
}
.fc-datei__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.fc-datei__groesse {
color: var(--ivory-70);
white-space: nowrap;
}
.fc-datei__weg {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 0;
border-radius: var(--radius);
background: none;
color: var(--ivory-70);
cursor: pointer;
transition: color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.fc-datei__weg:hover {
background: var(--bg-1);
color: var(--ivory);
}
.fc-upload__fehler {
margin-top: 10px;
font-size: var(--fs-small);
color: var(--error);
}
.fc-upload__notiz {
display: flex;
gap: 10px;
margin-top: 12px;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-upload__notiz .ic {
color: var(--gold);
}
.fc-weiter {
margin-top: var(--flow-2);
padding: var(--pad-card);
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-1);
}
.fc-weiter__titel {
margin: 0 0 var(--flow-2);
font-family: var(--font-serif);
font-weight: 400;
font-size: var(--fs-h3);
}
.fc-weiter__schritte {
display: grid;
gap: var(--flow-3);
margin: 0;
padding: 0;
list-style: none;
}
.fc-weiter__schritt {
display: grid;
grid-template-columns: 40px minmax(0, 1fr);
gap: var(--flow-2);
align-items: start;
}
.fc-weiter__nr {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border: 1px solid var(--line-gold);
border-radius: 50%;
color: var(--gold-bright);
font-size: var(--fs-body-s);
}
.fc-weiter__inhalt h4 {
margin: 8px 0 var(--flow-1);
font-size: var(--fs-body);
font-weight: 600;
}
.fc-weiter__inhalt p {
margin: 0 0 var(--flow-1);
max-width: var(--mass-lesen);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.fc-weiter__knopf {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px var(--flow-2);
}
.fc-weiter__notiz {
font-size: var(--fs-small);
color: var(--ivory-70);
}
.fc-weiter__gemeinsam {
color: var(--ivory);
}
.fc-checkliste {
display: grid;
gap: 10px;
margin: 0 0 var(--flow-2);
padding: 0;
list-style: none;
}
.fc-haken {
display: grid;
grid-template-columns: 22px minmax(0, 1fr);
gap: 12px;
align-items: start;
margin: 0;
font-size: var(--fs-body-s);
color: var(--ivory);
cursor: pointer;
}
.fc-haken input {
width: 20px;
height: 20px;
margin: 1px 0 0;
accent-color: var(--gold);
}
.fc-haken input:checked + span {
color: var(--ivory-70);
text-decoration: line-through;
text-decoration-color: var(--gold);
}
@media (max-width: 30em) {
.fc-weiter__schritt {
grid-template-columns: minmax(0, 1fr);
gap: 10px;
}
}
@media print {
html.fc-druck body * {
visibility: hidden;
}
html.fc-druck [data-fc-checkliste],
html.fc-druck [data-fc-checkliste] * {
visibility: visible;
color: #000;
}
html.fc-druck [data-fc-checkliste] {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
html.fc-druck [data-fc-checkliste] .fc-weiter__knopf {
display: none;
}
}
.heroc {
padding-block: clamp(48px, 7vw, 96px) clamp(40px, 6vw, 80px);
}
.heroc__grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
gap: var(--flow-4);
align-items: center;
}
.heroc__grid--solo {
grid-template-columns: minmax(0, 1fr);
max-width: calc(var(--container));
}
.heroc__content .lead {
margin-top: 22px;
}
.heroc__content .hero-benefits {
margin-top: var(--flow-2);
}
.heroc__content .mehr__inhalt > .hero-benefits {
margin-top: 0;
}
.heroc__ctas {
margin-top: var(--flow-3);
}
.heroc__handlung {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--flow-2) var(--flow-3);
margin-top: var(--flow-3);
}
.heroc__handlung .heroc__ctas {
margin-top: 0;
flex: 0 0 auto;
max-width: 100%;
}
.heroc__handlung .btn-row {
display: grid;
justify-items: start;
gap: 10px;
width: max-content;
max-width: 100%;
}
.heroc__handlung .btn-row > * {
grid-column: 1;
}
.heroc__handlung .trust-avatars {
margin-top: 0;
padding-top: 0;
border-top: 0;
flex: 1 1 340px;
min-width: 0;
}
@media (min-width: 900px) {
.heroc__handlung .trust-avatars {
padding-left: var(--flow-2);
border-left: 1px solid var(--line);
}
}
.heroc__handlung .trust-avatars {
flex-wrap: wrap;
}
@media (min-width: 900px) {
.heroc__handlung .trust-avatars {
container-type: inline-size;
}
}
.heroc__handlung .trust-avatars__rechts {
flex: none;
}
.heroc__handlung .trust-avatars__body {
flex: 1 1 0;
min-width: 0;
}
@container (max-width: 460px) {
.heroc__handlung .trust-avatars__body {
flex: 1 1 100%;
order: 3;
}
.heroc__handlung .trust-avatars__rechts {
order: 2;
margin-left: auto;
}
}
.heroc__grid--strecke {
grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.9fr);
align-items: stretch;
row-gap: var(--flow-3);
}
.heroc__grid--strecke > .heroc__handlung {
grid-column: 1 / -1;
margin-top: 0;
}
@media (max-width: 74.99em) {
.heroc__grid.heroc__grid--strecke {
grid-template-columns: minmax(0, 1fr);
}
.heroc__grid--strecke > .heroc__media {
order: -1;
}
}
.heroc__media.heroc__media--strecke {
display: flex;
flex-direction: column;
overflow: visible;
background: transparent;
border-top: 0;
}
.heroc__media.heroc__media--strecke::after {
display: none;
}
.heroc__media {
position: relative;
border-top: 1px solid var(--gold);
overflow: hidden;
background: var(--bg-2);
}
.heroc__media::after {
content: '';
position: absolute;
inset: auto 0 0 0;
height: 42%;
background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, rgba(34, 34, 34, 0.55) 100%);
pointer-events: none;
}
.heroc__media img,
.heroc__media picture {
display: block;
width: 100%;
}
.heroc__media img {
aspect-ratio: var(--ratio, 4/3);
object-fit: cover;
object-position: var(--hero-pos, 50% 30%);
}
@media (max-width: 980px) {
.heroc__grid {
grid-template-columns: 1fr;
}
.heroc__media {
order: -1;
}
.heroc__media img {
aspect-ratio: 16/10;
}
}
.trust-avatars {
display: flex;
align-items: center;
gap: 16px;
margin-top: var(--flow-2);
padding-top: 22px;
border-top: 1px solid var(--line);
}
.trust-avatars__stack {
display: flex;
flex: none;
}
.trust-avatars__stack img,
.trust-avatars__more {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--bg-0);
background: var(--bg-2);
}
.trust-avatars__stack img + img,
.trust-avatars__more {
margin-left: -12px;
}
.trust-avatars__more {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.6875rem;
font-weight: 500;
color: var(--gold-bright);
background: var(--bg-1);
}
.trust-avatars__stars {
display: inline-flex;
gap: 2px;
color: var(--gold);
}
.trust-avatars__stars .ic {
width: 14px;
height: 14px;
}
.trust-avatars__body p {
margin-top: 2px;
font-size: var(--fs-small);
color: var(--ivory-70);
}
.trust-avatars__body a {
color: var(--ivory);
}
.section--light .trust-avatars__stack img,
.section--light .trust-avatars__more {
border-color: var(--sand);
}
@keyframes hs-in {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes hs-media-in {
from {
opacity: 0;
clip-path: inset(12% 0 0 0);
transform: translateY(20px);
}
to {
opacity: 1;
clip-path: inset(0 0 0 0);
transform: none;
}
}
.js [data-hs] {
opacity: 0;
animation: hs-in 640ms var(--ease-out) forwards;
}
.js .heroc__content > [data-hs]:nth-child(1) { animation-delay: 40ms; }
.js .heroc__content > [data-hs]:nth-child(2) { animation-delay: 120ms; }
.js .heroc__content > [data-hs]:nth-child(3) { animation-delay: 200ms; }
.js .heroc__content > [data-hs]:nth-child(4) { animation-delay: 280ms; }
.js .heroc__content > [data-hs]:nth-child(5) { animation-delay: 360ms; }
.js .heroc__content > [data-hs]:nth-child(6) { animation-delay: 440ms; }
.js .opener__kopf > [data-hs]:nth-child(1) { animation-delay: 40ms; }
.js .opener__kopf > [data-hs]:nth-child(2) { animation-delay: 120ms; }
.js .opener > [data-hs]:nth-child(2) { animation-delay: 200ms; }
.js .opener > [data-hs]:nth-child(3) { animation-delay: 280ms; }
.js .heroc__media[data-hs] {
animation: hs-media-in 800ms var(--ease-out) 240ms forwards;
}
@keyframes kenburns {
from {
transform: scale(1);
}
to {
transform: scale(1.055);
}
}
.js .heroc__media img {
animation: kenburns 16s linear 1s both;
}
.js .tile__bg img {
animation: kenburns 18s linear both;
}
.tile:hover .tile__bg img {
animation-play-state: paused;
}
.js .feat-grid[data-rv],
.js .steps[data-rv],
.js .offers[data-rv],
.js .tiles[data-rv],
.js .mechanik[data-rv] {
opacity: 1;
transform: none;
transition: none;
}
.js .feat-grid[data-rv] .feat,
.js .steps[data-rv] .step,
.js .offers[data-rv] .offer,
.js .tiles[data-rv] .tile,
.js .mechanik[data-rv] > div {
opacity: 0;
translate: 0 12px;
transition: opacity var(--t-enter) var(--ease-out), translate var(--t-enter) var(--ease-out);
}
.js .feat-grid[data-rv].is-in .feat,
.js .steps[data-rv].is-in .step,
.js .offers[data-rv].is-in .offer,
.js .tiles[data-rv].is-in .tile,
.js .mechanik[data-rv].is-in > div {
opacity: 1;
translate: 0 0;
}
.js [data-rv].is-in > *:nth-child(2) { transition-delay: 60ms; }
.js [data-rv].is-in > *:nth-child(3) { transition-delay: 120ms; }
.js [data-rv].is-in > *:nth-child(4) { transition-delay: 180ms; }
.js [data-rv].is-in > *:nth-child(5) { transition-delay: 240ms; }
.js [data-rv].is-in > *:nth-child(6) { transition-delay: 300ms; }
.js .path-card,
.js .heroc__media,
.js .offer {
position: relative;
}
.js [data-rv] .hairline-draw {
content: '';
}
@media (prefers-reduced-motion: reduce) {
.js [data-hs],
.js .heroc__media[data-hs],
.js .heroc__media img,
.js .tile__bg img {
animation: none;
opacity: 1;
clip-path: none;
transform: none;
}
.js [data-rv] > * {
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
}
.heroc__nachsatz {
margin-top: var(--flow-2);
max-width: var(--mass-lesen);
color: var(--ivory-70);
}
.steuer-hinweis {
margin-top: var(--flow-3);
padding: var(--pad-card-eng);
border-radius: var(--radius);
background: var(--bg-2);
background-image: var(--grad-panel);
border-top: 1px solid var(--gold);
max-width: 900px;
}
.steuer-hinweis p {
max-width: var(--mass-weit);
}
.steuer-hinweis strong {
color: var(--gold-bright);
font-weight: 500;
}
.galerie {
--galerie-luft: clamp(12px, 1.6vw, 20px);
display: flex;
gap: var(--galerie-luft);
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 8px;
scrollbar-width: none;
}
.galerie::-webkit-scrollbar {
display: none;
}
.galerie:focus-visible {
outline: 2px solid var(--gold);
outline-offset: 4px;
}
.galerie__bild {
flex: 0 0 calc((100% - 2 * var(--galerie-luft)) / 3);
scroll-snap-align: start;
margin: 0;
overflow: hidden;
border-top: 1px solid var(--gold);
background: var(--bg-2);
}
.galerie__nav {
justify-content: flex-end;
}
.galerie__bild img {
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform var(--t-erklaer) var(--ease-out);
}
.galerie__bild:hover img {
transform: scale(var(--zoom));
}
@media (max-width: 1100px) {
.galerie__bild {
flex-basis: calc((100% - var(--galerie-luft)) / 2);
}
}
@media (max-width: 700px) {
.galerie {
--galerie-luft: var(--flow-2);
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
scroll-padding-inline: var(--container-pad);
}
.galerie__bild {
flex-basis: calc(100% - var(--flow-3));
}
}
.weg-abschluss {
display: grid;
gap: var(--flow-3);
align-items: start;
}
@media (min-width: 64em) {
.weg-abschluss .tick-list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.leistungen-paket {
margin-top: var(--flow-4);
padding-top: 30px;
border-top: 1px solid var(--gold);
}
.leistungen-paket h3 {
margin-bottom: var(--flow-2);
}
.schere {
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
gap: var(--flow-4);
align-items: center;
}
.schere__chart {
margin: 0;
background: var(--bg-2);
border-top: 1px solid var(--gold);
padding: clamp(18px, 3vw, 32px);
}
.schere__chart svg {
width: 100%;
height: auto;
display: block;
}
.schere__y {
fill: var(--ivory-45);
font-family: var(--font-sans);
font-size: 12px;
}
.schere__label {
fill: var(--ivory);
font-family: var(--font-sans);
font-size: 13px;
font-weight: 500;
}
.schere__label--gold {
fill: var(--gold-bright);
}
.schere__flaeche {
fill: rgba(168, 157, 115, 0.1);
}
.schere__linie {
fill: none;
stroke-width: 2;
stroke-linecap: round;
}
.schere__linie--wert {
stroke: var(--gold-bright);
}
.schere__linie--schuld {
stroke: var(--ivory-70);
stroke-dasharray: none;
}
.js [data-rv] .schere__linie {
stroke-dasharray: 1;
stroke-dashoffset: 1;
}
.js [data-rv].is-in .schere__linie {
animation: schere-draw var(--t-grafik) var(--ease-out) forwards;
}
.js [data-rv].is-in .schere__linie--schuld {
animation-delay: 250ms;
}
@keyframes schere-draw {
to {
stroke-dashoffset: 0;
}
}
.js [data-rv] .schere__flaeche,
.js [data-rv] .schere__label {
opacity: 0;
transition: opacity var(--t-erklaer) var(--ease-out) 1100ms;
}
.js [data-rv].is-in .schere__flaeche,
.js [data-rv].is-in .schere__label {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.js [data-rv] .schere__linie {
stroke-dasharray: none;
stroke-dashoffset: 0;
animation: none;
}
.js [data-rv] .schere__flaeche,
.js [data-rv] .schere__label {
opacity: 1;
transition: none;
}
}
@media (max-width: 980px) {
.schere {
grid-template-columns: 1fr;
}
}
.kuchen {
margin: 0;
display: grid;
grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
gap: var(--flow-3);
align-items: center;
}
.kuchen__svg {
width: 100%;
height: auto;
}
.kuchen__label {
font-family: var(--font-sans);
font-weight: 600;
fill: var(--ink);
}
.kuchen__label--gross {
font-size: 13px;
}
.kuchen__label--klein {
font-size: 12px;
}
.kuchen__legende {
display: grid;
gap: var(--flow-2);
}
.kuchen__pos {
display: grid;
grid-template-columns: 14px 1fr;
column-gap: 14px;
align-items: start;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.kuchen__pos strong {
grid-column: 2;
display: block;
color: var(--ivory);
font-weight: 500;
font-size: var(--fs-body);
margin-bottom: 4px;
}
.kuchen__pos i {
grid-row: 1 / span 2;
}
.kuchen__punkt {
width: 14px;
height: 14px;
border-radius: 50%;
margin-top: 5px;
}
.kuchen__punkt--gross {
background: var(--ivory);
}
.kuchen__punkt--klein {
background: transparent;
box-shadow: inset 0 0 0 3px var(--gold-bright);
}
@media (max-width: 900px) {
.kuchen {
grid-template-columns: minmax(0, 1fr);
}
.kuchen__svg {
max-width: 300px;
margin-inline: auto;
}
}
.kuchen__seg {
stroke: var(--bg-0);
stroke-width: 4;
stroke-linejoin: round;
transform-origin: 120px 120px;
}
.section--alt .kuchen__seg,
.section--panel .kuchen__seg {
stroke: var(--bg-1);
}
.kuchen__seg--gross { fill: var(--ivory); }
.kuchen__seg--klein { fill: var(--gold-bright); }
@keyframes kuchen-ein {
from { opacity: 0; transform: scale(0.92); }
to   { opacity: 1; transform: none; }
}
.js [data-rv].is-in .kuchen__seg--gross {
animation: kuchen-ein 520ms var(--ease-out) both;
}
.js [data-rv].is-in .kuchen__seg--klein {
animation: kuchen-ein 520ms var(--ease-out) 260ms both;
}
@media (prefers-reduced-motion: reduce) {
.js [data-rv].is-in .kuchen__seg { animation: none; }
}
.shots {
position: relative;
}
.shots__spur {
display: flex;
margin: 0;
padding: 0;
list-style: none;
height: 100%;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
overscroll-behavior-x: contain;
}
.shots__spur::-webkit-scrollbar {
display: none;
}
.shots__spur:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: -2px;
}
.shots__folie {
flex: 0 0 100%;
scroll-snap-align: center;
min-width: 0;
}
.shots__folie picture,
.shots__folie img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.shots__punkte {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
gap: 2px;
}
.shots__punkt {
width: 44px;
height: 44px;
padding: 0;
border: 0;
background: none;
cursor: pointer;
display: grid;
place-items: center;
}
.shots__punkt::before {
content: '';
width: 28px;
height: 3px;
border-radius: var(--radius);
background: rgba(242, 239, 231, 0.4);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
transition: background var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.shots__punkt[aria-current='true']::before {
background: var(--gold-bright);
}
.shots__punkt:active::before {
transform: scaleY(2);
}
@media (hover: hover) {
.shots__punkt:hover::before {
background: var(--ivory);
}
}
.offer:hover .shots img {
transform: none;
}
.lev {
margin: 0;
}
.lev__svg {
display: block;
width: 100%;
height: auto;
font-family: var(--font-sans);
}
.lev__keil {
fill: var(--gold);
fill-opacity: 0.92;
}
.lev__keile {
clip-path: inset(0 0 0 0);
transition: clip-path var(--t-grafik) var(--ease-out) 150ms;
}
.js .rv[data-rv]:not(.is-in) .lev__keile {
clip-path: inset(0 100% 0 0);
}
.lev__keiltext {
fill: var(--ink);
font-size: 26px;
font-weight: 500;
}
.lev__achse {
stroke: var(--ivory);
stroke-width: 3;
stroke-dasharray: 22 14;
opacity: 0.85;
}
.lev__marke circle {
fill: var(--gold);
}
.lev__marke text {
fill: var(--ivory);
font-size: 18px;
}
.lev__kicker {
fill: var(--gold);
font-size: 20px;
}
.lev__zahl {
fill: var(--ivory);
font-size: 26px;
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.lev__zahl--gold {
fill: var(--gold-bright);
}
.lev__zahl--gross {
font-size: 40px;
fill: var(--gold-bright);
}
.lev__steuerfrei {
fill: var(--gold-bright);
font-family: var(--font-serif);
font-size: 30px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lev__hinweis {
fill: var(--gold);
font-size: 18px;
font-weight: 500;
}
.lev__klammer {
fill: none;
stroke: var(--ivory);
stroke-width: 3;
}
.lev__fuss {
margin-top: var(--flow-2);
font-size: var(--fs-small);
color: var(--ivory-45);
max-width: var(--mass-weit);
}
@media (max-width: 700px) {
.lev__marke text { font-size: 24px; }
.lev__kicker { font-size: 24px; }
.lev__zahl { font-size: 30px; }
.lev__hinweis { font-size: 22px; }
.lev__keiltext { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.lev__keile { transition: none; }
.js .rv:not(.is-in) .lev__keile { clip-path: inset(0 0 0 0); }
}
.shots--hero {
aspect-ratio: 3 / 2;
overflow: hidden;
border-radius: var(--radius);
}
.shots--hero .shots__spur {
height: 100%;
}
.heroc__media--strecke .shots--hero {
display: flex;
flex-direction: column;
flex: 1 1 auto;
aspect-ratio: auto;
overflow: visible;
}
.heroc__media--strecke .shots--hero .shots__spur {
flex: 1 1 auto;
height: auto;
min-height: 360px;
contain: size;
border-top: 1px solid var(--gold);
border-radius: var(--radius);
overflow-x: auto;
overflow-y: hidden;
}
.heroc__media--strecke .shots--hero .shots__folie,
.heroc__media--strecke .shots--hero .shots__folie picture,
.heroc__media--strecke .shots--hero .shots__folie img {
height: 100%;
}
.heroc__media--strecke .shots--hero .shots__folie img {
aspect-ratio: auto;
}
.heroc__media--strecke .shots--hero .shots__punkte {
position: static;
padding: 8px 0 0;
background: none;
}
@media (max-width: 74.99em) {
.heroc__media--strecke .shots--hero .shots__spur {
flex: none;
min-height: 0;
contain: none;
aspect-ratio: 16 / 10;
}
}
@media (min-width: 48em) and (max-width: 74.99em) {
.heroc__media--strecke .shots--hero .shots__spur {
aspect-ratio: 16 / 9;
}
}
.offer .shots .shots__spur,
.offer .shots .shots__folie,
.offer .shots .lightbox__knopf {
height: 100%;
}
@media (min-width: 900px) {
.offer .shots {
aspect-ratio: auto;
height: 100%;
min-height: 320px;
}
}
.kuchen .kuchen__seg--steuer {
fill: var(--ivory);
fill-opacity: 1;
stroke: var(--gold-bright);
stroke-width: 3;
stroke-linejoin: round;
transform-box: fill-box;
transform-origin: 0% 100%;
transform: scale(1);
transition: transform var(--t-grafik) var(--ease-out);
}
.kuchen.is-wartend .kuchen__seg--steuer {
transform: scale(0.001);
}
.kuchen__label--steuer {
font-size: 11px;
opacity: 1;
transition: opacity var(--t-erklaer) var(--ease-out) 700ms;
}
.kuchen.is-wartend .kuchen__label--steuer {
opacity: 0;
}
.kuchen__punkt--steuer {
background: var(--ivory);
box-shadow: inset 0 0 0 3px var(--gold-bright);
}
@media (prefers-reduced-motion: reduce) {
.kuchen__seg--steuer { transition: none; transform: scale(1); }
.kuchen__label--steuer { transition: none; opacity: 1; }
}
.legal {
max-width: none;
}
.legal p,
.legal ol {
max-width: var(--mass-weit);
}
.legal-toc {
display: none;
}
@media (min-width: 1024px) {
.container.legal-grid {
display: grid;
grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
column-gap: var(--flow-4);
align-items: start;
}
.legal-toc {
display: block;
position: sticky;
top: calc(var(--nav-h, 76px) + 32px);
border-top: 1px solid var(--gold);
padding-top: 20px;
}
.legal-toc__titel {
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--gold);
margin-bottom: 16px;
}
.legal-toc ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 2px;
}
.legal-toc a {
display: block;
padding: 7px 0;
font-size: var(--fs-body-s);
line-height: 1.35;
color: var(--ivory-45);
text-decoration: none;
transition: color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.legal-toc a:hover {
color: var(--gold-bright);
transform: translateX(8px);
}
}
.legal > *:first-child {
margin-top: 0;
}
.legal h1 {
margin-bottom: 10px;
}
.legal h2 {
font-size: clamp(1.5rem, 2.6vw, 2.1rem);
font-variation-settings: 'opsz' 40;
margin-top: var(--flow-4);
margin-bottom: 14px;
}
.legal h3 {
font-size: var(--fs-block);
margin-top: var(--flow-3);
margin-bottom: 8px;
}
.legal p,
.legal ul,
.legal ol {
color: var(--ivory-70);
}
.legal p + p,
.legal p + ul,
.legal p + ol,
.legal ul + p,
.legal ol + p {
margin-top: 14px;
}
.legal ul,
.legal ol {
padding-left: 1.15em;
max-width: var(--mass-lesen);
}
.legal li + li {
margin-top: 8px;
}
.legal strong {
color: var(--ivory);
font-weight: 500;
}
.legal a {
color: var(--ivory);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color: var(--gold);
transition: color var(--t-hover) var(--ease-out);
}
.legal a:hover {
color: var(--gold-bright);
}
.legal__stand {
font-size: var(--fs-small);
color: var(--ivory-45);
letter-spacing: 0.02em;
margin-bottom: 8px;
}
.legal__adr {
line-height: 1.5;
}
.legal__erlaubnisse {
list-style: none;
padding-left: 0;
margin-top: 18px;
}
.legal__erlaubnisse li {
border-top: 1px solid var(--line);
padding-top: 16px;
}
.legal__erlaubnisse li + li {
margin-top: 16px;
}
.legal__erlaubnisse li:first-child {
border-top-color: var(--gold);
}
.legal__nr {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
color: var(--ivory);
font-weight: 500;
}
.inglory-note {
margin-top: var(--flow-4);
background: var(--bg-2);
border-top: 1px solid var(--gold);
border-radius: var(--radius);
padding: var(--pad-card);
}
.inglory-note h2 {
margin-top: 0;
font-size: clamp(1.3rem, 2vw, 1.6rem);
}
.inglory-note p:last-child {
margin-bottom: 0;
}
.rechner-kopf {
max-width: var(--mass-weit);
}
.rechner-kopf .lead {
margin-top: 18px;
}
.block .sprung {
margin-top: 0;
}
.rr-liste {
display: grid;
margin-top: var(--flow-4);
gap: var(--flow-3);
}
.rr-liste > *,
.rr,
.rr__tab,
.rr__tab-scroll {
min-width: 0;
}
.rr {
padding: var(--pad-card);
border-radius: var(--radius);
background: var(--grad-panel);
border: 1px solid var(--line);
border-top: 1px solid var(--gold);
scroll-margin-top: 96px;
}
.rr.is-ziel {
animation: rr-ziel var(--t-grafik) var(--ease-out);
}
@keyframes rr-ziel {
0%,
100% {
border-color: var(--line);
border-top-color: var(--gold);
}
15%,
55% {
border-color: var(--gold);
}
}
.rr__kopf .ic--lg {
color: var(--gold);
}
.rr__kopf h3 {
margin: 14px 0 0;
font-size: clamp(1.35rem, 2.5vw, 1.8rem);
}
.rr__frage {
margin: 8px 0 0;
font-family: var(--font-serif);
font-size: clamp(1.0625rem, 1.8vw, 1.25rem);
color: var(--gold-bright);
}
.rr__text {
margin: 12px 0 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
}
.rr__body {
display: grid;
gap: var(--flow-3);
margin-top: var(--flow-2);
align-items: start;
}
.rr__felder {
display: grid;
gap: var(--flow-2);
min-width: 0;
}
.rfield--wahl select {
width: 100%;
min-height: 44px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
font: inherit;
}
.rfield--wahl select:focus {
border-color: var(--gold);
}
.rr__ergebnis {
padding: var(--pad-card-eng);
border-radius: var(--radius);
background: var(--grad-flaeche);
border: 1px solid var(--line);
min-width: 0;
}
.rr__haupt-label {
display: block;
font-size: var(--fs-small);
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ivory-45);
}
.rr__haupt-wert {
display: block;
margin-top: 10px;
font-family: var(--font-sans);
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: 1.05;
color: var(--gold-bright);
overflow-wrap: anywhere;
}
.rr__balken {
height: 5px;
margin-top: 18px;
background: var(--line-control);
border-radius: var(--radius);
overflow: hidden;
}
.rr__balken i {
display: block;
height: 100%;
width: 100%;
transform-origin: left;
background: var(--grad-gold);
transition: transform var(--t-erklaer) var(--ease-out);
}
.rr__weitere {
margin: 22px 0 0;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: var(--fs-body-s);
}
.rr__weitere > div {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 14px;
padding: 7px 0;
}
.rr__weitere dt {
color: var(--ivory-45);
}
.rr__weitere dd {
margin: 0;
color: var(--ivory);
font-variant-numeric: tabular-nums;
text-align: right;
}
.rr__tab {
margin-top: var(--flow-2);
padding-top: clamp(20px, 2.6vw, 28px);
border-top: 1px solid var(--line);
}
.rr__tab h4 {
margin: 0 0 16px;
font-size: var(--fs-body-s);
letter-spacing: 0.02em;
color: var(--ivory-70);
}
.rr__tab-scroll {
overflow-x: auto;
overscroll-behavior-x: contain;
}
.rr__tab-scroll:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 3px;
}
.rr__tab-wisch {
display: none;
margin: -8px 0 12px;
font-size: var(--fs-small);
color: var(--ivory-45);
}
@media (max-width: 780px) {
.rr__tab:has(th:nth-child(3)) .rr__tab-wisch {
display: block;
}
}
.rr__tab table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-small);
font-variant-numeric: tabular-nums;
}
.rr__tab table:has(th:nth-child(3)) {
min-width: 460px;
}
.rr__tab th,
.rr__tab td {
padding: 10px 14px 10px 0;
text-align: right;
white-space: nowrap;
}
.rr__tab thead th {
font-size: var(--fs-small);
color: var(--gold);
border-bottom: 1px solid var(--line);
}
.rr__tab tbody th {
text-align: left;
font-weight: 400;
color: var(--ivory-70);
}
.rr__tab tbody tr + tr th,
.rr__tab tbody tr + tr td {
border-top: 1px solid var(--line);
}
.rr__tab th:last-child,
.rr__tab td:last-child {
padding-right: 0;
color: var(--gold-bright);
}
.rr__hinweis {
display: flex;
gap: 10px;
margin: clamp(22px, 3vw, 30px) 0 0;
padding-top: 16px;
border-top: 1px solid var(--line);
font-size: var(--fs-small);
line-height: 1.6;
color: var(--ivory-45);
}
.rr__hinweis .ic {
flex: 0 0 auto;
width: 17px;
height: 17px;
margin-top: 2px;
color: var(--gold);
}
.rr-recht .block__inhalt p {
max-width: var(--mass-weit);
font-size: var(--fs-small);
color: var(--ivory-45);
}
@media (min-width: 900px) {
.rr__ergebnis {
position: sticky;
top: calc(var(--nav-h, 76px) + var(--flow-2));
}
}
@media (min-width: 900px) {
.rr__body {
grid-template-columns: 1fr 1fr;
}
.rr__ergebnis {
position: sticky;
top: 96px;
}
}
@media (min-width: 1180px) {
.rr__body {
grid-template-columns: 1.05fr 0.95fr;
}
}
.rechner {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
gap: var(--flow-4);
align-items: start;
}
.rechner__inputs {
display: grid;
gap: var(--flow-2);
}
.rfield label {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
font-size: var(--fs-body-s);
font-weight: 500;
margin-bottom: 10px;
}
.rfield output {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--gold-bright);
}
.rfield input[type='range'] {
width: 100%;
height: 28px;
appearance: none;
-webkit-appearance: none;
background: transparent;
cursor: pointer;
}
.rfield input[type='range']::-webkit-slider-runnable-track {
height: 2px;
background: var(--line-strong);
}
.rfield input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
width: 20px;
height: 20px;
margin-top: -9px;
border-radius: 50%;
background: var(--gold);
border: 0;
}
.rfield input[type='range']::-moz-range-track {
height: 2px;
background: var(--line-strong);
}
.rfield input[type='range']::-moz-range-thumb {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--gold);
border: 0;
}
.rfield__num {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
}
.rfield__num input {
width: 140px;
min-height: 44px;
padding: 8px 12px;
background: var(--bg-2);
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
font-variant-numeric: tabular-nums;
}
.rfield__num input:focus {
border-color: var(--gold);
}
.rfield__num span {
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.rechner__details {
margin-top: 0;
border-top: 1px solid var(--line);
}
.rechner__details > summary {
display: flex;
justify-content: space-between;
width: 100%;
padding: calc(var(--flow-1) / 2) 0;
}
.rechner__details .rechner__inputs {
padding: 8px 0 20px;
}
.rechner__result {
position: sticky;
top: calc(var(--nav-h, 76px) + 24px);
background: var(--bg-2);
border-top: 1px solid var(--gold);
padding: var(--pad-card);
border-radius: var(--radius);
}
.rechner__result h3 {
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ivory-45);
}
.rr-main {
margin-top: 12px;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.rr-main .num {
font-size: clamp(2.8rem, 5vw, 3.8rem);
line-height: 1;
color: var(--ivory);
}
.rr-main .unit {
font-size: var(--fs-body);
color: var(--ivory-70);
}
.rr-rows {
margin-top: var(--flow-2);
border-top: 1px solid var(--line);
}
.rr-row {
display: flex;
justify-content: space-between;
gap: 16px;
padding: 11px 0;
border-bottom: 1px solid var(--line);
font-size: var(--fs-body-s);
}
.rr-row span:first-child {
color: var(--ivory-70);
}
.rr-row .num {
color: var(--ivory);
}
.rr-row .num.is-plus {
color: var(--gold-bright);
}
.rr-disclaimer {
margin-top: 18px;
font-size: var(--fs-small);
line-height: 1.55;
color: var(--ivory-45);
}
.rechner__result .btn-row {
margin-top: 22px;
transition: opacity var(--t-enter) var(--ease-out), transform var(--t-enter) var(--ease-out);
}
.rechner__result.hat-js:not(.has-interacted) .btn-row {
opacity: 0;
transform: translateY(6px);
}
@media (max-width: 980px) {
.rechner {
grid-template-columns: 1fr;
}
.rechner__result {
position: static;
}
}
.banda {
position: relative;
aspect-ratio: 2019 / 1130;
overflow: hidden;
user-select: none;
touch-action: none;
}
.banda img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
}
.banda__after {
clip-path: inset(0 0 0 var(--pos, 50%));
}
.banda__line {
position: absolute;
top: 0;
bottom: 0;
left: var(--pos, 50%);
width: 1px;
background: var(--gold);
pointer-events: none;
}
.banda__handle {
position: absolute;
top: 50%;
left: var(--pos, 50%);
transform: translate(-50%, -50%);
width: 44px;
height: 44px;
border: 1px solid var(--gold);
background: rgba(17, 26, 31, 0.72);
display: flex;
align-items: center;
justify-content: center;
cursor: ew-resize;
}
.banda__handle::before,
.banda__handle::after {
content: '';
width: 6px;
height: 6px;
border-top: 1px solid var(--ivory);
border-left: 1px solid var(--ivory);
}
.banda__handle::before {
transform: rotate(-45deg);
margin-right: 6px;
}
.banda__handle::after {
transform: rotate(135deg);
}
.banda__label {
position: absolute;
bottom: 18px;
font-family: var(--font-sans);
font-size: var(--fs-eyebrow);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ivory);
background: rgba(17, 26, 31, 0.66);
padding: 6px 12px;
pointer-events: none;
transition: opacity var(--t-enter) var(--ease-out);
}
.banda__label--vorher {
left: 18px;
opacity: calc(var(--posn, 0.5) * 1.4);
}
.banda__label--nachher {
right: 18px;
opacity: calc((1 - var(--posn, 0.5)) * 1.4);
}
.banda-caption {
margin-top: 14px;
font-size: var(--fs-small);
color: var(--ivory-45);
}
.stufen {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
gap: var(--flow-4);
align-items: start;
}
.stufen > * {
min-width: 0;
}
.stufen__list {
display: grid;
}
.stufe {
display: grid;
grid-template-columns: 64px 1fr auto;
gap: 20px;
align-items: center;
padding: 22px 4px;
border-bottom: 1px solid var(--line);
cursor: pointer;
transition: background var(--t-hover) var(--ease-out);
border-left: 0;
text-align: left;
width: 100%;
}
.stufe:first-child {
border-top: 1px solid var(--line);
}
.stufe:hover {
background: var(--bg-2);
}
.stufe__nr {
font-variant-numeric: tabular-nums;
font-weight: 500;
color: var(--ivory-45);
font-size: var(--fs-body-s);
}
.stufe__req {
font-size: var(--fs-body);
}
.stufe__satz {
font-variant-numeric: tabular-nums;
font-weight: 500;
font-size: 1.35rem;
color: var(--ivory-70);
transition: color var(--t-hover) var(--ease-out);
}
.stufe[aria-pressed='true'] {
background: var(--bg-2);
box-shadow: inset 2px 0 0 var(--gold);
}
.stufe[aria-pressed='true'] .stufe__satz {
color: var(--gold-bright);
}
.stufe[aria-pressed='true'] .stufe__nr {
color: var(--gold);
}
.stufen__aside {
position: sticky;
top: calc(var(--nav-h, 76px) + 24px);
display: grid;
gap: var(--flow-2);
}
.provi {
background: var(--bg-2);
border-top: 1px solid var(--gold);
padding: var(--pad-card);
}
.provi h3 {
font-family: var(--font-sans);
font-size: var(--fs-block);
font-weight: 500;
color: var(--ivory-70);
}
.provi .rr-main .num {
font-size: clamp(2.4rem, 4vw, 3.2rem);
}
.provi .rfield {
margin-top: 22px;
}
.provi .check {
margin-top: 14px;
font-size: var(--fs-small);
}
.stufen-hinweis {
font-size: var(--fs-small);
color: var(--ivory-45);
line-height: 1.55;
}
@media (max-width: 980px) {
.stufen {
grid-template-columns: 1fr;
}
.stufen__aside {
position: static;
}
.stufen__list {
display: flex;
gap: 14px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
padding-bottom: 10px;
border-top: 1px solid var(--line);
}
.stufe,
.stufe:first-child {
flex: 0 0 min(240px, 74vw);
scroll-snap-align: start;
grid-template-columns: 1fr;
gap: 8px;
border: 1px solid var(--line);
border-top: 1px solid var(--line);
padding: 20px 18px;
align-content: start;
}
.stufe[aria-pressed='true'] {
border-color: var(--gold);
box-shadow: none;
}
}
.mechanik {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--line);
text-align: left;
}
.mechanik > div {
padding: 30px 28px 34px;
}
.mechanik > div + div {
border-left: 1px solid var(--line);
}
.mechanik .num {
font-size: 1.8rem;
color: var(--gold-bright);
}
.mechanik h3 {
font-size: var(--fs-block);
margin-top: 10px;
}
.mechanik p {
margin-top: 8px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (max-width: 900px) {
.mechanik {
grid-template-columns: 1fr;
}
.mechanik > div + div {
border-left: 0;
border-top: 1px solid var(--line);
}
}
.mechanik--parallel .ic--lg {
color: var(--gold);
}
.split--bio {
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
align-items: start;
}
.split--bio .split__media {
max-width: 440px;
}
@media (min-width: 901px) {
.split--bio {
align-items: stretch;
}
.split--bio .split__media {
align-self: start;
}
.split--bio .split__text,
.split--bio .split__text > .prosa {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.split--bio .split__text > .prosa > .lead {
margin-top: auto;
padding-top: var(--flow-2);
}
}
.split--bio .split__media img {
aspect-ratio: 4/5;
object-fit: cover;
object-position: 50% 18%;
}
.bio__sig {
display: block;
align-self: flex-start;
height: 58px;
width: auto;
margin-top: var(--flow-2);
opacity: 0.85;
}
@media (max-width: 900px) {
.split--bio {
grid-template-columns: 1fr;
}
.split--bio .split__media {
max-width: 380px;
}
}
.cta-bande__bild img[src*='portrait-markus-dehm'] {
object-position: 50% 30%;
}
.bloecke {
display: grid;
gap: var(--flow-3);
}
.bloecke > * {
min-width: 0;
}
.bloecke > .rv {
display: grid;
}
@media (min-width: 901px) {
.bloecke {
grid-template-columns: 1fr 1fr;
}
.bloecke .block:has(.pull) {
display: flex;
flex-direction: column;
}
.bloecke .block:has(.pull) > .block__inhalt {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.bloecke .block .pull {
margin-top: 0;
}
}
.pull {
margin-top: var(--flow-4);
padding-left: clamp(20px, 3vw, 34px);
border-left: 1px solid var(--gold);
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-variation-settings: 'opsz' 24;
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--ivory);
max-width: var(--mass-lesen);
}
.block .pull {
margin-top: 0;
}
.pull cite {
display: block;
margin-top: 18px;
font-family: var(--font-sans);
font-style: normal;
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--ivory-70);
}
.checklist {
list-style: none;
padding: 0;
margin-inline: 0;
display: grid;
gap: 16px;
}
.checklist li {
display: flex;
gap: 14px;
align-items: flex-start;
color: var(--ivory-70);
max-width: var(--mass-lesen);
}
.checklist .ic {
color: var(--gold);
width: 20px;
height: 20px;
margin-top: 4px;
flex: none;
}
.feat-grid--4 {
grid-template-columns: repeat(4, 1fr);
}
.feat-grid--4 .feat:nth-child(3n + 2),
.feat-grid--4 .feat:nth-child(3n) {
border-left: 0;
}
.feat-grid--4 .feat + .feat {
border-left: 1px solid var(--line);
}
@media (min-width: 901px) and (max-width: 1140px) {
.feat-grid--4 {
grid-template-columns: repeat(2, 1fr);
}
.feat-grid--4 .feat + .feat {
border-left: 0;
}
.feat-grid--4 .feat:nth-child(2n) {
border-left: 1px solid var(--line);
}
}
@media (max-width: 900px) {
.feat-grid--4 {
grid-template-columns: 1fr;
}
.feat-grid--4 .feat + .feat {
border-left: 0;
}
}
.feat__links {
display: grid;
justify-items: start;
gap: 10px;
margin-top: 20px;
}
.feat__go {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
color: var(--ivory);
padding-bottom: 4px;
border-bottom: 1px solid var(--line-control);
transition: border-color var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.feat__go .ic {
width: 19px;
height: 19px;
color: var(--gold);
flex: none;
}
.feat__go span {
min-width: 0;
overflow-wrap: anywhere;
}
.feat__go:hover {
border-bottom-color: var(--gold);
}
.feat p.feat__note {
margin-top: 14px;
font-size: var(--fs-small);
line-height: 1.5;
color: var(--ivory-45);
}
@media (max-width: 767px) {
.feat-grid--stapel[data-stapel='an'] {
gap: var(--flow-2);
border-top: 0;
}
.feat-grid--stapel[data-stapel='an'] > .feat {
padding: var(--pad-card);
border-bottom: 0;
background: var(--bg-2);
box-shadow: var(--schatten-stapel), inset 0 0 0 1px var(--line-gold);
}
.fh-rows[data-stapel='an'] > .fh-row {
align-content: start;
}
}
.hero--flat {
background: var(--bg-1);
border-bottom: 1px solid var(--line);
}
.reg {
margin-top: 20px;
}
.reg__label {
display: block;
font-size: var(--fs-small);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--ivory-45);
}
.reg__num {
display: block;
margin-top: 4px;
font-size: var(--fs-body);
letter-spacing: 0.02em;
color: var(--gold-bright);
}
.linkline {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 18px;
font-size: var(--fs-body-s);
font-weight: 500;
text-decoration: none;
padding-bottom: 3px;
border-bottom: 1px solid var(--line-control);
transition: border-color var(--t-hover) var(--ease-out);
}
.linkline::after,
.feat__go::after,
.cta-bande__nachsatz a::after {
content: '';
position: absolute;
inset: -8px -4px;
}
.linkline .ic {
width: 17px;
height: 17px;
color: var(--gold);
transition: transform var(--t-hover) var(--ease-out);
}
.linkline:hover {
border-bottom-color: var(--gold);
}
.linkline:hover .ic {
transform: translateX(3px);
}
.feat-grid--vier {
grid-template-columns: repeat(2, 1fr);
}
.feat-grid--vier .feat:nth-child(3n + 2),
.feat-grid--vier .feat:nth-child(3n) {
border-left: 0;
}
.feat-grid--vier .feat:nth-child(2n) {
border-left: 1px solid var(--line);
}
@media (max-width: 1100px) {
.feat-grid--vier {
grid-template-columns: repeat(2, 1fr);
}
.feat-grid--vier .feat + .feat {
border-left: 0;
}
.feat-grid--vier .feat:nth-child(even) {
border-left: 1px solid var(--line);
}
}
@media (max-width: 900px) {
.feat-grid--vier {
grid-template-columns: 1fr;
}
}
.fahrplan {
padding-top: var(--flow-2);
border-top: 1px solid var(--gold);
}
.fahrplan__kopf {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--flow-1);
font-size: var(--fs-small);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--ivory-45);
}
.fahrplan__achse {
color: var(--gold);
}
.fahrplan__flaeche {
padding-top: var(--flow-4);
}
.fahrplan__spur {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
height: clamp(220px, 34vw, 380px);
border-bottom: 1px solid var(--line-control);
}
.fahrplan__spur::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--e, 3) * 1%);
z-index: 3;
border-top: 1px dashed var(--line-control);
}
.fahrplan__marke {
display: inline-flex;
align-items: center;
gap: var(--flow-1);
color: var(--ivory-70);
}
.fahrplan__marke i {
display: block;
width: var(--flow-2);
border-top: 1px dashed var(--line-control);
}
.fahrplan__stapel {
position: relative;
z-index: 1;
min-width: 0;
}
.fahrplan__wert {
position: absolute;
left: 0;
right: 0;
bottom: calc(var(--h) * 1%);
margin-bottom: var(--flow-1);
text-align: center;
line-height: 1.2;
font-size: var(--fs-small);
color: var(--ivory);
}
.fahrplan-balken {
position: absolute;
left: 17%;
right: 17%;
bottom: 0;
height: calc(var(--h) * 1%);
border-radius: var(--radius) var(--radius) 0 0;
background: var(--gold);
transform-origin: bottom;
transition: transform var(--t-grafik) var(--ease-out);
transition-delay: calc(var(--i, 0) * 80ms);
}
.fahrplan-balken--sparbuch {
background: var(--ivory-45);
}
.fahrplan-balken--performance {
background-image: var(--grad-gold);
}
.fahrplan__namen {
display: grid;
grid-template-columns: repeat(4, 1fr);
padding-top: var(--flow-1);
}
.fahrplan__saeule {
min-width: 0;
text-align: center;
}
.fahrplan__name {
display: block;
font-size: var(--fs-small);
color: var(--ivory);
}
.fahrplan__rendite {
display: block;
font-size: var(--fs-small);
color: var(--gold);
}
.fahrplan__frage {
margin-top: var(--flow-3);
font-size: var(--fs-lead);
color: var(--ivory);
max-width: var(--mass-lesen);
}
.js .rv[data-rv]:not(.is-in) .fahrplan-balken {
transform: scaleY(0);
}
@media (min-width: 700px) {
.fahrplan__wert {
font-size: var(--fs-block);
}
.fahrplan__name {
font-size: var(--fs-body-s);
}
}
@media (prefers-reduced-motion: reduce) {
.fahrplan-balken {
transition: none;
}
.js .rv[data-rv]:not(.is-in) .fahrplan-balken {
transform: none;
}
}
.leitsaetze {
list-style: none;
padding: 0;
margin: var(--flow-3) 0 0;
display: grid;
gap: 12px;
}
.leitsaetze li {
display: flex;
gap: 12px;
align-items: flex-start;
color: var(--ivory-70);
font-size: var(--fs-body-s);
max-width: var(--mass-lesen);
}
.leitsaetze .ic {
flex: 0 0 auto;
width: 19px;
height: 19px;
margin-top: 3px;
color: var(--gold);
}
.plan-grid {
display: grid;
grid-template-columns: 1fr;
border-top: 1px solid var(--line);
}
.plan {
padding: var(--pad-card);
border-radius: var(--radius);
border-bottom: 1px solid var(--line);
}
.plan__nr {
font-size: var(--fs-small);
letter-spacing: 0.08em;
color: var(--gold);
}
.plan h3 {
margin-top: 12px;
font-size: var(--fs-block);
}
.plan__zusatz {
min-height: 3.2em;
margin-top: 4px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.plan__rate {
margin-top: var(--flow-2);
font-family: var(--font-sans);
font-size: var(--fs-lead);
line-height: 1.2;
color: var(--gold-bright);
}
.plan__rate .unit {
display: block;
margin: 8px 0 0;
font-size: var(--fs-small);
letter-spacing: 0.02em;
}
.plan .kv {
margin-top: 20px;
}
.plan-note {
margin-top: 10px;
font-size: var(--fs-small);
color: var(--ivory-45);
}
.plan__mix {
margin-top: 18px;
font-size: var(--fs-body-s);
color: var(--ivory);
}
.plan__merk {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
@media (min-width: 700px) {
.plan-grid {
grid-template-columns: repeat(2, 1fr);
}
.plan:nth-child(2n) {
border-left: 1px solid var(--line);
}
}
@media (min-width: 1100px) {
.plan-grid {
grid-template-columns: repeat(4, 1fr);
}
.plan {
padding: var(--pad-card);
}
.plan:nth-child(n) {
border-left: 1px solid var(--line);
}
.plan:first-child {
border-left: 0;
}
}
.disclaimer {
margin-top: var(--flow-2);
font-size: var(--fs-small);
max-width: var(--mass-weit);
}
.feat .kv {
margin-top: 18px;
border-top: 1px solid var(--line);
}
.kv--card th {
width: 42%;
vertical-align: top;
white-space: nowrap;
}
.kv--card td {
text-align: left;
padding-left: 14px;
font-weight: 400;
line-height: 1.45;
vertical-align: top;
color: var(--ivory);
}
.kv__ic {
width: 16px;
height: 16px;
display: inline-block;
vertical-align: -3px;
margin-right: 9px;
color: var(--gold);
}
@media (max-width: 480px) {
.kv--card tr {
display: block;
padding: 11px 0;
}
.kv--card th,
.kv--card td {
display: block;
width: auto;
padding: 0;
}
.kv--card td {
margin-top: 3px;
padding-left: 25px;
}
}
.kv--price {
max-width: 660px;
}
.kv--price tr.kv--sum td {
color: var(--gold-bright);
}
.clean-shares {
margin-top: var(--flow-4);
padding-top: 30px;
border-top: 1px solid var(--line);
max-width: none;
display: grid;
grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr);
column-gap: var(--flow-4);
align-items: start;
}
.clean-shares h3,
.clean-shares p:first-of-type {
grid-column: 1;
}
.clean-shares p:last-of-type {
grid-column: 2;
grid-row: 1 / span 9;
}
.clean-shares p {
margin-top: 14px;
max-width: var(--mass-lesen);
}
@media (max-width: 900px) {
.clean-shares {
grid-template-columns: minmax(0, 1fr);
}
.clean-shares p:last-of-type {
grid-column: 1;
grid-row: auto;
}
.clean-shares p {
max-width: none;
}
}
.tick-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--flow-2) var(--flow-3);
}
.tick-list li {
display: flex;
gap: 14px;
align-items: flex-start;
}
.tick-list .ic {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin-top: 3px;
color: var(--gold);
}
.tick-list span {
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.tick-list strong {
display: block;
margin-bottom: 4px;
font-weight: 500;
color: var(--ivory);
font-size: var(--fs-body);
}
@media (max-width: 760px) {
.tick-list {
grid-template-columns: 1fr;
}
}
.vv-split {
display: grid;
gap: var(--flow-3);
align-items: start;
}
.vv-split > * {
min-width: 0;
}
.vv-split__text > p {
margin: 0 0 18px;
max-width: var(--mass-lesen);
}
.vv-split__text > p:last-child {
margin-bottom: 0;
}
.vv-split__karte {
padding: var(--pad-card);
background: var(--grad-panel);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.vv-split__karte h3 {
margin: 0 0 18px;
font-size: var(--fs-block);
}
.kv--vergleich {
width: 100%;
}
.kv--vergleich thead th {
padding-bottom: 10px;
font-size: var(--fs-eyebrow);
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--gold);
text-align: left;
white-space: normal;
}
.kv--vergleich tbody th {
width: 34%;
color: var(--ivory-70);
font-weight: 400;
}
.kv--vergleich td {
width: 33%;
text-align: left;
vertical-align: top;
font-size: var(--fs-body-s);
}
.kv--vergleich td:last-child {
color: var(--ivory);
}
.kv--vergleich thead th + th,
.kv--vergleich tbody td {
border-left: 1px solid var(--line);
padding-left: 18px;
}
.kv--vergleich tbody th {
padding-right: 18px;
}
.kv--vergleich tbody tr + tr th,
.kv--vergleich tbody tr + tr td {
border-top: 1px solid var(--line);
}
@media (min-width: 900px) {
.vv-split {
grid-template-columns: 1.05fr 0.95fr;
}
}
.real-block {
margin-top: var(--flow-4);
padding-top: clamp(32px, 4vw, 44px);
border-top: 1px solid var(--line);
}
.real-block--erst {
margin-top: 0;
padding-top: 0;
border-top: 0;
}
.real-block__titel {
font-size: clamp(1.25rem, 2.2vw, 1.6rem);
margin: 0;
}
.real-block__sub {
margin: 10px 0 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
}
.real-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
margin-top: var(--flow-2);
background: var(--line);
border: 1px solid var(--line);
}
.real {
padding: 24px 22px 22px;
background: var(--grad-flaeche);
min-width: 0;
}
.real__ic {
width: 26px;
height: 26px;
color: var(--gold);
}
.real__wert {
display: block;
margin-top: 12px;
font-family: var(--font-sans);
font-size: clamp(2rem, 3.4vw, 2.6rem);
line-height: 1;
color: var(--gold-bright);
}
.real__name {
display: block;
margin-top: 8px;
font-size: var(--fs-body-s);
color: var(--ivory-70);
}
.real__det {
margin: 18px 0 0;
padding-top: 14px;
border-top: 1px solid var(--line);
font-size: var(--fs-small);
}
.real__det > div {
display: flex;
justify-content: space-between;
gap: 12px;
padding: 5px 0;
min-width: 0;
}
.real__det dt {
color: var(--ivory-45);
}
.real__det dd {
margin: 0;
color: var(--ivory);
}
@media (min-width: 760px) {
.real-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.real-grid[data-stapel='an'] {
gap: 0;
background: transparent;
}
.real-grid[data-stapel='an'] > .real + .real {
border-top: 1px solid var(--line);
}
}
.fh-panel__bild {
border-top: 1px solid var(--gold);
background: var(--bg-2);
border-radius: var(--radius);
overflow: hidden;
}
.fh-panel__bild picture,
.fh-panel__bild img {
display: block;
width: 100%;
height: auto;
}
.fh-panel__text {
margin: var(--flow-2) 0 0;
max-width: var(--mass-lesen);
}
.fh-rows {
display: grid;
gap: var(--flow-3);
}
.fh-row {
display: grid;
gap: var(--flow-3);
align-items: center;
}
.fh-row__bild picture,
.fh-row__bild img {
display: block;
width: 100%;
height: auto;
}
.fh-row__text {
min-width: 0;
}
.fh-row__text p {
margin: 0;
max-width: var(--mass-lesen);
color: var(--ivory-70);
}
@media (min-width: 900px) {
.fh-row {
grid-template-columns: 1fr 1fr;
}
.fh-row--flip .fh-row__bild {
order: 2;
}
}
.plan__ic {
display: block;
margin-top: 14px;
color: var(--gold);
}
@media (max-width: 767px) {
.kv--vergleich tbody td,
.kv--vergleich tbody th {
border-left: 0;
padding-left: 0;
}
.kv--vergleich,
.kv--vergleich tbody,
.kv--vergleich tbody tr,
.kv--vergleich tbody th,
.kv--vergleich tbody td {
display: block;
width: auto;
}
.kv--vergleich thead {
display: none;
}
.kv--vergleich tbody tr {
padding: 14px 0;
}
.kv--vergleich tbody tr:first-child {
padding-top: 0;
}
.kv--vergleich tbody th {
padding: 0 0 8px;
color: var(--ivory);
font-weight: 500;
}
.kv--vergleich td {
padding: 3px 0;
text-align: left;
}
.kv--vergleich td::before {
content: attr(data-sp) ': ';
color: var(--ivory-45);
}
.kv--vergleich tbody tr + tr th,
.kv--vergleich tbody tr + tr td {
border-top: 0;
}
.kv--vergleich tbody[data-stapel='an'] > tr {
background: var(--bg-0);
}
.kv--vergleich tbody[data-stapel='an'] > tr:first-child {
padding-top: var(--flow-1);
border-top: 1px solid var(--line);
}
}
.werte-band--zulassung .werte-band__wert {
font-family: var(--font-serif);
font-size: clamp(1.4rem, 2.4vw, 1.75rem);
}
.werte-band--zulassung .reg {
margin-top: 12px;
font-size: var(--fs-small);
}
.werte-band--zulassung .reg__label {
color: var(--ivory-45);
}
.werte-band--zulassung .reg__num {
color: var(--ivory);
letter-spacing: 0.02em;
}
.prozess {
border-top: 1px solid var(--gold);
}
.prozess__schritt {
border-bottom: 1px solid var(--line);
}
.prozess__schritt summary {
display: grid;
grid-template-columns: auto auto 1fr auto;
align-items: center;
gap: 16px;
padding: 22px 0;
cursor: pointer;
list-style: none;
min-height: 44px;
}
.prozess__schritt summary::-webkit-details-marker {
display: none;
}
.prozess__schritt summary:focus-visible {
outline: 2px solid var(--gold-bright);
outline-offset: 4px;
}
.prozess__nr {
font-size: var(--fs-small);
letter-spacing: 0.08em;
color: var(--gold);
}
.prozess__schritt summary > .ic {
width: 22px;
height: 22px;
color: var(--gold);
}
.prozess__titel {
font-family: var(--font-serif);
font-size: var(--fs-block);
}
.prozess__pfeil {
width: 18px;
height: 18px;
color: var(--ivory-45);
transition: transform var(--t-enter) var(--ease-out);
}
.prozess__schritt[open] .prozess__pfeil {
transform: rotate(180deg);
}
.prozess__text {
padding: 0 0 26px;
}
.prozess__text p {
margin: 0;
max-width: var(--mass-weit);
color: var(--ivory-70);
}
@media (min-width: 700px) {
.prozess__schritt summary {
gap: 20px;
}
.prozess__text {
padding-left: 58px;
}
}
@media (hover: hover) {
.prozess__schritt summary:hover .prozess__titel {
color: var(--gold-bright);
}
}
@supports (interpolate-size: allow-keywords) {
.prozess__schritt::details-content {
block-size: 0;
overflow: hidden;
transition: block-size var(--t-erklaer) var(--ease-out), content-visibility var(--t-erklaer) allow-discrete;
}
.prozess__schritt[open]::details-content {
block-size: auto;
}
}
@media (prefers-reduced-motion: reduce) {
.prozess__pfeil,
.prozess__schritt::details-content {
transition: none;
}
}
.vk {
min-height: 100svh;
padding: clamp(24px, 6vw, 56px) var(--pad-x) clamp(40px, 8vw, 72px);
display: flex;
justify-content: center;
align-items: flex-start;
background:
radial-gradient(120% 60% at 50% 0%, rgba(168, 157, 115, 0.13) 0%, transparent 60%),
var(--bg-0);
}
.vk__karte {
width: 100%;
max-width: 30rem;
display: grid;
gap: var(--flow-3);
}
.vk__kopf {
display: grid;
justify-items: center;
text-align: center;
gap: 6px;
}
.vk__bild {
display: block;
width: 132px;
height: 132px;
margin-bottom: var(--flow-2);
border-radius: 50%;
overflow: hidden;
box-shadow: 0 0 0 1px var(--gold), 0 0 0 7px rgba(168, 157, 115, 0.16);
}
.vk__bild img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 18%;
display: block;
}
.vk__name {
margin: 0;
font-size: clamp(2rem, 8vw, 2.6rem);
line-height: 1.1;
}
.vk__rolle {
margin: 0;
max-width: none;
color: var(--ivory);
font-size: var(--fs-body);
line-height: 1.45;
}
.vk__firma {
color: var(--ivory-70);
}
.vk__claim {
margin: 12px 0 0;
max-width: none;
font-family: var(--font-serif);
font-size: var(--fs-block);
line-height: 1.3;
color: var(--ivory);
}
.vk__claim em {
font-style: normal;
color: var(--gold);
}
.vk__aktionen {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.vk__aktion {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 84px;
padding: 14px 10px;
border: 1px solid var(--line-gold);
border-radius: var(--radius);
background: var(--bg-2);
color: var(--ivory);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fs-body-s);
font-weight: 500;
transition:
border-color var(--t-hover) var(--ease-out),
background-color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out);
}
.vk__aktion .ic {
width: 24px;
height: 24px;
color: var(--gold-bright);
}
.vk__aktion:hover,
.vk__aktion:focus-visible {
border-color: var(--gold);
background: var(--bg-1);
transform: translateY(var(--hub));
}
.vk__aktion:active {
transform: scale(0.985);
}
.vk__aktion--wa {
background-image: var(--grad-gold);
border-color: var(--gold);
color: var(--ink);
}
.vk__aktion--wa .ic {
color: var(--ink);
}
.vk__aktion--wa:hover,
.vk__aktion--wa:focus-visible {
background-image: var(--grad-gold-hover);
background-color: transparent;
}
.vk__speichern {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 56px;
border: 1px solid var(--line-control);
border-radius: var(--radius);
color: var(--ivory);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fs-body-s);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: border-color var(--t-hover) var(--ease-out), background-color var(--t-hover) var(--ease-out);
}
.vk__speichern .ic {
width: 20px;
height: 20px;
color: var(--gold-bright);
}
.vk__speichern:hover,
.vk__speichern:focus-visible {
border-color: var(--ivory);
background: var(--bg-2);
}
.vk__social {
display: grid;
justify-items: center;
gap: 12px;
}
.vk__social-titel {
margin: 0;
max-width: none;
text-align: center;
color: var(--ivory-70);
font-size: var(--fs-body-s);
}
.vk__kanaele {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.vk__kanal {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ivory-70);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fs-small);
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.vk__kanal .ic {
width: 18px;
height: 18px;
color: var(--gold);
}
.vk__kanal:hover,
.vk__kanal:focus-visible {
color: var(--ivory);
border-color: var(--line-gold);
}
.vk__kopfzeile {
margin: 0 0 12px;
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ivory-45);
}
.vk__bereiche ul {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 10px;
}
.vk__link {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) 20px;
align-items: center;
column-gap: 14px;
min-height: 72px;
padding: 12px 14px;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--bg-2);
color: var(--ivory);
text-decoration: none;
transition:
border-color var(--t-hover) var(--ease-out),
background-color var(--t-hover) var(--ease-out),
transform var(--t-hover) var(--ease-out);
}
.vk__link-ic {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border: 1px solid var(--gold);
border-radius: var(--radius);
color: var(--gold-bright);
}
.vk__link-ic .ic {
width: 22px;
height: 22px;
}
.vk__link-text {
display: grid;
gap: 2px;
min-width: 0;
color: var(--ivory-70);
font-size: var(--fs-small);
line-height: 1.45;
}
.vk__link-text strong {
font-family: var(--font-serif);
font-size: var(--fs-body);
font-weight: 500;
color: var(--ivory);
}
.vk__link-pfeil {
width: 20px;
height: 20px;
color: var(--ivory-45);
transform: rotate(-90deg);
transition: transform var(--t-hover) var(--ease-out), color var(--t-hover) var(--ease-out);
}
.vk__link:hover,
.vk__link:focus-visible {
border-color: var(--line-gold);
background: var(--bg-1);
transform: translateY(var(--hub));
}
.vk__link:hover .vk__link-pfeil,
.vk__link:focus-visible .vk__link-pfeil {
color: var(--gold-bright);
transform: rotate(-90deg) translateY(-3px);
}
.vk__dienste {
display: grid;
gap: 10px;
}
.vk__dienst {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 56px;
padding: 0 16px;
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ivory-70);
text-decoration: none;
font-family: var(--font-sans);
font-size: var(--fs-body-s);
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.vk__dienst .ic {
width: 18px;
height: 18px;
flex: none;
color: var(--gold);
}
.vk__dienst:hover,
.vk__dienst:focus-visible {
color: var(--ivory);
border-color: var(--line-gold);
}
.vk__adresse {
font-style: normal;
text-align: center;
}
.vk__adresse a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 44px;
color: var(--ivory-70);
text-decoration: none;
font-size: var(--fs-body-s);
line-height: 1.5;
}
.vk__adresse .ic {
width: 20px;
height: 20px;
flex: none;
color: var(--gold);
}
.vk__adresse a:hover,
.vk__adresse a:focus-visible {
color: var(--ivory);
}
.vk__fuss {
padding-top: var(--flow-3);
border-top: 1px solid var(--line);
text-align: center;
display: grid;
justify-items: center;
gap: var(--flow-1);
}
.vk__marke {
display: grid;
justify-items: center;
gap: 12px;
padding: 10px 18px 12px;
border-radius: var(--radius);
color: var(--ivory);
text-decoration: none;
transition: background-color var(--t-hover) var(--ease-out);
}
.vk__marke img {
width: 120px;
height: auto;
display: block;
}
.vk__marke span {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 16px;
border: 1px solid var(--line-gold);
border-radius: var(--radius);
font-family: var(--font-sans);
font-size: var(--fs-small);
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: border-color var(--t-hover) var(--ease-out);
}
.vk__marke .ic {
width: 16px;
height: 16px;
color: var(--gold-bright);
}
.vk__marke:hover span,
.vk__marke:focus-visible span {
border-color: var(--gold);
}
.vk__fuss p {
margin: 0;
max-width: none;
color: var(--ivory-45);
font-size: var(--fs-small);
line-height: 1.6;
}
.vk__fuss .vk__rechtslinks {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 20px;
margin-top: 10px;
}
.vk__rechtslinks a {
display: inline-flex;
align-items: center;
min-height: 44px;
color: var(--ivory-70);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.vk__rechtslinks a:hover,
.vk__rechtslinks a:focus-visible {
color: var(--ivory);
border-color: var(--gold);
}
@media (min-width: 30rem) {
.vk__aktionen {
grid-template-columns: repeat(4, 1fr);
}
.vk__aktion {
min-height: 78px;
}
}
@media (prefers-reduced-motion: reduce) {
.vk__aktion,
.vk__link,
.vk__link-pfeil,
.vk__speichern,
.vk__kanal,
.vk__dienst {
transition: none;
}
.vk__aktion:hover,
.vk__link:hover {
transform: none;
}
}
.feat,
.step,
.plan,
.quote {
transition: background var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out),
box-shadow var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.feat:hover,
.step:hover,
.plan:hover {
background: var(--bg-2);
transform: translateY(var(--hub));
box-shadow: inset 0 2px 0 var(--gold);
}
.section--panel .feat:hover,
.section--panel .step:hover,
.section--panel .plan:hover {
background: var(--bg-1);
}
.quote:hover {
transform: translateY(var(--hub));
border-color: var(--gold);
}
.offer {
transition: transform var(--t-hover) var(--ease-out), box-shadow var(--t-hover) var(--ease-out);
}
.offer:hover {
transform: translateY(var(--hub));
box-shadow: inset 0 2px 0 var(--gold-bright);
}
.xsell__item:hover {
transform: translateX(4px);
}
.xsell__item {
transition: background var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.person__channels a:hover {
transform: translateX(8px);
}
.person__channels a {
transition: color var(--t-hover) var(--ease-out), transform var(--t-hover) var(--ease-out);
}
.tile {
transition: border-color var(--t-hover) var(--ease-out), transform var(--t-enter) var(--ease-out),
box-shadow var(--t-enter) var(--ease-out);
}
.tile:hover {
border-color: var(--gold);
transform: translateY(var(--hub));
}
.tile__bg::after {
transition: background var(--t-enter) var(--ease-out);
}
.tile:hover .ic {
color: var(--gold-bright);
}
.tile:hover .tile__go,
.tile:focus-visible .tile__go {
border-color: var(--gold);
background: var(--gold);
background-image: var(--grad-gold);
color: var(--ink);
}
.tile:hover .tile__go .ic,
.tile:focus-visible .tile__go .ic {
color: currentColor;
}
.site-header {
transition: background var(--t-hover) var(--ease-out), border-color var(--t-hover) var(--ease-out);
}
.site-header.is-scrolled {
background: rgba(17, 26, 31, 0.98);
border-bottom-color: var(--gold);
}
@media (hover: none), (pointer: coarse) {
.tile:hover,
.feat:hover,
.step:hover,
.plan:hover,
.offer:hover,
.quote:hover,
.xsell__item:hover,
.socials a:hover,
.trust-avatars__badge:hover,
.proven__badge:hover,
.quick a:hover,
.tile:hover .tile__bg img,
.offer:hover .offer__img img,
.galerie__bild:hover img {
transform: none;
}
.socials a:hover,
.btn--gold:hover,
.trust-avatars__badge:hover,
.proven__badge:hover {
box-shadow: none;
filter: none;
}
.person__channels a:hover {
padding-left: 2px;
}
}
.rfield input[type='range']::-webkit-slider-runnable-track {
height: 6px;
border-radius: var(--radius);
background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}
.rfield input[type='range']::-webkit-slider-thumb {
width: 22px;
height: 22px;
margin-top: -8px;
background: var(--ivory);
border: 2px solid var(--gold-deep);
}
.rfield input[type='range']::-moz-range-track {
height: 6px;
border-radius: var(--radius);
background: linear-gradient(90deg, var(--gold-bright), var(--gold));
}
.rfield input[type='range']::-moz-range-thumb {
width: 22px;
height: 22px;
background: var(--ivory);
border: 2px solid var(--gold-deep);
}
.opener {
margin-bottom: var(--flow-3);
}
.opener__kopf {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
column-gap: var(--flow-4);
}
.opener__kopf h1 {
grid-column: 1 / -1;
}
.opener__kopf .lead {
grid-column: 2;
margin-top: var(--flow-2);
max-width: var(--mass-lesen);
}
@media (max-width: 900px) {
.opener__kopf {
grid-template-columns: minmax(0, 1fr);
}
.opener__kopf .lead {
grid-column: 1;
margin-top: 22px;
max-width: none;
}
}
.tiles-label {
margin-top: var(--flow-2);
font-family: var(--font-serif);
font-style: italic;
color: var(--ivory);
font-variation-settings: 'opsz' 24;
}
@media (max-width: 900px) {
.tiles-label {
text-align: center;
}
.tiles {
gap: 18px;
}
}
.trust-avatars__rechts {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.bafin-siegel {
display: block;
width: 118px;
height: 118px;
margin-right: 36px;
color: var(--gold);
}
.bafin-siegel svg {
width: 100%;
height: 100%;
overflow: visible;
}
.bafin-siegel__aussen {
fill: rgba(17, 26, 31, 0.6);
stroke: var(--gold);
stroke-width: 1;
}
.bafin-siegel__innen {
fill: none;
stroke: var(--gold);
stroke-width: 0.75;
stroke-dasharray: 2 3;
}
.bafin-siegel__text {
font-family: var(--font-sans);
font-size: 9.2px;
font-weight: 500;
letter-spacing: 0.13em;
text-transform: uppercase;
fill: var(--ivory);
}
.bafin-siegel__icon {
color: var(--gold-bright);
}
@media (max-width: 767px) {
.bafin-siegel {
margin-right: 0;
width: 84px;
height: 84px;
}
}
.trust-avatars__badge {
margin-left: auto;
flex: none;
display: inline-flex;
transition: transform var(--t-hover) var(--ease-out);
}
.trust-avatars__badge:hover {
transform: translateY(var(--hub));
filter: drop-shadow(0 4px 16px var(--gold-glow));
}
.trust-avatars__badge img {
width: 64px;
height: auto;
}
@media (max-width: 700px) {
.trust-avatars {
flex-wrap: wrap;
align-items: center;
gap: 16px 18px;
}
.trust-avatars__body {
order: 0;
flex: 1 1 0;
min-width: 0;
}
.trust-avatars__badge {
order: 1;
margin-left: 0;
}
.trust-avatars__stack {
order: 2;
width: 100%;
display: flex;
justify-content: center;
}
}
.trustline {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--flow-3);
padding: clamp(28px, 4vw, 44px) 0;
border-top: 1px solid var(--line);
border-bottom: 1px solid var(--line);
}
.trustline > span {
display: flex;
flex-direction: column;
gap: 6px;
font-size: var(--fs-body-s);
}
.trustline strong {
font-size: clamp(2.6rem, 4.8vw, 4rem);
line-height: 1;
font-weight: 500;
color: var(--gold-bright);
}
@media (max-width: 700px) {
.trustline {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--flow-2) 16px;
text-align: center;
}
.trustline strong {
font-size: 2.35rem;
}
}
.proven__badge {
margin-left: auto;
flex: none;
display: inline-flex;
transition: transform var(--t-hover) var(--ease-out);
}
.proven__badge:hover {
transform: translateY(var(--hub));
filter: drop-shadow(0 4px 16px var(--gold-glow));
}
.proven__badge img {
width: 84px;
height: auto;
}
@media (max-width: 700px) {
.proven {
align-items: flex-start;
}
.proven__badge {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 900px) {
.feat,
.step,
.plan,
.offer__body,
.quote,
.path-card,
.mechanik > div,
.kv th,
.kv td,
.tick-list,
.leitsaetze,
.checklist {
padding-inline: 0;
}
.pull {
padding-left: 0;
border-left: 0;
border-top: 1px solid var(--gold);
padding-top: 22px;
}
.rechner__result,
.steuer-hinweis,
.provi,
.schere__chart,
.inglory-note,
.clean-shares,
.leistungen-paket,
.form-state {
margin-inline: calc(var(--container-pad) * -1);
padding-inline: var(--container-pad);
max-width: none;
}
.tile {
padding-inline: var(--pad-x);
}
.stufe,
.stufe:first-child {
padding-inline: 14px;
}
}
@media (max-width: 700px) {
.legal ul,
.legal ol,
.legal__erlaubnisse {
padding-left: 1.05em;
}
}
@media (min-width: 768px) {
:root {
--container-pad: max(var(--pad-x), calc(75px - max(0px, (100vw - var(--container)) / 2)));
}
}