.shopware-update-page {
    .btn-primary-cta {
        background-color: var(--heptacom-secondary);
        border-color: var(--heptacom-secondary);
    }
}

/* ── Aurora ──────────────────────────────────────────────────────────────── */
@property --su-a1x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 18%;
}

@property --su-a1y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 15%;
}

@property --su-a2x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 76%;
}

@property --su-a2y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 52%;
}

@property --su-a3x {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 38%;
}

@property --su-a3y {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 82%;
}

@keyframes su-aurora-1 {
    0%   { --su-a1x: 18%; --su-a1y: 15%; }
    50%  { --su-a1x: 40%; --su-a1y: 55%; }
    100% { --su-a1x: 65%; --su-a1y: 8%;  }
}

@keyframes su-aurora-2 {
    0%   { --su-a2x: 76%; --su-a2y: 52%; }
    50%  { --su-a2x: 50%; --su-a2y: 10%; }
    100% { --su-a2x: 18%; --su-a2y: 72%; }
}

@keyframes su-aurora-3 {
    0%   { --su-a3x: 38%; --su-a3y: 82%; }
    50%  { --su-a3x: 70%; --su-a3y: 60%; }
    100% { --su-a3x: 15%; --su-a3y: 90%; }
}

/* Dark section */
.su-dark-section {
    background: radial-gradient(ellipse at 68% 62%, #0a2535 0%, #05111e 40%, #010810 100%);
    background-attachment: fixed;
    position: relative;
    --sx: -9999px;
    --sy: -9999px;
}

/* ── Aurora (hinter dem Inhalt, viewport-relativ via fixed) ──────────────── */
.su-dark-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: screen;
    background: radial-gradient(ellipse 42% 38% at var(--su-a1x) var(--su-a1y), rgba(0, 80, 170, 0.44) 0%, transparent 50%),
    radial-gradient(ellipse 38% 44% at var(--su-a2x) var(--su-a2y), rgba(0, 100, 190, 0.33) 0%, transparent 50%),
    radial-gradient(ellipse 40% 38% at var(--su-a3x) var(--su-a3y), rgba(10, 60, 150, 0.30) 0%, transparent 50%);
    background-attachment: fixed;
    animation:
        su-aurora-1 22s ease-in-out infinite alternate,
        su-aurora-2 17s ease-in-out infinite alternate,
        su-aurora-3 29s ease-in-out infinite alternate;
}

/* ── Cursor Spotlight ────────────────────────────────────────────────────── */
.su-dark-section::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(
            500px circle at var(--sx) var(--sy),
            rgba(255, 255, 255, 0.04),
            transparent 55%
    );
    z-index: 2;
}

/* ── Scroll Reveals ──────────────────────────────────────────────────────── */
.su-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease;
}

.su-reveal.su-visible {
    opacity: 1;
    transform: none;
}

.canvas-higher-index {
    z-index: 2;
    position: relative;
}

/* Inhalte in dunklen Sektionen liegen über der Aurora (z-index: 1) */
.su-dark-section > .container,
.su-platin-card__body,
.su-platin-card__footer {
    position: relative;
    z-index: 2;
}

.footer-content {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
}

#ready-to-update {
    height: 100vH;
}

/* Easter egg: heavy bouncy-ball jump */
@keyframes su-bounce {
    0% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
    10% {
        transform: translateY(-36px) scaleX(0.92) scaleY(1.08);
    }
    22% {
        transform: translateY(0) scaleX(1.14) scaleY(0.88);
    }
    33% {
        transform: translateY(-18px) scaleX(0.95) scaleY(1.05);
    }
    44% {
        transform: translateY(0) scaleX(1.08) scaleY(0.94);
    }
    53% {
        transform: translateY(-8px) scaleX(0.98) scaleY(1.02);
    }
    62% {
        transform: translateY(0) scaleX(1.04) scaleY(0.97);
    }
    72% {
        transform: translateY(-3px) scaleX(1) scaleY(1);
    }
    83% {
        transform: translateY(0) scaleX(1.02) scaleY(0.99);
    }
    100% {
        transform: translateY(0) scaleX(1) scaleY(1);
    }
}

