/* Startseite: redaktionelle Bildsprache in den Verwalterei-Markenfarben. */
.startseite {
  --grund: #f5f7fb;
  --flaeche: #ffffff;
  --flaeche-2: #edf1fb;
  --text: #34435b;
  --titel: #10233e;
  --leise: #56647a;
  --rand: #dce3ee;
  --marke: #5271ff;
  --marke-text: #3655db;
  --knopf: #5271ff;
  --knopf-hover: #3b58df;
  --knopf-text: #ffffff;
  color-scheme: light;
}
.startseite h1,
.startseite h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.045em; }
.startseite h1 em,
.startseite h2 em { font-weight: 400; }
.startseite .kopfleiste { position: absolute; inset: 0 0 auto; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
.startseite .kopfleiste .huelle { max-width: 90rem; min-height: 80px; }
.startseite .marke,
.startseite .navi a { color: #fff; }
.startseite .marke img { filter: brightness(0) invert(1); }
.startseite .navi a:hover,
.startseite .navi a[aria-current="page"] { color: #fff; background: rgb(255 255 255 / .13); }
.startseite .kopf-cta .knopf { background: rgb(255 255 255 / .07); color: #fff; border-color: rgb(255 255 255 / .65); }
.startseite .kopf-cta .knopf:hover { background: #fff; color: #132a55; border-color: #fff; }
.startseite .kopf-cta .knopf-zweit { background: #fff; color: #1f3ab0; border-color: #fff; }
.startseite .kopf-cta .knopf-zweit:hover { background: #ecf0ff; }
.startseite .sprung { background: #fff; color: #162b55; }

.home-hero { position: relative; isolation: isolate; min-height: min(910px, 100svh); background: #102344; color: #fff; overflow: hidden; }
.home-hero-image,
.home-hero-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero-image { object-fit: cover; object-position: center 51%; z-index: -2; }
.home-hero-shade { z-index: -1; background: linear-gradient(90deg, rgb(8 23 47 / .94) 0%, rgb(12 31 62 / .79) 36%, rgb(10 27 53 / .38) 69%, rgb(7 18 37 / .12) 100%), linear-gradient(0deg, rgb(8 21 44 / .55), transparent 36%); }
.home-hero-content { position: relative; padding-top: clamp(12rem, 25vh, 17rem); padding-bottom: 10rem; }
.home-eyebrow,
.home-kicker,
.home-launch-label,
.home-card-index { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.home-eyebrow { color: #cfdaff; margin: 0 0 1.7rem; }
.home-hero h1 { max-width: 61rem; color: #fff; font-size: clamp(3.4rem, 6.3vw, 6.5rem); line-height: 1.02; margin: 0 0 1.5rem; text-wrap: balance; }
.home-hero h1 em { color: #dce5ff; }
.home-lead { max-width: 41rem; color: #e4eafb; font-size: clamp(1.04rem, 1.45vw, 1.3rem); line-height: 1.62; margin-bottom: 1.9rem; }
.home-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.8rem; }
.home-actions .knopf { background: #fff; border-color: #fff; color: #193383; min-height: 58px; }
.home-actions .knopf:hover { background: #e5ebff; border-color: #e5ebff; }
.home-text-link { display: inline-flex; align-items: center; gap: .55rem; min-height: 48px; color: #fff; font-weight: 750; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .6); }
.home-text-link:hover { color: #dce5ff; }
.home-hero-note { color: #c3cfe5; margin: 2.3rem 0 0; font-size: .91rem; letter-spacing: .01em; }
.home-image-credit { position: absolute; bottom: 2.4rem; left: max(2.5rem, calc((100vw - 72rem) / 2)); color: #c1cbe0; font-size: .68rem; letter-spacing: .06em; }
.home-scroll { position: absolute; bottom: 2.3rem; right: max(2.5rem, calc((100vw - 72rem) / 2)); display: inline-flex; align-items: center; gap: 1.2rem; color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; }
.home-scroll span { font-size: 1.6rem; font-weight: 400; }

.home-launch { background: #e9eefa; border-bottom: 1px solid #d9e2f4; }
.home-launch-inner { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem 2rem; min-height: 112px; padding-block: 1.15rem; }
.home-launch-label { color: #3655db; margin-bottom: .24rem; }
.home-launch p { color: #152b4c; font-weight: 700; margin: 0; }
.home-launch p span { color: #73829f; padding: 0 .3rem; }
.home-launch .countdown-box { display: flex; gap: 1.1rem; align-items: center; margin: 0; padding: 0; max-width: none; border: 0; background: none; box-shadow: none; }
.home-launch .countdown-titel { color: #516179; font-size: .81rem; margin: 0; white-space: nowrap; }
.home-launch .countdown { display: flex; gap: .3rem; }
.home-launch .feld { display: flex; flex-direction: column; justify-content: center; min-width: 3.5rem; padding: .35rem .3rem; background: #fff; border: 1px solid #dce4f6; border-radius: 3px; }
.home-launch .zahl { font-size: 1.18rem; }
.home-launch .einheit { font-size: .59rem; }
.home-launch .verfuegbar { color: #0d6f4b; font-size: 1rem; }
.gestartet .home-launch .countdown { display: none; }

.home-section { padding: clamp(5rem, 8vw, 8rem) 0; }
.home-kicker { color: #3859d9; margin-bottom: 1.15rem; }
.home-section h2,
.home-showcase h2,
.home-bottom-cta h2 { font-size: clamp(2.5rem, 4.5vw, 4.7rem); line-height: 1.08; margin: 0 0 1.2rem; text-wrap: balance; }
.home-section p { color: var(--text); }
.home-inline-link { display: inline-flex; align-items: center; gap: .8rem; min-height: 44px; color: #3151c8; font-weight: 800; text-decoration: none; border-bottom: 1px solid #3151c8; }
.home-inline-link:hover { color: #1d3285; }
.home-intro-grid { display: grid; grid-template-columns: 1.1fr .9fr; align-items: start; gap: 4rem 8rem; }
.home-intro h2 { max-width: 39rem; }
.home-intro h2 em { color: #4565e3; }
.home-intro-copy { padding-top: 1.5rem; max-width: 35rem; }
.home-intro-copy p { font-size: 1.15rem; line-height: 1.8; }
.home-intro-copy .home-inline-link { margin-top: .7rem; }

.home-showcase { padding: clamp(5rem, 8vw, 8rem) 0 7rem; background: #102345; color: #fff; overflow: hidden; }
.home-showcase .home-kicker { color: #aebfff; }
.home-showcase h2 { color: #fff; }
.home-showcase h2 em { color: #c7d4ff; }
.home-showcase-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem 5rem; margin-bottom: 2.7rem; }
.home-showcase-heading p { max-width: 25rem; color: #cfdaeb; font-size: 1.08rem; }
.home-product-stage { position: relative; padding: 0 10% 3% 0; }
.home-desktop-screen { margin: 0; background: #fff; border: 10px solid #dde5f0; border-radius: 14px; box-shadow: 0 36px 70px rgb(0 0 0 / .36); overflow: hidden; }
.home-desktop-screen img { display: block; width: 100%; }
.home-desktop-screen figcaption,
.home-mobile-screen figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.home-mobile-screen { position: absolute; width: min(20%, 13rem); right: 0; bottom: 0; margin: 0; background: #fff; border: 7px solid #e9edf7; border-radius: 22px; box-shadow: 0 20px 45px rgb(0 0 0 / .4); overflow: hidden; }
.home-mobile-screen img { display: block; width: 100%; }

.home-section-heading { max-width: 48rem; margin-bottom: 2.5rem; }
.home-section-heading h2 em { color: #4565e3; }
.home-section-heading p { max-width: 38rem; font-size: 1.1rem; }
.home-audience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.home-audience { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 23rem; padding: 2rem; background: #fff; border: 1px solid #dce3ee; border-top: 3px solid #5271ff; box-shadow: 0 18px 35px rgb(14 38 75 / .04); transition: transform .2s ease, box-shadow .2s ease; }
.home-audience:hover { transform: translateY(-4px); box-shadow: 0 24px 40px rgb(14 38 75 / .11); }
.home-card-index { color: #3d5bdd; margin-bottom: 3rem; }
.home-audience h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: 1.9rem; line-height: 1.13; margin-bottom: 1rem; overflow-wrap: anywhere; }
.home-audience p { margin-bottom: 1.5rem; line-height: 1.7; }
.home-audience a { margin-top: auto; align-self: flex-start; display: inline-flex; gap: .6rem; color: #3655db; font-weight: 750; text-decoration: none; border-bottom: 1px solid #3655db; }
.home-audience a:hover { color: #1e348f; }

.home-process { background: #eaf0fa; }
.home-process-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 4rem 8rem; align-items: start; }
.home-process h2 em { color: #4565e3; }
.home-process-grid > div > p { max-width: 30rem; font-size: 1.09rem; }
.home-process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid #ccd7e9; }
.home-process-list li { display: grid; grid-template-columns: 3.8rem 1fr; gap: 1.1rem; padding: 1.4rem 0; border-bottom: 1px solid #ccd7e9; }
.home-process-list li > span { color: #4260db; font-weight: 800; letter-spacing: .08em; padding-top: .2rem; }
.home-process-list h3 { font-size: 1.14rem; margin-bottom: .35rem; }
.home-process-list p { margin: 0; max-width: 29rem; }

.home-facts { background: #3d5bea; color: #fff; }
.home-facts-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.home-facts-grid > div { display: flex; flex-direction: column; gap: .4rem; padding: 2.2rem 1.5rem; border-right: 1px solid rgb(255 255 255 / .35); }
.home-facts-grid > div:first-child { padding-left: 0; }
.home-facts-grid > div:last-child { border: 0; }
.home-facts strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.6rem, 2.5vw, 2.6rem); font-weight: 400; line-height: 1.1; }
.home-facts span { color: #e5eaff; font-size: .92rem; }

.home-detail-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 3rem 6rem; align-items: center; }
.home-detail-image { position: relative; padding: 1rem; background: #e5ecfa; }
.home-detail-image::before { content: ""; position: absolute; width: 45%; height: 40%; bottom: -1.5rem; left: -1.5rem; border: 1px solid #8097ee; z-index: -1; }
.home-detail-image img { display: block; width: 100%; box-shadow: 0 20px 40px rgb(17 37 70 / .14); }
.home-detail-copy h2 em { color: #4565e3; }
.home-detail-copy p { font-size: 1.13rem; line-height: 1.8; }

.home-bottom-cta { padding: clamp(5rem, 8vw, 8rem) 0; color: #fff; background: radial-gradient(42rem 36rem at 95% 5%, rgb(82 113 255 / .28), transparent 72%), #112449; }
.home-bottom-cta .home-kicker { color: #aebfff; }
.home-bottom-cta h2 { color: #fff; max-width: 48rem; }
.home-bottom-cta h2 em { color: #cdd7ff; }
.home-bottom-cta p { color: #d1dbee; max-width: 36rem; font-size: 1.1rem; }
.home-bottom-grid { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: end; }
.home-bottom-actions { display: flex; flex-direction: column; gap: 1.2rem; align-items: flex-start; }
.home-bottom-actions .knopf { background: #fff; border-color: #fff; color: #1b3684; min-width: 15rem; }
.home-bottom-actions .knopf:hover { background: #e5ebff; }
.home-bottom-actions > a:not(.knopf) { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgb(255 255 255 / .7); }
.startseite .fuss { margin-top: 0; }
.home-intro-grid > *,
.home-process-grid > *,
.home-detail-grid > * { min-width: 0; }

@media (max-width: 960px) {
  .startseite .menue-knopf { background: rgb(255 255 255 / .08); border-color: rgb(255 255 255 / .65); color: #fff; }
  .startseite .navi { background: #102345; border-color: rgb(255 255 255 / .2); }
  .startseite .navi a { color: #fff; }
  .startseite .navi a:hover { background: rgb(255 255 255 / .13); }
  .startseite .js-aus .navi { background: transparent; }
  .home-intro-grid,
  .home-process-grid,
  .home-detail-grid { gap: 2.5rem; }
  .home-audience-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .startseite .kopfleiste .huelle { min-height: 68px; }
  .startseite .kopf-cta .knopf { padding-inline: .72rem; font-size: .85rem; }
  .home-hero { min-height: 44rem; }
  .home-hero-image { object-position: 62% center; }
  .home-hero-shade { background: linear-gradient(90deg, rgb(8 23 47 / .93), rgb(12 31 62 / .62)), linear-gradient(0deg, rgb(8 21 44 / .65), transparent 48%); }
  .home-hero-content { padding-top: 11rem; padding-bottom: 7rem; }
  .home-hero h1 { max-width: 42rem; font-size: clamp(3.1rem, 10vw, 5.5rem); }
  .home-scroll { display: none; }
  .home-image-credit { left: 1.25rem; bottom: 1rem; }
  .home-launch-inner { flex-direction: column; align-items: flex-start; }
  .home-intro-grid,
  .home-process-grid,
  .home-detail-grid,
  .home-bottom-grid { grid-template-columns: 1fr; }
  .home-intro-copy { padding-top: 0; }
  .home-showcase-heading { display: block; }
  .home-showcase-heading p { max-width: 32rem; }
  .home-facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-facts-grid > div { padding: 1.6rem 1rem; border-bottom: 1px solid rgb(255 255 255 / .35); }
  .home-facts-grid > div:nth-child(2) { border-right: 0; }
  .home-facts-grid > div:nth-child(n+3) { border-bottom: 0; }
  .home-facts-grid > div:nth-child(3) { padding-left: 0; }
  .home-bottom-actions { align-items: flex-start; }
}
@media (max-width: 520px) {
  .home-hero { min-height: 42rem; }
  .home-hero-content { padding-top: 9rem; padding-bottom: 5rem; }
  .home-hero h1 { font-size: clamp(2.75rem, 11vw, 4.2rem); }
  .home-lead { font-size: 1rem; }
  .home-actions { align-items: flex-start; flex-direction: column; gap: .75rem; }
  .home-actions .knopf { width: 100%; justify-content: space-between; }
  .home-hero-note { margin-top: 1.5rem; }
  .home-launch p { font-size: .92rem; }
  .home-launch p span { display: none; }
  .home-launch .countdown-box { width: 100%; align-items: flex-start; flex-direction: column; gap: .5rem; }
  .home-launch .countdown { width: 100%; }
  .home-launch .feld { flex: 1; }
  .home-audience-grid { grid-template-columns: 1fr; }
  .home-audience { min-height: 0; }
  .home-card-index { margin-bottom: 2rem; }
  .home-showcase { padding-bottom: 5rem; }
  .home-product-stage { padding: 0 7% 2% 0; }
  .home-desktop-screen { border-width: 4px; border-radius: 8px; }
  .home-mobile-screen { width: 25%; border-width: 3px; border-radius: 9px; }
  .home-facts-grid { grid-template-columns: 1fr 1fr; }
  .home-facts strong { font-size: 1.6rem; }
  .home-facts span { font-size: .82rem; }
  .home-detail-image::before { display: none; }
}
@media (max-width: 360px) {
  .home-intro h2 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  .home-audience { transition: none; }
}