/* Buttons */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border: 1px solid transparent;
    border-radius: var(--radius-medium);
    font-weight: 700;
    text-decoration: none;
    transition:
        transform var(--transition),
        background-color var(--transition),
        border-color var(--transition),
        color var(--transition);
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    color: var(--color-white);
    background: var(--color-primary);
}

.button-primary:hover {
    background: var(--color-primary-dark);
}

.button-secondary {
    color: var(--color-primary);
    background: transparent;
    border-color: var(--color-primary);
}

.button-secondary:hover {
    color: var(--color-white);
    background: var(--color-primary);
}


/* Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(16px);
}

.header-container {
    min-height: 92px;
    display: flex;
    align-items: center;
    gap: 40px;
}

.site-logo {
    flex-shrink: 0;
}

.site-logo img {
    display: block;
    width: 300px;
    height: auto;
}

.main-navigation {
    margin-left: auto;
}

.navigation-list {
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.navigation-list a {
    position: relative;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.navigation-list a::after {
    position: absolute;
    right: 0;
    bottom: -8px;
    left: 0;
    height: 2px;
    content: "";
    background: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--transition);
}

.navigation-list a:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

.header-cta {
    flex-shrink: 0;
}

.navigation-toggle {
    display: none;
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    background: var(--color-white);
}

.navigation-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    margin: 5px 0;
    background: var(--color-dark);
}


/* Hero */

.hero {
    position: relative;
    overflow: hidden;
    padding: 110px 0 120px;
    background:
        radial-gradient(
            circle at 85% 20%,
            rgba(196, 0, 0, 0.09),
            transparent 30%
        ),
        linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

.hero {
    padding-top: 40px; /* Oder ein anderer kleinerer Wert nach deinem Geschmack (statt 110px) */
    padding-bottom: 80px; /* Optional: Auch unten etwas reduzieren */
}

.hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 90px;
    align-items: center;
}

.hero-kicker {
    margin: 0 0 22px;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-title {
    max-width: 760px;
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.5rem, 6vw, 6.8rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.95;
}

.hero-lead {
    max-width: 720px;
    margin: 0 0 24px;
    color: var(--color-dark);
    font-size: clamp(1.45rem, 2vw, 2.1rem);
    font-weight: 600;
    line-height: 1.35;
}

.hero-text {
    max-width: 690px;
    margin: 0 0 36px;
    color: var(--color-muted);
    font-size: 1.1rem;
    line-height: 1.8;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.hero-trust {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 54px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.hero-trust strong,
.hero-trust span {
    display: block;
}

.hero-trust strong {
    margin-bottom: 4px;
    color: var(--color-dark);
    font-size: 1rem;
}

.hero-trust span {
    color: var(--color-muted);
    font-size: 0.82rem;
}


/* Hero-Systemgrafik */

.hero-visual {
    position: relative;
}

.commerce-system {
    position: relative;
    padding: 46px;
    border: 1px solid rgba(196, 0, 0, 0.12);
    border-radius: 32px;
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-medium);
    backdrop-filter: blur(18px);
}

.system-node {
    padding: 24px 28px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: var(--shadow-small);
}

.system-node strong,
.system-node span {
    display: block;
}

.system-label {
    margin-bottom: 5px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.system-node strong {
    color: var(--color-dark);
    font-size: 1.25rem;
}

.system-node-shop {
    border-left: 4px solid #008060;
}

.system-node-payment {
    border-left: 4px solid var(--color-primary);
}

.system-node-erp {
    border-left: 4px solid #555555;
}

.system-connection {
    width: 2px;
    height: 42px;
    margin: 0 auto;
    background: linear-gradient(
        var(--color-border),
        var(--color-primary),
        var(--color-border)
    );
}

.system-output {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 30px;
}

.system-output span {
    padding: 12px 14px;
    border-radius: var(--radius-medium);
    color: var(--color-text);
    background: var(--color-light);
    font-size: 0.86rem;
    font-weight: 600;
    text-align: center;
}
/* Navigation Dropdown */

.navigation-item {
    position: relative;
}

.navigation-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0;
    border: 0;
    color: var(--color-dark);
    background: transparent;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
}

.navigation-dropdown-toggle span {
    color: var(--color-primary);
    font-size: 1rem;
    transition: transform var(--transition);
}

.navigation-item-dropdown:hover .navigation-dropdown-toggle span,
.navigation-item-dropdown.is-open .navigation-dropdown-toggle span {
    transform: rotate(180deg);
}

.navigation-dropdown {
    position: absolute;
    top: calc(100% + 24px);
    left: 50%;
    z-index: 110;
    width: min(720px, calc(100vw - 48px));
    padding: 26px;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: var(--shadow-medium);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 12px);
    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition);
}

.navigation-item-dropdown:hover .navigation-dropdown,
.navigation-item-dropdown.is-open .navigation-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

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

.navigation-dropdown-grid a {
    display: block;
    padding: 16px;
    border-radius: 12px;
    text-decoration: none;
    transition:
        background-color var(--transition),
        transform var(--transition);
}

.navigation-dropdown-grid a:hover {
    background: var(--color-light);
    transform: translateY(-2px);
}

.navigation-dropdown-grid strong,
.navigation-dropdown-grid span {
    display: block;
}

.navigation-dropdown-grid strong {
    margin-bottom: 3px;
    color: var(--color-dark);
    font-size: 0.95rem;
}

.navigation-dropdown-grid span {
    color: var(--color-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.navigation-dropdown-all {
    display: block;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--color-border);
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}
/* Gemeinsame Abschnittsüberschriften */

.section-intro {
    max-width: 820px;
    margin-bottom: 58px;
}

.section-kicker {
    margin: 0 0 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.section-title {
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.4rem, 4vw, 4.4rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.section-text {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.75;
}


/* Partnerbereich */

.partner-section {
    padding: 40px 0;
    background: var(--color-white);
}

.partner-intro {
    max-width: 900px;
}

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

.partner-card {
    min-height: 132px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    border: 1px solid var(--color-border);
    border-radius: 16px;
    background: var(--color-white);
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.partner-card:hover {
    border-color: rgba(196, 0, 0, 0.24);
    box-shadow: var(--shadow-small);
    transform: translateY(-4px);
}

.partner-name,
.partner-info {
    display: block;
}

.partner-name {
    margin-bottom: 5px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.3rem;
    font-weight: 700;
}

.partner-info {
    color: var(--color-muted);
    font-size: 0.78rem;
    font-weight: 600;
}


/* Kompetenzen */

.competence-section {
    padding: 40px 0;
    background: var(--color-light);
}

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

.competence-card {
    position: relative;
    min-height: 310px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    padding: 32px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    color: var(--color-text);
    background: var(--color-white);
    text-decoration: none;
    transition:
        transform var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.competence-card::before {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    content: "";
    background: var(--color-primary);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition:
        opacity var(--transition),
        transform var(--transition);
}

.competence-card:hover {
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: var(--shadow-medium);
    transform: translateY(-6px);
}

.competence-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.competence-card-featured {
    border-color: rgba(196, 0, 0, 0.18);
    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.055),
            rgba(255, 255, 255, 1) 52%
        );
}

.competence-number {
    margin-bottom: 42px;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.competence-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.2;
}

.competence-card p {
    margin: 0 0 28px;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}

.competence-link {
    margin-top: auto;
    color: var(--color-primary);
    font-size: 0.88rem;
    font-weight: 700;
}

.section-action {
    margin-top: 46px;
    text-align: center;
}
/* Laufende Kundengalerie */

.customer-logos-section {
    overflow: hidden;
     padding: 40px 0 56px;
    background: var(--color-white);
}

.customer-logos-intro {
    margin-bottom: 58px;
}

.customer-logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Weiche Ausblendung an beiden Seiten */

.customer-logo-track {
    display: flex;
    width: max-content;
    animation: customer-logo-scroll 42s linear infinite;
}

.customer-logo-group {
    display: flex;
    align-items: stretch;
    flex-shrink: 0;
    gap: 20px;
    padding-right: 20px;
}

@keyframes customer-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.customer-logo-card {
    width: 260px;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 26px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-white);
    text-decoration: none;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

a.customer-logo-card:hover,
a.customer-logo-card:focus-visible {
    border-color: rgba(196, 0, 0, 0.32);
    box-shadow: var(--shadow-small);
    transform: translateY(-4px);
}

.customer-logo-card img {
    width: 100%;
    height: 100%;
    max-width: 205px;
    max-height: 92px;
    object-fit: contain;
    object-position: center;
    filter: saturate(0.85);
    transition:
        filter 220ms ease,
        transform 220ms ease;
}

a.customer-logo-card:hover img,
a.customer-logo-card:focus-visible img {
    filter: saturate(1);
    transform: scale(1.025);
}

@keyframes customer-logo-scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}
.customer-logo-group {
    display: flex !important;
    gap: 20px !important;
}

.customer-logo-card {
    width: 260px !important;
    height: 150px !important;
}
.customer-logo-group {
    display: flex;
}
.customer-logo-card {
    position: relative;
}

.customer-logo-card img {
    transition:
        opacity 220ms ease,
        transform 220ms ease,
        filter 220ms ease;
}

.customer-logo-overlay {
    position: absolute;
    right: 18px;
    bottom: 16px;
    left: 18px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateY(10px);
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.customer-logo-domain {
    margin-bottom: 2px;
    color: var(--color-dark);
    font-size: 0.82rem;
    font-weight: 700;
}

.customer-logo-action {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
}

a.customer-logo-card:hover img,
a.customer-logo-card:focus-visible img {
    opacity: 0.28;
    transform: scale(1.035);
}

a.customer-logo-card:hover .customer-logo-overlay,
a.customer-logo-card:focus-visible .customer-logo-overlay {
    opacity: 1;
    transform: translateY(0);
}
.customer-logos-footer {
    margin-top: 54px;
    text-align: center;
}

.customer-logos-footer p {
    margin: 0 0 22px;
    color: var(--color-muted);
    font-size: 1rem;
}
/* =========================================================
   PLENTYONE HERO
   ========================================================= */

.plentyone-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(196, 0, 0, 0.08),
            transparent 34%
        ),
        var(--color-white);
}

.plentyone-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    align-items: center;
    gap: 88px;
}

.plentyone-hero-content {
    max-width: 760px;
}

.plentyone-hero .section-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-hero h1 {
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 5.2vw, 5.75rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.plentyone-hero-lead {
    max-width: 700px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.12rem;
    line-height: 1.8;
}

.plentyone-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

.plentyone-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 58px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.plentyone-hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plentyone-hero-trust strong {
    color: var(--color-dark);
    font-size: 1rem;
}

.plentyone-hero-trust span {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* =========================================================
   PLENTYONE HERO VISUAL
   ========================================================= */

.plentyone-hero-visual {
    position: relative;
    min-height: 560px;
}

.plentyone-system-card {
    position: absolute;
    inset: 20px 0 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background: #082f3b;
    box-shadow: 0 30px 80px rgba(8, 47, 59, 0.2);
}

.plentyone-system-card::before {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 360px;
    height: 360px;
    content: "";
    border-radius: 50%;
    background: rgba(226, 255, 75, 0.09);
}

.plentyone-system-card::after {
    position: absolute;
    right: 36px;
    bottom: 34px;
    width: 160px;
    height: 160px;
    content: "";
    border: 1px solid rgba(226, 255, 75, 0.28);
    border-radius: 50%;
}

.plentyone-system-label {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.plentyone-system-core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    margin: 18px auto 28px;
    border: 1px solid rgba(226, 255, 75, 0.45);
    border-radius: 50%;
    background: rgba(226, 255, 75, 0.08);
}

.plentyone-system-core::before,
.plentyone-system-core::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(226, 255, 75, 0.18);
    border-radius: 50%;
}

.plentyone-system-core::before {
    inset: -32px;
}

.plentyone-system-core::after {
    inset: -64px;
}

.plentyone-system-core span {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.plentyone-system-connections {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.plentyone-system-connections span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

/* =========================================================
   PLENTYONE CHANNELS
   ========================================================= */

.plentyone-channels-section {
    padding: 50px 0 110px;
    background: var(--color-light);
}

.plentyone-channels-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    align-items: end;
    gap: 72px;
    margin-bottom: 44px;
}

.plentyone-channels-intro .section-eyebrow {
    grid-column: 1 / -1;
    display: inline-block;
    margin-bottom: -20px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-channels-intro h2 {
    max-width: 680px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.plentyone-channels-copy {
    display: grid;
    gap: 20px;
}

.plentyone-channels-copy p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.plentyone-channel-visual {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #082f3b;
    box-shadow: 0 28px 70px rgba(8, 47, 59, 0.14);
}

.plentyone-channel-visual img {
    width: 100%;
    height: auto;
}

/* =========================================================
   PLENTYONE RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .plentyone-hero {
        padding: 96px 0;
    }

    .plentyone-hero-container {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .plentyone-hero-content {
        max-width: 860px;
    }

    .plentyone-hero-visual {
        min-height: 540px;
    }

    .plentyone-system-card {
        inset: 0;
    }

    .plentyone-channels-intro {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .plentyone-channels-intro .section-eyebrow {
        grid-column: auto;
        margin-bottom: 0;
    }

    .plentyone-channels-copy {
        max-width: 760px;
    }
}

@media (max-width: 700px) {
    .plentyone-hero {
        padding: 72px 0;
    }

    .plentyone-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
    }

    .plentyone-hero-lead {
        font-size: 1rem;
    }

    .plentyone-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .plentyone-hero-actions .button {
        width: 100%;
        text-align: center;
    }

    .plentyone-hero-trust {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .plentyone-hero-visual {
        min-height: 500px;
    }

    .plentyone-system-card {
        padding: 28px;
        border-radius: 22px;
    }

    .plentyone-system-core {
        width: 170px;
        height: 170px;
    }

    .plentyone-system-core::before {
        inset: -24px;
    }

    .plentyone-system-core::after {
        inset: -48px;
    }

    .plentyone-system-connections {
        grid-template-columns: 1fr;
    }

    .plentyone-channels-section {
        padding: 82px 0;
    }

    .plentyone-channels-intro {
        margin-bottom: 38px;
    }

    .plentyone-channels-intro h2 {
        font-size: clamp(2.45rem, 11vw, 3.5rem);
    }

    .plentyone-channel-visual {
        border-radius: 18px;
    }
}
/* =========================================================
   PLENTYONE HERO
   ========================================================= */

.plentyone-hero {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 82% 24%,
            rgba(196, 0, 0, 0.08),
            transparent 34%
        ),
        var(--color-white);
}

.plentyone-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(440px, 0.95fr);
    align-items: center;
    gap: 88px;
}

.plentyone-hero-content {
    max-width: 760px;
}

.plentyone-hero .section-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-hero h1 {
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 5.2vw, 5.75rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 0.98;
}

.plentyone-hero-lead {
    max-width: 700px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.12rem;
    line-height: 1.8;
}

.plentyone-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

.plentyone-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 58px;
    padding-top: 30px;
    border-top: 1px solid var(--color-border);
}

.plentyone-hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plentyone-hero-trust strong {
    color: var(--color-dark);
    font-size: 1rem;
}

.plentyone-hero-trust span {
    color: var(--color-muted);
    font-size: 0.86rem;
    line-height: 1.45;
}

/* =========================================================
   PLENTYONE HERO VISUAL
   ========================================================= */

.plentyone-hero-visual {
    position: relative;
    min-height: 560px;
}

.plentyone-system-card {
    position: absolute;
    inset: 20px 0 20px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background: #082f3b;
    box-shadow: 0 30px 80px rgba(8, 47, 59, 0.2);
}

.plentyone-system-card::before {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 360px;
    height: 360px;
    content: "";
    border-radius: 50%;
    background: rgba(226, 255, 75, 0.09);
}

.plentyone-system-card::after {
    position: absolute;
    right: 36px;
    bottom: 34px;
    width: 160px;
    height: 160px;
    content: "";
    border: 1px solid rgba(226, 255, 75, 0.28);
    border-radius: 50%;
}

.plentyone-system-label {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.plentyone-system-core {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    height: 220px;
    margin: 18px auto 28px;
    border: 1px solid rgba(226, 255, 75, 0.45);
    border-radius: 50%;
    background: rgba(226, 255, 75, 0.08);
}

.plentyone-system-core::before,
.plentyone-system-core::after {
    position: absolute;
    content: "";
    border: 1px solid rgba(226, 255, 75, 0.18);
    border-radius: 50%;
}

.plentyone-system-core::before {
    inset: -32px;
}

.plentyone-system-core::after {
    inset: -64px;
}

.plentyone-system-core span {
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.plentyone-system-connections {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.plentyone-system-connections span {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
}

/* =========================================================
   PLENTYONE CHANNELS
   ========================================================= */

.plentyone-channels-section {
    padding: 40px 0;
    background: var(--color-light);
}

.plentyone-channels-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    align-items: end;
    gap: 90px;
    margin-bottom: 58px;
}

.plentyone-channels-intro .section-eyebrow {
    grid-column: 1 / -1;
    display: inline-block;
    margin-bottom: -54px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-channels-intro h2 {
    max-width: 680px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.plentyone-channels-copy {
    display: grid;
    gap: 20px;
}

.plentyone-channels-copy p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.plentyone-channel-visual {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #082f3b;
    box-shadow: 0 28px 70px rgba(8, 47, 59, 0.14);
}

.plentyone-channel-visual img {
    width: 100%;
    height: auto;
}

/* =========================================================
   PLENTYONE RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .plentyone-hero {
        padding: 96px 0;
    }

    .plentyone-hero-container {
        grid-template-columns: 1fr;
        gap: 64px;
    }

    .plentyone-hero-content {
        max-width: 860px;
    }

    .plentyone-hero-visual {
        min-height: 540px;
    }

    .plentyone-system-card {
        inset: 0;
    }

    .plentyone-channels-intro {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .plentyone-channels-intro .section-eyebrow {
        grid-column: auto;
        margin-bottom: 0;
    }

    .plentyone-channels-copy {
        max-width: 760px;
    }
}

@media (max-width: 700px) {
    .plentyone-hero {
        padding: 72px 0;
    }

    .plentyone-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
    }

    .plentyone-hero-lead {
        font-size: 1rem;
    }

    .plentyone-hero-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .plentyone-hero-actions .button {
        width: 100%;
        text-align: center;
    }

    .plentyone-hero-trust {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .plentyone-hero-visual {
        min-height: 500px;
    }

    .plentyone-system-card {
        padding: 28px;
        border-radius: 22px;
    }

    .plentyone-system-core {
        width: 170px;
        height: 170px;
    }

    .plentyone-system-core::before {
        inset: -24px;
    }

    .plentyone-system-core::after {
        inset: -48px;
    }

    .plentyone-system-connections {
        grid-template-columns: 1fr;
    }

    .plentyone-channels-section {
        padding: 82px 0;
    }

    .plentyone-channels-intro {
        margin-bottom: 38px;
    }

    .plentyone-channels-intro h2 {
        font-size: clamp(2.45rem, 11vw, 3.5rem);
    }

    .plentyone-channel-visual {
        border-radius: 18px;
    }
}
.plentyone-hero-container {
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
    gap: 72px;
}

.plentyone-hero h1 {
    font-size: clamp(3.1rem, 4.8vw, 5.2rem);
}
.plentyone-channel-visual {
    height: auto;
}

.plentyone-channel-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}
.plentyone-hero{
    padding:40px 0 80px;
}
/* =========================================================
   PLENTYONE ERFAHRUNG
   ========================================================= */

.plentyone-experience-section {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background: var(--color-dark);
}

.plentyone-experience-container {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 90px;
}

.plentyone-experience-intro {
    position: sticky;
    top: 130px;
}

.plentyone-experience-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 28px;
    color: #ff4a4a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-experience-year {
    display: block;
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.08);
    font-family: var(--font-heading);
    font-size: clamp(5.5rem, 10vw, 9.5rem);
    font-weight: 700;
    letter-spacing: -0.06em;
    line-height: 0.75;
}

.plentyone-experience-intro h2 {
    max-width: 620px;
    margin: 0 0 26px;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.7vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.plentyone-experience-intro p {
    max-width: 620px;
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1rem;
    line-height: 1.8;
}

.plentyone-experience-intro p + p {
    margin-top: 18px;
}

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

.plentyone-experience-card {
    min-height: 290px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.055);
    transition:
        transform 240ms ease,
        border-color 240ms ease,
        background-color 240ms ease;
}

.plentyone-experience-card:hover {
    border-color: rgba(255, 74, 74, 0.55);
    background: rgba(255, 255, 255, 0.085);
    transform: translateY(-5px);
}

.plentyone-experience-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 50px;
}

.plentyone-experience-number {
    color: #ff4a4a;
    font-family: "JetBrains Mono", monospace;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.plentyone-experience-icon {
    width: 30px;
    height: 30px;
    color: #ff4a4a;
    opacity: 0.3;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.plentyone-experience-card:hover .plentyone-experience-icon {
    opacity: 0.68;
    transform: translateY(-2px);
}

.plentyone-experience-card h3 {
    margin: 0 0 14px;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    line-height: 1.25;
}

.plentyone-experience-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.94rem;
    line-height: 1.75;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
    .plentyone-experience-container {
        grid-template-columns: 1fr;
        gap: 58px;
    }

    .plentyone-experience-intro {
        position: static;
    }

    .plentyone-experience-intro h2 {
        max-width: 760px;
    }

    .plentyone-experience-intro p {
        max-width: 760px;
    }
}

@media (max-width: 700px) {
    .plentyone-experience-section {
        padding: 88px 0;
    }

    .plentyone-experience-year {
        margin-bottom: 20px;
        font-size: clamp(4.6rem, 24vw, 7rem);
    }

    .plentyone-experience-intro h2 {
        font-size: clamp(2.5rem, 11vw, 3.6rem);
    }

    .plentyone-experience-grid {
        grid-template-columns: 1fr;
    }

    .plentyone-experience-card {
        min-height: auto;
        padding: 26px;
    }

    .plentyone-experience-card-header {
        margin-bottom: 38px;
    }
}
/* =========================================================
   PLENTYONE LEISTUNGEN
   ========================================================= */

.plentyone-services-section {
    padding: 40px 0;
    background: var(--color-white);
}

.plentyone-services-intro {
    max-width: 860px;
    margin-bottom: 56px;
}

.plentyone-services-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-services-intro h2 {
    max-width: 820px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.plentyone-services-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

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

.plentyone-service-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 20px;
    background: var(--color-white);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

.plentyone-service-card:hover {
    border-color: rgba(196, 0, 0, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px);
}

.plentyone-service-number {
    display: block;
    margin-bottom: 58px;
    color: var(--color-primary);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.plentyone-service-icon {
    position: absolute;
    top: 30px;
    right: 30px;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
    opacity: 0.22;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.plentyone-service-card:hover .plentyone-service-icon {
    opacity: 0.62;
    transform: translateY(-2px);
}

.plentyone-service-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    line-height: 1.25;
}

.plentyone-service-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.72;
}
/* =========================================================
   PLENTYONE PARTNER
========================================================= */

.plentyone-partner-section{
    padding:40px 0;
    background:var(--color-light);
}

.plentyone-partner-intro{
    max-width:760px;
    margin-bottom:56px;
}

.plentyone-partner-intro h2{
    margin:0 0 22px;
    font-size:clamp(2.8rem,4.5vw,4.9rem);
    line-height:1.02;
}

.plentyone-partner-intro p{
    max-width:720px;
    color:var(--color-muted);
    line-height:1.8;
}

.plentyone-partner-grid{

    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px;

}

.plentyone-partner-card{

    position:relative;

    padding:34px;

    min-height:300px;

    background:#fff;

    border:1px solid var(--color-border);

    border-radius:20px;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;

}

.plentyone-partner-card:hover{

    transform:translateY(-6px);

    border-color:rgba(196,0,0,.22);

    box-shadow:0 20px 42px rgba(0,0,0,.07);

}

.partner-number{

    display:block;

    margin-bottom:54px;

    font-family:"JetBrains Mono";

    font-size:.8rem;

    font-weight:700;

    letter-spacing:.16em;

    color:var(--color-primary);

}

.plentyone-partner-card i{

    position:absolute;

    right:34px;

    top:34px;

    width:30px;

    height:30px;

    color:var(--color-primary);

    opacity:.18;

}

.plentyone-partner-card h3{

    margin:0 0 16px;

    font-size:1.45rem;

}

.plentyone-partner-card p{

    margin:0;

    color:var(--color-muted);

    line-height:1.8;

}
.plentyone-feature-visual {
    padding: 40px 0;
    background: var(--color-white);
}

.plentyone-feature-visual-frame {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
    background: #082f3b;
    box-shadow: 0 28px 70px rgba(8, 47, 59, 0.12);
}

.plentyone-feature-visual-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.plentyone-partner-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.no-wrap{
    white-space: nowrap;
}
/* =========================================================
   TYPISCHE PLENTYONE-PROJEKTE
   ========================================================= */

.plentyone-projects-section {
    padding: 40px 0;
    background: var(--color-white);
}

.plentyone-projects-intro {
    max-width: 900px;
    margin-bottom: 46px;
}

.plentyone-projects-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.plentyone-projects-intro h2 {
    max-width: 880px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.plentyone-projects-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.plentyone-project-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-light);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

.plentyone-project-card:hover {
    border-color: rgba(196, 0, 0, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px);
}

.plentyone-project-number {
    display: block;
    margin-bottom: 52px;
    color: var(--color-primary);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.plentyone-project-icon {
    position: absolute;
    top: 28px;
    right: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
}

.plentyone-project-icon svg {
    width: 28px;
    height: 28px;
    color: var(--color-primary);
    opacity: 0.24;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.plentyone-project-card:hover .plentyone-project-icon svg {
    opacity: 0.65;
    transform: translateY(-2px);
}

.plentyone-project-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.42rem;
    line-height: 1.25;
}

.plentyone-project-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.72;
}
.site-footer-statement-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px; /* Abstand zum Text */
}
/* =========================================================
   SHOPIFY HERO
   ========================================================= */

.shopify-hero {
    position: relative;
    overflow: hidden;
    padding: 40px 0 150px;
    background:
        radial-gradient(
            circle at 86% 28%,
            rgba(196, 0, 0, 0.075),
            transparent 32%
        ),
        var(--color-white);
}

.shopify-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(520px, 1.05fr);
    align-items: center;
    gap: 78px;
}

.shopify-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.shopify-hero .section-eyebrow {
    display: inline-block;
    margin-bottom: 22px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shopify-hero h1 {
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 5.1vw, 5.8rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.shopify-hero-lead {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.shopify-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

.shopify-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 54px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.shopify-hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.shopify-hero-trust strong {
    color: var(--color-dark);
    font-size: 0.98rem;
}

.shopify-hero-trust span {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* =========================================================
   SHOPIFY SHOP MOCKUP
   ========================================================= */

.shopify-hero-visual {
    position: relative;
    min-height: 650px;
}

.shopify-store-window {
    position: absolute;
    top: 54px;
    right: 0;
    left: 34px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 26px;
    background: var(--color-white);
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.12);
}

.shopify-store-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--color-border);
    background: #f6f6f6;
}

.shopify-store-toolbar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d1d1;
}

.shopify-store-address {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48%;
    min-height: 26px;
    margin-left: 14px;
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.7rem;
}

.shopify-store-content {
    padding: 26px;
}

.shopify-store-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 26px;
    margin-bottom: 26px;
}

.shopify-store-logo {
    color: var(--color-dark);
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.shopify-store-navigation {
    display: flex;
    justify-content: center;
    gap: 20px;
    color: var(--color-muted);
    font-size: 0.68rem;
}

.shopify-store-header svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.shopify-product-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
    min-height: 460px;
    overflow: hidden;
    border-radius: 18px;
    background: #f5f3ef;
}

.shopify-product-image {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 460px;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 50% 42%,
            rgba(255, 255, 255, 0.92),
            transparent 34%
        ),
        #e9e3db;
}

