:root {
    color-scheme: light;
    box-sizing: border-box;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px)
}

html {
    scroll-padding-top: env(safe-area-inset-top, 0px)
}

body {
    margin: 0;
    padding: 0;
    font: 14px -apple-system, BlinkMacSystemFont, sans-serif;
    background: #fff;
    color: #000
}

img {
    max-width: 100%
}

[hidden]:not([hidden=until-found i]) {
    display: none !important
}

.bento .bt {
    background: #fff !important;
    border: 1px solid var(--line) !important
}

.bento .bt-app {
    border: 2px solid #FFC600 !important
}

.bento .bt-k {
    color: #6b6b6b !important
}

.bento .bt .proof {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    font-size: 15px;
    font-weight: 600;
    color: #0D0D0D
}

.bento .bt-row .bt-v {
    background: #F7F7F7 !important;
    border-left: 1px solid var(--line)
}

.bento .bt-app .bt-v.bt-v-ph {
    background: #F7F7F7;
    margin: auto -28px 0;
    width: calc(100% + 56px);
    border-top: 1px solid var(--line);
    padding-top: 22px;
    height: 300px !important
}

.bento .bt-app p {
    color: #4a4a4a
}

.bento .bt:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(13, 13, 13, .07)
}

@media (max-width: 900px) {
    .bento .bt-row .bt-v {
        border-left: 0;
        border-top: 1px solid var(--line)
    }
}

.wsx-v.wx {
    background: transparent
}

.wx-post {
    box-shadow: 0 24px 60px rgba(13, 13, 13, .10) !important
}

.wx-vid {
    background: #1d1d1d !important;
    padding: 10px !important;
    gap: 6px
}

.wx-img {
    position: absolute;
    inset: 0;
    background: url(assets/13f4dac01965.jpg) center/cover;
    filter: grayscale(1) brightness(.55);
    transition: filter .6s
}

.wx-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .7))
}

.wx.b .wx-img {
    filter: none
}

.wx-side {
    position: absolute;
    right: 6px;
    bottom: 62px;
    display: grid;
    gap: 9px;
    z-index: 1
}

.wx-side i {
    font-style: normal;
    color: #fff;
    font-size: 15px;
    display: grid;
    justify-items: center;
    line-height: 1
}

.wx-side small {
    font-size: 8.5px;
    font-weight: 600;
    margin-top: 2px
}

.wx-hook {
    z-index: 1
}

.wx-who {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1px;
    padding-right: 28px
}

.wx-who small {
    font-size: 9px;
    font-weight: 500;
    opacity: .85
}

.wx-cta {
    position: relative;
    z-index: 1;
    background: #555;
    color: #fff;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    text-align: center;
    padding: 5px;
    opacity: 0;
    transform: translateY(4px);
    transition: all .4s
}

.wx.b .wx-cta {
    background: #FFC600;
    color: #0D0D0D;
    opacity: 1;
    transform: none
}

.wx-bar {
    position: relative;
    z-index: 1;
    display: block;
    height: 2px;
    background: rgba(255, 255, 255, .3);
    border-radius: 2px
}

.wx-bar u {
    display: block;
    height: 100%;
    width: 8%;
    background: #fff;
    transition: width 1s
}

.wx.b .wx-bar u {
    width: 70%
}

.ats2 {
    grid-template-columns:auto 150px 560px !important;
    justify-content: center;
    column-gap: 0
}

.a2-src {
    justify-self: end
}

.a2-alt {
    justify-content: center
}

@media (max-width: 900px) {
    .ats2 {
        grid-template-columns:minmax(0, 1fr) !important
    }

    .a2-src {
        justify-self: stretch
    }
}

.wx-hook {
    top: 20% !important
}

.wx-side {
    bottom: 66px !important
}

.team .tm-ph {
    border-radius: 20px;
    background: #E9E9E9
}

.team .tm-ph img {
    filter: grayscale(1) contrast(1.05) brightness(1.03);
    object-position: 50% 28%;
    transition: filter .35s, transform .35s
}

.team .tm:hover .tm-ph img {
    filter: none;
    transform: scale(1.03)
}

.team .tm-ini, .team .tm-ini.t0, .team .tm-ini.t1, .team .tm-ini.t2 {
    background: #E9E9E9 !important;
    color: #9a9a9a !important
}

.pr-h {
    display: grid;
    grid-template-columns:minmax(0, 1fr) 420px;
    gap: 64px;
    align-items: center
}

.pr-t {
    display: grid;
    gap: 20px;
    justify-items: start
}

.pr-steps {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    font-size: 15px;
    font-weight: 600
}

.pr-steps li {
    display: flex;
    align-items: center;
    gap: 8px
}

.pr-steps b {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 12.5px
}

.pr-v {
    position: relative;
    padding: 20px 0
}

.pr-mail {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 22px;
    padding: 22px;
    display: grid;
    gap: 16px;
    box-shadow: 0 30px 70px rgba(13, 13, 13, .10);
    animation: prF 6s ease-in-out infinite
}

@keyframes prF {
    50% {
        transform: translateY(-6px)
    }
}

.pr-mh {
    display: flex;
    gap: 12px;
    align-items: center
}

.pr-mh i {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #FFC600;
    font-style: normal;
    font-weight: 800;
    display: grid;
    place-items: center
}

.pr-mh b {
    display: block;
    font-size: 16px
}

.pr-mh small {
    font-size: 12.5px;
    color: #6b6b6b
}

.pr-rows {
    display: grid;
    border-top: 1px solid #eee
}

.pr-rows p {
    margin: 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px
}

.pr-rows span {
    color: #6b6b6b
}

.pr-sum {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F2F2F2;
    border-radius: 14px;
    padding: 14px 16px;
    font-weight: 600
}

.pr-sum b {
    display: flex;
    gap: 5px
}

.pr-sum b i {
    width: 14px;
    height: 22px;
    border-radius: 4px;
    background: #d6d6d6;
    animation: prB 1.6s ease-in-out infinite
}

.pr-sum b i:nth-child(2) {
    animation-delay: .15s
}

.pr-sum b i:nth-child(3) {
    animation-delay: .3s
}

.pr-sum b i:nth-child(4) {
    animation-delay: .45s
}

@keyframes prB {
    50% {
        background: #FFC600
    }
}

.pr-ft {
    font-size: 12.5px;
    color: #6b6b6b;
    text-align: center
}

.pr-tag {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .08)
}

.pr-tag.t1 {
    left: -34px;
    top: 38%
}

.pr-tag.t2 {
    right: -22px;
    bottom: 4px
}

@media (max-width: 900px) {
    .pr-h {
        grid-template-columns:minmax(0, 1fr);
        gap: 28px
    }

    .pr-tag.t1 {
        left: -6px
    }

    .pr-tag.t2 {
        right: -6px
    }
}

.pr-h {
    grid-template-columns:minmax(0, 1fr) 390px;
    gap: 48px
}

@media (min-width: 901px) {
    .pr-h h1 {
        white-space: nowrap;
        font-size: clamp(34px, 4.3vw, 62px)
    }
}

.pr-tag.t1 {
    left: auto;
    right: -14px;
    top: -2px
}

.kc-orb {
    position: relative;
    width: 150px;
    height: 96px
}

.kc-jj {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    margin: -29px 0 0 -29px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .15);
    z-index: 2
}

.kc-jj img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.kc-o {
    position: absolute;
    width: 34px;
    height: 34px;
    transition: transform .5s
}

.kc-o img {
    width: 100%;
    height: 100%;
    border-radius: 9px;
    display: block
}

.kc-o.o0 {
    left: 4px;
    top: 4px
}

.kc-o.o1 {
    right: 4px;
    top: 4px
}

.kc-o.o2 {
    left: 50%;
    margin-left: -17px;
    bottom: -6px
}

.kc-orb::before {
    content: "";
    position: absolute;
    inset: 14px 18px;
    border: 1.5px dashed #d6d6d6;
    border-radius: 50%
}

.kj-s.on .kc-o.o0 {
    transform: translate(6px, 6px)
}

.kj-s.on .kc-o.o1 {
    transform: translate(-6px, 6px)
}

.kj-s.on .kc-o.o2 {
    transform: translateY(-6px)
}

.kj-s.on .kc-jj {
    animation: kcPop .6s
}

@keyframes kcPop {
    40% {
        transform: scale(1.12)
    }
}

.kc-feed {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%
}

.kc-vid2 {
    position: relative;
    flex: none;
    width: 72px;
    height: 124px;
    border-radius: 12px;
    overflow: hidden;
    background: #1d1d1d url(assets/13f4dac01965.jpg) center/cover;
    display: grid;
    place-items: center
}

.kc-vid2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .05), rgba(0, 0, 0, .45))
}

.kc-vid2 > * {
    position: relative;
    z-index: 1
}

.kc-vid2 .kc-cap {
    position: absolute;
    left: 5px;
    right: 5px;
    top: 10px;
    background: #fff;
    border-radius: 4px;
    font-size: 8px;
    font-weight: 700;
    padding: 3px;
    text-align: center
}

.kc-likes {
    position: absolute !important;
    left: 6px;
    bottom: 12px;
    color: #fff;
    font-size: 9px;
    font-weight: 700
}

.kc-vid2 em {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 5px;
    height: 2px;
    background: rgba(255, 255, 255, .35);
    border-radius: 2px
}

.kc-vid2 em u {
    display: block;
    height: 100%;
    width: 0;
    background: #fff
}

.kj-s.on .kc-vid2 em u {
    animation: kcBar 1.8s linear forwards
}

.kj-s.on .kc-play {
    opacity: 0;
    transition: opacity .3s
}

.kc-meta {
    display: grid;
    gap: 4px;
    text-align: left;
    min-width: 0
}

.kc-meta b {
    font-size: 12.5px
}

.kc-meta small {
    font-size: 11px;
    color: #6b6b6b
}

.kc-v {
    font-size: 11.5px;
    font-weight: 600;
    margin-top: 4px
}

.kc-like {
    font-size: 11px;
    font-weight: 700;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px 9px;
    justify-self: start;
    transition: background .4s
}

.kj-s.on .kc-like {
    background: #FFF5CC
}

.kc-reach {
    display: flex;
    align-items: center;
    gap: 10px
}

.kc-jj2 {
    width: 54px;
    height: 54px;
    border-radius: 15px;
    overflow: hidden;
    flex: none
}

.kc-jj2 img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover
}

.kc-plus {
    font-size: 20px;
    font-weight: 600;
    color: #9a9a9a
}

.kc-soc {
    display: grid;
    grid-template-columns:repeat(3, 30px);
    gap: 6px
}

.kc-soc img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: block;
    transition: transform .4s
}

.kj-s.on .kc-soc img {
    transform: translateY(-3px)
}

.kj-s.on .kc-soc img:nth-child(2) {
    transition-delay: .1s
}

.kj-s.on .kc-soc img:nth-child(3) {
    transition-delay: .2s
}

.kc-pin {
    font-size: 12.5px;
    color: #6b6b6b;
    font-weight: 500
}

.kj2 .kj-s .kc-meta b {
    font-size: 13px;
    letter-spacing: 0;
    color: #0D0D0D
}

.kj2 .kj-s .kc-meta small {
    font-size: 11.5px;
    font-weight: 400;
    letter-spacing: 0;
    color: #6b6b6b
}

.kj2 .kj-s .kc-meta .kc-v {
    font-size: 12px;
    color: #0D0D0D;
    max-width: none;
    line-height: 1.3
}

.kc-v i {
    font-style: normal;
    font-weight: 700
}

.kj2 .kj-s .kc-meta .kc-like {
    font-size: 11px;
    color: #0D0D0D;
    line-height: 1.3;
    max-width: none
}

.kj2 .kj-s.on .kj-card {
    border-color: #e5e5e5 !important
}

.kj2 .kj-s small {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e5e5e5;
    color: #6b6b6b !important;
    display: grid;
    place-items: center;
    letter-spacing: 0 !important;
    font-size: 12px !important;
    transition: background .4s, color .4s
}

.kj2 .kj-s.on small {
    background: #0D0D0D;
    color: #fff !important
}

.kj2 .kj-s .kc-meta small {
    width: auto;
    height: auto;
    background: none;
    display: block;
    color: #6b6b6b !important
}

.kq2 .kqs {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity .45s;
    pointer-events: none
}

.kq2[data-s="0"] .kq-tk, .kq2[data-s="1"] .kq-tk, .kq2[data-s="3"] .kq-ok {
    opacity: 1
}

.kq-tk {
    background: #111 url(assets/13f4dac01965.jpg) center/cover;
    color: #fff;
    font-size: 8px
}

.kq-tk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .25), transparent 30%, transparent 50%, rgba(0, 0, 0, .75))
}

.kq-tk > * {
    position: absolute;
    z-index: 1
}

.kq-tkt {
    top: 36px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 9px;
    opacity: .9
}

.kq-tkt b {
    border-bottom: 1.5px solid #fff
}

.kq-tks {
    right: 7px;
    bottom: 96px;
    display: grid;
    gap: 9px;
    text-align: center;
    font-size: 13px
}

.kq-tks small {
    display: block;
    font-size: 7px;
    font-weight: 600
}

.kq-tkc {
    left: 9px;
    right: 38px;
    bottom: 56px;
    display: grid;
    gap: 2px
}

.kq-tkc b {
    font-size: 9px
}

.kq-tkc em {
    font-style: normal;
    opacity: .75;
    font-size: 7px
}

.kq-cta {
    left: 9px;
    right: 9px;
    bottom: 24px;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 7px;
    text-align: center;
    font-weight: 700;
    font-size: 9px;
    padding: 7px;
    transition: transform .3s
}

.kq2[data-s="1"] .kq-cta {
    transform: scale(.95)
}

.kq-tap {
    position: absolute;
    right: 22%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin-top: -11px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .7);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .3);
    opacity: 0;
    transform: scale(.4)
}

.kq2[data-s="1"] .kq-tap {
    animation: kqTap 1.2s ease-out .2s forwards
}

@keyframes kqTap {
    30% {
        opacity: 1;
        transform: scale(1)
    }
    100% {
        opacity: 0;
        transform: scale(1.6)
    }
}

.kq-pr {
    left: 0;
    right: 0;
    bottom: 12px;
    height: 2px;
    background: rgba(255, 255, 255, .3)
}

.kq-pr u {
    display: block;
    height: 100%;
    width: 30%;
    background: #fff;
    transition: width 1.8s linear
}

.kq2[data-s="0"] .kq-pr u {
    width: 75%
}

.kq-ok {
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 20px 14px
}

.kq-okc {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 700;
    transform: scale(.6);
    transition: transform .5s cubic-bezier(.3, 1.6, .5, 1)
}

.kq2[data-s="3"] .kq-okc {
    transform: none
}

.kq-ok b {
    font-size: 12px
}

.kq-ok small {
    font-size: 9px;
    color: #6b6b6b
}

.kq-okb {
    margin-top: 10px;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    font-size: 8.5px;
    font-weight: 600;
    padding: 6px 10px
}

.kq2 .msc .isl {
    z-index: 5
}

.kq2 .kq-list li {
    cursor: pointer
}

.sx {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 480px);
    gap: 56px;
    align-items: center
}

.sx-t {
    display: grid;
    gap: 18px;
    justify-items: start
}

.sx-t h2 {
    white-space: nowrap
}

.sx-l {
    list-style: none;
    margin: 6px 0 4px;
    padding: 0;
    display: grid;
    gap: 14px
}

.sx-l li {
    display: flex;
    gap: 14px;
    align-items: flex-start
}

.sx-l b {
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 13px
}

.sx-l strong {
    display: block;
    font-size: 17px
}

.sx-l span {
    font-size: 15px;
    color: #4a4a4a
}

.sx-v {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 470px
}

.sx-ph1 {
    max-width: 228px !important
}

.sx-top {
    position: absolute;
    top: 34px;
    left: 12px;
    right: 12px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 10px
}

.sx-top b {
    font-size: 12px
}

.sx-top span {
    color: #6b6b6b
}

.sx-deck {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 56px;
    bottom: 62px
}

.sx-c {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 16px rgba(13, 13, 13, .12);
    transition: transform .6s cubic-bezier(.4, 0, .2, 1), opacity .6s;
    transform: translateY(calc(var(--k, 0) * 8px)) scale(calc(1 - var(--k, 0) * .04));
    z-index: calc(10 - var(--k, 0))
}

.sx-ph {
    position: absolute;
    inset: 0 0 70px;
    background-size: cover;
    background-position: center
}

.sx-b {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 70px;
    padding: 9px 11px;
    display: grid;
    gap: 2px;
    align-content: start
}

.sx-b b {
    font-size: 12.5px
}

.sx-b small {
    font-size: 9.5px;
    color: #6b6b6b
}

.sx-tg {
    display: flex;
    gap: 4px;
    margin-top: 3px
}

.sx-tg i {
    font-style: normal;
    font-size: 8px;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 2px 7px
}

.sx-st {
    position: absolute;
    top: 16px;
    font-size: 12px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 7px;
    border: 2px solid;
    opacity: 0;
    transition: opacity .25s;
    letter-spacing: .04em;
    text-transform: uppercase
}

.sx-st.y {
    left: 12px;
    color: #0D0D0D;
    background: #FFC600;
    border-color: #FFC600;
    transform: rotate(-10deg)
}

.sx-st.n {
    right: 12px;
    color: #fff;
    background: rgba(13, 13, 13, .6);
    border-color: transparent;
    transform: rotate(10deg)
}

.sx-c.goY {
    transform: translateX(130%) rotate(16deg) !important;
    opacity: 0
}

.sx-c.goY .sx-st.y {
    opacity: 1
}

.sx-c.goN {
    transform: translateX(-130%) rotate(-16deg) !important;
    opacity: 0
}

.sx-c.goN .sx-st.n {
    opacity: 1
}

.sx-btns {
    position: absolute;
    bottom: 16px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 22px
}

.sx-btns span {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(13, 13, 13, .12);
    background: #fff;
    transition: transform .2s
}

.sx-btns .y {
    background: #FFC600
}

.sx-v.pY .sx-btns .y, .sx-v.pN .sx-btns .n {
    transform: scale(1.18)
}

.sx-audio {
    position: absolute;
    left: -6px;
    bottom: 70px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: 0 14px 34px rgba(13, 13, 13, .10);
    animation: sxF 5s ease-in-out infinite
}

.sx-mic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center
}

.sx-audio small {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    margin-bottom: 4px
}

.sx-wave {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 18px
}

.sx-wave i {
    width: 3px;
    border-radius: 2px;
    background: #0D0D0D;
    height: 30%;
    animation: sxW 1s ease-in-out infinite
}

.sx-wave i:nth-child(3n) {
    animation-delay: .2s;
    height: 70%
}

.sx-wave i:nth-child(3n+1) {
    animation-delay: .4s;
    height: 50%
}

.sx-wave i:nth-child(n+12) {
    background: #cfcfcf
}

.sx-audio em {
    font-style: normal;
    font-size: 12px;
    color: #6b6b6b;
    font-variant-numeric: tabular-nums
}

@keyframes sxW {
    50% {
        transform: scaleY(.4)
    }
}

@keyframes sxF {
    50% {
        transform: translateY(-6px)
    }
}

.sx-toast {
    position: absolute;
    right: -4px;
    top: 70px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13.5px;
    box-shadow: 0 10px 26px rgba(13, 13, 13, .08);
    opacity: 0;
    transform: translateY(8px);
    transition: all .4s
}

.sx-v.pY .sx-toast {
    opacity: 1;
    transform: none
}

@media (max-width: 900px) {
    .sx {
        grid-template-columns:minmax(0, 1fr);
        gap: 30px
    }

    .sx-t h2 {
        white-space: normal
    }

    .sx-audio {
        left: 0
    }

    .sx-toast {
        right: 0
    }
}

.sx-audio {
    z-index: 4;
    left: 0 !important
}

.sx-toast {
    z-index: 4
}

.sx-ph1 {
    z-index: 1
}

@media (max-width: 900px) {
    .pr-h {
        grid-template-columns:minmax(0, 1fr)
    }

    .pr-tag.t1 {
        right: 0
    }
}

@media (max-width: 640px) {
    .kj2 .kj-steps {
        grid-template-columns:minmax(0, 1fr)
    }
}

.kc-meta {
    min-width: 0
}

.sx-audio {
    top: 250px;
    bottom: auto !important;
    left: -10px !important
}

@media (max-width: 900px) {
    .sx-audio {
        left: 0 !important;
        top: auto;
        bottom: 10px !important
    }
}

.ah2-vis .phone.rp {
    width: 270px !important
}

.ah2-vis .app-top .wm {
    font-size: 15px
}

.ah2-vis .seg span {
    font-size: 10.5px;
    padding: 5px 9px
}

.vz-q blockquote em {
    font: inherit;
    font-style: italic;
    font-size: inherit !important;
    line-height: inherit
}

.sw3-anim {
    position: relative
}

.sw3-anim .card {
    animation: sw3S 4.5s cubic-bezier(.4, 0, .2, 1) infinite;
    transform-origin: 50% 90%
}

@keyframes sw3S {
    0%, 30% {
        transform: none;
        opacity: 1
    }
    48% {
        transform: translateX(125%) rotate(16deg);
        opacity: 0
    }
    49% {
        transform: translateY(14px) scale(.94);
        opacity: 0
    }
    62% {
        transform: translateY(14px) scale(.94);
        opacity: 1
    }
    75%, 100% {
        transform: none;
        opacity: 1
    }
}

.sw3-like {
    position: absolute;
    left: 50%;
    top: 38%;
    width: 54px;
    height: 54px;
    margin: -27px 0 0 -27px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 24px;
    z-index: 3;
    opacity: 0;
    animation: sw3L 4.5s ease infinite
}

@keyframes sw3L {
    0%, 22% {
        opacity: 0;
        transform: scale(.4)
    }
    30% {
        opacity: 1;
        transform: scale(1.05)
    }
    42% {
        opacity: 1;
        transform: scale(1)
    }
    50%, 100% {
        opacity: 0;
        transform: scale(.8)
    }
}

.sw3-chip {
    position: absolute;
    right: 10px;
    top: 12px;
    z-index: 3;
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    padding: 5px 9px;
    opacity: 0;
    animation: sw3C 4.5s ease infinite
}

@keyframes sw3C {
    0%, 40% {
        opacity: 0;
        transform: translateY(6px)
    }
    48%, 70% {
        opacity: 1;
        transform: none
    }
    80%, 100% {
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .sw3-anim .card, .sw3-like, .sw3-chip {
        animation: none
    }
}

.vz-q blockquote em {
    font-family: inherit !important;
    font-weight: inherit !important;
    font-style: normal !important;
    letter-spacing: inherit;
    box-shadow: inset 0 -.32em 0 #FFC600
}

section.teamband {
    background: #FFF5CC
}

.teamband .team .tm-ph {
    background: #fff
}

.teamband .team .tm-ini, .teamband .team .tm-ini.t0, .teamband .team .tm-ini.t1, .teamband .team .tm-ini.t2 {
    background: #fff !important;
    color: #b5b5b5 !important
}

.bento .bt .link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin-top: 10px;
    height: 44px;
    padding: 0 10px 0 20px;
    border-radius: 999px;
    background: #0D0D0D;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s
}

.bento .bt .link::after {
    content: "→";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 13px;
    margin-left: 0
}

.bento .bt-row .link {
    background: transparent;
    color: #0D0D0D;
    border: 1.5px solid var(--line)
}

.bento .bt:hover .link {
    transform: translateY(-1px)
}

.bento .bt-v {
    position: relative
}

.bt-badge {
    position: absolute;
    z-index: 4;
    left: 14px;
    top: 14px;
    display: grid;
    gap: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 12px;
    color: #4a4a4a;
    line-height: 1.25;
    box-shadow: 0 10px 24px rgba(13, 13, 13, .08);
    text-align: left
}

.bt-badge b {
    font-size: 20px;
    color: #0D0D0D;
    letter-spacing: -.02em
}

.bento .bt-app .bt-badge {
    left: 22px;
    top: 22px
}

.bento .bt-row .bt-badge {
    left: 12px;
    top: auto;
    bottom: 12px
}

.bento .bt-app .bt-badge {
    left: 48px;
    top: 70px
}

.hub .ft-v.al2, .hub .ft-v.cv2 {
    height: auto;
    min-height: 150px
}

.al2 {
    gap: 10px !important;
    padding: 14px !important
}

.al2-sw {
    display: grid;
    gap: 6px
}

.al2-sw span {
    font-size: 10.5px;
    font-weight: 600;
    background: #fff;
    border-radius: 999px;
    padding: 4px 9px;
    white-space: nowrap;
    box-shadow: 0 3px 8px rgba(13, 13, 13, .06);
    opacity: 0;
    transform: translateX(-6px);
    animation: al2S 6s infinite
}

.al2-sw span.n {
    color: #8a8a8a
}

.al2-sw span:nth-child(2) {
    animation-delay: .4s
}

.al2-sw span:nth-child(3) {
    animation-delay: .8s
}

@keyframes al2S {
    0% {
        opacity: 0;
        transform: translateX(-6px)
    }
    8%, 85% {
        opacity: 1;
        transform: none
    }
    100% {
        opacity: 0
    }
}

.al2-arr {
    font-size: 16px;
    color: #b0b0b0
}

.al2-in {
    background: #fff;
    border-radius: 12px;
    padding: 9px 10px;
    display: grid;
    gap: 4px;
    width: 140px;
    box-shadow: 0 6px 16px rgba(13, 13, 13, .07)
}

.al2-in small {
    font-size: 9.5px;
    font-weight: 700
}

.al2-in > span {
    display: grid;
    grid-template-columns:48px 1fr;
    align-items: center;
    font-size: 9px;
    color: #6b6b6b
}

.al2-in > span em {
    font-style: normal
}

.al2-in > span i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #FFC600;
    width: var(--w);
    animation: al2B 6s infinite;
    transform-origin: left
}

@keyframes al2B {
    0%, 15% {
        transform: scaleX(0)
    }
    35%, 90% {
        transform: scaleX(1)
    }
    100% {
        transform: scaleX(1)
    }
}

.al2-rec {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 4px;
    padding-top: 6px;
    border-top: 1px solid #eee;
    opacity: 0;
    animation: al2R 6s infinite
}

@keyframes al2R {
    0%, 40% {
        opacity: 0;
        transform: translateY(4px)
    }
    50%, 92% {
        opacity: 1;
        transform: none
    }
    100% {
        opacity: 0
    }
}

.al2-ph {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    flex: none
}

.al2-rec b {
    display: block;
    font-size: 9.5px
}

.al2-rec small {
    font-size: 8.5px !important;
    font-weight: 500 !important;
    color: #6b6b6b
}

.cv2 {
    position: relative;
    padding: 14px !important
}

.cv2-doc {
    background: #fff;
    border-radius: 12px;
    padding: 11px 12px;
    width: min(230px, 100%);
    display: grid;
    gap: 5px;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .08);
    transform: rotate(-2deg)
}

.cv2-h {
    display: flex;
    gap: 8px;
    align-items: center;
    padding-bottom: 6px;
    border-bottom: 1px solid #eee
}

.cv2-h img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #FFC600
}

.cv2-h b {
    display: block;
    font-size: 11px
}

.cv2-h small {
    font-size: 8.5px;
    color: #6b6b6b
}

.cv2-doc p {
    margin: 0;
    display: grid;
    grid-template-columns:52px 1fr;
    font-size: 9px;
    opacity: 0;
    animation: cv2L 6s infinite
}

.cv2-doc p em {
    font-style: normal;
    font-weight: 700
}

.cv2-doc p span {
    color: #4a4a4a
}

.cv2-doc p:nth-of-type(2) {
    animation-delay: .5s
}

.cv2-doc p:nth-of-type(3) {
    animation-delay: 1s
}

@keyframes cv2L {
    0%, 8% {
        opacity: 0;
        transform: translateY(3px)
    }
    16%, 90% {
        opacity: 1;
        transform: none
    }
    100% {
        opacity: 0
    }
}

.cv2-ok {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: #0D0D0D;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
    opacity: 0;
    animation: cv2O 6s infinite
}

@keyframes cv2O {
    0%, 30% {
        opacity: 0;
        transform: scale(.8)
    }
    38%, 90% {
        opacity: 1;
        transform: none
    }
    100% {
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .al2 *, .cv2 * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important
    }
}

.hub .ft-v.al2 {
    flex-direction: column;
    gap: 8px !important
}

.al2-sw {
    display: flex !important;
    gap: 4px
}

.al2-sw span {
    font-size: 9.5px;
    padding: 3px 7px
}

.al2-in {
    width: min(190px, 100%)
}

.hub .cv2-doc p {
    font-size: 9px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    max-width: none !important;
    padding: 0 !important;
    color: #0D0D0D
}

.hub .cv2-doc p em {
    font-family: inherit !important;
    font-size: 9px !important
}

.hub .cv2-doc p span {
    font-size: 9px !important
}

.hub .cv2-h small {
    font-size: 8.5px;
    display: block;
    line-height: 1.3
}

.cv2-doc {
    width: min(200px, 100%)
}

.cv2-r {
    display: grid;
    grid-template-columns:50px minmax(0, 1fr);
    gap: 4px;
    font-size: 9px;
    line-height: 1.35;
    opacity: 0;
    animation: cv2L 6s infinite
}

.cv2-r b {
    font-size: 9px
}

.cv2-r span {
    color: #4a4a4a
}

.cv2-r:nth-of-type(3) {
    animation-delay: .5s
}

.cv2-r:nth-of-type(4) {
    animation-delay: 1s
}

.cv2-h > div {
    min-width: 0
}

.cv2-h b {
    white-space: nowrap
}

.cv2-h small {
    white-space: nowrap
}

.fh .fh-btn {
    justify-self: start;
    margin-top: 4px
}

.tools4 .tprev {
    height: 112px !important
}

.tools4 .tprev > * {
    transform: scale(.78) !important
}

.tools4 .tprev.tpx > * {
    transform: none !important
}

.tpx-mail {
    width: 86%;
    background: #fff;
    border-radius: 12px;
    padding: 10px 12px;
    display: grid;
    gap: 8px;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .08)
}

.tpx-h {
    display: flex;
    gap: 8px;
    align-items: center
}

.tpx-h i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #FFC600;
    font-style: normal;
    font-weight: 800;
    font-size: 11px;
    display: grid;
    place-items: center
}

.tpx-h b {
    display: block;
    font-size: 12.5px
}

.tpx-h small {
    font-size: 10.5px;
    color: #6b6b6b
}

.tpx-p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #F2F2F2;
    border-radius: 8px;
    padding: 6px 9px;
    font-size: 11px;
    font-weight: 600
}

.tpx-p em {
    display: flex;
    gap: 3px
}

.tpx-p u {
    width: 9px;
    height: 14px;
    border-radius: 3px;
    background: #d6d6d6;
    animation: prB 1.6s ease-in-out infinite
}

.tpx-p u:nth-child(2) {
    animation-delay: .15s
}

.tpx-p u:nth-child(3) {
    animation-delay: .3s
}

.tpx-p u:nth-child(4) {
    animation-delay: .45s
}

.tpx-docs {
    position: relative;
    width: 200px;
    height: 92px
}

.tpx-docs span {
    position: absolute;
    top: 6px;
    width: 76px;
    height: 84px;
    border-radius: 9px;
    background: #fff;
    padding: 8px;
    display: grid;
    align-content: start;
    gap: 2px;
    box-shadow: 0 8px 18px rgba(13, 13, 13, .10);
    transition: transform .35s
}

.tpx-docs i {
    font-style: normal;
    font-size: 8px;
    font-weight: 800;
    background: #0D0D0D;
    color: #fff;
    border-radius: 4px;
    padding: 1px 4px;
    justify-self: start;
    margin-bottom: 6px
}

.tpx-docs b {
    font-size: 11px
}

.tpx-docs small {
    font-size: 8.5px;
    color: #6b6b6b;
    line-height: 1.2
}

.tpx-docs .d1 {
    left: 0;
    transform: rotate(-7deg)
}

.tpx-docs .d2 {
    left: 62px;
    z-index: 2;
    top: 0
}

.tpx-docs .d3 {
    left: 124px;
    transform: rotate(7deg)
}

.tpx-docs .d2 i {
    background: #FFC600;
    color: #0D0D0D
}

.tcard:hover .tpx-docs .d1 {
    transform: rotate(-11deg) translateX(-4px)
}

.tcard:hover .tpx-docs .d3 {
    transform: rotate(11deg) translateX(4px)
}

.tcard:hover .tpx-docs .d2 {
    transform: translateY(-4px)
}

section.band:has(.wsx) .sec-head {
    margin-bottom: 28px !important
}

.wsx {
    gap: 40px !important
}

.wsx-v.wx {
    min-height: 0;
    padding: 0 !important;
    gap: 16px
}

.g4.tools4 .tcard .tprev {
    height: 118px !important
}

.g4.tools4 .tcard .tprev:not(.tpx) > * {
    transform: scale(.8) !important
}

.fh {
    grid-template-columns:minmax(0, 1fr) auto !important;
    align-items: end;
    column-gap: 40px
}

.fh > h2, .fh > .lead {
    grid-column: 1
}

.fh .fh-btn {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    justify-self: end;
    margin: 0
}

.fh .srcs {
    grid-column: 1
}

@media (max-width: 900px) {
    .fh {
        grid-template-columns:minmax(0, 1fr) !important
    }

    .fh .fh-btn {
        grid-column: 1;
        grid-row: auto;
        justify-self: start
    }
}

.wsx-v.wx .wx-post {
    zoom: 1.15
}

.wsx-v.wx .wx-tog {
    zoom: 1.1
}

.fh {
    display: grid !important;
    grid-template-columns:minmax(0, 1fr) !important
}

.fh-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 4px
}

.fh-row .srcs {
    margin: 0
}

.fh .fh-btn {
    grid-column: auto;
    grid-row: auto;
    justify-self: start
}

.pg5 .pain {
    display: flex;
    flex-direction: column;
    padding: 26px 24px !important;
    gap: 0
}

.pg5 .pain .pg-st {
    display: block !important;
    margin: 0 0 18px !important;
    padding: 0 0 18px !important;
    border-bottom: 1px solid #ececec
}

.pg5 .pain .pg-st b {
    display: block;
    font-size: 44px !important;
    line-height: 1;
    letter-spacing: -.03em;
    margin-bottom: 8px
}

.pg5 .pain .pg-st small {
    display: block;
    font-size: 14px !important;
    color: #6b6b6b;
    line-height: 1.4
}

.pg5 .pain .q {
    padding: 0 !important;
    font-size: 19px !important;
    margin-bottom: 8px
}

.pg5 .pain p {
    padding: 0 !important;
    font-size: 15px !important;
    color: #4a4a4a
}

.pg5 .pain:hover {
    transform: none
}

.bento .bt-app .link {
    margin-bottom: 26px
}

.bento .bt-app .bt-v.bt-v-ph {
    height: 280px !important
}

.bento .bt .link::after {
    content: "";
    background: #FFC600 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230D0D0D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center/13px 13px no-repeat;
    font-size: 0;
    line-height: 0
}

.bento .bt-v {
    overflow: hidden
}

.bento .bt-badge, .bento .bt-app .bt-badge, .bento .bt-row .bt-badge {
    left: 0 !important;
    right: 0;
    top: auto !important;
    bottom: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--line) !important;
    box-shadow: none;
    display: flex !important;
    align-items: baseline;
    gap: 10px;
    padding: 11px 18px !important;
    background: #fff;
    font-size: 13px
}

.bento .bt-badge b {
    font-size: 19px
}

.bento .bt-badge {
    white-space: nowrap;
    font-size: 12.5px !important;
    padding: 11px 16px !important
}

.hub-btn {
    margin-top: 24px !important
}

.phone .app-top .seg {
    padding: 2px;
    background: #F2F2F2;
    gap: 0
}

.phone .app-top .seg span {
    font-size: 10.5px;
    padding: 4px 9px !important;
    font-weight: 600 !important;
    color: #8A8A8A
}

.phone .app-top .seg span.on {
    background: #0D0D0D;
    color: #fff;
    box-shadow: none
}

.bt-ttl {
    display: flex;
    align-items: center;
    gap: 12px
}

.bt-logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: none
}

.bt-sw {
    top: 40px !important;
    padding-top: 0 !important
}

.bt-sw .app-top {
    padding: 4px 16px 8px !important
}

.hub .ft-v.al3 {
    height: auto;
    min-height: 150px;
    padding: 14px
}

.al3-deck {
    position: relative;
    width: 150px;
    height: 150px
}

.al3-b {
    position: absolute;
    top: 8px;
    width: 118px;
    height: 136px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    opacity: .55
}

.al3-b.b2 {
    left: -6px;
    transform: rotate(-8deg)
}

.al3-b.b1 {
    right: -6px;
    transform: rotate(8deg)
}

.al3-c {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 128px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(13, 13, 13, .14);
    display: grid
}

.al3-ph {
    position: relative;
    height: 92px;
    background-size: cover;
    background-position: center
}

.al3-ph em {
    position: absolute;
    left: 6px;
    top: 6px;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 2px 7px
}

.al3-c b {
    font-size: 10.5px;
    padding: 7px 8px 0
}

.al3-c small {
    font-size: 8.5px;
    color: #6b6b6b;
    padding: 1px 8px 8px
}

.hub .ft-v.qa2 {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    height: auto;
    min-height: 150px;
    padding: 16px 18px
}

.qa2-q {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    max-width: 88%
}

.qa2-q i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFC600;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none
}

.qa2-q span {
    background: #fff;
    border-radius: 12px 12px 12px 4px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: 0 4px 12px rgba(13, 13, 13, .06)
}

.qa2-q small {
    display: block;
    font-size: 9.5px;
    font-weight: 500;
    color: #6b6b6b
}

.qa2 .ft-voice {
    align-self: flex-end;
    width: min(220px, 90%);
    border-radius: 12px 12px 4px 12px !important;
    padding: 7px 12px 7px 7px !important
}

.qa2 .ft-voice .ft-mic {
    width: 32px;
    height: 32px
}

/* Schriften liegen auf dem eigenen Server (fonts/), nicht bei Google */
@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: 'Instrument Serif';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/instrument-serif-italic-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: 'Matter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(fonts/matter-regular.woff2) format('woff2');
}

/* Layout: mehrseitige Site (Hash-Router) · jede Sektion ein eigenes Band mit eigener Fläche · Gelb nur als Akzent */
:root {
    --bg: #FFFFFF;
    --surface: #F2F2F2;
    --fg: #0D0D0D;
    --muted: #6B6B6B;
    --line: #E5E5E5;
    --accent: #FFC600;
    --on-accent: #0D0D0D;
    --ink: #0D0D0D;
    --on-ink: #FFFFFF;
    --cream: #FFFAED;
    --band-dark: #0D0D0D;
    --on-dark: #FFFFFF;
    --muted-dark: #A3A3A3;
    --line-dark: #2A2A2A;
    --shadow: 0 30px 60px rgba(13, 13, 13, .14);
    --sans: "Matter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
    --r-card: 16px;
    --r-band: 32px;
}

* {
    box-sizing: border-box
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.55;
    margin: 0;
    -webkit-font-smoothing: antialiased
}

a {
    color: inherit
}

.wrap {
    max-width: 1160px;
    margin: 0 auto;
    padding-inline: 24px
}

@media (max-width: 480px) {
    .wrap {
        padding-inline: 16px
    }
}

h1, h2, h3 {
    margin: 0;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.05;
    text-wrap: balance
}

h1 {
    font-size: clamp(36px, 6.6vw, 84px)
}

h2 {
    font-size: clamp(32px, 4.4vw, 54px)
}

h3 {
    font-size: 20px;
    letter-spacing: -.01em;
    line-height: 1.25
}

p {
    margin: 0
}

h1, h2 {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word
}

@media (max-width: 560px) {
    em.k {
        white-space: normal
    }
}

em.k {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    letter-spacing: -.01em;
    font-size: 1.1em;
    position: relative;
    z-index: 0;
    white-space: nowrap
}

em.k.u::after {
    content: "";
    position: absolute;
    left: 2px;
    right: 4px;
    bottom: .06em;
    height: .14em;
    background: var(--accent);
    z-index: -1;
    border-radius: 3px
}

.eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.lead {
    font-size: clamp(18px, 1.6vw, 21px);
    color: var(--muted);
    max-width: 58ch
}

.sec-head {
    display: grid;
    gap: 16px;
    margin-bottom: 48px;
    max-width: 780px
}

/* Bänder: klare Trennung zwischen Bereichen */
.band {
    padding-block: 96px;
    position: relative
}

.band + .band {
    border-top: 1px solid var(--line)
}

.band.tint {
    background: var(--surface);
    border-top: 0
}

.band.tint + .band {
    border-top: 0
}

.band.cream {
    background: var(--cream);
    border-top: 0
}

.band.cream + .band {
    border-top: 0
}

.band.dark {
    background: var(--band-dark);
    color: var(--on-dark);
    border-top: 0
}

.band.dark + .band {
    border-top: 0
}

.band.dark .eyebrow, .band.dark .lead {
    color: var(--muted-dark)
}

.band.dark em.k.u::after {
    opacity: .9
}

.band.tight {
    padding-block: 40px
}

.sec-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 28px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.sec-label::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: .25
}

.band.dark .sec-label {
    color: var(--muted-dark)
}

@media (max-width: 720px) {
    .band {
        padding-block: 64px
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 999px;
    font: 600 16px/1 var(--sans);
    padding: 16px 18px 16px 26px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s ease
}

.btn:hover {
    transform: translateY(-1px)
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px
}

.btn-primary {
    background: var(--ink);
    color: var(--on-ink)
}

.btn-primary .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 16px
}

.btn-ghost {
    background: transparent;
    color: inherit;
    border: 1.5px solid var(--line);
    padding: 15px 24px
}

.btn-yellow {
    background: var(--accent);
    color: var(--on-accent)
}

.btn-yellow .dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--on-accent);
    color: var(--accent);
    display: grid;
    place-items: center
}

.band.dark .btn-primary {
    background: var(--on-dark);
    color: var(--band-dark)
}

.band.dark .btn-ghost {
    border-color: var(--line-dark)
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    background: var(--bg);
    color: var(--fg)
}

.link {
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    gap: 8px;
    align-items: center
}

.link::after {
    content: "→";
    transition: transform .15s
}

.link:hover::after {
    transform: translateX(3px)
}

/* Topbar + Nav */
.topbar {
    background: var(--band-dark);
    color: var(--on-dark);
    font-size: 13px
}

.topbar .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    height: 38px;
    align-items: center
}

.topbar .aud {
    display: flex;
    gap: 4px
}

.topbar .aud a {
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 999px;
    color: var(--muted-dark);
    font-weight: 500
}

.topbar .aud a.on {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600
}

.topbar .tb-right {
    color: var(--muted-dark)
}

@media (max-width: 600px) {
    .topbar .tb-right {
        display: none
    }
}

.nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 40;
    background: color-mix(in srgb, var(--bg) 90%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line)
}

.nav .wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 72px
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.02em;
    text-decoration: none
}

.brand img {
    width: 36px;
    height: 36px;
    border-radius: 10px
}

.menu {
    display: flex;
    gap: 4px;
    align-items: center
}

.menu > a, .menu .dd > button {
    font: 500 15px var(--sans);
    color: var(--muted);
    text-decoration: none;
    background: none;
    border: 0;
    padding: 10px 14px;
    border-radius: 999px;
    cursor: pointer
}

.menu > a:hover, .menu .dd > button:hover, .menu a.cur, .menu .dd.cur > button {
    color: var(--fg);
    background: var(--surface)
}

.dd {
    position: relative
}

.dd-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 300px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 10px;
    box-shadow: var(--shadow);
    display: grid;
    gap: 2px
}

.dd-panel a {
    display: grid;
    gap: 2px;
    padding: 12px 14px;
    border-radius: 12px;
    text-decoration: none
}

.dd-panel a:hover {
    background: var(--surface)
}

.dd-panel a b {
    font-size: 15px
}

.dd-panel a span {
    font-size: 13px;
    color: var(--muted)
}

.nav .btn {
    padding: 11px 14px 11px 20px;
    font-size: 15px
}

.nav .btn .dot {
    width: 24px;
    height: 24px;
    font-size: 13px
}

.burger {
    display: none;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    width: 44px;
    height: 44px;
    font-size: 18px;
    cursor: pointer
}

.mnav {
    border-bottom: 1px solid var(--line);
    background: var(--bg)
}

.nav .mnav .wrap {
    display: grid;
    align-items: stretch;
    justify-content: stretch;
    height: auto;
    gap: 4px;
    padding-block: 16px 104px
}

.mnav {
    max-height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain
}

.mnav .grp {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 12px
}

.mnav a {
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    padding: 8px 0
}

@media (max-width: 980px) {
    .menu, .nav .btn {
        display: none
    }

    .burger {
        display: block
    }
}

/* Page header (Unterseiten) */
.phead {
    padding-block: 72px 64px;
    background: var(--cream)
}

.phead .wrap {
    display: grid;
    gap: 20px
}

.phead .wrap > * {
    min-width: 0
}

.crumbs {
    font-size: 14px;
    color: var(--muted)
}

.crumbs a {
    text-decoration: none
}

.phead .lead {
    max-width: 62ch
}

/* Hero */
.hero {
    padding-block: 64px 88px
}

.hero-grid {
    display: grid;
    grid-template-columns:1.15fr .85fr;
    gap: 56px;
    align-items: center
}

.hero-copy {
    display: grid;
    gap: 26px;
    min-width: 0
}

.hero-points {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.hero-points li {
    display: flex;
    gap: 12px;
    align-items: baseline
}

.hero-points li::before {
    content: "";
    flex: none;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    transform: translateY(-2px)
}

.hero-copy > .chip {
    justify-self: start
}

.ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.stats {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    margin-top: 56px
}

.stats > div {
    padding: 22px 24px;
    display: grid;
    gap: 4px
}

.stats > div + div {
    border-left: 1px solid var(--line)
}

.stats b {
    font-size: 30px;
    font-weight: 600;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1
}

.stats span {
    font-size: 14px;
    color: var(--muted)
}

@media (max-width: 900px) {
    .hero-grid {
        grid-template-columns:1fr
    }

    .hero {
        padding-block: 40px 64px
    }

    .stats {
        grid-template-columns:1fr 1fr
    }

    .stats > div:nth-child(3) {
        border-left: 0
    }

    .stats > div:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

/* Phone demo */
.demo {
    display: grid;
    justify-items: center;
    gap: 16px
}

.phone {
    width: min(330px, 100%);
    aspect-ratio: 9/18.5;
    background: #0D0D0D;
    border-radius: 52px;
    padding: 12px;
    box-shadow: var(--shadow);
    position: relative
}

.screen {
    position: absolute;
    inset: 12px;
    border-radius: 42px;
    background: #FFFFFF;
    color: #0D0D0D;
    overflow: hidden;
    display: flex;
    flex-direction: column
}

.island {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 96px;
    height: 28px;
    border-radius: 999px;
    background: #0D0D0D;
    z-index: 3
}

.app-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 52px 18px 10px
}

.app-top .wm {
    font-weight: 600;
    font-size: 18px;
    letter-spacing: -.03em
}

.seg {
    display: flex;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px;
    font-size: 12px;
    font-weight: 600
}

.seg span {
    padding: 6px 12px;
    border-radius: 999px
}

.seg span.on {
    background: #0D0D0D;
    color: #fff
}

.stack {
    position: relative;
    flex: 1;
    margin: 4px 14px 0
}

.card {
    position: absolute;
    inset: 0;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 24px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    touch-action: none;
    user-select: none;
    cursor: grab;
    transition: transform .35s ease, opacity .35s ease
}

.card.drag {
    transition: none;
    cursor: grabbing
}

.card .vid {
    flex: 1;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 12px
}

.play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 18px;
    padding-left: 4px
}

.card .co {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1.3;
    position: relative
}

.card .co i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #0D0D0D;
    border: 1.5px solid rgba(255, 255, 255, .6);
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 600;
    font-size: 11px;
    color: #FFC600
}

.card .title {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -.02em;
    margin: 12px 4px 8px
}

.card .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 4px 6px
}

.card .tags span {
    background: #F2F2F2;
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 500
}

.stamp {
    position: absolute;
    top: 22px;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
    opacity: 0;
    border: 2px solid
}

.stamp.like {
    left: 20px;
    color: #0D0D0D;
    background: #FFC600;
    border-color: #0D0D0D;
    transform: rotate(-10deg)
}

.stamp.nope {
    right: 20px;
    color: #fff;
    background: #0D0D0D;
    border-color: #fff;
    transform: rotate(10deg)
}

.app-actions {
    display: flex;
    justify-content: center;
    gap: 22px;
    padding: 14px 0 22px
}

.app-actions button {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 1px solid #E5E5E5;
    background: #fff;
    color: #0D0D0D;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08)
}

.app-actions button.like {
    background: #FFC600;
    border-color: #FFC600
}

.end {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    gap: 14px;
    padding: 20px
}

.end p {
    font-size: 15px;
    color: #6B6B6B
}

.end strong {
    font-size: 20px;
    letter-spacing: -.02em;
    line-height: 1.2
}

.end button {
    justify-self: center;
    border: 0;
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 10px 18px;
    font: 600 14px var(--sans);
    cursor: pointer
}

.demo-hint {
    font-size: 14px;
    color: var(--muted);
    text-align: center
}

.demo-hint b {
    color: var(--fg)
}

/* Logos */
.logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 40px;
    justify-content: space-between
}

.logos .names {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    font-weight: 600;
    font-size: 20px;
    letter-spacing: -.02em
}

.logos .names span:last-child {
    color: var(--muted-dark);
    font-weight: 500
}

/* Grids & cards */
.g3 {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

.g2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 16px
}

.g4 {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px
}

@media (max-width: 900px) {
    .g3, .g4 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .g2 {
        grid-template-columns:minmax(0, 1fr)
    }
}

@media (max-width: 560px) {
    .g3, .g4 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.res .gate input {
    flex-basis: 150px
}

.box {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 28px;
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0
}

.band.tint .box, .band.cream .box {
    border-color: transparent
}

.box p {
    color: var(--muted);
    font-size: 16px
}

.pain .q {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.02em
}

.offer {
    text-decoration: none;
    color: inherit;
    transition: transform .2s, border-color .2s
}

.offer:hover {
    transform: translateY(-3px);
    border-color: var(--fg)
}

.offer .ico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 15px
}

.offer:first-child .ico {
    background: var(--accent);
    color: var(--on-accent)
}

.offer .link {
    margin-top: 6px
}

.tool {
    background: var(--band-dark);
    color: var(--on-dark);
    border: 0
}

.tool p {
    color: var(--muted-dark)
}

/* Flow + Compare */
.flow {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    border-top: 1.5px solid var(--fg)
}

.step {
    padding: 28px 28px 8px 0;
    display: grid;
    gap: 12px;
    align-content: start;
    min-width: 0
}

.step + .step {
    padding-left: 28px;
    border-left: 1px solid var(--line)
}

.step .n {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    font-variant-numeric: tabular-nums
}

.step p {
    color: var(--muted);
    font-size: 16px
}

@media (max-width: 900px) {
    .flow {
        grid-template-columns:1fr
    }

    .step, .step + .step {
        padding: 24px 0;
        border-left: 0;
        border-bottom: 1px solid var(--line)
    }
}

.compare {
    margin-top: 56px;
    display: grid;
    grid-template-columns:1fr 1fr;
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--line)
}

.compare div {
    padding: 16px 24px;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
    min-width: 0
}

.compare .h {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    background: var(--surface)
}

.compare .old {
    color: var(--muted);
    text-decoration: line-through
}

.compare .new {
    font-weight: 600
}

.compare div:nth-last-child(-n+2) {
    border-bottom: 0
}

/* FAQ */
.faq {
    border-top: 1px solid var(--line)
}

.faq details {
    border-bottom: 1px solid var(--line)
}

.faq summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 24px 0;
    font-size: clamp(19px, 2.1vw, 24px);
    font-weight: 600;
    letter-spacing: -.02em
}

.faq summary::-webkit-details-marker {
    display: none
}

.faq .pm {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 20px;
    font-weight: 400;
    transition: transform .2s
}

.faq details[open] .pm {
    transform: rotate(45deg);
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent)
}

.faq .ans {
    padding: 0 56px 26px 0;
    color: var(--muted);
    max-width: 70ch
}

.faq .ans b {
    color: var(--fg)
}

/* Kampagnen */
.filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px
}

.filters button, .opts button {
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    padding: 9px 16px;
    font: 500 14px var(--sans);
    cursor: pointer
}

.filters button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink)
}

.opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.opts button {
    font-size: 15px;
    padding: 10px 16px
}

.opts button[aria-pressed="true"] {
    border-color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--fg);
    font-weight: 600
}

.reel {
    display: grid;
    grid-template-columns:repeat(4, 1fr);
    gap: 16px
}

.tile {
    border: 0;
    padding: 0;
    text-align: left;
    background: none;
    color: inherit;
    cursor: pointer;
    display: grid;
    gap: 10px;
    font: inherit
}

.tile .poster {
    aspect-ratio: 9/14;
    border-radius: var(--r-card);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    padding: 14px;
    color: #fff;
    transition: transform .2s
}

.tile .poster .pl {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    font-size: 13px;
    padding-left: 3px
}

.tile .poster b {
    font-size: 18px;
    letter-spacing: -.02em;
    line-height: 1.2;
    position: relative
}

.tile .meta {
    font-size: 14px;
    color: var(--muted)
}

.tile:hover .poster {
    transform: translateY(-3px)
}

@media (max-width: 900px) {
    .reel {
        grid-template-columns:repeat(2, 1fr)
    }
}

.ph {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 16px
}

/* Modal */
.modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(13, 13, 13, .6);
    display: grid;
    place-items: center;
    padding: 16px
}

.modal-box {
    background: var(--bg);
    color: var(--fg);
    border-radius: 24px;
    max-width: 720px;
    width: 100%;
    display: grid;
    grid-template-columns:240px 1fr;
    overflow: hidden;
    max-height: 90vh
}

.modal-box .poster {
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    padding: 18px;
    color: #fff;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.2
}

.modal-body {
    padding: 28px;
    display: grid;
    gap: 16px;
    align-content: start;
    overflow: auto;
    min-width: 0
}

.kpis {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.kpis div {
    background: var(--surface);
    border-radius: 12px;
    padding: 12px
}

.kpis b {
    display: block;
    font-size: 22px;
    letter-spacing: -.02em
}

.kpis span {
    font-size: 12px;
    color: var(--muted)
}

.close {
    justify-self: end;
    border: 0;
    background: var(--surface);
    color: var(--fg);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    cursor: pointer;
    font-size: 18px
}

@media (max-width: 600px) {
    .modal-box {
        grid-template-columns:1fr
    }

    .modal-box .poster {
        min-height: 150px
    }
}

/* Forms */
.field {
    display: grid;
    gap: 8px
}

.field label, .field .lbl {
    font-size: 14px;
    font-weight: 600
}

.field select, .field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=search] {
    width: 100%;
    font: 500 16px var(--sans);
    padding: 14px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg)
}

.field input[type=range] {
    width: 100%;
    accent-color: var(--fg)
}

.num {
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.gate {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--line);
    padding-top: 18px
}

.gate input {
    flex: 1 1 220px;
    min-width: 0;
    font: 500 16px var(--sans);
    padding: 14px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg)
}

.note {
    font-size: 13px;
    color: var(--muted)
}

.ok {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    font-weight: 600;
    color: var(--fg)
}

.ok::before {
    content: "✓";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 13px
}

/* Check / Rechner */
.check {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 48px
}

@media (max-width: 900px) {
    .check {
        grid-template-columns:1fr;
        gap: 28px
    }
}

.form {
    display: grid;
    gap: 22px;
    align-content: start;
    min-width: 0
}

.result {
    background: var(--bg);
    border-radius: 24px;
    padding: 28px;
    display: grid;
    gap: 18px;
    align-content: start;
    border: 1px solid var(--line);
    min-width: 0
}

.result .tag {
    justify-self: start;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600
}

.price {
    display: grid;
    gap: 4px;
    padding: 18px 20px;
    border-radius: 16px;
    background: var(--surface)
}

.price b {
    font-size: 34px;
    letter-spacing: -.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1
}

.price span {
    font-size: 14px;
    color: var(--muted)
}

.sample {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--fg);
    color: var(--bg);
    border-radius: 6px;
    padding: 3px 8px;
    justify-self: start
}

.rec {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none
}

.rec li {
    display: grid;
    grid-template-columns:30px 1fr;
    gap: 12px;
    align-items: start
}

.rec li i {
    font-style: normal;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600
}

.rec li span {
    color: var(--muted);
    font-size: 15px;
    display: block
}

.meter {
    height: 10px;
    border-radius: 999px;
    background: var(--line);
    overflow: hidden
}

.meter i {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: width .3s
}

/* Story */
.story {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 56px;
    align-items: start
}

.boss {
    background: var(--surface);
    border-radius: 28px;
    padding: 36px;
    display: grid;
    gap: 18px;
    color: var(--fg)
}

.boss ul, .checks {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.boss li {
    display: flex;
    gap: 10px
}

.boss li::before {
    content: "→";
    font-weight: 600
}

.checks li {
    display: flex;
    gap: 12px
}

.checks li::before {
    content: "✓";
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 600
}

@media (max-width: 900px) {
    .story {
        grid-template-columns:1fr
    }
}

/* Termin */
.book {
    display: grid;
    grid-template-columns:.9fr 1.1fr;
    gap: 56px;
    align-items: start
}

@media (max-width: 900px) {
    .book {
        grid-template-columns:1fr
    }
}

.cal {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    display: grid;
    gap: 20px;
    min-width: 0
}

.days {
    display: grid;
    grid-template-columns:repeat(5, 1fr);
    gap: 8px
}

.days button, .slots button {
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 12px;
    padding: 12px 4px;
    font: 500 14px var(--sans);
    cursor: pointer;
    display: grid;
    gap: 2px;
    text-align: center
}

.days button b {
    font-size: 20px;
    font-variant-numeric: tabular-nums
}

.days button[aria-pressed="true"], .slots button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink)
}

.slots {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px
}

.slots button {
    font-variant-numeric: tabular-nums;
    font-weight: 600
}

.cal-embed {
    padding: 0;
    overflow: hidden;
    gap: 0
}

.cal-embed iframe {
    display: block;
    width: 100%;
    height: 720px;
    border: 0
}

.cal-embed .note {
    padding: 12px 20px;
    border-top: 1px solid var(--line)
}

.two {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}

@media (max-width: 520px) {
    .two {
        grid-template-columns:1fr
    }

    .days {
        gap: 4px
    }

    .days button {
        padding: 10px 2px;
        font-size: 12px
    }
}

/* Berufe */
.btools {
    display: grid;
    gap: 16px;
    margin-bottom: 20px
}

.btools > * {
    min-width: 0
}

.blist {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 12px
}

@media (max-width: 900px) {
    .blist {
        grid-template-columns:1fr 1fr
    }
}

@media (max-width: 560px) {
    .blist {
        grid-template-columns:1fr
    }
}

.beruf {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    padding: 22px;
    display: grid;
    gap: 10px;
    align-content: start;
    min-width: 0
}

.beruf .top {
    display: flex;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 10px
}

.beruf h3 {
    font-size: 18px
}

.beruf .area {
    font-size: 12px;
    font-weight: 600;
    background: var(--surface);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap
}

.beruf p {
    font-size: 15px;
    color: var(--muted)
}

.beruf dl {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 4px 12px;
    margin: 4px 0 0;
    font-size: 14px
}

.beruf dt {
    color: var(--muted)
}

.beruf dd {
    margin: 0;
    font-weight: 500
}

.count {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 12px
}

/* Test */
.quiz {
    max-width: 760px;
    display: grid;
    gap: 24px
}

.progress {
    display: flex;
    gap: 6px
}

.progress i {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: var(--line)
}

.progress i.on {
    background: var(--fg)
}

.qopts {
    display: grid;
    gap: 10px
}

.qopts button {
    text-align: left;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 16px;
    padding: 18px 20px;
    font: 500 17px var(--sans);
    cursor: pointer
}

.qopts button:hover {
    border-color: var(--fg)
}

.areas {
    display: grid;
    gap: 14px
}

.arow {
    display: grid;
    grid-template-columns:180px 1fr 48px;
    gap: 14px;
    align-items: center;
    font-size: 15px
}

.arow b {
    text-align: right;
    font-variant-numeric: tabular-nums
}

@media (max-width: 560px) {
    .arow {
        grid-template-columns:110px 1fr 40px;
        font-size: 14px
    }
}

/* Daily Date */
.dd-grid {
    display: grid;
    grid-template-columns:1.1fr .9fr;
    gap: 24px;
    align-items: start
}

@media (max-width: 900px) {
    .dd-grid {
        grid-template-columns:1fr
    }
}

.today {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    display: grid;
    gap: 18px
}

.tasks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.tasks label {
    display: grid;
    grid-template-columns:28px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--surface);
    cursor: pointer
}

.tasks input {
    width: 22px;
    height: 22px;
    accent-color: #0D0D0D
}

.tasks .min {
    font-size: 13px;
    color: var(--muted);
    font-variant-numeric: tabular-nums
}

.tasks input:checked + span {
    text-decoration: line-through;
    color: var(--muted)
}

.weeks {
    display: grid;
    gap: 10px
}

.week {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px;
    display: grid;
    gap: 4px;
    background: var(--bg)
}

.week b {
    font-size: 16px
}

.week span {
    font-size: 14px;
    color: var(--muted)
}

.streak {
    display: flex;
    gap: 6px
}

.streak i {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 11px;
    color: var(--muted)
}

.streak i.on {
    background: var(--accent);
    color: var(--on-accent);
    font-weight: 600
}

/* Ressourcen */
.res {
    display: grid;
    grid-template-columns:120px minmax(0, 1fr);
    gap: 20px;
    align-items: start
}

.res .cover {
    aspect-ratio: 3/4;
    border-radius: 10px;
    background: var(--surface);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid var(--line)
}

.res .cover.y {
    background: var(--accent);
    color: var(--on-accent);
    border-color: var(--accent)
}

.res .cover.d {
    background: var(--band-dark);
    color: var(--on-dark);
    border-color: var(--band-dark)
}

.res .cover small {
    font-weight: 500;
    opacity: .7
}

@media (max-width: 480px) {
    .res {
        grid-template-columns:72px minmax(0, 1fr);
        gap: 14px
    }
}

footer.site {
    background: var(--band-dark);
    color: var(--muted-dark);
    font-size: 14px;
    padding-block: 56px 120px
}

footer .fgrid {
    display: grid;
    grid-template-columns:1.4fr repeat(3, 1fr);
    gap: 32px
}

footer .fgrid b {
    color: var(--on-dark);
    display: block;
    margin-bottom: 10px;
    font-size: 14px
}

footer .fgrid a {
    display: block;
    text-decoration: none;
    padding: 3px 0
}

footer .fgrid a:hover {
    color: var(--on-dark)
}

footer .brand {
    color: var(--on-dark);
    margin-bottom: 12px;
    display: inline-flex
}

@media (max-width: 800px) {
    footer .fgrid {
        grid-template-columns:1fr 1fr
    }
}

.mcta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--bg) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    display: none
}

.mcta .btn {
    width: 100%;
    justify-content: space-between
}

@media (max-width: 900px) {
    .mcta {
        display: block
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important
    }
}

/* ---------- Mockups ---------- */
.demo {
    position: relative
}

.demo .phone {
    z-index: 1
}

.float {
    position: absolute;
    z-index: 20;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 13px;
    line-height: 1.3;
    max-width: 220px
}

.float b {
    display: block;
    font-size: 14px
}

.float .fi {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px
}

.float.f1 {
    left: -8%;
    top: 18%
}

.float.f2 {
    right: -6%;
    top: 52%
}

.float.f3 {
    left: -2%;
    bottom: 16%
}

@media (max-width: 1100px) {
    .float.f1 {
        left: 0
    }

    .float.f2 {
        right: 0
    }

    .float.f3 {
        left: 0
    }
}

@media (max-width: 560px) {
    .float {
        display: none
    }
}

.wave {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 22px
}

.wave i {
    width: 3px;
    border-radius: 2px;
    background: currentColor;
    opacity: .75
}

.mph {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 9/18.5;
    background: #0D0D0D;
    border-radius: 36px;
    padding: 8px;
    box-shadow: var(--shadow);
    position: relative;
    margin-inline: auto
}

.msc {
    position: absolute;
    inset: 8px;
    border-radius: 29px;
    overflow: hidden;
    background: #fff;
    color: #0D0D0D;
    display: flex;
    flex-direction: column
}

.msc .isl {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 64px;
    height: 18px;
    border-radius: 999px;
    background: #0D0D0D;
    z-index: 3
}

.msc.vid {
    background: linear-gradient(170deg, #4a4a4a, #111);
    color: #fff
}

.rec {
    position: absolute;
    top: 34px;
    left: 14px;
    right: 14px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600
}

.rec .r {
    display: flex;
    align-items: center;
    gap: 6px
}

.rec .r::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FF3B30
}

.gridl {
    position: absolute;
    inset: 60px 14px 90px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)) 33.3% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)) 66.6% 0/1px 100% no-repeat, linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)) 0 33.3%/100% 1px no-repeat, linear-gradient(rgba(255, 255, 255, .25), rgba(255, 255, 255, .25)) 0 66.6%/100% 1px no-repeat
}

.shutter {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 4px solid #fff;
    display: grid;
    place-items: center
}

.shutter::after {
    content: "";
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: #FF3B30
}

.side {
    position: absolute;
    right: 10px;
    bottom: 120px;
    display: grid;
    gap: 14px;
    justify-items: center;
    font-size: 10px
}

.side i {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 15px
}

.feedtxt {
    position: absolute;
    left: 12px;
    right: 56px;
    bottom: 62px;
    font-size: 12px;
    line-height: 1.35;
    display: grid;
    gap: 4px
}

.feedtxt b {
    font-size: 13px
}

.feedtxt .sp {
    opacity: .7;
    font-size: 11px
}

.feedcta {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 16px;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 10px;
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 12px
}

.vsteps {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 20px
}

.vstep {
    display: grid;
    gap: 18px;
    align-content: start
}

.vstep .stage {
    background: var(--bg);
    border-radius: 24px;
    padding: 28px 20px;
    height: 440px;
    display: grid;
    place-items: center
}

.band.cream .vstep .stage {
    background: var(--bg)
}

.vstep .cap {
    display: grid;
    gap: 4px
}

.vstep .cap .n {
    font-size: 13px;
    font-weight: 600;
    color: var(--muted)
}

.vstep .cap p {
    color: var(--muted);
    font-size: 15px
}

@media (max-width: 900px) {
    .vsteps {
        grid-template-columns:minmax(0, 1fr)
    }

    .vstep .stage {
        height: auto
    }
}

.inbox {
    width: 100%;
    max-width: 320px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 18px;
    box-shadow: var(--shadow);
    overflow: hidden;
    font-size: 13px
}

.inbox .ih {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #E5E5E5;
    font-weight: 600
}

.inbox .ih span {
    font-size: 11px;
    background: #FFC600;
    border-radius: 999px;
    padding: 3px 8px
}

.irow {
    display: grid;
    grid-template-columns:30px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid #F2F2F2
}

.irow .av {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #F2F2F2;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 11px
}

.irow .nm {
    display: grid;
    gap: 4px;
    min-width: 0
}

.irow .nm small {
    color: #6B6B6B
}

.irow .pl {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    padding-left: 2px
}

.irow .wave {
    height: 16px;
    color: #0D0D0D
}

.pill {
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 8px;
    background: #F2F2F2;
    white-space: nowrap
}

.pill.y {
    background: #FFC600
}

/* Laptop dashboard */
.laptop {
    max-width: 880px;
    margin-inline: auto
}

.lscreen {
    background: #0D0D0D;
    border-radius: 18px 18px 0 0;
    padding: 12px
}

.lbase {
    height: 16px;
    background: linear-gradient(#d4d4d4, #a8a8a8);
    border-radius: 0 0 14px 14px;
    margin-inline: -4%
}

.dash {
    background: #fff;
    color: #0D0D0D;
    border-radius: 8px;
    display: grid;
    grid-template-columns:170px minmax(0, 1fr);
    min-height: 380px;
    overflow: hidden;
    font-size: 13px
}

.dash nav {
    background: #F7F7F7;
    padding: 16px;
    display: grid;
    gap: 6px;
    align-content: start
}

.dash nav b {
    font-size: 15px;
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
    align-items: center
}

.dash nav b img {
    width: 22px;
    height: 22px;
    border-radius: 6px
}

.dash nav span {
    padding: 7px 10px;
    border-radius: 8px;
    color: #6B6B6B
}

.dash nav span.on {
    background: #fff;
    color: #0D0D0D;
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

.dmain {
    padding: 18px;
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0
}

.dkpi {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px
}

.dkpi div {
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 10px 12px
}

.dkpi b {
    display: block;
    font-size: 20px
}

.dkpi small {
    color: #6B6B6B
}

.dtable .irow {
    grid-template-columns:30px minmax(0, 1.2fr) minmax(0, 1fr) auto;
    border: 1px solid #F2F2F2;
    border-radius: 10px;
    margin-bottom: 6px
}

@media (max-width: 700px) {
    .dash {
        grid-template-columns:minmax(0, 1fr)
    }

    .dash nav {
        display: none
    }

    .dtable .irow {
        grid-template-columns:30px minmax(0, 1fr) auto
    }

    .dtable .irow .wave {
        display: none
    }
}

/* App screens trio */
.trio {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 24px;
    align-items: end
}

.trio figure {
    margin: 0;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center
}

.trio figcaption {
    font-weight: 600
}

.trio figcaption span {
    display: block;
    font-weight: 400;
    color: var(--muted);
    font-size: 14px
}

@media (max-width: 800px) {
    .trio {
        grid-template-columns:minmax(0, 1fr)
    }
}

.det {
    padding: 34px 12px 12px;
    display: grid;
    gap: 8px;
    font-size: 11px;
    align-content: start
}

.det .hero-v {
    height: 120px;
    border-radius: 12px;
    background: linear-gradient(160deg, #2f3b45, #0D0D0D)
}

.det h4 {
    margin: 2px 0 0;
    font-size: 14px;
    letter-spacing: -.02em
}

.det .tg {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.det .tg span {
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 10px
}

.det .bl {
    display: grid;
    gap: 4px
}

.det .bl i {
    height: 6px;
    border-radius: 3px;
    background: #F2F2F2;
    display: block
}

.det .btn2 {
    margin-top: 6px;
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 9px;
    text-align: center;
    font-weight: 600;
    font-size: 11px
}

.mic {
    padding: 44px 14px 14px;
    display: grid;
    gap: 12px;
    justify-items: center;
    text-align: center;
    align-content: center;
    height: 100%;
    font-size: 11px
}

.mic .q {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3
}

.mic .bigw {
    color: #0D0D0D;
    height: 40px
}

.mic .bigw i {
    width: 4px
}

.mic .tm {
    font-variant-numeric: tabular-nums;
    color: #6B6B6B
}

.mic .mb {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 22px;
    box-shadow: 0 0 0 10px rgba(255, 198, 0, .25)
}

/* Workshop do/dont */
.dodont {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 16px
}

.dd-card {
    background: var(--bg);
    border-radius: 20px;
    padding: 20px;
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center
}

.dd-card .shot {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 14px;
    background: var(--surface);
    display: grid;
    place-items: center;
    position: relative
}

.dd-card .ph9 {
    width: 38%;
    aspect-ratio: 9/16;
    border-radius: 10px;
    background: #0D0D0D;
    border: 3px solid #0D0D0D;
    position: relative
}

.dd-card .ph9.land {
    width: 62%;
    aspect-ratio: 16/9
}

.dd-card .ph9 i {
    position: absolute;
    inset: 3px;
    border-radius: 6px;
    background: linear-gradient(160deg, #5b4a1a, #111)
}

.dd-card .mark {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px
}

.dd-card .mark.ok {
    background: var(--accent);
    color: var(--on-accent)
}

.dd-card .mark.no {
    background: var(--fg);
    color: var(--bg)
}

.dd-card b {
    font-size: 15px
}

@media (max-width: 900px) {
    .dodont {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

/* Hub tool previews */
.prev {
    height: 150px;
    border-radius: 12px;
    background: var(--surface);
    display: grid;
    place-items: center;
    overflow: hidden;
    position: relative
}

.prev .mini {
    width: 62%;
    background: var(--bg);
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08)
}

.prev .mini i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--line)
}

.prev .mini i.y {
    background: var(--accent);
    width: 60%
}

.prev .mini i.d {
    background: var(--fg);
    width: 45%;
    height: 8px
}

.prev .mini .bars {
    display: grid;
    gap: 5px
}

.prev .mini .bars span {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--fg)
}

.prev .mini .bars span:nth-child(2) {
    width: 70%;
    background: var(--muted)
}

.prev .mini .bars span:nth-child(3) {
    width: 45%;
    background: var(--line)
}

/* Lebenslauf */
.cvwrap {
    display: grid;
    grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: start
}

@media (max-width: 900px) {
    .cvwrap {
        grid-template-columns:minmax(0, 1fr)
    }
}

.cvform {
    display: grid;
    gap: 16px
}

.cvform textarea {
    width: 100%;
    font: 500 15px var(--sans);
    padding: 12px 14px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    resize: vertical;
    min-height: 72px
}

.tpl {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.paperbox {
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 96px);
    display: grid;
    gap: 14px
}

.paper {
    background: #fff;
    color: #0D0D0D;
    aspect-ratio: 1/1.414;
    border-radius: 6px;
    box-shadow: var(--shadow);
    overflow: hidden;
    display: grid;
    grid-template-columns:34% 1fr;
    font-size: clamp(8px, 1vw, 11px);
    line-height: 1.45
}

.paper .sb {
    background: #F2F2F2;
    padding: 2.4em 1.8em;
    display: grid;
    gap: 1.8em;
    align-content: start
}

.paper .mn {
    padding: 2.4em 2.2em;
    display: grid;
    gap: 1.8em;
    align-content: start;
    min-width: 0
}

.paper .photo {
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: linear-gradient(160deg, #d9d9d9, #bdbdbd);
    display: grid;
    place-items: center;
    color: #6B6B6B;
    font-size: .9em
}

.paper h5 {
    margin: 0 0 4px;
    font-size: .85em;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B6B6B
}

.paper .nm {
    font-size: 2.3em;
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.05
}

.paper .ziel {
    color: #6B6B6B
}

.paper .entry {
    display: grid;
    grid-template-columns:28% 1fr;
    gap: 6px;
    margin-bottom: 4px
}

.paper .entry span {
    color: #6B6B6B
}

.paper .tagz {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.paper .tagz span {
    border: 1px solid #D4D4D4;
    border-radius: 999px;
    padding: 1px 7px
}

.paper.modern .sb {
    background: #0D0D0D;
    color: #fff
}

.paper.modern .sb h5 {
    color: #FFC600
}

.paper.modern .sb .tagz span {
    border-color: #444
}

.paper.modern .nm {
    border-bottom: 4px solid #FFC600;
    padding-bottom: 4px;
    justify-self: start
}

.paper.minimal {
    grid-template-columns:1fr
}

.paper.minimal .sb {
    display: none
}

.paper.minimal .mn {
    padding: 2.6em 2.8em
}

.paper.minimal .side-in {
    display: grid !important
}

.paper .side-in {
    display: none;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.strength {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.strength button {
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    padding: 8px 14px;
    font: 500 14px var(--sans);
    cursor: pointer
}

.strength button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink)
}

.appico {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: block
}

.plats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 48px;
    align-items: center
}

.plats span {
    font-size: 13px;
    font-weight: 600;
    background: var(--surface);
    border-radius: 999px;
    padding: 7px 12px
}

.nav .actions {
    display: flex;
    gap: 8px;
    align-items: center
}

.nav .btn-ghost {
    padding: 10px 18px;
    font-size: 15px;
    border-color: var(--line)
}

@media (max-width: 1100px) {
    .nav .btn-ghost {
        display: none
    }
}

@media (max-width: 980px) {
    .nav .actions {
        display: none
    }
}

.freebadge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 600;
    justify-self: start
}

.postgrid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start
}

@media (max-width: 900px) {
    .postgrid {
        grid-template-columns:minmax(0, 1fr)
    }
}

.ptable {
    display: grid;
    grid-template-columns:minmax(0, 1.4fr) minmax(0, 1fr);
    border: 1px solid var(--line);
    border-radius: var(--r-card);
    overflow: hidden;
    background: var(--bg)
}

.ptable div {
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    font-size: 16px
}

.ptable div:nth-last-child(-n+2) {
    border-bottom: 0
}

.ptable .free {
    font-weight: 600
}

.ptable .free::before {
    content: "✓ ";
    color: var(--fg)
}

.ptable .paid {
    color: var(--muted)
}

.postform {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 28px;
    display: grid;
    gap: 16px
}

.schools {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 12px
}

.schools div {
    aspect-ratio: 3/2;
    border-radius: 14px;
    border: 1.5px dashed var(--line);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
    padding: 8px;
    background: var(--bg)
}

@media (max-width: 800px) {
    .schools {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.sheets {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 24px
}

@media (max-width: 900px) {
    .sheets {
        grid-template-columns:minmax(0, 1fr);
        max-width: 420px
    }
}

.sheet {
    background: #fff;
    color: #0D0D0D;
    aspect-ratio: 1/1.414;
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 8% 9%;
    display: grid;
    gap: 5%;
    align-content: start;
    position: relative;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.45
}

.sheet .sh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    color: #6B6B6B;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.sheet .sh img {
    width: 20px;
    height: 20px;
    border-radius: 6px
}

.sheet .day {
    display: inline-block;
    background: #FFC600;
    border-radius: 999px;
    padding: 2px 10px;
    font-weight: 600;
    font-size: 11px;
    justify-self: start
}

.sheet h4 {
    margin: 0;
    font-size: 18px;
    letter-spacing: -.02em;
    line-height: 1.15
}

.sheet .task {
    display: grid;
    grid-template-columns:16px 1fr;
    gap: 8px;
    align-items: start
}

.sheet .task::before {
    content: "";
    width: 14px;
    height: 14px;
    border: 1.5px solid #0D0D0D;
    border-radius: 4px;
    margin-top: 2px
}

.sheet .lines {
    display: grid;
    gap: 14px;
    margin-top: 4px
}

.sheet .lines i {
    height: 1px;
    background: #D4D4D4;
    display: block
}

.sheet .boxes {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.sheet .boxes span {
    border: 1.5px solid #E5E5E5;
    border-radius: 8px;
    padding: 8px;
    min-height: 54px;
    color: #6B6B6B;
    font-size: 10px
}

.sheet::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    background: linear-gradient(rgba(255, 255, 255, 0), #fff 75%)
}

.sheet .more {
    position: absolute;
    bottom: 6%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-size: 11px;
    font-weight: 600;
    color: #6B6B6B;
    white-space: nowrap
}

.vstep .stage .mph {
    max-width: 180px
}

.qa {
    padding: 30px 10px 10px;
    display: grid;
    gap: 8px;
    align-content: start;
    font-size: 10px;
    height: 100%
}

.qa-msg {
    background: #DCF8C6;
    color: #0D0D0D;
    border-radius: 10px 10px 10px 2px;
    padding: 7px 9px;
    line-height: 1.35;
    justify-self: start;
    max-width: 92%
}

.qa-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px
}

.qa-head b {
    font-size: 12px
}

.qa-head span {
    color: #6B6B6B
}

.qa-bar {
    height: 5px;
    border-radius: 3px;
    background: #F2F2F2
}

.qa-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: #FFC600;
    border-radius: 3px
}

.qa-cv {
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 9px;
    display: grid;
    gap: 5px
}

.qa-cv b {
    font-size: 12px
}

.qa-cv small {
    color: #6B6B6B
}

.qa-cv i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #F2F2F2
}

.qa-cv .tg {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.qa-cv .tg span {
    background: #F2F2F2;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 9px
}

.qa-btn {
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 8px;
    text-align: center;
    font-weight: 600;
    margin-top: auto
}

.float.qa-ok {
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    white-space: nowrap;
    max-width: none
}

@media (max-width: 560px) {
    .float.qa-ok {
        display: flex
    }
}

.menu > a, .menu .dd > button, .nav .btn {
    white-space: nowrap
}

.atts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end
}

.dtable .irow {
    grid-template-columns:30px minmax(0, 1fr) auto auto
}

@media (max-width: 700px) {
    .dtable .irow .atts {
        display: none
    }
}

.integ {
    margin-top: 56px;
    display: grid;
    gap: 18px;
    justify-items: center;
    text-align: center
}

.ats {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 10px;
    width: 100%
}

.ats span {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 16px 8px;
    font-weight: 600;
    font-size: 14px;
    background: var(--bg);
    display: grid;
    place-items: center;
    min-height: 60px
}

.ats span.more {
    border-style: dashed;
    color: var(--muted)
}

@media (max-width: 800px) {
    .ats {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.tcard {
    background: var(--bg);
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    display: grid;
    transition: transform .2s, box-shadow .2s;
    min-width: 0
}

.tcard:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow)
}

.tprev {
    height: 190px;
    background: var(--cream);
    display: grid;
    place-items: center;
    padding: 20px;
    overflow: hidden
}

.tbody {
    padding: 20px 22px 22px;
    display: grid;
    gap: 6px
}

.tbody .aud {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted)
}

.tp-price {
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 6px;
    width: 90%;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .08)
}

.tp-price small {
    color: #6B6B6B;
    font-size: 11px
}

.tp-price b {
    font-size: 20px;
    letter-spacing: -.02em
}

.tp-bar {
    height: 6px;
    border-radius: 3px;
    background: #F2F2F2
}

.tp-bar i {
    display: block;
    height: 100%;
    background: #FFC600;
    border-radius: 3px
}

.tp-price .pill {
    justify-self: start
}

.tp-covers {
    position: relative;
    width: 150px;
    height: 150px
}

.tp-covers span {
    position: absolute;
    width: 92px;
    aspect-ratio: 3/4;
    border-radius: 8px;
    padding: 10px;
    font-size: 11px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    display: flex;
    align-items: flex-start
}

.tp-covers .c1 {
    left: 0;
    top: 18px;
    background: #FFC600;
    color: #0D0D0D;
    transform: rotate(-8deg)
}

.tp-covers .c2 {
    left: 30px;
    top: 6px;
    background: #0D0D0D;
    color: #fff;
    z-index: 2
}

.tp-covers .c3 {
    left: 60px;
    top: 18px;
    background: #fff;
    color: #0D0D0D;
    transform: rotate(8deg);
    z-index: 3
}

.tp-list {
    display: grid;
    gap: 8px;
    width: 92%
}

.tp-list span {
    background: #fff;
    color: #0D0D0D;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.tp-list i {
    font-style: normal;
    color: #6B6B6B
}

.tp-cv {
    width: 110px;
    aspect-ratio: 1/1.414;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
    display: grid;
    grid-template-columns:34% 1fr;
    overflow: hidden
}

.tp-cv .side {
    background: #0D0D0D
}

.tp-cv div {
    padding: 10px 8px;
    display: grid;
    gap: 6px;
    align-content: start
}

.tp-cv i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #E5E5E5
}

.tp-cv i.d {
    background: #0D0D0D;
    height: 8px;
    width: 80%
}

.tp-cv i.y {
    background: #FFC600;
    width: 60%
}

footer .fgrid a.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 0
}

.legal {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 24px;
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid var(--line-dark);
    font-size: 13px
}

.legal nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px
}

.legal nav span {
    cursor: pointer
}

.legal nav span:hover {
    color: var(--on-dark)
}

.qa-from {
    font-size: 9px;
    font-weight: 600;
    color: #1a8f4a;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: -4px
}

.tline {
    position: relative;
    padding-top: 8px
}

.tl-track {
    position: relative;
    height: 96px;
    border-radius: 16px;
    background: var(--surface)
}

.tl-track span {
    position: absolute;
    display: flex;
    align-items: center;
    padding: 0 16px;
    font-size: 14px;
    border-radius: 12px;
    white-space: nowrap;
    overflow: hidden
}

.tl-us {
    top: 10px;
    height: 36px;
    background: var(--accent);
    color: var(--on-accent)
}

.tl-hr {
    bottom: 10px;
    height: 36px;
    background: var(--ink);
    color: var(--on-ink)
}

.tl-marks {
    position: relative;
    height: 64px;
    margin-top: 10px
}

.tl-marks span {
    position: absolute;
    transform: translateX(-50%);
    display: grid;
    justify-items: center;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap
}

.tl-marks span::before {
    content: "";
    width: 2px;
    height: 10px;
    background: var(--fg);
    margin-bottom: 6px
}

.tl-marks span:first-child {
    transform: none;
    justify-items: start;
    text-align: left
}

.tl-marks span:first-child::before {
    margin-left: 0
}

.tl-marks span:last-child {
    transform: translateX(-100%);
    justify-items: end;
    text-align: right
}

.tl-marks small {
    font-weight: 400;
    color: var(--muted);
    font-size: 12px
}

@media (max-width: 700px) {
    .tl-track span {
        font-size: 12px;
        padding: 0 10px
    }

    .tl-hr b {
        font-size: 11px
    }

    .tl-marks span {
        font-size: 12px
    }

    .tl-marks small {
        display: none
    }

    .tl-marks span:nth-child(2), .tl-marks span:nth-child(3) {
        font-size: 11px
    }
}

.tline .sm {
    display: none
}

@media (max-width: 700px) {
    .tline .sm {
        display: inline
    }

    .tline .lg {
        display: none
    }

    .tl-marks span:nth-child(2) {
        display: none
    }
}

.topbar.promo {
    display: block;
    text-decoration: none;
    background: var(--accent);
    color: var(--on-accent)
}

.topbar.promo .wrap {
    justify-content: center;
    gap: 14px;
    font-size: 14px
}

.topbar.promo .go {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px
}

@media (max-width: 600px) {
    .topbar.promo .wrap {
        font-size: 12px;
        gap: 8px
    }

    .topbar.promo .go {
        display: none
    }
}

.reach {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center
}

@media (max-width: 900px) {
    .reach {
        grid-template-columns:minmax(0, 1fr)
    }
}

.orbit {
    position: relative;
    width: 100%;
    max-width: 460px;
    aspect-ratio: 1;
    margin-inline: auto
}

.o-all {
    position: absolute;
    inset: 6%;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center
}

.o-lab {
    position: absolute;
    top: 16%;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.3
}

.o-lab b {
    font-size: 20px;
    letter-spacing: -.02em
}

.o-act {
    width: 34%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    text-align: center;
    font-size: 13px;
    line-height: 1.3;
    margin-top: 22%
}

.o-tag {
    position: absolute;
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow);
    white-space: nowrap
}

.o-tag.t1 {
    left: -2%;
    top: 40%
}

.o-tag.t2 {
    right: -2%;
    top: 30%
}

.o-tag.t3 {
    right: 2%;
    bottom: 14%
}

@media (max-width: 560px) {
    .o-tag {
        font-size: 11px;
        padding: 6px 10px
    }

    .o-lab {
        font-size: 12px
    }

    .o-lab b {
        font-size: 15px
    }

    .o-act {
        font-size: 10px
    }
}

.reach-pts {
    display: grid;
    gap: 12px
}

.reach-pts .box {
    border: 1px solid var(--line)
}

.o-all {
    background: var(--surface);
    color: var(--fg);
    border: 2px solid var(--line)
}

.o-act {
    background: var(--ink);
    color: var(--on-ink)
}

.o-tag {
    background: var(--accent);
    color: var(--on-accent)
}

@media (max-width: 560px) {
    .o-tag.t1 {
        left: 2%
    }

    .o-tag.t2 {
        right: 2%
    }

    .o-tag.t3 {
        right: 4%
    }
}

.pain {
    padding: 0;
    overflow: hidden;
    gap: 0
}

.pain .q, .pain p {
    padding-inline: 24px
}

.pain .q {
    padding-top: 20px
}

.pain p {
    padding-bottom: 24px;
    padding-top: 6px
}

.pv {
    height: 170px;
    background: var(--cream);
    display: grid;
    place-items: center;
    padding: 18px
}

.pv-search {
    width: 88%;
    display: grid;
    gap: 8px
}

.pv-q {
    background: #fff;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 13px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.pv-res {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
    display: grid;
    gap: 6px
}

.pv-res i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #E5E5E5
}

.pv-shrug {
    justify-self: end;
    background: #0D0D0D;
    color: #fff;
    border-radius: 10px 10px 2px 10px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600
}

.pv-cvs {
    position: relative;
    width: 170px;
    height: 130px
}

.pv-cvs span {
    position: absolute;
    width: 80px;
    aspect-ratio: 1/1.3;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    padding: 10px;
    display: grid;
    gap: 6px;
    align-content: start
}

.pv-cvs span b {
    display: block;
    height: 7px;
    width: 70%;
    border-radius: 3px;
    background: #0D0D0D
}

.pv-cvs span i {
    display: block;
    height: 5px;
    width: 40%;
    border-radius: 3px;
    background: #E5E5E5
}

.pv-cvs span:nth-child(1) {
    left: 0;
    top: 16px;
    transform: rotate(-8deg)
}

.pv-cvs span:nth-child(2) {
    left: 44px;
    top: 6px;
    transform: rotate(4deg)
}

.pv-cvs span:nth-child(3) {
    left: 88px;
    top: 18px;
    transform: rotate(10deg)
}

.pv-cvs em {
    font-style: normal;
    font-size: 10px;
    font-weight: 600;
    background: #FFC600;
    border-radius: 999px;
    padding: 2px 6px;
    justify-self: start;
    margin-top: auto
}

.pv-page {
    position: relative;
    width: 120px;
    height: 140px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    padding: 12px;
    display: grid;
    gap: 5px;
    align-content: start;
    overflow: hidden
}

.pv-page b {
    display: block;
    height: 8px;
    width: 60%;
    border-radius: 3px;
    background: #0D0D0D;
    margin-bottom: 4px
}

.pv-page i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5
}

.pv-x {
    position: absolute;
    right: -6px;
    top: -6px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 16px;
    border: 3px solid var(--cream)
}

.bwin {
    max-width: 1000px;
    margin-inline: auto;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
    background: #fff;
    color: #0D0D0D
}

.bbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #F2F2F2;
    border-bottom: 1px solid #E5E5E5
}

.bbar .dots {
    display: flex;
    gap: 6px
}

.bbar .dots i {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #D4D4D4
}

.bbar .url {
    flex: 1;
    max-width: 320px;
    margin-inline: auto;
    background: #fff;
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 12px;
    color: #6B6B6B;
    text-align: center
}

.wapp {
    display: grid;
    grid-template-columns:300px minmax(0, 1fr);
    min-height: 420px;
    font-size: 13px
}

.wl {
    border-right: 1px solid #EDEDED;
    padding: 16px;
    display: grid;
    gap: 6px;
    align-content: start
}

.wl-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px
}

.wl-h b {
    font-size: 16px
}

.wl-f {
    display: flex;
    gap: 4px;
    margin-bottom: 8px
}

.wl-f span {
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 12px;
    color: #6B6B6B
}

.wl-f span.on {
    background: #0D0D0D;
    color: #fff
}

.wl-i {
    display: grid;
    grid-template-columns:34px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 12px
}

.wl-i.on {
    background: #F7F7F7
}

.wl-i div {
    display: grid;
    gap: 2px;
    min-width: 0
}

.wl-i small, .wd-h small {
    color: #6B6B6B
}

.av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px
}

.av.big {
    width: 48px;
    height: 48px;
    font-size: 15px
}

.a1 {
    background: #FFE58A
}

.a2 {
    background: #E5E5E5
}

.a3 {
    background: #0D0D0D;
    color: #fff
}

.a4 {
    background: #F2F2F2
}

.dot-new {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFC600
}

.wd {
    padding: 20px;
    display: grid;
    gap: 16px;
    align-content: start;
    min-width: 0
}

.wd-h {
    display: grid;
    grid-template-columns:48px 1fr auto;
    gap: 12px;
    align-items: center
}

.wd-h b {
    font-size: 17px;
    display: block
}

.wd-act {
    display: flex;
    gap: 6px
}

.wd-act span {
    border-radius: 999px;
    padding: 8px 14px;
    font-weight: 600;
    font-size: 12px
}

.b-out {
    border: 1px solid #E5E5E5
}

.b-in {
    background: #0D0D0D;
    color: #fff
}

.wd-g {
    display: grid;
    grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 12px
}

.wd-card {
    border: 1px solid #EDEDED;
    border-radius: 14px;
    padding: 14px;
    display: grid;
    gap: 8px;
    align-content: start
}

.wd-card small {
    color: #6B6B6B;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase
}

.mini-cv {
    aspect-ratio: 1/1.3;
    border-radius: 6px;
    border: 1px solid #EDEDED;
    display: grid;
    grid-template-columns:30% 1fr;
    overflow: hidden;
    max-width: 180px
}

.mini-cv span {
    background: #F2F2F2
}

.mini-cv div {
    padding: 10px 8px;
    display: grid;
    gap: 6px;
    align-content: start
}

.mini-cv i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #E5E5E5
}

.mini-cv i.d {
    height: 8px;
    width: 80%;
    background: #0D0D0D
}

.mini-cv i.y {
    width: 55%;
    background: #FFC600
}

.qa-l {
    display: grid;
    gap: 8px
}

.qa-l p {
    margin: 0;
    display: grid;
    gap: 2px;
    font-size: 13px
}

.qa-l b {
    font-size: 12px
}

.aud {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F7F7F7;
    border-radius: 999px;
    padding: 6px 12px 6px 6px
}

.aud .pl {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    padding-left: 2px
}

.aud .wave {
    height: 18px;
    color: #0D0D0D;
    flex: 1;
    overflow: hidden
}

@media (max-width: 800px) {
    .wapp {
        grid-template-columns:minmax(0, 1fr)
    }

    .wl {
        display: none
    }

    .wd-g {
        grid-template-columns:minmax(0, 1fr)
    }

    .wd-h {
        grid-template-columns:48px 1fr
    }

    .wd-act {
        grid-column: 1/-1
    }
}

.ats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px
}

.ats span {
    min-height: 0;
    padding: 12px 20px;
    border-radius: 999px
}

.pv-page {
    overflow: visible
}

.pv-x {
    right: -14px;
    top: -14px
}

.ways {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 12px
}

.way {
    display: grid;
    grid-template-columns:36px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    color: inherit;
    background: var(--bg);
    transition: border-color .2s
}

.way:hover {
    border-color: var(--fg)
}

.way .wn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 600
}

.way:nth-child(2) .wn {
    background: var(--ink);
    color: var(--on-ink)
}

.way b {
    display: block;
    font-size: 16px
}

.way div span {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.4;
    display: block;
    margin-top: 2px
}

@media (max-width: 560px) {
    .ways {
        grid-template-columns:minmax(0, 1fr)
    }
}

.hero h1 {
    font-size: clamp(36px, 5.2vw, 66px)
}

.faq .pm {
    position: relative;
    font-size: 0;
    color: transparent
}

.faq .pm::before, .faq .pm::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 2px;
    border-radius: 1px;
    background: var(--fg);
    transform: translate(-50%, -50%)
}

.faq .pm::after {
    transform: translate(-50%, -50%) rotate(90deg)
}

.faq details[open] .pm::before, .faq details[open] .pm::after {
    background: var(--on-accent)
}

.howgrid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start
}

@media (max-width: 900px) {
    .howgrid {
        grid-template-columns:minmax(0, 1fr)
    }
}

.hsteps {
    display: grid;
    gap: 12px
}

.hstep {
    display: grid;
    grid-template-columns:44px minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px 20px
}

.hn {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 14px
}

.hstep b {
    display: block;
    font-size: 17px;
    letter-spacing: -.01em
}

.hstep div span {
    font-size: 14px;
    color: var(--muted)
}

.hstep em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap
}

@media (max-width: 560px) {
    .hstep {
        grid-template-columns:44px minmax(0, 1fr)
    }

    .hstep em {
        grid-column: 2
    }
}

.halt {
    justify-self: start;
    background: var(--bg);
    border: 1px dashed var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--muted)
}

.xl {
    background: #fff;
    color: #0D0D0D;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow);
    border: 1px solid #E5E5E5
}

.xl-bar {
    background: #FFC600;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    gap: 10px;
    align-items: center
}

.xl-bar .dots {
    display: flex;
    gap: 5px
}

.xl-bar .dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0D0D0D
}

.xl-h {
    padding: 18px 20px;
    display: grid;
    gap: 4px;
    border-bottom: 1px solid #E5E5E5
}

.xl-h small {
    color: #6B6B6B;
    font-size: 12px
}

.xl-h b {
    font-size: 18px;
    letter-spacing: -.02em
}

.xl-h span {
    color: #6B6B6B;
    font-size: 13px
}

.xl-l {
    list-style: none;
    margin: 0;
    padding: 0
}

.xl-l li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid #F2F2F2;
    font-size: 14px
}

.xl-l li::before {
    content: "";
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: #FFC600
}

.xl-more {
    padding: 12px 20px;
    font-size: 13px;
    color: #6B6B6B
}

.pform {
    background: var(--bg);
    border-radius: 24px;
    padding: 28px;
    gap: 0
}

.pform .field {
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.pform .field:first-child {
    padding-top: 0
}

.pform .field:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.pform .num {
    font-size: 22px;
    letter-spacing: -.02em;
    margin-left: 6px
}

.pres {
    background: var(--band-dark);
    color: var(--on-dark);
    border-radius: 24px;
    padding: 32px;
    display: grid;
    gap: 10px;
    align-content: start;
    position: sticky;
    top: calc(env(safe-area-inset-top, 0px) + 96px)
}

.pres-l {
    font-size: 14px;
    color: var(--muted-dark)
}

.pres-v {
    font-size: clamp(34px, 4vw, 52px);
    letter-spacing: -.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums
}

.pres-n {
    font-size: 14px;
    color: var(--muted-dark)
}

.pkg {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 4px
}

.pkg span {
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 500
}

.pres .gate {
    border-top-color: var(--line-dark);
    margin-top: 8px
}

.pres .gate input {
    background: transparent;
    color: var(--on-dark);
    border-color: var(--line-dark)
}

.pres .note {
    color: var(--muted-dark)
}

.pres .sample {
    background: var(--line-dark);
    color: var(--muted-dark);
    margin-top: 6px
}

.pres {
    align-self: start
}

.pkg {
    display: none
}

.res2 {
    display: grid;
    grid-template-columns:150px minmax(0, 1fr);
    gap: 22px;
    align-items: start
}

@media (max-width: 480px) {
    .res2 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.docp {
    background: var(--cream);
    border-radius: 12px;
    padding: 14px;
    display: grid;
    place-items: center
}

.doc {
    width: 100%;
    aspect-ratio: 1/1.414;
    background: #fff;
    color: #0D0D0D;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    padding: 10px;
    display: grid;
    gap: 5px;
    align-content: start;
    font-size: 7px;
    line-height: 1.3;
    border-top: 5px solid #E5E5E5
}

.doc.y {
    border-top-color: #FFC600
}

.doc.d {
    border-top-color: #0D0D0D
}

.doc .dh {
    font-weight: 600;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 6px
}

.doc b {
    font-size: 9px;
    line-height: 1.2;
    margin-bottom: 3px
}

.doc .dl {
    display: flex;
    gap: 4px;
    align-items: flex-start
}

.doc .dl::before {
    content: "";
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    background: #FFC600;
    margin-top: 1.5px
}

.doc i {
    display: block;
    height: 3px;
    border-radius: 2px;
    background: #EDEDED
}

@media (max-width: 480px) {
    .docp {
        max-width: 180px
    }
}

.wslist {
    display: grid;
    gap: 10px
}

.wsl {
    display: grid;
    grid-template-columns:64px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    background: var(--bg);
    border-radius: 16px;
    padding: 16px 20px
}

.wsd {
    width: 64px;
    height: 64px;
    border-radius: 14px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-content: center;
    text-align: center;
    line-height: 1
}

.wsd b {
    font-size: 24px
}

.wsd span {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase
}

.wsi b {
    display: block;
    font-size: 17px;
    letter-spacing: -.01em
}

.wsi span {
    font-size: 14px;
    color: var(--muted)
}

.wsl-f {
    grid-column: 2/-1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center
}

.wsl-f input {
    flex: 1 1 200px;
    min-width: 0;
    font: 500 15px var(--sans);
    padding: 12px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg)
}

@media (max-width: 640px) {
    .wsl {
        grid-template-columns:56px minmax(0, 1fr)
    }

    .wsd {
        width: 56px;
        height: 56px
    }

    .wsl > .btn {
        grid-column: 1/-1;
        justify-self: start
    }

    .wsl-f {
        grid-column: 1/-1
    }
}

.jc-wrap {
    position: relative
}

.jc-row {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 6px 2px 18px;
    scrollbar-width: thin
}

.jc {
    flex: 0 0 260px;
    scroll-snap-align: start;
    text-align: left;
    border: 0;
    padding: 8px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 24px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    cursor: pointer;
    display: grid;
    grid-template-rows:auto 1fr;
    font: inherit
}

.jc-v {
    height: 230px;
    border-radius: 18px;
    position: relative;
    color: #fff;
    overflow: hidden
}

.jc-a {
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 255, 255, .95);
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600
}

.jc-p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: grid;
    place-items: center;
    font-size: 16px;
    padding-left: 3px
}

.jc-more {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 11px;
    opacity: .8
}

.jc-b {
    padding: 14px 8px 8px;
    display: grid;
    gap: 8px;
    align-content: start
}

.jc-b b {
    font-size: 17px;
    letter-spacing: -.02em;
    line-height: 1.2
}

.jc-t {
    display: flex;
    gap: 6px;
    flex-wrap: wrap
}

.jc-t span {
    background: #F2F2F2;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500
}

.jc-b p {
    margin: 0;
    font-size: 14px;
    color: #6B6B6B;
    line-height: 1.4
}

.jc-x {
    display: none;
    background: #FFFAED;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px
}

.jc-x small {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 2px
}

.jc.open .jc-x {
    display: block
}

.jc.open .jc-more {
    display: none
}

.jc-nav {
    position: absolute;
    top: 110px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--shadow)
}

.jc-nav.prev {
    left: -18px
}

.jc-nav.next {
    right: -18px
}

@media (max-width: 700px) {
    .jc-nav {
        display: none
    }

    .jc {
        flex-basis: 78%
    }
}

.feat {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

@media (max-width: 900px) {
    .feat {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 560px) {
    .feat {
        grid-template-columns:minmax(0, 1fr)
    }
}

.ft {
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    align-content: start
}

.ft h3 {
    padding: 18px 20px 0
}

.ft p {
    padding: 6px 20px 20px;
    margin: 0;
    color: var(--muted);
    font-size: 15px
}

.ft-v {
    height: 150px;
    background: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px
}

.mini-cv2 {
    width: 96px;
    aspect-ratio: 1/1.35;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1);
    display: grid;
    grid-template-columns:30% 1fr;
    overflow: hidden
}

.mini-cv2 span {
    background: #0D0D0D
}

.mini-cv2 div {
    padding: 8px 6px;
    display: grid;
    gap: 5px;
    align-content: start
}

.mini-cv2 i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5
}

.mini-cv2 i.d {
    height: 7px;
    background: #0D0D0D;
    width: 80%
}

.mini-cv2 i.y {
    background: #FFC600;
    width: 60%
}

.mini-cv2 em {
    font-style: normal;
    font-size: 7px;
    font-weight: 600;
    background: #FFC600;
    border-radius: 999px;
    padding: 2px 5px;
    justify-self: start;
    margin-top: 3px;
    color: #0D0D0D
}

.ft-mic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 20px
}

.ft-v .wave {
    height: 34px;
    color: #0D0D0D
}

.ft-v .wave i {
    width: 4px
}

.ft-cards {
    position: relative;
    width: 110px;
    height: 110px
}

.ft-cards span {
    position: absolute;
    width: 70px;
    height: 96px;
    border-radius: 12px;
    background: linear-gradient(160deg, #3a3a3a, #0D0D0D);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15)
}

.ft-cards span:nth-child(1) {
    left: 0;
    top: 10px;
    transform: rotate(-10deg)
}

.ft-cards span:nth-child(2) {
    left: 20px;
    top: 6px;
    transform: rotate(-3deg)
}

.ft-cards span.on {
    left: 40px;
    top: 4px;
    transform: rotate(8deg);
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 22px;
    color: #0D0D0D
}

.ft-big {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
    color: #0D0D0D
}

.ft-big small {
    font-size: 20px;
    margin-left: 4px;
    letter-spacing: 0
}

.ft-msg {
    background: #DCF8C6;
    color: #0D0D0D;
    border-radius: 14px 14px 14px 3px;
    padding: 10px 14px;
    font-size: 14px;
    max-width: 85%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.mini-cv2 {
    width: 84px
}

.mini-cv2 em {
    font-size: 6px;
    padding: 2px 4px
}

.lkhero {
    padding-block: 64px 72px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    overflow: hidden
}

.lkg {
    display: grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 40px;
    align-items: center
}

@media (max-width: 900px) {
    .lkg {
        grid-template-columns:minmax(0, 1fr)
    }
}

.lkc {
    display: grid;
    gap: 20px;
    min-width: 0
}

.lkc h1 {
    font-size: clamp(36px, 5vw, 64px)
}

.lk-badge {
    justify-self: start;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600
}

.lkv {
    position: relative;
    height: 380px
}

.fan {
    position: absolute;
    width: 210px;
    aspect-ratio: 1/1.35;
    background: #fff;
    color: #0D0D0D;
    border-radius: 8px;
    box-shadow: var(--shadow);
    padding: 18px;
    display: grid;
    gap: 10px;
    align-content: start;
    border: 1px solid #EDEDED
}

.fan .day {
    justify-self: start;
    background: #FFC600;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600
}

.fan b {
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1.2
}

.fan i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #EDEDED
}

.fan.f1 {
    left: 4%;
    top: 40px;
    transform: rotate(-8deg)
}

.fan.f2 {
    left: 30%;
    top: 10px;
    transform: rotate(2deg);
    z-index: 2
}

.fan.f3 {
    left: 54%;
    top: 50px;
    transform: rotate(10deg);
    z-index: 3
}

.lk-chip {
    position: absolute;
    left: 12%;
    bottom: 6px;
    z-index: 4;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap
}

@media (max-width: 560px) {
    .lkv {
        height: 300px
    }

    .fan {
        width: 150px;
        padding: 12px
    }

    .fan b {
        font-size: 12px
    }

    .lk-chip {
        left: 0;
        font-size: 12px
    }
}

.ws {
    background: #fff;
    color: #0D0D0D;
    aspect-ratio: 1/1.414;
    border-radius: 4px;
    box-shadow: var(--shadow);
    padding: 7% 8%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 11px;
    line-height: 1.4;
    min-width: 0;
    overflow: hidden
}

.ws-top {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid #0D0D0D;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase
}

.ws-top img {
    width: 18px;
    height: 18px;
    border-radius: 5px
}

.ws-name {
    display: grid;
    grid-template-columns:2fr 1fr 1fr;
    gap: 8px;
    font-size: 8px;
    color: #6B6B6B
}

.ws-name span {
    border-bottom: 1px solid #BDBDBD;
    padding-bottom: 10px
}

.ws-head {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 12px;
    align-items: center;
    margin-top: 4px
}

.ws-day {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -.05em;
    line-height: 1;
    background: #FFC600;
    border-radius: 6px;
    padding: 4px 8px
}

.ws-head small {
    display: block;
    font-size: 8px;
    font-weight: 600;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: .06em
}

.ws-head b {
    display: block;
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1.15
}

.ws-head em {
    font-style: normal;
    font-size: 9px;
    color: #6B6B6B
}

.wt {
    display: grid;
    grid-template-columns:18px 1fr;
    gap: 8px
}

.wn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 600
}

.wt b {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px
}

.wl2 {
    display: block;
    height: 16px;
    border-bottom: 1px solid #D4D4D4
}

.ws-qr {
    display: flex;
    gap: 10px;
    align-items: center;
    background: #F7F7F7;
    border-radius: 8px;
    padding: 8px
}

.qr {
    width: 38px;
    height: 38px;
    flex: none;
    background: conic-gradient(#0D0D0D 25%, #fff 0 50%, #0D0D0D 0 75%, #fff 0) 0 0/10px 10px;
    border: 3px solid #0D0D0D;
    border-radius: 3px
}

.ws-qr b {
    display: block;
    font-size: 10px
}

.ws-qr small {
    font-size: 8px;
    color: #6B6B6B
}

.ws-foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #6B6B6B;
    border-top: 1px solid #E5E5E5;
    padding-top: 6px
}

.ws-tip {
    background: #FFFAED;
    border-left: 3px solid #FFC600;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 10px
}

.ws-tip b {
    display: block;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 2px
}

.ws-check {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 5px 8px;
    margin-left: 26px
}

.ws-check span {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 9.5px
}

.ws-check span::before {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    border: 1.5px solid #0D0D0D;
    border-radius: 2px
}

.ws-ol {
    margin: 0 0 0 26px;
    padding-left: 14px;
    display: grid;
    gap: 4px;
    font-size: 10px;
    font-weight: 600
}

.ws-ol li {
    border-bottom: 1px solid #D4D4D4;
    height: 18px
}

.abhero {
    padding-block: 64px 72px;
    background: var(--cream)
}

.abg {
    display: grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 48px;
    align-items: center
}

@media (max-width: 900px) {
    .abg {
        grid-template-columns:minmax(0, 1fr)
    }
}

.abc {
    display: grid;
    gap: 20px;
    min-width: 0
}

.abc h1 {
    font-size: clamp(36px, 5vw, 64px)
}

.portrait {
    margin: 0;
    position: relative;
    max-width: 380px;
    justify-self: center;
    width: 100%
}

.ph-img {
    aspect-ratio: 4/5;
    border-radius: 28px;
    background: linear-gradient(160deg, #E5E5E5, #CFCFCF);
    display: grid;
    place-items: center;
    color: #6B6B6B;
    font-weight: 600;
    font-size: 15px;
    border: 2px dashed #BDBDBD
}

.portrait figcaption {
    position: absolute;
    left: 16px;
    bottom: 16px;
    background: var(--bg);
    color: var(--fg);
    border-radius: 14px;
    padding: 10px 14px;
    box-shadow: var(--shadow);
    display: grid
}

.portrait figcaption b {
    font-size: 16px
}

.portrait figcaption span {
    font-size: 13px;
    color: var(--muted)
}

.pt-badge {
    position: absolute;
    right: -10px;
    top: 24px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    transform: rotate(6deg);
    box-shadow: var(--shadow)
}

@media (max-width: 560px) {
    .pt-badge {
        right: 6px
    }
}

.dual {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch
}

@media (max-width: 900px) {
    .dual {
        grid-template-columns:minmax(0, 1fr)
    }
}

.dcard {
    background: var(--surface);
    border-radius: 28px;
    padding: 32px;
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0
}

.dcard p {
    color: var(--muted);
    margin: 0
}

.dtag {
    justify-self: start;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600
}

.dcard:nth-child(2) .dtag {
    background: var(--ink);
    color: var(--on-ink)
}

.dcard h3 {
    font-size: 28px;
    letter-spacing: -.03em
}

.flow2 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 8px 0
}

.flow2 .node {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border-radius: 14px;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06);
    white-space: nowrap
}

.flow2 .node img {
    width: 24px;
    height: 24px;
    border-radius: 6px
}

.flow2 .node.dark {
    background: var(--ink);
    color: var(--on-ink)
}

.fl-arrow {
    flex: 1;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--fg) 0 6px, transparent 6px 12px);
    position: relative;
    min-width: 30px
}

.fl-arrow::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -5px;
    border: 6px solid transparent;
    border-left-color: var(--fg)
}

.dcard .ats {
    justify-content: flex-start
}

.dcard .ats span {
    background: var(--bg);
    padding: 10px 16px
}

.dcard .bwin {
    max-width: none;
    margin-top: 6px
}

.dcard .wapp {
    grid-template-columns:minmax(0, 1fr);
    min-height: 0
}

.dcard .wl {
    display: none
}

.dcard .wd-g {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr)
}

.dcard .wd-h {
    grid-template-columns:48px 1fr
}

.dcard .wd-act {
    grid-column: 1/-1
}

@media (max-width: 560px) {
    .flow2 .node {
        font-size: 13px;
        padding: 10px 12px
    }

    .dcard {
        padding: 22px
    }

    .dcard .wd-g {
        grid-template-columns:minmax(0, 1fr)
    }
}

.pt-img {
    display: block;
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    object-position: 50% 30%;
    border-radius: 28px;
    box-shadow: var(--shadow)
}

.ways2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px
}

.ways2 a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    text-decoration: none;
    font-size: 16px
}

.ways2 .wn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-size: 13px
}

.ways2 a:nth-child(2) .wn {
    background: var(--ink);
    color: var(--on-ink)
}

.cats {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 14px
}

@media (max-width: 900px) {
    .cats {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.cat {
    position: relative;
    aspect-ratio: 3/4;
    border-radius: 20px;
    color: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 4px;
    overflow: hidden
}

.cat-n {
    position: absolute;
    top: 14px;
    left: 14px;
    background: rgba(255, 255, 255, .95);
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600
}

.cat b {
    font-size: 17px;
    letter-spacing: -.02em;
    line-height: 1.2;
    position: relative
}

.cat-p {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .2);
    display: grid;
    place-items: center;
    padding-left: 3px
}

.cat.loc {
    background: var(--accent);
    color: var(--on-accent)
}

.cat.loc .cat-n {
    background: #0D0D0D;
    color: #fff
}

.pins {
    position: absolute;
    inset: 50px 14px 70px
}

.pins i {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 50% 0;
    background: #0D0D0D;
    transform: rotate(-45deg)
}

.team {
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px
}

.tm {
    display: grid;
    gap: 4px
}

.tm-ph {
    aspect-ratio: 1;
    border-radius: 20px;
    overflow: hidden;
    background: var(--bg);
    margin-bottom: 8px
}

.tm-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 25%;
    display: block
}

.tm-ini {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;
    font-size: 36px;
    font-weight: 600;
    letter-spacing: -.03em
}

.tm-ini.t0 {
    background: var(--accent);
    color: var(--on-accent)
}

.tm-ini.t1 {
    background: var(--ink);
    color: var(--on-ink)
}

.tm-ini.t2 {
    background: var(--cream);
    color: var(--fg)
}

.tm b {
    font-size: 16px
}

.tm span {
    font-size: 14px;
    color: var(--muted)
}

.tm .tm-ini {
    font-size: 40px;
    color: inherit
}

.tm .tm-ini.t0 {
    color: var(--on-accent)
}

.tm .tm-ini.t1 {
    color: var(--on-ink)
}

.tm .tm-ini.t2 {
    color: var(--fg)
}

.team {
    grid-template-columns:repeat(5, minmax(0, 1fr))
}

@media (max-width: 900px) {
    .team {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 480px) {
    .team {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.feedv {
    display: grid;
    justify-items: center;
    gap: 16px
}

.fphone {
    max-width: 300px
}

.fhead {
    display: flex;
    justify-content: center;
    gap: 16px;
    padding: 40px 0 10px;
    font-size: 13px
}

.fhead span {
    color: #9A9A9A
}

.fgrid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 3px;
    padding: 0 3px
}

.fgrid span {
    aspect-ratio: 9/14;
    border-radius: 4px;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 5px;
    color: #fff;
    font-size: 9px
}

.fgrid span b {
    font-weight: 600
}

.fgrid .fy {
    background: #FFC600;
    color: #0D0D0D;
    outline: 3px solid #0D0D0D;
    outline-offset: -3px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 2px
}

.fgrid .fy em {
    font-style: normal;
    font-size: 7px;
    opacity: .7
}

.fgrid .fy i {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-style: normal;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 9px;
    padding-left: 2px
}

.fnote {
    font-size: 14px;
    font-weight: 600;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 8px 16px
}

.offer .ico.emo {
    width: auto;
    padding: 0 10px;
    font-size: 22px;
    justify-self: start
}

.nav .actions .btn {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 15px;
    box-sizing: border-box;
    line-height: 1
}

.nav .actions .btn-ghost {
    padding-left: 20px;
    padding-right: 20px
}

.nav .actions .btn-primary {
    padding-left: 20px;
    padding-right: 11px
}

/* realistischeres Handy */
.phone {
    padding: 10px;
    border-radius: 54px;
    background: linear-gradient(145deg, #2b2b2b, #0D0D0D 40%);
    box-shadow: var(--shadow), inset 0 0 0 2px #3a3a3a
}

.phone .screen {
    inset: 10px;
    border-radius: 44px
}

.phone .island {
    top: 22px;
    width: 86px;
    height: 25px
}

.phone .island::after {
    content: "";
    position: absolute;
    right: 9px;
    top: 50%;
    width: 9px;
    height: 9px;
    margin-top: -4.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3b4a6b, #111 60%)
}

.pbtn {
    position: absolute;
    width: 3px;
    background: #1f1f1f;
    border-radius: 2px
}

.pb1 {
    left: -3px;
    top: 18%;
    height: 5%
}

.pb2 {
    left: -3px;
    top: 26%;
    height: 9%
}

.pb3 {
    right: -3px;
    top: 24%;
    height: 13%
}

.sbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 26px 0 30px;
    height: 42px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.01em;
    flex: none
}

.sbar .sic {
    display: flex;
    align-items: center;
    gap: 6px
}

.sbar .sig {
    display: flex;
    align-items: flex-end;
    gap: 1.5px;
    height: 10px
}

.sbar .sig b {
    width: 3px;
    background: currentColor;
    border-radius: 1px
}

.sbar .sig b:nth-child(1) {
    height: 4px
}

.sbar .sig b:nth-child(2) {
    height: 6px
}

.sbar .sig b:nth-child(3) {
    height: 8px
}

.sbar .sig b:nth-child(4) {
    height: 10px
}

.sbar .bat {
    width: 22px;
    height: 11px;
    border: 1.5px solid currentColor;
    border-radius: 3.5px;
    position: relative;
    opacity: .9
}

.sbar .bat::before {
    content: "";
    position: absolute;
    inset: 1.5px;
    right: 5px;
    background: currentColor;
    border-radius: 1.5px
}

.sbar .bat::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 2.5px;
    width: 2px;
    height: 4px;
    background: currentColor;
    border-radius: 0 1px 1px 0
}

.phone .app-top {
    padding-top: 8px
}

[hidden] {
    display: none !important
}

.ft-v .flow2 {
    transform: scale(.82);
    transform-origin: center
}

.ft-v.ft-col {
    flex-direction: column;
    gap: 10px
}

.ft-inbox {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    width: min(260px, 100%)
}

.ft-inbox img {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    flex: none
}

.ft-inbox div {
    display: grid;
    min-width: 0;
    flex: 1
}

.ft-inbox b {
    font-size: 14px
}

.ft-inbox small {
    font-size: 12px;
    color: #6B6B6B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ft-inbox .ok {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex: none
}

.ft-sys {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center
}

.ft-sys span {
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #0D0D0D;
    border: 1px solid #E8E2CF;
    border-radius: 999px;
    padding: 4px 10px
}

.ft-sys span:last-child {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

/* Feed-Handy: realistischer, kein Weißraum, kein Schwarz auf Gelb */
.fphone .msc .isl {
    top: 13px;
    width: 58px;
    height: 17px
}

.fsbar {
    height: auto;
    padding: 12px 16px 0 20px;
    font-size: 10px
}

.fsbar .sig {
    height: 7px
}

.fsbar .sig b {
    width: 2px
}

.fsbar .sig b:nth-child(1) {
    height: 3px
}

.fsbar .sig b:nth-child(2) {
    height: 4px
}

.fsbar .sig b:nth-child(3) {
    height: 6px
}

.fsbar .sig b:nth-child(4) {
    height: 7px
}

.fsbar .bat {
    width: 16px;
    height: 8px;
    border-width: 1px;
    border-radius: 2.5px
}

.fsbar .bat::before {
    inset: 1px;
    right: 3px
}

.fsbar .bat::after {
    right: -3px;
    top: 1.5px;
    height: 3px
}

.fphone .fhead {
    padding: 12px 0 8px
}

.fphone .fgrid {
    flex: 1;
    grid-auto-rows: 1fr;
    padding-bottom: 3px
}

.fphone .fgrid span {
    aspect-ratio: auto
}

.fgrid .fy {
    background: #0D0D0D;
    color: #fff;
    outline: 2px solid #FFC600;
    outline-offset: -2px
}

.fgrid .fy em {
    opacity: .75;
    color: #FFC600
}

.fgrid .fy i {
    background: #fff;
    color: #0D0D0D
}

.fnote {
    background: var(--ink);
    color: var(--on-ink)
}

.g4.tools4 {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

@media (max-width: 900px) {
    .g4.tools4 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 560px) {
    .g4.tools4 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.tp-quiz {
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 14px;
    width: 88%;
    display: grid;
    gap: 7px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.tp-quiz small {
    font-size: 11px;
    color: #6B6B6B
}

.tp-quiz b {
    font-size: 14px
}

.tp-quiz span {
    font-size: 12px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 8px 10px
}

.tp-quiz span.on {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.tp-sheet {
    background: #fff;
    color: #0D0D0D;
    width: 130px;
    aspect-ratio: 3/4;
    border-radius: 8px;
    padding: 12px;
    display: grid;
    gap: 6px;
    align-content: start;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
    transform: rotate(-3deg)
}

.tp-sheet small {
    font-size: 9px;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: .06em
}

.tp-sheet b {
    font-size: 13px
}

.tp-sheet i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5
}

.tp-sheet span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px
}

.tp-sheet span em {
    width: 9px;
    height: 9px;
    border: 1.5px solid #0D0D0D;
    border-radius: 2px
}

.tp-sheet span:first-of-type em {
    background: #FFC600;
    border-color: #FFC600
}

.card .vid.ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55))
}

.card .vid.il .co {
    color: #0D0D0D
}

.card .vid.il .co i {
    border-color: #fff
}

.card .vid .jemo {
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 72px;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .15))
}

.bigstat {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 24px;
    padding: 18px 22px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: var(--bg);
    max-width: 640px
}

.bigstat b {
    font-size: clamp(36px, 5vw, 52px);
    font-weight: 600;
    letter-spacing: -.04em;
    line-height: 1;
    white-space: nowrap
}

.bigstat span {
    font-size: 15px;
    color: var(--muted);
    display: grid;
    gap: 6px
}

.bigstat small {
    font-size: 12px;
    opacity: .8
}

@media (max-width: 560px) {
    .bigstat {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px
    }
}

/* Preisrechner: Paket + Anfrageformular statt Preis */
.pkg.pkg-list {
    display: grid;
    gap: 10px;
    margin: 8px 0 4px
}

.pkg-list div {
    display: grid;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--line-dark);
    border-radius: 14px
}

.pkg-list b {
    font-size: 16px
}

.pkg-list span {
    font-size: 13px;
    color: var(--muted-dark)
}

.offer-form {
    display: grid;
    gap: 10px;
    margin-top: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--line-dark)
}

.of2 {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px
}

.offer-form input {
    font: inherit;
    font-size: 15px;
    padding: 13px 16px;
    border-radius: 999px;
    border: 1px solid var(--line-dark);
    background: transparent;
    color: var(--on-dark);
    min-width: 0
}

.offer-form input::placeholder {
    color: var(--muted-dark)
}

.offer-form .btn {
    justify-self: start
}

@media (max-width: 560px) {
    .of2 {
        grid-template-columns:minmax(0, 1fr)
    }

    .offer-form .btn {
        justify-self: stretch;
        justify-content: space-between
    }
}

.pkg-list div span {
    border: 0;
    padding: 0;
    border-radius: 0;
    font-weight: 400
}

.trio:has(> figure:nth-child(4)) {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

@media (max-width: 900px) {
    .trio:has(> figure:nth-child(4)) {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 560px) {
    .trio:has(> figure:nth-child(4)) {
        grid-template-columns:minmax(0, 1fr)
    }
}

.cvm {
    padding: 34px 12px 12px;
    display: grid;
    gap: 9px;
    height: 100%;
    align-content: start;
    text-align: left
}

.cvm small {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6B6B6B;
    font-weight: 600
}

.cvm-h {
    display: flex;
    align-items: center;
    gap: 8px
}

.cvm-h .av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 11px;
    font-weight: 600;
    background: #FFE58A;
    color: #0D0D0D;
    flex: none
}

.cvm-h b {
    font-size: 13px;
    display: block
}

.cvm-h em {
    font-style: normal;
    font-size: 10px;
    color: #6B6B6B
}

.cvm-s {
    display: grid;
    gap: 4px;
    background: #F5F5F5;
    border-radius: 10px;
    padding: 8px
}

.cvm-s i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #DADADA
}

.cvm-t {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.cvm-t span {
    font-size: 9px;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px 7px
}

.cvm .btn2 {
    margin-top: auto
}

.xl-peek {
    position: relative;
    max-height: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent);
    mask-image: linear-gradient(180deg, #000 40%, transparent)
}

.xl-dl {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
    border-top: 1px solid var(--line)
}

.xl-file {
    display: flex;
    align-items: center;
    gap: 12px
}

.xl-ico {
    width: 44px;
    height: 52px;
    border-radius: 8px;
    background: #1D6F42;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: end center;
    padding-bottom: 8px;
    flex: none
}

.xl-file b {
    display: block;
    font-size: 15px
}

.xl-file small {
    font-size: 13px;
    color: var(--muted)
}

.xl-dl .gate {
    margin: 0;
    border: 0;
    padding: 0
}

.freecards .fc {
    display: grid;
    gap: 10px;
    align-content: start;
    background: var(--bg)
}

.fc-tag {
    justify-self: start;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    background: #E7F5EC;
    color: #166534
}

.fc-tag.dark {
    background: var(--ink);
    color: var(--on-ink)
}

.freecards .fc p {
    margin: 0;
    color: var(--muted)
}

#checkNote:empty {
    display: none
}

.postgrid .mph .det .hero-v {
    height: auto;
    flex: 1;
    min-height: 0
}

.postgrid .mph .det {
    display: flex;
    flex-direction: column;
    height: 100%
}

/* Ressourcen: nur Titelblatt */
.doc.cover {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 12px;
    border-top: 0;
    position: relative;
    overflow: hidden
}

.doc.cover .cv-logo {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    font-size: 7px
}

.doc.cover .cv-logo img {
    width: 12px;
    height: 12px;
    border-radius: 3px
}

.doc.cover .cv-mid {
    display: grid;
    gap: 4px
}

.doc.cover b {
    font-size: 12px;
    line-height: 1.15;
    letter-spacing: -.01em;
    margin: 0
}

.doc.cover .cv-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 6px;
    color: #6B6B6B
}

.doc.cover .cv-foot i {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    background: #FFC600
}

.doc.cover::after {
    content: "";
    position: absolute;
    right: -18px;
    top: -18px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #FFC600;
    opacity: .9
}

.doc.cover.d {
    background: #0D0D0D;
    color: #fff
}

.doc.cover.d .dh, .doc.cover.d .cv-foot {
    color: #BDBDBD
}

.doc.cover.y::after {
    width: 100%;
    height: 38%;
    border-radius: 0;
    right: 0;
    top: auto;
    bottom: 0;
    opacity: 1;
    z-index: 0
}

.doc.cover.y .cv-foot {
    position: relative;
    z-index: 1;
    color: #0D0D0D
}

.doc.cover.y .cv-foot {
    visibility: hidden
}

.doc.cover > * {
    position: relative;
    z-index: 1
}

.doc.cover b {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: anywhere
}

.doc.cover.y::after {
    height: 18%
}

.doc.cover.y .cv-foot {
    visibility: visible;
    color: #6B6B6B;
    margin-bottom: 18%
}

.jc-e {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 64px;
    letter-spacing: -6px;
    white-space: nowrap;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .15))
}

.jc-v:not(.ph) .jc-more {
    color: #0D0D0D;
    opacity: .6
}

.jc-v.ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(0, 0, 0, .45))
}

.jc-v.ph .jc-more {
    z-index: 1
}

.ft-mic {
    background: var(--ink);
    color: var(--on-ink)
}

.ft-mic svg, .mb svg {
    display: block
}

.mb {
    background: #0D0D0D;
    color: #fff;
    box-shadow: 0 0 0 10px rgba(13, 13, 13, .08), 0 0 0 20px rgba(255, 198, 0, .18)
}

.tint .g4 > .box.offer, .g4 > .box.offer {
    display: flex;
    flex-direction: column
}

.g4 > .box.offer .link {
    margin-top: auto;
    padding-top: 10px
}

.mic .mb, .msc .mb {
    background: #0D0D0D !important;
    color: #fff !important;
    box-shadow: 0 0 0 8px rgba(13, 13, 13, .08), 0 0 0 16px rgba(255, 198, 0, .2) !important
}

.peaks .pk {
    display: grid;
    gap: 10px;
    align-content: start
}

.pk-n {
    justify-self: start;
    font-size: 12px;
    font-weight: 600;
    background: var(--ink);
    color: var(--on-ink);
    border-radius: 999px;
    padding: 4px 12px
}

.pk-v {
    height: 130px;
    background: var(--cream);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px
}

.pk-g {
    display: flex;
    gap: 4px;
    padding: 8px;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.pk-g i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0D0D0D
}

.pk-g:nth-child(2) i {
    background: #FFC600
}

.pk-g:nth-child(3) i {
    background: #9AA7B4
}

.pk-slide {
    background: #fff;
    color: #0D0D0D;
    border-radius: 10px;
    padding: 12px;
    width: 70%;
    aspect-ratio: 16/9;
    display: grid;
    gap: 6px;
    align-content: start;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .08);
    border-top: 4px solid #0D0D0D
}

.pk-slide b {
    font-size: 13px
}

.pk-slide i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E5E5E5
}

.pk-wall {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center
}

.pk-wall span {
    background: #fff;
    color: #0D0D0D;
    font-size: 12px;
    border-radius: 12px 12px 12px 3px;
    padding: 7px 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.peaks .pk p {
    margin: 0;
    color: var(--muted)
}

/* Material auf dem iPad */
.ipad {
    background: #1A1A1A;
    border-radius: 28px;
    padding: 14px;
    box-shadow: var(--shadow), inset 0 0 0 2px #333;
    position: relative
}

.ipad-cam {
    position: absolute;
    top: 5px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: #3b4a6b
}

.ws.app {
    aspect-ratio: 3/4;
    border-radius: 16px;
    box-shadow: none;
    padding: 16px 18px;
    gap: 10px;
    background: #fff
}

.ws.app .ws-top {
    display: flex;
    align-items: center;
    gap: 8px
}

.ws.app .ws-sync {
    margin-left: auto;
    font-style: normal;
    font-size: 10px;
    color: #16a34a;
    font-weight: 600
}

.ws.app .wl2 {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    height: 22px;
    background: #FAFAFA
}

.ws.app .ws-check span {
    border-radius: 999px
}

.ws.app .ws-check span:nth-child(1), .ws.app .ws-check span:nth-child(3) {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.ws.app .ws-ol li {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    background: #FAFAFA
}

.ws-foot {
    align-items: center
}

.ws-prog {
    flex: 1;
    height: 5px;
    border-radius: 3px;
    background: #EEE;
    margin-right: 10px;
    overflow: hidden
}

.ws-prog i {
    display: block;
    height: 100%;
    background: #FFC600;
    border-radius: 3px
}

.ws.app .ws-day {
    background: #0D0D0D;
    color: #fff;
    border-radius: 12px
}

.ws.app .ws-top {
    border-bottom: 0
}

.sf-tabs {
    margin-bottom: 18px
}

.sf-p {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px
}

.sf-p h3 {
    font-size: 24px;
    letter-spacing: -.02em;
    margin: 0 0 8px
}

.sf-p p {
    margin: 0;
    color: var(--muted)
}

.vs3 {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px
}

.vs3 div {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 16px;
    display: grid;
    gap: 6px;
    align-content: start
}

.vs3 .mid {
    background: var(--ink);
    color: var(--on-ink);
    border-color: var(--ink)
}

.vs3 b {
    font-size: 15px
}

.vs3 span {
    font-size: 13px;
    opacity: .75
}

@media (max-width: 800px) {
    .sf-p {
        grid-template-columns:minmax(0, 1fr);
        padding: 22px
    }

    .vs3 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.reach2 {
    display: grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(0, .75fr);
    gap: 56px;
    align-items: center
}

.r2-copy {
    display: grid;
    gap: 18px;
    align-content: start
}

.r2-copy h2 {
    margin: 0
}

.r2-copy .lead {
    margin: 0
}

.r2-copy .bigstat {
    margin-top: 4px
}

.r2-pts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px
}

.r2-pts li {
    display: grid;
    gap: 2px;
    padding-left: 16px;
    border-left: 3px solid #FFC600
}

.r2-pts b {
    font-size: 17px
}

.r2-pts span {
    color: var(--muted);
    font-size: 15px
}

.reach2 .fphone {
    max-width: 260px
}

@media (max-width: 900px) {
    .reach2 {
        grid-template-columns:minmax(0, 1fr);
        gap: 32px
    }
}

.aud-tabs {
    margin: -8px 0 22px;
    align-items: center
}

.aud-l {
    font-size: 14px;
    color: var(--muted);
    margin-right: 4px
}

.tools4 .tcard[hidden] {
    display: none
}

/* Berufskompass auf dem iPad, neu */
.tabshow {
    display: grid;
    grid-template-columns:minmax(0, 1.5fr) minmax(0, .8fr);
    gap: 48px;
    align-items: center
}

.tab-l {
    position: relative;
    padding: 20px 10px
}

.ipad2 {
    background: #141414;
    border-radius: 30px;
    padding: 14px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, .18), inset 0 0 0 2px #2c2c2c
}

.ip-scr {
    background: #fff;
    color: #0D0D0D;
    border-radius: 18px;
    aspect-ratio: 4/3;
    display: grid;
    grid-template-columns:30% 1fr;
    overflow: hidden
}

.ip-side {
    background: #F7F7F7;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12px
}

.ip-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 12px;
    margin-bottom: 10px
}

.ip-brand img {
    width: 18px;
    height: 18px;
    border-radius: 5px
}

.ip-wk {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #8A8A8A;
    font-weight: 600;
    margin-bottom: 2px
}

.ip-d {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    border-radius: 10px;
    color: #6B6B6B
}

.ip-d i {
    font-style: normal;
    color: #16a34a;
    font-weight: 700
}

.ip-d.done {
    color: #0D0D0D
}

.ip-d.on {
    background: #0D0D0D;
    color: #fff;
    font-weight: 600
}

.ip-main {
    padding: 22px 26px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.ip-bar {
    height: 5px;
    border-radius: 3px;
    background: #EEE;
    overflow: hidden;
    margin-bottom: 8px
}

.ip-bar i {
    display: block;
    height: 100%;
    background: #FFC600
}

.ip-main small {
    font-size: 11px;
    color: #8A8A8A;
    font-weight: 600
}

.ip-main h4 {
    margin: 0;
    font-size: clamp(16px, 2vw, 24px);
    line-height: 1.15;
    letter-spacing: -.02em
}

.ip-main p {
    margin: 0;
    font-size: 12px;
    color: #6B6B6B
}

.ip-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 6px
}

.ip-chips span {
    font-size: 12px;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    padding: 7px 12px
}

.ip-chips span.on {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.ip-next {
    margin-top: auto;
    align-self: flex-end;
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 600
}

.ip-float {
    position: absolute;
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    padding: 9px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--shadow);
    white-space: nowrap
}

.ip-float.f1 {
    top: 0;
    right: 4%
}

.ip-float.f2 {
    bottom: 0;
    left: 4%
}

.tab-pts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 18px
}

.tab-pts li {
    display: grid;
    gap: 3px;
    padding-left: 16px;
    border-left: 3px solid #FFC600
}

.tab-pts b {
    font-size: 17px
}

.tab-pts span {
    color: var(--muted)
}

@media (max-width: 900px) {
    .tabshow {
        grid-template-columns:minmax(0, 1fr)
    }
}

@media (max-width: 560px) {
    .ip-scr {
        grid-template-columns:minmax(0, 1fr)
    }

    .ip-side {
        display: none
    }

    .ip-main {
        padding: 16px
    }
}

.ip-scr {
    aspect-ratio: 16/10
}

.fan.app {
    border-radius: 22px;
    border: 0;
    padding: 16px;
    gap: 10px;
    aspect-ratio: 9/13
}

.fan.app .st {
    display: flex;
    gap: 4px
}

.fan.app .st i {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: #E5E5E5
}

.fan.app .st i.d {
    background: #0D0D0D
}

.fan.app .day {
    background: #F2F2F2;
    color: #0D0D0D
}

.fan.app b {
    font-size: 17px
}

.fan.app .ans {
    background: #F2F2F2;
    border-radius: 14px 14px 14px 4px;
    padding: 9px 11px;
    font-size: 12px;
    line-height: 1.35
}

.fan.app .ch {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.fan.app .ch em {
    font-style: normal;
    font-size: 11px;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    padding: 5px 9px
}

.fan.app .ch em.on {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.fan.app .rk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    background: #F7F7F7;
    border-radius: 10px;
    padding: 6px 8px
}

.fan.app .rk em {
    font-style: normal;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700
}

.fan.app.f1 {
    background: #0D0D0D;
    color: #fff
}

.fan.app.f1 .st i {
    background: #444
}

.fan.app.f1 .st i.d {
    background: #FFC600
}

.fan.app.f1 .day {
    background: #2a2a2a;
    color: #fff
}

.fan.app.f1 .ans {
    background: #2a2a2a;
    color: #fff
}

@media (max-width: 560px) {
    .fan.app b {
        font-size: 13px
    }

    .fan.app {
        padding: 11px;
        gap: 7px
    }

    .fan.app .ans, .fan.app .rk {
        font-size: 10px
    }
}

.portrait .pt-badge {
    transform: none !important;
    rotate: 0deg !important
}

.portrait .pt-badge {
    background: var(--ink);
    color: var(--on-ink)
}

.cquote {
    margin: 0 auto;
    max-width: 880px;
    display: grid;
    gap: 28px
}

.cquote blockquote {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 32px);
    line-height: 1.35;
    letter-spacing: -.015em;
    font-weight: 500
}

.cquote figcaption {
    display: flex;
    align-items: center;
    gap: 14px
}

.cquote img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover
}

.cquote figcaption span {
    display: grid;
    font-size: 14px;
    opacity: .75
}

.cquote figcaption b {
    font-size: 16px;
    opacity: 1
}

.estab {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 6px
}

.estab div {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    display: grid;
    gap: 2px
}

.estab b {
    font-size: 26px;
    letter-spacing: -.03em;
    font-weight: 600
}

.estab span {
    font-size: 13px;
    color: var(--muted)
}

.team {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

@media (max-width: 800px) {
    .team {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.tm-ini.t0 {
    background: #FFF3C4;
    color: #0D0D0D
}

/* JuniorJob-CV im echten Design */
.jcv {
    width: 420px;
    aspect-ratio: 1/1.414;
    background: #fff;
    color: #0D0D0D;
    display: grid;
    grid-template-columns:34% 1fr;
    font-size: 10px;
    line-height: 1.3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
    border-radius: 4px;
    overflow: hidden;
    text-align: left
}

.jcv i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E3E3E3
}

.jcv-side {
    background: #F4F4F4;
    padding: 22px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start
}

.jcv-ph {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(160deg, #FFE58A, #F5C400);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 20px;
    align-self: center;
    margin-bottom: 8px
}

.jcv-h {
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 700;
    margin-top: 8px;
    padding-bottom: 3px;
    border-bottom: 2px solid #FFC600;
    align-self: stretch
}

.jcv-main .jcv-h {
    border-bottom: 0;
    margin-top: 12px
}

.jcv-chip {
    font-size: 8px;
    background: #E6E6E6;
    border-radius: 3px;
    padding: 2px 6px
}

.jcv-bar {
    align-self: stretch;
    height: 4px;
    border-radius: 2px;
    background: #E3E3E3
}

.jcv-bar em {
    display: block;
    height: 100%;
    background: #FFC600;
    border-radius: 2px
}

.jcv-main {
    padding: 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.jcv-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start
}

.jcv-name {
    font-size: 22px;
    letter-spacing: -.02em;
    display: block
}

.jcv-top small {
    font-size: 8px;
    color: #6B6B6B;
    text-transform: uppercase;
    letter-spacing: .06em
}

.jcv-top img {
    width: 26px;
    height: 26px;
    border-radius: 6px
}

.jcv-ul {
    width: 40px;
    height: 3px;
    background: #FFC600;
    border-radius: 2px
}

.jcv-it {
    display: grid;
    grid-template-columns:8px 1fr;
    gap: 6px
}

.jcv-it .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFC600;
    margin-top: 3px
}

.jcv-it div {
    display: grid;
    gap: 3px
}

.jcv-it b {
    font-size: 10px
}

.jcv-wrap {
    display: grid;
    place-items: start center;
    overflow: hidden
}

.jcv-wrap .jcv {
    transform-origin: top center
}

.jcv-wrap.s1 {
    height: 100%;
    width: 100%;
    padding-top: 14px
}

.jcv-wrap.s1 .jcv {
    transform: scale(.42);
    margin-bottom: -340px
}

.jcv-wrap.s2 {
    position: absolute;
    inset: 0;
    padding-top: 40px;
    background: #F2F2F2
}

.jcv-wrap.s2 .jcv {
    transform: scale(.5)
}

.jcv-wrap.s3 {
    height: 100%;
    width: 100%;
    padding-top: 4px
}

.jcv-wrap.s3 .jcv {
    transform: scale(.44)
}

.jcv-wrap {
    position: relative;
    display: block
}

.jcv-wrap .jcv {
    position: absolute;
    left: 50%;
    top: 14px;
    margin: 0 !important
}

.jcv-wrap.s1 {
    height: 100%;
    width: 100%;
    padding: 0
}

.jcv-wrap.s1 .jcv {
    transform: translateX(-50%) scale(.42)
}

.jcv-wrap.s2 {
    position: absolute;
    inset: 0;
    padding: 0
}

.jcv-wrap.s2 .jcv {
    top: 44px;
    transform: translateX(-50%) scale(.48)
}

.jcv-wrap.s3 {
    height: 100%;
    width: 100%;
    padding: 0
}

.jcv-wrap.s3 .jcv {
    top: 8px;
    transform: translateX(-50%) scale(.42)
}

.ft-v:has(.jcv-wrap), .tprev:has(.jcv-wrap) {
    padding: 0
}

.ats.ats-logos {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 10px
}

.atl {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    height: 64px;
    display: grid;
    place-items: center;
    padding: 0 12px
}

.atl img {
    max-width: 100%;
    width: auto;
    display: block
}

@media (min-width: 1100px) {
    .ats.ats-logos {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

.ats.ats-logos {
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important
}

.ats.ats-logos .atl {
    border-radius: 14px;
    padding: 0 14px;
    font-size: 0
}

.sync {
    display: grid;
    gap: 8px;
    margin: 4px 0 2px
}

.sync-row {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .05)
}

.sync-row img {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    flex: none
}

.sync-row div {
    display: grid;
    min-width: 0;
    flex: 1
}

.sync-row b {
    font-size: 14px
}

.sync-row small {
    font-size: 12px;
    color: #6B6B6B;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.sync-ok {
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    background: #E7F5EC;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap
}

.sync-row + .sync-row {
    opacity: .7
}

.ats.ats-logos {
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap: 8px
}

.ats.ats-logos .atl {
    height: 54px;
    padding: 0 10px
}

.ats.ats-logos .atl img {
    max-height: 24px;
    object-fit: contain
}

@media (max-width: 560px) {
    .ats.ats-logos {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }
}

.ats.ats-logos .atl-more {
    grid-column: span 2;
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    background: transparent;
    border-style: dashed
}

@media (max-width: 560px) {
    .ats.ats-logos .atl-more {
        grid-column: span 2
    }
}

.ats.ats-logos button.atl-more {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer
}

.logos {
    display: grid;
    gap: 22px;
    justify-content: stretch
}

.klogos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px 40px
}

.klogos img {
    display: block;
    width: auto;
    opacity: .85
}

.klogos span {
    color: var(--muted-dark);
    font-weight: 500;
    font-size: 16px;
    white-space: nowrap
}

@media (max-width: 700px) {
    .klogos {
        justify-content: flex-start;
        gap: 22px 28px
    }

    .klogos img {
        max-height: 30px
    }
}

/* Kundenlogos als Laufband */
.klogos-wrap {
    display: flex;
    align-items: center;
    gap: 28px
}

.klogos {
    display: block;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.kl-track {
    display: flex;
    align-items: center;
    gap: 56px;
    width: max-content;
    animation: klscroll 60s linear infinite
}

.klogos:hover .kl-track {
    animation-play-state: paused
}

.kl-track img {
    display: block;
    width: auto;
    opacity: .85;
    flex: none
}

.kl-more {
    color: var(--muted-dark);
    font-weight: 500;
    font-size: 15px;
    white-space: nowrap
}

@keyframes klscroll {
    to {
        transform: translateX(calc(-50% - 28px))
    }
}

@media (prefers-reduced-motion: reduce) {
    .kl-track {
        animation: none;
        flex-wrap: wrap;
        width: auto
    }

    .kl-track img[aria-hidden] {
        display: none
    }
}

@media (max-width: 700px) {
    .klogos-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .klogos {
        width: 100%
    }

    .kl-track {
        gap: 36px
    }

    .kl-track img {
        max-height: 30px
    }
}

.logos {
    grid-template-columns:minmax(0, 1fr)
}

.klogos-wrap {
    min-width: 0;
    max-width: 100%
}

/* Kundenlogos neu: Raster statt Slider */
.kb-head {
    display: grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 24px 48px;
    align-items: end
}

.kb-head h2 {
    margin: 6px 0 0
}

.kb-head .lead {
    margin: 0
}

.kb-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 28px 0 22px
}

.kb-tags span {
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--muted)
}

.kgrid {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden
}

.kt {
    background: var(--bg);
    height: 104px;
    display: grid;
    place-items: center;
    padding: 14px
}

.kt img {
    display: block;
    width: auto;
    max-width: 100%;
    filter: brightness(0);
    opacity: .62;
    transition: opacity .2s
}

.kt:hover img {
    opacity: .9
}

@media (max-width: 980px) {
    .kgrid {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

@media (max-width: 700px) {
    .kb-head {
        grid-template-columns:minmax(0, 1fr)
    }

    .kgrid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }

    .kt {
        height: 80px;
        padding: 10px
    }

    .kt img {
        max-height: 28px
    }
}

.kt-more {
    background: var(--ink);
    color: var(--on-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center
}

.kt-more b {
    font-size: 28px;
    letter-spacing: -.03em;
    line-height: 1
}

.kt-more span {
    font-size: 13px;
    opacity: .75
}

.kt-jj {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.03em;
    color: #000;
    opacity: .62
}

.kt-jj img {
    filter: brightness(0);
    opacity: 1 !important
}

.kb-self {
    display: block;
    margin-top: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--fg)
}

.plat-ic {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px
}

.plat-ic img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block
}

.plat-ic.plat-lg {
    margin-top: 16px;
    gap: 12px
}

.plat-ic.plat-lg img {
    width: 38px;
    height: 38px
}

.pv-ad {
    width: 90%;
    display: grid;
    gap: 8px
}

.pv-adt {
    background: #fff;
    color: #0D0D0D;
    border-radius: 12px;
    padding: 12px 14px;
    display: grid;
    gap: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.pv-adt small {
    font-size: 10px;
    color: #8A8A8A;
    font-weight: 600
}

.pv-adt b {
    font-size: 13px;
    line-height: 1.25;
    letter-spacing: -.01em
}

.pv-adt i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #EDEDED
}

.pgroup {
    margin-top: 28px
}

.pgroup + .pgroup {
    margin-top: 40px
}

.pg-h {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px
}

.pg-h b {
    display: block;
    font-size: 20px;
    letter-spacing: -.02em
}

.pg-h span:not(.pg-n) {
    color: var(--muted);
    font-size: 15px
}

.pg-n {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--on-ink);
    display: grid;
    place-items: center;
    font-weight: 700;
    flex: none
}

.g2.pg2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 16px
}

@media (max-width: 700px) {
    .g2.pg2 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.ib {
    width: 88%;
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    display: grid;
    gap: 4px;
    -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
    mask-image: linear-gradient(180deg, #000 75%, transparent)
}

.ib-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 4px 6px;
    font-size: 12px
}

.ib-h span {
    font-size: 10px;
    font-weight: 600;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px 8px
}

.ib-r {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-radius: 8px;
    opacity: .55
}

.ib-av {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #E3E3E3;
    flex: none
}

.ib-t {
    flex: 1;
    display: grid;
    gap: 4px
}

.ib-t i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E3E3E3
}

.ib-tag {
    font-size: 9px;
    font-weight: 600;
    color: #8A8A8A;
    white-space: nowrap
}

.ib-r.ok {
    opacity: .8
}

.ib-r.ok .ib-av {
    background: #FFE58A
}

.ib-r.ok .ib-tag {
    color: #166534
}

.pv:has(.ib) {
    overflow: hidden;
    align-items: start;
    padding-top: 18px
}

.ib-r.ibok {
    opacity: .8
}

.ib-r.ibok .ib-av {
    background: #FFE58A
}

.ib-r.ibok .ib-tag {
    color: #166534
}

.ib-r {
    padding: 4px 6px
}

.ways3 > .box.offer {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.ways3 .ow-top {
    width: 132px;
    height: 64px;
    border-radius: 16px;
    background: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-bottom: 6px
}

.ways3 .ow-top .appico {
    width: 40px;
    height: 40px
}

.ways3 .ow-top .plat-ic {
    margin: 0;
    gap: 8px
}

.ways3 .ow-top .plat-ic img {
    width: 28px;
    height: 28px
}

.ways3 .ow-top .ico.emo {
    background: none;
    padding: 0;
    width: auto;
    height: auto;
    font-size: 26px
}

.ways3 .box.offer h3 {
    margin: 0
}

.ways3 .box.offer p {
    margin: 0
}

.ways3 .box.offer .link {
    margin-top: auto;
    padding-top: 8px
}

.ways3 > .box.offer {
    padding: 0;
    overflow: hidden
}

.ways3 > .box.offer > :not(.ow-top) {
    margin-left: 24px;
    margin-right: 24px
}

.ways3 > .box.offer > .link {
    margin-bottom: 24px
}

.ways3 .ow-top {
    width: 100%;
    height: 130px;
    border-radius: 0;
    background: var(--cream);
    margin: 0 0 8px
}

.ways3 .ow-top .plat-ic img {
    width: 44px;
    height: 44px
}

.ways3 .ow-top .plat-ic {
    gap: 14px
}

.ways3 .ow-top .ico.emo {
    font-size: 44px
}

.ow-cards {
    position: relative;
    width: 110px;
    height: 96px
}

.ow-cards i {
    position: absolute;
    width: 62px;
    height: 84px;
    border-radius: 12px;
    background: linear-gradient(160deg, #3a3a3a, #0D0D0D);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15)
}

.ow-cards i:nth-child(1) {
    left: 6px;
    top: 8px;
    transform: rotate(-10deg)
}

.ow-cards i:nth-child(2) {
    left: 24px;
    top: 4px;
    transform: rotate(-3deg)
}

.ow-cards i.on {
    left: 42px;
    top: 2px;
    transform: rotate(8deg);
    background: #fff;
    display: grid;
    place-items: center
}

.ow-cards i.on img {
    width: 30px;
    height: 30px;
    border-radius: 8px
}

.ways3 .proof {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    color: #166534;
    background: #E7F5EC;
    border-radius: 999px;
    padding: 4px 10px;
    margin-top: -2px
}

.ft-sys span {
    display: flex;
    align-items: center;
    height: 26px
}

.ft-sys img {
    display: block;
    width: auto
}

.ft-inbox .fx-ok {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex: none;
    color: #0D0D0D
}

.ft-sys {
    flex-wrap: nowrap;
    gap: 5px
}

.ft-sys span {
    padding: 0 8px
}

.fsearch {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px 0
}

.fsearch img {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex: none
}

.fs-bar {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F1F1F2;
    color: #8A8A8A;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px
}

.fphone .fhead {
    padding: 8px 0 6px;
    gap: 12px;
    font-size: 12px
}

.bigstats {
    display: grid;
    gap: 10px;
    margin-top: 4px
}

.bigstats .bigstat {
    margin-top: 0
}

.bigstats .bigstat b {
    min-width: 150px
}

.bigstats .bigstat {
    display: grid;
    grid-template-columns:170px minmax(0, 1fr);
    align-items: center;
    gap: 16px
}

.bigstats .bigstat b {
    min-width: 0;
    font-size: 44px
}

@media (max-width: 560px) {
    .bigstats .bigstat {
        grid-template-columns:minmax(0, 1fr);
        gap: 8px
    }
}

.st2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    margin-top: 6px
}

.st2-i {
    background: var(--bg);
    padding: 18px 20px;
    display: grid;
    gap: 4px
}

.st2-i b {
    font-size: clamp(32px, 3.6vw, 42px);
    letter-spacing: -.04em;
    line-height: 1;
    font-weight: 600
}

.st2-i span {
    font-size: 14px;
    color: var(--fg)
}

.st2-i small {
    font-size: 11px;
    color: var(--muted)
}

.r2-pts {
    gap: 16px
}

.r2-pts li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-left: 0;
    border-left: 0
}

.r2-pts .pi {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: none
}

.r2-pts li div {
    display: grid;
    gap: 2px
}

.r2-pts li div span {
    color: var(--muted);
    font-size: 15px
}

/* Termin-Popup */
.cpop {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 70;
    width: min(360px, calc(100vw - 32px));
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
    display: grid;
    gap: 12px;
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .25s, transform .25s
}

.cpop.in {
    opacity: 1;
    transform: none
}

.cpop-h {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-right: 28px
}

.cpop-h img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 25%;
    flex: none
}

.cpop-h b {
    display: block;
    font-size: 17px;
    letter-spacing: -.02em
}

.cpop-h span {
    font-size: 13px;
    color: var(--muted)
}

.cpop p {
    margin: 0;
    font-size: 14px;
    color: var(--muted)
}

.cpop .btn {
    justify-self: start
}

.cpop-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: var(--surface);
    color: var(--fg);
    cursor: pointer;
    font-size: 13px
}

@media (max-width: 900px) {
    .cpop {
        left: 16px;
        right: 16px;
        bottom: 96px;
        width: auto
    }
}

@media (prefers-reduced-motion: reduce) {
    .cpop {
        transition: none
    }
}

.kb-head {
    grid-template-columns:1fr
}

.ft-voice {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 10px 14px 10px 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    width: min(260px, 100%)
}

.ft-voice .ft-mic {
    width: 40px;
    height: 40px;
    flex: none;
    background: #0D0D0D;
    color: #fff
}

.ft-voice .ft-mic svg {
    width: 18px;
    height: 18px
}

.ft-voice .wave {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    height: 28px;
    justify-content: space-between;
    color: #0D0D0D
}

.ft-voice .wave i {
    width: 3px
}

.ft-dur {
    font-size: 12px;
    font-weight: 600;
    color: #6B6B6B;
    flex: none
}

.tbody .aud {
    padding: 5px 12px;
    gap: 0;
    display: inline-flex;
    width: max-content
}

.pgrid {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 16px;
    margin-top: 28px
}

.pgrid > .box {
    grid-column: span 2
}

.pgrid > .box:nth-child(n+4) {
    grid-column: span 3
}

@media (max-width: 900px) {
    .pgrid {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .pgrid > .box, .pgrid > .box:nth-child(n+4) {
        grid-column: span 1
    }

    .pgrid > .box:nth-child(5) {
        grid-column: span 2
    }
}

@media (max-width: 600px) {
    .pgrid {
        grid-template-columns:minmax(0, 1fr)
    }

    .pgrid > .box, .pgrid > .box:nth-child(n+4), .pgrid > .box:nth-child(5) {
        grid-column: auto
    }
}

.ow-app {
    display: flex;
    align-items: center;
    gap: 14px
}

.ow-logo {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .12);
    flex: none
}

.ow-job {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 8px 10px 8px 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08)
}

.ow-ph {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: center/cover;
    flex: none
}

.ow-tx {
    display: grid;
    line-height: 1.2
}

.ow-tx b {
    font-size: 13px
}

.ow-tx small {
    font-size: 11px;
    color: #6B6B6B
}

.ow-like {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 13px;
    flex: none;
    margin-left: 4px
}

.eyebrow.wayl {
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.eyebrow.wayl b {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0
}

.wk-ph {
    position: relative;
    width: 52px;
    aspect-ratio: 9/16;
    border-radius: 10px;
    background: #0D0D0D;
    padding: 3px;
    display: block
}

.wk-ph.land {
    width: 96px;
    aspect-ratio: 16/9
}

.wk-ph i {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 7px;
    background: linear-gradient(160deg, #5b4a1a, #111)
}

.wk-ph em {
    position: absolute;
    top: -9px;
    right: -9px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 3px 8px rgba(0, 0, 0, .12)
}

.wk-ph em.wk-ok {
    background: #FFC600
}

.ft-v:has(.wk-ph) {
    gap: 28px
}

.wk-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    max-width: 280px
}

.wk-chips span {
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 6px 11px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06)
}

.wk-chips span:nth-child(3) {
    background: #FFC600
}

.wk-fmt {
    display: flex;
    gap: 8px
}

.wk-fmt span {
    display: grid;
    gap: 2px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06)
}

.wk-fmt span.on {
    background: #0D0D0D;
    color: #fff
}

.wk-fmt b {
    font-size: 13px
}

.wk-fmt small {
    font-size: 11px;
    opacity: .65
}

.wsys {
    margin-top: 16px;
    display: grid;
    gap: 0
}

.wsys-ar {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px;
    height: 28px
}

.wsys-ar i {
    justify-self: center;
    width: 2px;
    height: 100%;
    background: repeating-linear-gradient(#0D0D0D 0 4px, transparent 4px 8px);
    opacity: .35
}

.wsys-in {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #0D0D0D;
    color: #fff;
    border-radius: 20px;
    padding: 18px 22px
}

.wsys-logo {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    flex: none
}

.wsys-in > div:nth-child(2) {
    display: grid;
    gap: 2px;
    flex: 1;
    min-width: 0
}

.wsys-in b {
    font-size: 17px;
    letter-spacing: -.01em
}

.wsys-in > div > span {
    font-size: 14px;
    color: rgba(255, 255, 255, .65)
}

.wsys-l {
    flex: none
}

.wsys-l span:last-child {
    background: #FFC600;
    color: #0D0D0D;
    border-color: #FFC600
}

@media (max-width: 900px) {
    .wsys-ar {
        display: none
    }

    .wsys-in {
        flex-wrap: wrap
    }

    .wsys-l {
        width: 100%;
        flex-wrap: wrap
    }
}

@media (max-width: 900px) {
    .wsys-l {
        justify-content: flex-start
    }

    .wsys-in {
        align-items: flex-start
    }
}

.ft-v .ft-sys {
    width: min(260px, 100%);
    justify-content: space-between;
    gap: 4px
}

.ft-v .ft-sys span {
    flex: 1 1 0;
    justify-content: center;
    padding: 0 4px;
    min-width: 0;
    height: 24px
}

.ft-v .ft-sys span:last-child {
    flex: 0 0 auto;
    padding: 0 8px
}

.ft-v .ft-sys img {
    max-width: 100%
}

.ft-v .ft-sys span:nth-child(1) img {
    height: 10px !important
}

.ft-v .ft-sys span:nth-child(2) img {
    height: 7px !important
}

.ft-v .ft-sys span:nth-child(3) img {
    height: 10px !important
}

.ft-v .ft-sys span {
    padding: 0 10px;
    height: 26px
}

.ft-v .ft-sys span:nth-child(1) img {
    height: 11px !important
}

.ft-v .ft-sys span:nth-child(2) img {
    height: 9px !important
}

.ft-v .ft-sys span:last-child {
    flex: 1 1 0
}

.ft-v .ft-sys img {
    max-width: none
}

.ft-v .ft-sys span:nth-child(1) img {
    height: 12px !important
}

.ft-v .ft-sys span:nth-child(2) img {
    height: 11px !important
}

.ft-v .ft-sys span:nth-child(-n+2) {
    flex: 0 0 auto;
    padding: 0 12px
}

.aud-q {
    margin: 4px 0 8px;
    font-size: 13px;
    line-height: 1.45;
    color: #0D0D0D
}

.aud-q b {
    font-weight: 600
}

.aud-q {
    font-weight: 600
}

.card .co i.lg {
    padding: 0;
    overflow: hidden;
    background: #FFCC00
}

.card .co i.lg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.card .vid {
    isolation: isolate
}

.card .vid .jvid {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    pointer-events: none
}

/* App-nahe Swipe-Demo */
.phone .app-top {
    padding: 8px 16px 10px
}

.phone .app-top .wm {
    font-weight: 700;
    font-size: 21px;
    letter-spacing: -.04em
}

.phone .seg {
    font-size: 12px;
    padding: 3px
}

.phone .seg span {
    padding: 7px 14px
}

.phone .seg span:not(.on) {
    color: #8A8A8A;
    font-weight: 500
}

.phone .stack {
    margin: 0 10px
}

.phone .card {
    border: 1.5px solid #E2E2E2;
    border-radius: 26px;
    padding: 9px;
    cursor: default;
    transition: transform .42s cubic-bezier(.3, .7, .3, 1), opacity .42s ease
}

.phone .card .vid {
    border-radius: 18px;
    padding: 12px 10px
}

.jbtns {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 8px;
    z-index: 2
}

.jbtns i {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .12)
}

.jbtns i em {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    font-style: normal;
    font-size: 9px;
    font-weight: 700;
    display: grid;
    place-items: center
}

.phone .card .co {
    flex: 1;
    font-size: 11.5px;
    font-weight: 500
}

.phone .card .co i {
    width: 34px;
    height: 34px;
    border: 0;
    background: #FFC600;
    color: #0D0D0D;
    font-size: 12px;
    font-weight: 700
}

.phone .card .vid.il .co i {
    background: #FFC600
}

.jheart {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    flex: none;
    transition: transform .25s, background .25s, color .25s
}

.vid.il .jheart {
    background: rgba(0, 0, 0, .08);
    color: #0D0D0D
}

.jheart.hit {
    background: #FFC600;
    color: #0D0D0D;
    transform: scale(1.25)
}

.phone .card .title {
    font-size: 16px;
    margin: 10px 4px 7px;
    line-height: 1.2
}

.phone .card .tags span {
    background: #F2F2F2;
    color: #444;
    font-size: 10.5px;
    padding: 5px 10px
}

.jnav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 10px 24px 22px;
    color: #666
}

.jnav span {
    display: grid;
    place-items: center
}

.jnav span.on {
    color: #FFC600
}

.jchat {
    position: absolute;
    right: 10px;
    bottom: 74px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
    z-index: 20
}

.jdone {
    position: absolute;
    inset: 0;
    z-index: 30;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 22px;
    gap: 12px;
    opacity: 0;
    transition: opacity .45s ease
}

.jdone.in {
    opacity: 1
}

.jd-pics {
    position: relative;
    width: 200px;
    height: 120px;
    margin-bottom: 10px
}

.jd-pics > span {
    position: absolute;
    top: 8px;
    width: 96px;
    height: 96px;
    border-radius: 18px;
    background: center/cover;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .12)
}

.jd-me {
    left: 14px;
    transform: rotate(-14deg);
    background: linear-gradient(160deg, #55604f, #2c3328);
    display: grid;
    place-items: center
}

.jd-me b {
    font-size: 28px;
    color: #fff;
    font-weight: 600;
    letter-spacing: -.02em
}

.jd-job {
    right: 14px;
    transform: rotate(14deg)
}

.jdone .jd-heart {
    left: 50%;
    top: auto;
    bottom: -4px;
    width: 46px;
    height: 46px;
    margin-left: -23px;
    border-radius: 50%;
    background: #3a3a3a;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
    z-index: 2
}

.jdone.in .jd-heart {
    animation: jdpop .5s .2s both
}

@keyframes jdpop {
    0% {
        transform: scale(.4)
    }
    70% {
        transform: scale(1.15)
    }
    100% {
        transform: scale(1)
    }
}

.jd-h {
    font-size: 22px;
    letter-spacing: -.03em
}

.jdone p {
    font-size: 13px;
    color: #444;
    line-height: 1.45;
    margin: 0
}

.jd-btn {
    width: 100%;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 12px;
    font-weight: 700;
    font-size: 14px;
    margin-top: 6px
}

.jdone u {
    font-size: 10.5px;
    color: #0D0D0D
}

.phone .card .co span {
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.35
}

.jd-pics {
    width: 220px;
    height: 130px
}

.jd-pics > span.jd-me {
    background: linear-gradient(160deg, #5d6a56, #2c3328);
    width: 104px;
    height: 104px
}

.jd-pics > span.jd-job {
    width: 104px;
    height: 104px
}

.jdone {
    top: 44px
}

.phone .card .vid {
    margin: 0
}

.phone .card {
    padding: 9px 9px 12px
}

.phone .card .tags {
    gap: 6px;
    margin: 0 2px
}

/* System-Balken hell statt schwarz */
.wsys-in {
    background: #fff;
    color: var(--fg, #0D0D0D);
    border: 1px solid var(--line, #E5E5E5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
    padding: 20px 24px;
    gap: 18px
}

.wsys-in > div > span {
    color: var(--muted, #6B6B6B)
}

.wsys-ar i {
    background: repeating-linear-gradient(#FFC600 0 5px, transparent 5px 10px);
    opacity: 1;
    width: 3px
}

.wsys-l {
    display: flex;
    align-items: center;
    gap: 22px;
    flex: none
}

.wsys-l img {
    display: block;
    width: auto
}

.wsys-l span {
    font-size: 13px;
    font-weight: 700;
    background: #FFF3C4;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 6px 12px
}

@media (max-width: 900px) {
    .wsys-l {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px
    }
}

/* Weiß auf Gelb statt Schwarz auf Gelb */
.eyebrow.wayl b {
    color: #fff
}

.ft-cards span.on {
    color: #fff
}

.ft-inbox .fx-ok {
    color: #fff
}

.ft-v .ft-sys span:last-child, .wsys-l span, .wsys-l span:last-child {
    background: #FFC600;
    border-color: #FFC600;
    color: #0D0D0D
}

.ow-like {
    color: #fff
}

.ft-cards span:not(.on) {
    background: #fff;
    border: 1px solid #EDE6D2
}

.ft-voice .ft-mic, .ft-mic {
    background: #FFC600;
    color: #0D0D0D
}

.sec-head .srcs {
    font-size: 12px;
    color: var(--muted, #6B6B6B);
    margin-top: 8px
}

.float .fi {
    color: #0D0D0D
}

.band:not(.tint):not(.cream) .tcard {
    border: 1px solid var(--line, #E5E5E5)
}

.jd-pics > span.jd-me {
    background: center 25%/cover
}

.wsys-ar {
    display: none !important
}

.wsys {
    margin-top: 20px
}

.wsys-in {
    flex-wrap: wrap;
    padding: 18px 20px;
    gap: 14px 16px
}

.wsys-in > div:nth-child(2) {
    flex: 1 1 400px
}

.wsys-in b {
    font-size: 16px
}

.wsys-l {
    flex: 1 1 100%;
    width: 100%;
    display: grid;
    grid-template-columns:repeat(11, minmax(0, 1fr));
    gap: 8px
}

.wsys-l span {
    height: 42px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid var(--line, #E5E5E5);
    border-radius: 12px;
    padding: 0 6px
}

.wsys-l span img {
    max-width: 100%
}

.wsys-l span.more, .wsys-l span:last-child {
    background: #FFC600;
    border-color: #FFC600;
    color: #0D0D0D;
    font-size: 13px;
    font-weight: 700;
    padding: 0
}

@media (max-width: 900px) {
    .wsys-l {
        grid-template-columns:repeat(4, minmax(0, 1fr));
        gap: 6px
    }
}

.wk-chips span.hl {
    background: #FFC600;
    color: #0D0D0D
}

.wk-chips span:nth-child(3):not(.hl) {
    background: #fff;
    color: #0D0D0D
}

.wk-fmt span.on {
    background: #FFC600;
    color: #0D0D0D
}

.wk-ch {
    display: grid;
    gap: 6px;
    justify-items: center;
    width: min(240px, 100%)
}

.wk-acc {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px 8px 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06);
    width: 100%
}

.wk-acc img {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    flex: none;
    object-fit: contain
}

.wk-acc > span {
    display: grid;
    line-height: 1.2
}

.wk-acc b {
    font-size: 13px;
    color: #0D0D0D
}

.wk-acc small {
    font-size: 11px;
    color: #6B6B6B
}

.wk-plus {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    margin: -12px 0;
    z-index: 1
}

/* Kundenraster interaktiv */
.kb-tags button {
    font: inherit;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 12px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    transition: all .2s
}

.kb-tags button:hover {
    border-color: #FFC600;
    color: var(--fg)
}

.kb-tags button[aria-pressed="true"], .kb-tags button.hit {
    background: #FFC600;
    border-color: #FFC600;
    color: #0D0D0D
}

button.kt {
    border: 0;
    font: inherit;
    cursor: default;
    position: relative;
    transition: background .25s, transform .25s, box-shadow .25s, opacity .25s;
    color: inherit
}

button.kt img, button.kt .kt-jj {
    transition: transform .25s, opacity .25s
}

button.kt:hover {
    background: #FFF8E1
}

button.kt:hover img, button.kt:hover .kt-jj {
    opacity: 1;
    transform: scale(1.06)
}

.kgrid.filtering .kt.dim {
    opacity: .28
}

.kt.on, .kt.sel {
    background: #FFF8E1;
    box-shadow: inset 0 0 0 2px #FFC600;
    z-index: 1
}

.kt.on img, .kt.sel img, .kt.on .kt-jj, .kt.sel .kt-jj {
    opacity: 1
}

.kt-cap {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    display: grid;
    gap: 1px;
    text-align: center;
    opacity: 0;
    transform: translateY(4px);
    transition: all .25s;
    pointer-events: none
}

.kt-cap b {
    font-size: 11px;
    font-weight: 600;
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kt-cap i {
    font-style: normal;
    font-size: 10px;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.kt.sel .kt-cap {
    opacity: 1;
    transform: none
}

.kt.sel img, .kt.sel .kt-jj {
    transform: translateY(-12px)
}

.kt-more {
    background: #FFC600;
    color: #0D0D0D
}

.kt-more.on {
    box-shadow: inset 0 0 0 3px #fff, 0 0 0 2px #FFC600;
    transform: scale(1.02)
}

button.kt:focus-visible {
    outline: 2px solid #FFC600;
    outline-offset: -2px
}

.kt-cap b {
    display: none
}

.kt-cap i {
    white-space: normal;
    font-size: 10.5px;
    line-height: 1.3
}

.kt.sel img, .kt.sel .kt-jj {
    transform: translateY(-10px)
}

/* Problem-Bento: ineinandergreifende Formen */
@media (min-width: 901px) {
    .pgrid {
        grid-template-columns:repeat(12, minmax(0, 1fr));
        grid-template-rows:auto auto;
        gap: 16px
    }

    .pgrid > .box {
        display: flex;
        flex-direction: column
    }

    .pgrid > .box:nth-child(1) {
        grid-column: 1/6;
        grid-row: 1
    }

    .pgrid > .box:nth-child(2) {
        grid-column: 6/10;
        grid-row: 1
    }

    .pgrid > .box:nth-child(3) {
        grid-column: 10/13;
        grid-row: 1/3
    }

    .pgrid > .box:nth-child(4) {
        grid-column: 1/5;
        grid-row: 2
    }

    .pgrid > .box:nth-child(5) {
        grid-column: 5/10;
        grid-row: 2
    }

    .pgrid > .box:nth-child(3) .pv {
        flex: 1;
        height: auto;
        min-height: 170px
    }

    .pgrid > .box:nth-child(1) {
        border-radius: 28px 28px 28px 10px
    }

    .pgrid > .box:nth-child(3) {
        border-radius: 28px 28px 28px 28px
    }

    .pgrid > .box:nth-child(5) {
        border-radius: 10px 28px 28px 28px
    }
}

@media (min-width: 901px) {
    .pgrid > .box:nth-child(3) .pv-page {
        transform: scale(1.55) rotate(-4deg)
    }
}

.pv-x {
    background: #FFC600 !important;
    color: #0D0D0D !important
}

.ways3 > .box.offer > :not(.ow-top) {
    margin-left: 32px;
    margin-right: 32px
}

.ways3 > .box.offer > .link {
    margin-bottom: 32px
}

.ways3 .ow-top {
    margin-bottom: 16px
}

/* App-Bento */
.ab-big {
    position: relative
}

.ab-card {
    position: relative;
    z-index: 2;
    width: 220px;
    background: #fff;
    border-radius: 22px;
    padding: 8px 8px 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .12);
    transform: rotate(3deg)
}

.ab-ph {
    height: 200px;
    border-radius: 16px;
    background: center/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 10px
}

.ab-ph::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .55))
}

.ab-co {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 10px;
    line-height: 1.3
}

.ab-co i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    flex: none
}

.ab-h {
    position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 13px
}

.ab-card > b {
    display: block;
    font-size: 14px;
    margin: 9px 4px 6px;
    color: #0D0D0D
}

.ab-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 0 3px
}

.ab-tags span {
    font-size: 9.5px;
    background: #F2F2F2;
    color: #444;
    border-radius: 999px;
    padding: 3px 8px
}

.ab-back {
    position: absolute;
    z-index: 1;
    width: 200px;
    height: 290px;
    border-radius: 22px;
    background: #fff;
    border: 1px solid #EDE6D2;
    transform: translate(-46px, 6px) rotate(-8deg);
    opacity: .9
}

.ab-back.b2 {
    transform: translate(-22px, 2px) rotate(-3deg)
}

@media (min-width: 901px) {
    .feat.appbento {
        grid-template-columns:1.15fr 1fr;
        grid-template-rows:auto auto
    }

    .feat.appbento > .ft:nth-child(1) {
        grid-row: 1/3;
        border-radius: 28px 28px 10px 28px;
        display: flex;
        flex-direction: column
    }

    .feat.appbento > .ft:nth-child(1) .ft-v {
        flex: 1;
        height: auto;
        min-height: 360px
    }

    .feat.appbento > .ft:nth-child(2) {
        border-radius: 28px 28px 28px 10px
    }

    .feat.appbento > .ft:nth-child(3) {
        border-radius: 10px 28px 28px 28px
    }
}

@media (max-width: 900px) {
    .feat.appbento .ab-big {
        height: 330px
    }
}

.msc.vphoto {
    background-size: cover;
    background-position: center
}

.msc.vphoto::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, transparent 22%, transparent 60%, rgba(0, 0, 0, .55));
    pointer-events: none
}

.msc.vphoto > * {
    position: relative;
    z-index: 1
}

.msc.vphoto .rec, .msc.vphoto .shutter, .msc.vphoto .side, .msc.vphoto .feedtxt, .msc.vphoto .feedcta {
    position: absolute;
    z-index: 2
}

.msc.vphoto .isl {
    z-index: 3
}

.msc.vphoto::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0, transparent 20%, transparent 42%, rgba(0, 0, 0, .82) 78%)
}

.msc.vphoto .side i {
    background: rgba(0, 0, 0, .35);
    backdrop-filter: blur(4px)
}

.qa2 {
    gap: 10px;
    padding: 40px 12px 14px
}

.qa2 .qa-t {
    font-size: 15px;
    letter-spacing: -.02em;
    margin: 2px 0 4px;
    color: #0D0D0D
}

.qa-f {
    display: grid;
    gap: 2px;
    border: 1px solid #E5E5E5;
    border-radius: 10px;
    padding: 8px 10px
}

.qa-f small {
    font-size: 9px;
    color: #6B6B6B
}

.qa-f span {
    font-size: 12px;
    color: #0D0D0D
}

.qa2 .qa-btn {
    background: #FFC600;
    color: #0D0D0D;
    margin-top: 6px
}

.wk-fun {
    width: min(270px, 100%);
    display: grid;
    gap: 8px
}

.wf-r {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 4px 8px;
    align-items: center;
    background: #fff;
    border-radius: 12px;
    padding: 8px 10px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .06)
}

.wf-r span:first-child {
    font-size: 11.5px;
    font-weight: 600;
    color: #0D0D0D
}

.wf-r b {
    font-size: 14px;
    color: #6B6B6B;
    grid-row: 1/3;
    grid-column: 2
}

.wf-bar {
    height: 6px;
    background: #F2F2F2;
    border-radius: 3px;
    overflow: hidden
}

.wf-bar i {
    display: block;
    height: 100%;
    background: #CFCFCF;
    border-radius: 3px
}

.wf-r.on .wf-bar i {
    background: #FFC600
}

.wf-r.on b {
    color: #0D0D0D
}

.wk-fun small {
    font-size: 10.5px;
    color: #6B6B6B;
    text-align: center
}


/* Problem-Raster: zwei Gruppen (Sichtbarkeit 3 · Bewerbungen 2) */
.pgrid.pg2 {
    grid-template-columns:repeat(6, minmax(0, 1fr));
    grid-template-rows:none;
    gap: 16px
}

.pgrid.pg2 > * {
    grid-column: span 2 !important;
    grid-row: auto !important
}

.pgrid.pg2 > .box {
    border-radius: var(--r-card) !important
}

.pgrid.pg2 > .box.wide {
    grid-column: span 3 !important
}

.pgrid.pg2 > .pg-lbl {
    grid-column: 1/-1 !important;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 0;
    font-size: 17px;
    color: var(--muted)
}

.pgrid.pg2 > .pg-lbl:not(:first-child) {
    margin-top: 20px
}

.pg-lbl span {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--fg)
}

.pgrid.pg2 .pv {
    flex: none !important;
    height: 130px !important;
    min-height: 0 !important;
    padding: 10px !important;
    overflow: hidden;
    align-items: center !important
}

.pgrid.pg2 .pv > * {
    transform: scale(.78) !important;
    transform-origin: center
}

.pgrid.pg2 .pv-page {
    height: 118px
}

.pgrid.pg2 .pain .q {
    font-size: 19px;
    padding-top: 14px;
    padding-inline: 18px
}

.pgrid.pg2 .pain p {
    font-size: 15px;
    line-height: 1.5;
    padding: 4px 18px 18px
}

.pgrid.pg2 {
    gap: 12px
}

.pgrid.pg2 > .pg-lbl {
    font-size: 15px
}

.pgrid.pg2 > .pg-lbl:not(:first-child) {
    margin-top: 12px
}

@media (max-width: 900px) {
    .pgrid.pg2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .pgrid.pg2 > *, .pgrid.pg2 > .box.wide {
        grid-column: span 1 !important
    }

    .pgrid.pg2 > .box:nth-of-type(3) {
        grid-column: 1/-1 !important
    }
}

@media (max-width: 600px) {
    .pgrid.pg2 {
        grid-template-columns:minmax(0, 1fr)
    }

    .pgrid.pg2 > *, .pgrid.pg2 > .box.wide, .pgrid.pg2 > .box:nth-of-type(3) {
        grid-column: 1/-1 !important
    }
}

/* ATS-Band kompakt: passt auf einen Laptop-Bildschirm */
.atsband {
    padding-block: 56px
}

.atsband .sec-head {
    max-width: none;
    margin-bottom: 28px;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    column-gap: 48px;
    align-items: end
}

.atsband .sec-head .eyebrow {
    grid-column: 1/-1
}

.atsband .sec-head h2 {
    font-size: clamp(28px, 3.4vw, 42px)
}

.atsband .dcard {
    padding: 24px;
    gap: 10px
}

.atsband .dcard p {
    font-size: 15px
}

.atsband .dcard h3 {
    font-size: 19px
}

.atsband .sync-row {
    padding: 9px 12px
}

.atsband .atl {
    height: 46px
}

.atsband .ats {
    gap: 8px
}

.atsband .wd-card {
    padding: 12px;
    gap: 6px
}

.atsband .mini-cv {
    max-width: 120px
}

.atsband .qa-l p, .atsband .aud-q {
    font-size: 12px
}

.atsband {
    padding-block: 48px
}

.atsband .sec-head {
    margin-bottom: 24px
}

.atsband .sec-head .lead {
    font-size: 17px
}

.atsband .ats {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important
}

.atsband .atl {
    height: 44px;
    padding: 0 8px
}

.atsband .atl img {
    max-width: 100%;
    max-height: 20px;
    width: auto
}

.atsband .atl-more {
    grid-column: span 2;
    font-size: 13px
}

.atsband .aud-q {
    font-size: 12px !important;
    line-height: 1.4 !important
}

.atsband .mini-cv {
    max-width: 90px
}

.atsband .atl img {
    height: auto !important;
    max-height: 22px;
    max-width: 88%
}

.atsband .dtag {
    display: none
}

.atsband .wd-h {
    grid-template-columns:48px minmax(0, 1fr) auto !important
}

.atsband .wd-act {
    grid-column: auto !important
}

@media (max-width: 560px) {
    .atsband .wd-h {
        grid-template-columns:48px minmax(0, 1fr) !important
    }

    .atsband .wd-act {
        grid-column: 1/-1 !important
    }
}

.atsband .sec-head {
    gap: 10px
}

@media (max-width: 800px) {
    .atsband .sec-head {
        grid-template-columns:minmax(0, 1fr)
    }

    .atsband .ats {
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important
    }
}

/* Track Record */
.track {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 0;
    border-block: 1px solid var(--line);
    margin: -16px 0 32px
}

.track > div {
    display: grid;
    gap: 4px;
    padding: 18px 20px 18px 0;
    min-width: 0
}

.track > div + div {
    padding-left: 20px;
    border-left: 1px solid var(--line)
}

.track b {
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.02em
}

.track b::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    margin-right: 8px;
    vertical-align: middle;
    transform: translateY(-2px)
}

.track span {
    font-size: 14px;
    line-height: 1.45;
    color: var(--muted)
}

@media (max-width: 900px) {
    .track {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }

    .track > div:nth-child(3) {
        padding-left: 0;
        border-left: 0
    }

    .track > div:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

@media (max-width: 520px) {
    .track {
        grid-template-columns:minmax(0, 1fr)
    }

    .track > div, .track > div + div {
        padding-left: 0;
        border-left: 0
    }

    .track > div + div {
        border-top: 1px solid var(--line)
    }
}

/* Warum Handy statt Kamerateam */
.why3 {
    margin-top: 4px
}

.why3 .box {
    gap: 8px
}

.why-k {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.why3 p {
    color: var(--muted);
    font-size: 16px
}

.vs {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px
}

.vs > div {
    display: grid;
    gap: 4px;
    padding: 18px 22px;
    border-radius: var(--r-card);
    border: 1px solid var(--line);
    min-width: 0
}

.vs small {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.vs b {
    font-size: 18px
}

.vs span {
    font-size: 14px;
    color: var(--muted)
}

.vs > div:first-child b {
    text-decoration: line-through;
    text-decoration-color: var(--muted);
    color: var(--muted)
}

.vs .on {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent)
}

.vs .on small, .vs .on span {
    color: var(--on-accent);
    opacity: .75
}

@media (max-width: 600px) {
    .vs {
        grid-template-columns:minmax(0, 1fr)
    }
}

/* App-Seite: Präsentationsaufbau */
.ap-vs, .ap-steps, .ap-docs {
    display: grid;
    align-items: center;
    gap: 20px
}

.ap-vs {
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 2fr)
}

.ap-steps {
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: start
}

.ap-docs {
    grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr)
}

.ap-vs figure, .ap-steps figure, .ap-docs figure {
    margin: 0;
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    min-width: 0
}

.ap-vs figcaption, .ap-steps figcaption, .ap-docs figcaption {
    font-weight: 600;
    font-size: 18px;
    display: grid;
    gap: 4px;
    max-width: 30ch
}

.ap-vs figcaption span, .ap-steps figcaption span, .ap-docs figcaption span {
    font-weight: 400;
    font-size: 15px;
    color: var(--muted);
    line-height: 1.45
}

.ap-vsl {
    font-family: var(--serif);
    font-style: italic;
    font-size: 44px
}

.ap-two {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
    padding: 24px 20px;
    border-radius: 28px;
    background: var(--accent)
}

.ap-old {
    opacity: .8
}

.ap-wall, .ap-job, .ap-qa {
    text-align: left
}

.ap-wall {
    padding: 34px 12px 12px;
    font-size: 9.5px;
    line-height: 1.45;
    color: #3a3a3a;
    overflow: hidden;
    height: 100%
}

.ap-job {
    padding: 30px 10px 10px;
    display: grid;
    gap: 6px;
    align-content: start;
    font-size: 9.5px;
    height: 100%;
    overflow: hidden
}

.ap-top {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.ap-top b {
    font-size: 12px;
    letter-spacing: -.02em
}

.ap-top span {
    display: flex;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 2px
}

.ap-top i {
    font-style: normal;
    font-size: 8px;
    font-weight: 600;
    padding: 3px 7px;
    border-radius: 999px;
    color: #6B6B6B
}

.ap-top i.on {
    background: #FFC600;
    color: #0D0D0D
}

.ap-h {
    font-size: 12px;
    margin-top: 4px
}

.ap-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 3px
}

.ap-tags span {
    font-size: 8px;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    padding: 2px 6px;
    color: #3a3a3a
}

.ap-sh {
    font-size: 10px;
    font-weight: 700;
    margin-top: 4px;
    color: #0D0D0D
}

.ap-job ul {
    margin: 0;
    padding-left: 12px;
    display: grid;
    gap: 2px;
    color: #3a3a3a
}

.ap-ben {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 4px
}

.ap-ben span {
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    font-size: 7.5px;
    background: #F2F2F2;
    border-radius: 8px;
    padding: 6px 2px
}

.ap-ben i {
    font-style: normal;
    font-size: 12px
}

.ap-cta {
    margin-top: 4px;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 6px;
    text-align: center;
    font-weight: 700
}

.ap-chk {
    display: grid;
    gap: 4px
}

.ap-chk span {
    border: 1px solid #EDEDED;
    border-radius: 8px;
    padding: 5px 6px 5px 20px;
    position: relative;
    color: #3a3a3a
}

.ap-chk span::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid #B5B5B5;
    border-radius: 2px;
    transform: translateY(-50%)
}

.ap-num {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 4px
}

.ap-num span {
    display: grid;
    gap: 1px;
    text-align: center;
    background: #F2F2F2;
    border-radius: 8px;
    padding: 6px 2px;
    font-size: 7.5px;
    color: #6B6B6B
}

.ap-num b {
    font-size: 10px;
    color: #0D0D0D
}

.ap-map {
    height: 70px;
    border-radius: 10px;
    background: repeating-linear-gradient(45deg, #EDEDED 0 6px, #F6F6F6 6px 12px);
    display: grid;
    place-items: center;
    font-size: 18px
}

.ap-qa {
    padding: 30px 14px 14px;
    display: grid;
    gap: 10px;
    align-content: start;
    height: 100%;
    font-size: 10px;
    position: relative
}

.ap-qa .ap-x {
    font-size: 12px;
    color: #6B6B6B
}

.ap-qa small {
    color: #6B6B6B
}

.ap-qa > b {
    font-size: 15px;
    line-height: 1.25
}

.ap-tgl {
    justify-self: start;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 9px
}

.ap-qa .bigw {
    color: #0D0D0D;
    height: 36px;
    justify-self: center;
    margin-top: 8px
}

.ap-rec {
    justify-self: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #FFC600;
    box-shadow: 0 0 0 6px rgba(255, 198, 0, .25)
}

.ap-next {
    margin-top: auto;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 9px;
    text-align: center;
    font-weight: 700;
    font-size: 11px;
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 44px
}

.ap-skip {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 20px;
    text-align: center;
    color: #6B6B6B;
    font-size: 9px
}

.ap-arr, .ap-plus {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 18px;
    align-self: center
}

.ap-arr {
    background: var(--fg);
    color: var(--bg);
    margin-top: -60px
}

.ap-plus {
    background: var(--accent);
    color: var(--on-accent);
    font-size: 24px;
    margin-top: -50px
}

.ap-doc {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1/1.35;
    background: #fff;
    color: #0D0D0D;
    border-radius: 6px;
    box-shadow: var(--shadow);
    padding: 16px;
    display: grid;
    gap: 5px;
    align-content: start;
    text-align: left;
    font-size: 9px;
    overflow: hidden
}

.ap-doc i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #E8E8E8
}

.ap-doc em {
    display: block;
    height: 5px;
    width: 40%;
    border-radius: 2px;
    background: #0D0D0D;
    margin-top: 6px
}

.ap-doc > b, .ap-cv b {
    font-size: 11px
}

.ap-doc small {
    color: #6B6B6B;
    font-size: 8px
}

.ap-cv {
    grid-template-columns:34% 1fr;
    gap: 10px;
    padding: 0
}

.ap-cv aside {
    background: #F4F4F4;
    padding: 14px 10px;
    display: grid;
    gap: 5px;
    align-content: start
}

.ap-cv > div {
    padding: 14px 12px 14px 0;
    display: grid;
    gap: 5px;
    align-content: start
}

.ap-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFE8A3;
    margin-bottom: 4px
}

.ap-cv em {
    background: #FFC600
}

.ap-tab {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 4px 10px;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #EDEDED;
    border-radius: 4px
}

.ap-tab em {
    display: inline;
    height: auto;
    width: auto;
    background: none;
    margin: 0;
    font-style: normal;
    font-weight: 700;
    text-align: right
}

.ap-q {
    display: grid;
    gap: 4px;
    margin-top: 6px
}

.ap-q b {
    font-size: 9px
}

.ap-aud {
    margin-top: 10px;
    justify-self: start;
    background: #FFF4CC;
    border: 1px solid #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 9px
}

@media (max-width: 900px) {
    .ap-vs {
        grid-template-columns:minmax(0, 1fr)
    }

    .ap-vs figure:first-child .mph {
        max-width: 200px
    }

    .ap-steps, .ap-docs {
        grid-template-columns:minmax(0, 1fr)
    }

    .ap-arr, .ap-plus {
        margin: 0 auto;
        transform: rotate(90deg)
    }

    .ap-plus {
        transform: none
    }

    .ap-steps .mph {
        max-width: 220px
    }
}

@media (max-width: 520px) {
    .ap-two {
        grid-template-columns:minmax(0, 1fr);
        padding: 16px
    }

    .ap-two .mph {
        max-width: 220px
    }
}

/* App-Seite: Vision + Algorithmus */
.vis .eyebrow {
    color: var(--muted-dark)
}

.vis-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center
}

.vis-stat b {
    display: block;
    font-size: clamp(64px, 8vw, 112px);
    line-height: .9;
    letter-spacing: -.05em;
    color: var(--accent)
}

.vis-stat p {
    margin-top: 14px;
    font-size: 17px
}

.vis-stat small {
    display: block;
    margin-top: 10px;
    font-size: 12px;
    color: var(--muted-dark)
}

.vis-list {
    position: relative;
    background: #1A1A1A;
    border: 1px solid var(--line-dark);
    border-radius: 18px;
    padding: 16px;
    display: grid;
    gap: 10px;
    overflow: hidden;
    height: 250px
}

.vl-bar {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    background: #2A2A2A;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    color: #F5F5F5
}

.vl-bar em {
    font-style: normal;
    color: #A3A3A3;
    font-size: 12px
}

.vis-list i {
    display: block;
    height: 28px;
    border-radius: 8px;
    background: repeating-linear-gradient(90deg, #2A2A2A 0 60%, transparent 60% 100%)
}

.vl-fade {
    position: absolute;
    inset: auto 0 0 0;
    height: 60%;
    background: linear-gradient(transparent, #1A1A1A)
}

.vis-txt {
    display: grid;
    gap: 14px;
    font-size: 17px;
    color: var(--muted-dark)
}

.vis-txt b {
    color: var(--on-dark);
    font-size: 20px
}

.vis-q {
    margin: 48px 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--line-dark);
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 34px);
    line-height: 1.25;
    max-width: 32ch;
    display: grid;
    gap: 12px
}

.vis-q cite {
    font-family: var(--sans);
    font-style: normal;
    font-size: 14px;
    color: var(--muted-dark)
}

.algo {
    display: grid;
    grid-template-columns:minmax(0, 1.1fr) auto minmax(0, 1fr) auto minmax(0, 1.1fr);
    gap: 18px;
    align-items: center
}

.al-in, .al-out {
    display: grid;
    gap: 12px
}

.al-card, .al-core, .al-out {
    background: var(--surface);
    border-radius: var(--r-card);
    padding: 18px;
    display: grid;
    gap: 10px;
    min-width: 0
}

.algo small {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.al-chips, .al-sw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.al-chips span, .al-sw span {
    font-size: 13px;
    border: 1px solid var(--line);
    background: var(--bg);
    border-radius: 999px;
    padding: 5px 10px
}

.al-sw span.y {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600
}

.al-arr {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    font-weight: 700
}

.al-core {
    background: var(--band-dark);
    color: var(--on-dark);
    justify-items: start
}

.al-logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px
}

.al-core b {
    font-size: 18px
}

.al-bars {
    display: grid;
    gap: 8px;
    width: 100%
}

.al-bars span {
    display: grid;
    grid-template-columns:72px 1fr;
    gap: 10px;
    align-items: center;
    font-size: 13px
}

.al-bars em {
    font-style: normal;
    color: var(--muted-dark)
}

.al-bars i {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--accent)
}

.al-job {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 2px 10px;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px
}

.al-job b {
    font-size: 15px
}

.al-job span {
    grid-column: 1;
    font-size: 12px;
    color: var(--muted)
}

.al-job em {
    white-space: nowrap;
    grid-row: 1/3;
    grid-column: 2;
    align-self: center;
    font-style: normal;
    font-weight: 700;
    font-size: 13px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 4px 10px
}

@media (max-width: 980px) {
    .vis-grid {
        grid-template-columns:minmax(0, 1fr)
    }

    .algo {
        grid-template-columns:minmax(0, 1fr)
    }

    .al-arr {
        justify-self: center;
        transform: rotate(90deg)
    }
}

/* App-Seite: Website-Look */
.ap-hero {
    padding-block: 56px 72px;
    overflow: hidden
}

.ah-grid {
    display: grid;
    grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 48px;
    align-items: center
}

.ah-copy {
    display: grid;
    gap: 22px;
    min-width: 0
}

.ah-copy .crumbs {
    font-size: 13px
}

.ah-copy h1 {
    font-size: clamp(44px, 6vw, 84px)
}

.ah-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    margin-top: 8px;
    padding-top: 20px;
    border-top: 1px solid var(--line)
}

.ah-kpis span {
    display: grid;
    font-size: 13px;
    color: var(--muted)
}

.ah-kpis b {
    font-size: 22px;
    color: var(--fg);
    letter-spacing: -.02em
}

.ah-vis {
    position: relative;
    display: grid;
    place-items: center;
    padding: 24px 0;
    min-height: 520px
}

.ah-vis > .mph {
    max-width: 260px;
    position: relative;
    z-index: 2;
    transform: rotate(3deg)
}

.ah-blob {
    position: absolute;
    width: min(420px, 90%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent);
    opacity: .9;
    z-index: 0
}

.ah-vis .float {
    z-index: 3
}

.ah-f1 {
    left: 0;
    top: 16%
}

.ah-f2 {
    right: 0;
    top: 44%
}

.ah-f3 {
    left: 4%;
    bottom: 12%
}

.arows {
    display: grid;
    gap: 24px
}

.ar {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    background: var(--surface);
    border-radius: 32px;
    padding: 48px 56px;
    overflow: hidden
}

.ar.rev .ar-txt {
    order: 2
}

.ar-txt {
    display: grid;
    gap: 14px;
    min-width: 0;
    max-width: 46ch
}

.ar-n {
    justify-self: start;
    font-size: 13px;
    font-weight: 600;
    background: var(--fg);
    color: var(--bg);
    border-radius: 999px;
    padding: 5px 12px
}

.ar-txt h3 {
    font-size: clamp(26px, 3vw, 38px);
    letter-spacing: -.03em;
    line-height: 1.1
}

.ar-txt p {
    font-size: 18px;
    color: var(--muted)
}

.ar-txt ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.ar-txt li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-weight: 500
}

.ar-txt li::before {
    content: "✓";
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    transform: translateY(3px)
}

.ar-vis {
    display: grid;
    place-items: center;
    margin-block: -24px -110px
}

.ar-vis .mph {
    max-width: 250px
}

@media (max-width: 900px) {
    .ah-grid, .ar {
        grid-template-columns:minmax(0, 1fr)
    }

    .ah-vis {
        min-height: 440px
    }

    .ar {
        padding: 32px 24px 0;
        gap: 24px
    }

    .ar.rev .ar-txt {
        order: 0
    }

    .ar-vis {
        margin: 0 0 -90px
    }

    .ar-vis .mph {
        max-width: 220px
    }
}

@media (max-width: 520px) {
    .ah-vis .float {
        max-width: 180px;
        font-size: 12px
    }

    .ah-f1 {
        left: -4px
    }

    .ah-f2 {
        right: -4px
    }
}

/* App-Seite: realistische Screens */
.ah-copy h1 {
    font-size: clamp(40px, 5.4vw, 76px)
}

.ah-vis {
    min-height: 0;
    padding: 12px 0
}

.ah-vis > .phone {
    transform: none;
    width: 300px
}

.ah-stats {
    margin-top: 48px;
    background: var(--bg)
}

.phone.rp {
    width: min(300px, 100%);
    text-align: left
}

.rp .card {
    position: absolute;
    inset: 0;
    cursor: default
}

.rp-scroll {
    flex: 1;
    overflow: hidden;
    padding: 4px 16px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
    color: #3a3a3a
}

.rp-hero {
    height: 130px;
    flex: none;
    border-radius: 16px;
    background: #ddd center 30%/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    padding: 10px
}

.rp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(transparent 50%, rgba(0, 0, 0, .5))
}

.rp-co {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 8px;
    align-items: center;
    color: #fff;
    font-size: 11px;
    font-weight: 500
}

.rp-co i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    font-size: 10px
}

.rp-t {
    font-size: 17px;
    color: #0D0D0D;
    letter-spacing: -.02em;
    margin-top: 2px
}

.rp-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.rp-tags span {
    background: #F2F2F2;
    color: #444;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10.5px;
    font-weight: 500
}

.rp-sh {
    font-size: 13px;
    color: #0D0D0D;
    margin-top: 6px
}

.rp-ul {
    margin: 0;
    padding-left: 16px;
    display: grid;
    gap: 3px
}

.rp-ben, .rp-num {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 6px
}

.rp-ben span, .rp-num span {
    display: grid;
    gap: 2px;
    justify-items: center;
    text-align: center;
    background: #F6F6F6;
    border-radius: 12px;
    padding: 9px 4px;
    font-size: 10px;
    color: #6B6B6B
}

.rp-ben i {
    font-style: normal;
    font-size: 16px
}

.rp-num b {
    font-size: 13px;
    color: #0D0D0D
}

.rp-chk {
    display: grid;
    gap: 6px
}

.rp-chk span {
    border: 1px solid #EBEBEB;
    border-radius: 12px;
    padding: 9px 10px 9px 32px;
    position: relative;
    color: #222
}

.rp-chk span::before {
    content: "✓";
    position: absolute;
    left: 9px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: #FFC600;
    color: #0D0D0D;
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center
}

.rp-map {
    height: 110px;
    flex: none;
    border-radius: 14px;
    background: linear-gradient(90deg, transparent 48%, #fff 48% 52%, transparent 52%), linear-gradient(0deg, transparent 60%, #fff 60% 63%, transparent 63%), linear-gradient(30deg, transparent 45%, #fff 45% 47%, transparent 47%), #E8EDE4;
    display: grid;
    place-items: center
}

.rp-pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    background: #0D0D0D;
    color: #FFC600;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700
}

.rp-btn {
    display: block;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px
}

.rp-scroll .rp-btn {
    margin-top: 4px
}

.rp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 8px;
    font-size: 15px
}

.rp-head b {
    font-size: 15px
}

.rp-back {
    font-size: 18px;
    color: #0D0D0D;
    width: 20px
}

.rp-step {
    font-size: 11px;
    color: #6B6B6B;
    font-weight: 600
}

.rp-prog {
    height: 4px;
    background: #F0F0F0;
    margin: 0 18px 8px;
    border-radius: 2px
}

.rp-prog i {
    display: block;
    height: 100%;
    background: #FFC600;
    border-radius: 2px
}

.rp-big {
    font-size: 19px;
    color: #0D0D0D;
    letter-spacing: -.02em;
    line-height: 1.2
}

.rp-mut {
    color: #6B6B6B;
    font-size: 11px
}

.rp-lbl {
    font-size: 11px;
    color: #0D0D0D;
    margin-top: 4px
}

.rp-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.rp-opts span {
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 11px
}

.rp-opts span.on {
    background: #FFC600;
    border-color: #FFC600;
    color: #0D0D0D;
    font-weight: 600
}

.rp-in {
    display: block;
    border: 1px solid #E2E2E2;
    border-radius: 10px;
    padding: 9px 10px;
    font-size: 12px;
    color: #0D0D0D
}

.rp-row {
    display: grid;
    grid-template-columns:1.6fr 1fr;
    gap: 6px
}

.rp-up {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px dashed #D5D5D5;
    border-radius: 12px;
    padding: 9px 10px;
    font-size: 11px;
    color: #0D0D0D
}

.rp-up i {
    font-style: normal
}

.rp-up em {
    margin-left: auto;
    font-style: normal;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 700
}

.rp-fix {
    margin: 8px 16px 22px
}

.rp-fix2 {
    display: grid;
    gap: 10px;
    text-align: center
}

.rp-fix2 u {
    font-size: 11px;
    color: #0D0D0D
}

.rp-qa {
    flex: 1;
    padding: 10px 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px
}

.rp-seg {
    align-self: flex-start;
    margin-top: 4px
}

.rp-rec {
    margin-top: 18px;
    display: grid;
    justify-items: center;
    gap: 6px
}

.rp-rec .wave {
    color: #0D0D0D;
    height: 44px
}

.rp-rec .wave i {
    width: 3px
}

.rp-tm {
    font-size: 12px;
    color: #6B6B6B;
    font-variant-numeric: tabular-nums
}

.rp-mic {
    align-self: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 8px rgba(13, 13, 13, .06), 0 0 0 16px rgba(255, 198, 0, .25);
    margin-top: 8px
}

.rp-board {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #F4F5F7
}

.rp-bh {
    padding: 6px 16px 10px;
    background: #fff;
    border-bottom: 1px solid #E5E5E5;
    display: grid
}

.rp-bh b {
    font-size: 15px;
    color: #2B4A8B
}

.rp-bh span {
    font-size: 10px;
    color: #777
}

.rp-wall {
    padding: 12px 16px;
    display: grid;
    gap: 8px;
    font-size: 10.5px;
    line-height: 1.5;
    color: #444;
    overflow: hidden
}

.rp-wall b {
    font-size: 12px;
    color: #1F3A73;
    line-height: 1.3
}

.rp-vs {
    display: grid;
    grid-template-columns:minmax(0, .8fr) auto minmax(0, 2fr);
    gap: 24px;
    align-items: center
}

.rp-vs figure {
    margin: 0;
    display: grid;
    gap: 16px;
    justify-items: center;
    text-align: center;
    min-width: 0
}

.rp-vs figcaption {
    font-weight: 600;
    font-size: 18px;
    display: grid;
    gap: 4px
}

.rp-vs figcaption span {
    font-weight: 400;
    font-size: 15px;
    color: var(--muted)
}

.rp-vs-old .phone {
    width: min(260px, 100%);
    filter: grayscale(.3);
    opacity: .85
}

.rp-two {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 24px;
    justify-items: center;
    width: 100%;
    padding: 32px 24px;
    border-radius: 32px;
    background: var(--accent)
}

.ansatz {
    gap: 20px
}

.ans {
    display: grid;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    padding: 0;
    overflow: hidden
}

.ans > *:not(.ans-v) {
    margin-inline: 28px
}

.ans > .link {
    margin-bottom: 28px
}

.ans-v {
    height: 220px;
    background: var(--cream);
    display: grid;
    place-items: center
}

.ans-k {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 8px
}

.ans h3 {
    font-size: 24px
}

.ans p {
    color: var(--muted)
}

.ans-mini {
    width: min(300px, 85%);
    background: #fff;
    color: #0D0D0D;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 14px;
    display: grid;
    gap: 8px
}

.ans-ttl {
    font-size: 12px;
    font-weight: 700
}

.ans-it {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #EEE;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 13px
}

.ans-dot {
    font-size: 11px;
    font-weight: 700;
    border-radius: 999px;
    padding: 3px 8px;
    background: #F2F2F2;
    color: #0D0D0D
}

.ans-dot.y {
    background: #FFC600
}

@media (max-width: 900px) {
    .rp-vs {
        grid-template-columns:minmax(0, 1fr)
    }

    .ah-stats {
        grid-template-columns:repeat(2, 1fr)
    }

    .ah-stats > div:nth-child(3) {
        border-left: 0
    }

    .ah-stats > div:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }

    .ansatz {
        grid-template-columns:minmax(0, 1fr)
    }
}

@media (max-width: 560px) {
    .rp-two {
        grid-template-columns:minmax(0, 1fr);
        padding: 20px 12px
    }
}

@media (max-width: 560px) {
    h1 em.k, h2 em.k {
        white-space: normal
    }
}

.ah-f1 {
    left: -12px;
    top: 12%
}

.ah-f3 {
    left: -12px;
    bottom: 14%
}

/* App-Seite: Zukunfts-Hero */
.ap-future {
    background: var(--band-dark);
    color: var(--on-dark);
    padding-block: 56px 64px;
    overflow: hidden;
    position: relative
}

.ap-future::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(600px 400px at 75% 40%, rgba(255, 198, 0, .16), transparent 70%);
    pointer-events: none
}

.ap-future .wrap {
    position: relative
}

.ap-future .crumbs, .ap-future .crumbs a {
    color: var(--muted-dark)
}

.fx-grid {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 40px;
    align-items: center;
    margin-top: 20px
}

.fx-copy {
    display: grid;
    gap: 22px;
    min-width: 0
}

.fx-copy h1 {
    font-size: clamp(40px, 4.4vw, 66px)
}

.fx-copy h1 em.k {
    white-space: normal
}

.fx-copy .lead {
    color: var(--muted-dark)
}

.fx-badge {
    justify-self: start;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border: 1px solid var(--line-dark);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600
}

.fx-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 198, 0, .2);
    animation: fxp 2s infinite
}

.fx-ghost {
    color: var(--on-dark);
    border-color: var(--line-dark)
}

.fx-vis {
    position: relative;
    height: 440px;
    min-width: 0
}

.fx-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible
}

.fx-lines line {
    stroke: rgba(255, 255, 255, .18);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 4 4;
    animation: fxd 3s linear infinite
}

.fx-lines line.o {
    stroke: rgba(255, 198, 0, .6);
    stroke-dasharray: none;
    animation: none
}

.fx-chip {
    position: absolute;
    white-space: nowrap;
    font-size: 12.5px;
    border: 1px solid var(--line-dark);
    background: #1A1A1A;
    color: var(--on-dark);
    border-radius: 999px;
    padding: 6px 12px;
    animation: fxf 6s ease-in-out infinite
}

.fx-chip.y {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600
}

.fx-chip.x {
    color: var(--muted-dark)
}

.fx-core {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-content: center;
    justify-items: center;
    text-align: center;
    z-index: 2
}

.fx-core b {
    font-size: 26px;
    letter-spacing: -.04em;
    line-height: 1
}

.fx-core small {
    font-size: 10px;
    font-weight: 600;
    margin-top: 4px
}

.fx-ring {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 198, 0, .45);
    animation: fxr 3s ease-out infinite
}

.fx-ring.r2 {
    animation-delay: 1.5s
}

.fx-out {
    position: absolute;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    gap: 10px;
    align-items: center;
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 10px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
    font-size: 13px;
    z-index: 2
}

.fx-out em {
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 3px 8px
}

.fx-stats {
    margin-top: 40px;
    border-color: var(--line-dark)
}

.fx-stats > div + div {
    border-left-color: var(--line-dark)
}

.fx-stats span {
    color: var(--muted-dark)
}

@keyframes fxp {
    50% {
        box-shadow: 0 0 0 8px rgba(255, 198, 0, 0)
    }
}

@keyframes fxd {
    to {
        stroke-dashoffset: -16
    }
}

@keyframes fxf {
    50% {
        transform: translateY(-6px)
    }
}

@keyframes fxr {
    from {
        transform: scale(.9);
        opacity: 1
    }
    to {
        transform: scale(1.6);
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-chip, .fx-ring, .fx-lines line, .fx-badge i {
        animation: none
    }
}

@media (max-width: 900px) {
    .fx-grid {
        grid-template-columns:minmax(0, 1fr)
    }

    .fx-vis {
        height: 380px
    }

    .fx-stats {
        grid-template-columns:repeat(2, 1fr)
    }

    .fx-stats > div:nth-child(3) {
        border-left: 0
    }

    .fx-stats > div:nth-child(n+3) {
        border-top: 1px solid var(--line-dark)
    }
}

@media (max-width: 560px) {
    .fx-vis {
        height: 340px
    }

    .fx-chip {
        font-size: 10.5px;
        padding: 4px 8px
    }

    .fx-core {
        width: 90px;
        height: 90px
    }

    .fx-core b {
        font-size: 20px
    }

    .fx-out {
        font-size: 11px;
        padding: 7px 9px;
        gap: 6px
    }

    .fx-out em {
        font-size: 10px
    }
}

/* App-Seite: Hero v3 (hell, konkret) */
.ap-fut2 {
    padding-block: 48px 64px
}

.f2-head {
    display: grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 24px 48px;
    align-items: end;
    margin-top: 20px
}

.f2-head h1 {
    font-size: clamp(40px, 4.8vw, 68px);
    margin-top: 16px
}

.f2-head h1 em.k {
    white-space: normal
}

.f2-side {
    display: grid;
    gap: 20px
}

.f2-badge {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600
}

.f2-badge i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px rgba(255, 198, 0, .25)
}

.f2-stage {
    margin-top: 44px;
    display: grid;
    grid-template-columns:minmax(0, 1fr) auto auto auto minmax(0, 1fr);
    gap: 20px;
    align-items: center
}

.f2-col {
    display: grid;
    gap: 14px;
    min-width: 0
}

.f2-card {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 18px;
    display: grid;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(13, 13, 13, .06)
}

.f2-card small {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.f2-cv {
    display: flex;
    gap: 12px;
    align-items: center
}

.f2-cv b {
    display: block;
    font-size: 16px
}

.f2-cv span {
    font-size: 13px;
    color: var(--muted)
}

.f2-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    flex: none
}

.f2-chips, .f2-sw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.f2-chips span, .f2-sw span {
    font-size: 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 5px 10px
}

.f2-sw span.y {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent);
    font-weight: 600
}

.f2-bars {
    display: grid;
    gap: 8px
}

.f2-bars span {
    display: grid;
    grid-template-columns:76px 1fr;
    gap: 10px;
    align-items: center;
    font-size: 13px
}

.f2-bars em {
    font-style: normal;
    color: var(--muted)
}

.f2-bars i {
    display: block;
    height: 8px;
    border-radius: 4px;
    background: var(--accent)
}

.f2-job {
    display: grid;
    grid-template-columns:1fr auto;
    gap: 2px 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 12px
}

.f2-job b {
    font-size: 15px
}

.f2-job span {
    grid-column: 1;
    font-size: 12px;
    color: var(--muted)
}

.f2-job em {
    grid-row: 1/3;
    grid-column: 2;
    align-self: center;
    font-style: normal;
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 999px;
    padding: 4px 10px
}

.f2-arr {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--fg);
    color: var(--bg);
    font-weight: 700
}

.f2-phone .phone {
    width: 280px
}

.f2-cap {
    margin-top: 28px;
    max-width: 70ch;
    color: var(--muted);
    font-size: 17px
}

.f2-cap b {
    color: var(--fg)
}

.f2-stats {
    margin-top: 40px;
    background: var(--bg)
}

@media (max-width: 1100px) {
    .f2-stage {
        grid-template-columns:minmax(0, 1fr)
    }

    .f2-arr {
        justify-self: center;
        transform: rotate(90deg)
    }

    .f2-phone {
        justify-self: center
    }
}

@media (max-width: 900px) {
    .f2-head {
        grid-template-columns:minmax(0, 1fr)
    }

    .f2-stats {
        grid-template-columns:repeat(2, 1fr)
    }

    .f2-stats > div:nth-child(3) {
        border-left: 0
    }

    .f2-stats > div:nth-child(n+3) {
        border-top: 1px solid var(--line)
    }
}

.att {
    display: grid;
    grid-template-columns:auto minmax(0, 1fr);
    gap: 4px 24px;
    align-items: center;
    background: var(--bg);
    border-radius: 20px;
    padding: 20px 24px;
    margin: -16px 0 32px;
    max-width: 780px
}

.att b {
    grid-row: 1/3;
    font-size: clamp(40px, 5vw, 60px);
    letter-spacing: -.04em;
    line-height: 1;
    background: var(--accent);
    color: var(--on-accent);
    border-radius: 16px;
    padding: 10px 16px
}

.att p {
    font-size: 17px
}

.att small {
    font-size: 12px;
    color: var(--muted)
}

@media (max-width: 560px) {
    .att {
        grid-template-columns:minmax(0, 1fr)
    }

    .att b {
        grid-row: auto;
        justify-self: start
    }
}

/* App-Seite: Schritte als Tabs */
.steps2 {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
    align-items: center;
    background: var(--surface);
    border-radius: 32px;
    padding: 48px 56px
}

.st-list {
    display: grid;
    gap: 10px;
    position: relative
}

.st-tab {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 16px;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fg);
    font: inherit;
    padding: 18px 20px;
    border-radius: 20px;
    cursor: pointer;
    transition: background .2s, border-color .2s
}

.st-tab:hover {
    background: color-mix(in srgb, var(--bg) 60%, transparent)
}

.st-tab.on {
    background: var(--bg);
    border-color: var(--line);
    box-shadow: 0 10px 30px rgba(13, 13, 13, .06)
}

.st-n {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bg);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px
}

.st-tab.on .st-n {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--on-accent)
}

.st-b {
    display: grid;
    gap: 8px;
    min-width: 0
}

.st-b > b {
    font-size: 22px;
    letter-spacing: -.02em;
    line-height: 1.2;
    padding-top: 4px
}

.st-tab:not(.on) .st-b > b {
    color: var(--muted)
}

.st-x {
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 16px;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .35s ease, opacity .25s
}

.st-tab.on .st-x {
    max-height: 260px;
    opacity: 1
}

.st-x ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 6px;
    color: var(--fg);
    font-weight: 500;
    font-size: 15px
}

.st-x li {
    display: flex;
    gap: 10px;
    align-items: baseline
}

.st-x li::before {
    content: "✓";
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 10px;
    font-weight: 700;
    display: grid;
    place-items: center;
    transform: translateY(2px)
}

.st-prog {
    height: 3px;
    border-radius: 2px;
    background: var(--line);
    margin: 6px 20px 0;
    overflow: hidden
}

.st-prog i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--fg)
}

.st-prog i.run {
    animation: stp 6s linear forwards
}

@keyframes stp {
    to {
        width: 100%
    }
}

.st-stage {
    display: grid;
    place-items: center
}

.st-ph {
    animation: stin .4s ease
}

.st-ph .phone {
    width: 300px
}

@keyframes stin {
    from {
        opacity: 0;
        transform: translateY(12px)
    }
    to {
        opacity: 1;
        transform: none
    }
}

@media (max-width: 900px) {
    .steps2 {
        grid-template-columns:minmax(0, 1fr);
        padding: 24px 16px;
        gap: 24px
    }

    .st-stage {
        order: -1
    }

    .st-ph .phone {
        width: 260px
    }
}

/* App-Seite: jede Einheit = ein Laptop-Bildschirm */
[data-page="app"] .band {
    padding-block: 56px
}

[data-page="app"] .sec-head {
    margin-bottom: 28px;
    gap: 12px
}

[data-page="app"] h2 {
    font-size: clamp(30px, 3.3vw, 46px)
}

.ap-fut2 {
    padding-block: 36px 48px
}

.f2-head {
    margin-top: 8px
}

.f2-head h1 {
    font-size: clamp(38px, 4.2vw, 60px);
    margin-top: 12px
}

.f2-stage {
    margin-top: 28px;
    gap: 16px
}

.f2-phone .phone {
    width: 228px
}

.f2-card {
    padding: 14px 16px;
    gap: 10px
}

.f2-statband .stats {
    margin-top: 0;
    background: var(--bg)
}

.f2-statband {
    padding-block: 0 40px !important
}

.vis-list {
    height: 200px
}

.vis-q {
    margin-top: 28px;
    padding-top: 20px;
    font-size: clamp(22px, 2.2vw, 28px);
    max-width: 44ch
}

.ans-v {
    height: 230px;
    overflow: hidden
}

.ans .link {
    margin-bottom: 22px
}

.steps2 {
    padding: 36px 44px;
    gap: 40px
}

.st-head {
    margin-bottom: 12px
}

.st-tab {
    padding: 12px 16px
}

.st-b > b {
    font-size: 19px
}

.st-x {
    font-size: 15px
}

.st-ph .phone {
    width: 240px
}

.ap-doc {
    max-width: 210px
}

.ap-docs figcaption {
    font-size: 16px
}

/* Problem-Raster: eine Reihe, keine Gruppen */
.pgrid.pg5 {
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap: 12px
}

.pgrid.pg5 > .box, .pgrid.pg5 > .box.wide {
    grid-column: auto !important
}

.pgrid.pg5 .pv {
    height: 120px !important
}

.pgrid.pg5 .pv > * {
    transform: scale(.7) !important
}

.pgrid.pg5 .pain .q {
    font-size: 17px;
    padding-inline: 16px
}

.pgrid.pg5 .pain p {
    font-size: 14px;
    padding: 4px 16px 16px
}

@media (max-width: 1100px) {
    .pgrid.pg5 {
        grid-template-columns:repeat(6, minmax(0, 1fr)) !important
    }

    .pgrid.pg5 > .box {
        grid-column: span 2 !important
    }

    .pgrid.pg5 > .box:nth-of-type(n+4) {
        grid-column: span 3 !important
    }
}

@media (max-width: 700px) {
    .pgrid.pg5 {
        display: flex !important;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 8px
    }

    .pgrid.pg5 > .box {
        flex: 0 0 78%;
        scroll-snap-align: start
    }
}

/* kleine App-Handys */
.phone.rp .app-top .wm {
    font-size: clamp(15px, 1.4vw, 19px)
}

.phone.rp .seg span {
    padding: 5px 9px
}

.ap-fut2 .crumbs {
    display: none
}

.f2-phone .phone {
    width: 212px
}

/* Drei Wege: einheitlich im JJ-Look */
.ways3 .proof {
    background: var(--bg) !important;
    color: var(--fg) !important;
    border: 1px solid var(--line);
    font-weight: 600
}

.ways3 .proof::first-letter {
    color: var(--fg)
}

.ways3 .ow-top {
    width: 100% !important;
    height: 150px !important;
    border-radius: 0 !important;
    background: var(--cream) !important;
    margin: 0 !important
}

.ways3 .ow-top .plat-ic img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px
}

.ow-ws {
    display: grid;
    gap: 8px;
    justify-items: center
}

.ow-ws span {
    background: #fff;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.ow-ws span.y {
    background: #FFC600
}

.ow-ws span:nth-child(1) {
    transform: rotate(-3deg) translateX(-18px)
}

.ow-ws span:nth-child(3) {
    transform: rotate(2deg) translateX(14px)
}

.ways3 > .box.offer {
    border: 1px solid var(--line) !important
}

.ways3 > .box.offer:hover {
    border-color: var(--fg) !important
}

/* Überall: eine Einheit = ein Laptop-Bildschirm */
.band {
    padding-block: 56px
}

.sec-head {
    margin-bottom: 28px;
    gap: 12px
}

h2 {
    font-size: clamp(30px, 3.3vw, 46px)
}

.st-ph .phone {
    width: 236px
}

.steps2 {
    padding: 32px 44px
}

.tprev {
    height: 120px;
    padding: 12px
}

.tprev > * {
    transform: scale(.8)
}

.tbody {
    padding: 14px 18px 16px
}

.pgrid.pg5 .pv > * {
    transform: scale(.62) !important;
    transform-origin: center top
}

.pgrid.pg5 .pv {
    align-items: start !important;
    padding-top: 12px !important
}

/* Schritte v2: Panel + Pills */
.steps2.s3 {
    grid-template-columns:minmax(0, 1fr) minmax(0, .9fr);
    background: var(--cream);
    padding: 40px 48px;
    gap: 32px;
    overflow: hidden
}

.band.cream .steps2.s3 {
    background: var(--bg)
}

.s3-left {
    display: grid;
    gap: 24px;
    align-content: center;
    min-width: 0
}

.s3-left .st-head {
    margin: 0
}

.s3-panel {
    display: grid;
    gap: 12px;
    animation: stin .35s ease
}

.s3-k {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.s3-panel h3 {
    font-size: clamp(26px, 2.8vw, 36px);
    letter-spacing: -.03em;
    line-height: 1.1
}

.s3-panel p {
    color: var(--muted);
    font-size: 18px;
    max-width: 44ch
}

.s3-panel ul {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.s3-panel li {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-weight: 500
}

.s3-panel li::before {
    content: "✓";
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 11px;
    font-weight: 700;
    display: grid;
    place-items: center;
    transform: translateY(3px)
}

.s3-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px
}

.s3-pill {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    gap: 8px;
    align-items: center;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    border-radius: 999px;
    padding: 10px 18px 10px 10px;
    font: 600 15px var(--sans);
    cursor: pointer
}

.s3-pill b {
    position: relative;
    z-index: 1;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface);
    display: grid;
    place-items: center;
    font-size: 13px
}

.s3-pill.on {
    border-color: var(--fg)
}

.s3-pill.on b {
    background: var(--accent);
    color: var(--on-accent)
}

.s3-pill > *:not(.s3-fill) {
    position: relative;
    z-index: 1
}

.s3-fill {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--accent);
    z-index: 0
}

.s3-fill.run {
    animation: stp 6s linear forwards
}

.s3-stage {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 500px
}

.s3-blob {
    position: absolute;
    width: min(400px, 92%);
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--accent)
}

.s3-stage .st-ph {
    position: relative;
    z-index: 1
}

.s3 .st-prog {
    display: none
}

@media (max-width: 900px) {
    .steps2.s3 {
        grid-template-columns:minmax(0, 1fr);
        padding: 24px 16px
    }

    .s3-stage {
        order: -1;
        min-height: 0;
        padding: 16px 0
    }

    .s3-blob {
        width: 300px
    }
}

.srcs {
    font-size: 12px
}

.track {
    margin: -12px 0 20px
}

.track > div {
    padding: 12px 16px 12px 0
}

.track > div + div {
    padding-left: 16px
}

.track b {
    font-size: 17px
}

.track span {
    font-size: 13px
}

.tprev {
    height: 96px;
    padding: 8px !important
}

.tprev > * {
    transform: scale(.68) !important
}

.tools4 {
    gap: 12px
}

.tbody h3 {
    font-size: 17px
}

.aud-tabs {
    margin-bottom: 16px
}

.ways3 .ow-top {
    height: 120px !important
}

.atsband {
    padding-block: 40px !important
}

.feat .ft-v {
    height: 150px
}

.tools4 .tbody {
    padding: 10px 16px 12px;
    gap: 4px
}

.tools4 .tbody .aud {
    padding: 3px 10px;
    font-size: 11px
}

.tools4 .tprev {
    height: 84px !important
}

footer .wrap.fgrid {
    padding-inline: 24px !important
}

@media (max-width: 480px) {
    footer .wrap.fgrid {
        padding-inline: 16px !important
    }
}

/* ATS-Abschnitt neu */
.dual2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 16px
}

.d2 {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 20px;
    overflow: hidden;
    display: grid;
    grid-template-rows:auto 1fr
}

.band.tint .d2 {
    border-color: transparent
}

.d2-v {
    height: 280px;
    background: var(--cream);
    display: grid;
    place-content: center;
    gap: 14px;
    padding: 20px
}

.d2-b {
    padding: 20px 24px 24px;
    display: grid;
    gap: 8px;
    align-content: start
}

.d2-k {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.d2-b h3 {
    font-size: 22px
}

.d2-b p {
    color: var(--muted);
    font-size: 16px
}

.d2-sync {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 16px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    width: min(420px, 100%)
}

.d2-sync img {
    width: 34px;
    height: 34px;
    border-radius: 9px
}

.d2-sync b {
    display: block;
    font-size: 14px
}

.d2-sync small {
    font-size: 12px;
    color: #6B6B6B
}

.d2-sync > span {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 5px 10px;
    white-space: nowrap
}

.d2-logos {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 8px;
    width: min(420px, 100%)
}

.d2-logos span {
    background: #fff;
    border-radius: 12px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0 10px
}

.d2-logos img {
    max-width: 100%;
    max-height: 20px;
    width: auto;
    height: auto
}

.d2-app {
    width: min(400px, 100%);
    background: #fff;
    color: #0D0D0D;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .08);
    padding: 16px;
    display: grid;
    gap: 12px
}

.d2-ah {
    display: flex;
    align-items: center;
    gap: 10px
}

.d2-ah b {
    display: block;
    font-size: 15px
}

.d2-ah small {
    font-size: 12px;
    color: #6B6B6B
}

.d2-ah .pill {
    margin-left: auto
}

.d2-av {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #FFE58A;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 13px
}

.d2-docs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px
}

.d2-docs span {
    font-size: 12px;
    font-weight: 600;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 5px 10px
}

.d2-q {
    display: grid;
    gap: 6px
}

.d2-q small {
    font-size: 12px;
    font-weight: 600
}

.d2-aud {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #F6F6F6;
    border-radius: 999px;
    padding: 6px 12px 6px 6px
}

.d2-aud .wave {
    flex: 1;
    color: #0D0D0D;
    overflow: hidden
}

.d2-aud em {
    font-style: normal;
    font-size: 11px;
    color: #6B6B6B
}

.d2-pl {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 10px;
    padding-left: 2px
}

.d2-act {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.d2-act span {
    text-align: center;
    border-radius: 999px;
    padding: 9px;
    font-size: 13px;
    font-weight: 600
}

.d2-act .o {
    border: 1.5px solid #E2E2E2
}

.d2-act .i {
    background: #0D0D0D;
    color: #fff
}

@media (max-width: 900px) {
    .dual2 {
        grid-template-columns:minmax(0, 1fr)
    }

    .d2-v {
        height: auto
    }
}

/* Realistische Bewerbungsdokumente */
.dc {
    width: 100%;
    max-width: 270px;
    aspect-ratio: 1/1.414;
    background: #fff;
    color: #1a1a1a;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 18px 40px rgba(13, 13, 13, .14);
    overflow: hidden;
    text-align: left;
    font-size: 6.6px;
    line-height: 1.4
}

.dc h6 {
    margin: 7px 0 2px;
    font-size: 6px;
    letter-spacing: .1em;
    text-transform: uppercase;
    font-weight: 700;
    color: #0D0D0D
}

.dc p {
    margin: 0
}

.dc-cv {
    display: grid;
    grid-template-columns:34% 1fr
}

.dc-cv aside {
    background: #F3F3F3;
    padding: 14px 9px;
    display: flex;
    flex-direction: column
}

.dc-cv aside h6 {
    border-bottom: 1.5px solid #FFC600;
    padding-bottom: 2px
}

.dc-cv aside p {
    color: #444
}

.dc-ph {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ccc center 20%/cover;
    align-self: center;
    margin-bottom: 4px
}

.dc-main {
    padding: 16px 12px
}

.dc-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid #FFC600;
    padding-bottom: 6px;
    margin-bottom: 2px
}

.dc-top b {
    display: block;
    font-size: 15px;
    letter-spacing: -.02em;
    line-height: 1.1
}

.dc-top small {
    font-size: 5.8px;
    color: #6B6B6B
}

.dc-top img {
    width: 18px;
    height: 18px;
    border-radius: 5px
}

.dc-e {
    display: grid;
    grid-template-columns:44px 1fr;
    gap: 4px;
    margin-bottom: 4px
}

.dc-e > span {
    color: #6B6B6B;
    font-size: 5.8px;
    padding-top: 1px
}

.dc-e b {
    display: block;
    font-size: 7px
}

.dc-zg {
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-family: Georgia, "Times New Roman", serif
}

.dc-zh {
    text-align: center;
    display: grid;
    gap: 1px;
    border-bottom: 1px solid #999;
    padding-bottom: 6px
}

.dc-zh b {
    font-size: 8.5px
}

.dc-zh small {
    font-size: 5.6px;
    color: #555
}

.dc-zt {
    text-align: center;
    font-size: 10px;
    letter-spacing: .15em;
    margin-top: 4px
}

.dc-zn {
    text-align: center;
    font-size: 6.2px
}

.dc-zg-t {
    display: grid;
    grid-template-columns:1fr auto 1fr auto;
    gap: 4px 8px;
    border: 1px solid #bbb;
    padding: 7px 8px;
    margin-top: 2px
}

.dc-zg-t span {
    border-bottom: 1px dotted #bbb
}

.dc-zg-t em {
    font-style: normal;
    font-weight: 700;
    border-bottom: 1px dotted #bbb;
    text-align: right
}

.dc-zb {
    font-size: 6px;
    color: #333
}

.dc-sig {
    margin-top: auto;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px;
    font-size: 5.6px;
    color: #666
}

.dc-sig span {
    border-top: 1px solid #777;
    padding-top: 2px;
    text-align: center
}

.dc-qa {
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.dc-qt {
    font-size: 11px;
    letter-spacing: -.01em
}

.dc-qa > small {
    font-size: 5.8px;
    color: #6B6B6B;
    border-bottom: 2px solid #FFC600;
    padding-bottom: 6px
}

.dc-qq {
    display: grid;
    gap: 2px
}

.dc-qq b {
    font-size: 7px;
    text-decoration: underline;
    text-decoration-color: #FFC600;
    text-underline-offset: 2px
}

.dc-qq p {
    color: #333
}

.dc-aud {
    align-self: flex-start;
    margin-top: 4px;
    background: #FFF4CC;
    border: 1px solid #FFC600;
    border-radius: 999px;
    padding: 3px 8px;
    font-weight: 700;
    font-size: 6.4px;
    color: #0D0D0D
}

/* Problem-Raster: 3 + 2, füllt den Laptop-Bildschirm */
.pgrid.pg5 {
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important;
    gap: 14px
}

.pgrid.pg5 > .box {
    grid-column: span 2 !important
}

.pgrid.pg5 > .box:nth-of-type(n+4) {
    grid-column: span 3 !important
}

.pgrid.pg5 .pv {
    height: 128px !important;
    padding-top: 12px !important
}

.pgrid.pg5 .pv > * {
    transform: scale(.76) !important
}

.pgrid.pg5 .pain .q {
    font-size: 20px;
    padding-inline: 20px;
    padding-top: 14px
}

.pgrid.pg5 .pain p {
    font-size: 15px;
    padding: 4px 20px 18px
}

@media (max-width: 700px) {
    .pgrid.pg5 {
        display: flex !important
    }

    .pgrid.pg5 > .box, .pgrid.pg5 > .box:nth-of-type(n+4) {
        flex: 0 0 82%
    }
}

/* Startseite App: Zusammenfassung der App-Seite */
.feat4 {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 16px
}

.feat4 .ft {
    min-width: 0
}

.feat4 .ft-v {
    height: 220px !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: hidden
}

.feat4 .ab-big {
    transform: scale(.62);
    transform-origin: center
}

.f4-algo {
    flex-direction: column;
    gap: 10px
}

.f4-prof {
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 6px;
    width: 90%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
}

.f4-prof small {
    font-size: 11px;
    font-weight: 700
}

.f4-prof span {
    display: grid;
    grid-template-columns:60px 1fr;
    gap: 8px;
    align-items: center;
    font-size: 11px
}

.f4-prof em {
    font-style: normal;
    color: #6B6B6B
}

.f4-prof i {
    height: 7px;
    border-radius: 4px;
    background: #FFC600
}

.f4-match {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 12px;
    padding: 8px 10px;
    width: 90%;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
}

.f4-match em {
    font-style: normal;
    font-weight: 700;
    font-size: 11px;
    background: #FFC600;
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap
}

.f4-form {
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 12px;
    display: grid;
    gap: 10px;
    width: 90%;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06)
}

.f4-form small {
    font-size: 11px;
    font-weight: 700
}

.f4-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.f4-opts span {
    font-size: 11px;
    border: 1px solid #E2E2E2;
    border-radius: 999px;
    padding: 4px 8px
}

.f4-opts span.on {
    background: #FFC600;
    border-color: #FFC600;
    font-weight: 600
}

.f4-up {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed #D5D5D5;
    border-radius: 10px;
    padding: 7px 9px;
    font-size: 11px
}

.f4-up em {
    margin-left: auto;
    font-style: normal;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700
}

.feat4 h3 {
    font-size: 18px
}

@media (max-width: 1000px) {
    .feat4 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (max-width: 560px) {
    .feat4 {
        grid-template-columns:minmax(0, 1fr)
    }
}

/* Dokumente v2: größer, papierhafter */
.ap-docs {
    gap: 28px
}

.dc {
    max-width: 310px;
    font-size: 7.6px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), 0 2px 4px rgba(0, 0, 0, .06), 0 24px 50px rgba(13, 13, 13, .16)
}

.dc h6 {
    font-size: 6.8px
}

.dc-top b {
    font-size: 17px
}

.dc-e {
    grid-template-columns:50px 1fr
}

.dc-e b {
    font-size: 8px
}

.dc-ph {
    width: 60px;
    height: 60px
}

.dc-zh {
    position: relative
}

.dc-zh b {
    font-size: 9.5px
}

.dc-seal {
    position: absolute;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1.5px solid #8a8a8a;
    color: #6a6a6a;
    font-size: 6px;
    font-weight: 700;
    display: grid;
    place-items: center;
    font-family: var(--sans)
}

.dc-zt {
    font-size: 11.5px
}

.dc-zg-t {
    font-size: 7.4px
}

.dc-qh {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 6.4px;
    color: #6B6B6B;
    font-weight: 600;
    margin-bottom: 2px
}

.dc-qh img {
    width: 14px;
    height: 14px;
    border-radius: 4px
}

.dc-qt {
    font-size: 12.5px
}

.dc-qq b {
    font-size: 8px
}

.ap-docs figcaption span {
    display: inline-flex;
    align-self: center;
    justify-self: center;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--fg);
    font-weight: 600;
    margin-top: 6px
}

/* Ein Abschnitt = genau ein Bildschirm */
[data-page] > section.band:not(.tight), [data-page] > section.hero, [data-page] > header.phead {
    min-height: calc(100vh - 72px);
    min-height: calc(100svh - 72px);
    display: flex;
    flex-direction: column;
    justify-content: center
}

[data-page] > section.band:not(.tight) > .wrap, [data-page] > section.hero > .wrap, [data-page] > header.phead > .wrap {
    width: 100%
}

@media (max-width: 900px) {
    [data-page] > section.band:not(.tight), [data-page] > section.hero, [data-page] > header.phead {
        min-height: 0
    }
}

/* Bildschirm-Einheiten: Feinschliff */
.hero {
    padding-block: 32px 40px
}

.sh2 {
    display: grid;
    grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: 48px;
    max-width: none;
    align-items: end
}

.sh2 > .eyebrow {
    grid-column: 1/-1
}

.sh2 > h2 {
    grid-column: 1
}

.sh2 > .lead, .sh2 > .srcs {
    grid-column: 2
}

.sh2 > .lead {
    grid-row: 2;
    font-size: 17px
}

.sh2 > .srcs {
    grid-row: 3
}

.sh-row {
    display: grid;
    grid-template-columns:minmax(0, 1.2fr) minmax(0, .8fr);
    gap: 40px;
    align-items: end;
    margin-bottom: 28px
}

.sh-row .sec-head {
    margin: 0
}

.sh-row .att {
    margin: 0;
    grid-template-columns:minmax(0, 1fr);
    gap: 6px
}

.sh-row .att b {
    grid-row: auto;
    justify-self: start;
    font-size: 44px
}

.rp-two .phone {
    width: min(250px, 100%)
}

.rp-vs-old .phone {
    width: min(220px, 100%)
}

.rp-two {
    padding: 24px
}

.pgrid.pg5 .pv {
    height: 112px !important
}

.pgrid.pg5 .pain p {
    font-size: 14.5px
}

.ap-fut2 {
    padding-block: 24px 32px
}

@media (max-width: 900px) {
    .sh2, .sh-row {
        grid-template-columns:minmax(0, 1fr)
    }

    .sh2 > * {
        grid-column: 1 !important;
        grid-row: auto !important
    }
}

.hero-stats {
    padding-block: 0 48px !important
}

.hero-stats .stats {
    margin-top: 0
}

.sh2 > h2 {
    grid-row: 1/4;
    align-self: end
}

.sh2 > .eyebrow + h2 {
    grid-row: 2/5
}

.sh2-btn {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px
}

.vstep .stage {
    height: 390px;
    padding: 10px 20px
}

.vstep .cap p {
    font-size: 14.5px
}

.rp-two .phone {
    width: 300px;
    zoom: .72
}

.rp-vs-old .phone {
    width: 280px;
    zoom: .68
}

.sh-row .lead {
    font-size: 17px
}

.vstep .stage {
    height: 360px
}

.vstep .stage .mph {
    max-width: 168px
}

.f2-phone .phone {
    width: 300px;
    zoom: .72
}

.ah-vis > .phone, .st-ph .phone {
    zoom: 1
}

.rp-vs figcaption {
    font-size: 16px
}

.rp-vs figcaption span {
    font-size: 13px
}

[data-page] > section.band:not(.tight) {
    padding-block: 40px
}

.vstep .stage {
    height: 330px
}

.vstep .stage .mph {
    max-width: 156px
}

.vstep .cap p {
    font-size: 14px
}

.vstep {
    gap: 12px
}

.rp-two .phone {
    zoom: .64
}

.rp-vs-old .phone {
    zoom: .6
}

.sh-row .att {
    padding: 14px 18px
}

.sh-row .att b {
    font-size: 36px
}

.sh-row .att p {
    font-size: 15px
}

[data-page] > section.band.cta-band {
    min-height: 0;
    display: block !important;
    padding-block: 96px !important
}

.cta-band h2 {
    font-size: clamp(32px, 4.4vw, 54px)
}

@media (max-width: 720px) {
    [data-page] > section.band.cta-band {
        padding-block: 64px !important
    }
}

/* Schritte nebeneinander zum Durchblättern */
.arows-x {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    scroll-behavior: smooth
}

.arows-x::-webkit-scrollbar {
    display: none
}

.arows-x .ar {
    scroll-snap-align: start
}

.arow-nav {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: flex-end;
    margin: -64px 0 24px
}

.arow-nav button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    font-size: 18px;
    cursor: pointer
}

.arow-nav button:hover {
    border-color: var(--fg)
}

.an-dots {
    display: flex;
    gap: 6px
}

.an-dots i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--line);
    transition: width .2s
}

.an-dots i.on {
    width: 24px;
    border-radius: 4px;
    background: var(--fg)
}

@media (max-width: 900px) {
    .arow-nav {
        margin: 0 0 16px;
        justify-content: flex-start
    }
}

/* Kein Text-rechts-Stil: Überschrift und Text immer untereinander */
.sh2, .atsband .sec-head {
    grid-template-columns:minmax(0, 1fr) !important;
    max-width: 780px !important
}

.sh2 > *, .atsband .sec-head > * {
    grid-column: auto !important;
    grid-row: auto !important
}

.sh2 > .lead {
    font-size: clamp(18px, 1.6vw, 21px)
}

.sh-row {
    display: block !important
}

.sh-row .sec-head {
    margin-bottom: 20px !important
}

.sh-row .att {
    display: grid;
    grid-template-columns:auto minmax(0, 1fr) !important;
    gap: 4px 20px;
    max-width: 780px;
    margin: 0 0 24px !important
}

.sh-row .att b {
    grid-row: 1/3 !important
}

.f2-head {
    grid-template-columns:minmax(0, 1fr) !important;
    max-width: 820px
}

.f2-phone .phone {
    zoom: .62 !important
}

.f2-head .ctas {
    margin-top: -4px
}

.f2-side {
    gap: 16px
}

.f2-head {
    max-width: none !important;
    gap: 14px !important
}

.f2-head h1 {
    font-size: clamp(34px, 3.7vw, 54px) !important;
    margin-top: 10px !important
}

.f2-head .lead {
    font-size: 18px;
    max-width: 70ch
}

.f2-stage {
    margin-top: 22px !important
}

.kt-more {
    background: #0D0D0D !important;
    color: #fff !important
}

.kt-more b {
    color: #fff
}

.pv-chat {
    width: 88%;
    display: grid;
    gap: 8px;
    font-size: 13px;
    line-height: 1.35
}

.pv-chat span {
    max-width: 82%;
    padding: 9px 12px;
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.pv-chat .in {
    justify-self: start;
    background: #fff;
    color: #0D0D0D;
    border-bottom-left-radius: 4px
}

.pv-chat .out {
    justify-self: end;
    background: #0D0D0D;
    color: #fff;
    border-bottom-right-radius: 4px
}

.kt-more span {
    color: #fff;
    opacity: .75
}

/* Drei Wege v3: neutral, alles auf einer Höhe */
.ways3 {
    grid-template-rows:auto auto auto 1fr auto
}

.ways3 > .box.offer {
    display: grid !important;
    grid-row: span 5;
    grid-template-rows:subgrid;
    gap: 10px;
    align-content: start
}

.ways3 > .box.offer > *:not(.ow-top) {
    margin-inline: 28px
}

.ways3 > .box.offer > .link {
    margin-bottom: 26px;
    align-self: end
}

.ways3 .ow-top {
    height: 140px !important;
    background: #F7F7F7 !important;
    border-bottom: 1px solid var(--line);
    margin: 0 0 8px !important
}

.ways3 .box.offer h3 {
    align-self: end
}

.ways3 .proof {
    justify-self: start
}

.ow-ws {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    max-width: 94%
}

.ow-ws span {
    font-size: 12px !important;
    padding: 6px 10px !important;
    white-space: nowrap
}

.ow-ws span {
    transform: none !important;
    box-shadow: none !important;
    border: 1px solid var(--line);
    background: #fff !important;
    color: #0D0D0D
}

.ow-ws span.y {
    background: #FFC600 !important;
    border-color: #FFC600
}

.ways3 .ow-top .plat-ic img {
    width: 40px !important;
    height: 40px !important
}

.ways3 .ow-app .ow-job {
    box-shadow: none;
    border: 1px solid var(--line)
}

@media (max-width: 900px) {
    .ways3 > .box.offer {
        grid-row: auto;
        grid-template-rows:none
    }
}

/* ===== Design-System-Ebene: einheitliche Abstände, Radien, Typo (8pt-Raster) ===== */
:root {
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 24px;
    --s6: 32px;
    --s7: 48px;
    --s8: 64px;
    --r-s: 12px;
    --r-m: 20px;
    --r-l: 28px;
    --measure: 60ch
}

/* Abschnitte: gleicher Rhythmus überall */
[data-page] > section.band:not(.tight):not(.cta-band) {
    padding-block: var(--s7)
}

.sec-head {
    gap: var(--s4) !important;
    margin-bottom: var(--s6) !important
}

.sec-head .eyebrow + h2, .sec-head .eyebrow + h1 {
    margin-top: calc(-1 * var(--s1))
}

.lead {
    max-width: var(--measure)
}

.sec-head .lead {
    font-size: clamp(18px, 1.5vw, 20px);
    line-height: 1.6
}

h2 {
    line-height: 1.08
}

/* Karten: ein Radius, ein Innenabstand */
.box, .ft, .d2, .tcard, .ans, .f2-card, .dcard, .ways3 > .box.offer, .pgrid .box, .why3 .box {
    border-radius: var(--r-m) !important
}

.box:not(.pain):not(.offer):not(.ans) {
    padding: var(--s6)
}

.ft > h3, .ft > p {
    padding-inline: var(--s5)
}

.ft > h3 {
    padding-top: var(--s5)
}

.ft > p {
    padding-bottom: var(--s5)
}

.d2-b {
    padding: var(--s5)
}

.tbody {
    padding: var(--s4) var(--s5) var(--s5) !important
}

/* Große Flächen: ein Radius */
.ar, .steps2, .rp-two, .kgrid, .vis-list, .s3 {
    border-radius: var(--r-l) !important
}

/* Raster-Abstände */
.g2, .g3, .g4, .feat, .feat4, .dual2, .ways3, .tools4, .pgrid.pg5, .why3, .ansatz {
    gap: var(--s4) !important
}

.arows {
    gap: var(--s5) !important
}

/* Karten-Typo */
.box h3, .ft h3, .d2-b h3, .ans h3, .tbody h3, .ways3 .box.offer h3 {
    font-size: 20px;
    line-height: 1.25
}

.box p, .ft p, .d2-b p, .ans p, .ways3 .box.offer p {
    font-size: 16px;
    line-height: 1.55
}

.pgrid.pg5 .pain .q {
    font-size: 20px
}

.pgrid.pg5 .pain p {
    font-size: 15px
}

/* Buttons & Touch-Ziele (mind. 44px) */
.btn {
    min-height: 48px
}

.nav .btn {
    min-height: 44px
}

.arow-nav button, .burger {
    min-width: 44px;
    min-height: 44px
}

.ow-ws {
    flex-wrap: wrap !important;
    max-width: 88% !important;
    row-gap: 8px
}

.vstep .stage {
    height: 380px
}

.vstep .stage .mph {
    max-width: 172px
}

/* Kleine Labels einheitlich */
.eyebrow, .ans-k, .d2-k, .why-k, .s3-k, .f2-card small, .algo small {
    font-size: 12px !important;
    letter-spacing: .08em
}

.dc-scan {
    display: block;
    width: 100%;
    max-width: 310px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 24px 50px rgba(13, 13, 13, .16)
}

/* Drei Wege v4: wie die übrigen Karten (Creme-Fläche + weiße Mini-UI) */
.ways3 .ow-top {
    background: var(--cream) !important;
    border-bottom: 0 !important;
    height: 170px !important
}

.ow-mini {
    background: #fff;
    color: #0D0D0D;
    border-radius: 14px;
    padding: 12px 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06);
    display: grid;
    gap: 8px;
    justify-items: start;
    min-width: 200px
}

.ow-mh {
    font-size: 11px;
    font-weight: 700
}

.ow-ms {
    font-size: 11px;
    color: #6B6B6B
}

.ow-mini .plat-ic img {
    width: 32px !important;
    height: 32px !important
}

.ow-li {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12px;
    font-weight: 500
}

.ow-li i {
    font-style: normal;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700
}

.ways3 .ow-app .ow-job {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06) !important;
    border: 0 !important
}

.f4-prog {
    height: 5px;
    border-radius: 3px;
    background: #F0F0F0
}

.f4-prog i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: #FFC600
}

.f4-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #6B6B6B;
    border-bottom: 1px solid #F0F0F0;
    padding-bottom: 6px
}

.f4-row:last-child {
    border-bottom: 0;
    padding-bottom: 0
}

.f4-row b {
    color: #0D0D0D;
    font-size: 12px
}

.f4-row b.f4-ok {
    font-size: 11px
}

.feat4 .ft-v {
    background: var(--cream) !important
}

/* Stellenanzeigen: kein gelber Block, kompakt auf einen Blick */
.rp-two {
    padding: 20px !important
}

.rp-two .phone {
    zoom: .56
}

.rp-vs-old .phone {
    zoom: .54
}

.sh-row .att {
    margin-bottom: 16px !important
}

.sh-row .sec-head .lead {
    font-size: 17px
}

.feedband .vstep .stage {
    height: 330px !important
}

.feedband .vstep .stage .mph {
    max-width: 152px !important
}

.feedband .vstep .stage {
    background: var(--bg)
}

.feedband .sec-head .lead {
    font-size: 18px
}

.d2-dash {
    width: min(460px, 100%);
    background: #fff;
    color: #0D0D0D;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
    overflow: hidden;
    font-size: 11px
}

.d2-bar {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #F2F2F2;
    padding: 7px 10px
}

.d2-bar i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #D4D4D4
}

.d2-bar span {
    margin-left: 8px;
    background: #fff;
    border-radius: 6px;
    padding: 2px 10px;
    color: #6B6B6B;
    font-size: 10px;
    flex: 1;
    text-align: center
}

.d2-body {
    display: grid;
    grid-template-columns:40% 1fr;
    min-height: 180px
}

.d2-body aside {
    background: #FAFAFA;
    border-right: 1px solid #EEE;
    padding: 10px;
    display: grid;
    gap: 6px;
    align-content: start
}

.d2-sh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px
}

.d2-sh b {
    font-size: 11px
}

.d2-li {
    display: flex;
    gap: 7px;
    align-items: center;
    padding: 6px;
    border-radius: 8px
}

.d2-li.on {
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08)
}

.d2-li b {
    display: block;
    font-size: 11px
}

.d2-li small {
    font-size: 9.5px;
    color: #6B6B6B
}

.d2-body .d2-av {
    width: 26px;
    height: 26px;
    font-size: 9px
}

.d2-av.a2 {
    background: #E8E8E8
}

.d2-av.a3 {
    background: #DCE8F5
}

.d2-body section {
    padding: 10px;
    display: grid;
    gap: 8px;
    align-content: start
}

.d2-body .d2-ah b {
    font-size: 12px
}

.d2-body .d2-ah small {
    font-size: 10px
}

.d2-body .d2-docs span {
    font-size: 10px;
    padding: 3px 7px
}

.d2-body .d2-aud {
    padding: 4px 8px 4px 4px
}

.d2-body .d2-pl {
    width: 20px;
    height: 20px;
    font-size: 8px
}

.d2-body .d2-act span {
    padding: 6px;
    font-size: 11px
}

/* Problem-Raster: 4 Karten in einer Reihe */
.pgrid.pg5 {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important
}

.pgrid.pg5 > .box, .pgrid.pg5 > .box:nth-of-type(n+4) {
    grid-column: auto !important
}

.pgrid.pg5 .pv {
    height: 150px !important
}

.pgrid.pg5 .pv > * {
    transform: scale(.8) !important
}

@media (max-width: 1100px) {
    .pgrid.pg5 {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }
}

.phone .card .co i.lg {
    background: #FFCC00
}

/* Titel einzeilig, wo Platz ist */
.sec-head, .sh2, .atsband .sec-head {
    max-width: none !important
}

.sec-head .lead {
    max-width: 60ch
}

/* Hover ohne schwarzen Rahmen */
.offer:hover, .ways3 > .box.offer:hover, .ans:hover, .tcard:hover {
    border-color: var(--line) !important;
    box-shadow: 0 14px 34px rgba(13, 13, 13, .10)
}

.ow-ex {
    display: grid;
    grid-template-columns:repeat(3, auto);
    gap: 14px
}

.ow-ex span {
    display: grid;
    gap: 1px;
    font-size: 10px;
    color: #6B6B6B
}

.ow-ex b {
    font-size: 17px;
    color: #0D0D0D;
    letter-spacing: -.02em;
    white-space: nowrap
}

.f4-job {
    width: 78%;
    background: #fff;
    color: #0D0D0D;
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .08);
    display: grid;
    gap: 6px
}

.f4-ph {
    height: 96px;
    border-radius: 12px;
    background: #ddd center 30%/cover;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 6px
}

.f4-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: linear-gradient(transparent 45%, rgba(0, 0, 0, .5))
}

.f4-co {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 5px;
    align-items: center;
    color: #fff;
    font-size: 9px
}

.f4-co i {
    font-style: normal;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 7px;
    font-weight: 700
}

.f4-h {
    position: relative;
    z-index: 1;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 10px
}

.f4-job > b {
    font-size: 12px;
    padding-inline: 2px
}

.f4-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap
}

.f4-tags span {
    font-size: 9px;
    background: #F2F2F2;
    border-radius: 999px;
    padding: 3px 7px
}

.pv-find {
    width: 86%;
    display: grid;
    gap: 8px
}

.pf-win {
    background: #fff;
    color: #0D0D0D;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .06)
}

.pf-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    background: #F2F2F2;
    padding: 5px 8px
}

.pf-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #D4D4D4
}

.pf-bar span {
    margin-left: 6px;
    font-size: 10px;
    color: #6B6B6B
}

.pf-body {
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    font-size: 12px
}

.pf-stat {
    font-size: 10px;
    color: #6B6B6B;
    background: #F6F6F6;
    border-radius: 999px;
    padding: 3px 8px;
    white-space: nowrap
}

.pf-soc {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center
}

.pf-ic {
    display: flex;
    gap: 6px
}

.pf-ic img {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    filter: grayscale(1);
    opacity: .45
}

.pf-no {
    font-size: 11px;
    font-weight: 600;
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 3px 9px
}

/* Feed-Abschnitt im Kartenstil der Seite */
.feedband .vsteps {
    gap: 16px
}

.feedband .vstep {
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    overflow: hidden;
    gap: 0
}

.feedband .vstep .stage {
    height: 300px !important;
    border-radius: 0;
    background: var(--cream);
    padding: 0;
    overflow: hidden;
    align-items: start;
    padding-top: 20px !important
}

.feedband .vstep .stage .mph {
    max-width: 150px !important
}

.feedband .vstep .cap {
    padding: 20px 24px 24px;
    gap: 6px
}

.feedband .vstep .cap h3 {
    font-size: 20px
}

.feedband .vstep .cap p {
    font-size: 15px
}

.feedband .float.qa-ok {
    bottom: 14px
}

.d3 {
    width: min(420px, 100%);
    background: #fff;
    color: #0D0D0D;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: 14px;
    display: grid;
    gap: 8px
}

.d3-top {
    display: grid;
    grid-template-columns:1fr auto;
    align-items: center;
    gap: 0 8px;
    padding: 2px 4px 8px;
    border-bottom: 1px solid #F0F0F0
}

.d3-top b {
    font-size: 15px
}

.d3-top span {
    grid-row: 2;
    font-size: 12px;
    color: #6B6B6B
}

.d3-top em {
    grid-row: 1/3;
    grid-column: 2;
    font-style: normal;
    font-size: 12px;
    font-weight: 700;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 10px
}

.d3-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 12px
}

.d3-row.on {
    background: #FAF8F3
}

.d3-row > div {
    flex: 1;
    min-width: 0
}

.d3-row b {
    display: block;
    font-size: 14px
}

.d3-row small {
    font-size: 12px;
    color: #6B6B6B
}

.d3-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #FFE58A;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex: none
}

.d3-av.b {
    background: #ECECEC
}

.d3-av.c {
    background: #E3ECF5
}

.d3-btn {
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600
}

.d3-st {
    font-size: 12px;
    font-weight: 600;
    color: #6B6B6B;
    border: 1px solid #E5E5E5;
    border-radius: 999px;
    padding: 5px 10px
}

.d3-st.n {
    background: #FFF4CC;
    border-color: #FFE58A;
    color: #0D0D0D
}

/* Feed: TikTok-Titel, Text unter Karten, realistische Handys */
.feedband .sec-head.fh {
    text-align: left
}

.feedband .feed-foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    margin-top: 24px
}

.feedband .vstep:nth-child(3) .float.qa-ok {
    top: auto !important;
    bottom: 14px !important
}

.feedband .feed-foot .lead {
    margin: 0;
    max-width: 60ch
}

.feedband .feed-foot .srcs {
    margin: 8px 0 0
}

.feedband .feed-foot .btn {
    flex: none
}

@media (max-width: 760px) {
    .feedband .feed-foot {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }
}

.feedband .mph {
    padding: 5px;
    border-radius: 30px;
    background: linear-gradient(145deg, #2b2b2b, #0D0D0D 40%);
    box-shadow: inset 0 0 0 1.5px #3a3a3a
}

.feedband .mph::before {
    content: "";
    position: absolute;
    right: -2px;
    top: 27%;
    width: 2.5px;
    height: 13%;
    background: #1f1f1f;
    border-radius: 2px
}

.feedband .mph::after {
    content: "";
    position: absolute;
    left: -2px;
    top: 20%;
    width: 2.5px;
    height: 16%;
    background: #1f1f1f;
    border-radius: 2px;
    box-shadow: 0 -22px 0 -0.5px #1f1f1f
}

.feedband .msc {
    inset: 5px;
    border-radius: 25px
}

.feedband .msc .isl {
    top: 7px;
    width: 46px;
    height: 13px
}

.feedband .msc .isl::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 50%;
    width: 5px;
    height: 5px;
    margin-top: -2.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #3b4a6b, #111 60%)
}

.feedband .fsb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 26px;
    padding: 8px 13px 0 16px;
    font-size: 8.5px;
    z-index: 3;
    color: #0D0D0D
}

.feedband .msc.vid .fsb {
    color: #fff
}

.feedband .fsb .sic {
    gap: 3px
}

.feedband .fsb .sig {
    height: 6px;
    gap: 1px
}

.feedband .fsb .sig b {
    width: 2px
}

.feedband .fsb .sig b:nth-child(1) {
    height: 2.5px
}

.feedband .fsb .sig b:nth-child(2) {
    height: 3.5px
}

.feedband .fsb .sig b:nth-child(3) {
    height: 5px
}

.feedband .fsb .sig b:nth-child(4) {
    height: 6px
}

.feedband .fsb .bat {
    width: 13px;
    height: 7px;
    border-width: 1px;
    border-radius: 2px
}

.feedband .fsb .bat::before {
    inset: 1px;
    right: 3px
}

.feedband .fsb .bat::after {
    right: -3px;
    top: 1.5px;
    width: 1.5px;
    height: 2.5px
}

.feedband .msc .rec {
    top: 30px
}

/* QuickApply realistisch */
.feedband .qa3 {
    position: absolute;
    inset: 0;
    padding: 30px 11px 8px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    font-size: 8px;
    color: #0D0D0D;
    text-align: left;
    background: #fff
}

.q3-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5px;
    padding: 2px 0 4px;
    border-bottom: 1px solid #e5e5e5
}

.q3-back {
    font-size: 15px;
    line-height: 1;
    font-weight: 300
}

.q3-x {
    font-size: 8px;
    color: #6b6b6b
}

.q3-job {
    display: flex;
    gap: 7px;
    align-items: center;
    background: #f2f2f2;
    border-radius: 8px;
    padding: 6px 7px
}

.q3-job b {
    display: block;
    font-size: 8.5px;
    line-height: 1.2
}

.q3-job small {
    font-size: 7px;
    color: #6b6b6b
}

.q3-lg {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #E2001A;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
    font-weight: 700;
    text-align: center;
    font-style: normal;
    flex: none
}

.q3-prog {
    display: flex;
    gap: 3px;
    margin-top: 2px
}

.q3-prog i {
    flex: 1;
    height: 2.5px;
    border-radius: 2px;
    background: #e5e5e5
}

.q3-prog i:first-child {
    background: #0D0D0D
}

.q3-step {
    font-size: 6.5px;
    color: #6b6b6b;
    margin-top: -3px
}

.q3-f {
    display: block;
    border: 1px solid #e5e5e5;
    border-radius: 7px;
    padding: 5px 7px
}

.q3-f small {
    display: block;
    font-size: 6.5px;
    color: #6b6b6b;
    margin-bottom: 1px
}

.q3-f span {
    font-size: 8.5px;
    font-weight: 500
}

.q3-f.on {
    border-color: #0D0D0D
}

.q3-f em {
    display: inline-block;
    width: 1px;
    height: 9px;
    background: #0D0D0D;
    margin-left: 1px;
    vertical-align: -1px;
    animation: q3b 1s steps(1) infinite
}

@keyframes q3b {
    50% {
        opacity: 0
    }
}

.q3-chk {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 6.8px;
    color: #6b6b6b
}

.q3-chk i {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    background: #0D0D0D;
    color: #fff;
    font-size: 7px;
    line-height: 10px;
    font-weight: 700;
    text-align: center;
    font-style: normal;
    flex: none
}

.q3-btn {
    margin-top: auto;
    background: #FFC600;
    color: #0D0D0D;
    font-weight: 600;
    font-size: 9px;
    text-align: center;
    border-radius: 999px;
    padding: 7px
}

.q3-home {
    width: 40%;
    height: 3px;
    border-radius: 3px;
    background: #0D0D0D;
    margin: 2px auto 0
}

/* Workshop-Visuals lebendiger */
.ft-v.wv {
    position: relative;
    height: 184px !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.wv-plan {
    width: 76%;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    padding: 10px 12px;
    display: grid;
    gap: 6px;
    transform: rotate(-2deg);
    margin-top: 6px
}

.wv-ph {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f2f2f2
}

.wv-ph span {
    font-size: 10px;
    color: #6b6b6b
}

.wv-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px
}

.wv-row small {
    margin-left: auto;
    font-size: 10px;
    color: #6b6b6b
}

.wv-row i {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid #c9c9c9;
    font-size: 9px;
    line-height: 11px;
    font-weight: 700;
    text-align: center;
    font-style: normal;
    flex: none
}

.wv-row.on i {
    background: #0D0D0D;
    border-color: #0D0D0D;
    color: #fff
}

.wv-row:not(.on) {
    color: #6b6b6b
}

.wv-tag {
    position: absolute;
    right: 16px;
    bottom: 14px;
    background: #FFC600;
    color: #0D0D0D;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 999px;
    transform: rotate(3deg)
}

.wv-call {
    width: 80%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    overflow: hidden;
    margin-top: -14px
}

.wv-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: #f2f2f2;
    font-size: 9.5px;
    color: #6b6b6b
}

.wv-bar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #d0d0d0
}

.wv-bar span {
    margin-left: 6px
}

.wv-bar span::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #E2001A;
    margin-right: 4px
}

.wv-body {
    display: flex;
    gap: 8px;
    padding: 8px
}

.wv-slide {
    flex: 1;
    background: #F2F2F2;
    color: #0D0D0D;
    border-radius: 6px;
    padding: 8px 10px
}

.wv-slide small {
    display: block;
    font-size: 8.5px;
    color: #0D0D0D;
    opacity: .7
}

.wv-slide b {
    display: block;
    font-size: 12px;
    margin: 2px 0 4px
}

.wv-slide ol {
    margin: 0;
    padding-left: 14px;
    font-size: 9.5px;
    line-height: 1.45;
    color: #0D0D0D
}

.wv-ppl {
    display: grid;
    gap: 4px
}

.wv-ppl i {
    width: 24px;
    height: 20px;
    border-radius: 5px;
    font-size: 8px;
    line-height: 20px;
    font-weight: 600;
    text-align: center;
    font-style: normal;
    color: #0D0D0D
}

.wv-ppl i.me {
    background: #f2f2f2;
    color: #6b6b6b
}

.wv-pb {
    position: absolute;
    right: 14px;
    bottom: 12px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 6px 10px 6px 30px;
    font-size: 11px;
    transform: rotate(-3deg)
}

.wv-pb::before {
    content: "PDF";
    position: absolute;
    left: 7px;
    top: 50%;
    margin-top: -9px;
    width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #FFC600;
    font-size: 6.5px;
    line-height: 18px;
    font-weight: 700;
    text-align: center
}

.wv-pb b {
    display: block
}

.wv-pb small {
    font-size: 9px;
    color: #6b6b6b
}

.wv-fn {
    display: flex;
    align-items: center;
    gap: 14px
}

.wv-p {
    position: relative;
    width: 78px;
    height: 132px;
    border-radius: 16px;
    padding: 3px;
    background: linear-gradient(145deg, #2b2b2b, #0D0D0D 40%);
    box-shadow: inset 0 0 0 1px #3a3a3a
}

.wv-scr {
    height: 100%;
    border-radius: 13px;
    background: #fff;
    padding: 16px 7px 7px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 8px
}

.wv-scr b {
    font-size: 9px
}

.wv-scr i {
    height: 6px;
    border-radius: 3px;
    background: #e5e5e5
}

.wv-scr i.s {
    width: 60%
}

.wv-scr em {
    margin-top: auto;
    font-style: normal;
    font-size: 7px;
    color: #6b6b6b;
    border: 1px dashed #c9c9c9;
    border-radius: 5px;
    padding: 5px 3px;
    text-align: center
}

.wv-scr u {
    text-decoration: none;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 4px 5px;
    color: #6b6b6b;
    font-size: 7px
}

.wv-scr strong {
    margin-top: auto;
    background: #FFC600;
    border-radius: 999px;
    text-align: center;
    padding: 5px;
    font-size: 7.5px
}

.wv-p.old {
    filter: grayscale(1);
    opacity: .6;
    transform: rotate(-4deg)
}

.wv-p:not(.old) {
    transform: rotate(3deg)
}

.wv-pc {
    position: absolute;
    bottom: -8px;
    right: -14px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 3px 9px;
    font-weight: 700;
    font-size: 13px
}

.wv-pc.hi {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.wv-vs {
    font-size: 11px;
    color: #6b6b6b
}

.wv-cap {
    font-size: 10.5px;
    color: #6b6b6b;
    margin-top: 6px
}

/* Stimmen */
.tq-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

.tq {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative
}

.tq blockquote {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: #0D0D0D
}

.tq-m {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 56px;
    line-height: .6;
    height: 22px;
    color: #FFC600
}

.tq figcaption {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: #6b6b6b
}

.tq figcaption b {
    display: block;
    color: #0D0D0D;
    font-size: 14px
}

.tq figcaption i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f2f2f2;
    color: #0D0D0D;
    font-style: normal;
    font-weight: 600;
    font-size: 13px;
    display: grid;
    place-items: center;
    flex: none
}

.tq-marq {
    margin-top: 16px;
    overflow: hidden;
    -webkit-mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
    mask: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent)
}

.sec-head + .tq-marq {
    margin-top: 0
}

.tq-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: tqm 60s linear infinite
}

.tq-marq:hover .tq-track {
    animation-play-state: paused
}

@keyframes tqm {
    to {
        transform: translateX(calc(-50% - 8px))
    }
}

.tq-s {
    width: 340px;
    padding: 18px 20px;
    gap: 10px
}

.tq-s blockquote {
    font-size: 14px
}

.tq-tag {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    background: #FFF5CC;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 10px
}

.tq-s figcaption i {
    width: 30px;
    height: 30px;
    font-size: 12px;
    background: #FFC600
}

.band:not(.tint) .tq {
    background: #f2f2f2;
    border-color: transparent
}

.band:not(.tint) .tq figcaption i {
    background: #fff
}

.band:not(.tint) .tq-s figcaption i {
    background: #FFC600
}

@media (prefers-reduced-motion: reduce) {
    .tq-track {
        animation: none
    }

    .tq-marq {
        overflow-x: auto
    }
}

@media (max-width: 900px) {
    .tq-grid {
        grid-template-columns:minmax(0, 1fr)
    }

    .tq-s {
        width: 280px
    }
}

.tq-grid .tq {
    padding: 18px 22px;
    gap: 10px
}

.tq-grid .tq-m {
    height: 16px;
    font-size: 48px
}

.tq-grid .tq blockquote {
    font-size: 14.5px;
    line-height: 1.5
}

.tq-s {
    padding: 16px 18px
}

.tq-s blockquote {
    font-size: 13.5px;
    line-height: 1.5
}

/* App-Hero wie Startseite */
.ap-hero {
    background: var(--bg)
}

.ah2-vis {
    position: relative;
    display: flex;
    justify-content: center
}

.ah2-vis .phone.rp {
    width: 330px
}

.ah2-f {
    position: absolute;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 12px 32px rgba(13, 13, 13, .08)
}

.ah2-f small {
    display: block;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b;
    margin-bottom: 8px
}

.ah2-prof {
    left: -8px;
    top: 22%;
    width: 220px
}

.ah2-prof .f2-bars span {
    grid-template-columns:70px 1fr
}

.ah2-match {
    right: -12px;
    bottom: 16%;
    display: flex;
    gap: 12px;
    align-items: center
}

.ah2-match small {
    margin: 2px 0 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 12px
}

.ah2-match b {
    font-size: 15px
}

.ah2-pc {
    background: #FFC600;
    color: #0D0D0D;
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: 8px 12px
}

@media (max-width: 900px) {
    .ah2-prof {
        left: 0;
        top: 8%;
        width: 180px
    }

    .ah2-match {
        right: 0
    }

    .ah2-vis .phone.rp {
        width: 280px
    }
}

@media (max-width: 520px) {
    .ah2-f {
        display: none
    }
}

/* Funnel ohne Handys */
.wv-fn {
    gap: 16px
}

.wv-c {
    position: relative;
    width: 118px;
    height: 118px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    overflow: visible;
    display: flex;
    flex-direction: column
}

.wv-ch {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 6px 8px;
    border-bottom: 1px solid #f2f2f2;
    font-size: 8px;
    color: #6b6b6b
}

.wv-ch i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #d6d6d6
}

.wv-ch span {
    margin-left: 4px
}

.wv-ch b {
    font-size: 10px;
    color: #0D0D0D
}

.wv-cb {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px
}

.wv-c.old .wv-cb u {
    height: 6px;
    border-radius: 3px;
    background: #ececec
}

.wv-c.old .wv-cb em {
    margin-top: auto;
    font-style: normal;
    font-size: 7px;
    color: #9a9a9a;
    border: 1px dashed #d0d0d0;
    border-radius: 5px;
    padding: 3px;
    text-align: center
}

.wv-c.old {
    opacity: .75
}

.wv-c:not(.old) .wv-cb u {
    text-decoration: none;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    padding: 5px 6px;
    font-size: 8px;
    color: #6b6b6b
}

.wv-c strong {
    margin-top: auto;
    background: #FFC600;
    border-radius: 999px;
    text-align: center;
    padding: 5px;
    font-size: 8.5px
}

.wv-c .wv-pc {
    bottom: -10px;
    right: -10px
}

.d2-v {
    overflow: hidden
}

.d2-v .d3 {
    zoom: .82
}

.wv-c .wv-pc {
    top: auto;
    bottom: -13px;
    right: auto;
    left: 50%;
    transform: translateX(-50%)
}

.wv-c .wv-cb {
    padding-bottom: 22px
}

.wv-c {
    height: 132px !important
}

.wv-fn {
    margin-top: -8px
}

.wv-cap {
    margin-top: 16px !important
}

/* App: Warum-Abschnitt im Kartenstil */
.ft-v.vz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px
}

.vz-num {
    font-size: 72px;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1;
    color: #0D0D0D
}

.vz-num::after {
    content: "";
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #FFC600;
    margin-top: 4px
}

.vz-src {
    font-size: 11px;
    color: #6b6b6b
}

.vz-list {
    width: 78%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px;
    display: grid;
    gap: 6px
}

.vz-bar {
    display: flex;
    justify-content: space-between;
    background: #f2f2f2;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600
}

.vz-bar em {
    font-style: normal;
    font-weight: 400;
    color: #6b6b6b;
    font-size: 11px
}

.vz-list i {
    height: 12px;
    border-radius: 6px;
    background: #f2f2f2
}

.vz-list i.s {
    width: 60%;
    opacity: .6
}

.vz-q {
    margin: 0;
    width: 80%;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 14px 16px
}

.vz-q blockquote {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #0D0D0D
}

.vz-q blockquote em {
    font-family: "Instrument Serif", Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: 19px
}

.vz-q figcaption {
    margin-top: 8px;
    font-size: 11px;
    color: #6b6b6b
}

.band.tint .feat .ft {
    background: #fff
}

/* Stellenanzeigen im Kartenstil */
.sa2-grid {
    display: grid;
    grid-template-columns:1fr 2fr;
    gap: 16px
}

.sa2 .ft {
    background: #fff
}

.sa2-v {
    height: 324px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    padding-top: 28px
}

.sa2-v > div {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    height: 100%
}

.sa2 .sa2-v {
    align-items: flex-start
}

.sa2 .sa2-v .phone {
    width: 300px;
    zoom: .7 !important;
    margin-bottom: 0;
    opacity: 1
}

.sa2 .sa2-v .rp-two {
    background: none;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0;
    width: auto
}

.sa2 .srcs {
    margin-top: 4px
}

.sa2-v .rp-two {
    display: flex;
    gap: 28px;
    justify-content: center
}

.sa2-v .phone.rp-old {
    filter: grayscale(.4)
}

@media (max-width: 900px) {
    .sa2-grid {
        grid-template-columns:minmax(0, 1fr)
    }

    .sa2-v .rp-two .phone:nth-child(2) {
        display: none
    }
}

/* Schritt 1: animierter Lebenslauf */
.rp-anim .rp-prog i {
    animation: rpProg 9s ease infinite
}

.rp-anim .rp-opts span.on {
    animation: rpSel 9s ease infinite
}

.rp-anim .rp-type {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    vertical-align: bottom;
    border-right: 1.5px solid #0D0D0D;
    animation: rpType 9s steps(23) infinite, rpCaret .8s step-end infinite
}

.rp-anim .rp-a3 {
    animation: rpIn3 9s ease infinite
}

.rp-anim .rp-a4 {
    animation: rpIn4 9s ease infinite
}

.rp-anim .rp-a4 em {
    animation: rpChk 9s ease infinite
}

.rp-anim .rp-fix {
    animation: rpBtn 9s ease infinite
}

@keyframes rpProg {
    0%, 70% {
        width: 25%
    }
    80%, 100% {
        width: 50%
    }
}

@keyframes rpSel {
    0%, 8% {
        background: #fff;
        border-color: #E2E2E2;
        font-weight: 400
    }
    12%, 100% {
        background: #FFC600;
        border-color: #FFC600;
        font-weight: 600
    }
}

@keyframes rpType {
    0%, 14% {
        max-width: 0
    }
    36%, 100% {
        max-width: 170px
    }
}

@keyframes rpCaret {
    50% {
        border-right-color: transparent
    }
}

@keyframes rpIn3 {
    0%, 38% {
        opacity: 0;
        transform: translateY(6px)
    }
    44%, 100% {
        opacity: 1;
        transform: none
    }
}

@keyframes rpIn4 {
    0%, 50% {
        opacity: 0;
        transform: translateY(6px)
    }
    56%, 100% {
        opacity: 1;
        transform: none
    }
}

@keyframes rpChk {
    0%, 64% {
        transform: scale(0)
    }
    70% {
        transform: scale(1.25)
    }
    74%, 100% {
        transform: scale(1)
    }
}

@keyframes rpBtn {
    0%, 82% {
        transform: none
    }
    86% {
        transform: scale(.95)
    }
    90%, 100% {
        transform: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .rp-anim * {
        animation: none !important
    }
}

.ans-bk {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 10px 12px;
    display: grid;
    gap: 4px
}

.ans-bk > b {
    font-size: 15px
}

.ans-bk > span {
    font-size: 12px;
    color: #6b6b6b
}

.ans-facts {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px
}

.ans-facts span {
    background: #fff;
    border-radius: 8px;
    padding: 6px;
    text-align: center;
    font-size: 10px;
    color: #6b6b6b
}

.ans-facts b {
    display: block;
    font-size: 13px;
    color: #0D0D0D
}

/* So swipen: 3 Karten statt Zickzack */
.sw3-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

.sw3 {
    background: #fff
}

.sw3-v {
    height: 360px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: hidden;
    padding-top: 28px
}

.sw3-v .phone {
    width: 300px;
    zoom: .78;
    transform: none !important;
    margin: 0
}

.sw3-n {
    display: block;
    margin: 18px 24px -14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b
}

.sw3 h3 {
    margin-top: 6px
}

@media (max-width: 900px) {
    .sw3-grid {
        grid-template-columns:minmax(0, 1fr)
    }
}

.sw3 .rp-anim .rp-scroll {
    overflow: hidden
}

.sw3 .rp-anim .rp-scroll > * {
    animation: rpScr 9s ease infinite
}

.sw3 .rp-anim .rp-scroll > .rp-row {
    animation: rpScr 9s ease infinite, rpF3 9s ease infinite
}

.sw3 .rp-anim .rp-scroll > .rp-up {
    animation: rpScr 9s ease infinite, rpF4 9s ease infinite
}

@keyframes rpF3 {
    0%, 38% {
        opacity: 0
    }
    44%, 100% {
        opacity: 1
    }
}

@keyframes rpF4 {
    0%, 50% {
        opacity: 0
    }
    56%, 100% {
        opacity: 1
    }
}

@keyframes rpScr {
    0%, 46% {
        transform: none
    }
    54%, 92% {
        transform: translateY(-110px)
    }
    100% {
        transform: none
    }
}

/* Workshop-Seite */
.ws-hero {
    background: var(--bg)
}

.ws-vis .phone.rp {
    width: 330px
}

.ws-ic {
    position: absolute;
    width: 64px;
    height: 64px;
    border-radius: 16px
}

.ws-ic.i1 {
    right: 4%;
    top: 12%;
    transform: rotate(8deg)
}

.ws-ic.i2 {
    right: 0;
    top: 58%;
    transform: rotate(-6deg)
}

.ws-ic.i3 {
    left: 4%;
    top: 66%;
    transform: rotate(-8deg)
}

.ws-xp {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 48px;
    align-items: start
}

.ws-intro {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 16px;
    max-width: 36ch
}

.ws-f {
    border-top: 1px solid var(--line);
    padding: 14px 0
}

.ws-f:last-child {
    border-bottom: 1px solid var(--line)
}

.ws-f small {
    display: block;
    font-size: 12px;
    color: #6b6b6b
}

.ws-f b {
    font-size: 17px
}

.ws-stats {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}

.ws-stats > div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.ws-stats b {
    font-size: 34px;
    letter-spacing: -.02em
}

.ws-stats span {
    font-size: 14px;
    color: #0D0D0D
}

.ws-stats .on {
    background: #FFC600;
    border-color: #FFC600
}

.ws-dd {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 16px
}

.ws-ddc {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    background: #fff
}

.ws-ddc.on {
    background: #FFC600;
    border-color: #FFC600
}

.ws-ddc h3 {
    margin: 0 0 16px
}

.ws-ddc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 14px
}

.ws-ddc li {
    display: flex;
    gap: 12px;
    align-items: center;
    font-size: 15px;
    color: #0D0D0D
}

.ws-ddc li i {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    font-style: normal;
    font-size: 11px;
    display: grid;
    place-items: center;
    flex: none
}

.ws-ddc.on li i {
    background: #0D0D0D;
    color: #FFC600
}

.wm-grid {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 12px
}

.wm-col {
    display: grid;
    gap: 8px;
    align-content: start
}

.wm-cat {
    justify-self: start;
    background: #0D0D0D;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    margin-bottom: 4px
}

.wm-it {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px 14px
}

.wm-it small {
    display: block;
    font-size: 11px;
    color: #6b6b6b
}

.wm-it b {
    display: block;
    font-size: 15px;
    line-height: 1.3
}

.wm-it span {
    font-size: 12.5px;
    color: #6b6b6b
}

.ws-steps {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 12px
}

.ws-st {
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 280px;
    background: #fff
}

.ws-st.on {
    background: #FFC600;
    border-color: #FFC600
}

.ws-n {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.02em
}

.ws-st h3 {
    margin: 8px 0 0
}

.ws-st p {
    margin: 0;
    font-size: 14.5px;
    color: #4a4a4a
}

.ws-st.on p {
    color: #0D0D0D
}

.ws-tag {
    margin-top: auto;
    align-self: flex-start;
    background: #f2f2f2;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px
}

.ws-st.on .ws-tag {
    background: #fff
}

@media (max-width: 900px) {
    .ws-xp, .ws-dd {
        grid-template-columns:minmax(0, 1fr)
    }

    .wm-grid, .ws-steps {
        grid-template-columns:1fr 1fr
    }

    .ws-ic {
        width: 48px;
        height: 48px
    }
}

@media (max-width: 520px) {
    .wm-grid, .ws-steps {
        grid-template-columns:minmax(0, 1fr)
    }
}

/* TikTok-Ansicht im Workshop-Hero */
.tkp .screen.tk {
    background-size: cover;
    background-position: center;
    color: #fff;
    display: block
}

.tkp .screen.tk::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 22%, transparent 50%, rgba(0, 0, 0, .75) 85%);
    z-index: 0
}

.tkp .screen.tk > * {
    position: absolute;
    z-index: 1
}

.tkp .tk .sbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    color: #fff
}

.tk-top {
    top: 52px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 18px;
    font-size: 15px
}

.tk-top span {
    opacity: .7
}

.tk-top b {
    border-bottom: 2px solid #fff;
    padding-bottom: 3px
}

.tk-side {
    right: 12px;
    bottom: 150px;
    display: grid;
    gap: 16px;
    justify-items: center
}

.tk-side > span {
    display: grid;
    justify-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600
}

.tk-side small {
    font-size: 11px
}

.tk-av {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid !important;
    place-items: center;
    font-weight: 700;
    font-size: 13px;
    border: 2px solid #fff;
    position: relative
}

.tk-av i {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #FE2C55;
    color: #fff;
    font-style: normal;
    font-size: 13px;
    line-height: 17px;
    text-align: center
}

.tk-h svg {
    color: #FE2C55;
    animation: tkHeart 2.4s ease infinite
}

@keyframes tkHeart {
    0%, 60%, 100% {
        transform: scale(1)
    }
    70% {
        transform: scale(1.3)
    }
    80% {
        transform: scale(.95)
    }
}

.tk-cap {
    left: 14px;
    right: 70px;
    bottom: 108px;
    display: grid;
    gap: 4px;
    font-size: 13px;
    line-height: 1.35
}

.tk-cap b {
    font-size: 14px
}

.tk-cap em {
    font-style: normal;
    font-size: 12px;
    opacity: .9
}

.tk-cta {
    left: 14px;
    right: 14px;
    bottom: 62px;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 8px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
    padding: 9px
}

.tk-prog {
    left: 0;
    right: 0;
    bottom: 52px;
    height: 2px;
    background: rgba(255, 255, 255, .3)
}

.tk-prog i {
    display: block;
    height: 100%;
    background: #fff;
    animation: tkProg 8s linear infinite
}

@keyframes tkProg {
    from {
        width: 0
    }
    to {
        width: 100%
    }
}

.tk-nav {
    left: 0;
    right: 0;
    bottom: 0;
    height: 52px;
    background: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: 10px;
    padding-bottom: 6px
}

.tk-nav .pl {
    background: #fff;
    color: #000;
    border-radius: 7px;
    width: 36px;
    height: 24px;
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
    box-shadow: -3px 0 0 #25F4EE, 3px 0 0 #FE2C55
}

@media (prefers-reduced-motion: reduce) {
    .tk-h svg, .tk-prog i {
        animation: none
    }
}

/* Workshop v2 */
.ws2-stats {
    grid-template-columns:repeat(4, minmax(0, 1fr))
}

.ws2-pairs {
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    background: #fff
}

.ws2-ph {
    display: grid;
    grid-template-columns:1fr 40px 1fr;
    padding: 12px 24px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b;
    background: #f2f2f2
}

.ws2-ph span:last-child {
    grid-column: 3
}

.ws2-p {
    display: grid;
    grid-template-columns:1fr 40px 1fr;
    align-items: center;
    padding: 16px 24px;
    border-top: 1px solid var(--line);
    font-size: 16px
}

.ws2-p .no {
    color: #6b6b6b;
    text-decoration: line-through;
    text-decoration-color: #c9c9c9
}

.ws2-p i {
    font-style: normal;
    color: #6b6b6b
}

.ws2-p .yes {
    font-weight: 600;
    color: #0D0D0D
}

.ws2-p .yes::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFC600;
    margin-right: 10px;
    vertical-align: 2px
}

.ws2-cats {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 16px
}

.ws2-cat {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px
}

.ws2-cat small {
    font-size: 12px;
    color: #6b6b6b
}

.ws2-cat h3 {
    margin: 4px 0 6px
}

.ws2-cat p {
    margin: 0 0 14px;
    font-size: 14px;
    color: #6b6b6b
}

.ws2-cat ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px
}

.ws2-cat li {
    font-size: 14.5px;
    padding: 8px 12px;
    background: #f2f2f2;
    border-radius: 8px
}

.ws2-tl {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 24px;
    position: relative
}

.ws2-tl::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 18px;
    height: 2px;
    background: var(--line)
}

.ws2-t {
    position: relative
}

.ws2-t > i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0D0D0D;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 16px;
    position: relative
}

.ws2-t:nth-child(2) > i {
    background: #FFC600;
    border-color: #FFC600
}

.ws2-t h3 {
    margin: 0 0 6px
}

.ws2-t p {
    margin: 0;
    font-size: 15px;
    color: #4a4a4a
}

@media (max-width: 900px) {
    .ws2-stats, .ws2-cats {
        grid-template-columns:1fr 1fr
    }

    .ws2-tl {
        grid-template-columns:1fr 1fr
    }

    .ws2-tl::before {
        display: none
    }

    .ws2-p, .ws2-ph {
        grid-template-columns:1fr;
        gap: 4px
    }

    .ws2-p i, .ws2-ph span:last-child {
        display: none
    }
}

@media (max-width: 520px) {
    .ws2-stats, .ws2-cats, .ws2-tl {
        grid-template-columns:minmax(0, 1fr)
    }
}

/* Workshop v3: mehr Tiefe */
.ws2-xp {
    display: grid;
    grid-template-columns:1.1fr 1fr;
    gap: 16px;
    align-items: stretch
}

.ws2-stats2 {
    grid-template-columns:1fr 1fr
}

.ws2-dash {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px
}

.wd-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.wd-h span {
    font-size: 12px;
    color: #6b6b6b
}

.wd-k {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.wd-k > div {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 10px 12px
}

.wd-k small {
    display: block;
    font-size: 11px;
    color: #6b6b6b
}

.wd-k b {
    font-size: 20px
}

.wd-k .on {
    background: #FFF5CC
}

.wd-ch {
    flex: 1;
    min-height: 110px;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    border-bottom: 1px solid var(--line);
    padding-top: 6px
}

.wd-ch i {
    flex: 1;
    height: var(--h);
    background: #FFC600;
    border-radius: 4px 4px 0 0;
    transform-origin: bottom;
    animation: wdUp 1.2s ease var(--d) both
}

.wd-ch i:nth-child(-n+7) {
    background: #e5e5e5
}

@keyframes wdUp {
    from {
        transform: scaleY(0)
    }
}

.wd-note {
    font-size: 11px;
    color: #9a9a9a
}

.ws2-lr {
    display: grid;
    grid-template-columns:1.5fr 1fr;
    gap: 16px;
    align-items: stretch
}

.ws2-ret {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.wr-h {
    display: flex;
    justify-content: space-between;
    align-items: baseline
}

.wr-h small {
    font-size: 11px;
    color: #9a9a9a
}

.wr-svg {
    width: 100%;
    height: auto
}

.wr-a, .wr-b {
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    animation: wrDraw 2.2s ease forwards
}

.wr-b {
    animation-delay: .4s
}

@keyframes wrDraw {
    to {
        stroke-dashoffset: 0
    }
}

.wr-l {
    display: grid;
    gap: 4px;
    font-size: 12.5px
}

.wr-l i {
    display: inline-block;
    width: 14px;
    height: 4px;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: 3px
}

.ws2-p {
    padding: 14px 20px;
    font-size: 15px
}

.ws2-ph {
    padding: 10px 20px
}

.ws2-cat {
    padding: 0;
    overflow: hidden
}

.ws2-cat > small, .ws2-cat > h3, .ws2-cat > ul {
    margin-left: 18px;
    margin-right: 18px
}

.ws2-cat > small {
    display: block;
    margin-top: 14px
}

.ws2-cat > ul {
    margin-bottom: 18px;
    margin-top: 10px
}

.ws2-cat li {
    padding: 7px 10px;
    font-size: 14px
}

.wc-v {
    height: 120px;
    background: var(--cream);
    display: grid;
    place-items: center
}

.wc-prof {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    padding: 10px 12px;
    width: 72%;
    display: grid;
    grid-template-columns:auto 1fr;
    column-gap: 8px;
    font-size: 11px
}

.wc-prof .av {
    grid-row: span 2;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 10px
}

.wc-prof small {
    color: #6b6b6b;
    font-size: 10px
}

.wc-prof .g {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 3px;
    margin-top: 8px
}

.wc-prof .g i {
    aspect-ratio: 3/4;
    background: #e5e5e5;
    border-radius: 3px
}

.wc-prof .g i:nth-child(2) {
    background: #FFC600
}

.wc-rec {
    width: 64px;
    height: 100px;
    border-radius: 10px;
    background: linear-gradient(170deg, #555, #111);
    position: relative;
    color: #fff;
    font-size: 8px
}

.wc-rec .rd {
    position: absolute;
    top: 6px;
    left: 6px;
    color: #ff4d4d;
    font-weight: 700;
    animation: recBl 1.2s step-end infinite
}

.wc-rec .t {
    position: absolute;
    top: 6px;
    right: 6px
}

.wc-rec .hk {
    position: absolute;
    left: -26px;
    right: -26px;
    bottom: 10px;
    background: #fff;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 9.5px;
    font-weight: 600;
    text-align: center;
    border: 1px solid #e5e5e5
}

@keyframes recBl {
    50% {
        opacity: 0
    }
}

.wc-funnel {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px
}

.wc-funnel span {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 6px 8px
}

.wc-funnel .on {
    background: #FFC600;
    border-color: #FFC600;
    font-weight: 600
}

.wc-funnel i {
    font-style: normal;
    color: #6b6b6b
}

.wc-chk {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 10px 14px;
    display: grid;
    gap: 6px;
    font-size: 12px
}

.wc-chk i {
    display: inline-grid;
    place-items: center;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    background: #0D0D0D;
    color: #fff;
    font-style: normal;
    font-size: 9px;
    margin-right: 8px
}

.ws2-tl::before {
    top: auto;
    bottom: auto;
    display: none
}

.ws2-t {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    padding-bottom: 20px
}

.ws2-t > i {
    margin: -19px 0 10px 20px;
    position: relative;
    z-index: 1
}

.ws2-t h3, .ws2-t p {
    margin-left: 20px;
    margin-right: 20px
}

.wt-v {
    height: 130px;
    background: var(--cream);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px
}

.wt-v small {
    font-size: 11px;
    color: #6b6b6b
}

.wt-v .cal {
    width: 62px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    text-align: center;
    font-size: 12px;
    overflow: hidden;
    padding-bottom: 6px
}

.wt-v .cal b {
    display: block;
    background: #FFC600;
    padding: 3px;
    margin-bottom: 4px
}

.wt-v .call {
    display: grid;
    grid-template-columns:repeat(2, 40px);
    gap: 5px
}

.wt-v .call i {
    height: 32px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e5e5;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 10px;
    font-weight: 600
}

.wt-v .call i.y {
    background: #FFC600;
    border-color: #FFC600
}

.wt-v .doc {
    width: 84px;
    height: 100px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px;
    display: grid;
    gap: 6px;
    align-content: start;
    transform: rotate(-3deg)
}

.wt-v .doc b {
    font-size: 9px
}

.wt-v .doc i {
    height: 5px;
    border-radius: 3px;
    background: #e5e5e5
}

.wt-v .fb {
    position: relative;
    width: 64px;
    height: 100px
}

.wt-v .fb .pv {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(170deg, #555, #111)
}

.wt-v .fb .bub {
    position: absolute;
    left: 30px;
    top: 16px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px 10px 10px 2px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600
}

@media (max-width: 900px) {
    .ws2-xp, .ws2-lr {
        grid-template-columns:minmax(0, 1fr)
    }
}

@media (prefers-reduced-motion: reduce) {
    .wd-ch i, .wr-a, .wr-b {
        animation: none;
        stroke-dashoffset: 0
    }
}

.wt-v {
    height: 150px;
    overflow: hidden;
    padding-bottom: 18px;
    box-sizing: border-box
}

.wt-v .fb {
    height: 86px !important;
    width: 56px !important
}

.wt-v .doc {
    height: 88px
}

.wt-v .call {
    grid-template-columns:repeat(2, 36px)
}

.wt-v .call i {
    height: 28px
}

.ws2-t > i {
    margin: -19px 0 8px 20px
}

.wt-v .wtc {
    width: 64px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    overflow: hidden;
    padding-bottom: 6px;
    line-height: 1.2
}

.wt-v .wtc b {
    display: block;
    background: #FFC600;
    padding: 4px;
    margin-bottom: 5px
}

.wt-v .wtk {
    display: grid;
    grid-template-columns:repeat(2, 38px);
    gap: 5px
}

.wt-v .wtk i {
    height: 28px;
    border-radius: 7px;
    background: #fff;
    border: 1px solid #e5e5e5;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 10px;
    font-weight: 600
}

.wt-v .wtk i.y {
    background: #FFC600;
    border-color: #FFC600
}

.wt-v .wtd {
    width: 80px;
    height: 92px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: rotate(-3deg);
    box-sizing: border-box
}

.wt-v .wtd b {
    font-size: 9px
}

.wt-v .wtd i {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: #e5e5e5;
    width: 100%
}

.wt-v .wtf {
    position: relative;
    width: 56px;
    height: 90px
}

.wt-v .wtf .pv {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(170deg, #555, #111)
}

.wt-v .wtf .bub {
    position: absolute;
    left: 28px;
    top: 14px;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px 10px 10px 2px;
    padding: 5px 8px;
    font-size: 10px;
    font-weight: 600
}

.wt-v .wtf .wpv {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: linear-gradient(170deg, #555, #111)
}

.wc-rec .t {
    display: none
}

.wc-funnel {
    gap: 4px;
    font-size: 10.5px
}

.wc-funnel span {
    padding: 5px 7px
}

/* Problem-Karten: neutrale Bildfläche */
.pgrid.pg5 .pv {
    background: #F2F2F2 !important
}

/* Drei Wege: positiv hervorheben */
.wg-eb {
    color: #0D0D0D !important;
    background: #FFC600;
    border-radius: 999px;
    padding: 4px 10px;
    justify-self: start;
    letter-spacing: .06em
}

.ways3 .ow-top {
    background: #FFC600 !important
}

.ways3 .ow-card, .ways3 > * {
    border-color: #FFC600
}

/* Eure Stellen: Handy in der Mitte */
.hub {
    display: grid;
    grid-template-columns:1fr auto 1fr;
    gap: 28px;
    align-items: center
}

.hub-col {
    display: grid;
    gap: 16px
}

.hub-c {
    background: #fff;
    position: relative
}

.hub-c .ft-v {
    height: 110px !important
}

.hub-c h3 {
    font-size: 17px
}

.hub-c p {
    font-size: 14px
}

.hub-col.l .hub-c::after, .hub-col.r .hub-c::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 28px;
    border-top: 2px dashed #c9c9c9
}

.hub-col.l .hub-c::after {
    right: -30px
}

.hub-col.r .hub-c::after {
    left: -30px
}

.hub-ph .phone.rp {
    width: 270px
}

@media (max-width: 1000px) {
    .hub {
        grid-template-columns:minmax(0, 1fr)
    }

    .hub-ph {
        order: -1;
        justify-self: center
    }

    .hub-c::after {
        display: none
    }
}

.hub-c .ft-v {
    height: 128px !important;
    overflow: hidden;
    display: grid !important;
    place-items: center
}

.hub-c .ft-v > * {
    zoom: .74
}

.hub-c h3 {
    margin-top: 14px
}

.hub-ph .phone.rp {
    width: 250px !important
}

.hub-c {
    display: grid !important;
    grid-template-columns:170px 1fr;
    grid-template-rows:auto 1fr;
    column-gap: 0;
    min-height: 178px
}

.hub-c .ft-v {
    grid-row: 1/3;
    height: auto !important;
    min-height: 178px
}

.hub-c .ft-v > * {
    zoom: .6
}

.hub-c h3 {
    margin: 22px 20px 6px !important;
    align-self: end
}

.hub-c p {
    margin: 0 20px 20px;
    align-self: start
}

.hub-col.l .hub-c::after, .hub-col.r .hub-c::after {
    top: 50%
}

.hub {
    gap: 20px
}

.hub-col.l .hub-c::after {
    right: -22px;
    width: 20px
}

.hub-col.r .hub-c::after {
    left: -22px;
    width: 20px
}

.hub-c {
    grid-template-columns:140px 1fr;
    min-height: 0
}

.hub-c .ft-v {
    min-height: 160px !important
}

.hub-c h3, .hub-c p {
    padding: 0 !important
}

.hub-c h3 {
    margin: 18px 18px 6px !important;
    font-size: 16px
}

.hub-c p {
    margin: 0 18px 18px !important;
    font-size: 13.5px;
    line-height: 1.5
}

.hub-ph .phone.rp {
    width: 240px !important
}

/* ATS: Fokus Anbindungen */
.ats2 {
    display: grid;
    grid-template-columns:300px 160px 1fr;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 40px
}

.a2-src {
    display: grid;
    gap: 14px;
    justify-items: start
}

.a2-jj img {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: block
}

.a2-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
    display: grid;
    gap: 2px;
    box-shadow: 0 8px 24px rgba(13, 13, 13, .06)
}

.a2-card b {
    font-size: 15px
}

.a2-card span {
    font-size: 13px
}

.a2-card small {
    font-size: 12px;
    color: #6b6b6b
}

.a2-flow {
    position: relative;
    height: 2px;
    background: repeating-linear-gradient(90deg, #d0d0d0 0 6px, transparent 6px 12px);
    margin: 0 12px
}

.a2-flow i {
    position: absolute;
    top: -4px;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFC600;
    animation: a2f 2.4s linear infinite
}

.a2-flow i:nth-child(2) {
    animation-delay: .8s
}

.a2-flow i:nth-child(3) {
    animation-delay: 1.6s
}

@keyframes a2f {
    0% {
        left: 0;
        opacity: 0
    }
    10% {
        opacity: 1
    }
    90% {
        opacity: 1
    }
    100% {
        left: calc(100% - 10px);
        opacity: 0
    }
}

.a2-grid {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 10px
}

.a2-l {
    height: 64px;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #fff;
    padding: 10px;
    animation: a2p 4s ease var(--d) infinite
}

.a2-l img {
    max-height: 26px;
    max-width: 100%;
    object-fit: contain
}

.a2-more {
    background: #f2f2f2;
    border-color: #f2f2f2;
    line-height: 1.1;
    text-align: center
}

.a2-more b {
    display: block;
    font-size: 18px
}

.a2-more small {
    font-size: 11px;
    color: #6b6b6b
}

@keyframes a2p {
    0%, 8% {
        border-color: var(--line)
    }
    4% {
        border-color: #FFC600;
        box-shadow: 0 0 0 3px #FFF5CC
    }
}

.a2-alt {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    font-size: 14px;
    color: #6b6b6b
}

.a2-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 6px 14px;
    color: #0D0D0D;
    font-size: 13.5px
}

.a2-chip img {
    width: 18px;
    height: 18px;
    border-radius: 5px
}

@media (max-width: 900px) {
    .ats2 {
        grid-template-columns:minmax(0, 1fr);
        gap: 20px;
        padding: 24px
    }

    .a2-flow {
        display: none
    }
}

@media (prefers-reduced-motion: reduce) {
    .a2-flow i, .a2-l {
        animation: none
    }
}

/* Stelle posten */
.sp-hero {
    background: var(--bg)
}

.sp-ph {
    width: 300px !important
}

.sp-f1 {
    right: -10px;
    bottom: 18%;
    display: flex;
    gap: 12px;
    align-items: center
}

.sp-f1 small {
    margin: 2px 0 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    font-size: 12px
}

.sp-v {
    display: grid !important;
    place-items: center
}

.sp-show {
    display: grid;
    gap: 10px;
    justify-items: center
}

.sp-q {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 14px 14px 14px 4px;
    padding: 10px 14px;
    font-size: 14px
}

.sp-ws {
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 12px
}

.sp-chat {
    display: grid;
    gap: 8px;
    width: 80%
}

.sp-chat span {
    border-radius: 14px;
    padding: 8px 12px;
    font-size: 13px;
    max-width: 85%
}

.sp-chat .in {
    background: #fff;
    border: 1px solid #e5e5e5;
    justify-self: start
}

.sp-chat .out {
    background: #0D0D0D;
    color: #fff;
    justify-self: end
}

.sp-tl {
    display: flex;
    align-items: center;
    gap: 6px
}

.sp-tl span {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 12px;
    text-align: center;
    line-height: 1.3
}

.sp-tl b {
    display: block;
    font-size: 14px
}

.sp-tl span.on {
    background: #FFC600;
    border-color: #FFC600
}

.sp-tl i {
    width: 14px;
    border-top: 2px dashed #c9c9c9
}

.sp-tips {
    display: grid;
    grid-template-columns:1fr 1.1fr;
    gap: 24px;
    align-items: stretch
}

.sp-list {
    display: grid;
    gap: 12px;
    align-content: start
}

.sp-t {
    display: flex;
    gap: 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    background: #fff
}

.sp-t i {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f2f2f2;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 700;
    flex: none
}

.sp-t b {
    display: block;
    font-size: 16px;
    margin-bottom: 2px
}

.sp-t span {
    font-size: 14.5px;
    color: #4a4a4a
}

.sp-secret {
    border-radius: 16px;
    background: #FFC600;
    padding: 28px;
    display: grid;
    grid-template-columns:180px 1fr;
    gap: 24px;
    align-items: center
}

.sp-secret h3 {
    margin: 8px 0
}

.sp-secret p {
    margin: 0 0 18px;
    color: #0D0D0D
}

.sp-eb {
    display: inline-block;
    background: #0D0D0D;
    color: #FFC600;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 10px
}

.sp-env {
    position: relative;
    height: 150px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(13, 13, 13, .12);
    overflow: visible
}

.sp-letter {
    position: absolute;
    left: 12px;
    right: 12px;
    top: -34px;
    height: 120px;
    background: #fffdf6;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 12px;
    display: grid;
    gap: 6px;
    align-content: start;
    transform: rotate(-3deg);
    animation: spL 4s ease-in-out infinite
}

.sp-letter small {
    font-size: 10px
}

.sp-letter i {
    height: 4px;
    border-radius: 2px;
    background: #e5e5e5
}

.sp-letter em {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 15px;
    margin-top: 4px
}

.sp-flap {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    background: #fff;
    border-radius: 0 0 10px 10px;
    clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
    box-shadow: inset 0 1px 0 #eee
}

@keyframes spL {
    0%, 100% {
        transform: translateY(0) rotate(-3deg)
    }
    50% {
        transform: translateY(-8px) rotate(-3deg)
    }
}

.sp-flow {
    display: grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap: 16px
}

.sp-s {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 240px
}

.sp-s .n {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700
}

.sp-s.opt {
    border-style: dashed
}

.sp-s.opt .n {
    background: #f2f2f2;
    color: #0D0D0D
}

.sp-s h3 {
    margin: 8px 0 0
}

.sp-s p {
    margin: 0;
    font-size: 14.5px;
    color: #4a4a4a
}

.sp-price {
    margin-top: auto;
    align-self: flex-start;
    font-weight: 700;
    font-size: 15px;
    border-radius: 999px;
    padding: 6px 14px;
    background: #f2f2f2
}

.sp-price.free {
    background: #FFC600
}

@media (max-width: 900px) {
    .sp-tips, .sp-flow {
        grid-template-columns:minmax(0, 1fr)
    }

    .sp-secret {
        grid-template-columns:minmax(0, 1fr)
    }

    .sp-env {
        max-width: 220px;
        margin-top: 30px
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-letter {
        animation: none
    }
}

/* Drei Wege als Bento */
.bento {
    display: grid;
    grid-template-columns:1fr 1.25fr;
    grid-template-rows:1fr 1fr;
    gap: 16px
}

.bt {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: #fff;
    color: #0D0D0D;
    text-decoration: none;
    padding: 26px 28px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .2s
}

.bt:hover {
    transform: translateY(-2px)
}

.bt h3 {
    margin: 0
}

.bt p {
    margin: 0;
    color: #4a4a4a;
    font-size: 15px;
    max-width: 42ch
}

.bt .proof {
    align-self: flex-start
}

.bt .link {
    margin-top: 6px
}

.bt-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b
}

.bt-app {
    grid-row: 1/3;
    background: #FFC600;
    border-color: #FFC600
}

.bt-app .bt-k {
    color: #0D0D0D
}

.bt-app p {
    color: #0D0D0D
}

.bt-app .proof {
    background: #fff !important;
    border-color: #fff !important
}

.bt-app .bt-v {
    margin-top: auto;
    display: grid;
    place-items: center;
    padding-top: 20px;
    transform: scale(1.35);
    transform-origin: center bottom
}

.bt-row {
    flex-direction: row;
    align-items: center;
    gap: 24px
}

.bt-row > div {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1
}

.bt-row .bt-v {
    flex: none;
    width: 220px;
    align-self: stretch;
    margin: -26px -28px -26px 0;
    background: #f2f2f2;
    display: grid;
    place-items: center
}

@media (max-width: 900px) {
    .bento {
        grid-template-columns:minmax(0, 1fr);
        grid-template-rows:none
    }

    .bt-app {
        grid-row: auto
    }

    .bt-row {
        flex-direction: column;
        align-items: stretch
    }

    .bt-row .bt-v {
        width: auto;
        margin: 0 -28px -26px;
        padding: 20px
    }

    .bt-app .bt-v {
        transform: none
    }
}

.hub-c .hub-phv {
    display: flex !important;
    justify-content: center;
    align-items: flex-start !important;
    overflow: hidden;
    padding-top: 16px
}

.hub-c .hub-phv > * {
    zoom: 1
}

.hub-mini {
    width: 300px !important;
    zoom: .4 !important;
    flex: none
}

.hub-mini .rp-scroll {
    overflow: hidden !important
}

.hub-mini .rp-scroll > * {
    animation: rpScr 9s ease infinite
}

.hub-mini .rp-scroll > .rp-row {
    animation: rpScr 9s ease infinite, rpF3 9s ease infinite
}

.hub-mini .rp-scroll > .rp-up {
    animation: rpScr 9s ease infinite, rpF4 9s ease infinite
}

/* Bento fixes */
.bt-app .proof {
    background: #fff !important;
    border: 0 !important;
    border-radius: 999px;
    padding: 4px 12px !important;
    display: inline-block
}

.bt {
    padding: 24px 26px;
    gap: 6px
}

.bt p {
    font-size: 14.5px
}

.bt-row .bt-v {
    width: 250px;
    margin: -24px -26px -24px 0;
    overflow: hidden
}

.bt-row .bt-v > * {
    zoom: .88
}

.bt-app .bt-v {
    transform: scale(1.25)
}

.hub-c .hub-phv {
    height: 170px !important;
    min-height: 0 !important;
    max-height: 170px
}

.bento {
    grid-template-rows:auto auto
}

.bt {
    padding: 22px 26px
}

.bt-row .bt-v {
    margin: -22px -26px -22px 0
}

.feedband .vstep .stage {
    height: 270px !important
}

.feedband .feed-foot {
    margin-top: 20px
}

.a2-more {
    background: #0D0D0D;
    border-color: #0D0D0D !important;
    color: #fff
}

.a2-more b {
    color: #fff
}

.a2-more small {
    color: #fff !important;
    opacity: .75
}

.feedband .vstep .stage {
    height: 240px !important
}

.btn .dot svg {
    display: block
}

.bt-app {
    padding-bottom: 0 !important
}

.bt-app .bt-v.bt-v-ph {
    transform: none;
    margin-top: auto;
    padding-top: 18px;
    height: 280px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: flex-start
}

.bt-phone {
    width: 300px !important;
    zoom: .66;
    flex: none
}

.bt-phone .rp-scroll {
    overflow: hidden
}

.bt-phone .rp-scroll > * {
    animation: rpScr 9s ease infinite
}

.bt-phone .rp-scroll > .rp-row {
    animation: rpScr 9s ease infinite, rpF3 9s ease infinite
}

.bt-phone .rp-scroll > .rp-up {
    animation: rpScr 9s ease infinite, rpF4 9s ease infinite
}

@media (max-width: 900px) {
    .bt-app .bt-v.bt-v-ph {
        height: 260px
    }
}

.bt-app {
    background: #FFF5CC;
    border-color: #FFF5CC
}

.bt-app .bt-k {
    color: #6b6b6b
}

.hub-c .hub-cvv {
    height: 170px !important;
    min-height: 0 !important;
    overflow: hidden;
    display: flex !important;
    justify-content: center;
    align-items: flex-start !important;
    padding-top: 18px
}

.hub-c .hub-cvv > * {
    zoom: 1
}

.hub-cv {
    width: 100%;
    height: 100%;
    overflow: visible !important
}

.hub-cv .jcv {
    zoom: .27;
    transform: rotate(-3deg) !important;
    margin: 0 auto
}

.hub-cv {
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    padding: 0 !important
}

.hub-cv .jcv {
    flex: none;
    margin: 0 !important;
    transform-origin: center !important
}

.hub-c .hub-cvv {
    padding: 22px 0 0 !important;
    display: block !important
}

.hub-c .hub-cvv2 {
    display: grid !important;
    place-items: center;
    position: relative;
    height: 170px !important;
    min-height: 0 !important
}

.hub-c .hub-cvv2 > * {
    zoom: 1
}

.mcv {
    width: 96px;
    height: 128px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e5e5e5;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transform: rotate(-3deg);
    box-shadow: 0 6px 18px rgba(13, 13, 13, .08)
}

.mcv-h {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px
}

.mcv-h b {
    display: block;
    font-size: 8px;
    line-height: 1.1
}

.mcv-h small {
    font-size: 6px;
    color: #6b6b6b
}

.mcv-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #FFC600;
    font-size: 7px;
    font-weight: 700;
    display: grid;
    place-items: center;
    flex: none
}

.mcv i {
    display: block;
    height: 4px;
    border-radius: 2px;
    background: #e5e5e5
}

.mcv-s {
    font-size: 6.5px;
    margin-top: 4px
}

.mcv-ok {
    position: absolute;
    right: 10px;
    bottom: 24px;
    background: #0D0D0D;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 9px
}

/* Flop/Top Umschalter */
.ff {
    display: grid;
    grid-template-columns:260px 1fr;
    gap: 40px;
    align-items: center
}

.ff-vid {
    position: relative;
    width: 260px;
    aspect-ratio: 9/16;
    border-radius: 22px;
    overflow: hidden;
    background: #0D0D0D;
    border: 6px solid #0D0D0D
}

.ff-flop, .ff-top {
    position: absolute;
    inset: 0;
    transition: opacity .5s
}

.ff-flop {
    background: #1d3557;
    display: flex;
    flex-direction: column;
    justify-content: center
}

.ff-flop .ff-bar {
    height: 30%;
    background: #000
}

.ff-logo {
    flex: 1;
    display: grid;
    place-content: center;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #1d3557, #457b9d)
}

.ff-logo b {
    font-size: 20px;
    letter-spacing: .12em
}

.ff-logo small {
    font-size: 11px;
    opacity: .8
}

.ff-top {
    background-size: cover;
    background-position: center
}

.ff-top::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .6))
}

.ff-hook {
    position: absolute;
    left: 14px;
    right: 14px;
    top: 22%;
    z-index: 1;
    background: #fff;
    color: #0D0D0D;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.3;
    padding: 8px 10px;
    border-radius: 8px;
    text-align: center
}

.ff-tag {
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 1;
    color: #fff;
    font-size: 11px;
    background: rgba(0, 0, 0, .5);
    border-radius: 6px;
    padding: 2px 6px
}

.ff[data-mode="top"] .ff-flop {
    opacity: 0
}

.ff[data-mode="flop"] .ff-top {
    opacity: 0
}

.ff-sw {
    display: inline-flex;
    background: #f2f2f2;
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    margin-bottom: 18px
}

.ff-sw button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: 9px 18px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #6b6b6b;
    cursor: pointer
}

.ff-sw button[aria-selected="true"] {
    background: #fff;
    color: #0D0D0D;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .1)
}

.ff-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px
}

.ff-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    min-height: 26px
}

.ff-list li::before {
    content: "✓";
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 700;
    flex: none
}

.ff[data-mode="flop"] .ff-list li::before {
    content: "✕";
    background: #e5e5e5;
    color: #6b6b6b
}

.ff .ff-list .f {
    display: none;
    color: #6b6b6b
}

.ff[data-mode="flop"] .ff-list .f {
    display: inline
}

.ff[data-mode="flop"] .ff-list .t {
    display: none
}

.ff .ff-list .t {
    font-weight: 600
}

.ff-ch {
    margin-top: 20px;
    max-width: 420px
}

.ff-ch small {
    font-size: 12px;
    color: #6b6b6b
}

.ff-ch svg {
    width: 100%;
    height: auto;
    max-height: 150px
}

.ff[data-mode="flop"] .wr-b {
    opacity: .25
}

.ff[data-mode="top"] .wr-a {
    opacity: .35
}

.ff .wr-a, .ff .wr-b {
    transition: opacity .4s
}

@media (max-width: 800px) {
    .ff {
        grid-template-columns:minmax(0, 1fr)
    }

    .ff-vid {
        width: 220px;
        justify-self: center
    }
}

.ff-ch svg {
    display: block;
    width: auto;
    height: 150px;
    max-height: none
}

/* Ablauf interaktiv */
.ws2-prog {
    height: 4px;
    background: #e5e5e5;
    border-radius: 2px;
    margin-bottom: 18px;
    overflow: hidden
}

.ws2-prog i {
    display: block;
    height: 100%;
    width: 25%;
    background: #FFC600;
    border-radius: 2px;
    transition: width .6s ease
}

.ws2-t {
    cursor: pointer;
    transition: transform .3s, border-color .3s, box-shadow .3s
}

.ws2-t > i {
    transition: background .3s, border-color .3s
}

.ws2-t:nth-child(2) > i {
    background: #fff;
    border-color: #0D0D0D
}

.ws2-t.done > i, .ws2-t.on > i {
    background: #FFC600 !important;
    border-color: #FFC600 !important
}

.ws2-t.on {
    transform: translateY(-6px);
    border-color: #0D0D0D;
    box-shadow: 0 12px 28px rgba(13, 13, 13, .08)
}

.ws2-t .wt-v > * {
    transition: transform .4s
}

.ws2-t.on .wt-v > * {
    transform: scale(1.08)
}

.sp-lock {
    position: relative;
    height: 160px;
    display: grid;
    place-items: center
}

.sp-doc {
    width: 118px;
    height: 150px;
    background: #fff;
    border-radius: 8px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transform: rotate(-4deg);
    box-shadow: 0 10px 30px rgba(13, 13, 13, .12)
}

.sp-doc b {
    font-size: 10px
}

.sp-doc i {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: #e5e5e5;
    filter: blur(1.5px)
}

.sp-pad {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -30%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #FFC600;
    display: grid;
    place-items: center;
    animation: spPad 2.4s ease-in-out infinite
}

.sp-q2 {
    position: absolute;
    right: 6px;
    top: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    font-weight: 700;
    display: grid;
    place-items: center;
    transform: rotate(10deg)
}

@keyframes spPad {
    0%, 100% {
        transform: translate(-50%, -30%) rotate(0)
    }
    10% {
        transform: translate(-50%, -30%) rotate(-10deg)
    }
    20% {
        transform: translate(-50%, -30%) rotate(10deg)
    }
    30% {
        transform: translate(-50%, -30%) rotate(0)
    }
}

@media (prefers-reduced-motion: reduce) {
    .sp-pad {
        animation: none
    }
}

/* Posten-Flow */
.spf {
    display: grid;
    grid-template-columns:1fr 140px 1.1fr;
    align-items: center
}

.spf-n {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px 22px;
    display: grid;
    gap: 12px
}

.spf-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b
}

.spf-job, .spf-mail {
    display: flex;
    gap: 12px;
    align-items: center;
    background: #f2f2f2;
    border-radius: 12px;
    padding: 12px 14px
}

.spf-job b, .spf-mail b {
    display: block;
    font-size: 15px
}

.spf-job small, .spf-mail small {
    font-size: 12.5px;
    color: #6b6b6b
}

.spf-ic, .spf-env {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 18px;
    flex: none
}

.spf-live {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: #1a8f4a;
    animation: recBl 1.6s step-end infinite
}

.spf-p {
    justify-self: start;
    font-weight: 700;
    font-size: 14px;
    border-radius: 999px;
    padding: 6px 14px;
    background: #f2f2f2
}

.spf-p.free {
    background: #FFC600
}

.spf-flow {
    position: relative;
    height: 2px;
    margin: 0 14px;
    background: repeating-linear-gradient(90deg, #c9c9c9 0 6px, transparent 6px 12px)
}

.spf-flow i {
    position: absolute;
    top: -5px;
    left: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #FFC600;
    animation: a2f 2.4s linear infinite
}

.spf-flow i:nth-child(2) {
    animation-delay: .8s
}

.spf-flow i:nth-child(3) {
    animation-delay: 1.6s
}

.spf-r {
    display: grid;
    gap: 10px
}

.spf-or {
    justify-self: center;
    font-size: 13px;
    color: #6b6b6b;
    position: relative;
    padding: 0 10px
}

.spf-opt {
    border-style: dashed;
    background: transparent
}

.spf-logos {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap
}

.spf-logos img {
    height: 20px;
    max-width: 90px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 6px 8px;
    box-sizing: content-box
}

.spf-logos span {
    background: #0D0D0D;
    color: #fff;
    border-radius: 8px;
    padding: 7px 10px;
    font-weight: 700;
    font-size: 13px
}

@media (max-width: 900px) {
    .spf {
        grid-template-columns:minmax(0, 1fr);
        gap: 16px
    }

    .spf-flow {
        display: none
    }
}

.pf3 fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 16px;
    min-width: 0
}

.pf3-steps {
    display: flex;
    gap: 6px
}

.pf3-steps span {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6b6b;
    padding-top: 8px;
    border-top: 3px solid #e5e5e5
}

.pf3-steps span.on {
    color: #0D0D0D;
    border-top-color: #FFC600
}

.two2 {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 12px
}

.pf3 textarea {
    width: 100%;
    font: 500 15px var(--sans);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1.5px solid var(--line);
    background: var(--bg);
    color: var(--fg);
    resize: vertical;
    box-sizing: border-box
}

.pf3-nav {
    display: flex;
    gap: 10px
}

@media (max-width: 600px) {
    .two2 {
        grid-template-columns:minmax(0, 1fr)
    }
}

.spf-opt .spf-p {
    background: #fff
}

/* Praktikum-Journey */
.jr {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px;
    max-width: 420px;
    justify-self: center;
    width: 100%;
    display: grid;
    gap: 18px;
    box-shadow: 0 20px 50px rgba(13, 13, 13, .06)
}

.jr-head {
    display: flex;
    gap: 12px;
    align-items: center
}

.jr-head b {
    display: block;
    font-size: 17px
}

.jr-head small {
    font-size: 13px;
    color: #6b6b6b
}

.jr-av {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-weight: 700
}

.jr-steps {
    display: grid;
    gap: 12px;
    position: relative
}

.jr-steps::before {
    content: "";
    position: absolute;
    left: 11px;
    top: 14px;
    bottom: 30px;
    width: 2px;
    background: #e5e5e5
}

.jr-s {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
    opacity: .35;
    animation: jrIn 4.8s ease var(--d) infinite
}

.jr-s > i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #0D0D0D;
    flex: none;
    z-index: 1
}

.jr-s div {
    background: #f2f2f2;
    border-radius: 12px;
    padding: 10px 14px;
    flex: 1
}

.jr-s small {
    display: block;
    font-size: 11.5px;
    color: #6b6b6b
}

.jr-s b {
    display: block;
    font-size: 15px
}

.jr-s span {
    font-size: 13px;
    color: #4a4a4a
}

.jr-s.on div {
    background: #FFF5CC
}

.jr-s.on > i {
    background: #FFC600;
    border-color: #FFC600
}

.jr-s em {
    position: absolute;
    right: 10px;
    top: 10px;
    font-style: normal;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #FFC600;
    display: grid;
    place-items: center;
    font-size: 12px
}

@keyframes jrIn {
    0% {
        opacity: .35
    }
    8%, 100% {
        opacity: 1
    }
}

.jr-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 14px;
    font-size: 14px;
    color: #6b6b6b
}

.jr-foot b {
    color: #0D0D0D;
    font-size: 16px
}

@media (prefers-reduced-motion: reduce) {
    .jr-s {
        animation: none;
        opacity: 1
    }
}

.bt-more {
    display: inline-flex;
    margin-top: 16px
}

.bt-app .bt-v.bt-v-ph {
    height: 330px
}

.bt-row .bt-v {
    background: #FFF5CC
}

.bt-sw {
    position: absolute;
    inset: 0;
    background: #fff;
    z-index: 5;
    padding-top: 44px;
    display: flex;
    flex-direction: column;
    animation: btSw 9s ease infinite
}

.bt-sw .app-top {
    padding: 6px 18px 10px
}

.bt-cards {
    position: relative;
    flex: 1;
    margin: 0 14px 14px
}

.bt-c {
    position: absolute;
    inset: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid #eee;
    display: flex;
    flex-direction: column
}

.bt-ph {
    flex: 1;
    background-size: cover;
    background-position: center
}

.bt-c b {
    font-size: 17px;
    padding: 10px 14px 0
}

.bt-c small {
    font-size: 13px;
    color: #6b6b6b;
    padding: 2px 14px 14px
}

.bt-c.c1 {
    animation: btCard 9s ease infinite;
    transform-origin: bottom center
}

.bt-like {
    position: absolute;
    right: 14px;
    top: 14px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 20px;
    opacity: 0;
    animation: btLike 9s ease infinite
}

.bt-match {
    position: absolute;
    left: 50%;
    top: 52%;
    transform: translate(-50%, -50%) scale(.6);
    background: #0D0D0D;
    color: #FFC600;
    font-weight: 700;
    font-size: 18px;
    border-radius: 999px;
    padding: 10px 18px;
    opacity: 0;
    animation: btMatch 9s ease infinite;
    z-index: 3;
    white-space: nowrap
}

@keyframes btSw {
    0%, 58% {
        transform: translateX(105%)
    }
    64%, 96% {
        transform: none
    }
    100% {
        transform: translateX(105%)
    }
}

@keyframes btCard {
    0%, 74% {
        transform: none;
        opacity: 1
    }
    84%, 100% {
        transform: translateX(130%) rotate(18deg);
        opacity: 0
    }
}

@keyframes btLike {
    0%, 70% {
        opacity: 0;
        transform: scale(.6)
    }
    74%, 84% {
        opacity: 1;
        transform: scale(1)
    }
    88%, 100% {
        opacity: 0
    }
}

@keyframes btMatch {
    0%, 84% {
        opacity: 0
    }
    87%, 95% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
    100% {
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .bt-sw, .bt-c.c1, .bt-like, .bt-match {
        animation: none
    }

    .bt-sw {
        display: none
    }
}

.bt-app .bt-v.bt-v-ph {
    height: 300px !important
}

.kv {
    display: flex;
    gap: 10px;
    align-items: center
}

.kv-ph {
    position: relative;
    width: 118px;
    height: 200px;
    border-radius: 14px;
    border: 4px solid #0D0D0D;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    color: #fff;
    font-size: 9px
}

.kv-ph::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3), transparent 25%, transparent 50%, rgba(0, 0, 0, .75))
}

.kv-top {
    position: absolute;
    top: 8px;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 1;
    font-weight: 600
}

.kv-b {
    position: absolute;
    left: 7px;
    right: 7px;
    bottom: 7px;
    z-index: 1;
    display: grid;
    gap: 2px
}

.kv-b b {
    font-size: 10px
}

.kv-b small {
    font-size: 7.5px;
    opacity: .9
}

.kv-b em {
    font-style: normal;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
    padding: 4px;
    margin-top: 3px;
    font-size: 8.5px
}

.kv-ic {
    display: grid;
    gap: 8px
}

.kv-ic img {
    width: 28px;
    height: 28px;
    border-radius: 8px
}

.wv2 {
    width: 190px;
    background: #fff;
    border-radius: 14px;
    border: 1px solid #e5e5e5;
    padding: 12px;
    display: grid;
    gap: 10px;
    position: relative
}

.wv2-h {
    display: flex;
    gap: 8px;
    align-items: center
}

.wv2-h i {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #FFC600;
    font-style: normal;
    font-weight: 700;
    font-size: 10px;
    display: grid;
    place-items: center
}

.wv2-h b {
    display: block;
    font-size: 11px;
    line-height: 1.25
}

.wv2-h small {
    display: block;
    font-size: 9px;
    line-height: 1.3;
    margin-top: 1px;
    color: #6b6b6b
}

.wv2-s {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 6px
}

.wv2-s span {
    background: #f2f2f2;
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 9px;
    color: #6b6b6b
}

.wv2-s b {
    display: block;
    font-size: 14px;
    color: #0D0D0D
}

.wv2-s .up {
    background: #FFF5CC
}

.wv2-g {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 3px
}

.wv2-g i {
    aspect-ratio: 3/4;
    border-radius: 3px;
    background: #e5e5e5
}

.wv2-g i.y {
    background: #FFC600
}

.wv2-t {
    position: absolute;
    top: -10px;
    right: -10px;
    background: #0D0D0D;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 10px
}

.bt-row .bt-v > * {
    zoom: 1
}

.kv-ph {
    height: 180px;
    width: 106px
}

.bt-app .bt-v.bt-v-ph {
    height: 280px !important
}

.bt-app .bt-v.bt-v-ph {
    height: 262px !important
}

/* App-Seite Schritt 2: Swipe-Animation */
.sw3:nth-child(2) .stack {
    position: relative
}

.sw3:nth-child(2) .stack .card {
    animation: swC 5s ease infinite;
    transform-origin: 50% 100%
}

.sw3:nth-child(2) .stack::after {
    content: "♥";
    position: absolute;
    left: 50%;
    top: 38%;
    transform: translate(-50%, -50%) scale(.5);
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    font-size: 28px;
    display: grid;
    place-items: center;
    opacity: 0;
    animation: swH 5s ease infinite;
    z-index: 5
}

@keyframes swC {
    0%, 10% {
        transform: none;
        opacity: 1
    }
    30% {
        transform: translateX(-10px) rotate(-3deg)
    }
    50% {
        transform: translateX(0) rotate(0)
    }
    62% {
        transform: translateX(30px) rotate(5deg)
    }
    76% {
        transform: translateX(140%) rotate(22deg);
        opacity: 0
    }
    77% {
        transform: translateY(20px) scale(.94);
        opacity: 0
    }
    90%, 100% {
        transform: none;
        opacity: 1
    }
}

@keyframes swH {
    0%, 56% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.5)
    }
    62%, 72% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1)
    }
    78%, 100% {
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .sw3:nth-child(2) .stack .card, .sw3:nth-child(2) .stack::after {
        animation: none
    }
}

.sw3 .rp-qa {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center
}

.sw3 .rp-qa .rp-seg {
    align-self: center
}

.tq figcaption i.tq-ph {
    background-size: cover !important;
    background-position: center;
    background-color: #e5e5e5 !important;
    width: 40px;
    height: 40px
}

.bt {
    padding: 20px 24px
}

.bt-row .bt-v {
    margin: -20px -24px -20px 0
}

.kv-ph {
    height: 166px;
    width: 98px
}

.bt-more {
    margin-top: 12px
}

.bento {
    gap: 14px
}

.hub {
    grid-template-columns:1fr 1fr;
    gap: 16px
}

.hub-col.l .hub-c::after, .hub-col.r .hub-c::after {
    display: none !important
}

.hub-c {
    grid-template-columns:230px 1fr !important
}

.hub-c .ft-v {
    min-height: 190px !important
}

.hub-c h3 {
    font-size: 18px !important
}

.hub-c p {
    font-size: 15px !important
}

.hub-c .ft-v:not(.hub-cvv2) > * {
    zoom: .85 !important
}

.hub-c .hub-cvv2 .mcv {
    zoom: 1.25
}

.hub-c {
    grid-template-rows:1fr auto 1fr
}

.hub-c .ft-v {
    grid-row: 1/4
}

.hub-c h3 {
    grid-row: 1;
    align-self: end !important;
    margin-top: 0 !important
}

.hub-c p {
    grid-row: 2
}

.bt-app .bt-v.bt-v-ph {
    height: 330px !important;
    margin-top: auto
}

.bt-app {
    padding-bottom: 0 !important
}

.bt-app .bt-v.bt-v-ph {
    height: 312px !important
}

/* Kampagnen-Handy realistisch */
.kv-fr {
    position: relative;
    display: block;
    padding: 4px;
    border-radius: 20px;
    background: linear-gradient(145deg, #2b2b2b, #0D0D0D 40%);
    box-shadow: inset 0 0 0 1px #3a3a3a
}

.kv-fr .kv-ph {
    border: 0 !important;
    border-radius: 16px;
    display: block
}

.kv-b1, .kv-b2 {
    position: absolute;
    width: 2px;
    background: #1f1f1f;
    border-radius: 2px
}

.kv-b1 {
    right: -2px;
    top: 28%;
    height: 14%
}

.kv-b2 {
    left: -2px;
    top: 22%;
    height: 10%
}

.kv-isl {
    position: absolute;
    top: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 9px;
    border-radius: 9px;
    background: #0D0D0D;
    z-index: 2
}

.kv-sb {
    position: absolute;
    top: 4px;
    left: 9px;
    font-size: 7px;
    font-weight: 600;
    z-index: 2
}

.kv-top {
    top: 20px !important
}

/* Problem-Abschnitt lebendiger */
.pg-bridge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    font-weight: 600;
    color: #0D0D0D;
    text-decoration: none
}

.pg-bridge span {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC600;
    animation: pgB 1.6s ease-in-out infinite
}

@keyframes pgB {
    50% {
        transform: translateY(4px)
    }
}

.pv-shrug {
    animation: pgPop 4s ease infinite
}

@keyframes pgPop {
    0%, 15% {
        opacity: 0;
        transform: translateY(6px) scale(.9)
    }
    25%, 90% {
        opacity: 1;
        transform: none
    }
    100% {
        opacity: 0
    }
}

.pv-chat .out {
    animation: pgPop 4s ease .6s infinite
}

.pf-stat {
    animation: pgBlink 3s ease infinite
}

@keyframes pgBlink {
    0%, 60%, 100% {
        opacity: 1
    }
    70%, 80% {
        opacity: .35
    }
}

.ib-r {
    animation: pgSlide 5s ease infinite
}

.ib-r:nth-child(3) {
    animation-delay: .3s
}

.ib-r:nth-child(4) {
    animation-delay: .6s
}

.ib-r:nth-child(5) {
    animation-delay: .9s
}

@keyframes pgSlide {
    0% {
        opacity: 0;
        transform: translateY(-8px)
    }
    10%, 100% {
        opacity: 1;
        transform: none
    }
}

.pain {
    transition: transform .25s
}

.pain:hover {
    transform: translateY(-4px)
}

@media (prefers-reduced-motion: reduce) {
    .pv-shrug, .pv-chat .out, .pf-stat, .ib-r, .pg-bridge span {
        animation: none
    }
}

.pgrid.pg5 {
    margin-top: 0
}

section .sec-head.sh2 {
    display: grid !important;
    grid-template-columns:1fr !important
}

section .sec-head.sh2 h2 {
    max-width: none;
    white-space: nowrap
}

@media (max-width: 1000px) {
    section .sec-head.sh2 h2 {
        white-space: normal
    }
}

/* Kampagnen-Seite neu */
.km-hero {
    background: var(--bg)
}

.km-vis .phone.tkp {
    width: 300px !important
}

.km-ic {
    position: absolute;
    right: 2%;
    top: 16%;
    display: grid;
    gap: 12px
}

.km-ic img {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .12)
}

.km-ic img:nth-child(2) {
    transform: translateX(-16px) rotate(-6deg)
}

.km-ic img:nth-child(1) {
    transform: rotate(8deg)
}

.km-v {
    display: grid !important;
    place-items: center
}

.km-search {
    display: grid;
    gap: 8px;
    justify-items: center
}

.km-sb {
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    color: #6b6b6b;
    width: 200px
}

.km-search small {
    font-size: 12px;
    color: #6b6b6b
}

.km-tl {
    width: 86%;
    display: grid;
    gap: 8px
}

.km-m {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #6b6b6b
}

.km-m .late {
    color: #0D0D0D;
    font-weight: 600
}

.km-bars {
    display: grid;
    gap: 6px
}

.km-bars i {
    font-style: normal;
    font-size: 11px;
    font-weight: 600;
    border-radius: 6px;
    padding: 6px 8px
}

.km-bars .soc {
    background: #FFC600;
    width: 100%
}

.km-bars .srch {
    background: #e5e5e5;
    margin-left: 50%;
    width: 50%;
    box-sizing: border-box
}

.km-chat {
    width: 80%
}

.km-flow {
    display: grid;
    grid-template-columns:1fr 36px 1fr 36px 1fr 36px 1fr;
    align-items: stretch
}

.km-n {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.km-n.on {
    background: #FFF5CC;
    border-color: #FFF5CC
}

.km-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b
}

.km-n b {
    font-size: 16px
}

.km-n small {
    font-size: 13px;
    color: #4a4a4a;
    margin-top: auto
}

.km-icons {
    display: flex;
    gap: 6px
}

.km-icons img {
    width: 34px;
    height: 34px;
    border-radius: 9px
}

.km-vid {
    height: 60px;
    border-radius: 10px;
    background: linear-gradient(160deg, #555, #111);
    display: grid;
    place-items: center;
    color: #fff
}

.km-vid span {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    display: grid;
    place-items: center;
    font-size: 12px
}

.km-qa {
    font-size: 12px;
    background: #f2f2f2;
    border-radius: 10px;
    padding: 10px;
    color: #6b6b6b
}

.km-qa u {
    text-decoration: none;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 2px 8px;
    font-weight: 600
}

.km-in {
    font-size: 14px;
    font-weight: 700;
    background: #fff;
    border-radius: 10px;
    padding: 10px
}

.km-ar {
    position: relative;
    align-self: center;
    height: 2px;
    margin: 0 6px;
    background: repeating-linear-gradient(90deg, #c9c9c9 0 5px, transparent 5px 10px)
}

.km-ar::after {
    content: "";
    position: absolute;
    right: -2px;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: #c9c9c9
}

.km-why {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 16px
}

.km-w {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.km-w i {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #f2f2f2;
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 20px;
    margin-bottom: 8px
}

.km-w.on {
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D
}

.km-w.on p {
    color: #d9d9d9
}

.km-w.on i {
    background: #FFC600;
    color: #0D0D0D
}

.km-w h3 {
    margin: 0
}

.km-w p {
    margin: 0;
    font-size: 14.5px;
    color: #4a4a4a
}

.km-qa3 {
    display: grid;
    grid-template-columns:1fr 1fr 220px 1fr 1fr;
    gap: 20px;
    align-items: center
}

.km-st {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 20px;
    display: grid;
    gap: 6px
}

.km-st.on {
    background: #FFF5CC;
    border-color: #FFF5CC
}

.km-sn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-bottom: 6px
}

.km-st.on .km-sn {
    background: #FFC600;
    color: #0D0D0D
}

.km-st small {
    font-size: 13px;
    color: #6b6b6b
}

.km-ph {
    padding: 0 !important;
    background: none
}

.km-ph .mph {
    max-width: 220px;
    margin: 0 auto
}

.km-reel {
    grid-template-columns:repeat(6, minmax(0, 1fr)) !important
}

@media (max-width: 1000px) {
    .km-flow {
        grid-template-columns:minmax(0, 1fr);
        gap: 10px
    }

    .km-ar {
        display: none
    }

    .km-why {
        grid-template-columns:1fr 1fr
    }

    .km-qa3 {
        grid-template-columns:1fr 1fr
    }

    .km-ph {
        grid-column: 1/-1
    }

    .km-reel {
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important
    }
}

@media (max-width: 560px) {
    .km-why, .km-qa3 {
        grid-template-columns:minmax(0, 1fr)
    }

    .km-ic {
        display: none
    }

    .km-reel {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }
}

.bt-more {
    margin-top: 14px
}

.hub-btn {
    justify-self: start;
    margin-top: 4px
}

/* echtes Mini-Handy in der Kampagnen-Kachel */
.kv-tk {
    display: block;
    width: 118px;
    height: 236px;
    overflow: visible
}

.kv-mini {
    width: 300px !important;
    zoom: .39
}

/* Problem-Karten: ganz weiß + Zahlen */
.pgrid.pg5 .pv {
    background: #fff !important;
    border-bottom: 1px solid var(--line)
}

.pgrid.pg5 .pain {
    background: #fff
}

.pg-st {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin: 16px 21px 0;
    padding: 0 0 14px;
    background: none;
    border-bottom: 1px solid #ececec;
    border-radius: 0
}

.pg-st b {
    font-size: 26px;
    white-space: nowrap;
    letter-spacing: -.02em;
    line-height: 1
}

.pg-st small {
    font-size: 11.5px;
    line-height: 1.3;
    color: #4a4a4a
}

.pgrid.pg5 .pain .q {
    margin-top: 10px
}

.pg-src {
    margin-top: 12px !important
}

.tk-cta {
    display: block
}

.bt-app .bt-v.bt-v-ph {
    height: 288px !important
}

/* Workshop-Teaser Startseite */
.wsx {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 56px;
    align-items: center
}

.wsx-t {
    display: grid;
    gap: 18px;
    justify-items: start
}

.wsx-t h2 {
    white-space: normal !important
}

.wsx-v {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 440px;
    background: #FFF5CC;
    border-radius: 24px
}

.wsx-prof {
    width: 320px;
    background: #fff;
    border-radius: 20px;
    border: 1px solid #e5e5e5;
    padding: 20px;
    display: grid;
    gap: 16px;
    box-shadow: 0 20px 50px rgba(13, 13, 13, .08)
}

.wsx-h {
    display: flex;
    gap: 12px;
    align-items: center
}

.wsx-h i {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #FFC600;
    font-style: normal;
    font-weight: 700;
    display: grid;
    place-items: center
}

.wsx-h b {
    display: block;
    font-size: 16px
}

.wsx-h small {
    font-size: 12.5px;
    color: #6b6b6b
}

.wsx-s {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 8px
}

.wsx-s span {
    background: #f2f2f2;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 11.5px;
    color: #6b6b6b
}

.wsx-s b {
    display: block;
    font-size: 18px;
    color: #0D0D0D
}

.wsx-s .y {
    background: #FFC600;
    color: #0D0D0D
}

.wsx-g {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 4px
}

.wsx-g i {
    aspect-ratio: 3/4;
    border-radius: 6px;
    background: #e5e5e5
}

.wsx-g i.y {
    background: linear-gradient(160deg, #FFC600, #e6b200)
}

.wsx-c {
    position: absolute;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(13, 13, 13, .08);
    animation: wsxF 4s ease-in-out infinite
}

.wsx-c.c1 {
    left: 4%;
    top: 16%
}

.wsx-c.c2 {
    right: 3%;
    bottom: 18%;
    animation-delay: 1s
}

.wsx-c.c3 {
    right: 6%;
    top: 9%;
    background: #0D0D0D;
    color: #fff;
    border-color: #0D0D0D;
    animation-delay: 2s
}

@keyframes wsxF {
    50% {
        transform: translateY(-6px)
    }
}

@media (max-width: 900px) {
    .wsx {
        grid-template-columns:minmax(0, 1fr)
    }

    .wsx-v {
        min-height: 380px
    }

    .wsx-prof {
        width: min(300px, 86%)
    }
}

@media (prefers-reduced-motion: reduce) {
    .wsx-c {
        animation: none
    }
}

.wsx-v {
    min-height: 400px
}

.wsx-c.c1 {
    left: 3%;
    top: auto;
    bottom: 30%
}

section.band:has(.bento) {
    padding-block: 40px !important
}

.bt-app .bt-v.bt-v-ph {
    height: 278px !important
}

.kv-tk {
    width: 106px;
    height: 216px
}

.kv-mini {
    zoom: .35 !important
}

section.band:has(.bento) .sec-head {
    margin-bottom: 22px !important
}

/* Kampagnen: weniger Folie, mehr Website */
.kp {
    display: grid;
    grid-template-columns:1.3fr 1fr;
    gap: 56px;
    align-items: center
}

.kp-tl {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 32px;
    display: grid;
    gap: 14px
}

.kp-row {
    display: grid;
    grid-template-columns:110px 1fr;
    align-items: center;
    gap: 12px
}

.kp-lab {
    font-size: 13px;
    font-weight: 600
}

.kp-track {
    position: relative;
    height: 30px;
    background: #f2f2f2;
    border-radius: 8px;
    overflow: hidden
}

.kp-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--from);
    width: 0;
    border-radius: 8px;
    animation: kpGrow 2.4s ease forwards
}

.kp-bar.soc {
    background: #FFC600
}

.kp-bar.srch {
    background: #c9c9c9;
    animation-delay: .8s
}

@keyframes kpGrow {
    to {
        width: calc(var(--to) - var(--from))
    }
}

.kp-months {
    display: grid;
    grid-template-columns:repeat(11, 1fr);
    margin-left: 122px;
    font-size: 11px;
    color: #6b6b6b
}

.kp-note {
    margin-top: 8px;
    font-size: 14px;
    color: #4a4a4a
}

.kp-note b {
    display: block;
    font-size: 20px;
    color: #0D0D0D
}

.kp-list, .kw2-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid
}

.kp-list li, .kw2-list li {
    display: flex;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line)
}

.kp-list li:first-child, .kw2-list li:first-child {
    border-top: 1px solid var(--line)
}

.kp-list i, .kw2-list i {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-style: normal;
    font-size: 18px;
    flex: none
}

.kp-list b, .kw2-list b {
    display: block;
    font-size: 17px;
    margin-bottom: 2px
}

.kp-list span, .kw2-list span {
    font-size: 14.5px;
    color: #4a4a4a
}

.kj {
    position: relative;
    padding-top: 10px
}

.kj-line {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 46px;
    height: 3px;
    background: repeating-linear-gradient(90deg, #d0d0d0 0 8px, transparent 8px 16px)
}

.kj-dot {
    position: absolute;
    top: -6px;
    left: 0;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #FFC600;
    box-shadow: 0 0 0 6px rgba(255, 198, 0, .25);
    animation: kjMove 5s ease-in-out infinite
}

@keyframes kjMove {
    0% {
        left: 0
    }
    90%, 100% {
        left: calc(100% - 15px)
    }
}

.kj-steps {
    display: grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 24px;
    position: relative
}

.kj-s {
    display: grid;
    justify-items: center;
    text-align: center;
    gap: 8px
}

.kj-v {
    height: 72px;
    min-width: 72px;
    padding: 0 14px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 10px
}

.kj-ic img {
    width: 30px;
    height: 30px;
    border-radius: 8px
}

.kj-play {
    background: #0D0D0D;
    color: #fff;
    font-size: 20px;
    width: 72px;
    padding: 0
}

.kj-qa {
    background: #f2f2f2
}

.kj-s.on .kj-v {
    background: #FFC600;
    border-color: #FFC600
}

.kj-s b {
    font-size: 18px
}

.kj-s > span:last-child {
    font-size: 14.5px;
    color: #4a4a4a;
    max-width: 24ch
}

.kw2 {
    display: grid;
    grid-template-columns:1fr 1.2fr;
    gap: 48px;
    align-items: center
}

.kw2-big {
    background: #0D0D0D;
    color: #fff;
    border-radius: 24px;
    padding: 40px;
    display: grid;
    gap: 6px
}

.kw2-k {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FFC600
}

.kw2-n {
    font-size: 72px;
    letter-spacing: -.03em;
    line-height: 1
}

.kw2-l {
    font-size: 16px;
    color: #d9d9d9
}

.kw2-big p {
    margin: 14px 0 0;
    color: #d9d9d9;
    font-size: 15px
}

.kq {
    display: grid;
    grid-template-columns:1fr 240px 1fr;
    gap: 40px;
    align-items: center
}

.kq-col {
    display: grid;
    gap: 60px
}

.kq-col.l {
    text-align: right;
    justify-items: end
}

.kq-a {
    display: grid;
    gap: 4px;
    position: relative;
    max-width: 260px
}

.kq-a b {
    font-size: 18px
}

.kq-a small {
    font-size: 14px;
    color: #6b6b6b
}

.kq-n {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    margin-bottom: 6px
}

.kq-a.on .kq-n {
    background: #FFC600;
    color: #0D0D0D
}

.kq-col.l .kq-a::after, .kq-col.r .kq-a::after {
    content: "";
    position: absolute;
    top: 18px;
    width: 30px;
    border-top: 2px dashed #c9c9c9
}

.kq-col.l .kq-a::after {
    right: -40px
}

.kq-col.r .kq-a::after {
    left: -40px
}

@media (max-width: 900px) {
    .kp, .kw2 {
        grid-template-columns:minmax(0, 1fr)
    }

    .kj-steps {
        grid-template-columns:1fr 1fr
    }

    .kj-line {
        display: none
    }

    .kq {
        grid-template-columns:minmax(0, 1fr)
    }

    .kq-col {
        gap: 20px
    }

    .kq-col.l {
        text-align: left;
        justify-items: start
    }

    .kq-a::after {
        display: none
    }

    .kp-months {
        margin-left: 0;
        font-size: 9px
    }
}

@media (prefers-reduced-motion: reduce) {
    .kp-bar {
        animation: none;
        width: calc(var(--to) - var(--from))
    }

    .kj-dot {
        animation: none
    }
}

/* Team-Ansprechpersonen */
.pn {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: 520px
}

.pn img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex: none;
    border: 3px solid #FFC600
}

.pn-b {
    display: grid;
    gap: 6px
}

.pn-b p {
    margin: 0;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px 18px 18px 18px;
    padding: 12px 16px;
    font-size: 15px;
    line-height: 1.45;
    color: #0D0D0D
}

.pn-b span {
    font-size: 13px;
    color: #6b6b6b
}

.pn-b b {
    color: #0D0D0D
}

.pn-faq {
    margin-top: 24px
}

.pn-row {
    display: flex;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    margin-top: 22px
}

.vz-fc {
    display: flex;
    align-items: center;
    gap: 8px
}

.vz-fc img {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover
}

.faq-head {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    flex-wrap: wrap
}

.faq-head .pn {
    max-width: 440px
}

.wx {
    display: grid !important;
    place-items: center;
    align-content: center;
    gap: 22px;
    padding: 28px
}

.wx-tog {
    position: relative;
    display: grid;
    grid-template-columns:1fr 1fr;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 4px;
    width: min(400px, 100%)
}

.wx-tog button {
    white-space: nowrap
}

.wx-tog button {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    padding: 9px 12px;
    border-radius: 999px;
    cursor: pointer;
    color: #6b6b6b;
    transition: color .3s
}

.wx-tog button.on {
    color: #0D0D0D
}

.wx-tog i {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: #FFC600;
    border-radius: 999px;
    transition: transform .45s cubic-bezier(.6, 0, .2, 1)
}

.wx.b .wx-tog i {
    transform: translateX(100%)
}

.wx-post {
    display: grid;
    grid-template-columns:150px minmax(0, 230px);
    gap: 18px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 20px;
    padding: 16px;
    box-shadow: 0 20px 50px rgba(13, 13, 13, .08)
}

.wx-vid {
    position: relative;
    aspect-ratio: 9/16;
    border-radius: 14px;
    background: linear-gradient(170deg, #5c5c5c, #1d1d1d);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 12px;
    transition: background .5s
}

.wx.b .wx-vid {
    background: linear-gradient(170deg, #e0b300, #7a5d00 70%, #2a2000)
}

.wx-hook {
    position: absolute;
    left: 10px;
    right: 10px;
    top: 30%;
    background: #fff;
    color: #0D0D0D;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.25;
    padding: 6px 8px;
    border-radius: 6px;
    text-align: center;
    transition: opacity .25s
}

.wx-who {
    color: #fff;
    font-size: 11.5px;
    font-weight: 600
}

.wx-m {
    display: grid;
    gap: 12px;
    align-content: center
}

.wx-r small {
    display: block;
    font-size: 12px;
    color: #6b6b6b
}

.wx-r b {
    display: block;
    font-size: 24px;
    line-height: 1.1;
    transition: opacity .25s
}

.wx-r em {
    display: block;
    height: 6px;
    background: #f2f2f2;
    border-radius: 3px;
    margin-top: 5px;
    overflow: hidden
}

.wx-r u {
    display: block;
    height: 100%;
    width: var(--w);
    background: #d4d4d4;
    border-radius: 3px;
    transition: width .8s cubic-bezier(.4, 0, .2, 1), background .4s
}

.wx.b .wx-r u {
    background: #0D0D0D
}

.wx.b .wx-r.y u {
    background: #FFC600
}

.wx-note {
    margin: 0;
    font-size: 13px;
    color: #6b6b6b;
    transition: opacity .25s
}

.wx .sw {
    opacity: 0
}

@media (max-width: 600px) {
    .wx-post {
        grid-template-columns:110px minmax(0, 1fr);
        gap: 12px
    }

    .wx-r b {
        font-size: 20px
    }
}

.kj2 {
    padding-top: 6px
}

.kj2 .kj-line {
    left: 12.5%;
    right: 12.5%;
    top: 80px;
    height: 3px;
    background: repeating-linear-gradient(90deg, #d0d0d0 0 8px, transparent 8px 16px);
    z-index: 0
}

.kj2 .kj-line u {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--p, 0%);
    background: #FFC600;
    border-radius: 2px;
    transition: width .9s cubic-bezier(.4, 0, .2, 1)
}

.kj2 .kj-dot {
    animation: none;
    left: var(--p, 0%);
    margin-left: -7px;
    transition: left .9s cubic-bezier(.4, 0, .2, 1)
}

.kj2 .kj-steps {
    gap: 28px;
    align-items: start
}

.kj2 .kj-s {
    gap: 6px;
    justify-items: center;
    text-align: center
}

.kj-card {
    width: 100%;
    max-width: 230px;
    height: 160px;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 18px;
    padding: 16px;
    display: grid;
    place-items: center;
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
    transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .45s, border-color .45s
}

.kj2 .kj-s.on .kj-card {
    transform: translateY(-8px);
    box-shadow: 0 22px 44px rgba(13, 13, 13, .10);
    border-color: #FFC600
}

.kj2 .kj-s small {
    font-size: 12px;
    font-weight: 700;
    color: #9a9a9a;
    letter-spacing: .08em
}

.kj2 .kj-s.on small {
    color: #0D0D0D
}

.kj2 .kj-s b {
    font-size: 18px
}

.kj2 .kj-s > span:last-child {
    font-size: 14.5px;
    color: #4a4a4a;
    max-width: 25ch;
    line-height: 1.5
}

.kj2 .kj-s.on .kj-v {
    background: none
}

.kj-card {
    align-content: center;
    gap: 10px
}

.kc-ic {
    display: flex;
    gap: 8px
}

.kc-ic img {
    width: 34px;
    height: 34px;
    border-radius: 9px
}

.kc-pill {
    background: #FFF5CC;
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    font-weight: 700
}

.kc-pin {
    font-size: 12px;
    color: #6b6b6b
}

.kc-vid {
    position: relative;
    width: 76px;
    height: 126px;
    border-radius: 12px;
    background: linear-gradient(170deg, #e0b300, #6e5300);
    overflow: hidden;
    display: grid;
    place-items: center
}

.kc-play {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: grid;
    place-items: center;
    font-size: 12px;
    padding-left: 2px
}

.kc-cap {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 12px;
    background: #fff;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 700;
    padding: 3px
}

.kc-vid em {
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: 8px;
    height: 3px;
    background: rgba(255, 255, 255, .35);
    border-radius: 2px
}

.kc-vid em u {
    display: block;
    height: 100%;
    width: 0;
    background: #fff;
    border-radius: 2px
}

.kj-s.on .kc-vid em u {
    animation: kcBar 1.8s linear forwards
}

@keyframes kcBar {
    to {
        width: 100%
    }
}

.kc-form {
    display: grid;
    gap: 7px;
    width: 100%
}

.kc-form i {
    font-style: normal;
    font-size: 12px;
    color: #8a8a8a;
    text-align: left;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    padding: 7px 10px
}

.kc-form span {
    background: #0D0D0D;
    color: #fff;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px
}

.kj-s.on .kc-form span {
    background: #FFC600;
    color: #0D0D0D
}

.kc-in {
    display: grid;
    gap: 7px;
    width: 100%
}

.kc-in p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    opacity: .35;
    transform: translateX(8px);
    transition: opacity .4s, transform .4s
}

.kc-in i {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #f2f2f2;
    font-style: normal;
    font-size: 10px;
    display: grid;
    place-items: center;
    flex: none
}

.kc-in em {
    margin-left: auto;
    font-style: normal;
    font-size: 10.5px;
    background: #FFF5CC;
    border-radius: 999px;
    padding: 2px 8px
}

.kj-s.on .kc-in p {
    opacity: 1;
    transform: none
}

.kj-s.on .kc-in p:nth-child(2) {
    transition-delay: .25s
}

.kj-s.on .kc-in p:nth-child(3) {
    transition-delay: .5s
}

@media (max-width: 900px) {
    .kj2 .kj-line {
        display: none
    }

    .kj-card {
        max-width: none;
        height: 150px
    }
}

.kq2 {
    display: grid;
    grid-template-columns:260px minmax(0, 460px);
    gap: 72px;
    justify-content: center;
    align-items: center
}

.kq-st {
    display: grid;
    gap: 18px
}

.kq-clock {
    display: flex;
    align-items: baseline;
    gap: 14px
}

.kq-clock small {
    font-size: 13px;
    color: #6b6b6b
}

.kq-clock b {
    font-size: 44px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    order: -1
}

.kq-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    position: relative
}

.kq-list::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    background: #d9d9d9
}

.kq-list li {
    display: grid;
    grid-template-columns:36px 1fr auto;
    gap: 16px;
    align-items: center;
    padding: 12px 16px 12px 0;
    position: relative;
    opacity: .45;
    transition: opacity .4s
}

.kq-list li.act, .kq-list li.seen {
    opacity: 1
}

.kq-list li.act div {
    background: #fff;
    box-shadow: 0 10px 26px rgba(13, 13, 13, .08)
}

.kq-list li div {
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border-radius: 14px;
    transition: background .4s, box-shadow .4s
}

.kq-list b {
    font-size: 17px
}

.kq-list small {
    font-size: 14px;
    color: #6b6b6b
}

.kq-list em {
    font-style: normal;
    font-size: 13px;
    font-weight: 600;
    color: #6b6b6b;
    font-variant-numeric: tabular-nums
}

.kq-list .kq-n {
    position: relative;
    z-index: 1;
    margin: 0;
    background: #cfcfcf;
    transition: background .4s
}

.kq-list li.seen .kq-n, .kq-list li.act .kq-n {
    background: #0D0D0D
}

.kq-list li.done.act .kq-n, .kq-list li.done.seen .kq-n {
    background: #FFC600;
    color: #0D0D0D
}

@media (max-width: 900px) {
    .kq2 {
        grid-template-columns:minmax(0, 1fr);
        gap: 28px
    }

    .kq2 .km-ph {
        justify-self: center
    }
}

.ff {
    grid-template-columns:260px minmax(0, 1fr) minmax(0, 380px);
    gap: 40px
}

.ff-r {
    display: contents
}

.ff-r > .ff-sw, .ff-r > .ff-list {
    grid-column: 2
}

.ff-sw {
    align-self: end;
    justify-self: start;
    margin: 0
}

.ff-list {
    align-self: start
}

.ff-vid {
    grid-row: 1/3
}

.ff-ch {
    grid-column: 3;
    grid-row: 1/3;
    margin: 0;
    max-width: none;
    background: #FFF5CC;
    border-radius: 22px;
    padding: 26px;
    align-self: center;
    display: grid;
    gap: 10px
}

.ff-big {
    display: flex;
    align-items: baseline;
    gap: 10px
}

.ff-big b {
    font-size: 52px;
    line-height: 1;
    letter-spacing: -.02em
}

.ff-big span {
    font-size: 14px;
    color: #6b6b6b
}

.ff[data-mode="top"] .ff-bf, .ff[data-mode="flop"] .ff-bt {
    display: none
}

.ff-ch svg {
    width: 100% !important;
    height: auto;
    max-height: none;
    background: #fff;
    border-radius: 14px;
    padding: 10px
}

@media (max-width: 900px) {
    .ff {
        grid-template-columns:minmax(0, 1fr) !important
    }

    .ff-r > *, .ff-ch, .ff-vid {
        grid-column: 1 !important;
        grid-row: auto
    }
}

.tools4 .tcard:last-child {
    grid-column: span 2
}

@media (min-width: 901px) {
    .g4to3 {
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important
    }

    .g3to2 {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        max-width: 880px
    }
}

@media (max-width: 900px) {
    .tools4 .tcard:last-child {
        grid-column: auto
    }
}

.wx-hook {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: max-content;
    max-width: 76%;
    font-size: 8px;
    line-height: 1.2;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    max-width: 56%;
    font-weight: 600
}

.kmv-grid {
    display: grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap: 14px
}

@media (max-width: 1100px) {
    .kmv-grid {
        grid-template-columns:repeat(3, minmax(0, 1fr))
    }
}

@media (max-width: 640px) {
    .kmv-grid {
        grid-template-columns:repeat(2, minmax(0, 1fr));
        gap: 10px
    }
}

.kmv {
    position: relative;
    margin: 0;
    aspect-ratio: 9/16;
    border-radius: 18px;
    overflow: hidden;
    background: #0D0D0D;
    box-shadow: 0 10px 26px rgba(13, 13, 13, .10)
}

.kmv video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.kmv::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, .78));
    pointer-events: none
}

.kmv figcaption {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 1;
    color: #fff;
    display: grid;
    gap: 3px
}

.kmv-t {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 4px
}

.kmv-t i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, .92);
    color: #0D0D0D;
    border-radius: 999px;
    padding: 2px 8px
}

.kmv-t i + i {
    background: #FFC600
}

.kmv b {
    font-size: 14px;
    line-height: 1.2;
    letter-spacing: -.01em
}

.kmv small {
    font-size: 12px;
    opacity: .85;
    line-height: 1.3
}

.kmv {
    cursor: pointer;
    transition: transform .2s
}

.kmv:hover {
    transform: translateY(-3px)
}

.kmv:focus-visible {
    outline: 3px solid #FFC600;
    outline-offset: 3px
}

.kmv-reach {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    background: rgba(13, 13, 13, .72);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 9px;
    backdrop-filter: blur(4px)
}

.kmv-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .28);
    backdrop-filter: blur(6px);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 15px;
    padding-left: 3px;
    opacity: 0;
    transition: opacity .2s
}

.kmv:hover .kmv-play, .kmv:focus-visible .kmv-play {
    opacity: 1
}

#mPoster.kmv-m {
    padding: 0;
    background: #0D0D0D;
    aspect-ratio: 9/16;
    min-height: 0
}

#mPoster.kmv-m video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block
}

.bento .bt-app .bt-badge {
    z-index: 10 !important
}

button.kt {
    --mx: 0px;
    --my: 0px
}

button.kt img, button.kt .kt-jj {
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .25s
}

button.kt:hover img, button.kt:hover .kt-jj {
    transform: translate(var(--mx), var(--my)) scale(1.1)
}

button.kt.sel:hover img, button.kt.sel:hover .kt-jj {
    transform: translate(var(--mx), calc(var(--my) - 10px)) scale(1.1)
}

@media (prefers-reduced-motion: reduce) {
    button.kt:hover img, button.kt:hover .kt-jj {
        transform: scale(1.06)
    }
}

@media (max-width: 700px) {
    .hub {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 14px !important
    }

    .hub-col {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 14px !important
    }

    .hub-c {
        display: grid !important;
        grid-template-columns:minmax(0, 1fr) !important;
        grid-template-rows:auto auto auto !important;
        min-height: 0 !important
    }

    .hub-c .ft-v {
        grid-row: auto !important;
        grid-column: auto;
        min-height: 160px !important;
        height: auto !important
    }

    .hub-c .ft-v > * {
        zoom: 1
    }

    .hub-c h3 {
        margin: 16px 20px 4px !important;
        align-self: start
    }

    .hub-c p {
        margin: 0 20px 18px !important
    }

    .cpop {
        display: none !important
    }
}

@media (min-width: 901px) {
    main [data-page] > section > .wrap, main [data-page] > header > .wrap {
        zoom: .92;
        max-width: 1261px !important;
        padding-inline: 26px !important
    }
}

@media (min-width: 901px) {
    main section:has(.wsx) > .wrap, main section:has(.ats2) > .wrap {
        zoom: .92;
        max-width: 1261px !important;
        padding-inline: 26px !important
    }

    .wsx-v.wx .wx-post {
        zoom: 1.2
    }

    .wsx-v.wx .wx-tog {
        zoom: 1.12 !important
    }

    .ats2 .a2-l {
        height: 84px
    }

    .ats2 {
        padding: 48px !important
    }
}

.pb {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 440px);
    gap: 64px;
    align-items: center
}

.pb-t {
    display: grid;
    gap: 18px;
    justify-items: start
}

.pb-t .lead {
    margin: 0;
    max-width: 52ch
}

.pb-s {
    background: #fff;
    border-radius: 24px;
    padding: 40px 36px;
    display: grid;
    gap: 12px;
    border: 1px solid var(--line)
}

.pb-s b {
    font-size: clamp(56px, 6vw, 84px);
    line-height: 1;
    letter-spacing: -.04em
}

.pb-s b::after {
    content: "";
    display: block;
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: #FFC600;
    margin-top: 18px
}

.pb-s span {
    font-size: 18px;
    color: #4a4a4a;
    line-height: 1.45
}

.pb-s small {
    font-size: 12px;
    color: #8a8a8a
}

@media (max-width: 900px) {
    .pb {
        grid-template-columns:minmax(0, 1fr);
        gap: 28px
    }

    .pb-s {
        padding: 28px 24px
    }
}

.pb-s b {
    white-space: nowrap;
    font-size: clamp(48px, 5vw, 72px) !important
}

.pb-f {
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: #6b6b6b;
    margin-bottom: -6px
}

section.teamband {
    background: #F2F2F2
}

.teamband .team .tm-ph {
    background: #FFF5CC !important
}

.teamband .team .tm-ph img {
    filter: grayscale(1) contrast(1.08) brightness(1.08) !important;
    mix-blend-mode: multiply
}

.teamband .team .tm:hover .tm-ph img {
    filter: none !important;
    mix-blend-mode: normal
}

.teamband .team .tm-ini, .teamband .team .tm-ini.t0, .teamband .team .tm-ini.t1, .teamband .team .tm-ini.t2 {
    background: #FFF5CC !important;
    color: #C9A400 !important
}

.tl {
    display: grid;
    gap: 28px
}

.tl-bar {
    position: relative;
    display: grid;
    grid-template-columns:repeat(6, 1fr)
}

.tl-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 9px;
    height: 2px;
    background: #d6d6d6
}

.tl-bar u {
    position: absolute;
    left: 0;
    top: 9px;
    height: 2px;
    background: #0D0D0D;
    width: var(--p, 0%);
    transition: width .6s cubic-bezier(.4, 0, .2, 1)
}

.tl-y {
    position: relative;
    z-index: 1;
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    display: grid;
    justify-items: start;
    gap: 12px;
    font: inherit;
    color: #8a8a8a
}

.tl-y i {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #F2F2F2;
    border: 2px solid #c9c9c9;
    transition: all .3s
}

.tl-y span {
    font-size: 17px;
    font-weight: 600;
    transition: color .3s
}

.tl-y.done i {
    border-color: #0D0D0D;
    background: #0D0D0D
}

.tl-y.on i {
    border-color: #0D0D0D;
    background: #FFC600;
    transform: scale(1.25)
}

.tl-y.on span, .tl-y.done span {
    color: #0D0D0D
}

.tl-y.last.on i {
    background: #FFC600
}

.tl-panes {
    position: relative;
    min-height: 220px
}

.tl-p {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    gap: 40px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 36px 40px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .45s, transform .45s;
    pointer-events: none
}

.tl-p.on {
    opacity: 1;
    transform: none;
    pointer-events: auto
}

.tl-big {
    font-size: clamp(64px, 7vw, 104px);
    font-weight: 700;
    letter-spacing: -.05em;
    line-height: 1;
    color: #0D0D0D
}

.tl-p h3 {
    font-size: 28px;
    letter-spacing: -.02em;
    margin: 0 0 8px
}

.tl-p p {
    margin: 0;
    font-size: 17px;
    color: #4a4a4a;
    max-width: 48ch;
    line-height: 1.5
}

.tl-tag {
    background: #FFF5CC;
    border-radius: 999px;
    padding: 10px 18px;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap
}

.tl-tag:empty {
    display: none
}

.tl-p.last {
    background: #FFC600;
    border-color: #FFC600
}

.tl-p.last .tl-big, .tl-p.last h3, .tl-p.last p {
    color: #0D0D0D
}

.tl-p.last h3 em {
    font-family: var(--serif, inherit);
    font-style: italic;
    font-weight: 400
}

.tl-p.last .btn {
    margin-top: 16px
}

.tl-logo {
    border: 2px dashed rgba(13, 13, 13, .35);
    border-radius: 14px;
    padding: 26px 30px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(13, 13, 13, .6)
}

@media (max-width: 900px) {
    .tl-bar {
        overflow-x: auto;
        grid-template-columns:repeat(6, minmax(70px, 1fr))
    }

    .tl-panes {
        min-height: 330px
    }

    .tl-p {
        grid-template-columns:minmax(0, 1fr);
        gap: 14px;
        padding: 26px 22px;
        align-content: start
    }

    .tl-logo {
        display: none
    }
}

.tl-bar::before {
    right: calc(100% / 6 - 20px)
}

.tl-p.last {
    background: #FFF5CC;
    border-color: #FFF5CC
}

.tl-logo {
    background: #fff
}

.teamband .team .tm-ph img, .teamband .team .tm:hover .tm-ph img {
    filter: none !important;
    mix-blend-mode: normal !important
}

.teamband .team .tm:hover .tm-ph img {
    transform: scale(1.03)
}

.story {
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr) !important;
    gap: 64px !important;
    align-items: center !important
}

.story > div {
    gap: 22px !important
}

.story .estab {
    display: none
}

.story .estab2 {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 14px
}

.estab2 div {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 26px 24px;
    display: grid;
    gap: 6px
}

.estab2 b {
    font-size: 44px;
    letter-spacing: -.04em;
    line-height: 1
}

.estab2 span {
    font-size: 15px;
    color: #6b6b6b
}

.estab2 div:first-child {
    background: #FFF5CC;
    border-color: #FFF5CC
}

@media (max-width: 900px) {
    .story {
        grid-template-columns:minmax(0, 1fr) !important;
        gap: 28px !important
    }

    .estab2 b {
        font-size: 34px
    }
}

section.band:has(.story) {
    min-height: 0 !important;
    padding-block: 96px !important
}

section.teamband {
    background: #fff !important;
    padding-top: 120px !important
}

@media (min-width: 901px) {
    .team .tm-x {
        grid-column: span 2
    }
}

.tm-x .tm-ph {
    aspect-ratio: auto;
    height: 100%;
    min-height: 180px;
    display: flex !important;
    align-items: center;
    gap: 22px;
    padding: 26px 28px;
    background: #FFF5CC !important;
    text-decoration: none;
    color: #0D0D0D;
    border-radius: 20px
}

.tm-sil {
    display: flex;
    flex: none
}

.tm-sil i {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #FFF5CC;
    margin-left: -14px;
    position: relative;
    overflow: hidden
}

.tm-sil i:first-child {
    margin-left: 0
}

.tm-sil i::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 12px;
    width: 18px;
    height: 18px;
    margin-left: -9px;
    border-radius: 50%;
    background: #E3CF86
}

.tm-sil i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 34px;
    width: 34px;
    height: 30px;
    margin-left: -17px;
    border-radius: 50%;
    background: #E3CF86
}

.tm-xt {
    display: grid;
    gap: 4px
}

.tm-xt b {
    font-size: 20px
}

.tm-xt small {
    font-size: 14px;
    color: #6b6b6b;
    line-height: 1.4
}

.tm-job .tm-ph {
    background: #fff !important;
    border: 2px dashed #E3CF86
}

.tm-plus {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #FFC600;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 600;
    flex: none
}

.tm-job .tm-ph:hover {
    border-color: #FFC600
}

.team .tm-x .tm-ph {
    opacity: 1;
    filter: none
}

.team .tm-x .tm-xt b {
    color: #0D0D0D;
    font-weight: 700
}

.team .tm-x .tm-xt small {
    color: #4a4a4a
}

.team .tm-x .tm-plus {
    font-size: 28px;
    color: #0D0D0D;
    line-height: 1
}

.team .tm-job .tm-ph {
    background: #fff !important;
    border: 2px dashed #E3CF86
}

section.band:has(.story) {
    background: #F2F2F2 !important
}

.tlband .tl-y i {
    background: #fff
}

.pg-bridge span {
    flex: 0 0 28px;
    line-height: 0
}

.pg-bridge span svg {
    display: block
}

.kt-more b {
    font-size: 22px;
    white-space: nowrap
}

@media (max-width: 600px) {
    .kt-more b {
        font-size: 17px
    }

    .kt-more span {
        font-size: 11px
    }
}

.tk-av {
    background: #FFC600 url(assets/1fdbcaae0c02.png) center/cover no-repeat;
    font-size: 0 !important
}

.kb-tags {
    gap: 8px;
    margin: 22px 0 22px
}

.kb-tags span {
    border: 0;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    background: #F2F2F2;
    font-size: 13px;
    font-weight: 500;
    color: #4a4a4a !important;
    cursor: default;
    user-select: none;
    pointer-events: none
}

@media (max-width: 600px) {
    .kt-more b {
        white-space: normal;
        font-size: 16px;
        line-height: 1.1
    }

    .kt-more span {
        font-size: 10.5px;
        line-height: 1.2
    }
}

.pb-l {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    counter-reset: pb;
    width: 100%;
    max-width: 600px
}

.pb-l li {
    counter-increment: pb;
    display: grid;
    grid-template-columns:30px 1fr;
    column-gap: 14px;
    row-gap: 2px;
    padding: 14px 0;
    border-top: 1px solid var(--line)
}

.pb-l li:last-child {
    border-bottom: 1px solid var(--line)
}

.pb-l li::before {
    content: counter(pb);
    grid-row: 1/3;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FFC600;
    color: #0D0D0D;
    font-weight: 700;
    font-size: 13px;
    display: grid;
    place-items: center;
    margin-top: 1px
}

.pb-l b {
    font-size: 17px;
    letter-spacing: -.01em
}

.pb-l span {
    font-size: 15px;
    color: #6b6b6b;
    line-height: 1.45
}

.pb-t {
    gap: 16px
}

.bento .bt-app .bt-v.bt-v-ph {
    height: 280px !important;
    flex: none;
    padding-top: 22px;
    overflow: hidden
}

.bento .bt-app {
    display: flex;
    flex-direction: column
}

.pb {
    grid-template-columns:minmax(0, 1fr)
}

.pb-l li {
    align-content: start
}

.pb-l {
    max-width: none;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap: 48px
}

.pb-l li:nth-last-child(2) {
    border-bottom: 1px solid var(--line)
}

@media (max-width: 760px) {
    .pb-l {
        grid-template-columns:1fr
    }

    .pb-l li:nth-last-child(2) {
        border-bottom: 0
    }
}

.hub.hub6 {
    display: grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch
}

.hub6 .hub-c {
    grid-template-columns:minmax(0, 1fr) !important;
    grid-template-rows:auto auto 1fr !important;
    min-height: 0 !important
}

.hub6 .hub-c .ft-v {
    grid-row: 1 !important;
    grid-column: 1 !important;
    height: 150px !important;
    min-height: 0 !important;
    max-height: 150px;
    overflow: hidden;
    border-radius: inherit;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.hub6 .hub-c .ft-v:not(.hub-cvv2) > * {
    zoom: .72 !important
}

.hub6 .hub-c .ft-v.vq > * {
    zoom: 1 !important
}

.hub6 .hub-c h3 {
    grid-row: 2;
    margin: 14px 18px 4px !important;
    font-size: 16.5px !important;
    align-self: start !important
}

.hub6 .hub-c p {
    grid-row: 3;
    margin: 0 18px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.5
}

.vq-c {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 26px rgba(13, 13, 13, .08);
    padding: 10px 12px;
    display: grid;
    gap: 5px;
    width: 210px
}

.vq-h {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 2px
}

.vq-h b {
    font-size: 11px
}

.vq-ok {
    font-size: 9.5px;
    font-weight: 700;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 2px 7px;
    white-space: nowrap
}

.vq-r {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    color: #4a4a4a
}

.vq-r i {
    font-style: normal;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #FFC600;
    font-size: 8px;
    display: grid;
    place-items: center;
    flex: none
}

@media (max-width: 900px) {
    .hub.hub6 {
        grid-template-columns:minmax(0, 1fr) !important
    }
}

.hub6 .hub-c .ft-v {
    height: 130px !important;
    max-height: 130px
}

.hub6 .hub-c h3 {
    margin-top: 12px !important
}

.hub6 .hub-c p {
    margin-bottom: 14px !important
}

.pb-t {
    width: 100%
}

.pb-l {
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: none !important
}

.pb-l li, .pb-l li:last-child, .pb-l li:nth-last-child(2) {
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    background: #fff;
    border: 1px solid var(--line) !important;
    border-radius: 20px;
    padding: 22px 20px 22px !important
}

.pb-l li::before {
    margin: 0 0 10px;
    width: 32px;
    height: 32px;
    font-size: 14px
}

.pb-l b {
    font-size: 17px !important;
    line-height: 1.25
}

.pb-l span {
    font-size: 14.5px
}

.pb-t > .lead {
    margin-bottom: 6px !important
}

@media (max-width: 1000px) {
    .pb-l {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }
}

@media (max-width: 600px) {
    .pb-l {
        grid-template-columns:minmax(0, 1fr) !important
    }

    .pb-l li {
        padding: 16px 18px !important
    }
}

.wsx {
    align-items: end !important
}

.wsx-t {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 34px 34px;
    gap: 16px !important;
    align-self: end
}

@media (max-width: 900px) {
    .wsx-t {
        padding: 24px 20px
    }
}

.pb-l li::before {
    display: none;
    content: none
}

.pb-l li, .pb-l li:last-child, .pb-l li:nth-last-child(2) {
    border: 1px solid var(--line) !important;
    padding: 24px 22px !important;
    gap: 8px !important
}

.pb-l b {
    font-size: 18px !important
}

.kmv-grid.kmv-scroll {
    display: grid !important;
    grid-auto-flow: column;
    grid-template-columns:none;
    grid-auto-columns: calc((100% - 56px) / 5);
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 2px 30px;
    margin: -6px -2px -20px
}

.kmv-scroll::-webkit-scrollbar {
    display: none
}

.kmv-scroll .kmv {
    scroll-snap-align: start
}

.kmv-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 14px
}

.kmv-arr {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: #fff;
    color: #0D0D0D;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: background .2s, border-color .2s
}

.kmv-arr:hover {
    background: #FFC600;
    border-color: #FFC600
}

@media (max-width: 1100px) {
    .kmv-grid.kmv-scroll {
        grid-auto-columns: calc((100% - 28px) / 3)
    }
}

@media (max-width: 640px) {
    .kmv-grid.kmv-scroll {
        grid-auto-columns: 44%;
        gap: 10px
    }
}

.lg-wrap {
    max-width: 860px
}

.lg-h1 {
    font-size: clamp(36px, 4.5vw, 56px);
    margin: 10px 0 18px
}

.lg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    position: sticky;
    top: 72px;
    z-index: 5;
    background: #fff;
    padding: 10px 0 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line)
}

.lg-tabs button {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid var(--line);
    background: #fff;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer
}

.lg-tabs button:hover {
    border-color: #0D0D0D
}

.lg-sec {
    padding: 34px 0 10px;
    scroll-margin-top: 140px;
    border-bottom: 1px solid var(--line)
}

.lg-sec:last-child {
    border-bottom: 0
}

.lg-sec h2 {
    font-size: 30px;
    margin: 0 0 14px
}

.lg-sec h3 {
    font-size: 19px;
    margin: 26px 0 8px
}

.lg-sec h4 {
    font-size: 16px;
    margin: 20px 0 6px
}

.lg-sec p, .lg-sec li {
    font-size: 15px;
    line-height: 1.65;
    color: #3a3a3a;
    margin: 0 0 10px;
    overflow-wrap: anywhere
}

.lg-sec ul {
    margin: 0 0 10px;
    padding-left: 4px;
    list-style: none
}

.lg-sec a {
    color: #0D0D0D;
    text-decoration: underline;
    text-decoration-color: #FFC600;
    text-underline-offset: 3px
}

footer .legal nav a {
    color: inherit;
    text-decoration: none
}

footer .legal nav a:hover {
    text-decoration: underline
}

@media (max-width: 640px) {
    .lg-tabs {
        top: 60px
    }

    .lg-sec h2 {
        font-size: 24px
    }
}

#modal.kmv-open .kpis {
    display: none !important
}

#modal.kmv-open .note {
    font-size: 16px;
    color: #4a4a4a;
    line-height: 1.55;
    margin: 0
}

.kmv-t {
    display: block !important;
    margin-bottom: 2px;
    font-size: 0
}

.kmv-t i, .kmv-t i + i {
    display: inline !important;
    background: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: #FFC600 !important;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase
}

.kmv-t i + i::before {
    content: " · ";
    color: rgba(255, 255, 255, .7)
}

.kmv b {
    font-size: 16px !important
}

.kmv small {
    font-size: 12.5px
}

.kmv-t i + i {
    display: none !important
}

.kmv-t i {
    color: #FFC600 !important
}

.kmv::after {
    background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .55) 68%, rgba(0, 0, 0, .88))
}

.kmv figcaption {
    bottom: 14px;
    left: 14px;
    right: 14px
}

.kp.kp2 {
    grid-template-columns:minmax(0, 1fr)
}

.kp2 .kp-tl {
    padding: 36px 40px;
    gap: 22px
}

.kp-chart {
    position: relative;
    padding-top: 104px;
    display: grid;
    gap: 14px;
    --off: 122px
}

.kp2 .kp-track {
    height: 38px;
    border-radius: 10px
}

.kp2 .kp-lab {
    font-size: 14px
}

.kp2 .kp-months {
    font-size: 12px
}

.kp-pin {
    position: absolute;
    top: 0;
    left: calc(var(--off) + (100% - var(--off)) * var(--x));
    width: 230px;
    font-size: 13px;
    line-height: 1.45;
    color: #4a4a4a;
    padding-left: 12px;
    border-left: 2px solid #c9c9c9
}

.kp-pin b {
    display: block;
    font-size: 14px;
    color: #0D0D0D;
    margin-bottom: 2px
}

.kp-pin.y {
    border-left-color: #FFC600
}

.kp-vl {
    position: absolute;
    top: 80px;
    bottom: 22px;
    left: calc(var(--off) + (100% - var(--off)) * var(--x));
    width: 2px;
    background: repeating-linear-gradient(#c9c9c9 0 4px, transparent 4px 8px);
    z-index: 2;
    pointer-events: none
}

.kp-vl.y {
    background: repeating-linear-gradient(#e0ad00 0 4px, transparent 4px 8px)
}

.kp-pin[style*=".818"] {
    width: 200px
}

.kp2 .kp-note {
    display: flex;
    gap: 14px;
    align-items: baseline;
    flex-wrap: wrap;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin-top: 4px
}

.kp2 .kp-note b {
    display: inline;
    font-size: 18px
}

@media (max-width: 900px) {
    .kp-chart {
        padding-top: 0;
        --off: 0px
    }

    .kp-pin {
        position: static;
        width: auto;
        margin-bottom: 4px
    }

    .kp-vl {
        display: none
    }

    .kp2 .kp-tl {
        padding: 22px 18px
    }
}

.kp-foot {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 40px;
    align-items: center;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-top: 4px
}

.kp2 .kp-foot .kp-note {
    border: 0;
    padding: 0;
    margin: 0;
    border-left: 1px solid var(--line) !important;
    padding-left: 40px !important
}

.kp-stat {
    display: flex;
    align-items: center;
    gap: 14px
}

.kp-stat b {
    font-size: 44px;
    letter-spacing: -.04em;
    line-height: 1
}

.kp-stat span {
    font-size: 15px;
    color: #4a4a4a;
    line-height: 1.35;
    max-width: 150px
}

.kp-stat small {
    display: block;
    font-size: 11px;
    color: #8a8a8a;
    margin-top: 3px
}

@media (max-width: 900px) {
    .kp-foot {
        grid-template-columns:1fr;
        gap: 16px
    }

    .kp2 .kp-foot .kp-note {
        border-left: 0 !important;
        padding-left: 0 !important
    }
}

.kp-bar.top {
    background: #0D0D0D
}

.kp-bar.todo {
    background: repeating-linear-gradient(135deg, #e6e6e6 0 8px, #f4f4f4 8px 16px);
    display: flex;
    align-items: center;
    padding-left: 14px;
    overflow: hidden
}

.kp-bar.todo em {
    font-style: normal;
    font-size: 12.5px;
    font-weight: 600;
    color: #6b6b6b;
    white-space: nowrap
}

.kp-pin.d {
    border-left-color: #0D0D0D
}

.kp-vl.d {
    background: repeating-linear-gradient(#0D0D0D 0 4px, transparent 4px 8px)
}

.kp-chart {
    padding-top: 96px !important
}

.kp2 .kp-track {
    height: 34px
}

.kp-bar.todo {
    padding-left: calc(37.6% + 14px)
}

.kp-pin.d {
    width: 250px
}

.kq2[data-s="2"] .qa3 {
    opacity: 1
}

.qa3 .q3-pg2 {
    display: none
}

.qa3.pg2 .q3-pg1 {
    display: none
}

.qa3.pg2 .q3-pg2 {
    display: flex
}

.q3-pg {
    display: flex;
    flex-direction: column;
    gap: 7px
}

.q3-f {
    transition: border-color .2s
}

.q3-f:not(.on) em {
    display: none
}

.q3-f span {
    min-height: 11px;
    display: block
}

.q3-v {
    font-weight: 500
}

.q3-chk i {
    background: #fff;
    border: 1px solid #c9c9c9;
    color: transparent !important;
    transition: all .2s
}

.q3-chk.ok i {
    background: #0D0D0D !important;
    border-color: #0D0D0D;
    color: #fff !important
}

.q3-chk.ok i::after {
    content: "✓"
}

.q3-lb {
    font-size: 7px;
    font-weight: 600;
    color: #0D0D0D;
    margin-top: 2px
}

.q3-ch {
    display: flex;
    flex-wrap: wrap;
    gap: 4px
}

.q3-ch span {
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    padding: 4px 8px;
    font-size: 7.5px;
    transition: all .2s
}

.q3-ch span.sel {
    background: #FFC600;
    border-color: #FFC600;
    font-weight: 600
}

.q3-hint {
    font-size: 6.5px;
    color: #6b6b6b;
    margin-top: 4px
}

.q3-btn {
    transition: transform .15s, background .2s
}

.q3-btn.press {
    transform: scale(.95);
    background: #e6b200
}

.qa3 {
    position: absolute
}

.q3-tap {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: rgba(13, 13, 13, .25);
    box-shadow: 0 0 0 5px rgba(13, 13, 13, .08);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s, transform .2s;
    pointer-events: none;
    z-index: 4
}

.q3-tap.on {
    opacity: 1;
    transform: scale(1)
}

.kq-ff {
    font-size: 11px;
    font-weight: 600;
    color: #6b6b6b;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 9px;
    align-self: center
}

.kq-list li.act div {
    box-shadow: none;
    border: 1px solid var(--line)
}

.kq-list li div {
    border: 1px solid transparent
}

.kq2 .km-ph .mph {
    box-shadow: 0 10px 28px rgba(13, 13, 13, .10)
}

.portrait figcaption .pt-aw {
    display: inline-block;
    margin-top: 6px;
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 3px 9px;
    justify-self: start;
    width: max-content
}

.bk-fig {
    margin: 4px 0 0;
    position: relative;
    max-width: 440px;
    border-radius: 20px;
    overflow: hidden
}

.bk-fig img {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: 60% 35%
}

.bk-fig figcaption {
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    display: grid;
    font-size: 12px;
    color: #6b6b6b
}

.bk-fig figcaption b {
    font-size: 14px;
    color: #0D0D0D
}

.kp2 .kp-bar {
    animation: none !important;
    width: calc(var(--to) - var(--from)) !important
}

.kp2 .kp-track {
    isolation: isolate
}

.kp2 .kp-cov {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: calc(var(--p, 1) * 100%);
    background: #f2f2f2;
    z-index: 3;
    pointer-events: none
}

.kp2 .kp-chart {
    --p: 1;
    cursor: ew-resize;
    touch-action: pan-y;
    user-select: none
}

.kp-ph {
    position: absolute;
    left: calc(var(--off) + (100% - var(--off)) * var(--p));
    width: 2px;
    margin-left: -1px;
    background: #0D0D0D;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s
}

.kp-chart.kp-on .kp-ph {
    opacity: 1
}

.kp-ph span {
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: #0D0D0D;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap
}

.kp-ph::before {
    content: "";
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: #FFC600;
    border: 2px solid #0D0D0D
}

.kp2 .kp-months span {
    transition: color .2s, font-weight .2s
}

.kp2 .kp-months span.on {
    color: #0D0D0D;
    font-weight: 700
}

@media (min-width: 901px) {
    .kp2 .kp-pin, .kp2 .kp-vl {
        transition: opacity .45s ease, transform .45s ease
    }

    .kp2 .kp-chart.kp-on .kp-pin:not(.in) {
        opacity: 0;
        transform: translateY(8px)
    }

    .kp2 .kp-chart.kp-on .kp-vl:not(.in) {
        opacity: 0
    }
}

.kp2 .kp-stat b {
    display: inline-block;
    min-width: 2.15em;
    font-variant-numeric: tabular-nums
}

.kp-hint {
    font-size: 12px;
    color: #8a8a8a;
    justify-self: end;
    margin-top: -6px;
    display: flex;
    align-items: center;
    gap: 6px
}

@media (hover: none) {
    .kp-hint .hv {
        display: none
    }
}

@media (hover: hover) {
    .kp-hint .tc {
        display: none
    }
}

@media (max-width: 900px) {
    .kp2 .kp-chart {
        --off: 100px
    }

    .kp2 .kp-row {
        grid-template-columns:88px 1fr
    }

    .kp2 .kp-months {
        margin-left: 100px;
        font-size: 9px
    }

    .kp2 .kp-lab {
        font-size: 13px
    }
}

.aw-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-top: 22px;
    font-size: 13px;
    color: var(--muted)
}

.aw-i {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    color: #0D0D0D;
    font-size: 14px
}

.aw-i img {
    width: 40px;
    height: 40px;
    display: block
}

.aw-fb b {
    font-size: 14px;
    font-weight: 700
}

.aw-fb span {
    font-weight: 600
}

.aw-row .aw-i + .aw-i {
    padding-left: 28px;
    border-left: 1px solid var(--line)
}

@media (max-width: 600px) {
    .aw-row {
        gap: 12px 20px;
        flex-direction: column
    }

    .aw-row .aw-i + .aw-i {
        padding-left: 0;
        border-left: 0
    }
}

.aw-fb img {
    width: 46px;
    height: 46px;
    mix-blend-mode: multiply
}

.band:has(.pb) {
    min-height: 0 !important;
    padding-block: 72px !important
}

.band:has(.pb) .sec-head, .band:has(.bt-row) .sec-head:not(:has(.lead)), .band:has(.hub6) .sec-head:not(:has(.lead)) {
    margin-bottom: 52px !important
}

.hub6 .hub-c h3 {
    margin: 18px 22px 6px !important
}

.hub6 .hub-c p {
    margin: 0 22px 22px !important;
    line-height: 1.55
}

.wa-in {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    color: #0D0D0D;
    white-space: nowrap;
    vertical-align: -3px
}

.wa-in img {
    width: 18px;
    height: 18px
}

/* bento app phone: swipe first, then Bewerbermappe */
@keyframes btSw2 {
    0%, 30% {
        transform: none
    }
    35%, 94.9% {
        transform: translateX(-105%)
    }
    95% {
        transform: translateX(105%)
    }
    100% {
        transform: none
    }
}

@keyframes btCard2 {
    0%, 18% {
        transform: none;
        opacity: 1
    }
    27%, 94.9% {
        transform: translateX(130%) rotate(18deg);
        opacity: 0
    }
    95%, 100% {
        transform: none;
        opacity: 1
    }
}

@keyframes btLike2 {
    0%, 9% {
        opacity: 0;
        transform: scale(.6)
    }
    13%, 21% {
        opacity: 1;
        transform: scale(1)
    }
    25%, 100% {
        opacity: 0;
        transform: scale(.6)
    }
}

@keyframes btRpProg {
    0%, 76% {
        width: 25%
    }
    82%, 100% {
        width: 50%
    }
}

@keyframes btRpSel {
    0%, 39% {
        background: #fff;
        border-color: #E2E2E2;
        font-weight: 400
    }
    41%, 100% {
        background: #FFC600;
        border-color: #FFC600;
        font-weight: 600
    }
}

@keyframes btRpType {
    0%, 42% {
        max-width: 0
    }
    55%, 100% {
        max-width: 170px
    }
}

@keyframes btRpIn3 {
    0%, 57% {
        opacity: 0;
        transform: translateY(6px)
    }
    60%, 100% {
        opacity: 1;
        transform: none
    }
}

@keyframes btRpIn4 {
    0%, 64% {
        opacity: 0;
        transform: translateY(6px)
    }
    68%, 100% {
        opacity: 1;
        transform: none
    }
}

@keyframes btRpChk {
    0%, 72% {
        transform: scale(0)
    }
    76% {
        transform: scale(1.25)
    }
    78%, 100% {
        transform: scale(1)
    }
}

@keyframes btRpBtn {
    0%, 84% {
        transform: none
    }
    87% {
        transform: scale(.95)
    }
    90%, 100% {
        transform: none
    }
}

.bt-phone .bt-sw {
    animation: btSw2 9s ease infinite !important
}

.bt-phone .bt-c.c1 {
    animation: btCard2 9s ease infinite !important
}

.bt-phone .bt-like {
    animation: btLike2 9s ease infinite !important
}

.bt-phone.rp-anim .rp-prog i {
    animation: btRpProg 9s ease infinite !important
}

.bt-phone.rp-anim .rp-opts span.on {
    animation: btRpSel 9s ease infinite !important
}

.bt-phone.rp-anim .rp-type {
    animation: btRpType 9s steps(23) infinite, rpCaret .8s step-end infinite !important
}

.bt-phone.rp-anim .rp-a3 {
    animation: btRpIn3 9s ease infinite !important
}

.bt-phone.rp-anim .rp-a4 {
    animation: btRpIn4 9s ease infinite !important
}

.bt-phone.rp-anim .rp-a4 em {
    animation: btRpChk 9s ease infinite !important
}

.bt-phone.rp-anim .rp-fix {
    animation: btRpBtn 9s ease infinite !important
}

@media (prefers-reduced-motion: reduce) {
    .bt-phone * {
        animation: none !important
    }
}

@keyframes btRpScr {
    0%, 61% {
        transform: none
    }
    66%, 97% {
        transform: translateY(-110px)
    }
    100% {
        transform: none
    }
}

@keyframes btRpF3 {
    0%, 57% {
        opacity: 0
    }
    60%, 100% {
        opacity: 1
    }
}

@keyframes btRpF4 {
    0%, 64% {
        opacity: 0
    }
    68%, 100% {
        opacity: 1
    }
}

.bt-phone .rp-scroll > * {
    animation: btRpScr 9s ease infinite !important
}

.bt-phone .rp-scroll > .rp-row {
    animation: btRpScr 9s ease infinite, btRpF3 9s ease infinite !important
}

.bt-phone .rp-scroll > .rp-up {
    animation: btRpScr 9s ease infinite, btRpF4 9s ease infinite !important
}

.bt-phone .rp-scroll > .rp-in .rp-type {
    animation: btRpType 9s steps(23) infinite, rpCaret .8s step-end infinite !important
}

.wsx .wsx-t {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
    align-self: center;
    display: grid;
    gap: 22px;
    justify-items: start
}

.wsx .wsx-t .lead {
    font-size: 20px;
    line-height: 1.5;
    color: #3a3a3a;
    max-width: 480px
}

.wsx .wsx-t .checks {
    display: grid;
    gap: 12px;
    margin: 0
}

.wsx .wsx-t .checks li {
    font-size: 16px
}

.ah2-vis .phone.rp {
    width: 330px !important;
    flex: none;
    max-width: none
}

.ah2-match {
    bottom: 9%;
    right: -24px
}

.ah2-prof {
    left: -40px
}

@media (max-width: 900px) {
    .ah2-vis .phone.rp {
        width: 280px !important
    }
}

@keyframes qaWv {
    0%, 100% {
        transform: scaleY(.35)
    }
    50% {
        transform: scaleY(1)
    }
}

@keyframes qaMic {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 198, 0, .55), 0 0 0 0 rgba(13, 13, 13, .08)
    }
    70% {
        box-shadow: 0 0 0 18px rgba(255, 198, 0, 0), 0 0 0 8px rgba(13, 13, 13, .06)
    }
    100% {
        box-shadow: 0 0 0 0 rgba(255, 198, 0, 0), 0 0 0 0 rgba(13, 13, 13, 0)
    }
}

@keyframes qaDot {
    50% {
        opacity: .25
    }
}

.sw3 .rp-rec .wave i {
    transform-origin: center;
    animation: qaWv .9s ease-in-out infinite
}

.sw3 .rp-rec .wave i:nth-child(6n+1) {
    animation-delay: -0.00s
}

.sw3 .rp-rec .wave i:nth-child(6n+2) {
    animation-delay: -0.13s
}

.sw3 .rp-rec .wave i:nth-child(6n+3) {
    animation-delay: -0.26s
}

.sw3 .rp-rec .wave i:nth-child(6n+4) {
    animation-delay: -0.39s
}

.sw3 .rp-rec .wave i:nth-child(6n+5) {
    animation-delay: -0.52s
}

.sw3 .rp-rec .wave i:nth-child(6n+6) {
    animation-delay: -0.65s
}

.sw3 .rp-mic {
    animation: qaMic 1.4s ease-out infinite
}

.sw3 .rp-tm::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #E5484D;
    margin-right: 6px;
    vertical-align: 1px;
    animation: qaDot 1s step-end infinite
}

@media (prefers-reduced-motion: reduce) {
    .sw3 .rp-rec .wave i, .sw3 .rp-mic, .sw3 .rp-tm::before {
        animation: none
    }
}

.sw3-anim .card {
    transition: none !important
}

.sw3-anim .card.sw3-under {
    animation: none !important;
    transform: translateY(14px) scale(.94);
    opacity: 1
}

@keyframes swC2 {
    0%, 10% {
        transform: none;
        opacity: 1
    }
    30% {
        transform: translateX(-10px) rotate(-3deg);
        opacity: 1
    }
    50% {
        transform: none;
        opacity: 1
    }
    62% {
        transform: translateX(30px) rotate(5deg);
        opacity: 1
    }
    76% {
        transform: translateX(140%) rotate(22deg);
        opacity: 0
    }
    77% {
        transform: translateY(14px) scale(.94);
        opacity: 0
    }
    90%, 100% {
        transform: none;
        opacity: 1
    }
}

@keyframes swL2 {
    0%, 52% {
        opacity: 0;
        transform: scale(.4)
    }
    58% {
        opacity: 1;
        transform: scale(1.08)
    }
    64%, 70% {
        opacity: 1;
        transform: scale(1)
    }
    76%, 100% {
        opacity: 0;
        transform: scale(.8)
    }
}

@keyframes swCh2 {
    0%, 56% {
        opacity: 0;
        transform: translateY(6px)
    }
    62%, 74% {
        opacity: 1;
        transform: none
    }
    80%, 100% {
        opacity: 0
    }
}

.sw3 .sw3-anim .card.sw3-top {
    animation: swC2 5s ease infinite !important;
    transform-origin: 50% 100%
}

.sw3 .sw3-anim .sw3-like {
    animation: swL2 5s ease infinite !important
}

.sw3 .sw3-anim .sw3-chip {
    animation: swCh2 5s ease infinite !important
}

.band:has(.tools4) {
    min-height: 0 !important;
    padding-block: 88px !important
}

.tools4 {
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important
}

.tools4 > .tcard {
    grid-column: auto !important;
    grid-row: auto
}

@media (max-width: 900px) {
    .tools4 {
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important
    }
}

.kw3 {
    display: grid;
    grid-template-columns:1.05fr 1fr;
    gap: 64px;
    align-items: center
}

.kw3-t {
    display: grid;
    gap: 22px
}

.kw3-t h2 {
    margin: 0
}

.kw3-t .lead {
    margin: 0;
    max-width: 520px
}

.kw3-t .checks {
    display: grid;
    gap: 12px;
    margin: 4px 0 0
}

.kw3-t .checks li {
    font-size: 16px;
    color: #3a3a3a
}

.kw3-t .checks b {
    color: #0D0D0D
}

.kw3-c {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 30px 32px;
    box-shadow: 0 18px 44px rgba(13, 13, 13, .07);
    display: grid;
    gap: 14px
}

.kw3-c small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8a8a8a
}

.kw3-x {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px
}

.kw3-x span {
    background: #F2F2F2;
    color: #8a8a8a;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    text-decoration: line-through;
    text-decoration-color: #bdbdbd
}

.kw3-ok {
    display: flex;
    gap: 14px;
    align-items: center;
    background: #FFF7D6;
    border: 1.5px solid #FFC600;
    border-radius: 16px;
    padding: 16px 18px
}

.kw3-ok i {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0D0D0D;
    color: #FFC600;
    display: grid;
    place-items: center;
    font-style: normal;
    font-weight: 800;
    flex: none
}

.kw3-ok b {
    display: block;
    font-size: 16px
}

.kw3-ok span {
    font-size: 14px;
    color: #4a4a4a
}

.band:has(.kw3) .pn-row {
    margin-top: 48px
}

@media (max-width: 900px) {
    .kw3 {
        grid-template-columns:minmax(0, 1fr);
        gap: 32px
    }
}

.kq2[data-s="4"] .kq-wa {
    opacity: 1
}

.kq-wa {
    background: #EFE7DD;
    display: flex;
    flex-direction: column;
    font-size: 8px;
    color: #111
}

.wa-h {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #F6F6F6;
    padding: 28px 10px 7px;
    border-bottom: 1px solid #e2e2e2
}

.wa-h img {
    width: 22px;
    height: 22px;
    border-radius: 50%
}

.wa-h b {
    display: block;
    font-size: 9px
}

.wa-h small {
    font-size: 6.5px;
    color: #25A35A
}

.wa-bk {
    font-size: 14px;
    color: #0a7cff;
    line-height: 1
}

.wa-body {
    flex: 1;
    padding: 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative
}

.wa-day {
    align-self: center;
    background: #fff;
    border-radius: 6px;
    padding: 2px 7px;
    font-size: 6.5px;
    color: #6b6b6b
}

.wa-msg {
    align-self: flex-start;
    max-width: 88%;
    background: #fff;
    border-radius: 2px 9px 9px 9px;
    padding: 7px 8px 5px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .08);
    opacity: 0;
    transform: translateY(6px) scale(.97);
    transform-origin: top left;
    transition: all .35s cubic-bezier(.2, .8, .2, 1)
}

.kq-wa.in .wa-msg {
    opacity: 1;
    transform: none
}

.wa-msg p {
    margin: 0 0 6px;
    line-height: 1.4
}

.wa-lk {
    display: flex;
    gap: 6px;
    align-items: center;
    background: #F2F2F2;
    border-radius: 6px;
    padding: 5px;
    margin-bottom: 5px
}

.wa-lk i {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: #FFC600;
    font-style: normal;
    font-weight: 800;
    font-size: 7px;
    display: grid;
    place-items: center
}

.wa-lk b {
    display: block;
    font-size: 7.5px
}

.wa-lk small {
    font-size: 6.5px;
    color: #6b6b6b
}

.wa-url {
    display: block;
    color: #0a7cff;
    text-decoration: underline;
    font-size: 7.5px;
    border-radius: 3px;
    transition: background .15s
}

.wa-url.hit {
    background: rgba(10, 124, 255, .15)
}

.wa-msg em {
    display: block;
    text-align: right;
    font-style: normal;
    font-size: 6px;
    color: #8a8a8a;
    margin-top: 3px
}

.wa-tap {
    position: absolute;
    left: 50px;
    top: 118px;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: rgba(13, 13, 13, .25);
    box-shadow: 0 0 0 5px rgba(13, 13, 13, .08);
    opacity: 0;
    transform: scale(.5);
    transition: opacity .15s, transform .2s
}

.wa-tap.on {
    opacity: 1;
    transform: scale(1)
}

.wa-in {
    background: #F6F6F6;
    padding: 7px 9px 14px
}

.wa-in span {
    display: block;
    background: #fff;
    border-radius: 999px;
    padding: 5px 9px;
    color: #9a9a9a;
    font-size: 7.5px
}

section[id] {
    scroll-margin-top: 72px
}

.kq2 .kq-list li {
    padding: 6px 16px 6px 0
}

.kq2 .kq-list li div {
    padding: 8px 14px
}

.kq2 .kq-list b {
    font-size: 16px
}

.kq2 .kq-list small {
    font-size: 13.5px
}

.ws-stats.ws2-stats2 .on {
    background: #0D0D0D;
    border-color: #0D0D0D
}

.ws-stats.ws2-stats2 .on b {
    color: #FFC600
}

.ws-stats.ws2-stats2 .on span {
    color: #fff
}

.ws2-dash .wd-ch i {
    transform-origin: bottom;
    transform: scaleY(0);
    transition: transform .7s cubic-bezier(.2, .8, .2, 1);
    transition-delay: var(--d)
}

.ws2-dash.wd-run .wd-ch i {
    transform: scaleY(1)
}

.wd-live {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #2fb463;
    margin-right: 6px;
    vertical-align: 1px;
    animation: wdLive 1.6s ease-out infinite
}

@keyframes wdLive {
    0% {
        box-shadow: 0 0 0 0 rgba(47, 180, 99, .5)
    }
    80%, 100% {
        box-shadow: 0 0 0 7px rgba(47, 180, 99, 0)
    }
}

.ws2-dash .wd-k b {
    font-variant-numeric: tabular-nums
}

.ws2-dash .wd-k .on.bump {
    animation: wdBump .5s ease
}

@keyframes wdBump {
    40% {
        transform: scale(1.05);
        background: #FFE58A
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws2-dash .wd-ch i {
        transform: none;
        transition: none
    }

    .wd-live {
        animation: none
    }
}

.sp-gate {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    max-width: 460px
}

.sp-gate input {
    flex: 1;
    min-width: 200px;
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 13px 18px;
    background: #fff
}

.sp-gate input:focus {
    outline: 2px solid #FFC600;
    outline-offset: 1px
}

.sch-hero .sx {
    align-items: center
}

.sch-hero .sx-t {
    display: grid;
    gap: 20px;
    justify-items: start
}

.sch-hero .sx-t h1 {
    margin: 0
}

.sch-hero .sx-t .lead {
    margin: 0;
    max-width: 540px
}

.sch-hero .sx-v {
    zoom: 1.22
}

.sch-hero {
    padding-block: 56px !important
}

@media (max-width: 900px) {
    .sch-hero .sx-v {
        zoom: 1
    }
}

.bkd {
    display: grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 56px;
    align-items: center;
    margin-top: 40px
}

.bkd-v {
    position: relative;
    height: 440px
}

.bkd-p {
    position: absolute;
    width: 270px;
    border-radius: 6px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 22px 48px rgba(13, 13, 13, .16);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1)
}

.bkd-p1 {
    left: 6%;
    top: 24px;
    transform: rotate(-5deg);
    z-index: 3
}

.bkd-p2 {
    left: 30%;
    top: 6px;
    transform: rotate(2deg);
    z-index: 2
}

.bkd-p3 {
    left: 52%;
    top: 34px;
    transform: rotate(8deg);
    z-index: 1
}

.bkd:hover .bkd-p1 {
    transform: rotate(-8deg) translateX(-18px)
}

.bkd:hover .bkd-p3 {
    transform: rotate(11deg) translateX(18px)
}

.bkd-t {
    display: grid;
    gap: 14px;
    justify-items: start
}

.bkd-t h3 {
    font-size: 28px;
    letter-spacing: -.025em;
    margin: 0
}

.bkd-t p {
    margin: 0;
    color: #4a4a4a;
    font-size: 16px;
    line-height: 1.55
}

.bkd-tag {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600
}

.bkd-days {
    list-style: none;
    margin: 2px 0;
    padding: 0;
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 6px 18px;
    font-size: 14px;
    color: #3a3a3a
}

.bkd-days b {
    font-weight: 700;
    margin-right: 8px;
    color: #0D0D0D
}

.bkd-gate {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    width: 100%;
    max-width: 500px;
    margin-top: 6px
}

.bkd-gate input {
    flex: 1;
    min-width: 200px;
    font: inherit;
    font-size: 15px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 13px 18px;
    background: #fff
}

.bkd-gate input:focus {
    outline: 2px solid #FFC600;
    outline-offset: 1px
}

.bkd-note {
    margin: 0 !important;
    font-size: 13px
}

@media (max-width: 900px) {
    .bkd {
        grid-template-columns:minmax(0, 1fr);
        gap: 24px
    }

    .bkd-v {
        height: 330px
    }

    .bkd-p {
        width: 200px
    }

    .bkd-days {
        grid-template-columns:1fr
    }
}

.ab-row {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap
}

.ab-aw {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-right: 22px;
    border-right: 1px solid var(--line)
}

.ab-aw img {
    height: 52px;
    width: auto;
    display: block;
    mix-blend-mode: multiply
}

.ab-loc {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 9px 18px 9px 12px;
    text-decoration: none;
    color: #0D0D0D;
    transition: border-color .2s, transform .2s
}

.ab-loc:hover {
    border-color: #0D0D0D;
    transform: translateY(-1px)
}

.ab-loc span {
    display: grid;
    line-height: 1.25
}

.ab-loc b {
    font-size: 14px
}

.ab-loc small {
    font-size: 12px;
    color: #6b6b6b
}

@media (max-width: 600px) {
    .ab-aw {
        border-right: 0;
        padding-right: 0
    }
}

/* --- Audit-Feinschliff --- */
.cta-band .book {
    grid-template-columns:1fr;
    gap: 28px
}

.cta-band h2 {
    font-size: clamp(30px, 3.4vw, 46px) !important
}

[data-page="rechtliches"] :is(p,li,a,h2,h3,h4) {
    overflow-wrap: anywhere;
    hyphens: auto
}

@media (max-width: 900px) {
    .bkd-v {
        overflow: hidden;
        max-width: 100%
    }
}

.bkd-t h3 {
    display: none
}

@media (max-width: 600px) {
    .tl-bar {
        grid-template-columns:repeat(6, minmax(0, 1fr));
        min-width: 0;
        width: 100%
    }

    .tl-y span {
        font-size: 13px
    }
}

.wk7 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns:repeat(7, minmax(0, 1fr));
    gap: 12px
}

.wk7 li {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.wk7 span {
    align-self: flex-start;
    background: #FFC600;
    color: #0D0D0D;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600
}

.wk7 b {
    font-size: 15px;
    line-height: 1.25;
    letter-spacing: -.01em
}

.wk7 p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--muted)
}

.wk7 small {
    margin-top: auto;
    padding-top: 8px;
    border-top: 1px solid var(--line);
    font-size: 12px;
    color: #6b6b6b
}

@media (max-width: 1100px) {
    .wk7 {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

@media (max-width: 700px) {
    .wk7 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.ip-rate {
    display: grid;
    gap: 9px;
    margin-top: 8px
}

.ip-rate span {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    border-bottom: 1px dashed #E5E5E5;
    padding-bottom: 7px
}

.ip-rate b {
    display: flex;
    gap: 5px
}

.ip-rate i {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 1.5px solid #0D0D0D
}

.ip-rate i.f {
    background: #FFC600
}

@media (max-width: 900px) {
    .ip-scr {
        aspect-ratio: auto !important
    }

    .ip-main {
        padding-bottom: 22px
    }
}

@media (min-width: 901px) and (max-width: 1240px) {
    .wrap, main [data-page] > section > .wrap, main [data-page] > header > .wrap, main section:has(.wsx) > .wrap, main section:has(.ats2) > .wrap, footer .wrap.fgrid {
        padding-inline: 44px !important
    }
}

.mcta {
    transform: translateY(110%);
    transition: transform .3s ease
}

.mcta.show {
    transform: none
}

@media (max-width: 600px) {
    .kt-cap {
        font-size: 11.5px
    }
}

/* --- Mobiles Menü --- */
.mnav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: calc(100dvh - 72px - env(safe-area-inset-top, 0px));
    max-height: none;
    z-index: 60;
    background: #F7F7F7;
    border-top: 1px solid var(--line);
    overflow-y: auto;
    overscroll-behavior: contain
}

.nav .mnav .wrap.mn {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    height: auto;
    padding: 18px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    max-width: 560px
}

.mn-h {
    margin: 10px 2px 2px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6b6b6b
}

.mn-list {
    display: grid;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    overflow: hidden
}

.mnav a.mn-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    font-size: 16px;
    text-decoration: none;
    color: #0D0D0D
}

.mn-row + .mn-row {
    border-top: 1px solid var(--line)
}

.mn-row span {
    display: grid;
    gap: 1px;
    flex: 1;
    min-width: 0
}

.mn-row b {
    font-weight: 600;
    font-size: 15.5px
}

.mn-row small {
    font-size: 13px;
    color: #6b6b6b
}

.mn-ic {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #FFC600;
    color: #0D0D0D;
    display: grid;
    place-items: center
}

.mn-ar {
    flex: none;
    color: #9a9a9a
}

.mn-row:active, .mn-grid a:active {
    background: #FAFAFA
}

.mn-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.mnav .mn-chips a {
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    text-decoration: none;
    color: #0D0D0D
}

.mn-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 8px
}

.mnav .mn-grid a {
    display: grid;
    gap: 2px;
    padding: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    text-decoration: none;
    color: #0D0D0D;
    font-size: 15px
}

.mn-grid b {
    font-weight: 600;
    font-size: 15px
}

.mn-grid small {
    font-size: 12.5px;
    color: #6b6b6b
}

.mn-foot {
    display: grid;
    gap: 12px;
    justify-items: center;
    margin-top: 12px
}

.nav .mnav .mn-foot .btn {
    display: inline-flex !important;
    width: 100%;
    justify-content: space-between;
    padding: 16px 16px 16px 24px;
    font-size: 16px
}

.mnav a.mn-mail {
    font-size: 14px;
    color: #6b6b6b;
    padding: 4px
}

.mnav a[aria-current="page"].mn-row b {
    text-decoration: underline;
    text-decoration-color: #FFC600;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px
}

body.mn-open {
    overflow: hidden
}

body.mn-open .mcta {
    display: none !important
}

/* --- Bento-Karten mobil --- */
@media (max-width: 900px) {
    .bento .bt-row .bt-v {
        width: auto;
        align-self: stretch;
        margin: 20px -24px -20px;
        min-height: 250px
    }

    .bento .bt-row .link {
        align-self: flex-start
    }
}

/* --- Mobil-Fixes 2 --- */
@media (max-width: 560px) {
    .tools4 .tbody h3 {
        font-size: 16.5px;
        hyphens: manual;
        overflow-wrap: normal
    }

    .tools4 .tbody {
        padding: 10px 14px 14px !important
    }
}

.tl-panes {
    display: grid;
    min-height: 0
}

.tl-p {
    position: relative !important;
    inset: auto;
    grid-area: 1/1
}

@media (max-width: 600px) {
    .wx-tog {
        zoom: 1 !important
    }
}

@media (max-width: 900px) {
    .kp-chart {
        padding-top: 0 !important
    }

    .kp-pin.d {
        width: auto
    }
}

.ws2-t.done > i, .ws2-t.on > i {
    background: #0D0D0D !important;
    border-color: #0D0D0D !important;
    color: #fff
}

@media (max-width: 600px) {
    .ws2-stats2 b {
        white-space: nowrap;
        font-size: clamp(26px, 8vw, 34px) !important
    }
}

@media (max-width: 900px) {
    .team .tm-x {
        grid-column: 1/-1
    }

    .team .tm-x .tm-ph {
        min-height: 0;
        padding: 20px;
        gap: 16px
    }

    .team .tm-x .tm-xt {
        display: grid !important
    }

    .team .tm-xt b {
        font-size: 17px
    }

    .team .tm-sil i {
        width: 46px;
        height: 46px
    }
}

body[data-pg="termin"] .mcta {
    display: none !important
}