html {
    box-sizing: border-box;
    scroll-behavior: auto
}

body {
    margin: 0;
    min-height: 100svh;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    font-family: 'Spectral', serif;
    background: #FDFCFA;
    color: #1B1B1B;
    font-size: 16px;
    line-height: 1.65
}

:focus {
    outline: none;
    filter: invert(1)
}

.hd-bar {
    background: linear-gradient(135deg, #F8F6F3 0%, #FFF 100%);
    border-bottom: 1px solid #103f3c1f;
    box-shadow: 0 3px 3px 1px #103f3c14;
    padding: 20px 40px;
    position: sticky;
    top: 0;
    z-index: 1000
}

.hd-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start
}

.brand-pod {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px;
    background: #FFF;
    border: 2px solid #cb48fb26;
    border-radius: 7px;
    box-shadow: 0 7px 28px 1px #cb48fb1a
}

.brand-pod img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    display: block
}

.brand-txt {
    font-size: 16px;
    font-weight: 700;
    color: #103F3C;
    letter-spacing: .02em;
    text-align: center
}

.nav-deck {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 8px
}

.nav-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    align-items: center
}

.nav-lnk {
    font-size: 16px;
    font-weight: 400;
    color: #103F3C;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    background: transparent;
    transition: background .6s ease, color .6s ease;
    position: relative
}

.nav-lnk:hover {
    background: #cb48fb14;
    color: #CB48FB
}

.nav-lnk.active {
    background: #CB48FB;
    color: #FFF;
    font-weight: 700
}

.nav-parent {
    position: relative;
    display: inline-block
}

.nav-parent:hover .sub-plate {
    opacity: 1;
    visibility: visible;
    transform: translateY(0)
}

.sub-plate {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    background: #FFF;
    border: 1px solid #103f3c26;
    border-radius: 7px;
    box-shadow: 0 8px 48px 1px #103f3c1c;
    padding: 8px;
    min-width: 240px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility .5s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 100
}

.sub-lnk {
    display: block;
    font-size: 16px;
    font-weight: 400;
    color: #103F3C;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 4px;
    transition: background .65s ease, color .65s ease
}

.sub-lnk:hover {
    background: #fed99140;
    color: #103F3C
}

.contact-strip {
    display: flex;
    gap: 40px;
    align-items: center;
    flex-wrap: wrap
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: #103F3C;
    text-decoration: none;
    transition: color .7s ease
}

.contact-item:hover {
    color: #CB48FB
}

.contact-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor
}

@media (max-width: 1280px) {
    .hd-grid {
        grid-template-columns: 240px 1fr;
        gap: 20px
    }

    .brand-pod {
        padding: 16px 8px
    }

    .brand-pod img {
        width: 48px;
        height: 48px
    }

    .brand-txt {
        font-size: 13px
    }

    .nav-lnk {
        font-size: 13px;
        padding: 8px 16px
    }

    .sub-lnk {
        font-size: 13px
    }

    .contact-item {
        font-size: 13px
    }
}

@media (max-width: 768px) {
    .hd-bar {
        padding: 16px 20px
    }

    .hd-grid {
        grid-template-columns: 1fr;
        gap: 16px
    }

    .brand-pod {
        flex-direction: row;
        justify-content: center
    }

    .nav-deck {
        gap: 8px
    }

    .nav-row {
        justify-content: center
    }

    .contact-strip {
        justify-content: center;
        gap: 20px
    }
}

@media (max-width: 480px) {
    .hd-bar {
        padding: 16px
    }

    .nav-lnk {
        font-size: 13px;
        padding: 8px
    }

    .contact-strip {
        flex-direction: column;
        gap: 8px
    }
}

.ftr-plate {
    background: linear-gradient(180deg, #F0EDE8 0%, #FFF 100%);
    border-top: 2px solid #cb48fb33;
    padding: 80px 40px 40px;
    margin-top: 80px
}

.ftr-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 80px;
    margin-bottom: 40px
}

.ftr-col {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.ftr-heading {
    font-size: 21px;
    font-weight: 700;
    color: #103F3C;
    margin-bottom: 4px;
    letter-spacing: .01em
}

.ftr-desc {
    font-size: 13px;
    line-height: 1.65;
    color: #4A4A4A;
    margin-bottom: 8px
}

.ftr-lnk {
    font-size: 16px;
    font-weight: 400;
    color: #103F3C;
    text-decoration: none;
    padding: 4px 0;
    transition: color .55s ease, padding-left .55s ease;
    display: inline-block
}

.ftr-lnk:hover {
    color: #CB48FB;
    padding-left: 8px
}

.ftr-brand-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px
}

.ftr-logo-box {
    width: 80px;
    height: 80px;
    padding: 8px;
    background: #FFF;
    border: 1px solid #103f3c26;
    border-radius: 7px;
    box-shadow: 0 3px 3px 1px #103f3c14;
    display: flex;
    align-items: center;
    justify-content: center
}

.ftr-logo-box img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

.ftr-company {
    font-size: 16px;
    font-weight: 700;
    color: #103F3C;
    text-align: center
}

.ftr-address {
    font-size: 13px;
    line-height: 1.65;
    color: #4A4A4A;
    text-align: center;
    font-style: normal
}

.ftr-contact-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    margin-top: 8px
}

.ftr-contact-lnk {
    font-size: 16px;
    color: #103F3C;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.ftr-contact-lnk:hover {
    color: #CB48FB
}

.ftr-contact-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.ftr-contact-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor
}

.ftr-bottom {
    max-width: 1400px;
    margin: 0 auto;
    padding-top: 40px;
    border-top: 1px solid #103f3c26;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px
}

.ftr-copy {
    font-size: 13px;
    color: #4A4A4A
}

.ftr-nav-strip {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.ftr-nav-lnk {
    font-size: 13px;
    color: #103F3C;
    text-decoration: none;
    transition: color .7s ease
}

.ftr-nav-lnk:hover {
    color: #CB48FB
}

@media (max-width: 1280px) {
    .ftr-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
    }

    .ftr-brand-cell {
        grid-column: 1 / -1
    }
}

@media (max-width: 768px) {
    .ftr-plate {
        padding: 40px 20px 20px;
        margin-top: 40px
    }

    .ftr-grid {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .ftr-col {
        align-items: center;
        text-align: center
    }

    .ftr-bottom {
        flex-direction: column;
        text-align: center;
        gap: 16px
    }

    .ftr-nav-strip {
        justify-content: center
    }
}

@media (max-width: 480px) {
    .ftr-plate {
        padding: 40px 16px 20px
    }

    .ftr-heading {
        font-size: 16px
    }

    .ftr-lnk {
        font-size: 13px
    }

    .ftr-contact-lnk {
        font-size: 13px
    }
}

.cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #FFF 0%, #F8F6F3 100%);
    border-top: 2px solid #cb48fb40;
    box-shadow: 0 -3px 3px 1px #103f3c14;
    padding: 20px 40px;
    z-index: 2000;
    display: none;
    animation: slideFromTop .18s ease forwards;
    animation-delay: 615ms;
    opacity: 0
}

@keyframes slideFromTop {
    from {
        transform: translateY(100%);
        opacity: 0
    }

    to {
        transform: translateY(0);
        opacity: 1
    }
}

.cookie-bar.out {
    animation: slideToTop .18s ease forwards
}

@keyframes slideToTop {
    from {
        transform: translateY(0);
        opacity: 1
    }

    to {
        transform: translateY(-100%);
        opacity: 0
    }
}

.cookie-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap
}

.cookie-txt {
    flex: 1;
    min-width: 300px;
    font-size: 13px;
    line-height: 1.65;
    color: #1B1B1B
}

.cookie-actions {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap
}

.cookie-btn {
    font-family: 'Spectral', serif;
    font-size: 16px;
    font-weight: 700;
    padding: 8px 20px;
    border: 2px solid #CB48FB;
    border-radius: 4px;
    background: transparent;
    color: #CB48FB;
    cursor: pointer;
    transition: background .65s ease, color .65s ease, border-color .65s ease;
    position: relative;
    overflow: hidden
}

.cookie-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #CB48FB;
    transition: height .65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1
}

.cookie-btn:hover::before {
    height: 100%
}

.cookie-btn:hover {
    color: #FFF;
    border-color: #CB48FB
}

.cookie-btn.alt {
    border-color: #103F3C;
    color: #103F3C
}

.cookie-btn.alt::before {
    background: #103F3C
}

.cookie-btn.alt:hover {
    color: #FFF;
    border-color: #103F3C
}

.cookie-link {
    font-size: 13px;
    color: #103F3C;
    text-decoration: underline;
    cursor: pointer;
    transition: color .55s ease
}

.cookie-link:hover {
    color: #CB48FB
}

.cookie-detail {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #103f3c26
}

.cookie-detail.show {
    display: block
}

.cookie-cats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px
}

.cat-item {
    display: flex;
    align-items: center;
    gap: 8px
}

.cat-check {
    width: 20px;
    height: 20px;
    border: 2px solid #103F3C;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    transition: background .5s ease, border-color .5s ease
}

.cat-check.on {
    background: #CB48FB;
    border-color: #CB48FB
}