.shopify-product-shape {
    position: relative;
    width: 190px;
    height: 270px;
    border-radius: 90px 90px 38px 38px;
    background:
        linear-gradient(
            145deg,
            #1f1f1f 0%,
            #3b3b3b 48%,
            #171717 100%
        );
    box-shadow: 0 30px 55px rgba(0, 0, 0, 0.22);
    transform: rotate(-5deg);
}

.shopify-product-shape::before {
    position: absolute;
    top: 25px;
    left: 50%;
    width: 52px;
    height: 18px;
    content: "";
    border: 2px solid rgba(255, 255, 255, 0.42);
    border-bottom: 0;
    border-radius: 30px 30px 0 0;
    transform: translateX(-50%);
}

.shopify-product-shape::after {
    position: absolute;
    right: 20px;
    bottom: 24px;
    left: 20px;
    height: 2px;
    content: "";
    background: rgba(255, 255, 255, 0.24);
}

.shopify-product-badge {
    position: absolute;
    top: 20px;
    left: 20px;
    padding: 7px 11px;
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.65rem;
    font-weight: 700;
}

.shopify-product-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
    background: var(--color-white);
}

.shopify-product-category {
    margin-bottom: 10px;
    color: var(--color-primary);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.shopify-product-content h2 {
    margin: 0 0 18px;
    color: var(--color-dark);
    font-size: clamp(1.45rem, 2vw, 2rem);
    letter-spacing: -0.035em;
    line-height: 1.08;
}

.shopify-product-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
}

.shopify-product-rating span {
    color: var(--color-primary);
    font-size: 0.76rem;
    letter-spacing: 0.08em;
}

.shopify-product-rating small {
    color: var(--color-muted);
    font-size: 0.66rem;
}

.shopify-product-price {
    margin-bottom: 20px;
    color: var(--color-dark);
    font-size: 1.15rem;
}

.shopify-product-options {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
}

.shopify-product-options span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-dark);
    font-size: 0.7rem;
}

.shopify-product-options .is-active {
    border-color: var(--color-dark);
    background: var(--color-dark);
    color: var(--color-white);
}

.shopify-product-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    margin-bottom: 22px;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.8rem;
    font-weight: 700;
}

.shopify-product-benefits {
    display: grid;
    gap: 9px;
}

.shopify-product-benefits span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-muted);
    font-size: 0.68rem;
}

.shopify-product-benefits svg {
    width: 15px;
    height: 15px;
    color: var(--color-dark);
    stroke-width: 1.7;
}

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.shopify-floating-card {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
}

.shopify-floating-conversion {
    top: 18px;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 15px 18px;
}

.shopify-floating-conversion span {
    color: var(--color-muted);
    font-size: 0.72rem;
}

.shopify-floating-conversion strong {
    color: var(--color-primary);
    font-size: 1.15rem;
}

.shopify-floating-mobile {
    right: -18px;
    bottom: 76px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
}

.shopify-floating-mobile svg {
    width: 26px;
    height: 26px;
    color: var(--color-primary);
}

.shopify-floating-mobile div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.shopify-floating-mobile strong {
    color: var(--color-dark);
    font-size: 0.76rem;
}

.shopify-floating-mobile span {
    color: var(--color-muted);
    font-size: 0.64rem;
}

.shopify-floating-systems {
    bottom: 14px;
    left: 0;
    min-width: 260px;
    padding: 16px 18px;
}

.shopify-floating-systems > span {
    display: block;
    margin-bottom: 10px;
    color: var(--color-muted);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.shopify-floating-systems div {
    display: flex;
    gap: 8px;
}

.shopify-floating-systems strong {
    padding: 7px 9px;
    border-radius: 7px;
    background: var(--color-light);
    color: var(--color-dark);
    font-size: 0.65rem;
}
/* =========================================================
   SHOPIFY – WARUM ECOMMERCE-FACTORY
   ========================================================= */

.shopify-partner-section {
    padding: 40px 0;
    background: var(--color-light);
}

.shopify-partner-intro {
    max-width: 900px;
    margin-bottom: 46px;
}

.shopify-partner-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shopify-partner-intro h2 {
    max-width: 980px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.shopify-partner-intro p {
    max-width: 780px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.shopify-partner-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-white);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

.shopify-partner-card:hover {
    border-color: rgba(196, 0, 0, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px);
}

.shopify-partner-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 46px;
}

.shopify-partner-number {
    color: var(--color-primary);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.shopify-partner-icon {
    width: 29px;
    height: 29px;
    color: var(--color-primary);
    opacity: 0.24;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.shopify-partner-card:hover .shopify-partner-icon {
    opacity: 0.65;
    transform: translateY(-2px);
}

.shopify-partner-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    line-height: 1.25;
}

.shopify-partner-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.72;
}
/* =========================================================
   SHOPIFY LEISTUNGEN
   ========================================================= */

.shopify-services-section {
    padding: 40px 0;
    background: var(--color-white);
}

.shopify-services-intro {
    max-width: 900px;
    margin-bottom: 46px;
}

.shopify-services-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shopify-services-intro h2 {
    max-width: 940px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.shopify-services-intro p {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.shopify-service-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-light);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

.shopify-service-card:hover {
    border-color: rgba(196, 0, 0, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px);
}

.shopify-service-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 46px;
}

.shopify-service-number {
    color: var(--color-primary);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.shopify-service-icon {
    width: 29px;
    height: 29px;
    color: var(--color-primary);
    opacity: 0.24;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.shopify-service-card:hover .shopify-service-icon {
    opacity: 0.65;
    transform: translateY(-2px);
}

.shopify-service-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.42rem;
    line-height: 1.25;
}

.shopify-service-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.72;
}
/* =========================================================
   SHOPIFY EXPERIENCE / DEVICE VISUAL
   ========================================================= */

.shopify-experience-section {
    padding: 40px 0;
    overflow: hidden;
    background: var(--color-dark);
}

.shopify-experience-container {
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(560px, 1.28fr);
    align-items: center;
    gap: 78px;
}

.shopify-experience-copy {
    max-width: 590px;
}

.shopify-experience-copy .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: #ff4a4a;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.shopify-experience-copy h2 {
    margin: 0 0 24px;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.shopify-experience-copy p {
    margin: 0;
    color: rgba(255, 255, 255, 0.68);
    font-size: 1.02rem;
    line-height: 1.8;
}

.shopify-experience-points {
    display: grid;
    gap: 14px;
    margin: 32px 0 0;
    padding: 0;
    list-style: none;
}

.shopify-experience-points li {
    display: flex;
    align-items: center;
    gap: 11px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.94rem;
}

.shopify-experience-points svg {
    width: 18px;
    height: 18px;
    color: #ff4a4a;
    stroke-width: 2;
}

/* =========================================================
   DEVICE VISUAL
   ========================================================= */

.shopify-device-visual {
    position: relative;
    min-height: 670px;
}

.shopify-device-desktop {
    position: absolute;
    top: 58px;
    right: 0;
    left: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    background: var(--color-white);
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.28);
}

.shopify-device-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border-bottom: 1px solid var(--color-border);
    background: #f4f4f4;
}

.shopify-device-toolbar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d3d3d3;
}

.shopify-device-toolbar div {
    width: 45%;
    margin-left: 12px;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.62rem;
    text-align: center;
}

.shopify-device-store {
    padding: 22px;
}

.shopify-device-store-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 22px;
    margin-bottom: 20px;
}

.shopify-device-store-header strong {
    color: var(--color-dark);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
}

.shopify-device-store-header nav {
    display: flex;
    justify-content: center;
    gap: 18px;
    color: var(--color-muted);
    font-size: 0.62rem;
}

.shopify-device-store-header svg {
    width: 18px;
    height: 18px;
}

.shopify-device-hero {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    min-height: 270px;
    overflow: hidden;
    border-radius: 16px;
    background: #ebe4dc;
}

.shopify-device-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    background: var(--color-white);
}

.shopify-device-hero-copy > span {
    margin-bottom: 9px;
    color: var(--color-primary);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.shopify-device-hero-copy h3 {
    margin: 0 0 20px;
    color: var(--color-dark);
    font-size: 1.65rem;
    line-height: 1.06;
}

.shopify-device-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.68rem;
    font-weight: 700;
}

.shopify-device-product {
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(
            circle at center,
            rgba(255, 255, 255, 0.9),
            transparent 36%
        ),
        #e3dbd0;
}

.shopify-device-product-shape {
    width: 150px;
    height: 210px;
    border-radius: 70px 70px 30px 30px;
    background: linear-gradient(145deg, #262626, #4b4b4b 50%, #171717);
    box-shadow: 0 24px 46px rgba(0, 0, 0, 0.22);
    transform: rotate(5deg);
}

.shopify-device-products {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.shopify-device-products article {
    display: grid;
    gap: 5px;
}

.shopify-device-products article div {
    min-height: 92px;
    border-radius: 10px;
    background: #eeeae5;
}

.shopify-device-products article:nth-child(2) div {
    background: #e4e8e6;
}

.shopify-device-products article:nth-child(3) div {
    background: #ece4e4;
}

.shopify-device-products span {
    color: var(--color-muted);
    font-size: 0.6rem;
}

.shopify-device-products strong {
    color: var(--color-dark);
    font-size: 0.66rem;
}

/* =========================================================
   MOBILE DEVICE
   ========================================================= */

.shopify-device-mobile {
    position: absolute;
    right: -34px;
    bottom: 12px;
    z-index: 3;
    width: 218px;
    min-height: 430px;
    padding: 9px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 34px;
    background: #151515;
    box-shadow: 0 26px 65px rgba(0, 0, 0, 0.34);
}

.shopify-mobile-speaker {
    width: 56px;
    height: 5px;
    margin: 2px auto 8px;
    border-radius: 999px;
    background: #363636;
}

.shopify-mobile-screen {
    min-height: 398px;
    padding: 14px;
    overflow: hidden;
    border-radius: 25px;
    background: var(--color-white);
}

.shopify-mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.shopify-mobile-header strong {
    font-size: 0.66rem;
    letter-spacing: 0.1em;
}

.shopify-mobile-header svg {
    width: 16px;
    height: 16px;
}

.shopify-mobile-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #e9e3dc;
}

.shopify-mobile-image div {
    width: 74px;
    height: 112px;
    border-radius: 38px 38px 18px 18px;
    background: linear-gradient(145deg, #242424, #464646, #171717);
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.2);
}

.shopify-mobile-category {
    color: var(--color-primary);
    font-size: 0.54rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.shopify-mobile-screen h3 {
    margin: 6px 0 8px;
    color: var(--color-dark);
    font-size: 1rem;
    line-height: 1.08;
}

.shopify-mobile-rating {
    margin-bottom: 8px;
    color: var(--color-primary);
    font-size: 0.58rem;
    letter-spacing: 0.05em;
}

.shopify-mobile-price {
    display: block;
    margin-bottom: 12px;
    color: var(--color-dark);
    font-size: 0.82rem;
}

.shopify-mobile-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 39px;
    border-radius: 8px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.65rem;
    font-weight: 700;
}

/* =========================================================
   BADGES
   ========================================================= */

.shopify-device-badge {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.18);
}

.shopify-device-badge-speed {
    top: 20px;
    right: 34px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
}

.shopify-device-badge-speed svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.shopify-device-badge-speed div {
    display: flex;
    flex-direction: column;
}

.shopify-device-badge-speed strong {
    color: var(--color-dark);
    font-size: 0.72rem;
}

.shopify-device-badge-speed span {
    color: var(--color-muted);
    font-size: 0.61rem;
}

.shopify-device-badge-mobile {
    bottom: 34px;
    left: -30px;
    padding: 14px 17px;
}

.shopify-device-badge-mobile span {
    display: block;
    color: var(--color-muted);
    font-size: 0.62rem;
}

.shopify-device-badge-mobile strong {
    color: var(--color-primary);
    font-size: 0.88rem;
}
/* ==========================================
   Shopify Hero – Visual weiter nach oben
   ========================================== */

.shopify-hero-visual{
    position: relative;
    transform: translateY(-140px);
}

/* Browser-Mockup */
.shopify-browser-mockup {
    position: relative;
    top: -10px;
}

/* Conversion-Badge */
.shopify-conversion-badge {
    top: -20px;
}

/* Floating Cards */
.shopify-connection-card {
    bottom: 40px;
}

.shopify-mobile-card {
    bottom: 30px;
}

/* Mobile wieder normal */
@media (max-width: 992px){
    .shopify-hero-visual{
        transform: none;
    }
}

    .shopify-browser-mockup {
        top: 0;
    }

    .shopify-conversion-badge {
        top: 0;
    }

    .shopify-connection-card,
    .shopify-mobile-card {
        bottom: 0;
    }
/* =========================================================
   SHOPIFY + PLENTYONE HERO
   ========================================================= */

.integration-hero {
    position: relative;
    overflow: hidden;
    padding: 80px 0 40px;
    background:
        radial-gradient(
            circle at 82% 26%,
            rgba(196, 0, 0, 0.08),
            transparent 34%
        ),
        var(--color-white);
}

.integration-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(540px, 1.08fr);
    align-items: center;
    gap: 78px;
}
/* Shopify × PlentyONE Hero – gleicher Rhythmus wie PlentyONE */
.integration-hero {
    padding-top: var(--hero-space-top-desktop);
    padding-bottom: var(--hero-space-bottom-desktop);
}

.integration-hero-container {
    align-items: center;
}

.integration-hero-content {
    padding-top: 0;
}

.integration-hero .section-eyebrow {
    display: inline-block;
    margin-bottom: 28px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.integration-hero h1 {
    margin: 0 0 40px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.2rem, 5vw, 5.7rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.integration-hero-lead {
    max-width: 710px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.integration-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 36px;
}

.integration-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 54px;
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.integration-hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.integration-hero-trust strong {
    color: var(--color-dark);
    font-size: 0.98rem;
}

.integration-hero-trust span {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* =========================================================
   INTEGRATION VISUAL
   ========================================================= */

.integration-hero-visual {
    position: relative;
    min-height: 690px;
}

.integration-visual-stage {
    position: absolute;
    inset: 38px 0 18px 22px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 28px;
    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(196, 0, 0, 0.12),
            transparent 28%
        ),
        #171717;
    box-shadow: 0 34px 90px rgba(0, 0, 0, 0.18);
}

.integration-visual-stage::before {
    position: absolute;
    inset: 0;
    content: "";
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );
    background-size: 34px 34px;
    pointer-events: none;
}

/* =========================================================
   SYSTEMKARTEN
   ========================================================= */

.integration-platform {
    position: absolute;
    z-index: 2;
    width: 255px;
    min-height: 205px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(14px);
}

.integration-platform-shopify {
    top: 54px;
    left: 42px;
}

.integration-platform-plenty {
    right: 56px;
    bottom: 54px;
}

.integration-platform-label {
    display: block;
    margin-bottom: 24px;
    color: rgba(255, 255, 255, 0.46);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.integration-platform-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.integration-platform-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: var(--color-primary);
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
}

.integration-platform-brand div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.integration-platform-brand strong {
    color: var(--color-white);
    font-size: 1.15rem;
}

.integration-platform-brand div span {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.72rem;
}

.integration-platform-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 24px;
}

.integration-platform-items span {
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.66);
    font-size: 0.66rem;
}

/* =========================================================
   CONNECTOR / ENGINE
   ========================================================= */

.integration-connector {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 190px;
    transform: translate(-50%, -50%);
}

.integration-connector-line {
    position: relative;
    width: 2px;
    height: 90px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.14);
}

.integration-engine {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 190px;
    padding: 18px 16px;
    border: 1px solid rgba(196, 0, 0, 0.35);
    border-radius: 16px;
    background: rgba(196, 0, 0, 0.13);
    box-shadow: 0 18px 44px rgba(196, 0, 0, 0.14);
    text-align: center;
}

.integration-engine-eyebrow {
    margin-bottom: 6px;
    color: #ff6969;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.integration-engine strong {
    color: var(--color-white);
    font-size: 0.98rem;
}

.integration-engine > span:last-child {
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.64rem;
}

/* =========================================================
   DATENPUNKTE
   ========================================================= */

.integration-data-point {
    position: absolute;
    top: -10px;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff4a4a;
    box-shadow: 0 0 14px rgba(255, 74, 74, 0.8);
    transform: translateX(-50%);
    animation: integration-data-flow 3.8s linear infinite;
}

.integration-data-point-two,
.integration-data-point-five {
    animation-delay: 1.25s;
}

.integration-data-point-three,
.integration-data-point-six {
    animation-delay: 2.5s;
}

@keyframes integration-data-flow {
    from {
        top: -10px;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    to {
        top: calc(100% + 10px);
        opacity: 0;
    }
}

/* =========================================================
   FLOATING CARDS
   ========================================================= */

.integration-floating-card {
    position: absolute;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.74);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(12px);
}

.integration-floating-orders {
    top: 28px;
    right: 28px;
    padding: 14px 17px;
}

.integration-floating-orders span {
    display: block;
    margin-bottom: 3px;
    color: var(--color-muted);
    font-size: 0.62rem;
}

.integration-floating-orders strong {
    color: var(--color-primary);
    font-size: 0.84rem;
}

.integration-floating-pos {
    right: 20px;
    bottom: 300px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 16px;
}

.integration-floating-pos svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.integration-floating-pos div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.integration-floating-pos strong {
    color: var(--color-dark);
    font-size: 0.72rem;
}

.integration-floating-pos span {
    color: var(--color-muted);
    font-size: 0.62rem;
}

.integration-floating-stock {
    bottom: 26px;
    left: 24px;
    padding: 14px 16px;
}

.integration-floating-stock > span {
    display: block;
    margin-bottom: 9px;
    color: var(--color-muted);
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.integration-floating-stock div {
    display: flex;
    gap: 7px;
}

.integration-floating-stock strong {
    padding: 6px 8px;
    border-radius: 7px;
    background: var(--color-light);
    color: var(--color-dark);
    font-size: 0.62rem;
}
/* =========================================================
   SHOPIFY + PLENTYONE – VERBUNDENES SYSTEM
   ========================================================= */

.integration-system-section {
    padding: 40px 0;
    background: var(--color-light);
}

.integration-system-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);
    align-items: end;
    gap: 80px;
    margin-bottom: 48px;
}

.integration-system-heading .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.integration-system-heading h2 {
    max-width: 760px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
}

.integration-system-copy {
    max-width: 690px;
}

.integration-system-copy p {
    margin: 0;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.8;
}

.integration-system-copy p + p {
    margin-top: 18px;
}

/* =========================================================
   DATENFLUSS
   ========================================================= */

.integration-system-flow {
    display: grid;
    grid-template-columns:
        minmax(260px, 0.8fr)
        minmax(120px, 0.32fr)
        minmax(0, 1.35fr);
    align-items: center;
    gap: 28px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 22px;
    background: var(--color-white);
    box-shadow: 0 24px 58px rgba(0, 0, 0, 0.055);
}

.integration-flow-label {
    display: block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.integration-flow-platform {
    display: flex;
    align-items: center;
    gap: 14px;
}

.integration-flow-platform-mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex-shrink: 0;
    border-radius: 15px;
    background: var(--color-dark);
    color: var(--color-white);
    font-size: 1.25rem;
    font-weight: 700;
}

.integration-flow-platform div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.integration-flow-platform strong {
    color: var(--color-dark);
    font-size: 1.2rem;
}

.integration-flow-platform div span {
    color: var(--color-muted);
    font-size: 0.78rem;
}

.integration-flow-connection {
    position: relative;
    height: 2px;
    background: var(--color-border);
}

.integration-flow-connection::after {
    position: absolute;
    top: 50%;
    right: -1px;
    width: 10px;
    height: 10px;
    content: "";
    border-top: 2px solid var(--color-primary);
    border-right: 2px solid var(--color-primary);
    transform: translateY(-50%) rotate(45deg);
}

.integration-flow-connection span {
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 12px rgba(196, 0, 0, 0.45);
    transform: translateY(-50%);
    animation: integration-horizontal-flow 4.2s linear infinite;
}

.integration-flow-connection span:nth-child(2) {
    animation-delay: 1.4s;
}

.integration-flow-connection span:nth-child(3) {
    animation-delay: 2.8s;
}

@keyframes integration-horizontal-flow {
    from {
        left: 0;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    to {
        left: calc(100% - 7px);
        opacity: 0;
    }
}

.integration-flow-destinations {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.integration-flow-destinations article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 82px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-light);
}

.integration-flow-destinations svg {
    width: 23px;
    height: 23px;
    flex-shrink: 0;
    color: var(--color-primary);
    stroke-width: 1.7;
}

.integration-flow-destinations article div {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.integration-flow-destinations strong {
    color: var(--color-dark);
    font-size: 0.82rem;
}

.integration-flow-destinations span {
    color: var(--color-muted);
    font-size: 0.67rem;
    line-height: 1.4;
}

/* =========================================================
   DATENARTEN
   ========================================================= */

.integration-data-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}

.integration-data-strip span {
    padding: 9px 13px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.72rem;
}
/* =========================================================
   SHOPIFY + PLENTYONE – VORTEILE
   ========================================================= */

.integration-benefits-section {
    padding: 40px 0;
    background: var(--color-white);
}

.integration-benefits-intro {
    max-width: 920px;
    margin-bottom: 46px;
}

.integration-benefits-intro .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.integration-benefits-intro h2 {
    max-width: 980px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.integration-benefits-intro p {
    max-width: 780px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.integration-benefit-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    border: 1px solid var(--color-border);
    border-radius: 18px;
    background: var(--color-light);
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 240ms ease;
}

.integration-benefit-card:hover {
    border-color: rgba(196, 0, 0, 0.28);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.07);
    transform: translateY(-5px);
}

.integration-benefit-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 46px;
}

.integration-benefit-number {
    color: var(--color-primary);
    font-family: "JetBrains Mono", monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.integration-benefit-icon {
    width: 29px;
    height: 29px;
    color: var(--color-primary);
    opacity: 0.24;
    stroke-width: 1.6;
    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.integration-benefit-card:hover .integration-benefit-icon {
    opacity: 0.65;
    transform: translateY(-2px);
}

.integration-benefit-card h3 {
    margin: 0 0 14px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    line-height: 1.25;
}

.integration-benefit-card p {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.72;
}
/* =====================================================
   Shopify × PlentyONE Projekte
===================================================== */

.combo-projects{
    padding:40px 0;
    background:#f7f7f8;
}

.combo-project-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
    margin-top:70px;
}

.combo-project-card{
    position:relative;
    background:#fafafa;
    border:1px solid #ececec;
    border-radius:18px;
    padding:34px;
    min-height:250px;
    transition:.35s;
}

.combo-project-card:hover{
    transform:translateY(-6px);
    border-color:rgba(228,0,0,.22);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}

.combo-project-card .card-number{
    font-size:.78rem;
    font-weight:700;
    color:var(--color-primary);
    letter-spacing:.15em;
}

.combo-project-card .card-icon{
    position:absolute;
    top:28px;
    right:28px;
    color:rgba(228,0,0,.45);
}

.combo-project-card .card-icon svg{
    width:30px;
    height:30px;
}

.combo-project-card h3{
    margin:54px 0 18px;
    font-size:2rem;
    line-height:1.2;
}

.combo-project-card p{
    margin:0;
    color:#555;
    line-height:1.9;
}

@media (max-width:980px){

    .combo-project-grid{
        grid-template-columns:1fr;
    }

}

@media (max-width:700px){

    .combo-projects{
        padding:80px 0;
    }

    .combo-project-grid{
        margin-top:50px;
    }

    .combo-project-card{
        min-height:auto;
        padding:28px;
    }

    .combo-project-card h3{
        font-size:1.85rem;
    }

}
.combo-projects .section-eyebrow {
    display: inline-block;
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}
.combo-projects .section-intro {
    max-width: 920px;
    margin-bottom: 46px;
}

.combo-projects .section-intro h2 {
    max-width: 980px;
    margin: 0 0 22px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.combo-projects .section-intro p {
    max-width: 780px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}
.combo-projects .section-eyebrow{
    color: var(--color-primary) !important;
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .82rem;
    font-weight: 700;
}
/* =========================================================
   EINHEITLICHE EYEBROWS AUF HELLEN BEREICHEN
   Referenz: Startseite
   ========================================================= */

.hero-kicker,
.section-kicker,
.section-eyebrow {
    display: inline-block;
    margin-top: 0;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: 1;
}
.hero-kicker {
    margin-bottom: 22px;
}

.section-kicker {
    margin-bottom: 18px;
}

.section-eyebrow {
    margin-bottom: 22px;
}
/* =========================================================
   EYEBROWS – EINHEITLICH WIE AUF DER STARTSEITE
   ========================================================= */

.section-eyebrow.section-eyebrow {
    display: inline-block;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.4;
    text-transform: uppercase;
    opacity: 1;
}
@media (min-width: 1101px) {
    .integration-hero-visual {
        margin-top: -40px;
    }
}
.shopify-partner-card,
.shopify-service-card,
.shopify-project-card,
.plentyone-service-card,
.plentyone-project-card,
.integration-benefit-card,
.combo-project-card {
    border-radius: var(--radius-card);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: var(--shadow-card);
    transition:
        transform 350ms ease,
        box-shadow 350ms ease,
        border-color 350ms ease;
}

.shopify-partner-card:hover,
.shopify-service-card:hover,
.shopify-project-card:hover,
.plentyone-service-card:hover,
.plentyone-project-card:hover,
.integration-benefit-card:hover,
.combo-project-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: var(--shadow-card-hover);
}
/* =========================================================
   HERO-RHYTHMUS – GLOBAL
   ========================================================= */

.hero,
.shopify-hero,
.plentyone-hero,
.integration-hero {
    padding-top: var(--hero-space-top-desktop);
    padding-bottom: var(--hero-space-bottom-desktop);
}

.hero-kicker,
.shopify-hero .section-eyebrow,
.plentyone-hero .section-eyebrow,
.integration-hero .section-eyebrow {
    margin-bottom: var(--hero-eyebrow-gap);
}

.hero h1,
.shopify-hero h1,
.plentyone-hero h1,
.integration-hero h1 {
    margin-top: 0;
    margin-bottom: var(--hero-title-gap);
}

.hero-actions,
.shopify-hero-actions,
.plentyone-hero-actions,
.integration-hero-actions {
    margin-top: var(--hero-actions-gap);
}

.hero-meta,
.shopify-hero-trust,
.plentyone-hero-trust,
.integration-hero-trust {
    margin-top: var(--hero-trust-gap);
}
/* =========================================================
   REFERENZEN HERO
   ========================================================= */

.references-hero {
    position: relative;
    overflow: hidden;
    padding-top: var(--hero-space-top-desktop);
    padding-bottom: var(--hero-space-bottom-desktop);
    background:
        radial-gradient(
            circle at 84% 24%,
            rgba(196, 0, 0, 0.07),
            transparent 34%
        ),
        var(--color-white);
}

.references-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
    align-items: center;
    gap: 78px;
}

.references-hero-content {
    position: relative;
    z-index: 2;
    max-width: 760px;
}