.su-easter-bounce {
    animation: su-bounce 1.4s ease-out forwards;
    display: inline-block;
}

/* Hero */
.su-hero {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 80px;
    padding-bottom: 80px;
    position: relative;
}

/* Section padding */
.su-section {
    padding: 5rem 0;
}

.su-section-lg {
    padding: 6rem 0;
}

/* Color utility */
.su-color-secondary {
    color: var(--heptacom-secondary);
}

/* Eyebrow labels */
.su-eyebrow {
    color: var(--heptacom-secondary);
    letter-spacing: 0.2em;
}

/* Scroll indicator */
.su-scroll-indicator {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
}

.su-scroll-line {
    width: 1px;
    height: 32px;
    background-color: rgba(255, 255, 255, 0.3);
}

.su-scroll-label {
    opacity: 0.4;
    letter-spacing: 0.2em;
}

/* Text opacity variants */
.su-text-dim {
    opacity: 0.55;
}

.su-text-dim-light {
    opacity: 0.6;
}

.su-text-dim-hero {
    opacity: 0.7;
}

.su-text-dim-soft {
    opacity: 0.75;
}

.su-text-dim-faint {
    opacity: 0.35;
}

/* max-width constrained leads */
.su-lead-hero {
    max-width: 500px;
}

.su-lead-intro {
    max-width: 560px;
}

.su-lead-cta {
    max-width: 420px;
}

/* Heading highlight – used inside a dimmed heading */
.su-heading-highlight {
    opacity: 1;
    color: var(--heptacom-secondary);
}

/* Stats bar */
.su-stats-bar {
    border-bottom: 1px solid var(--heptacom-grey);
}

.su-stat-number {
    line-height: 1;
}

.su-stat-divider {
    @media (min-width: 769px) {
        border-right: 1px solid var(--heptacom-grey);
    }
}

.su-stat-link {
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease;
    display: block;
}

.su-stat-link:hover {
    transform: translateY(-4px);
    color: inherit;
}

.su-stat-link:hover .su-stat-number {
    color: var(--heptacom-secondary);
    transition: color 0.2s ease;
}

/* Vertical divider for secondary section */
.su-vertical-divider {
    width: 1px;
    height: 120px;
    background-color: rgba(255, 255, 255, 0.35);
}

/* Process step rows */
.su-step-row {
    border-top: 1px solid var(--heptacom-grey);
}

.su-step-row--last {
    border-bottom: 1px solid var(--heptacom-grey);
}

.su-step-number-col {
    width: 90px;
    min-width: 90px;
}

.su-step-num {
    display: block;
    font-size: 3.5rem;
    font-weight: 300;
    line-height: 2rem;
    font-family: "jaf-domus-titling-web", sans-serif;
    color: var(--heptacom-grey);
}

.su-step-num--active {
    color: #e7af00;
    font-weight: 500;
}

/* Factor grid */
.su-factor-grid {
    display: grid;
    grid-template-columns: 1fr;
}

.su-factor-item {
    padding: 2rem;
    border-bottom: 1px solid #4C4C4B;
    transition: background 0.3s ease;

    &:nth-child(even) {
        @media (min-width: 769px) {
            border-left: 1px solid #4C4C4B;
        }
    }
}

@media (min-width: 769px) {
    .su-factor-grid {
        grid-template-columns: 1fr 1fr;
    }

    .su-factor-item {
        padding: 2.75rem 3rem;
    }

    .su-factor-item--full {
        grid-column: 1 / -1;
    }
}

.su-ghost-num {
    display: block;
    font-size: 4.5rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 1.25rem;
    font-family: "jaf-domus-titling-web", sans-serif;
}