.cat-check.on::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 6px;
    width: 4px;
    height: 10px;
    border: solid #FFF;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.cat-check.locked {
    background: #E0E0E0;
    border-color: #A0A0A0;
    cursor: not-allowed
}

.cat-label {
    font-size: 13px;
    color: #1B1B1B;
    user-select: none
}

@media (max-width: 768px) {
    .cookie-bar {
        padding: 16px 20px
    }

    .cookie-inner {
        flex-direction: column;
        gap: 20px
    }

    .cookie-txt {
        min-width: auto
    }

    .cookie-actions {
        width: 100%;
        justify-content: center
    }

    .cookie-cats {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .cookie-bar {
        padding: 16px
    }

    .cookie-actions {
        flex-direction: column;
        width: 100%
    }

    .cookie-btn {
        width: 100%
    }
}

.policy-text {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 20px;
    background: #fff
}

.policy-text h1 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 40px;
    color: #103F3C
}

.policy-text h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 80px 0 20px;
    color: #103F3C
}

.policy-text h3 {
    font-size: 21px;
    line-height: 1.4;
    margin: 40px 0 16px;
    color: #103F3C
}

.policy-text h4 {
    font-size: 16px;
    line-height: 1.4;
    margin: 40px 0 16px;
    color: #103F3C;
    font-weight: 600
}

.policy-text h5 {
    font-size: 16px;
    line-height: 1.4;
    margin: 40px 0 16px;
    color: #103F3C
}

.policy-text h6 {
    font-size: 13px;
    line-height: 1.4;
    margin: 40px 0 16px;
    color: #103F3C;
    text-transform: uppercase;
    letter-spacing: .08em
}

.policy-text p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 16px;
    color: #2a2a2a
}

.policy-text ul {
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    list-style-type: disc
}

.policy-text ol {
    margin: 0 0 20px;
    padding: 0 0 0 20px;
    list-style-type: decimal
}

.policy-text li {
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 8px;
    color: #2a2a2a
}

.policy-text ul ul {
    margin: 8px 0;
    padding: 0 0 0 20px
}

.policy-text ol ol {
    margin: 8px 0;
    padding: 0 0 0 20px
}

.policy-text strong {
    font-weight: 600;
    color: #103F3C
}

.policy-text b {
    font-weight: 600;
    color: #103F3C
}

.policy-text em {
    font-style: italic
}

.policy-text i {
    font-style: italic
}

.policy-text a {
    color: #CB48FB;
    text-decoration: none;
    transition: opacity .6s ease
}

.policy-text a:hover {
    opacity: .7
}

.policy-text table {
    width: 100%;
    margin: 40px 0;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.65;
    box-shadow: 0 3px 3px 1px #cb48fb14;
    border-radius: 7px;
    overflow: hidden
}

.policy-text thead {
    background: #f5f5f5
}

.policy-text th {
    padding: 16px;
    text-align: left;
    font-weight: 600;
    color: #103F3C;
    border-bottom: 2px solid #CB48FB
}

.policy-text td {
    padding: 16px;
    color: #2a2a2a;
    border-bottom: 1px solid #e8e8e8
}

.policy-text tbody tr:last-child td {
    border-bottom: none
}

.policy-text tbody tr:hover {
    background: #fafafa
}

@media (max-width: 768px) {
    .policy-text {
        padding: 40px 16px
    }

    .policy-text h1 {
        font-size: 28px;
        margin: 0 0 20px
    }

    .policy-text h2 {
        font-size: 21px;
        margin: 40px 0 16px
    }

    .policy-text h3 {
        font-size: 16px;
        margin: 20px 0 8px
    }

    .policy-text table {
        font-size: 13px;
        margin: 20px 0
    }

    .policy-text th {
        padding: 8px
    }

    .policy-text td {
        padding: 8px
    }
}

.exp-dtl {
    background: #FAFBFC;
    color: #1A1D23;
    max-width: 100%;
    overflow-x: clip
}

.exp-dtl .tp-hdr {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    padding: 80px 40px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    background: linear-gradient(180deg, #CB48FB 0%, #CB48FB 50%, #103F3C 50%, #103F3C 100%)
}

.exp-dtl .tp-hdr::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, #cb48fb1f 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 1
}

.exp-dtl .img-strip {
    flex: 0 0 18%;
    position: relative;
    z-index: 2
}

.exp-dtl .img-strip img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    clip-path: polygon(0 0, 100% 8%, 100% 92%, 0 100%);
    box-shadow: 0 7px 28px 1px #cb48fb1a
}

.exp-dtl .txt-area {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 0 0 80px;
    position: relative;
    z-index: 2
}

.exp-dtl .supra {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #FED991;
    margin: 0 0 16px
}

.exp-dtl .main-ttl {
    font-size: 66px;
    line-height: 1.15;
    font-weight: 700;
    color: #FFF;
    margin: 0 0 20px
}

.exp-dtl .desc-txt {
    font-size: 21px;
    line-height: 1.65;
    color: #ffffffeb;
    margin: 0;
    max-width: 720px
}

.exp-dtl .meta-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 40px;
    margin: 40px 0 0;
    flex-wrap: wrap
}

.exp-dtl .meta-itm {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
    color: #FED991
}

.exp-dtl .meta-icn {
    width: 18px;
    height: 18px;
    fill: #FED991
}

.exp-dtl .art-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    background: #FFF
}

.exp-dtl .art-body .content-wrap {
    max-width: 880px;
    margin: 0 auto
}

.exp-dtl .art-body h2 {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #103F3C;
    margin: 0 0 20px
}

.exp-dtl .art-body h3 {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #103F3C;
    margin: 40px 0 16px
}

.exp-dtl .art-body h4 {
    font-size: 21px;
    line-height: 1.4;
    font-weight: 700;
    color: #103F3C;
    margin: 40px 0 16px
}

.exp-dtl .art-body p {
    font-size: 16px;
    line-height: 1.85;
    color: #2A2E36;
    margin: 0 0 20px
}

.exp-dtl .art-body ul {
    margin: 0 0 20px;
    padding: 0 0 0 20px
}

.exp-dtl .art-body li {
    font-size: 16px;
    line-height: 1.85;
    color: #2A2E36;
    margin: 0 0 8px
}

.exp-dtl .art-body blockquote {
    margin: 40px 0;
    padding: 20px 40px;
    background: #F5F6F8;
    border-radius: 7px;
    position: relative;
    box-shadow: inset 4px 0 0 0 #CB48FB
}

.exp-dtl .art-body blockquote p {
    font-size: 21px;
    line-height: 1.65;
    color: #103F3C;
    font-style: italic;
    margin: 0
}

.exp-dtl .art-body cite {
    font-size: 13px;
    line-height: 1.4;
    color: #CB48FB;
    font-style: normal;
    display: block;
    margin: 16px 0 0
}

.exp-dtl .art-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 40px 0;
    box-shadow: 0 3px 3px 1px #cb48fb14;
    border-radius: 7px;
    overflow: hidden
}

.exp-dtl .art-body thead {
    background: #103F3C
}

.exp-dtl .art-body th {
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #FFF;
    padding: 16px 20px;
    text-align: left;
    font-weight: 700
}

.exp-dtl .art-body td {
    font-size: 16px;
    line-height: 1.65;
    color: #2A2E36;
    padding: 16px 20px;
    border-bottom: 1px solid #E8EAF0
}

.exp-dtl .art-body tbody tr:last-child td {
    border-bottom: none
}

.exp-dtl .art-body tbody tr {
    background: #FFF;
    transition: background .6s ease
}

.exp-dtl .art-body tbody tr:hover {
    background: #F5F6F8
}

.exp-dtl .art-body figure {
    margin: 40px 0
}

.exp-dtl .art-body figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 7px;
    box-shadow: 0 7px 28px 1px #103f3c1a
}

.exp-dtl .art-body figcaption {
    font-size: 13px;
    line-height: 1.65;
    color: #6B7180;
    margin: 16px 0 0;
    text-align: center
}

.exp-dtl .data-viz {
    padding: 80px 40px;
    background: #103F3C;
    position: relative;
    overflow: hidden
}

.exp-dtl .data-viz::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(180deg, #ffffff14 0%, transparent 100%);
    filter: blur(20px);
    pointer-events: none
}

.exp-dtl .data-viz .inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 80px
}

.exp-dtl .data-viz .txt-col {
    flex: 0 0 28%
}

.exp-dtl .data-viz .chart-col {
    flex: 1
}

.exp-dtl .viz-ttl {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #FFF;
    margin: 0 0 20px
}

.exp-dtl .viz-desc {
    font-size: 16px;
    line-height: 1.85;
    color: #ffffffe0;
    margin: 0
}

.exp-dtl .chart-wrap {
    background: #ffffff0d;
    padding: 40px;
    border-radius: 7px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 8px 48px 1px #cb48fb1c;
    position: relative
}

.exp-dtl .chart-svg {
    width: 100%;
    height: 320px
}

.exp-dtl .chart-line {
    stroke: #FED991;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: draw-line 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200
}

@keyframes draw-line {
    to {
        stroke-dashoffset: 0
    }
}