.references-hero .section-eyebrow {
    margin-bottom: var(--hero-eyebrow-gap);
}

.references-hero h1 {
    margin: 0 0 var(--hero-title-gap);
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.25rem, 5.1vw, 5.7rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 0.98;
}

.references-hero-lead {
    max-width: 720px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.08rem;
    line-height: 1.8;
}

.references-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: var(--hero-actions-gap);
}

.references-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: var(--hero-trust-gap);
    padding-top: 28px;
    border-top: 1px solid var(--color-border);
}

.references-hero-trust div {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.references-hero-trust strong {
    color: var(--color-dark);
    font-size: 0.98rem;
}

.references-hero-trust span {
    color: var(--color-muted);
    font-size: 0.82rem;
    line-height: 1.45;
}

/* =========================================================
   REFERENZEN HERO VISUAL
   ========================================================= */

.references-hero-visual {
    position: relative;
    min-height: 650px;
}

@media (min-width: 1101px) {
    .references-hero-visual {
        margin-top: -130px;
    }
}

.references-project-stage {
    position: absolute;
    inset: 18px 0 18px 28px;
}

.references-project-card-main {
    position: absolute;
    inset: 52px 26px 48px 18px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: 28px;
    background: var(--color-white);
    box-shadow: var(--shadow-hero);
}

.references-project-browser {
    height: 100%;
}

.references-project-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 48px;
    padding: 0 18px;
    border-bottom: 1px solid var(--color-border);
    background: #f4f4f4;
}

.references-project-toolbar > span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d1d1d1;
}

.references-project-toolbar div {
    width: min(280px, 60%);
    margin-left: auto;
    margin-right: auto;
    padding: 7px 14px;
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.72rem;
    text-align: center;
}

.references-project-preview {
    padding: 30px;
}

.references-project-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 26px;
}

.references-project-preview-header strong {
    letter-spacing: 0.12em;
}

.references-project-preview-header span {
    color: var(--color-muted);
    font-size: 0.85rem;
}

.references-project-preview-content {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: 390px;
    overflow: hidden;
    border-radius: 20px;
    background: #f4f0ea;
}

.references-project-preview-image {
    display: flex;
    align-items: flex-start;
    padding: 28px;
    background:
        radial-gradient(
            circle at 50% 65%,
            rgba(0, 0, 0, 0.18),
            transparent 32%
        ),
        linear-gradient(145deg, #e8e1d8, #f7f4ef);
}

.references-project-preview-image span {
    padding: 9px 13px;
    border-radius: 999px;
    background: var(--color-white);
    font-size: 0.72rem;
    font-weight: 700;
}

.references-project-preview-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px;
    background: var(--color-white);
}

.references-project-preview-copy small {
    margin-bottom: 18px;
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.references-project-preview-copy strong {
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2rem, 2.7vw, 3rem);
    letter-spacing: -0.04em;
    line-height: 1;
}

.references-project-preview-copy span {
    margin-top: 22px;
    color: var(--color-muted);
    font-size: 0.85rem;
}

.references-project-badge {
    position: absolute;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 145px;
    padding: 16px 18px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 16px;
    background: var(--color-white);
    box-shadow: 0 16px 42px rgba(0, 0, 0, 0.09);
}

.references-project-badge span {
    color: var(--color-muted);
    font-size: 0.68rem;
}

.references-project-badge strong {
    color: var(--color-dark);
    font-size: 0.9rem;
}

.references-project-badge-shopify {
    top: 12px;
    right: 4px;
}

.references-project-badge-plenty {
    right: 0;
    bottom: 64px;
}

.references-project-badge-result {
    bottom: 0;
    left: 0;
    min-width: 210px;
}

.references-project-badge-result strong {
    color: var(--color-primary);
}

.references-project-tags {
    position: absolute;
    z-index: 3;
    right: 40px;
    bottom: 18px;
    display: flex;
    gap: 8px;
}

.references-project-tags span {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.72rem;
}
/* =========================================================
   REFERENZEN – ARBEITSWEISE
   ========================================================= */

.references-approach-section {
    padding: var(--section-space-desktop) 0;
    background: var(--color-light);
}

.references-approach-intro {
    max-width: 920px;
    margin-bottom: 52px;
}

.references-approach-intro .section-eyebrow {
    margin-bottom: 22px;
}

.references-approach-intro h2 {
    max-width: 900px;
    margin: 0 0 24px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.references-approach-intro p {
    max-width: 780px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.references-card {
    position: relative;
    min-height: 250px;
    padding: 34px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    transition:
        transform 350ms ease,
        box-shadow 350ms ease,
        border-color 350ms ease;
}

.references-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: var(--shadow-card-hover);
}

.references-number {
    display: inline-block;
    margin-bottom: 52px;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.references-card h3 {
    margin: 0 0 16px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.15;
}

.references-card p {
    max-width: 520px;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.7;
}
.plentyone-channels-section .section-eyebrow,
.references-approach-section .section-eyebrow {
    margin-bottom: 22px;
}

.plentyone-channels-section h2,
.references-approach-intro h2 {
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
}

.plentyone-channels-section p,
.references-approach-intro p {
    font-size: 1.02rem;
    line-height: 1.75;
}
.references-overview {
    padding: var(--section-spacing) 0 70px;
    background: var(--color-bg-light);
}

.references-overview .container {
    max-width: 1280px;
}

.references-overview h2 {
    max-width: 780px;
    margin: 20px 0 30px;
}

.references-overview .section-intro {
    max-width: 820px;
}
/* =========================================================
   REFERENZEN – PROJEKT SHOWCASES
   ========================================================= */

.references-showcases {
    padding: 20px 0 var(--section-space-desktop);
    background: var(--color-light);
}

.references-showcases-container {
    display: flex;
    flex-direction: column;
    gap: 110px;
}

.reference-showcase {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 72px;
}

.reference-showcase-reverse .reference-showcase-visual {
    order: 2;
}

.reference-showcase-reverse .reference-showcase-content {
    order: 1;
}

/* Screenshot */

.reference-showcase-visual {
    min-width: 0;
}

.reference-browser-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 46px;
    padding: 0 17px;
    border-bottom: 1px solid var(--color-border);
    background: #f2f2f2;
}

.reference-browser-toolbar > span {
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #cecece;
}

.reference-browser-toolbar div {
    width: min(250px, 52%);
    margin-left: auto;
    margin-right: auto;
    padding: 6px 12px;
    border-radius: 7px;
    background: var(--color-white);
    color: var(--color-muted);
    font-size: 0.7rem;
    text-align: center;
}

.reference-browser-frame-dark .reference-browser-toolbar {
    border-color: rgba(255, 255, 255, 0.08);
    background: #161616;
}

.reference-browser-frame-dark .reference-browser-toolbar div {
    background: #252525;
    color: rgba(255, 255, 255, 0.65);
}

/* Content */

.reference-showcase-content {
    max-width: 580px;
}

.reference-showcase-content .section-eyebrow {
    margin-bottom: 20px;
}

.reference-showcase-content h3 {
    margin: 0 0 24px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
}

.reference-showcase-lead {
    max-width: 560px;
    margin: 0 0 32px;
    color: var(--color-muted);
    font-size: 1.04rem;
    line-height: 1.75;
}

.reference-meta-group {
    margin-top: 24px;
}

.reference-meta-label {
    display: block;
    margin-bottom: 12px;
    color: var(--color-dark);
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.reference-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.reference-tags span {
    padding: 9px 13px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.78rem;
    line-height: 1;
}

.reference-services {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid var(--color-border);
}

.reference-services ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.reference-services li {
    position: relative;
    padding-left: 21px;
    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

.reference-services li::before {
    position: absolute;
    top: 0;
    left: 0;
    color: var(--color-primary);
    font-weight: 800;
    content: "✓";
}

.reference-highlight {
    margin-top: 28px;
    padding: 20px 22px;
    border: 1px solid rgba(196, 0, 0, 0.14);
    border-radius: 16px;
    background: rgba(196, 0, 0, 0.035);
}

.reference-highlight span {
    display: block;
    margin-bottom: 7px;
    color: var(--color-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.reference-highlight strong {
    color: var(--color-dark);
    font-size: 0.96rem;
    line-height: 1.45;
}
.references-intro {
    padding: 110px 0 70px;
}
.references-intro-text {
    max-width: 760px;
}
.references-intro h2{
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: .95;
    max-width: 650px;
}
.references-intro h2{
    margin-bottom: 40px;
}
.reference-showcase:first-of-type{
    margin-top: 20px;
}
.references-intro {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 110px 0 70px;
}

.references-intro-content {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 6rem;
    align-items: start;
}
/* =========================================================
   REFERENZEN – ÜBERSICHT DESKTOP
   ========================================================= */

.references-overview {
    padding: var(--section-space-desktop) 0 76px;
    background: var(--color-white);
}

.references-overview .container {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
    column-gap: 90px;
    align-items: start;
}

.references-overview .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.references-overview h2 {
    grid-column: 1;
    margin: 0;
    max-width: 520px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.references-overview .section-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    max-width: 720px;
    margin: 0 0 8px;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}
.references-overview .section-intro {
    align-self: center;
}
.cta-text {
    max-width: 440px;
}
/* =========================================================
   AGENTUR – WARUM UNTERNEHMEN MIT UNS ARBEITEN
   ========================================================= */

@media (min-width: 901px) {
    .agency-values-section {
        padding-top: 55px;
    }
}

.agency-values-intro {
    max-width: 920px;
    margin-bottom: 52px;
}

.agency-values-intro .section-eyebrow {
    margin-bottom: 22px;
}

.agency-values-intro h2 {
    max-width: 900px;
    margin: 0 0 24px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.agency-values-intro .section-intro {
    max-width: 780px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.agency-values-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--card-gap);
}

.agency-value-card {
    position: relative;
    min-height: 285px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
    transition:
        transform 350ms ease,
        box-shadow 350ms ease,
        border-color 350ms ease;
}

.agency-value-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: var(--shadow-card-hover);
}

.agency-value-card::after {
    position: absolute;
    top: -90px;
    right: -90px;
    width: 220px;
    height: 220px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.035);
    pointer-events: none;
}

.agency-value-number {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 56px;
    color: var(--color-primary);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.agency-value-card h3 {
    position: relative;
    z-index: 1;
    max-width: 460px;
    margin: 0 0 16px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.agency-value-card p {
    position: relative;
    z-index: 1;
    max-width: 560px;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.72;
}
.agency-value-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 56px;
}

.agency-value-number {
    margin-bottom: 0;
}

.agency-value-icon {
    position: static;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
    opacity: 0.25;
    stroke-width: 1.6;
    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.agency-value-card:hover .agency-value-icon {
    opacity: 0.7;
    transform: translateY(-3px);
}
/* =========================================================
   AGENTUR – UNSERE ARBEITSWEISE
   ========================================================= */

.agency-process-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-white);
}

.agency-process-intro {
    max-width: 960px;
    margin-bottom: 56px;
}

.agency-process-intro .section-eyebrow {
    margin-bottom: 22px;
}

.agency-process-intro h2 {
    max-width: 920px;
    margin: 0 0 26px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.agency-process-intro .section-intro {
    max-width: 800px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

.agency-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.agency-process-card {
    position: relative;
    min-height: 330px;
    padding: 30px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: var(--radius-card);
    background: var(--color-light);
    transition:
        transform 350ms ease,
        box-shadow 350ms ease,
        border-color 350ms ease;
}

.agency-process-card:hover {
    transform: translateY(-6px);
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: var(--shadow-card-hover);
}

.agency-process-card::after {
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 190px;
    height: 190px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.035);
    pointer-events: none;
}

.agency-process-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 68px;
}

.agency-process-number {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.agency-process-icon {
    width: 29px;
    height: 29px;
    color: var(--color-primary);
    opacity: 0.28;
    stroke-width: 1.6;
    transition:
        opacity 250ms ease,
        transform 250ms ease;
}

.agency-process-card:hover .agency-process-icon {
    opacity: 0.75;
    transform: translateY(-3px);
}

.agency-process-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.agency-process-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}
/* =========================================================
   AGENTUR – LEISTUNGEN
   ========================================================= */

.agency-services-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-light);
}

.agency-services-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    column-gap: 90px;
    align-items: end;
    margin-bottom: 72px;
}

.agency-services-intro .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.agency-services-intro h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

/* Service-Liste */

.agency-services-list {
    border-top: 1px solid var(--color-border);
}

.agency-service {
    display: grid;
    grid-template-columns: 90px minmax(240px, 0.8fr) minmax(0, 1.2fr);
    gap: 34px;
    align-items: start;
    padding: 38px 0;
    border-bottom: 1px solid var(--color-border);
    transition:
        padding-left 280ms ease,
        background-color 280ms ease;
}

.agency-service:hover {
    padding-left: 14px;
    background: rgba(196, 0, 0, 0.018);
}

.agency-service-number {
    padding-top: 8px;
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.agency-service-content {
    display: contents;
}

.agency-service h3 {
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.9rem, 2.6vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.agency-service p {
    max-width: 720px;
    margin: 3px 0 0;
    color: var(--color-muted);
    font-size: 0.98rem;
    line-height: 1.72;
}
.agency-service {
    transition: all .35s ease;
}

.agency-service:hover {
    padding-left: 18px;
    background: rgba(196,0,0,.015);
}
.agency-service{
    grid-template-columns:70px 320px 1fr;
}
.agency-service p{
    color:#555;
}
.agency-service{
    position:relative;
}

.agency-service::after{
    content:"→";
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    font-size:22px;
    color:var(--color-primary);
    opacity:0;
    transition:.3s;
}

.agency-service:hover::after{
    opacity:1;
    right:10px;
}
.agency-services-intro-text{
    align-self:start;
    padding-top:140px;
}
@media (min-width: 1001px) {
    .agency-services-intro .section-intro {
        align-self: start;
        margin: 0;
        padding-top: 180px;
    }
}
.agency-services-section{
    background:#fff;
}
.agency-services-section{
    background:#f7f8fa;
    padding:140px 0;
    border-bottom:1px solid rgba(0,0,0,.05);
}
/* =========================================================
   AGENTUR – SYSTEME & TECHNOLOGIEN
   ========================================================= */

.agency-technologies-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-white);
}

.agency-technologies-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    column-gap: 100px;
    align-items: start;
    margin-bottom: 68px;
}

.agency-technologies-intro .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.agency-technologies-intro h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.5vw, 4.8rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.agency-technologies-intro .section-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    max-width: 680px;
    margin: 0;
    padding-top: 180px;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}

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

.agency-technology-group {
    position: relative;
    min-height: 310px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: #fafafa;
    transition:
        transform 300ms ease,
        border-color 300ms ease,
        box-shadow 300ms ease;
}

.agency-technology-group:hover {
    transform: translateY(-5px);
    border-color: rgba(196, 0, 0, 0.2);
    box-shadow: var(--shadow-card-hover);
}

.agency-technology-group::after {
    position: absolute;
    right: -75px;
    bottom: -75px;
    width: 190px;
    height: 190px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.03);
    pointer-events: none;
}

.agency-technology-group-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}

.agency-technology-number {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.agency-technology-icon {
    width: 29px;
    height: 29px;
    color: var(--color-primary);
    opacity: 0.25;
    stroke-width: 1.6;
}

.agency-technology-group h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 24px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.agency-technology-tags {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.agency-technology-tags span {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-dark);
    font-size: 0.88rem;
    line-height: 1.2;
}

.agency-technology-tags .agency-technology-more {
    border-color: rgba(196, 0, 0, 0.18);
    color: var(--color-primary);
    font-weight: 700;
}
.agency-services-section {
    padding: 80px 0 140px;
}
.agency-references-teaser {
    padding: 90px 0;
    background: var(--color-white);
}

.agency-references-teaser-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(380px, 0.8fr);
    gap: 100px;
    align-items: center;
    padding: 56px 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.agency-references-teaser h2 {
    max-width: 760px;
    margin: 20px 0 0;
    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 4vw, 4.4rem);
    font-weight: 700;
    line-height: 1.03;
    letter-spacing: -0.04em;
}

.agency-references-teaser-content {
    max-width: 620px;
}

.agency-references-teaser-content p {
    margin: 0 0 28px;
    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.agency-references-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--color-dark);
    font-weight: 700;
    text-decoration: none;
}

.agency-references-link span {
    color: var(--color-primary);
    transition: transform 220ms ease;
}

.agency-references-link:hover span {
    transform: translateX(6px);
}

@media (max-width: 900px) {
    .agency-references-teaser-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }
}

@media (max-width: 700px) {
    .agency-references-teaser {
        padding: 60px 0;
    }

    .agency-references-teaser-inner {
        padding: 42px 0;
    }

    .agency-references-teaser h2 br {
        display: none;
    }
}
/* =========================================================
   AGENTUR – HERO
   ========================================================= */

.agency-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 88px;
    background:
        radial-gradient(
            circle at 88% 34%,
            rgba(196, 0, 0, 0.055),
            transparent 34%
        ),
        var(--color-white);
}

.agency-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(460px, 1.05fr);
    gap: 84px;
    align-items: center;
}

.agency-hero-content {
    position: relative;
    z-index: 2;
    max-width: 780px;
}

.agency-hero-content .section-eyebrow {
    margin-bottom: 24px;
}

.agency-hero-content h1 {
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.6rem, 5.2vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.agency-hero-lead {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.agency-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}


/* =========================================================
   AGENTUR – HERO VISUAL
   ========================================================= */

.agency-hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.agency-system-visual {
    position: relative;
    width: min(100%, 620px);
    min-height: 520px;
    padding: 42px;
    overflow: hidden;
    border-radius: 30px;
    background:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        #171717;
    background-size: 42px 42px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.14);
}

.agency-system-visual::before {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 360px;
    height: 360px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.12);
    filter: blur(2px);
}

.agency-system-visual::after {
    position: absolute;
    right: 80px;
    bottom: -130px;
    width: 300px;
    height: 300px;
    content: "";
    border: 1px solid rgba(196, 0, 0, 0.28);
    border-radius: 50%;
    box-shadow:
        0 0 0 34px rgba(196, 0, 0, 0.045),
        0 0 0 68px rgba(196, 0, 0, 0.025);
}

.agency-system-label {
    position: relative;
    z-index: 2;
    display: inline-block;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.agency-system-core {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 230px;
    height: 230px;
    margin: 72px auto 58px;
    border: 1px solid rgba(196, 0, 0, 0.42);
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.09);
    box-shadow:
        0 0 0 32px rgba(196, 0, 0, 0.045),
        0 0 0 64px rgba(196, 0, 0, 0.025);
}

.agency-system-core::before,
.agency-system-core::after {
    position: absolute;
    content: "";
    border-radius: 50%;
}

.agency-system-core::before {
    inset: 26px;
    border: 1px solid rgba(255, 255, 255, 0.13);
}

.agency-system-core::after {
    inset: 54px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.agency-system-core span {
    position: relative;
    z-index: 2;
    max-width: 170px;
    color: var(--color-white);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    text-align: center;
}

.agency-system-connections {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.agency-system-connections span {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    line-height: 1.2;
}
.agency-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 0.85fr);
    gap: 70px;
    align-items: center;
}
.agency-system-visual {
    width: min(100%, 540px);
    min-height: 470px;
}
.agency-system-core {
    width: 200px;
    height: 200px;
    margin: 60px auto 48px;
}
.agency-hero-content{
    max-width: 900px;
}
.agency-system-visual{
    width: min(100%, 520px);
    min-height: 450px;
    justify-self: end;
}
.agency-hero-container{
    display:grid;
    grid-template-columns:1.2fr 0.8fr;
    gap:80px;
    align-items:center;
}
@media (min-width: 901px) {
    section.agency-hero {
        padding-top: 55px !important;
    }
}
.agency-system-connections .agency-system-more {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 6px;
    padding: 2px 0;

    color: rgba(255,255,255,.55);

    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    line-height: 1.4;
    text-transform: uppercase;

    background: transparent;
    border: 0;
}
.agency-technologies-section {
    padding-bottom: 20px;   /* statt z.B. 120px */
}
.agency-technologies-intro .section-intro {
    transform: translateY(-65px);
}
/* =========================================================
   KONTAKT – HERO
   ========================================================= */

.contact-hero {
    position: relative;
    overflow: hidden;
    padding: 55px 0 90px;
    background:
        radial-gradient(
            circle at 86% 30%,
            rgba(196, 0, 0, 0.055),
            transparent 34%
        ),
        var(--color-white);
}

.contact-hero-container {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(420px, 0.92fr);
    gap: 90px;
    align-items: center;
}

.contact-hero-content {
    max-width: 820px;
}

.contact-hero-content .section-eyebrow {
    margin-bottom: 24px;
}

.contact-hero-content h1 {
    max-width: 780px;
    margin: 0 0 28px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.8rem, 5.4vw, 6.2rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.contact-hero-lead {
    max-width: 760px;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.contact-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}


/* =========================================================
   KONTAKT – DIREKTKARTE
   ========================================================= */

.contact-direct-card {
    position: relative;
    padding: 42px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-light);
    box-shadow: var(--shadow-card);
}

.contact-direct-card::after {
    position: absolute;
    right: -90px;
    bottom: -90px;
    width: 220px;
    height: 220px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.02);
    pointer-events: none;
}

.contact-direct-kicker {
    position: relative;
    z-index: 1;
    display: inline-block;
    margin-bottom: 20px;
    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.contact-direct-card h2 {
    position: relative;
    z-index: 1;
    margin: 0 0 34px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 3vw, 3.4rem);
    font-weight: 700;
    letter-spacing: -0.04em;
    line-height: 1.02;
}

.contact-direct-list {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.contact-direct-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 76px;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: 14px;
    background: var(--color-white);
    color: var(--color-dark);
    text-decoration: none;
    transition:
        transform 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

a.contact-direct-item:hover {
    transform: translateY(-2px);
    border-color: rgba(196, 0, 0, 0.22);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.05);
}

.contact-direct-item i {
    width: 22px;
    height: 22px;
    color: var(--color-primary);
    stroke-width: 1.7;
}

.contact-direct-item span {
    display: grid;
    gap: 4px;
}

.contact-direct-item small {
    color: var(--color-muted);
    font-size: 0.76rem;
    line-height: 1.2;
}

.contact-direct-item strong {
    color: var(--color-dark);
    font-size: 0.93rem;
    font-weight: 700;
    line-height: 1.35;
}
/* =========================================================
   KONTAKT – ZUSAMMENARBEIT
   ========================================================= */

.contact-process-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-light);
}

.contact-process-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    column-gap: 100px;
    align-items: start;
    margin-bottom: 68px;
}

.contact-process-intro .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.contact-process-intro h2 {
    grid-column: 1;
    max-width: 850px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.6vw, 4.9rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.contact-process-intro .section-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    max-width: 680px;
    margin: 0;
    padding-top: 165px;
    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* Prozesskarten */

.contact-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.contact-process-card {
    position: relative;
    min-height: 355px;
    padding: 32px;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
    transition:
        transform 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms ease;
}

.contact-process-card:hover {
    transform: translateY(-5px);
    border-color: rgba(196, 0, 0, 0.2);
    box-shadow: var(--shadow-card-hover);
}

.contact-process-card::after {
    position: absolute;
    right: -76px;
    bottom: -76px;
    width: 190px;
    height: 190px;
    content: "";
    border-radius: 50%;
    background: rgba(196, 0, 0, 0.035);
    pointer-events: none;
}

.contact-process-card-header {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 68px;
}

.contact-process-number {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.contact-process-icon {
    width: 27px;
    height: 27px;
    color: var(--color-primary);
    opacity: 0.3;
    stroke-width: 1.7;
}

.contact-process-card h3 {
    position: relative;
    z-index: 1;
    margin: 0 0 16px;
    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.contact-process-card p {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   KONTAKT – WARUM MIT UNS
   Stil wie Leistungs-Section der Agenturseite
   ========================================================= */

.contact-trust-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-white);
}


/* ---------- Intro ---------- */

.contact-trust-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);
    column-gap: 110px;
    align-items: start;
    margin-bottom: 70px;
}

.contact-trust-intro .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.contact-trust-intro h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.contact-trust-intro .section-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;

    max-width: 680px;
    margin: 0;
    padding-top: 155px;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* ---------- Liste ---------- */

.contact-trust-grid {
    border-top: 1px solid var(--color-border);
}

.contact-trust-card {
    display: grid;
    grid-template-columns:
        90px
        minmax(280px, 0.7fr)
        minmax(420px, 1.3fr);

    column-gap: 42px;
    align-items: center;

    min-height: 134px;
    padding: 30px 0;

    border-bottom: 1px solid var(--color-border);

    transition:
        padding-left 240ms ease,
        background-color 240ms ease;
}

.contact-trust-card {
    min-height: 134px;
    padding: 30px 0;
    border-bottom: 1px solid var(--color-border);

    transition:
        background-color 240ms ease;
}

.contact-trust-card:hover {
    padding-left: 0;
    background: rgba(196, 0, 0, 0.018);
}

.contact-trust-number {
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.contact-trust-card h3 {
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.5vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.05;
}

.contact-trust-card p {
    max-width: 760px;
    margin: 0;

    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}
.contact-trust-section{
    background:#fff;
}

@media (min-width: 1101px) {
    .contact-trust-intro .section-intro {
        padding-top: 180px;
    }
}
/* =========================================================
   KONTAKT – FORMULAR
   ========================================================= */

.contact-form-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-light);
}

.contact-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(520px, 1.18fr);
    gap: 110px;
    align-items: start;
}


/* =========================================================
   KONTAKT – FORMULAR INTRO
   ========================================================= */

.contact-form-intro {
    position: sticky;
    top: 130px;
    max-width: 680px;
}

.contact-form-intro .section-eyebrow {
    margin-bottom: 24px;
}

.contact-form-intro h2 {
    max-width: 700px;
    margin: 0 0 30px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.02;
}

.contact-form-intro .section-intro {
    max-width: 620px;
    margin: 0;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   KONTAKT – FORMULAR WRAPPER
   ========================================================= */

.contact-form-wrapper {
    position: relative;
    padding: 48px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.contact-form {
    display: grid;
    gap: 28px;
}

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


/* =========================================================
   KONTAKT – FORMULARFELDER
   ========================================================= */

.form-field {
    display: grid;
    gap: 10px;
}

.form-field label {
    color: var(--color-dark);
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.3;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;

    border: 1px solid var(--color-border);
    border-radius: 12px;
    outline: none;

    background: var(--color-white);
    color: var(--color-dark);

    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.5;

    transition:
        border-color 220ms ease,
        box-shadow 220ms ease,
        background-color 220ms ease;
}

.form-field input,
.form-field select {
    min-height: 58px;
    padding: 0 17px;
}

.form-field textarea {
    min-height: 190px;
    padding: 16px 17px;
    resize: vertical;
}

.form-field textarea::placeholder,
.form-field input::placeholder {
    color: rgba(30, 30, 30, 0.48);
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
    border-color: rgba(196, 0, 0, 0.28);
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(196, 0, 0, 0.08);
}

.form-field select {
    appearance: none;
    cursor: pointer;

    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-dark) 50%),
        linear-gradient(135deg, var(--color-dark) 50%, transparent 50%);
    background-position:
        calc(100% - 20px) 25px,
        calc(100% - 15px) 25px;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;

    padding-right: 48px;
}


/* =========================================================
   KONTAKT – DATENSCHUTZ
   ========================================================= */

.form-checkbox {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 12px;
    align-items: start;

    padding: 18px 0 4px;
}