/* IDEAL PARTNER SECTION */
.ideal-partner-section {
    h2 {
        font-weight: 300;
        line-height: 2.75rem;
        color: #7F7F7F;

        .su-heading-highlight {
            color: #0070C9;
        }
    }
}

/* UPDATE NOW */
.update-now-section {
    h2 {
        font-weight: 300;
        line-height: 2.75rem;
    }
}

/* DURATION INFLUCEN */
.duration-influence-section {
    .container {
        .container-minimal {
            max-width: 800px;
            margin: 0 auto;
        }
    }
}


/* Cards */
.su-card {
    border-radius: 10px;
    padding: 2rem;
}

.su-card-sm {
    border-radius: 4px;
    padding: 1.5rem;
}

/* Platin partner card */
.su-platin-card {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.su-platin-card__body {
    padding: 2rem;
    flex: 1;
}

.su-platin-card__footer {
    padding: 1.25rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: center;
}

/* Badge (small label pill) */
.su-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 3rem;
    width: fit-content;
    margin: 0 auto;
    font-size: 0.875rem;
}

/* Team placeholder */
.su-team-placeholder {
    background-color: #ccc;
    border-radius: 10px;
    height: 220px;
}

/* Team photo */
.su-team-photo {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: top;
    border-radius: 10px;
    display: block;
}

/* Flip card */
.su-flip-card {
    perspective: 1000px;
    aspect-ratio: 4 / 5;
}

.su-flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.85s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.su-flip-card:hover .su-flip-card-inner {
    transform: rotateY(180deg);
}

.su-flip-card--reversed .su-flip-card-inner {
    transform: rotateY(180deg);
}

.su-flip-card--reversed:hover .su-flip-card-inner {
    transform: rotateY(360deg);
}

.su-flip-card-front,
.su-flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.su-flip-card-front picture {
    display: block;
    width: 100%;
    height: 100%;
}

.su-flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

.su-flip-card-back {
    transform: rotateY(180deg);
    background-color: #fff;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    text-align: center;

    ul {
        text-align: left;
    }
}

/* Icon box */
.su-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
}

.su-icon-img {
    width: 22px;
    height: 22px;
    filter: brightness(0) invert(1);
}

/* Feature card */
.su-feature-card {
    height: 100%;
    padding: 2rem;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);

    &.go-live-step {
        box-shadow: 0 2px 12px rgb(66 66 66 / 75%);
    }
}

/* Duration card */
.su-duration-card {
    margin: 0 auto -4rem auto;
    max-width: 950px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.14);
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    column-gap: 2.5rem;
    row-gap: 1rem;
    position: relative;
    z-index: 3;
    flex-wrap: wrap;
}

.su-duration-card__number {
    font-family: "jaf-domus-titling-web", sans-serif;
    font-size: 2.75rem;
    font-weight: 300;
    line-height: 1;
    color: var(--heptacom-primary);
}

.su-duration-card__label {
    font-size: 0.85rem;
    color: #888;
    letter-spacing: 0.05em;
    margin-top: 0.4rem;
}

.su-duration-card__divider {
    width: 2px;
    height: 60px;
    background: var(--heptacom-secondary);
    flex-shrink: 0;
}

.su-duration-card__title {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.35rem;
}

.su-duration-card__text {
    font-size: 0.9rem;
    color: #666;
}

.btn-round {
    border-radius: 3rem !important;
}

/* Override general.css: contact tab sits at top: 20% on this page */
.fixed-contact {
    &.telefon {
        top: 20%!important;
    }
}

/* Sticky partner badges */
.su-partner-badge {
    position: fixed;
    right: 0;
    bottom: 10%;
    z-index: 1029;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.su-partner-badge img {
    width: 70px;
    height: auto;
    display: block;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.big-text {
    font-size: 4rem;
    line-height: 3.5rem;
}

.su-minimal-footer {
    margin-top: 5rem;
    padding-top: 5rem;

    .btn-footer {
        font-weight: 300;
        font-size: 0.875rem;
    }
}