.exp-dtl .chart-dot {
    fill: #CB48FB;
    stroke: #FFF;
    stroke-width: 2;
    opacity: 0;
    animation: fade-dot .5s ease forwards
}

.exp-dtl .chart-dot:nth-child(1) {
    animation-delay: .4s
}

.exp-dtl .chart-dot:nth-child(2) {
    animation-delay: .8s
}

.exp-dtl .chart-dot:nth-child(3) {
    animation-delay: 1.2s
}

.exp-dtl .chart-dot:nth-child(4) {
    animation-delay: 1.6s
}

.exp-dtl .chart-dot:nth-child(5) {
    animation-delay: 2s
}

@keyframes fade-dot {
    to {
        opacity: 1
    }
}

.exp-dtl .chart-label {
    font-size: 13px;
    fill: #ffffffb3;
    text-anchor: middle
}

.exp-dtl .chart-value {
    font-size: 13px;
    fill: #FED991;
    text-anchor: middle;
    font-weight: 700
}

.exp-dtl .grid-line {
    stroke: #ffffff14;
    stroke-width: 1;
    stroke-dasharray: 4 4
}

.exp-dtl .engage-zone {
    padding: 80px 40px;
    background: #FAFBFC;
    position: relative
}

.exp-dtl .engage-zone::before {
    content: '';
    position: absolute;
    top: -60px;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(180deg, #103F3C 0%, transparent 100%);
    filter: blur(40px);
    pointer-events: none
}

.exp-dtl .engage-zone .inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.6fr 2.4fr;
    gap: 40px;
    align-items: stretch
}

.exp-dtl .engage-card {
    background: #FFF;
    padding: 40px;
    border-radius: 7px;
    box-shadow: 0 3px 3px 1px #103f3c14;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.exp-dtl .engage-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #CB48FB 0%, transparent 100%);
    opacity: 0;
    transition: opacity .6s ease
}

.exp-dtl .engage-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 48px 1px #103f3c1c
}

.exp-dtl .engage-card:hover::after {
    opacity: 1
}

.exp-dtl .card-icn-wrap {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, #cb48fb1f 0%, #103f3c14 100%);
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 20px
}

.exp-dtl .card-icn {
    width: 32px;
    height: 32px;
    fill: #CB48FB
}

.exp-dtl .card-ttl {
    font-size: 28px;
    line-height: 1.4;
    font-weight: 700;
    color: #103F3C;
    margin: 0 0 16px
}

.exp-dtl .card-txt {
    font-size: 16px;
    line-height: 1.85;
    color: #2A2E36;
    margin: 0 0 20px;
    flex: 1
}

.exp-dtl .card-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 16px 40px;
    background: transparent;
    color: #CB48FB;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    border: 2px solid #CB48FB;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
    transition: color .5s ease, border-color .5s ease
}

.exp-dtl .card-btn::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #CB48FB;
    transition: height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: -1
}

.exp-dtl .card-btn:hover {
    color: #FFF;
    border-color: #CB48FB
}

.exp-dtl .card-btn:hover::before {
    height: 100%
}

.exp-dtl .btn-icn {
    width: 16px;
    height: 16px;
    fill: currentColor;
    transition: transform .5s ease
}

.exp-dtl .card-btn:hover .btn-icn {
    transform: translateX(4px)
}

.exp-dtl .tag-badge {
    display: inline-block;
    padding: 8px 16px;
    background: #cb48fb1a;
    color: #CB48FB;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-radius: 36px;
    margin: 0 0 20px;
    position: relative;
    overflow: hidden
}

.exp-dtl .tag-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, #cb48fb26 50%, transparent 100%);
    animation: shimmer 3s infinite
}

@keyframes shimmer {
    0% {
        left: -100%
    }

    100% {
        left: 200%
    }
}

.exp-dtl .like-counter {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #fed99126 0%, #cb48fb14 100%);
    border-radius: 36px;
    margin: 20px 0 0
}

.exp-dtl .like-icn {
    width: 20px;
    height: 20px;
    fill: #CB48FB
}

.exp-dtl .like-num {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    color: #103F3C
}

.exp-dtl .like-lbl {
    font-size: 13px;
    line-height: 1.4;
    color: #6B7180
}

@media (max-width: 1280px) {
    .exp-dtl .tp-hdr {
        padding: 40px 20px
    }

    .exp-dtl .txt-area {
        padding: 0 0 0 40px
    }

    .exp-dtl .main-ttl {
        font-size: 52px
    }

    .exp-dtl .desc-txt {
        font-size: 16px
    }

    .exp-dtl .art-body {
        padding: 40px 20px
    }

    .exp-dtl .data-viz {
        padding: 40px 20px
    }

    .exp-dtl .data-viz .inner {
        gap: 40px
    }

    .exp-dtl .viz-ttl {
        font-size: 28px
    }

    .exp-dtl .engage-zone {
        padding: 40px 20px
    }

    .exp-dtl .engage-zone .inner {
        grid-template-columns: 1fr;
        gap: 20px
    }
}

@media (max-width: 768px) {
    .exp-dtl .tp-hdr {
        flex-direction: column;
        padding: 40px 16px
    }

    .exp-dtl .img-strip {
        flex: 0 0 auto;
        width: 100%;
        height: 240px;
        margin: 0 0 20px
    }

    .exp-dtl .img-strip img {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 96%)
    }

    .exp-dtl .txt-area {
        padding: 0
    }

    .exp-dtl .main-ttl {
        font-size: 28px
    }

    .exp-dtl .desc-txt {
        font-size: 16px
    }

    .exp-dtl .meta-row {
        gap: 20px;
        margin: 20px 0 0
    }

    .exp-dtl .art-body {
        padding: 40px 16px
    }

    .exp-dtl .art-body h2 {
        font-size: 28px
    }

    .exp-dtl .art-body h3 {
        font-size: 21px
    }

    .exp-dtl .art-body blockquote {
        padding: 16px 20px
    }

    .exp-dtl .art-body blockquote p {
        font-size: 16px
    }

    .exp-dtl .art-body table {
        font-size: 13px
    }

    .exp-dtl .art-body th,
    .exp-dtl .art-body td {
        padding: 8px 16px
    }

    .exp-dtl .data-viz {
        padding: 40px 16px
    }

    .exp-dtl .data-viz .inner {
        flex-direction: column;
        gap: 40px
    }

    .exp-dtl .data-viz .txt-col {
        flex: 0 0 auto
    }

    .exp-dtl .viz-ttl {
        font-size: 28px
    }

    .exp-dtl .chart-wrap {
        padding: 20px
    }

    .exp-dtl .chart-svg {
        height: 240px
    }

    .exp-dtl .engage-zone {
        padding: 40px 16px
    }

    .exp-dtl .engage-card {
        padding: 20px
    }

    .exp-dtl .card-ttl {
        font-size: 21px
    }
}

@media (max-width: 480px) {
    .exp-dtl .tp-hdr {
        padding: 20px 16px
    }

    .exp-dtl .img-strip {
        height: 180px
    }

    .exp-dtl .main-ttl {
        font-size: 21px
    }

    .exp-dtl .desc-txt {
        font-size: 13px
    }

    .exp-dtl .supra {
        font-size: 13px
    }

    .exp-dtl .meta-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px
    }

    .exp-dtl .art-body {
        padding: 20px 16px
    }

    .exp-dtl .art-body h2 {
        font-size: 21px
    }

    .exp-dtl .art-body h3 {
        font-size: 16px
    }

    .exp-dtl .data-viz {
        padding: 20px 16px
    }

    .exp-dtl .viz-ttl {
        font-size: 21px
    }

    .exp-dtl .chart-svg {
        height: 200px
    }

    .exp-dtl .engage-zone {
        padding: 20px 16px
    }

    .exp-dtl .card-btn {
        padding: 16px 20px;
        font-size: 13px
    }
}

.prs {
    max-width: 1400px;
    margin: 0 auto;
    background: #FAFCFC
}

.prs .tl-blk {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
    padding: 80px 40px;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%);
    position: relative;
    overflow: hidden
}

.prs .tl-blk::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(90deg, #ffffff08 1px, transparent 1px), linear-gradient(0deg, #ffffff08 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    opacity: .4
}

.prs .tl-img-col {
    flex: 0 0 340px;
    position: relative;
    animation: tl-drop .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards
}