.form-checkbox input {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;

    accent-color: var(--color-primary);
    cursor: pointer;
}

.form-checkbox label {
    color: var(--color-muted);
    font-size: 0.88rem;
    line-height: 1.6;
}

.form-checkbox a {
    color: var(--color-dark);
    font-weight: 700;
    text-underline-offset: 3px;
}

.form-checkbox a:hover {
    color: var(--color-primary);
}


/* =========================================================
   KONTAKT – FORM ACTIONS
   ========================================================= */

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    align-items: center;

    padding-top: 8px;
}

/* Greift sowohl bei btn als auch bei eurem bisherigen Button-System */

.form-actions .btn,
.form-actions .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 58px;
    padding: 0 28px;

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);

    background: var(--color-primary);
    color: var(--color-white);

    font-family: inherit;
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        transform 220ms ease,
        background-color 220ms ease,
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.form-actions .btn:hover,
.form-actions .button:hover {
    transform: translateY(-2px);
    background: var(--color-primary-dark, #a90000);
    border-color: var(--color-primary-dark, #a90000);
    box-shadow: 0 12px 28px rgba(196, 0, 0, 0.18);
}

.form-actions .btn:active,
.form-actions .button:active {
    transform: translateY(0);
}

.form-note {
    max-width: 370px;
    margin: 0;

    color: var(--color-muted);
    font-size: 0.84rem;
    line-height: 1.55;
}
.contact-form input:focus,
.contact-form textarea:focus,
.contact-form select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(196, 0, 0, 0.08);
}
.contact-form ::placeholder {
    color: rgba(20, 20, 20, 0.42);
    opacity: 1;
}
.contact-form select {
    appearance: none;
    -webkit-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, var(--color-text) 50%),
        linear-gradient(135deg, var(--color-text) 50%, transparent 50%);
    background-position:
        calc(100% - 22px) calc(50% - 3px),
        calc(100% - 16px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
}
/* =========================================================
   KONTAKT – FAQ
   ========================================================= */

.contact-faq-section {
    position: relative;
    padding: var(--section-space-desktop) 0;
    background: var(--color-white);
}


/* ---------- Intro ---------- */

.contact-faq-intro {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
    column-gap: 110px;
    align-items: start;
    margin-bottom: 72px;
}

.contact-faq-intro .section-eyebrow {
    grid-column: 1;
    margin-bottom: 22px;
}

.contact-faq-intro h2 {
    grid-column: 1;
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4.8vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.02;
}

.contact-faq-intro .section-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;

    max-width: 620px;
    margin: 0;
    padding-top: 150px;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* ---------- Accordion ---------- */

.contact-faq-list {
    border-top: 1px solid var(--color-border);
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}

.faq-item summary {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    gap: 28px;
    align-items: center;

    min-height: 116px;
    padding: 30px 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 2.1vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.2;

    list-style: none;
    cursor: pointer;

    transition:
        color 220ms ease,
        background-color 220ms ease;
}

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

.faq-item summary::marker {
    content: "";
}

.faq-item summary::after {
    content: "+";

    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 1.55rem;
    font-weight: 400;
    line-height: 1;

    transform: rotate(0);
    transform-origin: center;
    transition:
        transform 240ms ease,
        color 240ms ease;
}

.faq-item summary:hover {
    color: var(--color-primary);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    max-width: 880px;
    margin: -8px 0 0;
    padding: 0 64px 34px 0;

    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.faq-item[open] p {
    animation: faq-answer-in 240ms ease both;
}

@keyframes faq-answer-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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


/* ---------- Tastaturfokus ---------- */

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 6px;
    border-radius: 4px;
}
.contact-cta-section {
    margin-top: 0px;
}
.faq-item summary:hover {
    color: var(--color-dark);
    background: rgba(196,0,0,.02);
}

.faq-item summary:hover::after {
    color: var(--color-primary);
}
.site-footer {
    margin-top: 30px;
}
.faq-question::after {
    font-size: 2rem;
    font-weight: 300;
}
.faq-item:hover {
    background: rgba(196,0,0,.015);
}
.agency-hero-content {
    transform: translateY(-25px);
}
.contact-hero-content {
    transform: translateY(-35px);
}
/* =========================================================
   RECHTSTEXTE – HERO
   ========================================================= */

.legal-hero {
    position: relative;
    padding: 55px 0 84px;
    background:
        radial-gradient(
            circle at 86% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.legal-hero-container {
    max-width: 1360px;
}

.legal-hero .section-eyebrow {
    margin-bottom: 24px;
}

.legal-hero h1 {
    max-width: 900px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(4rem, 7vw, 7rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.95;
}

.legal-hero-intro {
    max-width: 680px;
    margin: 32px 0 0;

    color: var(--color-muted);
    font-size: 1.04rem;
    line-height: 1.75;
}


/* =========================================================
   RECHTSTEXTE – GRUNDLAYOUT
   ========================================================= */

.legal-content-section {
    padding: 90px 0 var(--section-space-desktop);
    background: var(--color-light);
}

.legal-content-layout {
    display: grid;
    grid-template-columns: minmax(210px, 0.3fr) minmax(0, 1fr);
    gap: 90px;
    align-items: start;
}


/* =========================================================
   RECHTSTEXTE – SIDEBAR
   ========================================================= */

.legal-sidebar {
    position: sticky;
    top: 130px;
}

.legal-sidebar-label {
    display: block;
    margin-bottom: 24px;

    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.legal-navigation {
    display: grid;
    border-top: 1px solid var(--color-border);
}

.legal-navigation a {
    position: relative;
    display: block;
    padding: 15px 28px 15px 0;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-muted);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;

    transition:
        color 220ms ease,
        padding-left 220ms ease;
}

.legal-navigation a::after {
    position: absolute;
    top: 50%;
    right: 2px;

    content: "→";
    color: var(--color-primary);

    opacity: 0;
    transform: translate(-6px, -50%);

    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

.legal-navigation a:hover {
    padding-left: 6px;
    color: var(--color-dark);
}

.legal-navigation a:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
}


/* =========================================================
   RECHTSTEXTE – DOKUMENT
   ========================================================= */

.legal-document {
    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);
    box-shadow: var(--shadow-card);
}

.legal-document-header {
    padding: 52px 58px 48px;

    border-bottom: 1px solid var(--color-border);
    background:
        radial-gradient(
            circle at 92% 0,
            rgba(196, 0, 0, 0.04),
            transparent 32%
        ),
        var(--color-white);
}

.legal-document-kicker {
    display: inline-block;
    margin-bottom: 20px;

    color: var(--color-primary);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.3;
    text-transform: uppercase;
}

.legal-document-header h2 {
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 4vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1;
}

.legal-document-header p {
    max-width: 720px;
    margin: 0;

    color: var(--color-muted);
    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   RECHTSTEXTE – ABSCHNITTE
   ========================================================= */

.legal-document-section {
    display: grid;
    grid-template-columns: 76px minmax(0, 1fr);
    gap: 34px;

    padding: 42px 58px;

    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: 130px;
}

.legal-section-number {
    padding-top: 7px;

    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.legal-section-content {
    max-width: 820px;
}

.legal-section-content h3 {
    margin: 0 0 20px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 2.4vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.legal-section-content p,
.legal-section-content address {
    margin: 0 0 18px;

    color: var(--color-muted);
    font-size: 1rem;
    font-style: normal;
    line-height: 1.8;
}

.legal-section-content p:last-child,
.legal-section-content address:last-child {
    margin-bottom: 0;
}

.legal-section-content strong {
    color: var(--color-dark);
    font-weight: 700;
}

.legal-section-content a {
    color: var(--color-dark);
    font-weight: 700;
    text-decoration-color: rgba(196, 0, 0, 0.35);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;

    transition: color 200ms ease;
}

.legal-section-content a:hover {
    color: var(--color-primary);
}


/* =========================================================
   RECHTSTEXTE – DATENLISTE
   ========================================================= */

.legal-data-list {
    display: grid;
    gap: 0;

    margin: 24px 0 0;

    border-top: 1px solid var(--color-border);
}

.legal-data-list > div {
    display: grid;
    grid-template-columns: minmax(190px, 0.7fr) minmax(0, 1fr);
    gap: 30px;

    padding: 18px 0;

    border-bottom: 1px solid var(--color-border);
}

.legal-data-list dt {
    color: var(--color-muted);
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
}

.legal-data-list dd {
    margin: 0;

    color: var(--color-dark);
    font-size: 0.96rem;
    font-weight: 700;
    line-height: 1.5;
}


/* =========================================================
   RECHTSTEXTE – HINWEIS
   ========================================================= */

.legal-document-note {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    align-items: center;

    margin: 42px 58px 52px;
    padding: 18px 20px;

    border: 1px solid rgba(196, 0, 0, 0.12);
    border-radius: 14px;

    background: rgba(196, 0, 0, 0.025);
}

.legal-document-note-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(196, 0, 0, 0.2);
    border-radius: 50%;

    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.legal-document-note p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.legal-document-note a {
    color: var(--color-dark);
    font-weight: 700;
    text-underline-offset: 3px;
}
/* =========================================================
   DATENSCHUTZ – ERGÄNZUNGEN ZUM LEGAL-LAYOUT
   ========================================================= */

.privacy-hero h1 {
    max-width: 980px;
}

.privacy-document-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 24px !important;
    padding: 8px 12px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    color: var(--color-muted);
    font-size: 0.78rem !important;
    font-weight: 700;
    line-height: 1.2 !important;
}


/* ---------- Unterüberschriften ---------- */

.legal-section-content h4 {
    margin: 32px 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: 1.12rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.legal-section-content h3 + h4 {
    margin-top: 0;
}


/* ---------- Aufzählungen ---------- */

.legal-list {
    display: grid;
    gap: 10px;

    margin: 22px 0 26px;
    padding: 0;

    list-style: none;
}

.legal-list li {
    position: relative;

    padding-left: 24px;

    color: var(--color-muted);
    font-size: 0.98rem;
    line-height: 1.65;
}

.legal-list li::before {
    position: absolute;
    top: 0.72em;
    left: 2px;

    width: 7px;
    height: 7px;

    content: "";

    border-radius: 50%;
    background: var(--color-primary);

    transform: translateY(-50%);
}


/* ---------- Infobox ---------- */

.legal-callout {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 16px;
    align-items: start;

    margin-top: 28px;
    padding: 18px 20px;

    border: 1px solid rgba(196, 0, 0, 0.12);
    border-radius: 14px;

    background: rgba(196, 0, 0, 0.025);
}

.legal-callout-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(196, 0, 0, 0.22);
    border-radius: 50%;

    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 800;
}

.legal-callout p {
    margin: 2px 0 0;
    font-size: 0.9rem;
    line-height: 1.65;
}


/* ---------- Cookie-Einstellungen ---------- */

.legal-cookie-settings {
    display: inline-flex;
    align-items: center;
    gap: 14px;

    min-height: 52px;
    margin-top: 10px;
    padding: 0 20px;

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);

    background: transparent;
    color: var(--color-primary);

    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;

    cursor: pointer;

    transition:
        color 220ms ease,
        background-color 220ms ease,
        transform 220ms ease,
        box-shadow 220ms ease;
}

.legal-cookie-settings span {
    transition: transform 220ms ease;
}

.legal-cookie-settings:hover {
    color: var(--color-white);
    background: var(--color-primary);

    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(196, 0, 0, 0.14);
}

.legal-cookie-settings:hover span {
    transform: translateX(4px);
}


/* ---------- Datenschutzrechte ---------- */

.privacy-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin-top: 28px;
}

.privacy-right-card {
    position: relative;

    min-height: 200px;
    padding: 24px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 16px;

    background: var(--color-light);
}

.privacy-right-card::after {
    position: absolute;
    right: -54px;
    bottom: -54px;

    width: 130px;
    height: 130px;

    content: "";

    border-radius: 50%;
    background: rgba(196, 0, 0, 0.025);
}

.privacy-right-card > span {
    position: relative;
    z-index: 1;

    display: block;
    margin-bottom: 28px;

    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.privacy-right-card h4 {
    position: relative;
    z-index: 1;

    margin: 0 0 10px;

    font-size: 1.2rem;
}

.privacy-right-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    font-size: 0.9rem;
    line-height: 1.65;
}


/* ---------- Widerspruchsbox ---------- */

.privacy-objection-box {
    margin-top: 18px;
    padding: 24px;

    border-left: 3px solid var(--color-primary);

    background: var(--color-light);
}

.privacy-objection-box p {
    margin-bottom: 14px;
    font-size: 0.92rem;
    line-height: 1.7;
}

.privacy-objection-box p:last-child {
    margin-bottom: 0;
}


/* ---------- Inline-Code ---------- */

.legal-section-content code {
    padding: 2px 6px;

    border: 1px solid var(--color-border);
    border-radius: 5px;

    background: var(--color-light);
    color: var(--color-dark);

    font-family: monospace;
    font-size: 0.9em;
}


/* ---------- Links mit externem Symbol ---------- */

.legal-section-content a span[aria-hidden="true"] {
    display: inline-block;
    margin-left: 4px;

    color: var(--color-primary);

    transition: transform 200ms ease;
}

.legal-section-content a:hover span[aria-hidden="true"] {
    transform: translate(2px, -2px);
}
/* =========================================================
   SHOPWARE – HERO
   ========================================================= */

.shopware-hero {
    position: relative;
    overflow: hidden;
    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(0, 112, 243, 0.055),
            transparent 34%
        ),
        var(--color-white);
}

.shopware-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   SHOPWARE – HERO CONTENT
   ========================================================= */

.shopware-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}

.shopware-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.shopware-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;
    letter-spacing: -0.055em;
    line-height: 0.98;
}

.shopware-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1.75;
}

.shopware-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   SHOPWARE – HERO TRUST
   ========================================================= */

.shopware-hero-trust {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.shopware-hero-trust > div {
    position: relative;
    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.shopware-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.shopware-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";
    background: var(--color-border);
}

.shopware-hero-trust strong {
    color: var(--color-dark);
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.25;
}

.shopware-hero-trust span {
    color: var(--color-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   SHOPWARE – HERO VISUAL
   ========================================================= */

.shopware-hero-visual {
    position: relative;
    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.shopware-system-card {
    position: relative;
    width: min(100%, 520px);
    min-height: 470px;
    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.shopware-system-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;
    background: rgba(0, 112, 243, 0.13);
}

.shopware-system-card::after {
    position: absolute;
    right: 60px;
    bottom: -150px;

    width: 300px;
    height: 300px;

    content: "";

    border: 1px solid rgba(0, 112, 243, 0.24);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(0, 112, 243, 0.04),
        0 0 0 68px rgba(0, 112, 243, 0.022);
}

.shopware-system-label {
    position: relative;
    z-index: 2;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.35;
    text-transform: uppercase;
}


/* =========================================================
   SHOPWARE – SYSTEM CORE
   ========================================================= */

.shopware-system-stage {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 230px;
    height: 230px;

    margin: 50px auto 42px;
}

.shopware-orbit {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.shopware-orbit-one {
    inset: 0;
}

.shopware-orbit-two {
    inset: 28px;

    border-color: rgba(0, 112, 243, 0.25);
}

.shopware-system-core {
    position: relative;

    display: grid;
    place-items: center;

    width: 142px;
    height: 142px;

    border: 1px solid rgba(0, 112, 243, 0.5);
    border-radius: 50%;

    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(255, 255, 255, 0.12),
            transparent 36%
        ),
        rgba(0, 112, 243, 0.16);

    box-shadow:
        0 0 0 18px rgba(0, 112, 243, 0.055),
        0 0 42px rgba(0, 112, 243, 0.12);
}

.shopware-system-core::before {
    position: absolute;
    inset: 22px;

    content: "";

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 50%;
}

.shopware-system-core span {
    position: relative;
    z-index: 2;

    max-width: 110px;

    color: var(--color-white);
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    text-align: center;
}


/* =========================================================
   SHOPWARE – CONNECTIONS
   ========================================================= */

.shopware-system-connections {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.shopware-system-connections > span:not(.shopware-system-more) {
    display: flex;
    align-items: center;

    min-height: 46px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.055);
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.86rem;
    line-height: 1.2;
}

.shopware-system-more {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 4px;
    padding: 2px 0;

    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.4;
    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   SHOPWARE – BENEFITS SECTION
   ========================================================= */

.shopware-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   SHOPWARE – BENEFITS INTRO
   ========================================================= */

.shopware-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(420px, 1.12fr);

    column-gap: 110px;
    align-items: start;

    margin-bottom: 72px;
}

.shopware-benefits-heading {
    min-width: 0;
}

.shopware-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.shopware-benefits-heading h2 {
    max-width: 720px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.7vw, 5.1rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.01;
}

.shopware-benefits-intro .section-intro {
    align-self: end;

    max-width: 650px;
    margin: 0 0 18px;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   SHOPWARE – BENEFITS GRID
   ========================================================= */

.shopware-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   SHOPWARE – BENEFIT CARD
   ========================================================= */

.shopware-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 360px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 260ms ease,
        box-shadow 260ms ease,
        transform 260ms ease;
}

.shopware-benefit-card::after {
    position: absolute;
    right: -72px;
    bottom: -72px;

    width: 180px;
    height: 180px;

    content: "";

    border-radius: 50%;

    background: rgba(0, 112, 243, 0.035);

    pointer-events: none;
}

.shopware-benefit-card:hover {
    border-color: rgba(0, 112, 243, 0.18);

    box-shadow:
        0 22px 50px rgba(0, 0, 0, 0.06);

    transform: translateY(-4px);
}


/* =========================================================
   SHOPWARE – CARD TOP
   ========================================================= */

.shopware-benefit-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.shopware-benefit-number {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.shopware-benefit-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: rgba(0, 112, 243, 0.38);

    transition:
        color 240ms ease,
        transform 240ms ease;
}

.shopware-benefit-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 1.8;
}

.shopware-benefit-card:hover .shopware-benefit-icon {
    color: rgba(0, 112, 243, 0.72);
    transform: translateY(-2px);
}


/* =========================================================
   SHOPWARE – CARD CONTENT
   ========================================================= */

.shopware-benefit-card-content {
    position: relative;
    z-index: 2;
}

.shopware-benefit-card h3 {
    margin: 0 0 16px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 1.8vw, 1.85rem);
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.15;
}

.shopware-benefit-card p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.7;
}
.shopware-benefits-intro{
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);
    column-gap:110px;
    align-items:start;
}

.shopware-benefits-intro .section-intro{
    margin-top:72px;
    max-width:650px;
    color:var(--color-muted);
    line-height:1.75;
}
.shopware-benefits-intro .section-intro{
    align-self: center;
    margin-top: 35px;
}
.shopware-benefit-card-content{
    display:flex;
    flex-direction:column;
    height:100%;
}

.shopware-benefit-card h3{
    min-height:96px;
    margin:0 0 18px;
}

.shopware-benefit-card p{
    margin-top:auto;
}
/* =========================================================
   SHOPWARE – SERVICES SECTION
   ========================================================= */

.shopware-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   SHOPWARE – SERVICES INTRO
   ========================================================= */

.shopware-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.shopware-services-heading {
    min-width: 0;
}

.shopware-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.shopware-services-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.7vw, 5.1rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.01;
}

.shopware-services-intro .section-intro {
    align-self: center;

    max-width: 650px;
    margin: 35px 0 0;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   SHOPWARE – SERVICES GRID
   ========================================================= */

.shopware-services-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   SHOPWARE – SERVICE CARD
   ========================================================= */

.shopware-service-card {
    position: relative;

    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 34px;

    min-height: 255px;
    padding: 38px 42px;

    overflow: hidden;

    border-bottom: 1px solid var(--color-border);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        padding-left 240ms ease;
}

.shopware-service-card:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}

.shopware-service-card::after {
    position: absolute;
    right: -74px;
    bottom: -74px;

    width: 170px;
    height: 170px;

    content: "";

    border-radius: 50%;
    background: rgba(0, 112, 243, 0.025);

    pointer-events: none;
}
/* =========================================================
   SHOPWARE – SERVICE CARD HEADER
   ========================================================= */

.shopware-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;

    min-height: 165px;
}

.shopware-service-number {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.shopware-service-icon {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    color: rgba(0, 112, 243, 0.42);

    transition:
        color 220ms ease,
        transform 220ms ease;
}

.shopware-service-icon svg {
    width: 27px;
    height: 27px;
    stroke-width: 1.7;
}

.shopware-service-card:hover .shopware-service-icon {
    color: rgba(0, 112, 243, 0.78);
    transform: translateY(-3px);
}
/* =========================================================
   SHOPWARE – SERVICES ALS KLASSISCHE KACHELN
   ========================================================= */

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

    /* alte Matrix-Linie aufheben */
    border-top: 0;
}


/* ---------- Einzelne Kachel ---------- */

.shopware-service-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    min-height: 310px;
    padding: 30px 32px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

/* alte Spaltentrennung entfernen */
.shopware-service-card:nth-child(odd) {
    border-right: 1px solid var(--color-border);
}


/* ---------- Dekorativer Kreis ---------- */

.shopware-service-card::after {
    position: absolute;
    right: -68px;
    bottom: -68px;

    width: 165px;
    height: 165px;

    content: "";

    border-radius: 50%;
    background: rgba(0, 112, 243, 0.035);

    pointer-events: none;
}


/* ---------- Ruhiger Hover ---------- */

.shopware-service-card:hover {
    border-color: rgba(0, 112, 243, 0.18);
    background: rgba(0, 112, 243, 0.012);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.045);
}


/* ---------- Nummer und Icon ---------- */

.shopware-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;

    min-height: auto;
    margin-bottom: 68px;
}

.shopware-service-number {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.shopware-service-icon {
    display: grid;
    place-items: center;

    width: 34px;
    height: 34px;

    color: rgba(0, 112, 243, 0.38);

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.shopware-service-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 1.8;
}

.shopware-service-card:hover .shopware-service-icon {
    color: rgba(0, 112, 243, 0.72);
}


/* ---------- Inhalt ---------- */

.shopware-service-card-content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    max-width: none;
}

.shopware-service-card h3 {
    min-height: 62px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 1.7vw, 1.65rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.18;
}

.shopware-service-card p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.94rem;
    line-height: 1.7;
}
/* =========================================================
   SHOPWARE – PROJEKTABLAUF
   ========================================================= */

.shopware-process-section {
    position: relative;
    overflow: hidden;
    padding: var(--section-space-desktop) 0;
    background: var(--color-light);
}


/* =========================================================
   SHOPWARE – PROCESS INTRO
   ========================================================= */

.shopware-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.shopware-process-heading {
    min-width: 0;
}

.shopware-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.shopware-process-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 4.7vw, 5.1rem);
    font-weight: 700;
    letter-spacing: -0.05em;
    line-height: 1.01;
}

.shopware-process-intro .section-intro {
    align-self: center;
    max-width: 650px;
    margin: 35px 0 0;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   SHOPWARE – PROCESS GRID
   ========================================================= */

.shopware-process-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   SHOPWARE – PROCESS CARD
   ========================================================= */
/* =========================================================
   SHOPWARE – PROZESSKARTEN KOMPAKTER
   ========================================================= */

.shopware-process-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 285px;
    padding: 28px 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.shopware-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 42px;
}

.shopware-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 34px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.shopware-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
.shopware-process-card::after {
    position: absolute;
    right: -72px;
    bottom: -72px;

    width: 180px;
    height: 180px;

    content: "";

    border-radius: 50%;
    background: rgba(0, 112, 243, 0.035);

    pointer-events: none;
}

.shopware-process-card:hover {
    background: rgba(0, 112, 243, 0.012);
    border-color: rgba(0, 112, 243, 0.18);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   SHOPWARE – PROCESS CARD HEADER
   ========================================================= */

.shopware-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 64px;
}

.shopware-process-number {
    color: var(--color-primary);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1;
}

.shopware-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(0, 112, 243, 0.38);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.shopware-process-card:hover .shopware-process-icon {
    color: rgba(0, 112, 243, 0.72);
}


/* =========================================================
   SHOPWARE – PROCESS CARD CONTENT
   ========================================================= */

.shopware-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 54px;
    margin: 0 0 16px;

    color: var(--color-dark);
    font-family: var(--font-heading);
    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
}

.shopware-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SHOPWARE – SERVICES MOBILE FIX
   Ganz ans Ende der components.css setzen
   ========================================================= */

@media (max-width: 700px) {

    .shopware-services-section {
        padding: var(--section-space-mobile) 0;
    }

    .shopware-services-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 26px;

        width: 100%;
        margin-bottom: 38px;
    }

    .shopware-services-heading {
        width: 100%;
        min-width: 0;
    }

    .shopware-services-heading .section-eyebrow {
        margin-bottom: 20px;
    }

    .shopware-services-heading h2 {
        width: 100%;
        max-width: none;
        margin: 0;

        font-size: clamp(2.65rem, 12vw, 4rem);
        line-height: 1.02;
        letter-spacing: -0.045em;

        overflow-wrap: normal;
        word-break: normal;
        hyphens: none;
    }

    .shopware-services-heading h2 br {
        display: none;
    }

    .shopware-services-intro .section-intro {
        display: block;
        grid-column: 1;

        width: 100%;
        max-width: none;

        margin: 0;
        align-self: auto;
        transform: none;

        font-size: 0.98rem;
        line-height: 1.7;
    }

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

    .shopware-service-card {
        min-height: auto;
        padding: 26px;
    }
}
/* =========================================================
   SHOPWARE – FAQ
   ========================================================= */

.shopware-faq-section{
    padding:var(--section-space-desktop) 0;
    background:var(--color-white);
}

.shopware-faq-intro{

    display:grid;
    grid-template-columns:
        minmax(0,.9fr)
        minmax(420px,1.1fr);

    gap:110px;
    align-items:center;

    margin-bottom:70px;
}

.shopware-faq-heading .section-eyebrow{
    margin-bottom:24px;
}

.shopware-faq-heading h2{

    margin:0;

    font-family:var(--font-heading);
    font-size:clamp(3rem,4.8vw,5rem);
    line-height:1.02;
    letter-spacing:-.05em;
}

.shopware-faq-intro .section-intro{

    max-width:650px;

    margin:30px 0 0;

    color:var(--color-muted);

    font-size:1.02rem;
    line-height:1.75;
}


/* FAQ */

.faq-list{

    width:100%;
}

.faq-item{

    border-top:1px solid var(--color-border);

    padding:0;
}

.faq-item:last-child{

    border-bottom:1px solid var(--color-border);
}

.faq-item summary{

    list-style:none;

    cursor:pointer;

    padding:28px 0;

    font-size:1.35rem;
    font-weight:700;

    color:var(--color-dark);

    display:flex;
    justify-content:space-between;
    align-items:center;

    transition:.25s;
}

.faq-item summary::-webkit-details-marker{

    display:none;
}

.faq-item summary::after{

    content:"+";

    color:var(--color-primary);

    font-size:1.8rem;
    font-weight:300;
}

.faq-item[open] summary::after{

    content:"–";
}

.faq-answer{

    padding:0 0 28px;
}

.faq-answer p{

    max-width:760px;

    margin:0;

    color:var(--color-muted);

    line-height:1.8;
}
.deine-heading-klasse h2 {
    max-width: 750px;
}
/* Referenzen Hero – Grafik höher positionieren */
@media (min-width: 901px) {
    .references-hero-visual {
        transform: translateY(-90px);
    }
}
/* Shopify-Plenty Hero – Grafik höher positionieren */
@media (min-width: 901px) {
    .integration-visual-stage {
        transform: translateY(-80px);
    }
}
/* =========================================================
   ERP PARTNER ANNOUNCEMENT – JTL SOFTWARE
   ========================================================= */

.erp-partner-announcement {
    position: relative;
    overflow: hidden;

    padding: 54px 0 34px;

    background:
        radial-gradient(
            circle at 86% 20%,
            rgba(196, 0, 0, 0.045),
            transparent 30%
        ),
        var(--color-white);

    border-bottom: 1px solid var(--color-border);
}


/* =========================================================
   INNER LAYOUT
   ========================================================= */

.erp-partner-announcement-inner {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto;

    gap: 80px;
    align-items: center;
}


/* =========================================================
   COPY
   ========================================================= */

.erp-partner-announcement-copy {
    max-width: 700px;
}

.erp-partner-announcement-copy .section-eyebrow {
    margin-bottom: 16px;
}

.erp-partner-announcement-copy h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 12px;

    margin: 0 0 14px;

    color: var(--color-dark);

    font-family: var(--font-heading);
    font-size: clamp(2rem, 3vw, 3.3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.erp-partner-announcement-copy h2 span {
    color: var(--color-primary);
    font-weight: 400;
}

.erp-partner-announcement-copy p {
    max-width: 620px;

    margin: 0;

    color: var(--color-muted);
    font-size: 0.96rem;
    line-height: 1.7;
}

.erp-partner-announcement-copy p strong {
    color: var(--color-dark);
    font-weight: 700;
}


/* =========================================================
   COUNTDOWN
   ========================================================= */

.erp-partner-countdown {
    display: flex;
    align-items: stretch;

    padding: 18px 22px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: rgba(255, 255, 255, 0.78);

    box-shadow:
        0 14px 40px rgba(0, 0, 0, 0.045);

    backdrop-filter: blur(12px);
}

.erp-countdown-item {
    display: grid;
    justify-items: center;
    align-content: center;

    min-width: 92px;
    padding: 4px 18px;
}

.erp-countdown-item strong {
    color: var(--color-dark);

    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.4vw, 2.7rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1;
}

.erp-countdown-item span {
    margin-top: 8px;

    color: var(--color-muted);

    font-size: 0.67rem;
    font-weight: 700;

    letter-spacing: 0.11em;
    line-height: 1;

    text-transform: uppercase;
}

.erp-countdown-divider {
    align-self: stretch;

    width: 1px;

    background: var(--color-border);
}


/* =========================================================
   META ROW
   ========================================================= */

.erp-partner-announcement-meta {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-top: 30px;
    padding-top: 20px;

    border-top: 1px solid var(--color-border);

    color: var(--color-muted);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.12em;
    line-height: 1.2;

    text-transform: uppercase;
}

.erp-partner-announcement-meta strong {
    color: var(--color-primary);
    font-weight: 800;
}

.erp-partner-announcement-line {
    width: 34px;
    height: 1px;

    background: var(--color-border);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .erp-partner-announcement-inner {
        grid-template-columns: 1fr;
        gap: 34px;
    }

    .erp-partner-countdown {
        width: fit-content;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

    .erp-partner-announcement {
        padding: 38px 0 26px;
    }

    .erp-partner-announcement-inner {
        gap: 28px;
    }

    .erp-partner-announcement-copy h2 {
        gap: 7px;

        font-size: clamp(2rem, 9vw, 2.8rem);
    }

    .erp-partner-countdown {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
        gap: 0;

        padding: 0;

        overflow: hidden;
    }

    .erp-countdown-item {
        min-width: 0;

        padding: 22px 12px;

        border-bottom: 1px solid var(--color-border);
    }

    .erp-countdown-item:nth-of-type(1),
    .erp-countdown-item:nth-of-type(3) {
        border-right: 1px solid var(--color-border);
    }

    .erp-countdown-item:nth-of-type(3),
    .erp-countdown-item:nth-of-type(4) {
        border-bottom: 0;
    }

    .erp-countdown-divider {
        display: none;
    }

    .erp-countdown-item strong {
        font-size: 2.1rem;
    }

    .erp-partner-announcement-meta {
        flex-wrap: wrap;

        gap: 8px 10px;

        margin-top: 24px;
    }

    .erp-partner-announcement-line {
        display: none;
    }
}
/* =========================================================
   WARENWIRTSCHAFT – HERO
   ========================================================= */

.erp-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.erp-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.erp-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.erp-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.erp-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.erp-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.erp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.erp-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.erp-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.erp-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.erp-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.erp-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.erp-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   HERO VISUAL
   ========================================================= */

.erp-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.erp-system-card {
    position: relative;

    width: min(100%, 520px);
    min-height: 470px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.erp-system-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background:
        rgba(196, 0, 0, 0.10);
}

.erp-system-card::after {
    position: absolute;
    right: 60px;
    bottom: -150px;

    width: 300px;
    height: 300px;

    content: "";

    border: 1px solid rgba(196, 0, 0, 0.20);
    border-radius: 50%;

    box-shadow:
        0 0 0 34px rgba(196, 0, 0, 0.035),
        0 0 0 68px rgba(196, 0, 0, 0.02);
}

.erp-system-label {
    position: relative;
    z-index: 2;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   CORE
   ========================================================= */

.erp-system-stage {
    position: relative;
    z-index: 2;

    display: grid;
    place-items: center;

    width: 230px;
    height: 230px;

    margin: 50px auto 42px;
}

.erp-orbit {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.erp-orbit-one {
    inset: 0;
}

.erp-orbit-two {
    inset: 28px;

    border-color: rgba(196, 0, 0, 0.22);
}

.erp-system-core {
    position: relative;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(0, 1fr);

    align-items: center;

    width: 176px;
    min-height: 112px;

    padding: 20px;

    border: 1px solid rgba(196, 0, 0, 0.42);
    border-radius: 22px;

    background:
        radial-gradient(
            circle at 34% 28%,
            rgba(255, 255, 255, 0.1),
            transparent 36%
        ),
        rgba(196, 0, 0, 0.10);

    box-shadow:
        0 0 0 18px rgba(196, 0, 0, 0.04),
        0 0 42px rgba(196, 0, 0, 0.09);
}

.erp-system-core-item {
    color: var(--color-white);

    font-size: 0.95rem;
    font-weight: 700;

    letter-spacing: -0.02em;
    line-height: 1.2;

    text-align: center;
}

.erp-system-core-divider {
    width: 1px;
    height: 38px;

    background: rgba(255, 255, 255, 0.14);
}


/* =========================================================
   CONNECTIONS
   ========================================================= */

.erp-system-connections {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.erp-system-connections > span:not(.erp-system-more) {
    display: flex;
    align-items: center;

    min-height: 46px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;

    background:
        rgba(255, 255, 255, 0.055);

    color:
        rgba(255, 255, 255, 0.9);

    font-size: 0.86rem;
    line-height: 1.2;
}

.erp-system-more {
    grid-column: 1 / -1;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: 4px;
    padding: 2px 0;

    color:
        rgba(255, 255, 255, 0.52);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   WARENWIRTSCHAFT – BENEFITS SECTION
   ========================================================= */

.erp-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-benefits-heading {
    min-width: 0;
}

.erp-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-benefits-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-benefits-intro .section-intro {
    align-self: center;

    max-width: 650px;
    margin: 35px 0 0;

    color: var(--color-muted);
    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   BENEFITS GRID
   ========================================================= */

.erp-benefits-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}


/* =========================================================
   BENEFIT CARD
   ========================================================= */

.erp-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.erp-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background:
        rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.erp-benefit-card:hover {
    background:
        rgba(196, 0, 0, 0.012);

    border-color:
        rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.erp-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.erp-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.erp-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.erp-benefit-card:hover .erp-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.erp-benefit-card-content {
    position: relative;
    z-index: 2;
}

.erp-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.erp-benefit-card p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WARENWIRTSCHAFT – ERP SYSTEME
   ========================================================= */

.erp-systems-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-systems-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-systems-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-systems-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-systems-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   SYSTEM GRID
   ========================================================= */

.erp-systems-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   SYSTEM PANEL
   ========================================================= */

.erp-system-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 610px;
    padding: 38px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.erp-system-panel::after {
    position: absolute;
    right: -110px;
    bottom: -110px;

    width: 280px;
    height: 280px;

    content: "";

    border-radius: 50%;

    pointer-events: none;
}

.erp-system-panel-plenty::after {
    background: rgba(108, 147, 54, 0.035);
}

.erp-system-panel-jtl::after {
    background: rgba(196, 0, 0, 0.028);
}

.erp-system-panel:hover {
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 20px 48px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.erp-system-panel-top {
    position: relative;
    z-index: 2;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.erp-system-panel-kicker {
    display: block;

    margin-bottom: 14px;

    color: var(--color-muted);

    font-size: 0.69rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    line-height: 1.3;

    text-transform: uppercase;
}

.erp-system-panel h3 {
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.3rem, 3vw, 3.5rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1;
}

.erp-system-panel-badge {
    flex: 0 0 auto;

    padding: 8px 12px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    color: var(--color-muted);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.2;

    text-transform: uppercase;
}


/* =========================================================
   LEAD
   ========================================================= */

.erp-system-panel-lead {
    position: relative;
    z-index: 2;

    max-width: 600px;

    margin: 32px 0 34px;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.75;
}


/* =========================================================
   FEATURE LIST
   ========================================================= */

.erp-system-panel-list {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 0;

    border-top: 1px solid var(--color-border);
}

.erp-system-panel-list > div {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 12px;
    align-items: center;

    min-height: 54px;

    padding: 12px 0;

    border-bottom: 1px solid var(--color-border);
}

.erp-system-panel-list i {
    width: 17px;
    height: 17px;

    color: var(--color-primary);

    stroke-width: 2;
}

.erp-system-panel-plenty .erp-system-panel-list i {
    color: rgba(108, 147, 54, 0.9);
}

.erp-system-panel-list span {
    color: var(--color-dark);

    font-size: 0.91rem;
    font-weight: 600;

    line-height: 1.45;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.erp-system-panel-footer {
    position: relative;
    z-index: 2;

    display: grid;
    gap: 7px;

    margin-top: auto;
    padding-top: 32px;
}

.erp-system-panel-footer span {
    color: var(--color-muted);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    line-height: 1.2;

    text-transform: uppercase;
}

.erp-system-panel-footer strong {
    max-width: 520px;

    color: var(--color-dark);

    font-size: 0.95rem;
    font-weight: 700;

    line-height: 1.5;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.erp-systems-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.erp-systems-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.erp-systems-statement p {
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.erp-systems-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   WARENWIRTSCHAFT – ERP FIT
   ========================================================= */

.erp-fit-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-fit-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-fit-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-fit-heading h2 {
    max-width: 820px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-fit-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   LISTE
   ========================================================= */

.erp-fit-list {
    border-top: 1px solid var(--color-border);
}

.erp-fit-row {
    display: grid;
    grid-template-columns:
        72px
        minmax(280px, 0.9fr)
        minmax(0, 1.1fr);

    gap: 42px;
    align-items: start;

    padding: 34px 0;

    border-bottom: 1px solid var(--color-border);

    transition:
        background-color 240ms ease;
}

.erp-fit-row:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMMER
   ========================================================= */

.erp-fit-number {
    padding-top: 7px;

    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   THEMA
   ========================================================= */

.erp-fit-topic h3 {
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.6rem, 2.2vw, 2.2rem);
    font-weight: 700;

    letter-spacing: -0.035em;
    line-height: 1.08;
}


/* =========================================================
   EMPFEHLUNG
   ========================================================= */

.erp-fit-recommendation {
    max-width: 700px;
}

.erp-fit-label {
    display: block;

    margin-bottom: 8px;

    color: var(--color-muted);

    font-size: 0.67rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1.2;

    text-transform: uppercase;
}

.erp-fit-recommendation strong {
    display: block;

    margin-bottom: 10px;

    color: var(--color-dark);

    font-size: 1rem;
    font-weight: 800;

    line-height: 1.4;
}

.erp-fit-recommendation p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.erp-fit-statement {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap: 90px;
    align-items: center;

    margin-top: 72px;
    padding: 52px 0;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.erp-fit-statement .section-eyebrow {
    margin-bottom: 18px;
}

.erp-fit-statement h3 {
    max-width: 650px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.5rem, 4vw, 4.2rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.02;
}

.erp-fit-statement > p {
    max-width: 660px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.75;
}
/* =========================================================
   WARENWIRTSCHAFT – SERVICES
   ========================================================= */

.erp-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.erp-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.erp-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.erp-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.erp-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.erp-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.erp-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.erp-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.erp-service-card:hover .erp-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.erp-service-card-content {
    position: relative;
    z-index: 2;
}

.erp-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.erp-service-card p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WARENWIRTSCHAFT – PROJEKTABLAUF
   ========================================================= */

.erp-process-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-process-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-process-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.erp-process-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PROCESS CARD
   ========================================================= */

.erp-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.erp-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.erp-process-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.erp-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.erp-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.erp-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.erp-process-card:hover .erp-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.erp-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.erp-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WARENWIRTSCHAFT – FAQ
   ========================================================= */

.erp-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.erp-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.erp-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.erp-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.erp-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.erp-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.erp-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.erp-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;

    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.erp-faq-item summary::marker {
    display: none;
    content: "";
}

.erp-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.erp-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.erp-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.erp-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.erp-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.erp-faq-item summary:hover .erp-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);
}


/* Plus dreht sich beim Öffnen */

.erp-faq-item[open] .erp-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: rgba(196, 0, 0, 0.025);
}


/* =========================================================
   ANSWER
   ========================================================= */

.erp-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.erp-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   MARKTPLÄTZE – HERO
   ========================================================= */

.marketplace-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.marketplace-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.marketplace-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.marketplace-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.marketplace-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.marketplace-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.marketplace-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.marketplace-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.marketplace-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.marketplace-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.marketplace-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.marketplace-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.marketplace-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.marketplace-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.marketplace-network-card {
    position: relative;

    width: min(100%, 540px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.marketplace-network-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}

.marketplace-network-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   NETWORK STAGE
   ========================================================= */

.marketplace-network-stage {
    position: relative;
    z-index: 2;

    width: 330px;
    height: 300px;

    margin: 44px auto 34px;
}

.marketplace-orbit {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.marketplace-orbit-one {
    inset: 18px 34px;
}

.marketplace-orbit-two {
    inset: 58px 76px;

    border-color: rgba(196, 0, 0, 0.22);
}

.marketplace-network-core {
    position: absolute;
    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 118px;
    height: 118px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(196, 0, 0, 0.45);
    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);

    box-shadow:
        0 0 0 16px rgba(196, 0, 0, 0.04),
        0 0 40px rgba(196, 0, 0, 0.1);
}

.marketplace-network-core span {
    color: var(--color-white);

    font-size: 0.9rem;
    font-weight: 700;

    line-height: 1.2;
    text-align: center;
}


/* =========================================================
   MARKETPLACE NODES
   ========================================================= */

.marketplace-node {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1;
}

.marketplace-node-amazon {
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.marketplace-node-otto {
    top: 56px;
    right: 0;
}

.marketplace-node-zalando {
    top: 136px;
    right: -14px;
}

.marketplace-node-aboutyou {
    bottom: 36px;
    right: 28px;
}

.marketplace-node-sportscheck {
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}

.marketplace-node-decathlon {
    bottom: 42px;
    left: 8px;
}

.marketplace-node-kaufland {
    top: 102px;
    left: -10px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.marketplace-network-bottom {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.marketplace-network-bottom > span:not(.marketplace-network-more) {
    display: flex;
    align-items: center;

    min-height: 44px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.055);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.84rem;
    line-height: 1.2;
}

.marketplace-network-more {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.68rem;
    font-weight: 700;

    letter-spacing: 0.1em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   MARKTPLÄTZE – BENEFITS
   ========================================================= */

.marketplace-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.marketplace-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.marketplace-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.marketplace-benefits-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.marketplace-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.marketplace-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.marketplace-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.marketplace-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.marketplace-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.marketplace-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.marketplace-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.marketplace-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.marketplace-benefit-card:hover .marketplace-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.marketplace-benefit-card-content {
    position: relative;
    z-index: 2;
}

.marketplace-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.marketplace-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   MARKTPLÄTZE – SERVICES
   ========================================================= */

.marketplace-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.marketplace-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.marketplace-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.marketplace-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.marketplace-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.marketplace-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.marketplace-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.marketplace-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;
    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.marketplace-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.marketplace-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.marketplace-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.marketplace-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.marketplace-service-card:hover .marketplace-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.marketplace-service-card-content {
    position: relative;
    z-index: 2;
}

.marketplace-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.marketplace-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   MARKTPLÄTZE – PLATTFORMEN
   ========================================================= */

.marketplace-platforms-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.marketplace-platforms-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.marketplace-platforms-heading .section-eyebrow {
    margin-bottom: 24px;
}

.marketplace-platforms-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.marketplace-platforms-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.marketplace-platforms-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   PLATFORM CARD
   ========================================================= */

.marketplace-platform-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.marketplace-platform-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;
    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.marketplace-platform-card:hover {
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   NUMBER
   ========================================================= */

.marketplace-platform-number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 46px;

    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   CONTENT
   ========================================================= */

.marketplace-platform-content {
    position: relative;
    z-index: 2;
}

.marketplace-platform-content h3 {
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.marketplace-platform-content p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   "UND VIELE WEITERE"
   ========================================================= */

.marketplace-platform-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.marketplace-platform-card-more .marketplace-platform-number {
    font-size: 1.15rem;
}

.marketplace-platform-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-top: auto;
    padding-top: 22px;

    color: var(--color-dark);

    font-size: 0.88rem;
    font-weight: 700;

    text-decoration: none;
}

.marketplace-platform-link span {
    color: var(--color-primary);

    transition: transform 220ms ease;
}

.marketplace-platform-link:hover span {
    transform: translateX(4px);
}
/* =========================================================
   MARKTPLÄTZE – PROJEKTABLAUF
   ========================================================= */

.marketplace-process-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.marketplace-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.marketplace-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.marketplace-process-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.marketplace-process-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.marketplace-process-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PROCESS CARD
   ========================================================= */

.marketplace-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.marketplace-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.marketplace-process-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.marketplace-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.marketplace-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.marketplace-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.marketplace-process-card:hover .marketplace-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.marketplace-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.marketplace-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   MARKTPLÄTZE – FAQ
   ========================================================= */

.marketplace-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.marketplace-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.marketplace-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.marketplace-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.marketplace-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.marketplace-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.marketplace-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.marketplace-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.marketplace-faq-item summary::marker {
    display: none;
    content: "";
}

.marketplace-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.marketplace-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.marketplace-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.marketplace-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.marketplace-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.marketplace-faq-item summary:hover .marketplace-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.marketplace-faq-item[open] .marketplace-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.marketplace-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.marketplace-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   PAYMENT – HERO
   ========================================================= */

.payment-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.payment-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.payment-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.payment-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.payment-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.payment-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.payment-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.payment-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.payment-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.payment-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.payment-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.payment-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.payment-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.payment-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.payment-system-card {
    position: relative;

    width: min(100%, 540px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.payment-system-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}


/* =========================================================
   LABEL
   ========================================================= */

.payment-system-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   PAYMENT STAGE
   ========================================================= */

.payment-system-stage {
    position: relative;
    z-index: 2;

    width: 330px;
    height: 280px;

    margin: 42px auto 28px;
}

.payment-orbit {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.payment-orbit-one {
    inset: 12px 34px;
}

.payment-orbit-two {
    inset: 52px 76px;

    border-color: rgba(196, 0, 0, 0.22);
}


/* =========================================================
   CORE
   ========================================================= */

.payment-system-core {
    position: absolute;
    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 116px;
    height: 116px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(196, 0, 0, 0.45);
    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);

    box-shadow:
        0 0 0 16px rgba(196, 0, 0, 0.04),
        0 0 40px rgba(196, 0, 0, 0.1);
}

.payment-system-core span {
    color: var(--color-white);

    font-size: 1rem;
    font-weight: 700;

    letter-spacing: -0.02em;
    line-height: 1.2;

    text-align: center;
}


/* =========================================================
   PAYMENT NODES
   ========================================================= */

.payment-node {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1;
}

.payment-node-mollie {
    top: 4px;
    left: 50%;

    transform: translateX(-50%);
}

.payment-node-paypal {
    top: 58px;
    right: 4px;
}

.payment-node-klarna {
    bottom: 52px;
    right: 4px;
}

.payment-node-card {
    bottom: 6px;
    left: 50%;

    transform: translateX(-50%);
}

.payment-node-apple {
    bottom: 54px;
    left: 2px;
}

.payment-node-google {
    top: 60px;
    left: 0;
}


/* =========================================================
   PROCESS FLOW
   ========================================================= */

.payment-system-flow {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        auto
        minmax(0, 1fr)
        auto
        minmax(0, 1fr);

    gap: 8px;
    align-items: center;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.045);
}

.payment-system-flow > div {
    display: grid;
    gap: 4px;

    text-align: center;
}

.payment-flow-label {
    color: rgba(255, 255, 255, 0.4);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}

.payment-system-flow strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.75rem;
    font-weight: 700;

    line-height: 1.2;
}

.payment-flow-arrow {
    color: rgba(196, 0, 0, 0.75);

    font-size: 0.95rem;
    line-height: 1;
}


/* =========================================================
   MORE
   ========================================================= */

.payment-system-more {
    position: relative;
    z-index: 3;

    display: block;

    margin-top: 16px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   PAYMENT – BENEFITS
   ========================================================= */

.payment-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.payment-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.payment-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.payment-benefits-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.payment-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.payment-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.payment-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.payment-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.payment-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.payment-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.payment-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.payment-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.payment-benefit-card:hover .payment-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.payment-benefit-card-content {
    position: relative;
    z-index: 2;
}

.payment-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.payment-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   PAYMENT – SERVICES
   ========================================================= */

.payment-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.payment-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.payment-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.payment-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.payment-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.payment-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.payment-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.payment-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;
    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.payment-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.payment-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.payment-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.payment-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.payment-service-card:hover .payment-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.payment-service-card-content {
    position: relative;
    z-index: 2;
}

.payment-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.payment-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   PAYMENT – ANBIETER & ZAHLARTEN
   ========================================================= */

.payment-providers-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.payment-providers-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.payment-providers-heading .section-eyebrow {
    margin-bottom: 24px;
}

.payment-providers-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.payment-providers-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.payment-providers-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   PROVIDER CARD
   ========================================================= */

.payment-provider-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.payment-provider-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.payment-provider-card:hover {
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   NUMBER
   ========================================================= */

.payment-provider-number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 46px;

    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   CONTENT
   ========================================================= */

.payment-provider-content {
    position: relative;
    z-index: 2;
}

.payment-provider-content h3 {
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.payment-provider-content p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   "UND WEITERE"
   ========================================================= */

.payment-provider-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.payment-provider-card-more .payment-provider-number {
    font-size: 1.15rem;
}

.payment-provider-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-top: auto;
    padding-top: 22px;

    color: var(--color-dark);

    font-size: 0.88rem;
    font-weight: 700;

    text-decoration: none;
}

.payment-provider-link span {
    color: var(--color-primary);

    transition: transform 220ms ease;
}

.payment-provider-link:hover span {
    transform: translateX(4px);
}
/* =========================================================
   PAYMENT – PROJEKTABLAUF
   ========================================================= */

.payment-process-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.payment-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.payment-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.payment-process-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.payment-process-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.payment-process-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PROCESS CARD
   ========================================================= */

.payment-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.payment-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.payment-process-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.payment-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.payment-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.payment-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.payment-process-card:hover .payment-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.payment-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.payment-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   PAYMENT – FAQ
   ========================================================= */

.payment-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.payment-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.payment-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.payment-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.payment-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.payment-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.payment-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.payment-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.payment-faq-item summary::marker {
    display: none;
    content: "";
}

.payment-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.payment-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.payment-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.payment-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.payment-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.payment-faq-item summary:hover .payment-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.payment-faq-item[open] .payment-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.payment-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.payment-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   SCHNITTSTELLEN – HERO
   ========================================================= */

.interfaces-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.interfaces-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.interfaces-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.interfaces-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.interfaces-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.interfaces-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.interfaces-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.interfaces-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.interfaces-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.interfaces-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.interfaces-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.interfaces-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.interfaces-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.interfaces-network-card {
    position: relative;

    width: min(100%, 540px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.interfaces-network-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}


/* =========================================================
   LABEL
   ========================================================= */

.interfaces-network-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   NETWORK STAGE
   ========================================================= */

.interfaces-network-stage {
    position: relative;
    z-index: 2;

    width: 340px;
    height: 300px;

    margin: 44px auto 34px;
}

.interfaces-orbit {
    position: absolute;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

.interfaces-orbit-one {
    inset: 14px 34px;
}

.interfaces-orbit-two {
    inset: 54px 76px;

    border-color: rgba(196, 0, 0, 0.22);
}


/* =========================================================
   CORE
   ========================================================= */

.interfaces-network-core {
    position: absolute;
    top: 50%;
    left: 50%;

    display: grid;
    place-items: center;

    width: 118px;
    height: 118px;

    transform: translate(-50%, -50%);

    border: 1px solid rgba(196, 0, 0, 0.45);
    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);

    box-shadow:
        0 0 0 16px rgba(196, 0, 0, 0.04),
        0 0 40px rgba(196, 0, 0, 0.1);
}

.interfaces-network-core span {
    color: var(--color-white);

    font-size: 0.92rem;
    font-weight: 700;

    line-height: 1.2;
    text-align: center;
}


/* =========================================================
   NODES
   ========================================================= */

.interfaces-node {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.07);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.7rem;
    font-weight: 700;

    line-height: 1;
}

.interfaces-node-shop {
    top: 4px;
    left: 50%;

    transform: translateX(-50%);
}

.interfaces-node-erp {
    top: 54px;
    right: 4px;
}

.interfaces-node-logistics {
    top: 135px;
    right: -12px;
}

.interfaces-node-marketplace {
    bottom: 34px;
    right: 20px;
}

.interfaces-node-payment {
    bottom: 4px;
    left: 50%;

    transform: translateX(-50%);
}

.interfaces-node-documents {
    bottom: 42px;
    left: 8px;
}

.interfaces-node-external {
    top: 104px;
    left: -14px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.interfaces-network-bottom {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.interfaces-network-bottom > span:not(.interfaces-network-more) {
    display: flex;
    align-items: center;

    min-height: 44px;
    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 11px;

    background: rgba(255, 255, 255, 0.055);

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.84rem;
    line-height: 1.2;
}

.interfaces-network-more {
    grid-column: 1 / -1;

    display: flex;
    justify-content: center;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.64rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* Shopify-Plenty Hero – Grafik höher positionieren */
@media (min-width: 901px) {
    .interfaces-network-card {
        transform: translateY(-80px);
    }
}
/* =========================================================
   SCHNITTSTELLEN – BENEFITS
   ========================================================= */

.interfaces-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-benefits-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.interfaces-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.interfaces-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.interfaces-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.interfaces-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.interfaces-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.interfaces-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.interfaces-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.interfaces-benefit-card:hover .interfaces-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-benefit-card-content {
    position: relative;
    z-index: 2;
}

.interfaces-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.interfaces-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SCHNITTSTELLEN – SERVICES
   ========================================================= */

.interfaces-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.interfaces-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.interfaces-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.interfaces-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.interfaces-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.interfaces-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.interfaces-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.interfaces-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.interfaces-service-card:hover .interfaces-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-service-card-content {
    position: relative;
    z-index: 2;
}

.interfaces-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.interfaces-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SCHNITTSTELLEN – UMGESETZTE INTEGRATIONEN
   ========================================================= */

.interfaces-integrations-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-integrations-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-integrations-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-integrations-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-integrations-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.interfaces-integrations-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
   ========================================================= */

.interfaces-integration-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.interfaces-integration-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.interfaces-integration-card:hover {
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   NUMBER
   ========================================================= */

.interfaces-integration-number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 46px;

    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-integration-content {
    position: relative;
    z-index: 2;
}

.interfaces-integration-content h3 {
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.interfaces-integration-content p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   "UND VIELE WEITERE"
   ========================================================= */

.interfaces-integration-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.interfaces-integration-card-more
.interfaces-integration-number {
    font-size: 1.15rem;
}

.interfaces-integration-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    margin-top: auto;
    padding-top: 22px;

    color: var(--color-dark);

    font-size: 0.88rem;
    font-weight: 700;

    text-decoration: none;
}

.interfaces-integration-link span {
    color: var(--color-primary);

    transition: transform 220ms ease;
}

.interfaces-integration-link:hover span {
    transform: translateX(4px);
}
/* =========================================================
   SCHNITTSTELLEN – DATEN
   ========================================================= */

.interfaces-data-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-data-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-data-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-data-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-data-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.interfaces-data-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
   ========================================================= */

.interfaces-data-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 270px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.interfaces-data-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.interfaces-data-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.interfaces-data-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 42px;
}

.interfaces-data-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.interfaces-data-icon {
    width: 25px;
    height: 25px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.interfaces-data-card:hover .interfaces-data-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-data-card-content {
    position: relative;
    z-index: 2;
}

.interfaces-data-card h3 {
    min-height: 48px;
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.interfaces-data-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   INDIVIDUELLE DATEN
   ========================================================= */

.interfaces-data-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.interfaces-data-card-more .interfaces-data-number {
    font-size: 1.15rem;
}
/* =========================================================
   SCHNITTSTELLEN – PROJEKTABLAUF
   ========================================================= */

.interfaces-process-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-process-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-process-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.interfaces-process-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PROCESS CARD
   ========================================================= */

.interfaces-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.interfaces-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.interfaces-process-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   CARD HEADER
   ========================================================= */

.interfaces-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.interfaces-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.interfaces-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition:
        color 220ms ease,
        opacity 220ms ease;
}

.interfaces-process-card:hover .interfaces-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.interfaces-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.interfaces-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SCHNITTSTELLEN – FAQ
   ========================================================= */

.interfaces-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.interfaces-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.interfaces-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.interfaces-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.interfaces-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.interfaces-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.interfaces-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.interfaces-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.interfaces-faq-item summary::marker {
    content: "";
}

.interfaces-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.interfaces-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.interfaces-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.interfaces-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.interfaces-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.interfaces-faq-item summary:hover .interfaces-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.interfaces-faq-item[open] .interfaces-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.interfaces-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.interfaces-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   MIGRATION – HERO
   ========================================================= */

.migration-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.migration-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.migration-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.migration-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.migration-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.migration-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.migration-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.migration-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.migration-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.migration-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.migration-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.migration-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.migration-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.migration-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.migration-system-card {
    position: relative;

    width: min(100%, 540px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.migration-system-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}


/* =========================================================
   LABEL
   ========================================================= */

.migration-system-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   MIGRATION FLOW
   ========================================================= */

.migration-flow {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        150px
        minmax(0, 1fr);

    gap: 20px;
    align-items: center;

    margin: 58px 0 48px;
}

.migration-flow-side {
    padding: 22px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.05);
}

.migration-flow-kicker {
    display: block;

    margin-bottom: 12px;

    color: rgba(255, 255, 255, 0.42);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    line-height: 1.2;

    text-transform: uppercase;
}

.migration-flow-side strong {
    color: rgba(255, 255, 255, 0.92);

    font-size: 0.86rem;
    font-weight: 700;

    line-height: 1.65;
}


/* =========================================================
   CENTER
   ========================================================= */

.migration-flow-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.migration-flow-line {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.36);
}

.migration-flow-core {
    display: grid;
    place-items: center;
    gap: 8px;

    width: 94px;
    height: 94px;

    flex: 0 0 auto;

    border: 1px solid rgba(196, 0, 0, 0.45);
    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);

    box-shadow:
        0 0 0 14px rgba(196, 0, 0, 0.04),
        0 0 36px rgba(196, 0, 0, 0.09);
}

.migration-flow-core svg {
    width: 22px;
    height: 22px;

    color: rgba(255, 255, 255, 0.82);

    stroke-width: 1.6;
}

.migration-flow-core span {
    color: var(--color-white);

    font-size: 0.72rem;
    font-weight: 700;

    line-height: 1;
}


/* =========================================================
   DATA
   ========================================================= */

.migration-data-grid {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 10px;
}

.migration-data-grid > span:not(.migration-data-more) {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;

    padding: 9px 10px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    color: rgba(255, 255, 255, 0.88);

    font-size: 0.76rem;
    font-weight: 600;

    line-height: 1.2;

    text-align: center;
}

.migration-data-more {
    grid-column: 1 / -1;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.63rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* Migration Hero – Grafik höher positionieren */
@media (min-width: 901px) {
    .migration-system-card {
        transform: translateY(-90px);
    }
}
/* =========================================================
   MIGRATION – WARUM MIGRIEREN?
   ========================================================= */

.migration-reasons-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-reasons-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-reasons-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-reasons-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-reasons-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.migration-reasons-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.migration-reason-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.migration-reason-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.migration-reason-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.migration-reason-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.migration-reason-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.migration-reason-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.migration-reason-card:hover .migration-reason-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.migration-reason-content {
    position: relative;
    z-index: 2;
}

.migration-reason-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.migration-reason-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   MIGRATION – WAS WIR MIGRIEREN
   ========================================================= */

.migration-data-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-data-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-data-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-data-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-data-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.migration-data-cards {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
   ========================================================= */

.migration-data-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 285px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.migration-data-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.migration-data-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.migration-data-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 42px;
}

.migration-data-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.migration-data-icon {
    width: 25px;
    height: 25px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.migration-data-card:hover .migration-data-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.migration-data-card-content {
    position: relative;
    z-index: 2;
}

.migration-data-card h3 {
    min-height: 48px;
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.migration-data-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   INDIVIDUELLE DATEN
   ========================================================= */

.migration-data-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.migration-data-card-more .migration-data-number {
    font-size: 1.15rem;
}
/* =========================================================
   MIGRATION – TYPISCHE MIGRATIONSWEGE
   ========================================================= */

.migration-routes-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-routes-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-routes-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-routes-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-routes-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.migration-routes-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   ROUTE CARD
   ========================================================= */

.migration-route-card {
    position: relative;

    min-height: 290px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.migration-route-card::after {
    position: absolute;
    right: -90px;
    bottom: -90px;

    width: 220px;
    height: 220px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.migration-route-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   NUMBER
   ========================================================= */

.migration-route-number {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 34px;

    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   FLOW
   ========================================================= */

.migration-route-flow {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    margin-bottom: 30px;
}

.migration-route-system {
    display: grid;
    gap: 8px;
}

.migration-route-label {
    color: var(--color-muted);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1.2;

    text-transform: uppercase;
}

.migration-route-system strong {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.6rem, 2.2vw, 2.15rem);
    font-weight: 700;

    letter-spacing: -0.035em;
    line-height: 1;
}


/* =========================================================
   ARROW
   ========================================================= */

.migration-route-arrow {
    display: flex;
    align-items: center;
}

.migration-route-arrow span {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.28);
}

.migration-route-arrow i {
    width: 20px;
    height: 20px;

    color: var(--color-primary);

    stroke-width: 1.7;
}


/* =========================================================
   TEXT
   ========================================================= */

.migration-route-card > p {
    position: relative;
    z-index: 2;

    max-width: 560px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}


/* =========================================================
   CUSTOM MIGRATION
   ========================================================= */

.migration-route-custom {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 24px;
    padding: 42px;

    border: 1px solid rgba(196, 0, 0, 0.15);
    border-radius: var(--radius-card);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.035),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.migration-route-custom .section-eyebrow {
    margin-bottom: 16px;
}

.migration-route-custom h3 {
    max-width: 620px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.migration-route-custom-content {
    max-width: 650px;
}

.migration-route-custom-content p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.98rem;
    line-height: 1.7;
}

.migration-route-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.9rem;
    font-weight: 700;

    text-decoration: none;
}

.migration-route-link span {
    color: var(--color-primary);

    transition: transform 220ms ease;
}

.migration-route-link:hover span {
    transform: translateX(4px);
}
/* =========================================================
   MIGRATION – PROZESSE
   ========================================================= */

.migration-processes-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-processes-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-processes-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-processes-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-processes-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.migration-processes-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.migration-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.migration-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.migration-process-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.migration-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.migration-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.migration-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.migration-process-card:hover .migration-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.migration-process-card-content {
    position: relative;
    z-index: 2;
}

.migration-process-card h3 {
    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.migration-process-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.migration-processes-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.migration-processes-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.migration-processes-statement p {
    max-width: 760px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.55;

    text-align: center;
}

.migration-processes-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   MIGRATION – PROJEKTABLAUF
   ========================================================= */

.migration-project-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-project-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-project-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-project-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-project-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.migration-project-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.migration-project-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.migration-project-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.migration-project-card:hover {
    background: rgba(196, 0, 0, 0.012);

    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.migration-project-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.migration-project-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.migration-project-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.migration-project-card:hover .migration-project-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.migration-project-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.migration-project-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   MIGRATION – SEO
   ========================================================= */

.migration-seo-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-seo-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-seo-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-seo-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-seo-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.migration-seo-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap: 24px;
}


/* =========================================================
   MAIN
   ========================================================= */

.migration-seo-main {
    position: relative;

    min-height: 520px;
    padding: 40px;

    overflow: hidden;

    border-radius: var(--radius-card);

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;
}

.migration-seo-main::after {
    position: absolute;
    right: -120px;
    bottom: -120px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.09);

    pointer-events: none;
}

.migration-seo-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    line-height: 1.2;

    text-transform: uppercase;
}

.migration-seo-main h3 {
    position: relative;
    z-index: 2;

    max-width: 570px;
    margin: 0 0 24px;

    color: var(--color-white);
    font-family: var(--font-heading);

    font-size: clamp(2.5rem, 3.7vw, 4rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.02;
}

.migration-seo-main > p {
    position: relative;
    z-index: 2;

    max-width: 580px;
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.97rem;
    line-height: 1.75;
}


/* =========================================================
   URL ROUTE
   ========================================================= */

.migration-seo-route {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    margin-top: 48px;
    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.migration-seo-route > div:not(.migration-seo-route-arrow) {
    display: grid;
    gap: 8px;
}

.migration-seo-route > div > span {
    color: rgba(255, 255, 255, 0.4);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    line-height: 1;

    text-transform: uppercase;
}

.migration-seo-route strong {
    color: rgba(255, 255, 255, 0.9);

    font-family: monospace;

    font-size: 0.82rem;
    font-weight: 500;

    line-height: 1.4;

    overflow-wrap: anywhere;
}

.migration-seo-route-arrow {
    display: flex;
    align-items: center;
}

.migration-seo-route-arrow span {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.45);
}

.migration-seo-route-arrow i {
    width: 20px;
    height: 20px;

    color: var(--color-primary);

    stroke-width: 1.7;
}


/* =========================================================
   CHECKLIST
   ========================================================= */

.migration-seo-checklist {
    border-top: 1px solid var(--color-border);
}

.migration-seo-check {
    display: grid;
    grid-template-columns:
        56px
        minmax(0, 1fr);

    gap: 20px;

    padding: 27px 4px;

    border-bottom: 1px solid var(--color-border);
}

.migration-seo-check-number {
    padding-top: 6px;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    line-height: 1;
}

.migration-seo-check h3 {
    margin: 0 0 7px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.15;
}

.migration-seo-check p {
    max-width: 590px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.migration-seo-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.migration-seo-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.migration-seo-statement p {
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.migration-seo-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   MIGRATION – FAQ
   ========================================================= */

.migration-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.migration-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.migration-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.migration-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.migration-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.migration-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.migration-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.migration-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.migration-faq-item summary::marker {
    content: "";
}

.migration-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.migration-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.migration-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.migration-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.migration-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.migration-faq-item summary:hover .migration-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.migration-faq-item[open] .migration-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.migration-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.migration-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   WEBHOSTING – HERO
   ========================================================= */

.hosting-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.hosting-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.hosting-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.hosting-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.hosting-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.hosting-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.hosting-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.hosting-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.hosting-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.hosting-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.hosting-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.hosting-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.hosting-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.hosting-system-card {
    position: relative;

    width: min(100%, 540px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.hosting-system-card::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}


/* =========================================================
   LABEL
   ========================================================= */

.hosting-system-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.58);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.16em;
    line-height: 1.35;

    text-transform: uppercase;
}


/* =========================================================
   STACK
   ========================================================= */

.hosting-system-stack {
    position: relative;
    z-index: 2;

    display: grid;
    justify-items: center;

    margin: 44px 0 34px;
}

.hosting-stack-item {
    width: min(100%, 360px);

    padding: 17px 20px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.055);

    text-align: center;
}

.hosting-stack-item-main {
    border-color: rgba(196, 0, 0, 0.35);

    background: rgba(196, 0, 0, 0.08);

    box-shadow:
        0 0 30px rgba(196, 0, 0, 0.06);
}

.hosting-stack-kicker {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.4);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    line-height: 1;

    text-transform: uppercase;
}

.hosting-stack-item strong {
    color: rgba(255, 255, 255, 0.92);

    font-size: 0.86rem;
    font-weight: 700;

    line-height: 1.45;
}

.hosting-stack-connector {
    width: 1px;
    height: 22px;

    background: rgba(196, 0, 0, 0.36);
}


/* =========================================================
   PARTNERS
   ========================================================= */

.hosting-system-partners {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-bottom: 12px;
}

.hosting-system-partners > div {
    display: grid;
    gap: 6px;

    padding: 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;

    background: rgba(255, 255, 255, 0.045);
}

.hosting-system-partners span {
    color: rgba(255, 255, 255, 0.36);

    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}

.hosting-system-partners strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.86rem;
    font-weight: 700;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.hosting-system-bottom {
    position: relative;
    z-index: 3;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}

.hosting-system-bottom > span:not(.hosting-system-more) {
    display: flex;
    align-items: center;

    min-height: 42px;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;

    background: rgba(255, 255, 255, 0.05);

    color: rgba(255, 255, 255, 0.88);

    font-size: 0.8rem;
    line-height: 1.2;
}

.hosting-system-more {
    grid-column: 1 / -1;

    margin-top: 4px;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.63rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    line-height: 1.4;

    text-align: center;
    text-transform: uppercase;
}
/* =========================================================
   WEBHOSTING – BENEFITS
   ========================================================= */

.hosting-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-benefits-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.hosting-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.hosting-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.hosting-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.hosting-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.hosting-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.hosting-benefit-card:hover .hosting-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-benefit-card-content {
    position: relative;
    z-index: 2;
}

.hosting-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hosting-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WEBHOSTING – SERVICES
   ========================================================= */

.hosting-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.hosting-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.hosting-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.hosting-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.hosting-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.hosting-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);
    stroke-width: 1.7;

    transition: color 220ms ease;
}

.hosting-service-card:hover .hosting-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-service-card-content {
    position: relative;
    z-index: 2;
}

.hosting-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hosting-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WEBHOSTING – PARTNER
   ========================================================= */

.hosting-partners-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-partners-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-partners-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-partners-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-partners-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-partners-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   PANEL
   ========================================================= */

.hosting-partner-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 500px;
    padding: 36px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.hosting-partner-panel::after {
    position: absolute;
    right: -110px;
    bottom: -110px;

    width: 280px;
    height: 280px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.hosting-partner-panel:hover {
    background: rgba(196, 0, 0, 0.01);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   TOP
   ========================================================= */

.hosting-partner-panel-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 56px;
}

.hosting-partner-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-partner-badge {
    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 7px 11px;

    border: 1px solid rgba(196, 0, 0, 0.15);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.025);

    color: var(--color-primary);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-partner-content {
    position: relative;
    z-index: 2;
}

.hosting-partner-content h3 {
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.4rem, 3.3vw, 3.5rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1;
}

.hosting-partner-content > p {
    max-width: 600px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.98rem;
    line-height: 1.75;
}


/* =========================================================
   FEATURES
   ========================================================= */

.hosting-partner-features {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-top: 34px;
}

.hosting-partner-features span {
    display: flex;
    align-items: center;
    gap: 10px;

    min-height: 44px;

    padding: 10px 12px;

    border: 1px solid var(--color-border);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 600;

    line-height: 1.3;
}

.hosting-partner-features i {
    width: 16px;
    height: 16px;

    flex: 0 0 auto;

    color: var(--color-primary);

    stroke-width: 2;
}


/* =========================================================
   FOOTER
   ========================================================= */

.hosting-partner-footer {
    position: relative;
    z-index: 2;

    margin-top: auto;
    padding-top: 34px;
}

.hosting-partner-footer::before {
    display: block;

    width: 100%;
    height: 1px;

    margin-bottom: 20px;

    content: "";

    background: var(--color-border);
}

.hosting-partner-footer span {
    color: var(--color-muted);

    font-size: 0.84rem;
    font-weight: 600;

    line-height: 1.5;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.hosting-partners-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.hosting-partners-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.hosting-partners-statement p {
    max-width: 780px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.hosting-partners-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   WEBHOSTING – SYSTEME
   ========================================================= */

.hosting-systems-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-systems-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-systems-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-systems-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-systems-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-systems-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.hosting-system-type-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.hosting-system-type-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.hosting-system-type-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.hosting-system-type-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.hosting-system-type-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-system-type-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.hosting-system-type-card:hover .hosting-system-type-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-system-type-content {
    position: relative;
    z-index: 2;
}

.hosting-system-type-card h3 {
    min-height: 48px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hosting-system-type-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   WEITERE SYSTEME
   ========================================================= */

.hosting-system-type-card-more {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}

.hosting-system-type-card-more
.hosting-system-type-number {
    font-size: 1.15rem;
}
/* =========================================================
   WEBHOSTING – MANAGED
   ========================================================= */

.hosting-managed-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-managed-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-managed-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-managed-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-managed-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-managed-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.hosting-managed-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.hosting-managed-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.hosting-managed-card:hover {
    background: rgba(196, 0, 0, 0.012);

    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.hosting-managed-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.hosting-managed-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-managed-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.hosting-managed-card:hover .hosting-managed-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-managed-content {
    position: relative;
    z-index: 2;
}

.hosting-managed-card h3 {
    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hosting-managed-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.hosting-managed-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.hosting-managed-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.hosting-managed-statement p {
    max-width: 760px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.hosting-managed-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   WEBHOSTING – PROJEKTABLAUF
   ========================================================= */

.hosting-project-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-project-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-project-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-project-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-project-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.hosting-project-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.hosting-project-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.hosting-project-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.hosting-project-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.hosting-project-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.hosting-project-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.hosting-project-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.hosting-project-card:hover .hosting-project-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.hosting-project-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.hosting-project-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WEBHOSTING – FAQ
   ========================================================= */

.hosting-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.hosting-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.hosting-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.hosting-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.hosting-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.hosting-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.hosting-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.hosting-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.hosting-faq-item summary::marker {
    content: "";
}

.hosting-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.hosting-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.hosting-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.hosting-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.hosting-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.hosting-faq-item summary:hover .hosting-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.hosting-faq-item[open] .hosting-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.hosting-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.hosting-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   REFERENZEN – FESTE BILDSEITE
   ========================================================= */

/* Bild links */

.reference-showcase-left .reference-showcase-visual {
    order: 1;
}

.reference-showcase-left .reference-showcase-content {
    order: 2;
}


/* Bild rechts */

.reference-showcase-right .reference-showcase-content {
    order: 1;
}

.reference-showcase-right .reference-showcase-visual {
    order: 2;
}
/* =========================================================
   REFERENZEN – EINHEITLICHER BROWSER FRAME
   ========================================================= */

.reference-showcase-visual {
    width: 100%;
    max-width: 556px;
    min-width: 0;
    justify-self: center;
}

/* =========================================================
   REFERENCES – BROWSER FRAME IMAGE FIX
   ========================================================= */

.reference-browser-frame {
    height: auto;
    min-height: 0;
}
.reference-browser-frame {
    width: 100%;
    height: auto;
    min-height: 0;
}

.reference-browser-frame > img {
    display: block;
    width: 100%;
    height: auto;
}

/* Browserleiste */

.reference-browser-toolbar {
    flex: 0 0 auto;
}


/* =========================================================
   REFERENZEN – INDIVIDUELLE SCREENSHOT-SKALIERUNG
   ========================================================= */

.reference-image {
    display: block;

    width: 100%;
    height: 0;
    min-height: 0;

    flex: 1 1 0;

    object-fit: contain;
    object-position: top center;

    background: #fff;
}
/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

.mobile-navigation {
    position: fixed;

    top: var(--header-height, 76px);
    right: 0;
    bottom: 0;
    left: 0;

    z-index: 950;

    overflow-y: auto;

    background: var(--color-white);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-12px);

    transition:
        opacity 240ms ease,
        visibility 240ms ease,
        transform 240ms ease;
}

.mobile-navigation.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}


/* =========================================================
   INNER
   ========================================================= */

.mobile-navigation-inner {
    width: min(calc(100% - 40px), 560px);

    margin: 0 auto;
    padding: 34px 0 48px;
}


/* =========================================================
   MAIN LINK
   ========================================================= */

.mobile-navigation-main-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 0 0 22px;

    border-bottom: 1px solid var(--color-border);

    color: var(--color-dark);

    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;

    text-decoration: none;
}

.mobile-navigation-main-link span {
    color: var(--color-primary);

    font-size: 1.25rem;
}


/* =========================================================
   GROUPS
   ========================================================= */

.mobile-navigation-group {
    display: grid;
    gap: 0;

    padding: 26px 0;

    border-bottom: 1px solid var(--color-border);
}

.mobile-navigation-label {
    display: block;

    margin-bottom: 13px;

    color: var(--color-primary);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    line-height: 1.2;
}

.mobile-navigation-group a {
    display: flex;
    align-items: center;

    min-height: 43px;

    color: var(--color-dark);

    font-size: 1rem;
    font-weight: 650;

    text-decoration: none;

    transition:
        color 180ms ease,
        transform 180ms ease;
}

.mobile-navigation-group a:hover {
    color: var(--color-primary);

    transform: translateX(3px);
}


/* Referenzen / Agentur / Kontakt etwas stärker */

.mobile-navigation-group-secondary a {
    font-family: var(--font-heading);

    font-size: 1.12rem;
    font-weight: 700;
}


/* =========================================================
   CTA
   ========================================================= */

.mobile-navigation-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-top: 28px;
    padding: 18px 20px;

    border-radius: var(--radius-button);

    background: var(--color-primary);

    color: var(--color-white);

    font-size: 0.95rem;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color 200ms ease,
        transform 200ms ease;
}

.mobile-navigation-cta:hover {
    transform: translateY(-1px);

    color: var(--color-white);
}

.mobile-navigation-cta span {
    font-size: 1.25rem;
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.navigation-open {
    overflow: hidden;
}


/* HUKE – etwas größer darstellen */

.reference-image-huke {
    transform: scale(1.14);

    transform-origin: top center;
}
/* =========================================================
   WORDPRESS – HERO
   ========================================================= */

.wordpress-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.wordpress-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.wordpress-hero-content {
    position: relative;
    z-index: 2;

    max-width: 900px;
}

.wordpress-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.wordpress-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.wordpress-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.wordpress-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.wordpress-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.wordpress-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.wordpress-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.wordpress-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.wordpress-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;

    line-height: 1.25;
}

.wordpress-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.wordpress-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.wordpress-system-card {
    position: relative;

    width: min(100%, 550px);
    min-height: 500px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        radial-gradient(
            circle at 82% 20%,
            rgba(196, 0, 0, 0.1),
            transparent 36%
        ),
        #f6f6f6;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.08);
}

.wordpress-system-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: var(--color-muted);

    font-size: 0.7rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   BROWSER
   ========================================================= */

.wordpress-browser {
    position: relative;
    z-index: 2;

    margin-top: 54px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 20px;

    background: var(--color-white);

    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.06);
}

.wordpress-browser-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 42px;

    padding: 0 14px;

    border-bottom: 1px solid var(--color-border);

    background: #f3f3f3;
}

.wordpress-browser-toolbar > span {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d0d0d0;
}

.wordpress-browser-toolbar > div {
    flex: 1;

    margin-left: 14px;
    padding: 7px 12px;

    border-radius: 8px;

    background: var(--color-white);

    color: var(--color-muted);

    font-size: 0.64rem;

    text-align: center;
}


/* =========================================================
   BROWSER CONTENT
   ========================================================= */

.wordpress-browser-content {
    padding: 24px;
}

.wordpress-browser-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
}

.wordpress-browser-nav strong {
    font-size: 0.85rem;

    letter-spacing: 0.1em;
}

.wordpress-browser-nav span {
    color: var(--color-muted);

    font-size: 0.7rem;
}

.wordpress-browser-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    gap: 24px;
}

.wordpress-browser-image {
    display: flex;
    align-items: flex-end;

    min-height: 220px;
    padding: 18px;

    border-radius: 14px;

    background:
        linear-gradient(
            145deg,
            #dedbd6,
            #f4f2ef
        );
}

.wordpress-browser-image span {
    padding: 8px 11px;

    border-radius: 999px;

    background: var(--color-white);

    color: var(--color-dark);

    font-size: 0.64rem;
    font-weight: 700;
}

.wordpress-browser-copy {
    align-self: center;
}

.wordpress-browser-eyebrow {
    display: block;

    margin-bottom: 12px;

    color: var(--color-primary);

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.wordpress-browser-copy strong {
    display: block;

    color: var(--color-dark);

    font-family: var(--font-heading);

    font-size: 2rem;
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1;
}

.wordpress-browser-copy p {
    margin: 16px 0 0;

    color: var(--color-muted);

    font-size: 0.7rem;
    line-height: 1.6;
}


/* =========================================================
   BADGES
   ========================================================= */

.wordpress-system-badge {
    position: absolute;
    z-index: 4;

    display: grid;
    gap: 5px;

    min-width: 130px;
    padding: 14px 16px;

    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 14px;

    background: var(--color-white);

    box-shadow:
        0 14px 35px rgba(0, 0, 0, 0.08);
}

.wordpress-system-badge span {
    color: var(--color-muted);

    font-size: 0.55rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}

.wordpress-system-badge strong {
    color: var(--color-dark);

    font-size: 0.85rem;
}

.wordpress-system-badge-one {
    top: 72px;
    right: 12px;
}

.wordpress-system-badge-two {
    right: 16px;
    bottom: 92px;
}


/* =========================================================
   BOTTOM
   ========================================================= */

.wordpress-system-bottom {
    position: relative;
    z-index: 3;

    display: flex;
    flex-wrap: wrap;
    gap: 9px;

    margin-top: 24px;
}

.wordpress-system-bottom > span:not(.wordpress-system-more) {
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: var(--color-white);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 600;
}

.wordpress-system-more {
    flex-basis: 100%;

    margin-top: 4px;

    color: var(--color-muted);

    font-size: 0.6rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    line-height: 1.4;

    text-transform: uppercase;
}
/* =========================================================
   WORDPRESS – BENEFITS
   ========================================================= */

.wordpress-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.wordpress-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-benefits-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.wordpress-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.wordpress-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.wordpress-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.wordpress-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.wordpress-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.wordpress-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.wordpress-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.wordpress-benefit-card:hover .wordpress-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.wordpress-benefit-card-content {
    position: relative;
    z-index: 2;
}

.wordpress-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wordpress-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WORDPRESS – SERVICES
   ========================================================= */

.wordpress-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.wordpress-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-services-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.wordpress-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.wordpress-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.wordpress-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.wordpress-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.wordpress-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.wordpress-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.wordpress-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.wordpress-service-card:hover .wordpress-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.wordpress-service-card-content {
    position: relative;
    z-index: 2;
}

.wordpress-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wordpress-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.wordpress-services-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.wordpress-services-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.wordpress-services-statement p {
    max-width: 760px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.wordpress-services-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   WORDPRESS – CASES
   ========================================================= */

.wordpress-cases-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-cases-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 84px;
}

.wordpress-cases-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-cases-heading h2 {
    max-width: 850px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-cases-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   CASE LIST
   ========================================================= */

.wordpress-cases-list {
    display: grid;
    gap: 110px;
}


/* =========================================================
   SINGLE CASE
   ========================================================= */

.wordpress-case {
    display: grid;
    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(0, 0.92fr);

    gap: 80px;
    align-items: center;
}


/* Zweite Referenz gespiegelt */

.wordpress-case-reverse
.wordpress-case-visual {
    order: 2;
}

.wordpress-case-reverse
.wordpress-case-content {
    order: 1;
}


/* =========================================================
   BROWSER VISUAL
   ========================================================= */

.wordpress-case-visual {
    min-width: 0;
}

.wordpress-case-browser {
    width: 100%;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: 22px;

    background: var(--color-white);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, 0.07);

    transition:
        transform 280ms ease,
        box-shadow 280ms ease;
}

.wordpress-case:hover
.wordpress-case-browser {
    transform: translateY(-4px);

    box-shadow:
        0 30px 65px rgba(0, 0, 0, 0.1);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.wordpress-case-toolbar {
    display: flex;
    align-items: center;
    gap: 7px;

    min-height: 46px;
    padding: 0 16px;

    border-bottom: 1px solid var(--color-border);

    background: #f3f3f3;
}

.wordpress-case-toolbar > span {
    flex: 0 0 auto;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #d0d0d0;
}

.wordpress-case-toolbar > div {
    flex: 1;

    margin-left: 12px;
    padding: 7px 12px;

    border-radius: 8px;

    background: var(--color-white);

    color: var(--color-muted);

    font-size: 0.66rem;

    text-align: center;
}


/* =========================================================
   SCREENSHOT
   ========================================================= */

.wordpress-case-browser > img {
    display: block;

    width: 100%;
    height: auto;
}


/* =========================================================
   CONTENT
   ========================================================= */

.wordpress-case-content {
    max-width: 590px;
}

.wordpress-case-number {
    display: block;

    margin-bottom: 20px;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    line-height: 1.3;
}

.wordpress-case-content h3 {
    margin: 0 0 20px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.3rem, 3.5vw, 3.7rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1;
}

.wordpress-case-lead {
    margin: 0 0 18px !important;

    color: var(--color-dark) !important;

    font-size: 1.08rem !important;
    font-weight: 650;

    line-height: 1.6 !important;
}

.wordpress-case-content p {
    max-width: 570px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.96rem;
    line-height: 1.75;
}


/* =========================================================
   TAGS
   ========================================================= */

.wordpress-case-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 26px;
}

.wordpress-case-tags span {
    padding: 8px 12px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: var(--color-white);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 700;
}


/* =========================================================
   LINK
   ========================================================= */

.wordpress-case-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 30px;

    color: var(--color-dark);

    font-size: 0.88rem;
    font-weight: 800;

    text-decoration: none;

    transition: color 200ms ease;
}

.wordpress-case-link i {
    width: 17px;
    height: 17px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.wordpress-case-link:hover {
    color: var(--color-primary);
}

.wordpress-case-link:hover i {
    transform: translate(3px, -3px);
}


/* =========================================================
   STATEMENT
   ========================================================= */

.wordpress-cases-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 86px;
}

.wordpress-cases-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.wordpress-cases-statement p {
    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.wordpress-cases-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   WORDPRESS – WARTUNG
   ========================================================= */

.wordpress-maintenance-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-maintenance-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.wordpress-maintenance-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-maintenance-heading h2 {
    max-width: 820px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-maintenance-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.wordpress-maintenance-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap: 28px;
}


/* =========================================================
   MAIN
   ========================================================= */

.wordpress-maintenance-main {
    position: relative;

    min-height: 600px;
    padding: 42px;

    overflow: hidden;

    border-radius: var(--radius-card);

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;
}

.wordpress-maintenance-main::after {
    position: absolute;
    right: -130px;
    bottom: -130px;

    width: 360px;
    height: 360px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);

    pointer-events: none;
}

.wordpress-maintenance-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 24px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.14em;
    line-height: 1.3;

    text-transform: uppercase;
}

.wordpress-maintenance-main h3 {
    position: relative;
    z-index: 2;

    max-width: 620px;
    margin: 0 0 26px;

    color: var(--color-white);
    font-family: var(--font-heading);

    font-size: clamp(2.6rem, 3.8vw, 4.2rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1;
}

.wordpress-maintenance-main > p {
    position: relative;
    z-index: 2;

    max-width: 580px;
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.98rem;
    line-height: 1.75;
}


/* =========================================================
   STATUS
   ========================================================= */

.wordpress-maintenance-status {
    position: absolute;
    z-index: 2;

    left: 42px;
    right: 42px;
    bottom: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-top: 24px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.wordpress-maintenance-status > div {
    display: grid;
    gap: 5px;
}

.wordpress-maintenance-status span {
    color: rgba(255, 255, 255, 0.38);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.wordpress-maintenance-status strong {
    color: rgba(255, 255, 255, 0.92);

    font-size: 0.96rem;
}

.wordpress-maintenance-status i {
    width: 32px;
    height: 32px;

    color: var(--color-primary);

    stroke-width: 1.6;
}


/* =========================================================
   LIST
   ========================================================= */

.wordpress-maintenance-list {
    border-top: 1px solid var(--color-border);
}

.wordpress-maintenance-item {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 20px;

    padding: 25px 4px;

    border-bottom: 1px solid var(--color-border);
}

.wordpress-maintenance-number {
    padding-top: 5px;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    line-height: 1;
}

.wordpress-maintenance-item h3 {
    margin: 0 0 7px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.28rem;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.15;
}

.wordpress-maintenance-item p {
    max-width: 610px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.wordpress-maintenance-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.wordpress-maintenance-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.wordpress-maintenance-statement p {
    max-width: 820px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.wordpress-maintenance-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   WORDPRESS – PROJEKTABLAUF
   ========================================================= */

.wordpress-project-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-project-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.wordpress-project-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-project-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-project-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.wordpress-project-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.wordpress-project-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.wordpress-project-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.wordpress-project-card:hover {
    background: rgba(196, 0, 0, 0.012);

    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.wordpress-project-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.wordpress-project-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.wordpress-project-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.wordpress-project-card:hover .wordpress-project-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.wordpress-project-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.wordpress-project-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   WORDPRESS – FAQ
   ========================================================= */

.wordpress-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.wordpress-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.wordpress-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.wordpress-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.wordpress-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.wordpress-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.wordpress-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.wordpress-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.wordpress-faq-item summary::marker {
    content: "";
}

.wordpress-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.wordpress-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.wordpress-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.wordpress-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.wordpress-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.wordpress-faq-item summary:hover
.wordpress-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.wordpress-faq-item[open]
.wordpress-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.wordpress-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.wordpress-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   SEO & GOOGLE – HERO
   ========================================================= */

.seo-hero {
    position: relative;
    overflow: hidden;

    padding: 55px 0 86px;

    background:
        radial-gradient(
            circle at 88% 30%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.seo-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.14fr)
        minmax(420px, 0.86fr);

    gap: 78px;
    align-items: center;
}

.seo-hero-content {
    max-width: 900px;
}

.seo-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.seo-hero-content h1 {
    max-width: 900px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3.8rem, 5.3vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}

.seo-hero-lead {
    max-width: 790px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.05rem;
    line-height: 1.75;
}

.seo-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}

.seo-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.seo-hero-trust > div {
    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.seo-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.seo-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.98rem;
    font-weight: 800;
}

.seo-hero-trust span {
    color: var(--color-muted);

    font-size: 0.8rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.seo-hero-visual {
    display: flex;
    justify-content: flex-end;
}

.seo-system-card {
    width: min(100%, 540px);

    padding: 36px;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,0.025) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0,0,0,0.14);
}

.seo-system-label {
    display: block;

    margin-bottom: 38px;

    color: rgba(255,255,255,0.52);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.seo-search-preview {
    padding: 26px;

    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px;

    background: rgba(255,255,255,0.05);
}

.seo-search-url {
    display: block;

    margin-bottom: 10px;

    color: rgba(255,255,255,0.45);

    font-size: 0.68rem;
}

.seo-search-preview strong {
    display: block;

    color: #fff;

    font-family: var(--font-heading);

    font-size: 1.65rem;
    line-height: 1.15;
}

.seo-search-preview p {
    margin: 14px 0 0;

    color: rgba(255,255,255,0.6);

    font-size: 0.85rem;
    line-height: 1.6;
}

.seo-system-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 18px;
}

.seo-system-grid div {
    display: grid;
    gap: 6px;

    padding: 16px;

    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;

    background: rgba(255,255,255,0.045);
}

.seo-system-grid span {
    color: var(--color-primary);

    font-size: 0.68rem;
    font-weight: 800;
}

.seo-system-grid strong {
    color: rgba(255,255,255,0.9);

    font-size: 0.8rem;
}

.seo-system-note {
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid rgba(255,255,255,0.1);

    color: rgba(255,255,255,0.48);

    font-size: 0.68rem;
    line-height: 1.5;
}
/* =========================================================
   SEO & GOOGLE – BENEFITS
   ========================================================= */

.seo-benefits-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-benefits-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-benefits-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-benefits-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-benefits-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.seo-benefits-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 22px;
}


/* =========================================================
   CARD
   ========================================================= */

.seo-benefit-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 300px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.seo-benefit-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.03);

    pointer-events: none;
}

.seo-benefit-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.seo-benefit-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 52px;
}

.seo-benefit-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.seo-benefit-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.seo-benefit-card:hover .seo-benefit-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.seo-benefit-card-content {
    position: relative;
    z-index: 2;
}

.seo-benefit-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.seo-benefit-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SEO & GOOGLE – SERVICES
   ========================================================= */

.seo-services-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-services-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-services-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-services-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-services-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.seo-services-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.seo-service-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 305px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.seo-service-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.seo-service-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.seo-service-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 50px;
}

.seo-service-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.seo-service-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.seo-service-card:hover .seo-service-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.seo-service-card-content {
    position: relative;
    z-index: 2;
}

.seo-service-card h3 {
    min-height: 58px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.seo-service-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SEO & GOOGLE – PARTNER
   ========================================================= */

.seo-partner-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-partner-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-partner-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-partner-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-partner-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   TWO PANEL LAYOUT
   ========================================================= */

.seo-partner-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        76px
        minmax(0, 1fr);

    gap: 18px;
    align-items: stretch;
}


/* =========================================================
   PANEL
   ========================================================= */

.seo-partner-panel {
    position: relative;

    min-height: 520px;
    padding: 36px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);
}

.seo-partner-panel::after {
    position: absolute;
    right: -100px;
    bottom: -100px;

    width: 270px;
    height: 270px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}


/* =========================================================
   PANEL TOP
   ========================================================= */

.seo-partner-panel-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 48px;
}

.seo-partner-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.seo-partner-badge {
    padding: 8px 11px;

    border: 1px solid rgba(196, 0, 0, 0.16);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.025);

    color: var(--color-primary);

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* =========================================================
   CONTENT
   ========================================================= */

.seo-partner-content {
    position: relative;
    z-index: 2;
}

.seo-partner-kicker {
    display: block;

    margin-bottom: 15px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.seo-partner-content h3 {
    margin: 0 0 20px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.3rem, 3.2vw, 3.5rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.02;
}

.seo-partner-content > p {
    max-width: 580px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.96rem;
    line-height: 1.72;
}


/* =========================================================
   FEATURES
   ========================================================= */

.seo-partner-features {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;

    margin-top: 32px;
}

.seo-partner-features span {
    display: flex;
    align-items: center;
    gap: 9px;

    min-height: 42px;

    padding: 9px 11px;

    border: 1px solid var(--color-border);
    border-radius: 10px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.8rem;
    font-weight: 650;
}

.seo-partner-features i {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    color: var(--color-primary);

    stroke-width: 2;
}


/* =========================================================
   CONNECTION
   ========================================================= */

.seo-partner-connection {
    display: flex;
    align-items: center;
    justify-content: center;
}

.seo-partner-connection > span {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.2);
}

.seo-partner-connection > div {
    display: grid;
    place-items: center;

    width: 44px;
    height: 44px;

    flex: 0 0 44px;

    border: 1px solid rgba(196, 0, 0, 0.18);
    border-radius: 50%;

    background: var(--color-white);
}

.seo-partner-connection i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.7;
}


/* =========================================================
   TRUST / 10 YEARS
   ========================================================= */

.seo-partner-trust {
    display: grid;
    grid-template-columns:
        260px
        minmax(0, 1fr);

    gap: 70px;
    align-items: center;

    margin-top: 24px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);
}

.seo-partner-trust-value {
    display: grid;
    gap: 7px;

    padding-right: 42px;

    border-right: 1px solid var(--color-border);
}

.seo-partner-trust-value strong {
    color: var(--color-primary);
    font-family: var(--font-heading);

    font-size: clamp(4rem, 6vw, 6rem);
    font-weight: 700;

    letter-spacing: -0.06em;
    line-height: 0.9;
}

.seo-partner-trust-value span {
    color: var(--color-muted);

    font-size: 0.8rem;
    font-weight: 700;
}

.seo-partner-trust-copy .section-eyebrow {
    margin-bottom: 14px;
}

.seo-partner-trust-copy h3 {
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.8rem, 2.7vw, 2.7rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.seo-partner-trust-copy p {
    max-width: 760px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}


/* =========================================================
   STATEMENT
   ========================================================= */

.seo-partner-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.seo-partner-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.seo-partner-statement p {
    max-width: 850px;
    margin: 0;

    text-align: center;

    font-size: 1rem;
    line-height: 1.5;
}

.seo-partner-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   SEO & GOOGLE – TECHNISCHE SEO
   ========================================================= */

.seo-technical-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-technical-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-technical-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-technical-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-technical-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.seo-technical-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 20px;
}


/* =========================================================
   CARD
   ========================================================= */

.seo-technical-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 270px;
    padding: 26px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.seo-technical-card::after {
    position: absolute;
    right: -64px;
    bottom: -64px;

    width: 150px;
    height: 150px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.seo-technical-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.14);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.seo-technical-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 42px;
}

.seo-technical-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.seo-technical-icon {
    width: 25px;
    height: 25px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.seo-technical-card:hover .seo-technical-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.seo-technical-card-content {
    position: relative;
    z-index: 2;
}

.seo-technical-card h3 {
    min-height: 48px;
    margin: 0 0 12px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.5rem;
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.1;
}

.seo-technical-card p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}
/* =========================================================
   SEO & GOOGLE – PROJEKTABLAUF
   ========================================================= */

.seo-project-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-project-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-project-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-project-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-project-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.seo-project-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.seo-project-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        background-color 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.seo-project-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.seo-project-card:hover {
    background: rgba(196, 0, 0, 0.012);
    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* =========================================================
   HEADER
   ========================================================= */

.seo-project-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.seo-project-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.seo-project-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.seo-project-card:hover .seo-project-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* =========================================================
   CONTENT
   ========================================================= */

.seo-project-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.seo-project-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}
/* =========================================================
   SEO & GOOGLE – FAQ
   ========================================================= */

.seo-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.seo-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.seo-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.seo-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.seo-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   FAQ LIST
   ========================================================= */

.seo-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* =========================================================
   FAQ ITEM
   ========================================================= */

.seo-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.seo-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.seo-faq-item summary::marker {
    content: "";
}

.seo-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* =========================================================
   NUMBER
   ========================================================= */

.seo-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* =========================================================
   QUESTION
   ========================================================= */

.seo-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* =========================================================
   TOGGLE
   ========================================================= */

.seo-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.seo-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.seo-faq-item summary:hover
.seo-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.seo-faq-item[open]
.seo-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* =========================================================
   ANSWER
   ========================================================= */

.seo-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.seo-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   404 – ERROR PAGE
   ========================================================= */

.error-page {
    position: relative;

    display: flex;
    align-items: center;

    min-height: calc(100vh - 78px);

    overflow: hidden;

    padding: 100px 0 70px;

    background: #111;
}


/* subtle background element */

.error-page::before {
    position: absolute;
    top: -280px;
    right: -180px;

    width: 700px;
    height: 700px;

    content: "";

    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 50%;

    pointer-events: none;
}

.error-page::after {
    position: absolute;
    right: 14%;
    bottom: -330px;

    width: 620px;
    height: 620px;

    content: "";

    border: 1px solid rgba(196, 0, 0, 0.12);
    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.error-page-layout {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, 0.95fr);

    gap: 110px;
    align-items: center;
}


/* =========================================================
   LEFT CONTENT
   ========================================================= */

.error-page-content .section-eyebrow {
    margin-bottom: 22px;
}


/* =========================================================
   404 NUMBER
   ========================================================= */

.error-page-code {
    margin: 0 0 4px;

    color: var(--color-primary);
    font-family: var(--font-heading);

    font-size: clamp(7rem, 13vw, 12rem);
    font-weight: 700;

    letter-spacing: -0.075em;
    line-height: 0.82;
}


/* =========================================================
   HEADLINE
   ========================================================= */

.error-page h1 {
    max-width: 800px;

    margin: 32px 0 26px;

    color: #fff;
    font-family: var(--font-heading);

    font-size: clamp(3rem, 5vw, 5.3rem);
    font-weight: 700;

    letter-spacing: -0.055em;
    line-height: 0.98;
}


/* =========================================================
   TEXT
   ========================================================= */

.error-page-lead {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.78);

    font-size: 1.08rem;
    line-height: 1.7;
}

.error-page-copy {
    max-width: 650px;

    margin: 14px 0 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.error-page-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 38px;
}

.error-page-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;
}

.error-page-actions .btn i {
    width: 17px;
    height: 17px;
}

.error-page-secondary {
    border-color: rgba(255, 255, 255, 0.18);

    background: transparent;

    color: #fff;
}

.error-page-secondary:hover {
    border-color: rgba(255, 255, 255, 0.35);

    background: rgba(255, 255, 255, 0.05);
}


/* =========================================================
   STATUS PANEL
   ========================================================= */

.error-status {
    position: relative;
    z-index: 2;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-card);

    background: rgba(255, 255, 255, 0.035);

    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.25);

    backdrop-filter: blur(10px);
}


/* =========================================================
   STATUS HEADER
   ========================================================= */

.error-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 58px;
    padding: 0 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.error-status-header > span {
    color: rgba(255, 255, 255, 0.42);

    font-size: 0.63rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.error-status-dots {
    display: flex;
    gap: 7px;
}

.error-status-dots span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.2);
}

.error-status-dots span:first-child {
    background: var(--color-primary);
}


/* =========================================================
   STATUS BODY
   ========================================================= */

.error-status-body {
    padding: 8px 28px;
}

.error-status-row {
    display: grid;
    grid-template-columns:
        125px
        minmax(0, 1fr);

    gap: 20px;

    padding: 23px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.error-status-row:last-child {
    border-bottom: 0;
}

.error-status-label {
    color: rgba(255, 255, 255, 0.32);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.error-status-row strong {
    overflow-wrap: anywhere;

    color: rgba(255, 255, 255, 0.78);

    font-family: var(--font-heading);

    font-size: 0.88rem;
    font-weight: 600;

    line-height: 1.45;
}


/* error */

.error-status-row
.error-status-error {
    color: var(--color-primary);
}


/* online */

.error-status-online {
    display: flex;
    align-items: center;
    gap: 9px;
}

.error-status-online > span {
    width: 7px;
    height: 7px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: #59b879;

    box-shadow:
        0 0 0 4px rgba(89, 184, 121, 0.08);
}


/* solution */

.error-status-solution strong {
    color: #fff;
}


/* =========================================================
   STATUS FOOTER
   ========================================================= */

.error-status-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 28px;

    border-top: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(0, 0, 0, 0.16);
}

.error-status-footer span {
    color: rgba(255, 255, 255, 0.28);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.error-status-footer code {
    color: rgba(255, 255, 255, 0.48);

    font-size: 0.72rem;
}


/* =========================================================
   BOTTOM STATEMENT
   ========================================================= */

.error-page-statement {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 24px;

    margin-top: 80px;
}

.error-page-statement > span {
    width: 54px;
    height: 1px;

    flex: 0 0 auto;

    background: var(--color-primary);
}

.error-page-statement p {
    margin: 0;

    color: rgba(255, 255, 255, 0.38);

    font-size: 0.83rem;
    line-height: 1.5;
}

.error-page-statement strong {
    color: rgba(255, 255, 255, 0.7);

    font-weight: 700;
}
/* =========================================================
   404 – BUTTON FIX
   ========================================================= */

.error-page .error-page-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 24px;

    border: 1px solid var(--color-primary);
    border-radius: var(--radius-button);

    background: var(--color-primary);

    color: #fff;

    font-weight: 700;
    text-decoration: none;

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.error-page .error-page-actions .btn-primary:hover {
    background: #a90000;
    border-color: #a90000;

    color: #fff;

    transform: translateY(-1px);
}

.error-page .error-page-actions .btn-primary:visited {
    color: #fff;
}


/* SECONDARY */

.error-page .error-page-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0 24px;

    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--radius-button);

    background: transparent;

    color: #fff;

    font-weight: 700;
    text-decoration: none;

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

.error-page .error-page-actions .btn-secondary:hover {
    border-color: rgba(255, 255, 255, 0.42);

    background: rgba(255, 255, 255, 0.06);

    color: #fff;

    transform: translateY(-1px);
}

.error-page .error-page-actions .btn-secondary:visited {
    color: #fff;
}
.page-404 {
    background: #111;
}

.page-404 main {
    margin: 0;
    padding: 0;

    background: #111;
}

.page-404 .error-page {
    margin: 0;
}

.page-404 .site-footer {
    margin-top: 0;
}
/* =========================================================
   LEISTUNGEN – HERO
   ========================================================= */

.services-hero {
    position: relative;
    overflow: hidden;

    padding: 64px 0 34px;

    background:
        radial-gradient(
            circle at 88% 26%,
            rgba(196, 0, 0, 0.045),
            transparent 34%
        ),
        var(--color-white);
}

.services-hero-container {
    display: grid;
    grid-template-columns:
        minmax(0, 1.12fr)
        minmax(420px, 0.88fr);

    gap: 82px;
    align-items: center;
}


/* =========================================================
   CONTENT
   ========================================================= */

.services-hero-content {
    position: relative;
    z-index: 2;

    max-width: 920px;
}

.services-hero-content .section-eyebrow {
    margin-bottom: 22px;
}

.services-hero-content h1 {
    max-width: 920px;
    margin: 0 0 28px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(4rem, 5.5vw, 6.4rem);
    font-weight: 700;

    letter-spacing: -0.058em;
    line-height: 0.96;
}

.services-hero-lead {
    max-width: 800px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1.07rem;
    line-height: 1.75;
}

.services-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;

    margin-top: 34px;
}


/* =========================================================
   TRUST
   ========================================================= */

.services-hero-trust {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    margin-top: 46px;
    padding-top: 28px;

    border-top: 1px solid var(--color-border);
}

.services-hero-trust > div {
    position: relative;

    display: grid;
    gap: 6px;

    padding-right: 24px;
}

.services-hero-trust > div:not(:first-child) {
    padding-left: 24px;
}

.services-hero-trust > div:not(:last-child)::after {
    position: absolute;
    top: 2px;
    right: 0;

    width: 1px;
    height: 42px;

    content: "";

    background: var(--color-border);
}

.services-hero-trust strong {
    color: var(--color-dark);

    font-size: 0.96rem;
    font-weight: 800;

    line-height: 1.25;
}

.services-hero-trust span {
    color: var(--color-muted);

    font-size: 0.78rem;
    line-height: 1.45;
}


/* =========================================================
   VISUAL
   ========================================================= */

.services-hero-visual {
    position: relative;

    display: flex;
    justify-content: flex-end;

    min-width: 0;
}

.services-system-map {
    position: relative;

    width: min(100%, 560px);
    min-height: 520px;

    padding: 36px;

    overflow: hidden;

    border-radius: 28px;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;

    box-shadow:
        0 30px 70px rgba(0, 0, 0, 0.14);
}

.services-system-map::before {
    position: absolute;
    top: -120px;
    right: -100px;

    width: 330px;
    height: 330px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.1);
}


/* =========================================================
   LABEL
   ========================================================= */

.services-system-label {
    position: relative;
    z-index: 3;

    display: inline-block;

    color: rgba(255, 255, 255, 0.5);

    font-size: 0.68rem;
    font-weight: 800;

    letter-spacing: 0.15em;
    line-height: 1.3;

    text-transform: uppercase;
}


/* =========================================================
   SYSTEM CORE
   ========================================================= */

.services-system-core {
    position: relative;
    z-index: 2;

    display: grid;
    justify-items: center;

    margin: 42px 0 34px;
}

.services-system-node {
    width: min(100%, 390px);

    padding: 16px 20px;

    border: 1px solid rgba(255, 255, 255, 0.11);
    border-radius: 14px;

    background: rgba(255, 255, 255, 0.05);

    text-align: center;
}

.services-system-node-main {
    border-color: rgba(196, 0, 0, 0.34);

    background: rgba(196, 0, 0, 0.08);

    box-shadow:
        0 0 28px rgba(196, 0, 0, 0.05);
}

.services-system-node span {
    display: block;

    margin-bottom: 7px;

    color: rgba(255, 255, 255, 0.36);

    font-size: 0.56rem;
    font-weight: 800;

    letter-spacing: 0.12em;
    line-height: 1;

    text-transform: uppercase;
}

.services-system-node strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.84rem;
    font-weight: 700;

    line-height: 1.45;
}

.services-system-line {
    width: 1px;
    height: 18px;

    background: rgba(196, 0, 0, 0.35);
}


/* =========================================================
   BOTTOM TAGS
   ========================================================= */

.services-system-bottom {
    position: relative;
    z-index: 3;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.services-system-bottom span {
    padding: 8px 11px;

    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 999px;

    background: rgba(255, 255, 255, 0.045);

    color: rgba(255, 255, 255, 0.68);

    font-size: 0.66rem;
    font-weight: 700;
}


/* =========================================================
   INTERNAL HERO LINKS
   ========================================================= */

.services-hero-links {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    margin-top: 58px;

    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.services-hero-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    min-height: 66px;
    padding: 0 18px;

    border-right: 1px solid var(--color-border);

    color: var(--color-dark);

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;

    transition:
        color 200ms ease,
        background-color 200ms ease;
}

.services-hero-links a:first-child {
    border-left: 1px solid var(--color-border);
}

.services-hero-links a:hover {
    color: var(--color-primary);

    background: rgba(196, 0, 0, 0.015);
}

.services-hero-links i {
    width: 15px;
    height: 15px;

    flex: 0 0 auto;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-hero-links a:hover i {
    transform: translate(2px, -2px);
}
/* =========================================================
   LEISTUNGEN – ECOMMERCE SYSTEMLANDSCHAFT
   ========================================================= */

.services-landscape-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* =========================================================
   INTRO
   ========================================================= */

.services-landscape-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-landscape-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-landscape-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-landscape-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   LAYOUT
   ========================================================= */

.services-landscape-layout {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.services-landscape-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 430px;
    padding: 34px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.services-landscape-card::after {
    position: absolute;
    right: -90px;
    bottom: -90px;

    width: 230px;
    height: 230px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.services-landscape-card:hover {
    background: rgba(196, 0, 0, 0.01);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   TOP
   ========================================================= */

.services-landscape-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 42px;
}

.services-landscape-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}

.services-landscape-icon {
    width: 28px;
    height: 28px;

    color: rgba(196, 0, 0, 0.38);

    stroke-width: 1.7;
}


/* =========================================================
   CONTENT
   ========================================================= */

.services-landscape-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 12px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
    line-height: 1.2;
}

.services-landscape-card h3 {
    position: relative;
    z-index: 2;

    max-width: 540px;
    margin: 0 0 16px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.9rem, 2.8vw, 2.8rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-landscape-card > p {
    position: relative;
    z-index: 2;

    max-width: 570px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* =========================================================
   INTERNAL LINKS
   ========================================================= */

.services-landscape-links {
    position: relative;
    z-index: 2;

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: auto;
    padding-top: 32px;
}

.services-landscape-links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    min-height: 40px;

    padding: 9px 12px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.76rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 200ms ease,
        border-color 200ms ease,
        background-color 200ms ease;
}

.services-landscape-links a:hover {
    color: var(--color-primary);

    border-color: rgba(196, 0, 0, 0.18);

    background: rgba(196, 0, 0, 0.02);
}

.services-landscape-links i {
    width: 14px;
    height: 14px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-landscape-links a:hover i {
    transform: translateX(3px);
}


/* =========================================================
   STATEMENT
   ========================================================= */

.services-landscape-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-landscape-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-landscape-statement p {
    max-width: 920px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-landscape-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – ECOMMERCE & SHOPSYSTEME
   ========================================================= */

.services-shops-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* =========================================================
   INTRO
   ========================================================= */

.services-shops-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-shops-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-shops-heading h2 {
    max-width: 800px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-shops-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* =========================================================
   GRID
   ========================================================= */

.services-shops-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* =========================================================
   CARD
   ========================================================= */

.services-shop-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 540px;
    padding: 34px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.services-shop-card::after {
    position: absolute;
    right: -100px;
    bottom: -100px;

    width: 260px;
    height: 260px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.services-shop-card:hover {
    transform: translateY(-4px);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}


/* =========================================================
   TOP
   ========================================================= */

.services-shop-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 48px;
}

.services-shop-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-shop-badge {
    padding: 7px 10px;

    border: 1px solid rgba(196, 0, 0, 0.14);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.02);

    color: var(--color-primary);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* =========================================================
   CONTENT
   ========================================================= */

.services-shop-content {
    position: relative;
    z-index: 2;
}

.services-shop-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.services-shop-content h3 {
    margin: 0 0 20px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.02;
}

.services-shop-content > p {
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.72;
}


/* =========================================================
   FEATURES
   ========================================================= */

.services-shop-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 28px;
}

.services-shop-features span {
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 650;
}


/* =========================================================
   INTERNAL LINK
   ========================================================= */

.services-shop-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;
    padding-top: 34px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-shop-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-shop-link:hover {
    color: var(--color-primary);
}

.services-shop-link:hover i {
    transform: translateX(4px);
}
/* =========================================================
   LEISTUNGEN – ERP & WARENWIRTSCHAFT
   ========================================================= */

.services-erp-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* INTRO */

.services-erp-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-erp-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-erp-heading h2 {
    max-width: 820px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-erp-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-erp-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* CARD */

.services-erp-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 430px;
    padding: 34px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.services-erp-card::after {
    position: absolute;
    right: -90px;
    bottom: -90px;

    width: 230px;
    height: 230px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.services-erp-card:hover {
    transform: translateY(-3px);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.045);
}


/* TOP */

.services-erp-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 42px;
}

.services-erp-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-erp-badge {
    padding: 7px 10px;

    border: 1px solid rgba(196, 0, 0, 0.14);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.02);

    color: var(--color-primary);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* CONTENT */

.services-erp-content {
    position: relative;
    z-index: 2;
}

.services-erp-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.services-erp-content h3 {
    max-width: 560px;
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 2.8vw, 2.9rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.03;
}

.services-erp-content > p {
    max-width: 590px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.72;
}


/* FEATURES */

.services-erp-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 28px;
}

.services-erp-features span {
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 650;
}


/* INTERNAL LINK */

.services-erp-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;
    padding-top: 34px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-erp-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-erp-link:hover {
    color: var(--color-primary);
}

.services-erp-link:hover i {
    transform: translateX(4px);
}


/* COMBINATION */

.services-erp-card-combination {
    border-color: rgba(196, 0, 0, 0.15);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.028),
            rgba(255, 255, 255, 0) 55%
        ),
        var(--color-white);
}
/* =========================================================
   LEISTUNGEN – VERTRIEB & TRANSAKTIONEN
   ========================================================= */

.services-sales-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* INTRO */

.services-sales-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-sales-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-sales-heading h2 {
    max-width: 820px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-sales-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-sales-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* PANEL */

.services-sales-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 500px;
    padding: 36px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.services-sales-panel::after {
    position: absolute;
    right: -100px;
    bottom: -100px;

    width: 270px;
    height: 270px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.026);

    pointer-events: none;
}

.services-sales-panel:hover {
    transform: translateY(-3px);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}


/* TOP */

.services-sales-panel-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 50px;
}

.services-sales-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-sales-badge {
    padding: 7px 10px;

    border: 1px solid rgba(196, 0, 0, 0.14);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.02);

    color: var(--color-primary);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* CONTENT */

.services-sales-content {
    position: relative;
    z-index: 2;
}

.services-sales-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.services-sales-content h3 {
    max-width: 560px;
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.2rem, 3vw, 3.1rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.03;
}

.services-sales-content > p {
    max-width: 590px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.72;
}


/* PLATFORM TAGS */

.services-sales-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 30px;
}

.services-sales-platforms span {
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 650;
}


/* INTERNAL LINK */

.services-sales-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;
    padding-top: 36px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-sales-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-sales-link:hover {
    color: var(--color-primary);
}

.services-sales-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-sales-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-sales-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-sales-statement p {
    max-width: 900px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-sales-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – SCHNITTSTELLEN & INDIVIDUELLE ENTWICKLUNG
   ========================================================= */

.services-integrations-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* INTRO */

.services-integrations-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-integrations-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-integrations-heading h2 {
    max-width: 840px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-integrations-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* MAIN LAYOUT */

.services-integrations-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap: 28px;
}


/* MAIN PANEL */

.services-integrations-main {
    position: relative;

    min-height: 560px;
    padding: 42px;

    overflow: hidden;

    border-radius: var(--radius-card);

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;
}

.services-integrations-main::after {
    position: absolute;
    right: -120px;
    bottom: -120px;

    width: 340px;
    height: 340px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.09);

    pointer-events: none;
}

.services-integrations-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.services-integrations-main h3 {
    position: relative;
    z-index: 2;

    max-width: 600px;
    margin: 0 0 24px;

    color: #fff;
    font-family: var(--font-heading);

    font-size: clamp(2.6rem, 3.8vw, 4.1rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1;
}

.services-integrations-main > p {
    position: relative;
    z-index: 2;

    max-width: 580px;
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.97rem;
    line-height: 1.75;
}


/* FLOW */

.services-integrations-flow {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    margin-top: 54px;
    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-integrations-flow > div:not(.services-integrations-flow-arrow) {
    display: grid;
    gap: 7px;
}

.services-integrations-flow span {
    color: rgba(255, 255, 255, 0.36);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.services-integrations-flow strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.88rem;
}

.services-integrations-flow-arrow {
    display: flex;
    align-items: center;
}

.services-integrations-flow-arrow span {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.4);
}

.services-integrations-flow-arrow i {
    width: 20px;
    height: 20px;

    color: var(--color-primary);

    stroke-width: 1.7;
}


/* EXAMPLES */

.services-integrations-examples {
    border-top: 1px solid var(--color-border);
}

.services-integrations-example {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 20px;

    padding: 26px 4px;

    border-bottom: 1px solid var(--color-border);
}

.services-integrations-number {
    padding-top: 5px;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.services-integrations-example h3 {
    margin: 0 0 8px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.28rem;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.15;
}

.services-integrations-example p {
    max-width: 620px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}

.services-integrations-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-top: 14px;
}

.services-integrations-tags span {
    padding: 7px 10px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: var(--color-white);

    color: var(--color-dark);

    font-size: 0.66rem;
    font-weight: 700;
}


/* FOOTER CTA */

.services-integrations-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 28px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);
}

.services-integrations-footer .section-eyebrow {
    margin-bottom: 14px;
}

.services-integrations-footer h3 {
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-integrations-footer p {
    max-width: 650px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}

.services-integrations-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-integrations-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-integrations-link:hover {
    color: var(--color-primary);
}

.services-integrations-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-integrations-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-integrations-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-integrations-statement p {
    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-integrations-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – MIGRATION & SYSTEMWECHSEL
   ========================================================= */

.services-migration-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* INTRO */

.services-migration-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-migration-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-migration-heading h2 {
    max-width: 840px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-migration-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* LAYOUT */

.services-migration-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(420px, 1.05fr);

    gap: 28px;
}


/* MAIN */

.services-migration-main {
    position: relative;

    min-height: 560px;
    padding: 42px;

    overflow: hidden;

    border-radius: var(--radius-card);

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.026) 1px,
            transparent 1px
        ),
        #171717;

    background-size: 40px 40px;
}

.services-migration-main::after {
    position: absolute;
    right: -120px;
    bottom: -120px;

    width: 340px;
    height: 340px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.09);

    pointer-events: none;
}

.services-migration-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.45);

    font-size: 0.66rem;
    font-weight: 800;

    letter-spacing: 0.14em;
}