@keyframes tl-drop {
    0% {
        opacity: 0;
        transform: translateY(-40px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.prs .tl-img-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #103f3c99 0%, transparent 100%);
    pointer-events: none
}

.prs .tl-img-col img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 7px;
    box-shadow: 0 8px 48px 1px #103f3c1c
}

.prs .tl-txt-zone {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    animation: tl-drop .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .15s backwards
}

.prs .tl-hd {
    font-size: 66px;
    line-height: 1.15;
    color: #FFF;
    font-weight: 700;
    margin: 0
}

.prs .tl-num {
    font-size: 28px;
    color: #FED991;
    font-weight: 300;
    vertical-align: super;
    margin-left: 8px;
    letter-spacing: .02em
}

.prs .tl-desc {
    font-size: 21px;
    line-height: 1.65;
    color: #ffffffeb;
    margin: 0;
    max-width: 720px
}

@media (max-width: 768px) {
    .prs .tl-blk {
        flex-direction: column;
        padding: 40px 20px;
        gap: 20px
    }

    .prs .tl-img-col {
        flex: 0 0 auto;
        width: 100%
    }

    .prs .tl-img-col img {
        height: 280px
    }

    .prs .tl-hd {
        font-size: 52px
    }

    .prs .tl-desc {
        font-size: 16px
    }
}

.prs .anc-grid {
    padding: 80px 40px;
    background: #FFF;
    position: relative
}

.prs .anc-inner {
    max-width: 960px;
    margin: 0 auto
}

.prs .anc-hd-wrap {
    text-align: center;
    margin-bottom: 40px;
    position: relative
}

.prs .anc-hd {
    font-size: 52px;
    line-height: 1.15;
    color: #103F3C;
    font-weight: 700;
    margin: 0 0 16px;
    animation: anc-reveal .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
    animation-play-state: running
}

@keyframes anc-reveal {
    0% {
        opacity: 0;
        transform: translateY(-30px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.prs .anc-sub {
    font-size: 21px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0;
    font-weight: 300;
    animation: anc-reveal .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) .1s backwards;
    animation-play-state: running
}

.prs .anc-curve {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 40px;
    pointer-events: none
}

.prs .anc-curve svg {
    width: 100%;
    height: 100%;
    stroke: #CB48FB;
    fill: none;
    stroke-width: 2;
    opacity: .5
}

.prs .anc-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    margin-top: 60px
}

.prs .anc-card {
    background: #F8FAFA;
    padding: 40px;
    border-radius: 7px;
    position: relative;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: anc-card-in .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
    animation-play-state: running
}

@keyframes anc-card-in {
    0% {
        opacity: 0;
        transform: translateY(-25px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.prs .anc-card:nth-child(1) {
    animation-delay: .2s
}

.prs .anc-card:nth-child(2) {
    animation-delay: .3s
}

.prs .anc-card:nth-child(3) {
    animation-delay: .4s
}

.prs .anc-card:nth-child(4) {
    animation-delay: .5s
}

.prs .anc-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 48px 1px #cb48fb1c
}

.prs .anc-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(180deg, #CB48FB 0%, #FED991 100%);
    border-radius: 4px 0 0 4px;
    opacity: 0;
    transition: opacity .55s ease
}

.prs .anc-card:hover::before {
    opacity: 1
}

.prs .anc-card-hd {
    font-size: 28px;
    line-height: 1.4;
    color: #103F3C;
    font-weight: 700;
    margin: 0 0 16px
}

.prs .anc-card-txt {
    font-size: 16px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0
}

@media (max-width: 768px) {
    .prs .anc-grid {
        padding: 40px 20px
    }

    .prs .anc-hd {
        font-size: 28px
    }

    .prs .anc-sub {
        font-size: 16px
    }

    .prs .anc-cards {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 40px
    }

    .prs .anc-card {
        padding: 20px
    }

    .prs .anc-card-hd {
        font-size: 21px
    }
}

.prs .cnt-blk {
    padding: 80px 40px;
    background: url(/picture_assets/temporaryhighlight.jpg) center/cover no-repeat;
    position: relative;
    overflow: hidden
}

.prs .cnt-blk::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #103f3ce0;
    pointer-events: none
}

.prs .cnt-inner {
    max-width: 680px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center
}

.prs .cnt-hd {
    font-size: 52px;
    line-height: 1.15;
    color: #FFF;
    font-weight: 300;
    margin: 0 0 40px;
    animation: cnt-fade .8s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
    animation-play-state: running
}

@keyframes cnt-fade {
    0% {
        opacity: 0;
        transform: translateY(-20px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.prs .cnt-cols {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: flex-start
}

.prs .cnt-col {
    flex: 1;
    background: #ffffff14;
    padding: 40px 20px;
    border-radius: 7px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #ffffff26;
    transition: background .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: cnt-col-in .75s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
    animation-play-state: running;
    position: relative
}

@keyframes cnt-col-in {
    0% {
        opacity: 0;
        transform: translateY(-35px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

.prs .cnt-col:nth-child(1) {
    animation-delay: .2s
}

.prs .cnt-col:nth-child(2) {
    animation-delay: .35s
}

.prs .cnt-col:nth-child(3) {
    animation-delay: .5s
}

.prs .cnt-col:hover {
    background: #ffffff24;
    transform: translateY(-6px)
}

.prs .cnt-col::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: #FED991;
    transition: width .6s ease
}

.prs .cnt-col:hover::after {
    width: 80%
}

.prs .cnt-num {
    font-size: 66px;
    line-height: 1.15;
    color: #FED991;
    font-weight: 700;
    margin: 0 0 8px;
    display: block
}

.prs .cnt-lbl {
    font-size: 16px;
    line-height: 1.4;
    color: #ffffffe6;
    margin: 0;
    font-weight: 300;
    letter-spacing: .03em;
    text-transform: uppercase
}

@media (max-width: 768px) {
    .prs .cnt-blk {
        padding: 40px 20px
    }

    .prs .cnt-hd {
        font-size: 28px;
        margin-bottom: 20px
    }

    .prs .cnt-cols {
        flex-direction: column;
        gap: 20px
    }

    .prs .cnt-col {
        padding: 20px
    }

    .prs .cnt-num {
        font-size: 52px
    }

    .prs .cnt-lbl {
        font-size: 13px
    }
}

.prs .dvd-zig {
    width: 100%;
    height: 60px;
    display: block
}

.prs .dvd-zig svg {
    width: 100%;
    height: 100%;
    display: block;
    fill: #FFF
}

.kontakt {
    max-width: 1400px;
    margin: 0 auto;
    background: #FAFCFC;
    overflow-x: clip
}

.kontakt .einstieg {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 40px;
    padding: 160px 40px 80px;
    position: relative;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
    animation: einstieg-erschein .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards
}

@keyframes einstieg-erschein {
    from {
        opacity: 0;
        transform: translateX(-60px)
    }
}

.kontakt .bild-streifen {
    position: relative;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 8px 48px 1px #cb48fb1c
}

.kontakt .bild-streifen::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, #103f3cd9 0%, transparent 100%);
    z-index: 1
}

.kontakt .bild-ersatz {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #103F3C 0%, #CB48FB 50%, #FED991 100%);
    position: relative
}

.kontakt .bild-ersatz::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 20px;
    width: 60px;
    height: 60px;
    border: 3px solid #fed99166;
    border-radius: 50%
}

.kontakt .eck-klammer {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border-top: 4px solid #FED991;
    border-left: 4px solid #FED991;
    z-index: 2
}

.kontakt .eck-klammer-unten {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    border-bottom: 4px solid #FED991;
    border-right: 4px solid #FED991;
    z-index: 2
}

.kontakt .txt-bereich {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding-bottom: 40px
}

.kontakt .haupt-titel {
    font-size: 66px;
    line-height: 1.15;
    color: #FFF;
    margin: 0;
    font-weight: 700;
    position: relative
}

.kontakt .haupt-titel .umriss {
    color: transparent;
    -webkit-text-stroke: 2px #FFF;
    text-stroke: 2px #FFF
}

.kontakt .formular-zone {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 80px;
    padding: 80px 40px;
    position: relative;
    animation: formular-erschein .65s cubic-bezier(0.25, 0.46, 0.45, 0.94) .2s backwards
}

@keyframes formular-erschein {
    from {
        opacity: 0;
        transform: translateX(60px)
    }
}

.kontakt .formular-zone::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #CB48FB 0%, #FED991 100%)
}

.kontakt .haupt-formular {
    background: #FFF;
    padding: 40px;
    border-radius: 7px;
    box-shadow: 0 7px 28px 1px #103f3c1a;
    position: relative
}

.kontakt .formular-ueberschrift {
    font-size: 28px;
    line-height: 1.4;
    color: #103F3C;
    margin: 0 0 40px;
    font-weight: 600
}

.kontakt .feld-gruppe {
    margin-bottom: 20px
}

.kontakt .feld-etikett {
    display: block;
    font-size: 16px;
    line-height: 1.4;
    color: #103F3C;
    margin-bottom: 8px;
    font-weight: 500
}

.kontakt .feld-eingabe {
    width: 100%;
    padding: 16px;
    border: 2px solid #E8F0F0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.4;
    color: #103F3C;
    background: #FFF;
    transition: border-color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .feld-eingabe::placeholder {
    color: #103F3C;
    opacity: .4
}

.kontakt .feld-eingabe:focus {
    outline: none;
    border-color: #CB48FB;
    box-shadow: 0 3px 3px 1px #cb48fb14
}

.kontakt .feld-eingabe:hover {
    border-color: #CB48FB
}

.kontakt .feld-textbereich {
    min-height: 140px;
    resize: vertical
}

.kontakt .auswahl-wrapper {
    position: relative
}

.kontakt .feld-auswahl {
    width: 100%;
    padding: 16px;
    padding-right: 40px;
    border: 2px solid #E8F0F0;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.4;
    color: #103F3C;
    background: #FFF;
    cursor: pointer;
    appearance: none;
    transition: border-color .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .auswahl-wrapper::after {
    content: '';
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 8px solid #103F3C;
    pointer-events: none;
    transition: transform .5s ease
}

.kontakt .feld-auswahl:focus {
    outline: none;
    border-color: #CB48FB;
    box-shadow: 0 3px 3px 1px #cb48fb14
}

.kontakt .feld-auswahl:hover {
    border-color: #CB48FB
}

.kontakt .feld-auswahl:focus+.auswahl-wrapper::after {
    transform: translateY(-50%) rotate(180deg)
}

.kontakt .datenschutz-box {
    margin: 20px 0;
    display: flex;
    align-items: flex-start;
    gap: 8px
}

.kontakt .datenschutz-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    margin-top: 4px;
    cursor: pointer;
    accent-color: #CB48FB
}

.kontakt .datenschutz-text {
    font-size: 13px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0
}

.kontakt .datenschutz-text a {
    color: #CB48FB;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .5s ease
}

.kontakt .datenschutz-text a:hover {
    border-bottom-color: #CB48FB
}

.kontakt .senden-knopf {
    width: 100%;
    padding: 16px 40px;
    background: #103F3C;
    color: #FFF;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.4;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .senden-knopf::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #CB48FB;
    transition: height .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0
}

.kontakt .senden-knopf:hover::before {
    height: 100%
}

.kontakt .senden-knopf span {
    position: relative;
    z-index: 1
}

.kontakt .senden-knopf:hover {
    transform: translateY(-2px)
}

.kontakt .senden-knopf:active {
    transform: translateY(0)
}

.kontakt .rechte-spalte {
    display: flex;
    flex-direction: column;
    gap: 40px
}

.kontakt .info-karte {
    background: #FFF;
    padding: 40px;
    border-radius: 7px;
    box-shadow: 0 3px 3px 1px #103f3c14;
    position: relative;
    transition: box-shadow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .info-karte:hover {
    box-shadow: 0 8px 48px 1px #cb48fb1c;
    transform: translateY(-4px)
}

.kontakt .info-karte::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: #CB48FB;
    border-radius: 7px 0 0 7px;
    transition: width .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .info-karte:hover::before {
    width: 8px
}

.kontakt .karten-titel {
    font-size: 21px;
    line-height: 1.4;
    color: #103F3C;
    margin: 0 0 16px;
    font-weight: 600
}

.kontakt .karten-inhalt {
    font-size: 16px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0
}

.kontakt .karten-inhalt a {
    color: #CB48FB;
    text-decoration: none;
    transition: color .5s ease
}

.kontakt .karten-inhalt a:hover {
    color: #103F3C
}

.kontakt .info-symbol {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #CB48FB 0%, #FED991 100%);
    border-radius: 36px;
    position: relative;
    overflow: hidden
}

.kontakt .info-symbol::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: #FFF;
    border-radius: 36px
}

.kontakt .info-symbol svg {
    width: 24px;
    height: 24px;
    fill: #103F3C;
    position: relative;
    z-index: 1
}

.kontakt .zeitstrahl-bereich {
    padding: 80px 40px;
    background: #FFF;
    position: relative;
    clip-path: polygon(0 0, 100% 80px, 100% 100%, 0 100%);
    animation: zeitstrahl-erschein .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) .4s backwards
}

@keyframes zeitstrahl-erschein {
    from {
        opacity: 0;
        transform: translateX(-60px)
    }
}

.kontakt .zeitstrahl-bereich::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 8px;
    height: 100%;
    background: linear-gradient(180deg, #FED991 0%, #103F3C 100%)
}

.kontakt .zeitstrahl-wrapper {
    max-width: 900px;
    margin: 0 auto
}

.kontakt .zeitstrahl-ueberschrift {
    font-size: 52px;
    line-height: 1.15;
    color: #103F3C;
    margin: 0 0 80px;
    font-weight: 700;
    text-align: center
}

.kontakt .zeitstrahl-ueberschrift .akzent {
    color: #CB48FB;
    font-size: 28px;
    vertical-align: super;
    margin-left: 8px
}

.kontakt .zeitstrahl {
    position: relative;
    padding-left: 60px
}

.kontakt .zeitstrahl::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg, #CB48FB 0%, #FED991 100%)
}

.kontakt .zeitpunkt {
    position: relative;
    margin-bottom: 40px;
    padding: 20px;
    background: #F8FCFC;
    border-radius: 7px;
    transition: background .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .zeitpunkt:hover {
    background: #FFF;
    transform: translateX(8px)
}

.kontakt .zeitpunkt::before {
    content: '';
    position: absolute;
    left: -48px;
    top: 28px;
    width: 16px;
    height: 16px;
    background: #FFF;
    border: 3px solid #CB48FB;
    border-radius: 50%;
    box-shadow: 0 3px 3px 1px #cb48fb14;
    transition: transform .7s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.kontakt .zeitpunkt:hover::before {
    transform: scale(1.3);
    box-shadow: 0 7px 28px 1px #cb48fb1a
}

.kontakt .zeitpunkt.aktiv::before {
    background: #CB48FB;
    border-color: #103F3C
}

.kontakt .zeitpunkt.abgeschlossen::before {
    background: #FED991;
    border-color: #103F3C
}

.kontakt .zeitpunkt-titel {
    font-size: 21px;
    line-height: 1.4;
    color: #103F3C;
    margin: 0 0 8px;
    font-weight: 600
}

.kontakt .zeitpunkt-beschreibung {
    font-size: 16px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0
}

.kontakt .status-badge {
    display: inline-block;
    padding: 4px 16px;
    border-radius: 36px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
    margin-top: 8px
}

.kontakt .status-badge.aktiv-badge {
    background: #cb48fb26;
    color: #CB48FB
}

.kontakt .status-badge.abgeschlossen-badge {
    background: #fed9914d;
    color: #103F3C
}

.kontakt .status-badge.geplant-badge {
    background: #103f3c1a;
    color: #103F3C
}

@media (max-width: 1280px) {
    .kontakt .formular-zone {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .kontakt .rechte-spalte {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }
}

@media (max-width: 768px) {
    .kontakt .einstieg {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 80px 20px 40px
    }

    .kontakt .bild-streifen {
        height: 200px
    }

    .kontakt .txt-bereich {
        padding-bottom: 20px
    }

    .kontakt .haupt-titel {
        font-size: 52px
    }

    .kontakt .formular-zone {
        padding: 40px 20px;
        gap: 40px
    }

    .kontakt .haupt-formular {
        padding: 20px
    }

    .kontakt .rechte-spalte {
        grid-template-columns: 1fr
    }

    .kontakt .zeitstrahl-bereich {
        padding: 40px 20px
    }

    .kontakt .zeitstrahl-ueberschrift {
        font-size: 28px;
        margin-bottom: 40px
    }

    .kontakt .zeitstrahl {
        padding-left: 40px
    }

    .kontakt .zeitpunkt::before {
        left: -32px
    }
}

@media (max-width: 480px) {
    .kontakt .haupt-titel {
        font-size: 28px
    }

    .kontakt .formular-ueberschrift {
        font-size: 21px
    }

    .kontakt .zeitstrahl-ueberschrift {
        font-size: 21px
    }

    .kontakt .zeitstrahl-ueberschrift .akzent {
        font-size: 16px
    }
}

@keyframes muster-verschieb {
    0% {
        background-position: 0 0
    }

    100% {
        background-position: 40px 40px
    }
}

.kontakt .haupt-formular:hover {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, #cb48fb05 20px, #cb48fb05 40px);
    animation: muster-verschieb 8s linear infinite
}

.abt {
    max-width: 1400px;
    margin: 0 auto;
    background: #FEFEFE;
    color: #1A2421
}

.abt .lead {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 80px 40px 160px;
    gap: 40px;
    position: relative;
    overflow: hidden
}

.abt .lead::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 420px;
    height: 100%;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 50%);
    opacity: .06;
    border-radius: 7px 0 0 7px;
    z-index: 0
}

.abt .lead-txt {
    flex: 1;
    z-index: 1
}

.abt .lead-txt h1 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 20px;
    color: #103F3C;
    font-weight: 700
}

.abt .lead-txt .prob {
    font-size: 21px;
    line-height: 1.65;
    margin: 0 0 16px;
    color: #2A3E3B
}

.abt .lead-txt .sol {
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    color: #3F5855
}

.abt .lead-vis {
    width: 380px;
    flex-shrink: 0;
    position: relative;
    z-index: 1
}

.abt .lead-vis::after {
    content: '';
    position: absolute;
    top: -40px;
    right: -20px;
    width: 180px;
    height: 180px;
    border: 2px solid #CB48FB;
    border-radius: 50%;
    opacity: .2;
    z-index: -1
}

.abt .lead-vis img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    filter: saturate(0.6);
    box-shadow: 0 8px 48px 1px #cb48fb1c
}

.abt .vals {
    padding: 40px 40px 80px;
    background: #F9FAFA;
    position: relative
}

.abt .vals::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #CB48FB 0%, transparent 100%)
}

.abt .vals-hd {
    text-align: center;
    margin: 0 0 40px
}

.abt .vals-hd h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #103F3C;
    font-weight: 700
}

.abt .vals-hd p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    color: #5A6C68
}