.services-migration-main h3 {
    position: relative;
    z-index: 2;

    max-width: 620px;
    margin: 0 0 24px;

    color: #fff;
    font-family: var(--font-heading);

    font-size: clamp(2.6rem, 3.8vw, 4.1rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1;
}

.services-migration-main > p {
    position: relative;
    z-index: 2;

    max-width: 580px;
    margin: 0;

    color: rgba(255, 255, 255, 0.62);

    font-size: 0.97rem;
    line-height: 1.75;
}


/* ROUTE */

.services-migration-route {
    position: relative;
    z-index: 2;

    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        90px
        minmax(0, 1fr);

    gap: 14px;
    align-items: center;

    margin-top: 54px;
    padding-top: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.services-migration-route > div:not(.services-migration-route-arrow) {
    display: grid;
    gap: 7px;
}

.services-migration-route span {
    color: rgba(255, 255, 255, 0.36);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.services-migration-route strong {
    color: rgba(255, 255, 255, 0.9);

    font-size: 0.88rem;
}

.services-migration-route-arrow {
    display: flex;
    align-items: center;
}

.services-migration-route-arrow span {
    flex: 1;

    height: 1px;

    background: rgba(196, 0, 0, 0.4);
}

.services-migration-route-arrow i {
    width: 20px;
    height: 20px;

    color: var(--color-primary);

    stroke-width: 1.7;
}


/* EXAMPLES */

.services-migration-examples {
    border-top: 1px solid var(--color-border);
}

.services-migration-example {
    display: grid;
    grid-template-columns:
        58px
        minmax(0, 1fr);

    gap: 20px;

    padding: 27px 4px;

    border-bottom: 1px solid var(--color-border);
}

.services-migration-number {
    padding-top: 5px;

    color: var(--color-primary);

    font-size: 0.72rem;
    font-weight: 800;

    letter-spacing: 0.15em;
}

.services-migration-example h3 {
    margin: 0 0 8px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: 1.3rem;
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.15;
}

.services-migration-example p {
    max-width: 620px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.91rem;
    line-height: 1.65;
}


/* FOOTER */

.services-migration-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 28px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-light);
}

.services-migration-footer .section-eyebrow {
    margin-bottom: 14px;
}

.services-migration-footer h3 {
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-migration-footer p {
    max-width: 650px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}

.services-migration-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-migration-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-migration-link:hover {
    color: var(--color-primary);
}

.services-migration-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-migration-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-migration-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-migration-statement p {
    max-width: 920px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-migration-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – TECHNISCHE BASIS
   ========================================================= */

.services-foundation-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* INTRO */

.services-foundation-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-foundation-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-foundation-heading h2 {
    max-width: 840px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-foundation-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-foundation-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;
}


/* PANEL */

.services-foundation-panel {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 500px;
    padding: 36px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        transform 240ms ease;
}

.services-foundation-panel::after {
    position: absolute;
    right: -100px;
    bottom: -100px;

    width: 270px;
    height: 270px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.026);

    pointer-events: none;
}

.services-foundation-panel:hover {
    transform: translateY(-3px);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}


/* TOP */

.services-foundation-panel-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 50px;
}

.services-foundation-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-foundation-badge {
    padding: 7px 10px;

    border: 1px solid rgba(196, 0, 0, 0.14);
    border-radius: 999px;

    background: rgba(196, 0, 0, 0.02);

    color: var(--color-primary);

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


/* CONTENT */

.services-foundation-content {
    position: relative;
    z-index: 2;
}

.services-foundation-kicker {
    display: block;

    margin-bottom: 13px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.services-foundation-content h3 {
    max-width: 560px;
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2.2rem, 3vw, 3.1rem);
    font-weight: 700;

    letter-spacing: -0.045em;
    line-height: 1.03;
}

.services-foundation-content > p {
    max-width: 590px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.72;
}


/* FEATURES */

.services-foundation-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;

    margin-top: 30px;
}

.services-foundation-features span {
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: rgba(0, 0, 0, 0.012);

    color: var(--color-dark);

    font-size: 0.7rem;
    font-weight: 650;
}


/* LINK */

.services-foundation-link {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    width: fit-content;

    margin-top: auto;
    padding-top: 36px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-foundation-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-foundation-link:hover {
    color: var(--color-primary);
}

.services-foundation-link:hover i {
    transform: translateX(4px);
}


/* PARTNER NOTE */

.services-foundation-note {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 24px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);
}

.services-foundation-note .section-eyebrow {
    margin-bottom: 14px;
}

.services-foundation-note h3 {
    max-width: 600px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-foundation-note p {
    max-width: 650px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}

.services-foundation-note-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-foundation-note-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-foundation-note-link:hover {
    color: var(--color-primary);
}

.services-foundation-note-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-foundation-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-foundation-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-foundation-statement p {
    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-foundation-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – BETREUUNG NACH DEM GO-LIVE
   ========================================================= */

.services-support-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* INTRO */

.services-support-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-support-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-support-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-support-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-support-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* CARD */

.services-support-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.services-support-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.services-support-card:hover {
    background: rgba(196, 0, 0, 0.012);

    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* HEADER */

.services-support-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.services-support-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-support-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.services-support-card:hover .services-support-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* CONTENT */

.services-support-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.services-support-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* FOOTER */

.services-support-footer {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 28px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-light);
}

.services-support-footer .section-eyebrow {
    margin-bottom: 14px;
}

.services-support-footer h3 {
    max-width: 620px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-support-footer p {
    max-width: 650px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}

.services-support-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-support-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-support-link:hover {
    color: var(--color-primary);
}

.services-support-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-support-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-support-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-support-statement p {
    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-support-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – PROZESS
   ========================================================= */

.services-process-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-light);
}


/* INTRO */

.services-process-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-process-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-process-heading h2 {
    max-width: 780px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-process-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-process-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* CARD */

.services-process-card {
    position: relative;

    min-height: 285px;
    padding: 30px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-white);

    transition:
        border-color 240ms ease,
        box-shadow 240ms ease,
        background-color 240ms ease;
}

.services-process-card::after {
    position: absolute;
    right: -70px;
    bottom: -70px;

    width: 175px;
    height: 175px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.028);

    pointer-events: none;
}

.services-process-card:hover {
    background: rgba(196, 0, 0, 0.012);

    border-color: rgba(196, 0, 0, 0.15);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.04);
}


/* HEADER */

.services-process-card-header {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.services-process-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-process-icon {
    width: 27px;
    height: 27px;

    color: rgba(196, 0, 0, 0.36);

    stroke-width: 1.7;

    transition: color 220ms ease;
}

.services-process-card:hover .services-process-icon {
    color: rgba(196, 0, 0, 0.72);
}


/* CONTENT */

.services-process-card h3 {
    position: relative;
    z-index: 2;

    min-height: 46px;
    margin: 0 0 14px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.4rem, 1.8vw, 1.7rem);
    font-weight: 700;

    letter-spacing: -0.03em;
    line-height: 1.15;
}

.services-process-card p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.7;
}


/* STATEMENT */

.services-process-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-process-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-process-statement p {
    max-width: 820px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-process-statement strong {
    color: var(--color-dark);
    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – WAS BRAUCHEN WIR WIRKLICH?
   ========================================================= */

.services-needs-section {
    position: relative;
    overflow: hidden;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* INTRO */

.services-needs-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-needs-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-needs-heading h2 {
    max-width: 820px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-needs-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* GRID */

.services-needs-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 24px;
}


/* CARD */

.services-needs-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 540px;
    padding: 34px;

    overflow: hidden;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-light);

    transition:
        transform 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}

.services-needs-card::after {
    position: absolute;
    right: -100px;
    bottom: -100px;

    width: 260px;
    height: 260px;

    content: "";

    border-radius: 50%;

    background: rgba(196, 0, 0, 0.025);

    pointer-events: none;
}

.services-needs-card:hover {
    transform: translateY(-4px);

    border-color: rgba(196, 0, 0, 0.16);

    box-shadow:
        0 20px 46px rgba(0, 0, 0, 0.045);
}

.services-needs-card-focus {
    border-color: rgba(196, 0, 0, 0.16);

    background:
        linear-gradient(
            145deg,
            rgba(196, 0, 0, 0.03),
            rgba(255, 255, 255, 0) 58%
        ),
        var(--color-light);
}


/* TOP */

.services-needs-card-top {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    margin-bottom: 46px;
}

.services-needs-number {
    color: var(--color-primary);

    font-size: 0.78rem;
    font-weight: 800;

    letter-spacing: 0.16em;
}

.services-needs-icon {
    width: 28px;
    height: 28px;

    color: rgba(196, 0, 0, 0.38);

    stroke-width: 1.7;
}


/* CONTENT */

.services-needs-kicker {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 14px;

    color: var(--color-muted);

    font-size: 0.64rem;
    font-weight: 800;

    letter-spacing: 0.13em;
}

.services-needs-card h3 {
    position: relative;
    z-index: 2;

    max-width: 520px;
    margin: 0 0 18px;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 2.8vw, 2.8rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.04;
}

.services-needs-card > p {
    position: relative;
    z-index: 2;

    margin: 0;

    color: var(--color-muted);

    font-size: 0.95rem;
    line-height: 1.72;
}


/* PATH */

.services-needs-path {
    position: relative;
    z-index: 2;

    margin-top: auto;
    padding-top: 34px;
}

.services-needs-path > span {
    display: block;

    margin-bottom: 13px;

    color: var(--color-muted);

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.11em;

    text-transform: uppercase;
}

.services-needs-path > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.services-needs-path a {
    display: inline-flex;
    align-items: center;

    min-height: 36px;
    padding: 8px 11px;

    border: 1px solid var(--color-border);
    border-radius: 999px;

    background: var(--color-white);

    color: var(--color-dark);

    font-size: 0.69rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 200ms ease,
        border-color 200ms ease;
}

.services-needs-path a:hover {
    color: var(--color-primary);

    border-color: rgba(196, 0, 0, 0.2);
}


/* BOTTOM */

.services-needs-bottom {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(420px, 1.1fr);

    gap: 90px;
    align-items: center;

    margin-top: 24px;
    padding: 40px;

    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);

    background: var(--color-light);
}