.abt .vals-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 40px;
    align-items: start
}

.abt .val-box {
    background: #FFF;
    padding: 40px 20px;
    border-radius: 7px;
    box-shadow: 0 3px 3px 1px #103f3c14;
    transition: transform .65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative
}

.abt .val-box:hover {
    transform: translateY(-8px)
}

.abt .val-box .num {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: 13px;
    line-height: 1.15;
    color: #CB48FB;
    font-weight: 700;
    background: #FEFEFE;
    border: 1px solid #CB48FB;
    border-radius: 36px;
    padding: 4px 8px
}

.abt .val-box h3 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0 0 16px;
    color: #103F3C;
    font-weight: 700;
    text-align: center
}

.abt .val-box p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    color: #4A5D59;
    text-align: center
}

.abt .val-box.ctr {
    padding: 80px 40px;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%);
    color: #FFF;
    box-shadow: 0 7px 28px 1px #cb48fb1a
}

.abt .val-box.ctr h3 {
    color: #FFF;
    font-weight: 300
}

.abt .val-box.ctr p {
    color: #E8F1F0
}

.abt .val-box.ctr .num {
    background: #ffffff26;
    color: #FED991;
    border-color: #FED991
}

.abt .story {
    padding: 80px 40px;
    background: #FFF;
    position: relative;
    overflow: hidden
}

.abt .story::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(/picture_assets/tmpbackgroundlive.jpg);
    background-size: cover;
    background-position: center;
    opacity: .03;
    z-index: 0
}

.abt .story-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    gap: 80px;
    align-items: flex-start
}

.abt .story-txt {
    flex: 1
}

.abt .story-txt h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 20px;
    color: #103F3C;
    font-weight: 700;
    text-align: left
}

.abt .story-txt p {
    font-size: 16px;
    line-height: 1.85;
    margin: 0 0 16px;
    color: #3A4D49
}

.abt .story-txt p:last-child {
    margin: 0
}

.abt .story-imgs {
    width: 480px;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.abt .story-imgs img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 3px 3px 1px #103f3c14
}

.abt .story-imgs img:hover {
    box-shadow: 0 7px 28px 1px #cb48fb1a;
    transition: box-shadow .7s ease
}

.abt .rsrc {
    padding: 80px 40px;
    background: #F4F6F6;
    position: relative;
    animation: edgeglow 6s ease-in-out infinite
}

@keyframes edgeglow {

    0%,
    100% {
        box-shadow: inset 0 0 0 0 #cb48fb00
    }

    50% {
        box-shadow: inset 0 0 40px 0 #cb48fb14
    }
}

.abt .rsrc-hd {
    text-align: center;
    margin: 0 0 40px
}

.abt .rsrc-hd h2 {
    font-size: 28px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #103F3C;
    font-weight: 300
}

.abt .rsrc-hd p {
    font-size: 16px;
    line-height: 1.65;
    margin: 0;
    color: #5A6C68
}

.abt .rsrc-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.abt .rsrc-card {
    background: #FFF;
    border-radius: 7px;
    padding: 20px;
    box-shadow: 0 3px 3px 1px #103f3c14;
    transition: opacity .6s ease, box-shadow .6s ease;
    position: relative;
    overflow: hidden
}

.abt .rsrc-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #CB48FB;
    transition: height .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0
}

.abt .rsrc-card:hover::before {
    height: 4px
}

.abt .rsrc-card:hover {
    box-shadow: 0 7px 28px 1px #cb48fb1a
}

.abt .rsrc-cards:hover .rsrc-card:not(:hover) {
    opacity: .5
}

.abt .rsrc-card h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #103F3C;
    font-weight: 700;
    position: relative;
    z-index: 1
}

.abt .rsrc-card .meta {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #7A8B87;
    position: relative;
    z-index: 1
}

.abt .rsrc-card p {
    font-size: 13px;
    line-height: 1.65;
    margin: 0;
    color: #4A5D59;
    position: relative;
    z-index: 1
}

.abt .rsrc-card .cnt {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 28px;
    height: 28px;
    background: #FED991;
    color: #103F3C;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 700;
    z-index: 1
}

@media (max-width: 1280px) {
    .abt .lead {
        padding: 60px 40px 120px
    }

    .abt .lead-vis {
        width: 320px
    }

    .abt .lead-vis img {
        height: 440px
    }

    .abt .vals-grid {
        grid-template-columns: 1fr
    }

    .abt .val-box.ctr {
        padding: 40px 20px
    }

    .abt .story-inner {
        gap: 40px
    }

    .abt .story-imgs {
        width: 360px
    }

    .abt .rsrc-cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media (max-width: 768px) {
    .abt .lead {
        flex-direction: column;
        padding: 40px 20px 80px
    }

    .abt .lead::before {
        width: 100%;
        height: 200px;
        border-radius: 0
    }

    .abt .lead-txt h1 {
        font-size: 28px
    }

    .abt .lead-txt .prob {
        font-size: 16px
    }

    .abt .lead-vis {
        width: 100%
    }

    .abt .lead-vis img {
        height: 360px
    }

    .abt .vals {
        padding: 40px 20px
    }

    .abt .vals-grid {
        gap: 20px
    }

    .abt .story {
        padding: 40px 20px
    }

    .abt .story-inner {
        flex-direction: column;
        gap: 40px
    }

    .abt .story-imgs {
        width: 100%
    }

    .abt .rsrc {
        padding: 40px 20px
    }

    .abt .rsrc-cards {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .abt .lead {
        padding: 40px 16px 60px
    }

    .abt .lead-txt h1 {
        font-size: 21px
    }

    .abt .vals {
        padding: 40px 16px
    }

    .abt .story {
        padding: 40px 16px
    }

    .abt .story-imgs {
        grid-template-columns: 1fr
    }

    .abt .rsrc {
        padding: 40px 16px
    }
}

.exp-opn {
    background: #fefefe;
    color: #1a2421
}

.exp-opn .tblock {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    gap: 40px;
    position: relative
}

.exp-opn .tblock-txt {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-right: 40px;
    position: relative
}

.exp-opn .tblock-txt::before,
.exp-opn .tblock-txt::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid #CB48FB
}

.exp-opn .tblock-txt::before {
    top: 0;
    left: 0;
    border-right: none;
    border-bottom: none
}

.exp-opn .tblock-txt::after {
    bottom: 0;
    left: 0;
    border-right: none;
    border-top: none
}

.exp-opn .tblock h1 {
    font-size: 66px;
    line-height: 1.15;
    margin: 0 0 20px;
    color: #103F3C;
    font-weight: 700
}

.exp-opn .tblock-desc {
    font-size: 21px;
    line-height: 1.65;
    color: #2a3a37;
    margin: 0
}

.exp-opn .tblock-img {
    width: 420px;
    flex-shrink: 0;
    position: relative
}

.exp-opn .tblock-img::before,
.exp-opn .tblock-img::after {
    content: '';
    position: absolute;
    width: 36px;
    height: 36px;
    border: 2px solid #CB48FB;
    z-index: 2
}

.exp-opn .tblock-img::before {
    top: 0;
    right: 0;
    border-left: none;
    border-bottom: none
}

.exp-opn .tblock-img::after {
    bottom: 0;
    right: 0;
    border-left: none;
    border-top: none
}

.exp-opn .tblock-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: 7px
}

.exp-opn .divider-tri {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #CB48FB 0%, #CB48FB 50%, #103F3C 50%, #103F3C 100%);
    position: relative
}

.exp-opn .divider-tri svg {
    width: 80px;
    height: 40px;
    fill: #fefefe
}

.exp-opn .articles-grid {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    background: #f8f9fa
}

.exp-opn .articles-grid h2 {
    font-size: 52px;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 40px;
    color: #103F3C;
    font-weight: 700
}

.exp-opn .grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px
}

.exp-opn .art-card {
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 3px 3px 1px #cb48fb14;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.exp-opn .art-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 48px 1px #cb48fb1c
}

.exp-opn .art-card-img {
    width: 100%;
    height: 240px;
    overflow: hidden;
    position: relative
}

.exp-opn .art-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .7s ease
}

.exp-opn .art-card:hover .art-card-img img {
    transform: scale(1.05)
}

.exp-opn .art-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: #cb48fbf2;
    color: #fff;
    padding: 4px 16px;
    border-radius: 36px;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px)
}

.exp-opn .art-card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1
}

.exp-opn .art-card h3 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #103F3C;
    font-weight: 700
}

.exp-opn .art-card h3 a {
    color: inherit;
    text-decoration: none;
    transition: color .5s ease;
    position: relative
}

.exp-opn .art-card h3 a::after {
    content: '';
    position: absolute;
    left: -4px;
    right: -4px;
    top: -4px;
    bottom: -4px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: border-color .5s ease
}

.exp-opn .art-card h3 a:hover::after {
    border-color: #CB48FB
}

.exp-opn .art-card-desc {
    font-size: 16px;
    line-height: 1.65;
    color: #4a5a57;
    margin: 0 0 16px;
    flex: 1
}

.exp-opn .art-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px dashed #e0e4e3;
    font-size: 13px;
    color: #6a7a77
}

.exp-opn .art-date {
    display: flex;
    align-items: center;
    gap: 8px
}