.services-needs-bottom .section-eyebrow {
    margin-bottom: 14px;
}

.services-needs-bottom h3 {
    max-width: 620px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 700;

    letter-spacing: -0.04em;
    line-height: 1.05;
}

.services-needs-bottom p {
    max-width: 650px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.94rem;
    line-height: 1.7;
}

.services-needs-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 22px;

    color: var(--color-dark);

    font-size: 0.84rem;
    font-weight: 800;

    text-decoration: none;
}

.services-needs-link i {
    width: 16px;
    height: 16px;

    color: var(--color-primary);

    stroke-width: 1.8;

    transition: transform 200ms ease;
}

.services-needs-link:hover {
    color: var(--color-primary);
}

.services-needs-link:hover i {
    transform: translateX(4px);
}


/* STATEMENT */

.services-needs-statement {
    display: grid;
    grid-template-columns:
        minmax(40px, 1fr)
        auto
        minmax(40px, 1fr);

    gap: 28px;
    align-items: center;

    margin-top: 58px;
}

.services-needs-statement-line {
    width: 100%;
    height: 1px;

    background: var(--color-border);
}

.services-needs-statement p {
    max-width: 900px;
    margin: 0;

    color: var(--color-muted);

    font-size: 1rem;
    line-height: 1.5;

    text-align: center;
}

.services-needs-statement strong {
    color: var(--color-dark);

    font-weight: 800;
}
/* =========================================================
   LEISTUNGEN – FAQ
   ========================================================= */

.services-faq-section {
    position: relative;

    padding: var(--section-space-desktop) 0;

    background: var(--color-white);
}


/* INTRO */

.services-faq-intro {
    display: grid;
    grid-template-columns:
        minmax(0, 0.92fr)
        minmax(420px, 1.08fr);

    column-gap: 110px;
    align-items: center;

    margin-bottom: 72px;
}

.services-faq-heading .section-eyebrow {
    margin-bottom: 24px;
}

.services-faq-heading h2 {
    max-width: 760px;
    margin: 0;

    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(3rem, 4.7vw, 5rem);
    font-weight: 700;

    letter-spacing: -0.05em;
    line-height: 1.01;
}

.services-faq-intro .section-intro {
    align-self: center;

    max-width: 660px;
    margin: 35px 0 0;

    color: var(--color-muted);

    font-size: 1.02rem;
    line-height: 1.75;
}


/* LIST */

.services-faq-list {
    width: 100%;

    border-top: 1px solid var(--color-border);
}


/* ITEM */

.services-faq-item {
    width: 100%;

    border-bottom: 1px solid var(--color-border);
}

.services-faq-item summary {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;
    align-items: center;

    min-height: 92px;
    padding: 20px 0;

    cursor: pointer;
    list-style: none;

    transition:
        background-color 220ms ease;
}

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

.services-faq-item summary::marker {
    content: "";
}

.services-faq-item summary:hover {
    background: rgba(196, 0, 0, 0.012);
}


/* NUMBER */

.services-faq-number {
    color: var(--color-primary);

    font-size: 0.76rem;
    font-weight: 800;

    letter-spacing: 0.16em;
    line-height: 1;
}


/* QUESTION */

.services-faq-question {
    color: var(--color-dark);
    font-family: var(--font-heading);

    font-size: clamp(1.2rem, 1.7vw, 1.55rem);
    font-weight: 700;

    letter-spacing: -0.025em;
    line-height: 1.25;
}


/* TOGGLE */

.services-faq-toggle {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    justify-self: end;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.35);

    transition:
        border-color 220ms ease,
        background-color 220ms ease,
        transform 280ms ease;
}

.services-faq-toggle i {
    width: 18px;
    height: 18px;

    color: var(--color-primary);

    stroke-width: 1.8;
}

.services-faq-item summary:hover
.services-faq-toggle {
    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}

.services-faq-item[open]
.services-faq-toggle {
    transform: rotate(45deg);

    border-color: rgba(196, 0, 0, 0.25);

    background: var(--color-white);
}


/* ANSWER */

.services-faq-answer {
    display: grid;
    grid-template-columns:
        70px
        minmax(0, 1fr)
        46px;

    gap: 22px;

    padding: 0 0 30px;
}

.services-faq-answer p {
    grid-column: 2;

    max-width: 850px;
    margin: 0;

    color: var(--color-muted);

    font-size: 0.97rem;
    line-height: 1.75;
}
/* =========================================================
   NAVIGATION TOGGLE ACTIVE
   ========================================================= */

.navigation-toggle span {
    transition:
        transform 220ms ease,
        opacity 180ms ease;
}

.navigation-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.navigation-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.navigation-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}
/* =========================================================
   GLOBAL – NAVIGATION TOGGLE FIX
   ========================================================= */

.navigation-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 0;

    margin-left: auto;

    border: 1px solid var(--color-border);
    border-radius: 12px;

    background: var(--color-white);

    align-items: center;
    justify-content: center;

    position: relative;

    cursor: pointer;
}


/* Linien */

.navigation-toggle span {
    position: absolute;
    left: 50%;

    width: 22px;
    height: 2px;

    background: var(--color-dark);

    border-radius: 999px;

    transform: translateX(-50%);

    transition:
        transform 220ms ease,
        opacity 180ms ease,
        top 220ms ease;
}


/* Ausgangszustand */

.navigation-toggle span:nth-child(1) {
    top: 15px;
}

.navigation-toggle span:nth-child(2) {
    top: 22px;
}

.navigation-toggle span:nth-child(3) {
    top: 29px;
}


/* Geöffnet = X */

.navigation-toggle.is-active span:nth-child(1) {
    top: 22px;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.navigation-toggle.is-active span:nth-child(2) {
    opacity: 0;
}

.navigation-toggle.is-active span:nth-child(3) {
    top: 22px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}


/* Mobile sichtbar */

@media (max-width: 992px) {

    .navigation-toggle {
        display: flex;
    }

}
.navigation-toggle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 46px;
    padding: 0;
    gap: 5px;
}

.navigation-toggle span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 0;
    background: currentColor;
}
/* Alle Leistungen Hero – Grafik höher positionieren */
@media (min-width: 901px) {
    .services-hero-content {
        transform: translateY(-30px);
    }
}
/* Einheitliche Größe aller Referenz-Screenshots */
.reference-showcase {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 72px;
}

.reference-showcase-left .reference-showcase-visual {
    grid-column: 1;
    grid-row: 1;
}

.reference-showcase-left .reference-showcase-content {
    grid-column: 2;
    grid-row: 1;
}

.reference-showcase-right .reference-showcase-content {
    grid-column: 1;
    grid-row: 1;
}

.reference-showcase-right .reference-showcase-visual {
    grid-column: 2;
    grid-row: 1;
}

.reference-showcase-visual {
    width: 100%;
    max-width: 556px;
    min-width: 0;
    justify-self: center;
}

.reference-browser-frame {
    width: 100%;
}

.reference-browser-frame img {
    display: block;
    width: 100%;
    height: auto;
}
.form-success {
    position: relative;

    margin: 0 0 28px;
    padding: 18px 22px 18px 58px;

    background: #f1f8f4;
    border: 1px solid #b9ddc8;
    border-radius: 14px;

    color: #183c27;

    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
}

.form-success::before {
    content: "✓";

    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    background: #16834b;
    color: #ffffff;
    border-radius: 50%;

    font-size: 15px;
    font-weight: 700;
}