.exp-opn .art-date svg {
    width: 16px;
    height: 16px;
    fill: #CB48FB
}

.exp-opn .art-likes {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: #103F3C
}

.exp-opn .art-likes svg {
    width: 16px;
    height: 16px;
    fill: #CB48FB
}

.exp-opn .insight-sec {
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 40px;
    position: relative
}

.exp-opn .insight-sec::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%)
}

.exp-opn .insight-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center
}

.exp-opn .insight-txt h2 {
    font-size: 52px;
    line-height: 1.15;
    margin: 0 0 20px;
    color: #103F3C;
    font-weight: 300
}

.exp-opn .insight-txt p {
    font-size: 16px;
    line-height: 1.85;
    color: #3a4a47;
    margin: 0 0 16px
}

.exp-opn .insight-txt p:last-child {
    margin-bottom: 0
}

.exp-opn .insight-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.exp-opn .stat-box {
    background: #fff;
    padding: 40px 20px;
    border-radius: 7px;
    text-align: center;
    box-shadow: 0 7px 28px 1px #103f3c1a;
    position: relative;
    overflow: hidden;
    transition: background .7s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.exp-opn .stat-box::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 0;
    background: #FED991;
    transition: height .7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 0
}

.exp-opn .stat-box:hover::before {
    height: 100%
}

.exp-opn .stat-box>* {
    position: relative;
    z-index: 1
}

.exp-opn .stat-num {
    font-size: 52px;
    line-height: 1.15;
    font-weight: 700;
    color: #CB48FB;
    margin: 0 0 8px
}

.exp-opn .stat-label {
    font-size: 16px;
    line-height: 1.4;
    color: #103F3C;
    margin: 0;
    font-weight: 600
}

.exp-opn .connect-line {
    position: relative;
    padding: 40px 0
}

.exp-opn .connect-line::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: repeating-linear-gradient(to bottom, #CB48FB 0px, #CB48FB 8px, transparent 8px, transparent 16px);
    transform: translateX(-50%)
}

.exp-opn .expertise-sec {
    background: #103F3C;
    padding: 80px 40px;
    position: relative
}

.exp-opn .expertise-sec::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 8px;
    background: linear-gradient(180deg, #FED991 0%, #CB48FB 100%)
}

.exp-opn .expertise-inner {
    max-width: 1400px;
    margin: 0 auto
}

.exp-opn .expertise-sec h2 {
    font-size: 52px;
    line-height: 1.15;
    text-align: center;
    margin: 0 0 40px;
    color: #fff;
    font-weight: 700
}

.exp-opn .expertise-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

.exp-opn .exp-item {
    background: #ffffff0d;
    padding: 40px 20px;
    border-radius: 7px;
    text-align: center;
    border: 2px solid #cb48fb33;
    transition: background .6s ease, border-color .6s ease, transform .6s ease
}

.exp-opn .exp-item:hover {
    background: #cb48fb1a;
    border-color: #CB48FB;
    transform: scale(1.03)
}

.exp-opn .exp-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #cb48fb26;
    border-radius: 36px;
    transition: background .6s ease
}

.exp-opn .exp-item:hover .exp-icon {
    background: #cb48fb4d
}

.exp-opn .exp-icon svg {
    width: 32px;
    height: 32px;
    fill: #FED991
}

.exp-opn .exp-item h3 {
    font-size: 21px;
    line-height: 1.4;
    margin: 0 0 8px;
    color: #fff;
    font-weight: 700
}

.exp-opn .exp-item p {
    font-size: 16px;
    line-height: 1.65;
    color: #fffc;
    margin: 0
}

@media (max-width: 1280px) {
    .exp-opn .tblock {
        padding: 60px 40px
    }

    .exp-opn .tblock-img {
        width: 360px
    }

    .exp-opn .grid-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px
    }

    .exp-opn .expertise-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }
}

@media (max-width: 768px) {
    .exp-opn .tblock {
        flex-direction: column;
        padding: 40px 20px;
        gap: 40px
    }

    .exp-opn .tblock-txt {
        padding-right: 0
    }

    .exp-opn .tblock h1 {
        font-size: 52px
    }

    .exp-opn .tblock-desc {
        font-size: 16px
    }

    .exp-opn .tblock-img {
        width: 100%
    }

    .exp-opn .articles-grid {
        padding: 60px 20px
    }

    .exp-opn .articles-grid h2 {
        font-size: 28px
    }

    .exp-opn .grid-container {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .exp-opn .insight-sec {
        padding: 60px 20px
    }

    .exp-opn .insight-wrap {
        grid-template-columns: 1fr;
        gap: 40px
    }

    .exp-opn .insight-txt h2 {
        font-size: 28px
    }

    .exp-opn .expertise-sec {
        padding: 60px 20px
    }

    .exp-opn .expertise-sec h2 {
        font-size: 28px
    }

    .exp-opn .expertise-grid {
        grid-template-columns: 1fr
    }
}

@media (max-width: 480px) {
    .exp-opn .tblock {
        padding: 40px 16px
    }

    .exp-opn .tblock h1 {
        font-size: 28px
    }

    .exp-opn .tblock-desc {
        font-size: 16px
    }

    .exp-opn .articles-grid {
        padding: 40px 16px
    }

    .exp-opn .art-card-img {
        height: 200px
    }

    .exp-opn .insight-sec {
        padding: 40px 16px
    }

    .exp-opn .insight-visual {
        grid-template-columns: 1fr
    }

    .exp-opn .expertise-sec {
        padding: 40px 16px
    }

    .exp-opn .stat-num {
        font-size: 28px
    }
}

.first {
    margin: 0;
    padding: 0;
    background: #FAFBFC;
    color: #1A2B29;
    overflow-x: clip
}

.first .opening {
    position: relative;
    padding: 80px 20px;
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%);
    overflow: hidden
}

.first .opening::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 800px;
    background: repeating-radial-gradient(circle at center, transparent 0px, transparent 40px, #ffffff08 40px, #ffffff08 42px);
    transform: translate(-50%, -50%);
    pointer-events: none
}

.first .opening::after {
    content: '';
    position: absolute;
    top: 16px;
    right: 16px;
    width: 180px;
    height: 180px;
    border-right: 1px solid #ffffff26;
    border-bottom: 3px solid #ffffff26;
    pointer-events: none
}

.first .opening-inner {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    text-align: center;
    animation: reveal-mask .7s cubic-bezier(0.25, 0.46, 0.45, 0.94) both
}

@keyframes reveal-mask {
    0% {
        clip-path: circle(0% at center);
        opacity: 0
    }

    100% {
        clip-path: circle(100% at center);
        opacity: 1
    }
}

.first .opening-num {
    font-size: 66px;
    line-height: 1.15;
    color: #FED991;
    font-weight: 700;
    margin: 0 0 16px
}

.first .opening-title {
    font-size: 52px;
    line-height: 1.4;
    color: #FFF;
    font-weight: 600;
    margin: 0 0 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto
}

.first .opening-desc {
    font-size: 21px;
    line-height: 1.65;
    color: #ffffffeb;
    margin: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto
}

.first .pathways {
    padding: 80px 20px;
    background: #FFF;
    position: relative
}

.first .pathways-wrap {
    max-width: 1400px;
    margin: 0 auto
}

.first .pathways-head {
    font-size: 52px;
    line-height: 1.4;
    color: #103F3C;
    font-weight: 700;
    text-align: center;
    margin: 0 0 16px
}

.first .pathways-sub {
    font-size: 21px;
    line-height: 1.65;
    color: #4A5B59;
    text-align: center;
    margin: 0 0 80px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto
}

.first .pathways-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px
}

.first .path-card {
    background: #F8F9FA;
    border-radius: 7px;
    padding: 40px;
    position: relative;
    box-shadow: 0 3px 3px 1px #cb48fb14;
    transition: all .65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border: 2px solid transparent
}

.first .path-card:hover {
    box-shadow: 0 7px 28px 1px #cb48fb1a 0 0 0 2px #CB48FB, 0 0 0 4px #cb48fb4d;
    border-color: #CB48FB;
    transform: translateY(-4px)
}

.first .path-card:hover::after {
    opacity: 1;
    transition-delay: .15s
}

.first .path-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 7px;
    border: 2px solid #CB48FB;
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none
}

.first .path-visual {
    width: 100%;
    height: 280px;
    border-radius: 4px;
    margin: 0 0 20px;
    overflow: hidden;
    box-shadow: 0 3px 3px 1px #103f3c14
}

.first .path-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .7s ease
}

.first .path-card:hover .path-visual img {
    transform: scale(1.05)
}

.first .path-label {
    font-size: 13px;
    line-height: 1.4;
    color: #CB48FB;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px
}

.first .path-name {
    font-size: 28px;
    line-height: 1.4;
    color: #103F3C;
    font-weight: 600;
    margin: 0 0 16px
}

.first .path-text {
    font-size: 16px;
    line-height: 1.65;
    color: #4A5B59;
    margin: 0
}

.first .investment {
    padding: 80px 20px;
    background: linear-gradient(180deg, #F8F9FA 0%, #FFF 100%);
    position: relative
}

.first .investment-container {
    max-width: 1400px;
    margin: 0 auto
}

.first .investment-title {
    font-size: 52px;
    line-height: 1.4;
    color: #103F3C;
    font-weight: 300;
    text-align: center;
    margin: 0 0 80px
}

.first .investment-flex {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center
}

.first .inv-tier {
    width: 100%;
    max-width: 900px;
    background: #FFF;
    border-radius: 36px;
    padding: 40px;
    box-shadow: 0 7px 28px 1px #103f3c1a;
    position: relative;
    transition: transform .6s ease, box-shadow .6s ease
}

.first .inv-tier:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 48px 1px #103f3c1c
}

.first .inv-tier.featured {
    background: linear-gradient(135deg, #CB48FB 0%, #9B36C9 100%);
    color: #FFF;
    padding: 80px 40px
}

.first .inv-tier-head {
    font-size: 28px;
    line-height: 1.4;
    color: #103F3C;
    font-weight: 700;
    margin: 0 0 8px;
    text-align: left
}

.first .inv-tier.featured .inv-tier-head {
    color: #FFF;
    font-size: 52px
}

.first .inv-tier-price {
    font-size: 66px;
    line-height: 1.15;
    color: #CB48FB;
    font-weight: 700;
    margin: 0 0 16px;
    text-align: left
}

.first .inv-tier.featured .inv-tier-price {
    color: #FED991
}

.first .inv-tier-detail {
    font-size: 16px;
    line-height: 1.65;
    color: #4A5B59;
    margin: 0 0 20px;
    text-align: left
}

.first .inv-tier.featured .inv-tier-detail {
    color: #ffffffe6;
    font-size: 21px
}

.first .inv-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left
}

.first .inv-feat {
    display: flex;
    align-items: flex-start;
    gap: 16px
}

.first .inv-feat-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: #CB48FB;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 4px
}

.first .inv-tier.featured .inv-feat-icon {
    background: #FED991
}

.first .inv-feat-icon svg {
    width: 14px;
    height: 14px;
    fill: #FFF
}

.first .inv-tier.featured .inv-feat-icon svg {
    fill: #103F3C
}

.first .inv-feat-text {
    font-size: 16px;
    line-height: 1.65;
    color: #4A5B59;
    margin: 0
}

.first .inv-tier.featured .inv-feat-text {
    color: #fffffff2;
    font-size: 21px
}

.first .transition-zone {
    padding: 80px 20px;
    background: #103F3C;
    position: relative;
    overflow: hidden
}

.first .transition-zone::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, #CB48FB 50%, transparent 100%)
}

.first .transition-zone::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, transparent 0%, #FED991 50%, transparent 100%)
}

.first .transition-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    align-items: center
}

.first .transition-content {
    text-align: left
}

.first .transition-head {
    font-size: 52px;
    line-height: 1.4;
    color: #FFF;
    font-weight: 600;
    margin: 0 0 20px
}

.first .transition-body {
    font-size: 21px;
    line-height: 1.85;
    color: #ffffffe0;
    margin: 0 0 40px
}

.first .transition-quote {
    background: #ffffff0d;
    border-radius: 7px;
    padding: 40px;
    border-left: 4px solid #FED991;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: inset 0 2px 4px #0000001a
}

.first .quote-text {
    font-size: 21px;
    line-height: 1.85;
    color: #FFF;
    margin: 0 0 20px;
    font-style: italic
}

.first .quote-accent {
    color: #FED991;
    font-weight: 700;
    font-style: normal;
    position: relative;
    display: inline-block
}

.first .quote-accent::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #FED991
}

.first .quote-author {
    font-size: 16px;
    line-height: 1.4;
    color: #CB48FB;
    margin: 0;
    font-weight: 600
}

.first .transition-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px
}

.first .trans-img-wrap {
    border-radius: 7px;
    overflow: hidden;
    box-shadow: 0 7px 28px 1px #cb48fb1a;
    position: relative
}

.first .trans-img-wrap:first-child {
    grid-column: 1 / 2;
    grid-row: 1 / 3
}

.first .trans-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform .8s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.first .trans-img-wrap:hover img {
    transform: scale(1.08)
}

.first .trans-img-wrap:first-child {
    height: 100%
}

.first .trans-img-wrap:nth-child(2),
.first .trans-img-wrap:nth-child(3) {
    height: 220px
}

@media (min-width: 768px) {
    .first .opening {
        padding: 120px 40px
    }

    .first .pathways {
        padding: 120px 40px
    }

    .first .pathways-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .first .investment {
        padding: 120px 40px
    }

    .first .transition-zone {
        padding: 120px 40px
    }

    .first .transition-inner {
        grid-template-columns: 1fr 1fr;
        gap: 80px
    }
}

@media (min-width: 1280px) {
    .first .pathways-grid {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media (max-width: 767px) {
    .first .opening-num {
        font-size: 52px
    }

    .first .opening-title {
        font-size: 28px
    }

    .first .opening-desc {
        font-size: 16px
    }

    .first .pathways-head {
        font-size: 28px
    }

    .first .pathways-sub {
        font-size: 16px;
        margin-bottom: 40px
    }

    .first .path-card {
        padding: 20px
    }

    .first .path-visual {
        height: 200px
    }

    .first .path-name {
        font-size: 21px
    }

    .first .investment-title {
        font-size: 28px;
        margin-bottom: 40px
    }

    .first .inv-tier {
        padding: 20px
    }

    .first .inv-tier.featured {
        padding: 40px 20px
    }

    .first .inv-tier-head {
        font-size: 21px
    }

    .first .inv-tier.featured .inv-tier-head {
        font-size: 28px
    }

    .first .inv-tier-price {
        font-size: 52px
    }

    .first .inv-tier.featured .inv-tier-detail {
        font-size: 16px
    }

    .first .inv-tier.featured .inv-feat-text {
        font-size: 16px
    }

    .first .transition-head {
        font-size: 28px
    }

    .first .transition-body {
        font-size: 16px
    }

    .first .quote-text {
        font-size: 16px
    }

    .first .transition-images {
        grid-template-columns: 1fr
    }

    .first .trans-img-wrap:first-child {
        grid-column: 1;
        grid-row: 1;
        height: 280px
    }

    .first .trans-img-wrap:nth-child(2),
    .first .trans-img-wrap:nth-child(3) {
        height: 200px
    }
}

.success-page {
    background: linear-gradient(180deg, #CB48FB 0%, #103F3C 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px
}

.success-page .confirm-box {
    background: #fff;
    max-width: 680px;
    width: 100%;
    padding: 80px 40px;
    border-radius: 7px;
    box-shadow: 0 8px 48px 1px #cb48fb1c;
    text-align: center
}

.success-page .icon-wrap {
    width: 88px;
    height: 88px;
    margin: 0 auto 40px;
    border-radius: 36px;
    background: #cb48fb1f;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative
}

.success-page .icon-wrap svg {
    width: 44px;
    height: 44px;
    fill: none;
    stroke: #CB48FB;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.success-page .main-title {
    font-size: 52px;
    line-height: 1.15;
    color: #103F3C;
    margin: 0 0 16px;
    font-weight: 700
}

.success-page .desc-text {
    font-size: 21px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0 0 40px;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto
}

.success-page .info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin: 0 0 40px;
    text-align: left
}

.success-page .info-item {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 4px
}

.success-page .info-label {
    font-size: 13px;
    line-height: 1.4;
    color: #103f3c99;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 8px
}

.success-page .info-value {
    font-size: 16px;
    line-height: 1.4;
    color: #103F3C;
    margin: 0;
    font-weight: 600
}

.success-page .btn-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center
}

.success-page .btn-primary {
    background: #CB48FB;
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    padding: 16px 40px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    position: relative;
    overflow: hidden;
    transition: transform .6s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.success-page .btn-primary::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: #103F3C;
    transition: height .7s ease;
    z-index: 0
}

.success-page .btn-primary:hover::before {
    height: 100%
}

.success-page .btn-primary span {
    position: relative;
    z-index: 1
}

.success-page .btn-secondary {
    background: transparent;
    color: #103F3C;
    font-size: 16px;
    line-height: 1.4;
    padding: 16px 40px;
    border: 2px solid #103F3C;
    border-radius: 4px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    font-weight: 600;
    transition: background .5s ease, color .5s ease
}

.success-page .btn-secondary:hover {
    background: #103F3C;
    color: #fff
}

.success-page .contact-note {
    margin: 40px 0 0;
    padding: 20px;
    background: #fed99133;
    border-radius: 4px
}

.success-page .contact-note p {
    font-size: 16px;
    line-height: 1.65;
    color: #103F3C;
    margin: 0
}

.success-page .contact-link {
    color: #CB48FB;
    text-decoration: none;
    font-weight: 600;
    position: relative;
    transition: color .6s ease
}

.success-page .contact-link:hover {
    color: #103F3C
}

@media (min-width: 768px) {
    .success-page .info-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px
    }

    .success-page .btn-group {
        flex-direction: row;
        justify-content: center
    }
}

@media (max-width: 480px) {
    .success-page .confirm-box {
        padding: 40px 20px
    }

    .success-page .main-title {
        font-size: 28px
    }

    .success-page .desc-text {
        font-size: 16px
    }
}